srcdev-nuxt-components 9.4.9 → 9.4.10

package/app/components/02.molecules/display-theme-switch/tests/DisplayThemeSwitch.spec.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { nextTick, ref } from "vue";
+import DisplayThemeSwitch from "../DisplayThemeSwitch.vue";
+
+const { useSettingsStoreMock, setColourSchemeMock } = vi.hoisted(() => ({
+  useSettingsStoreMock: vi.fn(),
+  setColourSchemeMock: vi.fn(),
+}));
+
+mockNuxtImport("useSettingsStore", () => useSettingsStoreMock);
+
+describe("DisplayThemeSwitch", () => {
+  beforeEach(() => {
+    setColourSchemeMock.mockClear();
+    useSettingsStoreMock.mockReturnValue({
+      colourScheme: ref("system"),
+      setColourScheme: setColourSchemeMock,
+    });
+  });
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayThemeSwitch);
+    await nextTick();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders TripleToggleSwitchCore with the colour-scheme-select class", async () => {
+    const wrapper = await mountSuspended(DisplayThemeSwitch);
+    await nextTick();
+    expect(wrapper.find(".colour-scheme-select").exists()).toBe(true);
+    expect(wrapper.find(".triple-toggle-switch").exists()).toBe(true);
+  });
+
+  it("renders default option labels", async () => {
+    const wrapper = await mountSuspended(DisplayThemeSwitch);
+    await nextTick();
+    const labels = wrapper.findAll(".option-group .sr-only").map((el) => el.text());
+    expect(labels).toEqual(["System", "Light", "Dark"]);
+  });
+
+  it("renders custom option labels via props", async () => {
+    const wrapper = await mountSuspended(DisplayThemeSwitch, {
+      props: {
+        systemLabel: "Auto",
+        lightLabel: "Day",
+        darkLabel: "Night",
+      },
+    });
+    await nextTick();
+    const labels = wrapper.findAll(".option-group .sr-only").map((el) => el.text());
+    expect(labels).toEqual(["Auto", "Day", "Night"]);
+  });
+
+  it("applies custom option icons via props", async () => {
+    const wrapper = await mountSuspended(DisplayThemeSwitch, {
+      props: {
+        systemIcon: "custom:system",
+        lightIcon: "custom:light",
+        darkIcon: "custom:dark",
+      },
+    });
+    await nextTick();
+    const icons = wrapper.findAll(".option-icon").map((el) => el.attributes("class"));
+    expect(icons.some((c) => c?.includes("system"))).toBe(true);
+  });
+
+  it("applies the small class via styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(DisplayThemeSwitch, {
+      props: { styleClassPassthrough: "small" },
+    });
+    await nextTick();
+    expect(wrapper.find(".triple-toggle-switch").classes()).toContain("small");
+  });
+
+  it("calls setColourScheme when the selected option changes", async () => {
+    const wrapper = await mountSuspended(DisplayThemeSwitch);
+    await nextTick();
+
+    const lightInput = wrapper.findAll("input.option-input")[1];
+    await lightInput?.setValue(true);
+    await nextTick();
+
+    expect(setColourSchemeMock).toHaveBeenCalledWith("light");
+  });
+});

package/app/components/03.organisms/image-galleries/carousel-flip/CONSUMER-STYLING.md

@@ -0,0 +1,46 @@
+# CarouselFlip — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--carousel-flip-gap` | `1rem` | Gap between items inside the item track |
+| `--carousel-flip-layout-gap` | `1rem` | Grid gap between the prev/carousel/next/controls areas |
+| `--carousel-flip-display-max-width` | `80rem` | Max width of the item track and the controls bar |
+| `--carousel-flip-item-max-width` | `80rem` | Max width of a single item, before subtracting the edge-preview width |
+| `--carousel-flip-edge-preview-width` | `4rem` | How much of the neighbouring items peek in at each edge |
+| `--carousel-flip-marker-gap` | `1rem` | Gap between marker (dot) buttons |
+| `--carousel-flip-marker-active-colour` | `light-dark(var(--slate-10), var(--slate-00))` | Active marker background colour |
+| `--carousel-flip-button-background-colour` | `light-dark(white, var(--slate-08))` | Prev/next button background colour |
+| `--carousel-flip-button-border-width` | `0.1rem` | Prev/next button border width |
+| `--carousel-flip-button-border-colour` | `light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%))` | Prev/next button border colour |
+| `--carousel-flip-button-border-radius` | `100vw` | Prev/next button corner radius |
+| `--carousel-flip-button-padding` | `0.8rem` | Prev/next button padding |
+| `--carousel-flip-button-icon-size` | `2.4rem` | Prev/next button icon glyph size |
+| `--carousel-flip-buttons-gap` | `1rem` | Gap between prev/next buttons in the `controls-grouped-right` layout |
+| `--carousel-flip-overlay-controls-offset` | `1rem` | Distance of the controls bar from the bottom edge in the `overlay` layout |
+| `--carousel-flip-focus-outline-width` | `0.2rem` | Marker button focus-visible outline width |
+| `--carousel-flip-focus-outline-colour` | `var(--theme-ring)` | Marker button focus-visible outline colour |
+| `--carousel-flip-focus-outline-offset` | `0.2rem` | Marker button focus-visible outline offset |
+
+```css
+.my-page {
+  --carousel-flip-button-background-colour: var(--theme-surface);
+  --carousel-flip-marker-active-colour: var(--brand-primary);
+}
+```
+
+Or scope to a single instance via `styleClassPassthrough`:
+
+```vue
+<CarouselFlip style-class-passthrough="hero-carousel">...</CarouselFlip>
+```
+
+## Notes
+
+- `--carousel-flip-display-max-width`/`--carousel-flip-item-max-width` previously had no declared
+  value anywhere in the component (referenced via `var()` with no fallback) — this meant the
+  edge-preview offset and max-width caps silently never applied in production. Fixed 2026-09-21;
+  see the component's skill doc for detail.
+- `useFlipAnimation`/`useSpringEffect`/`transitionSpeed` control animation behaviour via props,
+  not tokens — use the props rather than CSS overrides for those.

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, light-dark(var(--slate-10), var(--slate-00)));
+              }
+
+              &: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, light-dark(white, var(--slate-08)));
+      border: var(--carousel-flip-button-border-width, 0.1rem) solid
+        var(--carousel-flip-button-border-colour, light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%)));
+      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,15 +244,15 @@ 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;
           }
         }
 
@@ -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,15 +498,15 @@ 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;
           }
         }
 
@@ -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
@@ -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>