srcdev-nuxt-components 9.4.5 → 9.4.6

package/app/components/01.atoms/animations/marquee-scroller/tests/MarqueeScroller.spec.ts

@@ -0,0 +1,315 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import MarqueeScroller from "../MarqueeScroller.vue";
+
+const stubMatchMedia = (prefersReducedMotion: boolean) => {
+  vi.stubGlobal(
+    "matchMedia",
+    vi.fn().mockReturnValue({
+      matches: prefersReducedMotion,
+      addEventListener: vi.fn(),
+    })
+  );
+};
+
+// jsdom reports 0 for offsetWidth/scrollWidth — stub them per-element by class so
+// updateRepeatCount() sees realistic container/content dimensions.
+const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "offsetWidth");
+const originalScrollWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "scrollWidth");
+
+const stubDimensions = ({ containerWidth, groupScrollWidth }: { containerWidth: number; groupScrollWidth: number }) => {
+  Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+    configurable: true,
+    get() {
+      return this.classList.contains("marquee-scroller") ? containerWidth : 0;
+    },
+  });
+  Object.defineProperty(HTMLElement.prototype, "scrollWidth", {
+    configurable: true,
+    get() {
+      return this.classList.contains("marquee-group") ? groupScrollWidth : 0;
+    },
+  });
+};
+
+const restoreDimensions = () => {
+  if (originalOffsetWidth) Object.defineProperty(HTMLElement.prototype, "offsetWidth", originalOffsetWidth);
+  if (originalScrollWidth) Object.defineProperty(HTMLElement.prototype, "scrollWidth", originalScrollWidth);
+};
+
+const marqueeData = [
+  { id: 1, content: "logo-a" },
+  { id: 2, content: "logo-b" },
+];
+
+describe("MarqueeScroller", () => {
+  beforeEach(() => {
+    stubMatchMedia(false);
+  });
+
+  afterEach(() => {
+    restoreDimensions();
+  });
+
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders after mount (displayComponent flips true in onMounted)", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.find(".marquee-scroller").exists()).toBe(true);
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default props)", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (all props set)", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: {
+        animationRuntime: "20s",
+        reverse: true,
+        marqueeData,
+        itemConfig: { width: "80px", height: "80px", gap: "24px" },
+        ariaLabel: "Client logos",
+        ariaDescription: "Custom instructions",
+        showControls: true,
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── marqueeData / slots ─────────────────────────────────────────────────
+
+  it("renders each marqueeData item twice (main track + duplicate for looping)", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { marqueeData },
+      slots: {
+        "1": "<span class='logo-a'>A</span>",
+        "2": "<span class='logo-b'>B</span>",
+      },
+    });
+    expect(wrapper.findAll(".logo-a")).toHaveLength(2);
+    expect(wrapper.findAll(".logo-b")).toHaveLength(2);
+  });
+
+  it("renders no items when marqueeData is empty", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.findAll(".item")).toHaveLength(0);
+  });
+
+  // ─── reverse ─────────────────────────────────────────────────────────────
+
+  it("does not apply the reverse class by default", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.classes()).not.toContain("reverse");
+  });
+
+  it("applies the reverse class when reverse is true", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { reverse: true },
+    });
+    expect(wrapper.classes()).toContain("reverse");
+  });
+
+  // ─── Accessibility attributes ────────────────────────────────────────────
+
+  it("defaults aria-label to 'Scrolling content'", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.attributes("aria-label")).toBe("Scrolling content");
+  });
+
+  it("uses a custom ariaLabel when provided", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { ariaLabel: "Client logos" },
+    });
+    expect(wrapper.attributes("aria-label")).toBe("Client logos");
+  });
+
+  it("uses default screen-reader instructions when ariaDescription is not set", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.find(".sr-only").text()).toContain("Use spacebar to pause or play");
+  });
+
+  it("uses a custom ariaDescription when provided", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { ariaDescription: "Custom instructions" },
+    });
+    expect(wrapper.find(".sr-only").text()).toBe("Custom instructions");
+  });
+
+  it("sets aria-live to off while playing", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.attributes("aria-live")).toBe("off");
+  });
+
+  // ─── Controls ────────────────────────────────────────────────────────────
+
+  it("does not render the control button by default", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.find(".control-btn").exists()).toBe(false);
+  });
+
+  it("renders the control button when showControls is true", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true },
+    });
+    expect(wrapper.find(".control-btn").exists()).toBe(true);
+  });
+
+  it("toggles paused state and aria-live when the control button is clicked", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true },
+    });
+    await wrapper.find(".control-btn").trigger("click");
+    expect(wrapper.classes()).toContain("paused");
+    expect(wrapper.attributes("aria-live")).toBe("polite");
+    expect(wrapper.find(".control-btn").attributes("aria-label")).toBe("Play animation");
+  });
+
+  // ─── Control button icon / label customisation ──────────────────────────
+
+  it("renders the default play icon while playing", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true },
+    });
+    expect(wrapper.find(".control-btn").html()).toContain("mdi:pause");
+  });
+
+  it("renders the default play icon once paused", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true },
+    });
+    await wrapper.find(".control-btn").trigger("click");
+    expect(wrapper.find(".control-btn").html()).toContain("mdi:play");
+  });
+
+  it("renders a custom playIcon/pauseIcon", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true, playIcon: "mdi:play-circle", pauseIcon: "mdi:pause-circle" },
+    });
+    expect(wrapper.find(".control-btn").html()).toContain("mdi:pause-circle");
+    await wrapper.find(".control-btn").trigger("click");
+    expect(wrapper.find(".control-btn").html()).toContain("mdi:play-circle");
+  });
+
+  it("uses custom playLabel/pauseLabel for the control button's aria-label", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true, playLabel: "Reproduire", pauseLabel: "Suspendre" },
+    });
+    expect(wrapper.find(".control-btn").attributes("aria-label")).toBe("Suspendre");
+    await wrapper.find(".control-btn").trigger("click");
+    expect(wrapper.find(".control-btn").attributes("aria-label")).toBe("Reproduire");
+  });
+
+  it("replaces the toggle icon via the toggle-icon slot", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true },
+      slots: { "toggle-icon": "<span class='custom-icon'>custom</span>" },
+    });
+    expect(wrapper.find(".custom-icon").exists()).toBe(true);
+  });
+
+  it("passes isPaused to the toggle-icon slot", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { showControls: true },
+      slots: { "toggle-icon": "<template #toggle-icon=\"{ isPaused }\"><span class='state'>{{ isPaused }}</span></template>" },
+    });
+    expect(wrapper.find(".state").text()).toBe("false");
+    await wrapper.find(".control-btn").trigger("click");
+    expect(wrapper.find(".state").text()).toBe("true");
+  });
+
+  // ─── Keyboard interaction ────────────────────────────────────────────────
+
+  it("toggles pause on spacebar keydown", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    await wrapper.trigger("keydown", { key: " " });
+    expect(wrapper.classes()).toContain("paused");
+    await wrapper.trigger("keydown", { key: " " });
+    expect(wrapper.classes()).not.toContain("paused");
+  });
+
+  it("does not react to arrow keys (no manual-stepping behaviour is implemented)", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    await wrapper.trigger("keydown", { key: "ArrowLeft" });
+    await wrapper.trigger("keydown", { key: "ArrowRight" });
+    expect(wrapper.classes()).not.toContain("paused");
+  });
+
+  // ─── Focus / blur ────────────────────────────────────────────────────────
+
+  it("pauses on focus when respectReducedMotion is true (default)", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    await wrapper.trigger("focus");
+    expect(wrapper.classes()).toContain("paused");
+  });
+
+  it("resumes on blur when the user does not prefer reduced motion", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller);
+    await wrapper.trigger("focus");
+    await wrapper.trigger("blur");
+    expect(wrapper.classes()).not.toContain("paused");
+  });
+
+  it("does not pause on focus when respectReducedMotion is false", async () => {
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { respectReducedMotion: false },
+    });
+    await wrapper.trigger("focus");
+    expect(wrapper.classes()).not.toContain("paused");
+  });
+
+  // ─── Reduced motion ──────────────────────────────────────────────────────
+
+  it("auto-pauses and applies reduced-motion class when the user prefers reduced motion", async () => {
+    stubMatchMedia(true);
+    const wrapper = await mountSuspended(MarqueeScroller);
+    expect(wrapper.classes()).toContain("paused");
+    expect(wrapper.classes()).toContain("reduced-motion");
+  });
+
+  it("does not check matchMedia when respectReducedMotion is false", async () => {
+    stubMatchMedia(false);
+    const matchMediaSpy = vi.fn(() => ({ matches: false, addEventListener: vi.fn() }));
+    vi.stubGlobal("matchMedia", matchMediaSpy);
+    await mountSuspended(MarqueeScroller, {
+      props: { respectReducedMotion: false },
+    });
+    expect(matchMediaSpy).not.toHaveBeenCalled();
+  });
+
+  // ─── Repeating marqueeData to fill a wide container ─────────────────────
+
+  it("repeats marqueeData enough times so one group's width covers a wide container", async () => {
+    stubDimensions({ containerWidth: 500, groupScrollWidth: 100 });
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { marqueeData },
+      slots: { "1": "<span class='logo-a'></span>", "2": "<span class='logo-b'></span>" },
+    });
+    await nextTick();
+    await nextTick();
+    // needs ceil(500/100) = 5 copies of the 2-item data per group
+    expect(wrapper.findAll(".logo-a")).toHaveLength(10);
+    expect(wrapper.findAll(".logo-b")).toHaveLength(10);
+  });
+
+  it("does not add extra copies when a single copy already covers the container", async () => {
+    stubDimensions({ containerWidth: 50, groupScrollWidth: 200 });
+    const wrapper = await mountSuspended(MarqueeScroller, {
+      props: { marqueeData },
+      slots: { "1": "<span class='logo-a'></span>", "2": "<span class='logo-b'></span>" },
+    });
+    await nextTick();
+    await nextTick();
+    expect(wrapper.findAll(".logo-a")).toHaveLength(2);
+    expect(wrapper.findAll(".logo-b")).toHaveLength(2);
+  });
+});

