srcdev-nuxt-components 9.4.5 → 9.4.7

package/app/components/01.atoms/pop-over/tests/PopOver.spec.ts

@@ -0,0 +1,195 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import PopOver from "../PopOver.vue";
+
+interface PopOverInstance {
+  popoverId: string;
+  anchorName: string;
+  handleToggle: (event: Event) => void;
+}
+
+const createWrapper = async (props: Record<string, unknown> = {}, slots: Record<string, string> = {}) => {
+  return mountSuspended(PopOver, { props, slots });
+};
+
+describe("PopOver", () => {
+  let wrapper: Awaited<ReturnType<typeof createWrapper>>;
+
+  beforeEach(() => {
+    // Popover API is not implemented in jsdom — define stubs so we can test
+    Object.defineProperty(HTMLElement.prototype, "hidePopover", {
+      value: vi.fn(),
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(HTMLElement.prototype, "showPopover", {
+      value: vi.fn(),
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+    vi.restoreAllMocks();
+    delete (HTMLElement.prototype as unknown as Record<string, unknown>)["hidePopover"];
+    delete (HTMLElement.prototype as unknown as Record<string, unknown>)["showPopover"];
+  });
+
+  it("mounts without error", async () => {
+    wrapper = await createWrapper();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    wrapper = await createWrapper(
+      {},
+      { trigger: "<span>Open</span>", content: "<p>Details</p>" }
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  describe("Trigger", () => {
+    it("renders the trigger slot", async () => {
+      wrapper = await createWrapper({}, { trigger: '<span class="slot-trigger">Open</span>' });
+      expect(wrapper.find(".slot-trigger").text()).toBe("Open");
+    });
+
+    it("trigger button has type='button'", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-trigger").attributes("type")).toBe("button");
+    });
+
+    it("does not set aria-label on the trigger by default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-trigger").attributes("aria-label")).toBeUndefined();
+    });
+
+    it("sets aria-label on the trigger when triggerAriaLabel is given", async () => {
+      wrapper = await createWrapper({ triggerAriaLabel: "Show filters" });
+      expect(wrapper.find(".pop-over-trigger").attributes("aria-label")).toBe("Show filters");
+    });
+
+    it("trigger button popovertarget matches the popover id", async () => {
+      wrapper = await createWrapper();
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      expect(wrapper.find(".pop-over-trigger").attributes("popovertarget")).toBe(vm.popoverId);
+    });
+
+    it("trigger button has popovertargetaction='toggle'", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-trigger").attributes("popovertargetaction")).toBe("toggle");
+    });
+  });
+
+  describe("Popover panel", () => {
+    it("renders the content slot", async () => {
+      wrapper = await createWrapper({}, { content: '<p class="slot-content">Details</p>' });
+      expect(wrapper.find(".pop-over-popover .slot-content").text()).toBe("Details");
+    });
+
+    it("has the popover attribute", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-popover").attributes("popover")).toBeDefined();
+    });
+
+    it("does not set aria-label by default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-popover").attributes("aria-label")).toBeUndefined();
+    });
+
+    it("sets aria-label when popoverAriaLabel is given", async () => {
+      wrapper = await createWrapper({ popoverAriaLabel: "Filter options" });
+      expect(wrapper.find(".pop-over-popover").attributes("aria-label")).toBe("Filter options");
+    });
+
+    it("sets data-placement on the root element", async () => {
+      wrapper = await createWrapper({ placement: "top" });
+      expect(wrapper.find(".pop-over").attributes("data-placement")).toBe("top");
+    });
+
+    it("defaults placement to right", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over").attributes("data-placement")).toBe("right");
+    });
+  });
+
+  describe("Close button", () => {
+    it("has a default aria-label", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-close-button").attributes("aria-label")).toBe("Close");
+    });
+
+    it("uses a custom closeButtonAriaLabel", async () => {
+      wrapper = await createWrapper({ closeButtonAriaLabel: "Dismiss" });
+      expect(wrapper.find(".pop-over-close-button").attributes("aria-label")).toBe("Dismiss");
+    });
+
+    it("has popovertargetaction='hide' pointing at the popover", async () => {
+      wrapper = await createWrapper();
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      const closeButton = wrapper.find(".pop-over-close-button");
+      expect(closeButton.attributes("popovertargetaction")).toBe("hide");
+      expect(closeButton.attributes("popovertarget")).toBe(vm.popoverId);
+    });
+  });
+
+  describe("handleToggle focus management", () => {
+    it("focuses the close button when the popover opens", async () => {
+      wrapper = await createWrapper();
+      const closeButtonEl = wrapper.find(".pop-over-close-button").element as HTMLElement;
+      const focusSpy = vi.spyOn(closeButtonEl, "focus");
+
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      vm.handleToggle(Object.assign(new Event("toggle"), { newState: "open" }));
+
+      expect(focusSpy).toHaveBeenCalledOnce();
+    });
+
+    it("does not move focus when the popover closes", async () => {
+      wrapper = await createWrapper();
+      const closeButtonEl = wrapper.find(".pop-over-close-button").element as HTMLElement;
+      const focusSpy = vi.spyOn(closeButtonEl, "focus");
+
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      vm.handleToggle(Object.assign(new Event("toggle"), { newState: "closed" }));
+
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Anchor name", () => {
+    it("sets a unique --_anchor-name on the root element style", async () => {
+      wrapper = await createWrapper();
+      const style = wrapper.find(".pop-over").attributes("style") ?? "";
+      expect(style).toContain("--_anchor-name: --pop-over-anchor-");
+    });
+  });
+
+  describe("styleClassPassthrough", () => {
+    it("applies a string class to the root element", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: "custom-pop-over" });
+      expect(wrapper.find(".pop-over").classes()).toContain("custom-pop-over");
+    });
+
+    it("applies an array of classes to the root element", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: ["pop-over-a", "pop-over-b"] });
+      expect(wrapper.find(".pop-over").classes()).toContain("pop-over-a");
+      expect(wrapper.find(".pop-over").classes()).toContain("pop-over-b");
+    });
+
+    it("root element always has the 'pop-over' class", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: "extra-class" });
+      expect(wrapper.find(".pop-over").classes()).toContain("pop-over");
+    });
+
+    it("resets classes when styleClassPassthrough prop changes", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: "initial-class" });
+      expect(wrapper.find(".pop-over").classes()).toContain("initial-class");
+
+      await wrapper.setProps({ styleClassPassthrough: "updated-class" });
+      expect(wrapper.find(".pop-over").classes()).not.toContain("initial-class");
+      expect(wrapper.find(".pop-over").classes()).toContain("updated-class");
+    });
+  });
+});

