srcdev-nuxt-components 9.4.9 → 9.4.11

package/app/components/{carousels → 03.organisms/image-galleries/carousel-flip}/CarouselFlip.vue

@@ -5,10 +5,10 @@
     :class="[elementClasses]"
     :data-button-layout="buttonLayout"
     role="region"
-    aria-label="Image carousel"
+    :aria-label="ariaLabel"
   >
     <div aria-live="polite" aria-atomic="true" class="sr-only">
-      Item {{ currentActiveIndex + 1 }} of {{ itemCount }}
+      {{ props.itemPositionAnnouncement(currentActiveIndex + 1, itemCount) }}
     </div>
 
     <div
@@ -17,7 +17,7 @@
       class="item-container"
       :class="{ 'allow-overflow': allowCarouselOverflow }"
       role="group"
-      aria-label="Carousel items"
+      :aria-label="itemsAriaLabel"
     >
       <div
         v-for="(item, index) in carouselDataIds"
@@ -39,7 +39,7 @@
             <button
               class="btn-marker"
               :class="[{ active: displayActiveIndex === index - 1 }]"
-              :aria-label="`Jump to item ${index}`"
+              :aria-label="`${jumpToItemLabel} ${index}`"
               @click.prevent="jumpToFrame(index - 1)"
             ></button>
           </li>
@@ -48,16 +48,15 @@
     </div>
 
     <div class="buttons-container">
-      <button
-        type="button"
-        class="btn-action btn-prev"
-        aria-label="Go to previous item"
-        @click.prevent="actionPrevious()"
-      >
-        <Icon name="ic:outline-keyboard-arrow-left" class="arrows-icon" />
+      <button type="button" class="btn-action btn-prev" :aria-label="previousLabel" @click.prevent="actionPrevious()">
+        <slot name="prev-icon">
+          <Icon :name="prevIcon" class="arrows-icon" />
+        </slot>
       </button>
-      <button type="button" class="btn-action btn-next" aria-label="Go to next item" @click.prevent="actionNext()">
-        <Icon name="ic:outline-keyboard-arrow-right" class="arrows-icon" />
+      <button type="button" class="btn-action btn-next" :aria-label="nextLabel" @click.prevent="actionNext()">
+        <slot name="next-icon">
+          <Icon :name="nextIcon" class="arrows-icon" />
+        </slot>
       </button>
     </div>
   </section>
@@ -75,6 +74,14 @@ interface Props {
   useSpringEffect?: boolean;
   buttonLayout?: "sides" | "controls-flanking" | "controls-grouped-right" | "overlay";
   showControls?: boolean;
+  ariaLabel?: string;
+  itemsAriaLabel?: string;
+  previousLabel?: string;
+  nextLabel?: string;
+  jumpToItemLabel?: string;
+  itemPositionAnnouncement?: (current: number, total: number) => string;
+  prevIcon?: string;
+  nextIcon?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -86,8 +93,17 @@ const props = withDefaults(defineProps<Props>(), {
   useSpringEffect: false,
   buttonLayout: "sides",
   showControls: true,
+  ariaLabel: "Image carousel",
+  itemsAriaLabel: "Carousel items",
+  previousLabel: "Go to previous item",
+  nextLabel: "Go to next item",
+  jumpToItemLabel: "Jump to item",
+  itemPositionAnnouncement: (current: number, total: number) => `Item ${current} of ${total}`,
+  prevIcon: "ic:outline-keyboard-arrow-left",
+  nextIcon: "ic:outline-keyboard-arrow-right",
 });
 
+
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const carouselWrapperRef = ref<HTMLDivElement | null>(null);
@@ -107,19 +123,11 @@ const transitionSpeedStr = props.transitionSpeed + "ms";
 
 const itemWidth = ref(0);
 const itemWidthOffsetStr = computed(() => {
-  // if (props.allowCarouselOverflow) {
   if (props.useFlipAnimation) {
-    return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - var(--_carousel-item-track-gap))`; // Good
+    return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - var(--_carousel-item-track-gap))`;
   } else {
-    return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - (2 * var(--_carousel-item-track-gap)))`; // Good
+    return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - (2 * var(--_carousel-item-track-gap)))`;
   }
-  // } else {
-  //   if (props.useFlipAnimation) {
-  //     return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - var(--_carousel-item-track-gap))` // Goof
-  //   } else {
-  //     return `calc(-${initialItemOffset.value} * ${itemWidth.value}px - (2 * var(--_carousel-item-track-gap)))` // Good
-  //   }
-  // }
 });
 const currentActiveIndex = ref(0);
 