package/app/components/01.atoms/animations/marquee-scroller/tests/__snapshots__/MarqueeScroller.spec.ts.snap

@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MarqueeScroller > renders correct HTML structure (all props set) 1`] = `
+"<div class="marquee-scroller reverse" role="region" aria-label="Client logos" aria-live="off" tabindex="0">
+  <div class="sr-only">Custom instructions</div><button class="control-btn" aria-label="Pause animation" type="button"><span class="iconify i-mdi:pause" aria-hidden="true"></span></button>
+  <div class="marquee-track" aria-hidden="true">
+    <div class="marquee-group">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="marquee-group" aria-hidden="true">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`MarqueeScroller > renders correct HTML structure (default props) 1`] = `
+"<div class="marquee-scroller" role="region" aria-label="Scrolling content" aria-live="off" tabindex="0">
+  <div class="sr-only">Use spacebar to pause or play the animation.</div>
+  <!--v-if-->
+  <div class="marquee-track" aria-hidden="true">
+    <div class="marquee-group"></div>
+    <div class="marquee-group" aria-hidden="true"></div>
+  </div>
+</div>"
+`;

package/app/components/01.atoms/content-wrappers/docs-pages/ContentDocs.vue

@@ -17,7 +17,7 @@
             <h3 class="docs-nav-heading">{{ docsNavLabel }}</h3>
           </template>
           <template #content>
