srcdev-nuxt-components 9.4.4 → 9.4.6

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/DeepExpandingMenuClassic.vue

@@ -0,0 +1,200 @@
+<template>
+  <component :is="tag" class="deep-expanding-menu-classic" :class="[elementClasses]">
+    <div class="inner">
+      <template v-for="(link, key) in navLinks" :key="key">
+        <NuxtLink v-if="link.path" :to="link.path" class="navigation-link">{{ link.name }}</NuxtLink>
+        <details v-else ref="navigationGroupRef" class="navigation-group" name="navigation-group">
+          <summary class="navigation-group-toggle">
+            <span>{{ link.name }}</span>
+            <Icon name="bi:caret-down-fill" class="icon" />
+          </summary>
+          <div class="navigation-group-panel">
+            <h4 class="page-heading-4 mb-6">{{ link.childLinksTitle }}</h4>
+            <ul class="navigation-group-list">
+              <li v-for="childLink in link.childLinks" :key="childLink.name" class="navigation-group-item">
+                <NuxtLink :to="childLink.path" class="navigation-group-link">{{ childLink.name }}</NuxtLink>
+              </li>
+            </ul>
+          </div>
+        </details>
+      </template>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+interface Props {
+  tag?: "div" | "section" | "nav" | "ul" | "ol";
+  navLinks?: ResponsiveHeaderNavItem[];
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "nav",
+  navLinks: () => [],
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const navigationGroupRef = useTemplateRef<HTMLElement[]>("navigationGroupRef");
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+onMounted(() => {
+  navigationGroupRef.value?.forEach((element, index) => {
+    onClickOutside(element, () => {
+      navigationGroupRef.value?.[index]?.removeAttribute("open");
+    });
+  });
+});
+</script>
+
+<style lang="css">
+@layer components {
+  @layer popover-setup {
+    .deep-expanding-menu-classic {
+      container-type: inline-size;
+      display: grid;
+      grid-template-areas: "element-stack";
+      align-items: center;
+      gap: var(--deep-expanding-menu-classic-gap, 1.2rem);
+
+      .inner {
+        grid-area: element-stack;
+        display: flex;
+        gap: var(--deep-expanding-menu-classic-item-gap, 2.4rem);
+        align-items: center;
+        z-index: 1;
+
+        .navigation-link,
+        .navigation-group-toggle {
+          all: unset;
+          border-bottom: var(--deep-expanding-menu-classic-link-border-width, 0.2rem) solid transparent;
+          padding-block: var(--deep-expanding-menu-classic-link-padding-block, 0.8rem);
+
+          transition: border-color 200ms;
+
+          &:hover,
+          &:focus,
+          &:focus-visible {
+            cursor: pointer;
+            border-color: var(
+              --deep-expanding-menu-classic-link-border-colour-hover,
+              light-dark(var(--blue-10), var(--slate-00))
+            );
+          }
+        }
+
+        .navigation-group {
+          --_icon-transform: scaleY(1);
+
+          display: grid;
+          grid-template-areas: "details-stack";
+          z-index: 1;
+          position: relative;
+
+          summary::-webkit-details-marker,
+          summary::marker {
+            display: none;
+          }
+
+          &[open] {
+            --_icon-transform: scaleY(-1);
+          }
+
+          .navigation-group-toggle {
+            grid-area: details-stack;
+
+            display: flex !important;
+            align-items: center;
+            gap: 1.2rem;
+            list-style: none;
+
+            .icon {
+              display: block;
+              font-size: var(--deep-expanding-menu-classic-icon-size, 1.2rem);
+
+              transform: var(--_icon-transform);
+              transition: transform 200ms;
+            }
+          }
+
+          .navigation-group-panel {
+            display: grid;
+            grid-area: details-stack;
+            z-index: 2;
+            position: absolute;
+            inset: auto;
+            top: var(--deep-expanding-menu-classic-panel-offset-top, 4rem);
+            left: 0rem;
+            gap: var(--deep-expanding-menu-classic-panel-list-gap, 1.2rem);
+
+            width: var(--deep-expanding-menu-classic-panel-width, 20rem);
+
+            @media screen and (min-width: 768px) {
+              width: var(--deep-expanding-menu-classic-panel-width-tablet, 40rem);
+            }
+
+            @media screen and (min-width: 1024px) {
+              width: var(--deep-expanding-menu-classic-panel-width-desktop, 60rem);
+            }
+
+            background-color: var(--deep-expanding-menu-classic-panel-background-colour, white);
+            border: var(--deep-expanding-menu-classic-panel-border-width, 0.1rem) solid
+              var(--deep-expanding-menu-classic-panel-border-colour, black);
+            border-radius: var(--deep-expanding-menu-classic-panel-border-radius, 1.2rem);
+            box-shadow: var(--deep-expanding-menu-classic-panel-shadow, 0 0 1rem rgba(0, 0, 0, 0.1));
+            padding: var(--deep-expanding-menu-classic-panel-padding, 1.2rem);
+            overflow: clip;
+
+            h4 {
+              color: var(--deep-expanding-menu-classic-panel-heading-colour, var(--slate-10));
+            }
+
+            .navigation-group-list {
+              display: grid;
+              grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+              gap: var(--deep-expanding-menu-classic-panel-list-gap, 1.2rem);
+              padding-inline-start: 0;
+              margin-block-end: 0.8rem;
+
+              .navigation-group-item {
+                display: block;
+
+                a.navigation-group-link {
+                  display: inline-block;
+                  color: var(--deep-expanding-menu-classic-group-link-colour, var(--slate-10));
+                  text-decoration: none;
+                  padding-block: 0.8rem;
+
+                  border-bottom: var(--deep-expanding-menu-classic-link-border-width, 0.2rem) solid transparent;
+
+                  transition: border-color 200ms;
+
+                  &:hover,
+                  &:focus-visible {
+                    cursor: pointer;
+                    border-color: var(
+                      --deep-expanding-menu-classic-group-link-border-colour-hover,
+                      var(--slate-10)
+                    );
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/stories/DeepExpandingMenuClassic.stories.ts

@@ -0,0 +1,79 @@
+import DeepExpandingMenuClassic from "../DeepExpandingMenuClassic.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+const navLinks: ResponsiveHeaderNavItem[] = [
+  { name: "Home", path: "/" },
+  {
+    name: "Services",
+    childLinksTitle: "Our services",
+    childLinks: [
+      { name: "Haircuts", path: "/services/haircuts" },
+      { name: "Colouring", path: "/services/colouring" },
+      { name: "Styling", path: "/services/styling" },
+    ],
+  },
+  { name: "Contact", path: "/contact" },
+];
+
+const meta: Meta<typeof DeepExpandingMenuClassic> = {
+  title: "Molecules/DeepExpandingMenuClassic",
+  component: DeepExpandingMenuClassic,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "nav", "ul", "ol"],
+      description: "Root element tag",
+      table: { category: "Basic" },
+    },
+    navLinks: { table: { disable: true } },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    tag: "nav",
+    navLinks,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "`<details>`/`<summary>`-based fallback implementation of `DeepExpandingMenu`, using `onClickOutside` to close an open group instead of CSS anchor-positioning/Popover API — use this when the modern implementation's browser support (see its own docs) isn't acceptable.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DeepExpandingMenuClassic>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { DeepExpandingMenuClassic },
+    setup() {
+      return { args };
+    },
+    template: `<DeepExpandingMenuClassic v-bind="args" style="padding: 4rem;" />`,
+  }),
+};
+
+export const CustomColours: Story = {
+  render: (args) => ({
+    components: { DeepExpandingMenuClassic },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DeepExpandingMenuClassic
+        v-bind="args"
+        style="padding: 4rem; --deep-expanding-menu-classic-panel-background-colour: #1a1a1a; --deep-expanding-menu-classic-panel-border-colour: transparent; --deep-expanding-menu-classic-group-link-colour: white; --deep-expanding-menu-classic-panel-heading-colour: #aaaaaa;"
+      />
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Overriding the public tokens via inline `--deep-expanding-menu-classic-*` custom properties.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/tests/DeepExpandingMenuClassic.spec.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DeepExpandingMenuClassic from "../DeepExpandingMenuClassic.vue";
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+const defaultNavLinks: ResponsiveHeaderNavItem[] = [
+  { name: "Home", path: "/" },
+  {
+    name: "Services",
+    childLinksTitle: "Our services",
+    childLinks: [
+      { name: "Haircuts", path: "/services/haircuts" },
+      { name: "Colouring", path: "/services/colouring" },
+    ],
+  },
+  { name: "Contact", path: "/contact" },
+];
+
+describe("DeepExpandingMenuClassic", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders a <nav> by default", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("nav");
+  });
+
+  it("renders the given tag", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, {
+      props: { navLinks: defaultNavLinks, tag: "div" },
+    });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("div");
+  });
+
+  it("renders a direct link for items with a path", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    const links = wrapper.findAll(".navigation-link");
+    expect(links.map((l) => l.text())).toEqual(["Home", "Contact"]);
+  });
+
+  it("renders a <details> group for items with childLinks", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.find("details.navigation-group").exists()).toBe(true);
+    expect(wrapper.find(".navigation-group-toggle").text()).toContain("Services");
+  });
+
+  it("renders each child link inside the group panel", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    const childLinks = wrapper.findAll(".navigation-group-link");
+    expect(childLinks.map((l) => l.text())).toEqual(["Haircuts", "Colouring"]);
+  });
+
+  it("renders the childLinksTitle heading", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.find(".navigation-group-panel h4").text()).toBe("Our services");
+  });
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, {
+      props: { navLinks: defaultNavLinks, styleClassPassthrough: ["custom-class"] },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("resets classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, {
+      props: { navLinks: defaultNavLinks, styleClassPassthrough: ["initial-class"] },
+    });
+    expect(wrapper.classes()).toContain("initial-class");
+
+    await wrapper.setProps({ styleClassPassthrough: ["updated-class"] });
+    expect(wrapper.classes()).not.toContain("initial-class");
+    expect(wrapper.classes()).toContain("updated-class");
+  });
+});

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/tests/__snapshots__/DeepExpandingMenuClassic.spec.ts.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DeepExpandingMenuClassic > renders correct HTML structure 1`] = `
+"<nav class="deep-expanding-menu-classic">
+  <div class="inner"><a href="/" class="navigation-link">Home</a>
+    <details class="navigation-group" name="navigation-group">
+      <summary class="navigation-group-toggle"><span>Services</span><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></summary>
+      <div class="navigation-group-panel">
+        <h4 class="page-heading-4 mb-6">Our services</h4>
+        <ul class="navigation-group-list">
+          <li class="navigation-group-item"><a href="/services/haircuts" class="navigation-group-link">Haircuts</a></li>
+          <li class="navigation-group-item"><a href="/services/colouring" class="navigation-group-link">Colouring</a></li>
+        </ul>
+      </div>
+    </details><a href="/contact" class="navigation-link">Contact</a>
+  </div>
+</nav>"
+`;

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/types/components/display-tooltip-defined.d.ts

@@ -0,0 +1,10 @@
+export interface TooltipContentTextItem {
+  tag: string
+  text: string
+}
+
+export interface TooltipContentText {
+  tooltipTitle?: TooltipContentTextItem
+  tooltipContent?: TooltipContentTextItem
+  tooltipAction?: TooltipContentTextItem
+}

package/app/types/components/index.ts

@@ -16,3 +16,5 @@ export * from "./social-icons-list.d"
 export * from "./content-docs.d"
 export * from "./breadcrumb"
 export * from "./cookie-consent-banner.d"
+export * from "./display-tooltip-defined.d"
+export * from "./marquee-scroller.d"

package/app/types/components/marquee-scroller.d.ts

@@ -0,0 +1,10 @@
+export interface MarqueeItem {
+  id: number
+  content: string
+}
+
+export interface MarqueeItemConfig {
+  width?: string
+  height?: string
+  gap?: string
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.4.4",
+  "version": "9.4.6",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",