@@ -256,7 +264,10 @@ const reorderItems = (skipAnimation: boolean = false) => {
         item.style.transform = `translateX(${deltaX}px)`;
 
         requestAnimationFrame(() => {
-          const shouldTransition = carouselInitComplete.value && userHasInteracted.value;
+          const shouldTransition =
+            carouselInitComplete.value &&
+            userHasInteracted.value &&
+            !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
           let transitionProperties = "none";
 
           if (shouldTransition) {
@@ -416,7 +427,7 @@ onMounted(() => {
 <style lang="css">
 @layer components {
   .carousel-flip {
-    --_carousel-item-track-gap: 10px;
+    --_carousel-item-track-gap: var(--carousel-flip-gap, 1rem);
 
     display: grid;
     grid-template-columns: auto 1fr auto;
@@ -424,7 +435,7 @@ onMounted(() => {
     grid-template-areas:
       "prev  carousel  next"
       ".     controls  .   ";
-    gap: 10px;
+    gap: var(--carousel-flip-layout-gap, 1rem);
     opacity: 0;
 
     &.mounted {
@@ -451,7 +462,7 @@ onMounted(() => {
       position: relative;
       isolation: isolate;
 
-      max-inline-size: var(--_carousel-display-max-width);
+      max-inline-size: var(--carousel-flip-display-max-width, 80rem);
       margin-inline: auto;
 
       &.allow-overflow {
@@ -466,17 +477,20 @@ onMounted(() => {
         margin-inline: auto;
 
         max-inline-size: calc(
-          var(--_carousel-container-max-inline-size) + var(--_carousel-item-track-gap) -
-            (2 * var(--_carousel-item-edge-preview-width))
+          var(--carousel-flip-item-max-width, 80rem) + var(--_carousel-item-track-gap) -
+            (2 * var(--carousel-flip-edge-preview-width, 4rem))
         );
 
         translate: calc(
-            v-bind(itemWidthOffsetStr) - var(--_carousel-item-track-gap) + var(--_carousel-item-edge-preview-width)
+            v-bind(itemWidthOffsetStr) - var(--_carousel-item-track-gap) +
+              var(--carousel-flip-edge-preview-width, 4rem)
           )
           0;
 
         &.loaded {
-          transition: transform v-bind(transitionSpeedStr) ease;
+          @media (prefers-reduced-motion: no-preference) {
+            transition: transform v-bind(transitionSpeedStr) ease;
+          }
         }
       }
     }
@@ -486,14 +500,14 @@ onMounted(() => {
       display: flex;
       align-items: center;
       justify-content: center;
-      max-inline-size: var(--_carousel-display-max-width);
+      max-inline-size: var(--carousel-flip-display-max-width, 80rem);
       margin-inline: auto;
 
       .markers-container {
         .markers-list {
           display: flex;
           flex-direction: row;
-          gap: 10px;
+          gap: var(--carousel-flip-marker-gap, 1rem);
           list-style-type: none;
           margin: unset;
           padding: unset;
@@ -507,7 +521,13 @@ onMounted(() => {
               transition: background-color v-bind(transitionSpeedStr) linear;
 
               &.active {
-                background-color: light-dark(var(--slate-10), var(--slate-00));
+                background-color: var(--carousel-flip-marker-active-colour, var(--slate-10));
+              }
+
+              &:focus-visible {
+                outline: var(--carousel-flip-focus-outline-width, 0.2rem) solid
+                  var(--carousel-flip-focus-outline-colour, var(--theme-ring));
+                outline-offset: var(--carousel-flip-focus-outline-offset, 0.2rem);
               }
             }
           }
@@ -538,14 +558,15 @@ onMounted(() => {
       cursor: pointer;
       height: fit-content;
 
-      background-color: white;
-      border: 1px solid light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-      border-radius: 100vw;
-      padding: 8px;
+      background-color: var(--carousel-flip-button-background-colour, white);
+      border: var(--carousel-flip-button-border-width, 0.1rem) solid
+        var(--carousel-flip-button-border-colour, hsl(0, 29%, 3%));
+      border-radius: var(--carousel-flip-button-border-radius, 100vw);
+      padding: var(--carousel-flip-button-padding, 0.8rem);
 
       .arrows-icon {
-        width: 24px;
-        height: 24px;
+        width: var(--carousel-flip-button-icon-size, 2.4rem);
+        height: var(--carousel-flip-button-icon-size, 2.4rem);
       }
     }
 
@@ -574,7 +595,7 @@ onMounted(() => {
       .buttons-container {
         display: flex;
         align-items: center;
-        gap: 10px;
+        gap: var(--carousel-flip-buttons-gap, 1rem);
         grid-area: controls;
         justify-self: end;
       }
@@ -586,7 +607,7 @@ onMounted(() => {
         grid-area: carousel;
         align-self: end;
         z-index: 1;
-        padding-block-end: 1rem;
+        padding-block-end: var(--carousel-flip-overlay-controls-offset, 1rem);
       }
     }
   }

package/app/components/{carousels → 03.organisms/image-galleries/carousel-flip}/stories/CarouselFlip.stories.ts

@@ -19,6 +19,13 @@ interface CarouselFlipStoryArgs {
   buttonLayout: "sides" | "controls-flanking" | "controls-grouped-right" | "overlay";
   showControls: boolean;
   styleClassPassthrough: string[];
+  ariaLabel: string;
+  itemsAriaLabel: string;
+  previousLabel: string;
+  nextLabel: string;
+  jumpToItemLabel: string;
+  prevIcon: string;
+  nextIcon: string;
   // Mock data for stories
   carouselData: CarouselItem[];
 }
@@ -68,7 +75,7 @@ const sampleCarouselItems: CarouselItem[] = [
 ];
 
 export default {
-  title: "Components/UI/CarouselFlip",
+  title: "Organisms/Image Galleries/Carousel Flip",
   component: StorybookComponent,
   argTypes: {
     // Carousel Configuration
@@ -129,6 +136,56 @@ export default {
         category: "Layout",
       },
     },
+    // Accessibility / localisation
+    ariaLabel: {
+      control: { type: "text" },
+      description: "Accessible name for the carousel region",
+      table: {
+        category: "Accessibility",
+      },
+    },
+    itemsAriaLabel: {
+      control: { type: "text" },
+      description: "Accessible name for the item group",
+      table: {
+        category: "Accessibility",
+      },
+    },
+    previousLabel: {
+      control: { type: "text" },
+      description: "Accessible label for the previous button",
+      table: {
+        category: "Accessibility",
+      },
+    },
+    nextLabel: {
+      control: { type: "text" },
+      description: "Accessible label for the next button",
+      table: {
+        category: "Accessibility",
+      },
+    },
+    jumpToItemLabel: {
+      control: { type: "text" },
+      description: "Accessible label prefix for marker buttons (index is appended)",
+      table: {
+        category: "Accessibility",
+      },
+    },
+    prevIcon: {
+      control: { type: "text" },
+      description: "Iconify name for the previous button icon",
+      table: {
+        category: "Icons",
+      },
+    },
+    nextIcon: {
+      control: { type: "text" },
+      description: "Iconify name for the next button icon",
+      table: {
+        category: "Icons",
+      },
+    },
     // Display data for reference
     carouselData: {
       control: { type: "object" },
@@ -147,6 +204,13 @@ export default {
     buttonLayout: "sides",
     showControls: true,
     styleClassPassthrough: ["carousel-flip-demo"],
+    ariaLabel: "Image carousel",
+    itemsAriaLabel: "Carousel items",
+    previousLabel: "Go to previous item",
+    nextLabel: "Go to next item",
+    jumpToItemLabel: "Jump to item",
+    prevIcon: "ic:outline-keyboard-arrow-left",
+    nextIcon: "ic:outline-keyboard-arrow-right",
     carouselData: sampleCarouselItems,
   },
 } as Meta<CarouselFlipStoryArgs>;
@@ -180,22 +244,22 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         }
 
         .carousel-flip-demo.carousel-flip {
-          --_carousel-item-track-gap: 12px;
-          --_carousel-container-max-inline-size: 800px;
-          --_carousel-item-edge-preview-width: 12px;
+          --carousel-flip-gap: 12px;
+          --carousel-flip-item-max-width: 800px;
+          --carousel-flip-edge-preview-width: 12px;
         }
 
         @media (width >= 768px) {
           .carousel-flip-demo.carousel-flip {
-            --_carousel-item-track-gap: 24px;
-            --_carousel-item-edge-preview-width: 80px;
+            --carousel-flip-gap: 24px;
+            --carousel-flip-edge-preview-width: 80px;
           }
         }
 
         .carousel-flip-demo.carousel-flip .item-container {
           max-inline-size: 800px;
           margin-inline: auto;
-          outline: 1px solid light-dark(var(--slate-08, #666), var(--slate-01, #f5f5f5));
+          outline: 1px solid var(--slate-08, #666);
           padding-block: 6px;
           padding-inline: 6px;
         }
@@ -208,12 +272,12 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         }
 
         .carousel-flip-demo.carousel-flip .item {
-          background-color: light-dark(var(--slate-05, #e5e5e5), var(--slate-06, #999));
+          background-color: var(--slate-05, #e5e5e5);
           contain: layout style paint;
         }
 
         .carousel-flip-demo.carousel-flip .item:nth-child(odd) {
-          background-color: light-dark(var(--slate-06, #999), var(--slate-05, #e5e5e5));
+          background-color: var(--slate-06, #999);
         }
 
         .custom-carousel-item {
@@ -223,11 +287,11 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
           justify-content: center;
           aspect-ratio: 4 / 3;
           inline-size: 100%;
-          color: light-dark(#aaa, #333);
+          color: #aaa;
           padding-block: 10px;
           padding-inline: 10px;
           border-radius: 4px;
-          outline: 1px solid light-dark(#00000090, #ffffff90);
+          outline: 1px solid #00000090;
         }
 
         .carousel-flip-demo.carousel-flip .controls-container {
@@ -259,7 +323,7 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
           width: var(--marker-width);
           height: var(--marker-height);
           border-radius: var(--marker-border-radius);
-          background-color: light-dark(var(--slate-05, #e5e5e5), var(--slate-07, #666));
+          background-color: var(--slate-05, #e5e5e5);
           line-height: 3px;
           transition: all 0.3s linear;
           border: 1px solid transparent;
@@ -267,13 +331,13 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         }
 
         .carousel-flip-demo.carousel-flip .btn-marker.active {
-          background-color: light-dark(var(--slate-012, #000), var(--slate-000, #fff));
+          background-color: var(--slate-012, #000);
           will-change: background-color;
         }
 
         .carousel-flip-demo.carousel-flip .btn-marker:hover,
         .carousel-flip-demo.carousel-flip .btn-marker:focus-visible {
-          outline-color: light-dark(#000, #fff);
+          outline-color: #000;
           will-change: background-color, outline-color;
         }
       `;
@@ -290,13 +354,13 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
           Displaying {{ args.carouselDataIds.length }} carousel items with {{ args.transitionSpeed }}ms transition speed
         </p>
         <div style="display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;">
-          <div style="padding: 4px 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 4px; font-size: 12px; color: light-dark(#333, #ddd);">
+          <div style="padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; color: #333;">
             Overflow: {{ args.allowCarouselOverflow ? 'Enabled' : 'Disabled' }}
           </div>
-          <div style="padding: 4px 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 4px; font-size: 12px; color: light-dark(#333, #ddd);">
+          <div style="padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; color: #333;">
             Flip Animation: {{ args.useFlipAnimation ? 'Enabled' : 'Disabled' }}
           </div>
-          <div style="padding: 4px 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 4px; font-size: 12px; color: light-dark(#333, #ddd);">
+          <div style="padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; color: #333;">
             Spring Effect: {{ args.useSpringEffect ? 'Enabled' : 'Disabled' }}
           </div>
         </div>
@@ -311,6 +375,13 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         :button-layout="args.buttonLayout"
         :show-controls="args.showControls"
         :style-class-passthrough="args.styleClassPassthrough"
+        :aria-label="args.ariaLabel"
+        :items-aria-label="args.itemsAriaLabel"
+        :previous-label="args.previousLabel"
+        :next-label="args.nextLabel"
+        :jump-to-item-label="args.jumpToItemLabel"
+        :prev-icon="args.prevIcon"
+        :next-icon="args.nextIcon"
       >
         <template v-for="(item, index) in filteredCarouselData" #[item.id] :key="index">
           <div class="custom-carousel-item">
@@ -427,22 +498,22 @@ const RichContentTemplate: StoryFn<CarouselFlipStoryArgs> = (args) => ({
       style.id = styleId;
       style.textContent = `
         .carousel-flip-demo.carousel-flip {
-          --_carousel-item-track-gap: 12px;
-          --_carousel-container-max-inline-size: 800px;
-          --_carousel-item-edge-preview-width: 12px;
+          --carousel-flip-gap: 12px;
+          --carousel-flip-item-max-width: 800px;
+          --carousel-flip-edge-preview-width: 12px;
         }
 
         @media (width >= 768px) {
           .carousel-flip-demo.carousel-flip {
-            --_carousel-item-track-gap: 24px;
-            --_carousel-item-edge-preview-width: 80px;
+            --carousel-flip-gap: 24px;
+            --carousel-flip-edge-preview-width: 80px;
           }
         }
 
         .carousel-flip-demo.carousel-flip .item-container {
           max-inline-size: 800px;
           margin-inline: auto;
-          outline: 1px solid light-dark(var(--slate-08, #666), var(--slate-01, #f5f5f5));
+          outline: 1px solid var(--slate-08, #666);
           padding-block: 6px;
           padding-inline: 6px;
         }
@@ -455,12 +526,12 @@ const RichContentTemplate: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         }
 
         .carousel-flip-demo.carousel-flip .item {
-          background-color: light-dark(var(--slate-05, #e5e5e5), var(--slate-06, #999));
+          background-color: var(--slate-05, #e5e5e5);
           contain: layout style paint;
         }
 
         .carousel-flip-demo.carousel-flip .item:nth-child(odd) {
-          background-color: light-dark(var(--slate-06, #999), var(--slate-05, #e5e5e5));
+          background-color: var(--slate-06, #999);
         }
       `;
       document.head.appendChild(style);
@@ -486,6 +557,13 @@ const RichContentTemplate: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         :button-layout="args.buttonLayout"
         :show-controls="args.showControls"
         :style-class-passthrough="args.styleClassPassthrough"
+        :aria-label="args.ariaLabel"
+        :items-aria-label="args.itemsAriaLabel"
+        :previous-label="args.previousLabel"
+        :next-label="args.nextLabel"
+        :jump-to-item-label="args.jumpToItemLabel"
+        :prev-icon="args.prevIcon"
+        :next-icon="args.nextIcon"
       >
         <template v-for="(item, index) in filteredCarouselData" #[item.id] :key="index">
           <div
@@ -604,16 +682,16 @@ const AnimationShowcaseTemplate: StoryFn<CarouselFlipStoryArgs> = (args) => ({
           Testing different animation combinations and timing
         </p>
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 20px;">
-          <div style="padding: 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 6px; text-align: center; font-size: 12px; color: light-dark(#333, #ddd); background: args.useFlipAnimation ? 'light-dark(#e7f5e7, #2d4a2d)' : 'transparent';">
+          <div style="padding: 8px; border: 1px solid #ccc; border-radius: 6px; text-align: center; font-size: 12px; color: #333; background: args.useFlipAnimation ? '#e7f5e7' : 'transparent';">
             Flip: {{ args.useFlipAnimation ? '✓' : '✗' }}
           </div>
-          <div style="padding: 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 6px; text-align: center; font-size: 12px; color: light-dark(#333, #ddd); background: args.useSpringEffect ? 'light-dark(#e7f5e7, #2d4a2d)' : 'transparent';">
+          <div style="padding: 8px; border: 1px solid #ccc; border-radius: 6px; text-align: center; font-size: 12px; color: #333; background: args.useSpringEffect ? '#e7f5e7' : 'transparent';">
             Spring: {{ args.useSpringEffect ? '✓' : '✗' }}
           </div>
-          <div style="padding: 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 6px; text-align: center; font-size: 12px; color: light-dark(#333, #ddd); background: args.allowCarouselOverflow ? 'light-dark(#e7f5e7, #2d4a2d)' : 'transparent';">
+          <div style="padding: 8px; border: 1px solid #ccc; border-radius: 6px; text-align: center; font-size: 12px; color: #333; background: args.allowCarouselOverflow ? '#e7f5e7' : 'transparent';">
             Overflow: {{ args.allowCarouselOverflow ? '✓' : '✗' }}
           </div>
-          <div style="padding: 8px; border: 1px solid light-dark(#ccc, #666); border-radius: 6px; text-align: center; font-size: 12px; color: light-dark(#333, #ddd);">
+          <div style="padding: 8px; border: 1px solid #ccc; border-radius: 6px; text-align: center; font-size: 12px; color: #333;">
             Speed: {{ args.transitionSpeed }}ms
           </div>
         </div>
@@ -628,6 +706,13 @@ const AnimationShowcaseTemplate: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         :button-layout="args.buttonLayout"
         :show-controls="args.showControls"
         :style-class-passthrough="args.styleClassPassthrough"
+        :aria-label="args.ariaLabel"
+        :items-aria-label="args.itemsAriaLabel"
+        :previous-label="args.previousLabel"
+        :next-label="args.nextLabel"
+        :jump-to-item-label="args.jumpToItemLabel"
+        :prev-icon="args.prevIcon"
+        :next-icon="args.nextIcon"
       >
         <template v-for="(item, index) in filteredCarouselData" #[item.id] :key="index">
           <div

package/app/components/{carousels → 03.organisms/image-galleries/carousel-flip}/tests/CarouselFlip.spec.ts

@@ -3,6 +3,16 @@ import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { nextTick } from "vue";
 import CarouselFlip from "../CarouselFlip.vue";
 
+const stubMatchMedia = (prefersReducedMotion: boolean) => {
+  vi.stubGlobal(
+    "matchMedia",
+    vi.fn().mockReturnValue({
+      matches: prefersReducedMotion,
+      addEventListener: vi.fn(),
+    })
+  );
+};
+
 interface CarouselFlipInstance {
   carouselWrapperRef: HTMLDivElement | null;
   carouselContainerRef: HTMLDivElement | null;
@@ -115,6 +125,7 @@ describe("CarouselFlip", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockDirection.value = "";
+    stubMatchMedia(false);
   });
 
   afterEach(() => {
@@ -271,6 +282,75 @@ describe("CarouselFlip", () => {
 
       expect(wrapper.attributes("data-button-layout")).toBe("overlay");
     });
+
+    it("overrides accessible labels via props", async () => {
+      await createWrapper({
+        ariaLabel: "Featured looks",
+        itemsAriaLabel: "Look slides",
+        previousLabel: "Previous look",
+        nextLabel: "Next look",
+        jumpToItemLabel: "View look",
+      });
+
+      expect(wrapper.find('[role="region"]').attributes("aria-label")).toBe("Featured looks");
+      expect(wrapper.find('[role="group"]').attributes("aria-label")).toBe("Look slides");
+      expect(wrapper.find('[aria-label="Previous look"]').exists()).toBe(true);
+      expect(wrapper.find('[aria-label="Next look"]').exists()).toBe(true);
+      expect(wrapper.find('[aria-label="View look 1"]').exists()).toBe(true);
+    });
+
+    it("overrides the screen-reader position announcement via prop", async () => {
+      await createWrapper({
+        itemPositionAnnouncement: (current: number, total: number) => `Slide ${current} / ${total}`,
+      });
+
+      expect(wrapper.find('[aria-live="polite"]').text()).toBe("Slide 1 / 6");
+    });
+
+    it("overrides prev/next icons via props", async () => {
+      await createWrapper({ prevIcon: "mdi:chevron-left", nextIcon: "mdi:chevron-right" });
+
+      const prevButton = wrapper.find('[aria-label="Go to previous item"]');
+      const nextButton = wrapper.find('[aria-label="Go to next item"]');
+
+      expect(prevButton.html()).toContain("i-mdi:chevron-left");
+      expect(nextButton.html()).toContain("i-mdi:chevron-right");
+    });
+
+    it("allows overriding the prev/next icon via slots", async () => {
+      wrapper = await mountSuspended(CarouselFlip, {
+        props: { carouselDataIds: mockCarouselData },
+        slots: {
+          "prev-icon": '<span data-testid="custom-prev">Prev</span>',
+          "next-icon": '<span data-testid="custom-next">Next</span>',
+        },
+        global: {
+          components: {
+            Icon: {
+              template: '<svg data-testid="icon" :class="$attrs.class"><title>{{ name }}</title></svg>',
+              props: ["name"],
+            },
+          },
+        },
+      });
+
+      expect(wrapper.find('[data-testid="custom-prev"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="custom-next"]').exists()).toBe(true);
+    });
+  });
+
+  describe("Reduced Motion", () => {
+    it("skips the JS-driven transition when prefers-reduced-motion is set", async () => {
+      stubMatchMedia(true);
+      await createWrapper();
+      await nextTick();
+
+      const nextButton = wrapper.find('[aria-label="Go to next item"]');
+      await nextButton.trigger("click");
+      await nextTick();
+
+      expect(component.currentActiveIndex).toBe(1);
+    });
   });
 
   describe("Initial Setup", () => {

package/app/components/05.forms/form-field/FormField.vue

@@ -18,7 +18,7 @@ interface Props {
   styleClassPassthrough?: string;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   width: "narrow",
   fieldHasError: false,
   hasGutter: true,

package/app/components/05.forms/form-wrapper/FormWrapper.vue

@@ -9,7 +9,7 @@ interface Props {
   width?: "narrow" | "medium" | "wide";
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   width: "narrow",
 });
 </script>