-            <nav class="docs-nav-list" aria-label="Docs navigation">
+            <nav class="docs-nav-list" :aria-label="docsNavAriaLabel">
               <ul>
                 <li v-for="item in docsNavItems" :key="item.to">
                   <component
@@ -53,7 +53,7 @@
             <h3 class="docs-page-nav-heading">{{ docsPageNavLabel }}</h3>
           </template>
           <template #content>
-            <nav class="docs-page-nav-list" aria-label="On this page">
+            <nav class="docs-page-nav-list" :aria-label="docsPageNavAriaLabel">
               <ul>
                 <li v-for="item in docsPageNavItems" :key="item.to">
                   <component
@@ -91,6 +91,10 @@ interface Props {
   docsPageNavItems?: DocsNavItem[];
   docsNavLabel?: string;
   docsPageNavLabel?: string;
+  /** aria-label on the docs-nav <nav> landmark — override for localisation. */
+  docsNavAriaLabel?: string;
+  /** aria-label on the page-nav <nav> landmark — override for localisation. */
+  docsPageNavAriaLabel?: string;
   panelVariant?: "modern" | "classic";
   styleClassPassthrough?: string | string[];
 }
@@ -100,6 +104,8 @@ const props = withDefaults(defineProps<Props>(), {
   docsPageNavItems: () => [],
   docsNavLabel: "Navigation",
   docsPageNavLabel: "On this page",
+  docsNavAriaLabel: "Docs navigation",
+  docsPageNavAriaLabel: "On this page",
   // Defaults to "classic" — the docs/admin nav toggle relies on contentIsOnTop on mobile, and
   // ExpandingPanel's ::details-content-based positioning silently fails on WebKit (Safari/iOS),
   // making the nav unreachable there. See AccordianCore's own variant prop and CLAUDE.md

package/app/components/01.atoms/display-tooltip/DisplayTooltip.vue

@@ -7,7 +7,7 @@
         popovertargetaction="toggle"
         class="display-tooltip-trigger-button"
         :class="{ hide: hideTrigger }"
-        aria-label="Toggle the popover"
+        :aria-label="triggerAriaLabel"
       >
         <Icon name="fa7-solid:circle-question" class="display-tooltip-trigger-icon" aria-hidden="true" />
       </button>
@@ -24,12 +24,15 @@
 interface Props {
   tooltipId?: string;
   hideTrigger?: boolean;
+  /** aria-label on the trigger button — override for localisation. */
+  triggerAriaLabel?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   tooltipId: "",
   hideTrigger: false,
+  triggerAriaLabel: "Toggle the popover",
   styleClassPassthrough: () => [],
 });
 

package/app/components/01.atoms/navigation/breadcrumb/Breadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="breadcrumb" :class="[elementClasses]" aria-label="Breadcrumb">
+  <nav class="breadcrumb" :class="[elementClasses]" :aria-label="ariaLabel">
     <ol class="breadcrumb__list">
       <li v-for="(item, index) in items" :key="`${item.label}-${index}`" class="breadcrumb__item">
         <NuxtLink v-if="item.to" :to="item.to" class="breadcrumb__link">{{ item.label }}</NuxtLink>
@@ -18,11 +18,14 @@ import type { BreadcrumbItem } from "~/types/components/breadcrumb";
 interface Props {
   items: BreadcrumbItem[];
   separator?: string;
+  /** aria-label on the nav landmark — override for localisation. */
+  ariaLabel?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   separator: "/",
+  ariaLabel: "Breadcrumb",
   styleClassPassthrough: () => [],
 });
 

