From 47301232d9736d1394c2ddbf61161833c59fca0a Mon Sep 17 00:00:00 2001
From: Lauren Hitchon <lauren@hitchon.me>
Date: Tue, 11 Jun 2024 10:54:15 +1000
Subject: [PATCH 1/6] Fix drag behaviour

---
 src/components/card-carousel/_carousel.hbs    |  2 +-
 src/components/card-carousel/carousel.js      | 26 +++++++++----------
 src/components/card-carousel/swipe-content.js |  8 +++---
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/card-carousel/_carousel.hbs b/src/components/card-carousel/_carousel.hbs
index 4b9a4de9..d5a7dc18 100644
--- a/src/components/card-carousel/_carousel.hbs
+++ b/src/components/card-carousel/_carousel.hbs
@@ -1,4 +1,4 @@
-{{#if default}}<div class="nsw-carousel js-carousel" data-description="Highlighted latest news"{{#if pagination}} data-navigation-pagination="on"{{/if}}>
+{{#if default}}<div class="nsw-carousel js-carousel" data-description="Highlighted latest news" data-drag="on"{{#if pagination}} data-navigation-pagination="on"{{/if}}>
   <p class="sr-only">Carousel items</p>
   <div class="nsw-carousel__wrapper js-carousel__wrapper">
     <ol class="nsw-carousel__list">
diff --git a/src/components/card-carousel/carousel.js b/src/components/card-carousel/carousel.js
index 3f15fe79..5c164427 100644
--- a/src/components/card-carousel/carousel.js
+++ b/src/components/card-carousel/carousel.js
@@ -3,6 +3,7 @@ import SwipeContent from './swipe-content'
 /* eslint-disable no-new, max-len */
 class Carousel {
   constructor(element) {
+    this.element = element
     this.containerClass = 'nsw-carousel-container'
     this.controlClass = 'js-carousel__control'
     this.wrapperClass = 'js-carousel__wrapper'
@@ -10,9 +11,9 @@ class Carousel {
     this.counterTorClass = 'js-carousel__counter-tot'
     this.navClass = 'js-carousel__navigation'
     this.navItemClass = 'js-carousel__nav-item'
-    this.navigationItemClass = element.getAttribute('data-navigation-item-class') ? element.getAttribute('data-navigation-item-class') : 'nsw-carousel__nav-item'
-    this.navigationClass = element.getAttribute('data-navigation-class') ? element.getAttribute('data-navigation-class') : 'nsw-carousel__navigation'
-    this.paginationClass = element.getAttribute('data-pagination-class') ? element.getAttribute('data-pagination-class') : 'nsw-carousel__navigation--pagination'
+    this.navigationItemClass = this.element.getAttribute('data-navigation-item-class') ? this.element.getAttribute('data-navigation-item-class') : 'nsw-carousel__nav-item'
+    this.navigationClass = this.element.getAttribute('data-navigation-class') ? this.element.getAttribute('data-navigation-class') : 'nsw-carousel__navigation'
+    this.paginationClass = this.element.getAttribute('data-pagination-class') ? this.element.getAttribute('data-pagination-class') : 'nsw-carousel__navigation--pagination'
     this.draggingClass = 'nsw-carousel--is-dragging'
     this.loadedClass = 'nsw-carousel--loaded'
     this.animateClass = 'nsw-carousel__list--animating'
@@ -22,21 +23,20 @@ class Carousel {
     this.hideControlsClass = 'nsw-carousel--hide-controls'
     this.hideClass = 'nsw-display-none'
     this.centerClass = 'nsw-justify-content-center'
-    this.element = element
     this.listWrapper = this.element.querySelector(`.${this.wrapperClass}`)
     this.list = this.listWrapper ? this.listWrapper.querySelector('ol') : false
     this.items = this.list ? this.list.getElementsByTagName('li') : false
     this.controls = this.element.querySelectorAll(`.${this.controlClass}`)
     this.counter = this.element.querySelectorAll(`.${this.counterClass}`)
     this.counterTor = this.element.querySelectorAll(`.${this.counterTorClass}`)
-    this.ariaLabel = (element.getAttribute('data-description')) ? element.getAttribute('data-description') : 'Card carousel'
-    this.drag = !((element.getAttribute('data-drag') && element.getAttribute('data-drag') === 'off'))
-    this.loop = !!((element.getAttribute('data-loop') && element.getAttribute('data-loop') === 'on'))
-    this.nav = !((element.getAttribute('data-navigation') && element.getAttribute('data-navigation') === 'off'))
-    this.navigationPagination = !!((element.getAttribute('data-navigation-pagination') && element.getAttribute('data-navigation-pagination') === 'on'))
-    this.overflowItems = !((element.getAttribute('data-overflow-items') && element.getAttribute('data-overflow-items') === 'off'))
-    this.alignControls = element.getAttribute('data-align-controls') ? element.getAttribute('data-align-controls') : false
-    this.justifyContent = !!((element.getAttribute('data-justify-content') && element.getAttribute('data-justify-content') === 'on'))
+    this.ariaLabel = (this.element.getAttribute('data-description')) ? this.element.getAttribute('data-description') : 'Card carousel'
+    this.drag = !((this.element.getAttribute('data-drag') && this.element.getAttribute('data-drag') === 'off'))
+    this.loop = !!((this.element.getAttribute('data-loop') && this.element.getAttribute('data-loop') === 'on'))
+    this.nav = !((this.element.getAttribute('data-navigation') && this.element.getAttribute('data-navigation') === 'off'))
+    this.navigationPagination = !!((this.element.getAttribute('data-navigation-pagination') && this.element.getAttribute('data-navigation-pagination') === 'on'))
+    this.overflowItems = !((this.element.getAttribute('data-overflow-items') && this.element.getAttribute('data-overflow-items') === 'off'))
+    this.alignControls = this.element.getAttribute('data-align-controls') ? this.element.getAttribute('data-align-controls') : false
+    this.justifyContent = !!((this.element.getAttribute('data-justify-content') && this.element.getAttribute('data-justify-content') === 'on'))
     this.initItems = []
     this.itemsNb = this.items.length
     this.visibItemsNb = 1
@@ -177,7 +177,7 @@ class Carousel {
     }
 
     if (this.drag && window.requestAnimationFrame) {
-      new SwipeContent(this.element)
+      new SwipeContent(this.element).init()
       this.element.addEventListener('dragStart', (event) => {
         if (event.detail.origin && event.detail.origin.closest(`.${this.controlClass}`)) return
         if (event.detail.origin && event.detail.origin.closest(`.${this.navClass}`)) return
diff --git a/src/components/card-carousel/swipe-content.js b/src/components/card-carousel/swipe-content.js
index 2f1505ad..c2564987 100644
--- a/src/components/card-carousel/swipe-content.js
+++ b/src/components/card-carousel/swipe-content.js
@@ -12,7 +12,6 @@ class SwipeContent {
     this.dragging = false
     this.intervalId = false
     this.changedTouches = false
-    this.init()
   }
 
   init() {
@@ -107,12 +106,13 @@ class SwipeContent {
     this.dragging = false
   }
 
-  drag() {
+  drag(event) {
     if (!this.dragging) return
+
     if (!window.requestAnimationFrame) {
-      this.intervalId = setTimeout(() => { this.emitDrag.bind(this) }, 250)
+      this.intervalId = setTimeout(() => { this.emitDrag(event) }, 250)
     } else {
-      this.intervalId = window.requestAnimationFrame(this.emitDrag.bind(this))
+      this.intervalId = window.requestAnimationFrame(() => { this.emitDrag(event) })
     }
   }
 

From e44b251de553867c97a1c56d038cb8a93477c32d Mon Sep 17 00:00:00 2001
From: Lauren Hitchon <lauren@hitchon.me>
Date: Tue, 11 Jun 2024 12:32:34 +1000
Subject: [PATCH 2/6] Add testing/example conditionals, clean carousel js code

---
 src/components/card-carousel/_carousel.hbs |  2 +-
 src/components/card-carousel/carousel.js   | 29 +++++-----------------
 2 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/src/components/card-carousel/_carousel.hbs b/src/components/card-carousel/_carousel.hbs
index d5a7dc18..8735aec6 100644
--- a/src/components/card-carousel/_carousel.hbs
+++ b/src/components/card-carousel/_carousel.hbs
@@ -1,4 +1,4 @@
-{{#if default}}<div class="nsw-carousel js-carousel" data-description="Highlighted latest news" data-drag="on"{{#if pagination}} data-navigation-pagination="on"{{/if}}>
+{{#if default}}<div class="nsw-carousel js-carousel" data-description="Highlighted latest news"{{#if loop}} data-loop="on" data-navigation="off"{{/if}}{{#if drag}} data-drag="on"{{/if}}{{#if pagination}} data-navigation-pagination="on"{{/if}}>
   <p class="sr-only">Carousel items</p>
   <div class="nsw-carousel__wrapper js-carousel__wrapper">
     <ol class="nsw-carousel__list">
diff --git a/src/components/card-carousel/carousel.js b/src/components/card-carousel/carousel.js
index 5c164427..6eff83d1 100644
--- a/src/components/card-carousel/carousel.js
+++ b/src/components/card-carousel/carousel.js
@@ -1,8 +1,9 @@
 import SwipeContent from './swipe-content'
 
-/* eslint-disable no-new, max-len */
+/* eslint-disable max-len */
 class Carousel {
   constructor(element) {
+    // super(element)
     this.element = element
     this.containerClass = 'nsw-carousel-container'
     this.controlClass = 'js-carousel__control'
@@ -29,13 +30,11 @@ class Carousel {
     this.controls = this.element.querySelectorAll(`.${this.controlClass}`)
     this.counter = this.element.querySelectorAll(`.${this.counterClass}`)
     this.counterTor = this.element.querySelectorAll(`.${this.counterTorClass}`)
-    this.ariaLabel = (this.element.getAttribute('data-description')) ? this.element.getAttribute('data-description') : 'Card carousel'
-    this.drag = !((this.element.getAttribute('data-drag') && this.element.getAttribute('data-drag') === 'off'))
+    this.ariaLabel = this.element.getAttribute('data-description') ? this.element.getAttribute('data-description') : 'Card carousel'
+    this.dragEnabled = !!((this.element.getAttribute('data-drag') && this.element.getAttribute('data-drag') === 'on'))
     this.loop = !!((this.element.getAttribute('data-loop') && this.element.getAttribute('data-loop') === 'on'))
     this.nav = !((this.element.getAttribute('data-navigation') && this.element.getAttribute('data-navigation') === 'off'))
     this.navigationPagination = !!((this.element.getAttribute('data-navigation-pagination') && this.element.getAttribute('data-navigation-pagination') === 'on'))
-    this.overflowItems = !((this.element.getAttribute('data-overflow-items') && this.element.getAttribute('data-overflow-items') === 'off'))
-    this.alignControls = this.element.getAttribute('data-align-controls') ? this.element.getAttribute('data-align-controls') : false
     this.justifyContent = !!((this.element.getAttribute('data-justify-content') && this.element.getAttribute('data-justify-content') === 'on'))
     this.initItems = []
     this.itemsNb = this.items.length
@@ -123,7 +122,6 @@ class Carousel {
     if (this.items.length <= this.visibItemsNb) this.totTranslate = 0
 
     this.centerItems()
-    this.alignControlsFunc()
   }
 
   carouselCreateContainer() {
@@ -176,7 +174,8 @@ class Carousel {
       this.emitCarouselActiveItemsEvent()
     }
 
-    if (this.drag && window.requestAnimationFrame) {
+    if (this.dragEnabled && window.requestAnimationFrame) {
+      // super.init()
       new SwipeContent(this.element).init()
       this.element.addEventListener('dragStart', (event) => {
         if (event.detail.origin && event.detail.origin.closest(`.${this.controlClass}`)) return
@@ -206,7 +205,6 @@ class Carousel {
         this.resetCarouselControls()
         this.setCounterItem()
         this.centerItems()
-        this.alignControlsFunc()
         this.emitCarouselActiveItemsEvent()
       }, 250)
     })
@@ -649,20 +647,6 @@ class Carousel {
     this.list.classList.toggle(this.centerClass, this.items.length < this.visibItemsNb)
   }
 
-  alignControlsFunc() {
-    if (this.controls.length < 1 || !this.alignControls) return
-    if (!this.controlsAlignEl) {
-      this.controlsAlignEl = this.element.querySelector(this.alignControls)
-    }
-    if (!this.controlsAlignEl) return
-    const translate = (this.element.offsetHeight - this.controlsAlignEl.offsetHeight)
-
-    this.controls.forEach((element) => {
-      const el = element
-      el.style.marginBottom = `${translate}px`
-    })
-  }
-
   emitCarouselActiveItemsEvent() {
     this.emitCarouselEvents('carousel-active-items', { firstSelectedItem: this.selectedItem, visibleItemsNb: this.visibItemsNb })
   }
@@ -673,7 +657,6 @@ class Carousel {
   }
 
   resetVisibilityOverflowItems(j) {
-    if (!this.overflowItems) return
     const itemWidth = this.containerWidth / this.items.length
     const delta = (window.innerWidth - itemWidth * this.visibItemsNb) / 2
     const overflowItems = Math.ceil(delta / itemWidth)

From 43f6fddf7cc4e15218ab642fb62b33d26bca372a Mon Sep 17 00:00:00 2001
From: Lauren Hitchon <lauren@hitchon.me>
Date: Tue, 11 Jun 2024 14:05:53 +1000
Subject: [PATCH 3/6] Update _carousel.scss

---
 src/components/card-carousel/_carousel.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/card-carousel/_carousel.scss b/src/components/card-carousel/_carousel.scss
index a55fa540..94f40be4 100644
--- a/src/components/card-carousel/_carousel.scss
+++ b/src/components/card-carousel/_carousel.scss
@@ -39,6 +39,11 @@
     // margin: 0;
     // padding: 0;
   }
+
+  button {
+    // addresses issue from button padding-inline-end and padding-inline-start which are set to 16px
+    padding: 0;
+  }
   
   img,
   video,

From 0f971fe26bdfb55f38e31bb51d74a5c3c9ac2db2 Mon Sep 17 00:00:00 2001
From: Lauren Hitchon <lauren@hitchon.me>
Date: Tue, 11 Jun 2024 15:11:24 +1000
Subject: [PATCH 4/6] Update caniuse-lite, invert navigation buttons, remove
 looping as default in the examples

---
 package-lock.json                           | 10 +++++-----
 src/components/card-carousel/_carousel.scss | 13 +++++++++++++
 src/components/card-carousel/blank.hbs      |  8 ++++----
 src/components/card-carousel/carousel.js    |  7 +++----
 src/components/card-carousel/index.hbs      |  4 ++--
 src/components/card-carousel/theme.hbs      |  8 ++++----
 6 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cd4ae67b..b4d1133d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nsw-design-system",
-  "version": "3.14.1",
+  "version": "3.16.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nsw-design-system",
-      "version": "3.14.1",
+      "version": "3.16.1",
       "license": "ISC",
       "dependencies": {
         "@floating-ui/dom": "^1.2.8"
@@ -6856,9 +6856,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001480",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz",
-      "integrity": "sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==",
+      "version": "1.0.30001632",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001632.tgz",
+      "integrity": "sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg==",
       "dev": true,
       "funding": [
         {
diff --git a/src/components/card-carousel/_carousel.scss b/src/components/card-carousel/_carousel.scss
index 94f40be4..8436cde1 100644
--- a/src/components/card-carousel/_carousel.scss
+++ b/src/components/card-carousel/_carousel.scss
@@ -295,6 +295,15 @@
         @include nsw-focus(false);
         outline-offset: 2px;
       }
+
+      .nsw-section--invert & {
+        border: 2px solid var(--nsw-white);
+
+        &:focus {
+          @include nsw-focus($color: var(--nsw-focus-light));
+          outline-offset: 2px;
+        }
+      }
     }
 
     &--selected button {
@@ -302,6 +311,10 @@
       border-radius: 7px;
       width: 2.2em;
 
+      .nsw-section--invert & {
+        background-color: var(--nsw-white);
+      }
+
       @include breakpoint('md') {
         width: 1.6em;
       }
diff --git a/src/components/card-carousel/blank.hbs b/src/components/card-carousel/blank.hbs
index 016b6587..40514624 100644
--- a/src/components/card-carousel/blank.hbs
+++ b/src/components/card-carousel/blank.hbs
@@ -9,10 +9,10 @@ page: true
 
 {{#>_layout-container}}
 <h3>5 cards</h3>
-{{>_carousel model.carousel-five default=true loop=true}}
+{{>_carousel model.carousel-five default=true drag=true}}
 
 <h3>9 cards</h3>
-{{>_carousel model.carousel-nine default=true loop=true}}
+{{>_carousel model.carousel-nine default=true drag=true}}
 
 <h3>Pagination</h3>
 {{>_carousel model.carousel-nine pagination=true default=true}}
@@ -21,10 +21,10 @@ page: true
 
 {{#>_layout-container brand-dark="true" invert="true"}}
 <h3>5 cards</h3>
-{{>_carousel model.carousel-five default=true loop=true}}
+{{>_carousel model.carousel-five default=true drag=true}}
 
 <h3>9 cards</h3>
-{{>_carousel model.carousel-nine default=true loop=true}}
+{{>_carousel model.carousel-nine default=true drag=true}}
 
 <h3>Pagination</h3>
 {{>_carousel model.carousel-nine pagination=true default=true}}
diff --git a/src/components/card-carousel/carousel.js b/src/components/card-carousel/carousel.js
index 6eff83d1..da1cd86f 100644
--- a/src/components/card-carousel/carousel.js
+++ b/src/components/card-carousel/carousel.js
@@ -1,9 +1,9 @@
 import SwipeContent from './swipe-content'
 
 /* eslint-disable max-len */
-class Carousel {
+class Carousel extends SwipeContent {
   constructor(element) {
-    // super(element)
+    super(element)
     this.element = element
     this.containerClass = 'nsw-carousel-container'
     this.controlClass = 'js-carousel__control'
@@ -175,8 +175,7 @@ class Carousel {
     }
 
     if (this.dragEnabled && window.requestAnimationFrame) {
-      // super.init()
-      new SwipeContent(this.element).init()
+      super.init()
       this.element.addEventListener('dragStart', (event) => {
         if (event.detail.origin && event.detail.origin.closest(`.${this.controlClass}`)) return
         if (event.detail.origin && event.detail.origin.closest(`.${this.navClass}`)) return
diff --git a/src/components/card-carousel/index.hbs b/src/components/card-carousel/index.hbs
index 18c6f79b..27f81ccb 100644
--- a/src/components/card-carousel/index.hbs
+++ b/src/components/card-carousel/index.hbs
@@ -19,11 +19,11 @@ meta-index: true
 </div>
 
 {{#>_docs-example showcode=true separated=true}}
-{{>_carousel model.carousel-five default=true loop=true}}
+{{>_carousel model.carousel-five default=true drag=true}}
 {{/_docs-example}}
 
 {{#>_docs-code}}  
-{{>_carousel model.carousel-five default=true loop=true}}
+{{>_carousel model.carousel-five default=true drag=true}}
 {{/_docs-code}}
 
 <h3>Pagination</h3>
diff --git a/src/components/card-carousel/theme.hbs b/src/components/card-carousel/theme.hbs
index 99a6757a..9832e997 100644
--- a/src/components/card-carousel/theme.hbs
+++ b/src/components/card-carousel/theme.hbs
@@ -10,10 +10,10 @@ page: true
 {{#>_theme}}
 {{#>_layout-container}}
 <h3>5 cards</h3>
-{{>_carousel model.carousel-five default=true loop=true}}
+{{>_carousel model.carousel-five default=true drag=true}}
 
 <h3>9 cards</h3>
-{{>_carousel model.carousel-nine default=true loop=true}}
+{{>_carousel model.carousel-nine default=true drag=true}}
 
 <h3>Pagination</h3>
 {{>_carousel model.carousel-nine pagination=true default=true}}
@@ -22,10 +22,10 @@ page: true
 
 {{#>_layout-container brand-dark="true" invert="true"}}
 <h3>5 cards</h3>
-{{>_carousel model.carousel-five default=true loop=true}}
+{{>_carousel model.carousel-five default=true drag=true}}
 
 <h3>9 cards</h3>
-{{>_carousel model.carousel-nine default=true loop=true}}
+{{>_carousel model.carousel-nine default=true drag=true}}
 
 <h3>Pagination</h3>
 {{>_carousel model.carousel-nine pagination=true default=true}}

From d877760d293d672672010ab851fcab25320a5537 Mon Sep 17 00:00:00 2001
From: Lauren Hitchon <lauren@hitchon.me>
Date: Tue, 11 Jun 2024 15:54:10 +1000
Subject: [PATCH 5/6] Fix counter functionality and add return statement if
 there are no carousel items

---
 src/components/card-carousel/_carousel.hbs  | 29 +++++++++++++++++++--
 src/components/card-carousel/_carousel.scss | 13 ++++++++-
 src/components/card-carousel/blank.hbs      |  3 +++
 src/components/card-carousel/carousel.js    | 15 ++++++-----
 4 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/components/card-carousel/_carousel.hbs b/src/components/card-carousel/_carousel.hbs
index 8735aec6..536f3ba4 100644
--- a/src/components/card-carousel/_carousel.hbs
+++ b/src/components/card-carousel/_carousel.hbs
@@ -1,4 +1,4 @@
-{{#if default}}<div class="nsw-carousel js-carousel" data-description="Highlighted latest news"{{#if loop}} data-loop="on" data-navigation="off"{{/if}}{{#if drag}} data-drag="on"{{/if}}{{#if pagination}} data-navigation-pagination="on"{{/if}}>
+{{#if default}}<div class="nsw-carousel js-carousel" data-description="Highlighted latest news"{{#if loop}} data-loop="on" data-navigation="off"{{/if}}{{#if drag}} data-drag="on"{{/if}}{{#if pagination}} data-navigation-pagination="on"{{/if}}{{#if counter}} data-loop="off" data-navigation="off"{{/if}}>
   <p class="sr-only">Carousel items</p>
   <div class="nsw-carousel__wrapper js-carousel__wrapper">
     <ol class="nsw-carousel__list">
@@ -41,5 +41,30 @@
         </button>
       </li>
     </ul>
-  </nav>{{/unless}}
+  </nav>{{/unless}}{{#if counter}}
+  <div class="nsw-carousel__counter">
+    <p><i class="js-carousel__counter"></i> / <i class="js-carousel__counter-tot"></i></p>
+    <nav>
+      <ul>
+        <li>
+          <button aria-controls="nsw-carousel__list" aria-label="Show previous items" class="nsw-carousel__control nsw-carousel__control--prev js-carousel__control">
+            <svg class="nsw-icon" viewBox="0 0 20 20">
+              <title>Show previous items</title>
+              <polyline points="13 2 5 10 13 18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="square" stroke-width="2" />
+            </svg>
+          </button>
+        </li>
+        <li>
+          <button aria-controls="nsw-carousel__list" aria-label="Show next items" class="nsw-carousel__control nsw-carousel__control--next js-carousel__control">
+            <svg class="nsw-icon" viewBox="0 0 20 20">
+              <title>Show next items</title>
+              <polyline points="7 2 15 10 7 18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="square" stroke-width="2" />
+            </svg>
+          </button>
+        </li>
+      </ul>
+    </nav>
+  </div>
+
+  {{/if}}
 </div>{{/if}}
\ No newline at end of file
diff --git a/src/components/card-carousel/_carousel.scss b/src/components/card-carousel/_carousel.scss
index 8436cde1..b95f54e8 100644
--- a/src/components/card-carousel/_carousel.scss
+++ b/src/components/card-carousel/_carousel.scss
@@ -63,7 +63,8 @@
     max-width: initial;
   }
 
-  > nav {
+  > nav,
+  &__counter > nav {
     order: 1;
     margin-bottom: 0.5rem;
     margin-right: 0.25rem;
@@ -94,6 +95,16 @@
     }
   }
 
+  &__counter {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    @include breakpoint('md') {
+      width: 100%;
+    }
+  }
+
   &__list {
     display: flex;
     flex-wrap: nowrap;
diff --git a/src/components/card-carousel/blank.hbs b/src/components/card-carousel/blank.hbs
index 40514624..33c69d1d 100644
--- a/src/components/card-carousel/blank.hbs
+++ b/src/components/card-carousel/blank.hbs
@@ -17,6 +17,9 @@ page: true
 <h3>Pagination</h3>
 {{>_carousel model.carousel-nine pagination=true default=true}}
 
+<h3>Counter</h3>
+{{>_carousel model.carousel-nine counter=true default=true}}
+
 {{/_layout-container}}
 
 {{#>_layout-container brand-dark="true" invert="true"}}
diff --git a/src/components/card-carousel/carousel.js b/src/components/card-carousel/carousel.js
index da1cd86f..c4ca2901 100644
--- a/src/components/card-carousel/carousel.js
+++ b/src/components/card-carousel/carousel.js
@@ -57,6 +57,8 @@ class Carousel extends SwipeContent {
   }
 
   init() {
+    if (!this.items) return
+
     this.initCarouselLayout()
     this.setItemsWidth(true)
     this.insertBefore(this.visibItemsNb)
@@ -82,12 +84,13 @@ class Carousel extends SwipeContent {
 
     this.carouselCreateContainer()
 
-    const itemStyle = window.getComputedStyle(this.items[0])
-    const containerStyle = window.getComputedStyle(this.listWrapper)
-    let itemWidth = parseFloat(itemStyle.getPropertyValue('width'))
-    const itemMargin = parseFloat(itemStyle.getPropertyValue('margin-right'))
-    const containerPadding = parseFloat(containerStyle.getPropertyValue('padding-left'))
-    let containerWidth = parseFloat(containerStyle.getPropertyValue('width'))
+    const itemStyle = this.items && window.getComputedStyle(this.items[0])
+
+    const containerStyle = this.listWrapper && window.getComputedStyle(this.listWrapper)
+    let itemWidth = itemStyle ? parseFloat(itemStyle.getPropertyValue('width')) : 0
+    const itemMargin = itemStyle ? parseFloat(itemStyle.getPropertyValue('margin-right')) : 0
+    const containerPadding = containerStyle ? parseFloat(containerStyle.getPropertyValue('padding-left')) : 0
+    let containerWidth = containerStyle ? parseFloat(containerStyle.getPropertyValue('width')) : 0
 
     if (!this.itemAutoSize) {
       this.itemAutoSize = itemWidth

From 97e85496eb3e1f600037b20dd152e4d428dbb9b0 Mon Sep 17 00:00:00 2001
From: Lauren Hitchon <lauren@hitchon.me>
Date: Tue, 11 Jun 2024 15:55:00 +1000
Subject: [PATCH 6/6] Update _carousel.hbs

---
 src/components/card-carousel/_carousel.hbs | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/card-carousel/_carousel.hbs b/src/components/card-carousel/_carousel.hbs
index 536f3ba4..39914afa 100644
--- a/src/components/card-carousel/_carousel.hbs
+++ b/src/components/card-carousel/_carousel.hbs
@@ -64,7 +64,5 @@
         </li>
       </ul>
     </nav>
-  </div>
-
-  {{/if}}
+  </div>{{/if}}
 </div>{{/if}}
\ No newline at end of file