package/app/components/01.atoms/pop-over/tests/__snapshots__/PopOver.spec.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PopOver > renders correct HTML structure 1`] = `
+"<div class="pop-over" style="--_anchor-name: --pop-over-anchor-v-0-0;" data-placement="right"><button popovertarget="pop-over-v-0-0" popovertargetaction="toggle" type="button" class="pop-over-trigger"><span>Open</span></button>
+  <div id="pop-over-v-0-0" popover="" class="pop-over-popover"><button popovertarget="pop-over-v-0-0" popovertargetaction="hide" type="button" class="pop-over-close-button" aria-label="Close"><span class="iconify i-lucide:x pop-over-close-button-icon" aria-hidden="true"></span></button>
+    <div class="pop-over-content">
+      <p>Details</p>
+    </div>
+  </div>
+</div>"
+`;

package/app/components/02.molecules/action-menu/stories/ActionMenu.stories.ts

@@ -74,10 +74,16 @@ export const Default: Story = {
   render: (args) => ({
     components: { ActionMenu, ActionMenuItemCore },
     setup() {
-      const { itemCount, ...componentArgs } = args;
+      // `args` is Storybook's own reactive object — read from it directly (`args.x`) inside
+      // these computeds rather than destructuring it into local variables at setup-time, which
+      // would snapshot the values once and stop reflecting later Controls-panel changes.
+      const componentArgs = computed(() => {
+        const { itemCount, ...rest } = args;
+        return rest;
+      });
       const lastAction = ref<string | null>(null);
       const items = computed(() =>
-        actionItems.slice(0, itemCount ?? 5).map((item, i) => ({
+        actionItems.slice(0, args.itemCount ?? 5).map((item, i) => ({
           ...item,
           slotName: `item-${i}`,
         }))

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/input-copy/InputCopy.vue

@@ -2,8 +2,10 @@
   <div class="input-copy" :class="elementClasses">
     <div class="input-copy__wrapper">
       <input
+        :id="resolvedId"
         type="text"
         class="input-copy__input"
+        :name="name || resolvedId"
         :value="value"
         :aria-label="ariaLabel || label"
         readonly
@@ -26,6 +28,9 @@
 <script setup lang="ts">
 interface Props {
   value: string;
+  /** Defaults to an auto-generated id — pass one explicitly only if something needs to target this input. */
+  id?: string;
+  name?: string;
   label?: string;
   ariaLabel?: string;
   description?: string;
@@ -37,6 +42,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  id: undefined,
+  name: undefined,
   label: undefined,
   ariaLabel: undefined,
   description: undefined,
@@ -47,6 +54,13 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
+// Readonly text inputs still need an id/name to satisfy "a form field element should have an
+// id or name attribute" — auto-generated so every existing call site (none of which pass one)
+// gets a valid, unique id for free. Named resolvedId, not id, so it can't be confused with (or
+// silently shadow) the `id` prop it falls back to.
+const autoId = useId();
+const resolvedId = computed(() => props.id ?? autoId);
+
 const emit = defineEmits<{
   copy: [value: string];
   copied: [value: string];

package/app/components/02.molecules/input-copy/stories/InputCopy.stories.ts

@@ -7,6 +7,11 @@ const meta: Meta<typeof InputCopy> = {
   tags: ["autodocs"],
   argTypes: {
     value: { control: "text" },
+    id: {
+      control: "text",
+      description: "Defaults to an auto-generated id — pass one only if something needs to target this input.",
+    },
+    name: { control: "text", description: "Defaults to the resolved id if not provided." },
     label: { control: "text" },
     description: { control: "text" },
     buttonText: { control: "text" },
@@ -101,6 +106,16 @@ export const NoDescription: Story = {
   },
 };
 
+export const WithExplicitIdAndName: Story = {
+  args: {
+    value: "sk_live_abc123defgh456xyz789uvw",
+    id: "checkout-license-key",
+    name: "licenseKey",
+    label: "License key",
+    description: "Demonstrates passing explicit id/name instead of relying on the auto-generated one.",
+  },
+};
+
 export const LongValue: Story = {
   args: {
     value: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.POdHyP_DQkT3WTZhu9qLWSwVe8ZlHfHEPBOzzVI3vFA",

package/app/components/02.molecules/input-copy/tests/InputCopy.spec.ts

@@ -178,4 +178,45 @@ describe("InputCopy", () => {
     expect(wrapper.classes()).toContain("custom-class");
     expect(wrapper.classes()).toContain("another-class");
   });
+
+  it("auto-generates an id and mirrors it as the name when neither is provided", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+      },
+    });
+
+    const input = wrapper.find("input");
+    const id = input.attributes("id");
+
+    expect(id).toBeTruthy();
+    expect(input.attributes("name")).toBe(id);
+  });
+
+  it("uses the provided id prop instead of auto-generating one", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        id: "license-key-input",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.attributes("id")).toBe("license-key-input");
+    expect(input.attributes("name")).toBe("license-key-input");
+  });
+
+  it("uses the provided name prop instead of falling back to the id", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        id: "license-key-input",
+        name: "licenseKey",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.attributes("id")).toBe("license-key-input");
+    expect(input.attributes("name")).toBe("licenseKey");
+  });
 });

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));

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

@@ -9,7 +9,7 @@
       ref="mainNav"
       class="main-navigation"
       :class="{ 'is-animated': isAnimated }"
-      aria-label="Main navigation"
+      :aria-label="mainNavAriaLabel"
       @mouseleave="hoveredItemKey = null"
       @focusout="handleNavFocusout"
     >
@@ -78,7 +78,7 @@
       <div aria-hidden="true" class="nav-indicator-hovered"></div>
       <div aria-hidden="true" class="nav-indicator-active"></div>
     </nav>
-    <nav ref="secondaryNav" class="secondary-navigation" aria-label="Secondary navigation">
+    <nav ref="secondaryNav" class="secondary-navigation" :aria-label="secondaryNavAriaLabel">
       <details
         ref="overflowDetails"
         class="overflow-details"
@@ -100,7 +100,11 @@
           />
         </summary>
         <div class="overflow-details-nav" role="menu">
-          <NavigationItems :main-navigation-state="mainNavigationState" :panel-variant="panelVariant" />
+          <NavigationItems
+            :main-navigation-state="mainNavigationState"
+            :panel-variant="panelVariant"
+            :aria-label="overflowMenuAriaLabel"
+          />
         </div>
       </details>
       <slot v-if="slots.secondaryNavigation" name="secondaryNavigation"></slot>
@@ -126,6 +130,12 @@ interface Props {
   styleClassPassthrough?: string | string[];
   allowExpandOnGesture?: boolean;
   panelVariant?: "modern" | "classic";
+  /** aria-label on the primary nav landmark — override for localisation. */
+  mainNavAriaLabel?: string;
+  /** aria-label on the secondary (overflow) nav landmark — override for localisation. */
+  secondaryNavAriaLabel?: string;
+  /** aria-label on the overflow menu itself (forwarded to NavigationItems) — override for localisation. */
+  overflowMenuAriaLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -142,6 +152,9 @@ const props = withDefaults(defineProps<Props>(), {
   // Forwarded to NavigationItems' overflow submenu panels — see its own default for why
   // "classic" is the safe default (CLAUDE.md pitfall #19).
   panelVariant: "classic",
+  mainNavAriaLabel: "Main navigation",
+  secondaryNavAriaLabel: "Secondary navigation",
+  overflowMenuAriaLabel: "Overflow navigation menu",
 });
 
 const collapseNavigationBelowWidth = computed(

package/app/components/03.organisms/site-header/SiteHeader.vue

@@ -2,7 +2,7 @@
   <PageRow tag="div" :variant="pageRowVariant" :style-class-passthrough="styleClassPassthrough">
     <template #default>
       <header class="site-header">
-        <nav class="home-navigation" aria-label="Home Navigation">
+        <nav class="home-navigation" :aria-label="homeNavAriaLabel">
           <SkipLinks>
             <template #homeLink>
               <slot name="branding"></slot>
@@ -17,6 +17,9 @@
           :collapse-at-main-nav-intersection="collapseAtMainNavIntersection"
           :allow-expand-on-gesture="allowExpandOnGesture"
           :style-class-passthrough="navStyleClassPassthrough"
+          :main-nav-aria-label="mainNavAriaLabel"
+          :secondary-nav-aria-label="secondaryNavAriaLabel"
+          :overflow-menu-aria-label="overflowMenuAriaLabel"
         >
           <template v-if="slots.secondaryNavigation" #secondaryNavigation>
             <slot name="secondaryNavigation"></slot>
@@ -43,6 +46,14 @@ interface Props {
   pageRowVariant?: "full" | "popout" | "content" | "inset-content";
   styleClassPassthrough?: string | string[];
   navStyleClassPassthrough?: string | string[];
+  /** aria-label on the home/branding nav landmark — override for localisation. */
+  homeNavAriaLabel?: string;
+  /** Forwarded to ResponsiveHeader's mainNavAriaLabel — override for localisation. */
+  mainNavAriaLabel?: string;
+  /** Forwarded to ResponsiveHeader's secondaryNavAriaLabel — override for localisation. */
+  secondaryNavAriaLabel?: string;
+  /** Forwarded to ResponsiveHeader's overflowMenuAriaLabel — override for localisation. */
+  overflowMenuAriaLabel?: string;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -58,6 +69,10 @@ withDefaults(defineProps<Props>(), {
   pageRowVariant: "content",
   styleClassPassthrough: () => [],
   navStyleClassPassthrough: () => [],
+  homeNavAriaLabel: "Home Navigation",
+  mainNavAriaLabel: "Main navigation",
+  secondaryNavAriaLabel: "Secondary navigation",
+  overflowMenuAriaLabel: "Overflow navigation menu",
 });
 
 const slots = useSlots();

package/app/components/03.organisms/site-header/tests/__snapshots__/SiteHeader.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`SiteHeader > renders correct HTML structure with default props 1`] = `
         <nav class="skip-links-nav" aria-label="Skip navigation"><a href="#main-content" class="skip-link">Skip to main content</a><a href="#footer-content" class="skip-link">Skip to footer</a></nav>
       </div>
     </nav>
-    <div class="responsive-header-stub"></div>
+    <div class="responsive-header-stub" main-nav-aria-label="Main navigation" secondary-nav-aria-label="Secondary navigation" overflow-menu-aria-label="Overflow navigation menu"></div>
   </header>
 </div>"
 `;

package/app/components/05.forms/input-select/InputSelectCore.vue

@@ -21,7 +21,7 @@
         v-for="item in fieldData.data"
         :key="item.id"
         :value="item.value"
-        :selected="Number(item.value) === modelValue"
+        :selected="String(item.value) === String(modelValue)"
         class="input-select-core-option"
       >
         <Icon