package/app/components/02.molecules/display-tooltip-defined/DisplayTooltipDefined.vue

@@ -1,5 +1,9 @@
 <template>
-  <DisplayTooltip :tooltip-id="tooltipId" :style-class-passthrough="styleClassPassthrough">
+  <DisplayTooltip
+    :tooltip-id="tooltipId"
+    :trigger-aria-label="triggerAriaLabel"
+    :style-class-passthrough="styleClassPassthrough"
+  >
     <template v-if="$slots.triggerContent" #triggerContent>
       <slot name="triggerContent"></slot>
     </template>
@@ -26,9 +30,9 @@
           :popovertarget="tooltipId"
           popovertargetaction="hide"
           class="display-tooltip-close-button"
-          aria-label="Close tool tip"
+          :aria-label="closeButtonAriaLabel"
         >
-          Close
+          {{ closeButtonText }}
         </button>
       </div>
     </template>
@@ -41,12 +45,21 @@ import type { TooltipContentText } from "~/types/components";
 interface Props {
   tooltipId?: string;
   contentText?: TooltipContentText;
+  /** aria-label on the trigger button — override for localisation. */
+  triggerAriaLabel?: string;
+  /** Visible text on the close button — override for localisation. */
+  closeButtonText?: string;
+  /** aria-label on the close button — override for localisation. */
+  closeButtonAriaLabel?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   tooltipId: "",
   contentText: () => ({}),
+  triggerAriaLabel: "Toggle the popover",
+  closeButtonText: "Close",
+  closeButtonAriaLabel: "Close tool tip",
   styleClassPassthrough: () => [],
 });
 

package/app/components/02.molecules/display-tooltip-defined/tests/__snapshots__/DisplayTooltipDefined.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`DisplayTooltipDefined > renders correct HTML structure 1`] = `
     <div class="display-tooltip-popover-content">
       <div class="popover-content-defined">
         <h4 class="tooltip-title subtitle-sm">Title</h4>
-        <p class="tooltip-body body-sm">Body copy</p><span class="tooltip-action input-value">Learn more</span><button popovertarget="nuxt-tooltip-fixed" popovertargetaction="hide" class="display-tooltip-close-button" aria-label="Close tool tip"> Close </button>
+        <p class="tooltip-body body-sm">Body copy</p><span class="tooltip-action input-value">Learn more</span><button popovertarget="nuxt-tooltip-fixed" popovertargetaction="hide" class="display-tooltip-close-button" aria-label="Close tool tip">Close</button>
       </div>
     </div>
   </div>

package/app/components/02.molecules/navigation/site-navigation/SiteNavigation.vue

@@ -7,7 +7,7 @@
       `site-navigation--${navAlign}`,
       { 'is-collapsed': isCollapsed, 'is-loaded': isLoaded, 'menu-open': isMenuOpen, 'is-animated': isAnimated },
     ]"
-    aria-label="Site navigation"
+    :aria-label="ariaLabel"
   >
     <ul
       v-if="!isCollapsed || !isLoaded"
@@ -106,11 +106,14 @@ interface Props {
   navItemData: NavItemData;
   navAlign?: "left" | "center" | "right";
   styleClassPassthrough?: string | string[];
+  /** aria-label on the nav landmark — override for localisation. */
+  ariaLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   navAlign: "left",
   styleClassPassthrough: () => [],
+  ariaLabel: "Site navigation",
 });
 
 // ─── Animation gate — prevents indicator from transitioning on first paint ───

package/app/components/02.molecules/navigation/tab-navigation/TabNavigation.vue

@@ -7,7 +7,7 @@
       `tab-navigation--${navAlign}`,
       { 'is-collapsed': isCollapsed, 'is-loaded': isLoaded, 'menu-open': isMenuOpen, 'is-animated': isAnimated },
     ]"
-    aria-label="Site navigation"
+    :aria-label="ariaLabel"
   >
     <ul v-if="!isCollapsed || !isLoaded" ref="navListRef" class="tab-nav-list" @mouseleave="hoveredItemHref = null">
       <li
@@ -131,12 +131,15 @@ interface Props {
   navAlign?: "left" | "center" | "right";
   styleClassPassthrough?: string | string[];
   anchorScrollOffset?: number | (() => number);
+  /** aria-label on the nav landmark — override for localisation. */
+  ariaLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   navAlign: "left",
   styleClassPassthrough: () => [],
   anchorScrollOffset: undefined,
+  ariaLabel: "Site navigation",
 });
 
 const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, isActiveItem, toggleMenu, closeMenu } =

package/app/components/03.organisms/image-galleries/slider-gallery/SliderGallery.vue

@@ -2,7 +2,7 @@
   <div ref="sliderGalleryWrapper" class="slider-gallery" :class="[elementClasses]">
     <div class="loading-state" :class="[{ galleryLoaded: !galleryLoaded }]">
       <div class="loading-spinner"></div>
-      <p>Loading gallery...</p>
+      <p>{{ loadingText }}</p>
     </div>
 
     <div v-if="showGallery" class="gallery-content" :class="[{ galleryLoaded: !galleryLoaded }]">
@@ -17,7 +17,7 @@
               {{ item.description }}
             </div>
             <div class="buttons" :class="item.textBrightness">
-              <button>SEE MORE</button>
+              <button>{{ seeMoreText }}</button>
             </div>
           </div>
         </div>
@@ -40,10 +40,10 @@
       </div>
 
       <div class="arrows">
-        <button id="prev" ref="prevDom" aria-label="Previous image" @click.prevent="doPrevious()">
+        <button id="prev" ref="prevDom" :aria-label="prevAriaLabel" @click.prevent="doPrevious()">
           <Icon name="ic:outline-keyboard-arrow-left" class="arrows-icon" />
         </button>
-        <button id="next" ref="nextDom" aria-label="Next image" @click.prevent="doNext()">
+        <button id="next" ref="nextDom" :aria-label="nextAriaLabel" @click.prevent="doNext()">
           <Icon name="ic:outline-keyboard-arrow-right" class="arrows-icon" />
         </button>
       </div>
@@ -60,6 +60,14 @@ interface Props {
   autoRun?: boolean;
   autoRunInterval?: number;
   animationDuration?: number;
+  /** Loading-state copy — override for localisation. */
+  loadingText?: string;
+  /** Per-slide call-to-action button copy — override for localisation. */
+  seeMoreText?: string;
+  /** aria-label on the previous-image button — override for localisation. */
+  prevAriaLabel?: string;
+  /** aria-label on the next-image button — override for localisation. */
+  nextAriaLabel?: string;
   styleClassPassthrough?: string | string[];
 }
 
@@ -67,6 +75,10 @@ const props = withDefaults(defineProps<Props>(), {
   autoRun: true,
   autoRunInterval: 7000,
   animationDuration: 3000,
+  loadingText: "Loading gallery...",
+  seeMoreText: "SEE MORE",
+  prevAriaLabel: "Previous image",
+  nextAriaLabel: "Next image",
   styleClassPassthrough: () => [],
 });
 

package/app/components/03.organisms/responsive-header/NavigationItems.vue

@@ -3,7 +3,7 @@
     class="overflow-navigation-wrapper"
     :class="[elementClasses, { 'is-panel-animating': isPanelAnimating }]"
     role="menu"
-    aria-label="Overflow navigation menu"
+    :aria-label="ariaLabel"
     @mouseleave="
       hoveredItemKey = null;
       hoveredChildKey = null;
@@ -115,6 +115,8 @@ interface Props {
   mainNavigationState?: ResponsiveHeaderState;
   panelVariant?: "modern" | "classic";
   styleClassPassthrough?: string | string[];
+  /** aria-label on the overflow menu — override for localisation. */
+  ariaLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -124,6 +126,7 @@ const props = withDefaults(defineProps<Props>(), {
   // "modern" is opt-in.
   panelVariant: "classic",
   styleClassPassthrough: () => [],
+  ariaLabel: "Overflow navigation menu",
 });
 
 const panelComponent = computed(() => (props.panelVariant === "modern" ? ExpandingPanel : ExpandingPanelClassic));