srcdev-nuxt-components 9.1.8 → 9.1.9

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

@@ -17,7 +17,7 @@
       @mouseleave="resetHoverNavToActive"
       @mouseover="handleNavHover"
     >
-      <li v-for="item in navItemData.main" :key="item.href" :class="item.cssName">
+      <li v-for="item in navItemData.main" :key="item.href" :class="[item.cssName, { 'is-active': activeHref === item.href }]">
         <NuxtLink :href="item.href" :external="item.isExternal || undefined" class="site-nav-link" data-nav-item>
           <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
           {{ item.text }}
@@ -70,7 +70,7 @@
           @mouseover="handlePanelHover"
           @mouseleave="resetHoverPanelToActive"
         >
-          <li v-for="item in navItemData.main" :key="item.href" :class="item.cssName">
+          <li v-for="item in navItemData.main" :key="item.href" :class="[item.cssName, { 'is-active': activeHref === item.href }]">
             <NuxtLink
               :href="item.href"
               :external="item.isExternal || undefined"
@@ -231,9 +231,7 @@ const initNavDecorators = () => {
   }
 
   const activeLink =
-    links.find((el) => el.classList.contains("router-link-exact-active")) ??
-    links.find((el) => el.classList.contains("router-link-active")) ??
-    links[0];
+    links.find((el) => el.getAttribute("href") === activeHref.value) ?? links[0];
   if (!activeLink) return;
 
   currentActiveNavLink = activeLink;
@@ -337,9 +335,7 @@ const initPanelDecorators = () => {
   }
 
   const activeLink =
-    links.find((el) => el.classList.contains("router-link-exact-active")) ??
-    links.find((el) => el.classList.contains("router-link-active")) ??
-    links[0];
+    links.find((el) => el.getAttribute("href") === activeHref.value) ?? links[0];
   if (!activeLink) return;
 
   currentActivePanelLink = activeLink;
@@ -352,11 +348,20 @@ const initPanelDecorators = () => {
 
 // ─────────────────────────────────────────────────────────────────────────────
 
-// Close panel on navigation and re-init decorators.
-// flush: 'post' ensures router-link-active classes are applied.
-// requestAnimationFrame defers the measurement until after browser layout,
-// preventing stale offsetLeft reads and racing with hover setTimeouts.
+// Compute active href from route directly — avoids racing against Vue Router's
+// class application timing when reading router-link-exact-active from the DOM.
 const route = useRoute();
+
+const activeHref = computed(() => {
+  const items = props.navItemData.main ?? [];
+  const exact = items.find((item) => item.href && route.path === item.href);
+  if (exact) return exact.href ?? null;
+  return (
+    items
+      .filter((item) => item.href && route.path.startsWith(item.href + "/"))
+      .sort((a, b) => (b.href?.length ?? 0) - (a.href?.length ?? 0))[0]?.href ?? null
+  );
+});
 watch(
   () => route.path,
   () => {
@@ -584,9 +589,9 @@ watch(
           outline: none;
         }
 
-        &.router-link-exact-active {
-          color: var(--_link-active-color);
-        }
+      }
+      li.is-active .site-nav-link {
+        color: var(--_link-active-color);
       }
     }
 
@@ -777,9 +782,9 @@ watch(
             outline: none;
           }
 
-          &.router-link-exact-active {
-            color: var(--_panel-link-active-color);
-          }
+        }
+        li.is-active .site-nav-panel-link {
+          color: var(--_panel-link-active-color);
         }
       }
     }

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

@@ -0,0 +1,523 @@
+<template>
+  <nav
+    ref="navRef"
+    class="tab-navigation"
+    :class="[
+      elementClasses,
+      `tab-navigation--${navAlign}`,
+      { 'is-collapsed': isCollapsed, 'is-loaded': isLoaded, 'menu-open': isMenuOpen },
+    ]"
+    aria-label="Site navigation"
+  >
+    <ul
+      v-if="!isCollapsed || !isLoaded"
+      ref="navListRef"
+      class="tab-nav-list"
+      @mousemove="handleNavMousemove"
+      @mouseleave="hoveredItemHref = null"
+    >
+      <li
+        v-for="item in navItemData.main"
+        :key="item.href"
+        :data-href="item.href"
+        :class="[item.cssName, { 'is-active': activeHref === item.href, 'is-hovered': hoveredItemHref === item.href }]"
+      >
+        <NuxtLink :href="item.href" :external="item.isExternal || undefined" class="tab-nav-link" data-nav-item>
+          <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
+          {{ item.text }}
+        </NuxtLink>
+      </li>
+      <li aria-hidden="true" role="none" class="nav-indicator-li"><div class="nav__hovered"></div></li>
+      <li aria-hidden="true" role="none" class="nav-indicator-li"><div class="nav__active-indicator"></div></li>
+    </ul>
+
+    <InputButtonCore
+      v-if="isCollapsed && isLoaded"
+      class="tab-nav-burger"
+      :class="{ 'is-open': isMenuOpen }"
+      variant="tertiary"
+      :button-text="isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'"
+      :aria-expanded="String(isMenuOpen)"
+      aria-controls="tab-nav-panel"
+      @click="toggleMenu"
+    >
+      <template #iconOnly>
+        <span class="burger-bar" aria-hidden="true"></span>
+        <span class="burger-bar" aria-hidden="true"></span>
+        <span class="burger-bar" aria-hidden="true"></span>
+      </template>
+    </InputButtonCore>
+
+    <Teleport to="body">
+      <div
+        v-if="isCollapsed && isLoaded"
+        class="tab-nav-backdrop"
+        :class="{ 'is-open': isMenuOpen }"
+        aria-hidden="true"
+        @click="closeMenu"
+      ></div>
+    </Teleport>
+
+    <div
+      v-if="isCollapsed && isLoaded"
+      id="tab-nav-panel"
+      class="tab-nav-panel"
+      :class="{ 'is-open': isMenuOpen }"
+      :inert="!isMenuOpen ? true : undefined"
+    >
+      <div class="tab-nav-panel-inner">
+        <ul class="tab-nav-panel-list">
+          <li v-for="item in navItemData.main" :key="item.href" :class="item.cssName">
+            <NuxtLink
+              :href="item.href"
+              :external="item.isExternal || undefined"
+              class="tab-nav-panel-link"
+              @click="closeMenu"
+            >
+              <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
+              {{ item.text }}
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { useResizeObserver, onClickOutside } from "@vueuse/core";
+import type { NavItemData } from "~/types/components";
+
+interface Props {
+  navItemData: NavItemData;
+  navAlign?: "left" | "center" | "right";
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  navAlign: "left",
+  styleClassPassthrough: () => [],
+});
+
+const navRef = ref<HTMLElement | null>(null);
+const navListRef = ref<HTMLUListElement | null>(null);
+
+const isCollapsed = ref(false);
+const isLoaded = useState("tab-nav-loaded", () => false);
+const isMenuOpen = ref(false);
+
+// Stored natural width of the list — used when the list is not in the DOM
+let navListNaturalWidth = 0;
+
+const checkOverflow = () => {
+  if (!navRef.value) return;
+
+  if (navListRef.value) {
+    navListNaturalWidth = navListRef.value.scrollWidth;
+  }
+
+  isCollapsed.value = navListNaturalWidth > navRef.value.clientWidth;
+};
+
+const toggleMenu = () => {
+  isMenuOpen.value = !isMenuOpen.value;
+};
+
+const closeMenu = () => {
+  isMenuOpen.value = false;
+};
+
+const route = useRoute();
+
+// Compute the active nav item href from the current route.
+// Prefers an exact match; falls back to the longest prefix match.
+const activeHref = computed(() => {
+  const items = props.navItemData.main ?? [];
+  const exact = items.find((item) => item.href && route.path === item.href);
+  if (exact) return exact.href ?? null;
+  return (
+    items
+      .filter((item) => item.href && route.path.startsWith(item.href + "/"))
+      .sort((a, b) => (b.href?.length ?? 0) - (a.href?.length ?? 0))[0]?.href ?? null
+  );
+});
+
+const hoveredItemHref = ref<string | null>(null);
+
+const handleNavMousemove = (event: MouseEvent) => {
+  const li = (event.target as HTMLElement).closest<HTMLElement>("li[data-href]");
+  if (!li) return;
+  hoveredItemHref.value = li.dataset.href ?? null;
+};
+
+watch(
+  () => route.path,
+  () => {
+    closeMenu();
+  },
+  { flush: "post" }
+);
+
+useResizeObserver(navRef, () => {
+  checkOverflow();
+  if (!isCollapsed.value) closeMenu();
+});
+
+onClickOutside(navRef, closeMenu);
+
+onMounted(async () => {
+  await nextTick();
+  checkOverflow();
+  isLoaded.value = true;
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .tab-nav-backdrop {
+    --_backdrop-bg: var(--tab-nav-backdrop-bg, oklch(0% 0 0 / 55%));
+    --_backdrop-blur: var(--tab-nav-backdrop-blur, 3px);
+    --_backdrop-duration: var(--tab-nav-backdrop-duration, 350ms);
+
+    position: fixed;
+    inset: 0;
+    z-index: 10;
+    background: var(--_backdrop-bg);
+    backdrop-filter: blur(var(--_backdrop-blur));
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--_backdrop-duration) ease;
+
+    &.is-open {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  .tab-navigation {
+    /* ─── Public token API ────────────────────────────────────────────── */
+
+    /* Decorators — horizontal nav */
+    --_decorator-hovered-bg: var(--tab-nav-decorator-hovered-bg, transparent);
+    /* --_decorator-indicator-color: var(--tab-nav-decorator-indicator-color, var(--slate-01, currentColor)); */
+    --_decorator-indicator-color: red;
+
+    /* Horizontal nav */
+    --_link-color: var(--tab-nav-link-color, var(--slate-01, currentColor));
+    --_link-hover-color: var(--tab-nav-link-hover-color, var(--slate-04, var(--_link-color)));
+    --_link-active-color: var(--tab-nav-link-active-color, var(--slate-01, var(--_link-color)));
+    --_link-size: var(--tab-nav-link-size, 1.6rem);
+    --_link-tracking: var(--tab-nav-link-tracking, 0.06em);
+    --_link-weight: var(--tab-nav-link-weight, 400);
+    --_nav-gap: var(--tab-nav-gap, 2.2rem);
+    --_nav-transition: var(--tab-nav-transition, 250ms ease);
+
+    /* Panel */
+    --_panel-bg: var(--tab-nav-panel-bg, var(--page-bg, #1a1614));
+    --_panel-border-color: var(
+      --tab-nav-panel-border-color,
+      color-mix(in oklch, var(--slate-01, #c0847a) 35%, transparent)
+    );
+    --_panel-item-border: var(--tab-nav-panel-item-border, color-mix(in oklch, var(--slate-01, white) 8%, transparent));
+    --_panel-link-color: var(--tab-nav-panel-link-color, var(--slate-01, currentColor));
+    --_panel-link-hover-color: var(--tab-nav-panel-link-hover-color, var(--slate-04, var(--_panel-link-color)));
+    --_panel-link-active-color: var(--tab-nav-panel-link-active-color, var(--slate-01, var(--_panel-link-color)));
+    --_panel-padding-block: var(--tab-nav-panel-padding-block, 1.4rem);
+    --_panel-padding-inline: var(--tab-nav-panel-padding-inline, 1.5rem);
+    --_panel-slide-duration: var(--tab-nav-panel-slide-duration, 350ms);
+    --_panel-slide-easing: var(--tab-nav-panel-slide-easing, cubic-bezier(0.4, 0, 0.2, 1));
+
+    /* Burger */
+    --_burger-bar-width: var(--tab-nav-burger-width, 22px);
+    --_burger-bar-height: var(--tab-nav-burger-height, 1.5px);
+    --_burger-bar-gap: var(--tab-nav-burger-gap, 5px);
+    --_burger-color: var(--tab-nav-burger-color, var(--slate-01, currentColor));
+    --_burger-transition: var(--tab-nav-burger-transition, 300ms ease);
+
+    /* ─────────────────────────────────────────────────────────────────── */
+
+    display: flex;
+    align-items: center;
+    min-width: 0;
+
+    /* Hide everything until first measurement to prevent wrong-state flash */
+    &:not(.is-loaded) {
+      opacity: 0;
+    }
+
+    /* ─── Horizontal list ───────────────────────────────────────────── */
+
+    .tab-nav-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      gap: var(--_nav-gap);
+      align-items: center;
+      position: relative;
+
+      .nav-indicator-li {
+        /* display: contents removes the li's box entirely — children become
+           direct participants in the flex container, so position: absolute
+           on .nav__hovered / .nav__active-indicator resolves against
+           .tab-nav-list (same containing block as the anchor li elements).
+           Without this, .nav-indicator-li is the containing block, which is
+           a different scope and Chrome's anchor positioning rejects it. */
+        display: contents;
+      }
+
+      /* Indicators hidden by default — shown only with anchor positioning support */
+      .nav__hovered,
+      .nav__active-indicator {
+        display: none;
+        pointer-events: none;
+      }
+
+      .tab-nav-link {
+        display: flex;
+        align-items: center;
+        gap: 0.4em;
+        color: var(--_link-color);
+        font-size: var(--_link-size);
+        font-weight: var(--_link-weight);
+        letter-spacing: var(--_link-tracking);
+        text-decoration: none;
+        text-wrap: nowrap;
+        padding-block: 0.8rem;
+        padding-inline: 0.4rem;
+        position: relative;
+        z-index: 4;
+        transition: color var(--_nav-transition);
+
+        &:hover,
+        &:focus-visible {
+          color: var(--_link-hover-color);
+          outline: none;
+        }
+
+        &.router-link-exact-active {
+          color: var(--_link-active-color);
+        }
+      }
+    }
+
+    /* ─── Alignment variants ────────────────────────────────────────── */
+
+    &.tab-navigation--center .tab-nav-list {
+      margin-inline: auto;
+    }
+
+    &.tab-navigation--right .tab-nav-list {
+      margin-inline-start: auto;
+    }
+
+    &.is-collapsed {
+      justify-content: end;
+    }
+
+    /* ─── Burger button (InputButtonCore) ──────────────────────────── */
+
+    .tab-nav-burger.input-button-core.icon-only {
+      margin-inline-start: auto;
+      color: var(--_burger-color);
+
+      /* Strip all InputButtonCore visual styling */
+      background: none;
+      border: none;
+      outline: none;
+      text-decoration: none;
+      padding: 8px;
+      border-radius: 4px;
+      transition: outline-color var(--_nav-transition);
+
+      &.icon-only {
+        aspect-ratio: unset;
+        border-radius: 4px;
+
+        .btn-icon {
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          gap: var(--_burger-bar-gap);
+        }
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--_burger-color);
+        outline-offset: 4px;
+      }
+    }
+
+    .burger-bar {
+      display: block;
+      width: var(--_burger-bar-width);
+      height: var(--_burger-bar-height);
+      background: currentColor;
+      border-radius: 1px;
+      transform-origin: center;
+      transition:
+        transform var(--_burger-transition),
+        opacity var(--_burger-transition);
+    }
+
+    .tab-nav-burger.is-open {
+      .burger-bar:nth-child(1) {
+        transform: translateY(calc(var(--_burger-bar-height) + var(--_burger-bar-gap))) rotate(45deg);
+      }
+
+      .burger-bar:nth-child(2) {
+        opacity: 0;
+        transform: scaleX(0);
+      }
+
+      .burger-bar:nth-child(3) {
+        transform: translateY(calc(-1 * (var(--_burger-bar-height) + var(--_burger-bar-gap)))) rotate(-45deg);
+      }
+    }
+
+    /* ─── Mobile drop panel ─────────────────────────────────────────── */
+
+    .tab-nav-panel {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 100%;
+
+      display: grid;
+      grid-template-rows: 0fr;
+      border-block-start: 1px solid transparent;
+      transition:
+        grid-template-rows var(--_panel-slide-duration) var(--_panel-slide-easing),
+        border-color var(--_panel-slide-duration) var(--_panel-slide-easing);
+
+      z-index: 1;
+
+      &.is-open {
+        grid-template-rows: 1fr;
+        border-block-start-color: var(--_panel-border-color);
+      }
+
+      .tab-nav-panel-inner {
+        overflow: hidden;
+        background-color: var(--_panel-bg);
+      }
+
+      .tab-nav-panel-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+          border-block-end: 1px solid var(--_panel-item-border);
+
+          &:last-child {
+            border-block-end: none;
+          }
+
+          &:hover {
+            background-color: color-mix(in oklch, var(--slate-01, white) 5%, transparent);
+          }
+        }
+
+        .tab-nav-panel-link {
+          display: flex;
+          align-items: center;
+          gap: 0.5em;
+          color: var(--_panel-link-color);
+          font-size: var(--_link-size);
+          font-weight: var(--_link-weight);
+          letter-spacing: var(--_link-tracking);
+          text-decoration: none;
+          padding-block: var(--_panel-padding-block);
+          padding-inline: var(--_panel-padding-inline);
+          position: relative;
+          z-index: 1;
+          transition: color var(--_nav-transition);
+
+          &:hover,
+          &:focus-visible {
+            color: var(--_panel-link-hover-color);
+            outline: none;
+          }
+
+          &.router-link-exact-active {
+            color: var(--_panel-link-active-color);
+          }
+        }
+      }
+    }
+  }
+
+  /* ─── Anchor positioning for nav indicators ──────────────────────────────
+     anchor-name is declared unconditionally so the @oddbird polyfill can
+     read it on browsers without native support (the polyfill checks for
+     anchor-name in raw CSS text, but skips rules inside a failing @supports).
+     The display guard stays inside @supports so indicators are hidden on
+     truly old browsers where neither native CSS nor the polyfill will work.
+     Requires Chrome 125+, Edge 125+, Firefox 131+, or the polyfill.
+  ──────────────────────────────────────────────────────────────────────── */
+
+  /* Single anchor --tab-nav-indicator tracks the hovered item, or falls back
+     to the active item when nothing is hovered. No dual anchor-names needed. */
+
+  /* Nothing hovered: anchor sits on the active item */
+  .tab-navigation .tab-nav-list:not(:has(.is-hovered)) li.is-active {
+    anchor-name: --tab-nav-indicator;
+  }
+
+  /* Something hovered: anchor sits on the hovered item */
+  .tab-navigation .tab-nav-list li.is-hovered {
+    anchor-name: --tab-nav-indicator;
+  }
+
+  /* @supports (anchor-name: --x) { */
+  /* Hover highlight: background pill that follows the pointer */
+  .tab-navigation .tab-nav-list .nav__hovered {
+    display: block;
+    position: absolute;
+    position-anchor: --tab-nav-indicator;
+    left: anchor(left);
+    right: anchor(right);
+    top: 0;
+    bottom: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      left 200ms ease,
+      right 200ms ease,
+      opacity 150ms ease;
+    background: var(--tab-nav-decorator-hovered-bg, transparent);
+    border-radius: 4px;
+    z-index: 1;
+  }
+
+  .tab-navigation .tab-nav-list:has(.is-hovered) .nav__hovered {
+    opacity: 1;
+  }
+
+  /* Active indicator bar: always follows --tab-nav-indicator */
+  .tab-navigation .tab-nav-list .nav__active-indicator {
+    display: block;
+    position: absolute;
+    position-anchor: --tab-nav-indicator;
+    left: anchor(left);
+    right: anchor(right);
+    bottom: 0;
+    height: 2px;
+    pointer-events: none;
+    transition:
+      left 200ms ease,
+      right 200ms ease;
+    background-color: var(--tab-nav-decorator-indicator-color, var(--slate-01, currentColor));
+    z-index: 3;
+  }
+  /* } */
+}
+</style>

package/app/components/02.molecules/navigation/tab-navigation/stories/TabNavigation.stories.ts

@@ -0,0 +1,340 @@
+import { ref, reactive, computed } from "vue";
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import TabNavigationComponent from "../TabNavigation.vue";
+import type { NavItemData } from "~/types/components/navigation-horizontal.d";
+
+const meta: Meta<typeof TabNavigationComponent> = {
+  title: "Molecules/TabNavigation",
+  component: TabNavigationComponent,
+  argTypes: {
+    navAlign: {
+      control: { type: "select" },
+      options: ["left", "center", "right"],
+      description: "Horizontal alignment of the nav list",
+    },
+    navItemData: { table: { disable: true } },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    navAlign: "left",
+  },
+};
+
+export default meta;
+
+const navItemData: NavItemData = {
+  main: [
+    { text: "Home", href: "#" },
+    { text: "About", href: "#" },
+    { text: "Services", href: "#" },
+    { text: "Work", href: "#" },
+    { text: "Contact", href: "#" },
+  ],
+};
+
+type Theme = "light" | "dark";
+
+const themeDefaults: Record<
+  Theme,
+  {
+    indicatorColor: string;
+    linkColor: string;
+    linkHoverColor: string;
+    linkActiveColor: string;
+    panelBg: string;
+    panelLinkColor: string;
+    burgerColor: string;
+    pageBg: string;
+  }
+> = {
+  dark: {
+    indicatorColor: "#c0847a",
+    linkColor: "#f0ece8",
+    linkHoverColor: "#e09890",
+    linkActiveColor: "#c0847a",
+    panelBg: "#1a1614",
+    panelLinkColor: "#f0ece8",
+    burgerColor: "#f0ece8",
+    pageBg: "#1a1614",
+  },
+  light: {
+    indicatorColor: "#b05a50",
+    linkColor: "#1a1614",
+    linkHoverColor: "#b05a50",
+    linkActiveColor: "#8c3a30",
+    panelBg: "#f5f2f0",
+    panelLinkColor: "#1a1614",
+    burgerColor: "#1a1614",
+    pageBg: "#f5f2f0",
+  },
+};
+
+const DefaultTemplate: StoryFn<typeof TabNavigationComponent> = (args) => ({
+  components: { TabNavigationComponent },
+  setup() {
+    const theme = ref<Theme>("dark");
+
+    const controls = reactive({ ...themeDefaults.dark });
+
+    const setTheme = (newTheme: Theme) => {
+      theme.value = newTheme;
+      Object.assign(controls, themeDefaults[newTheme]);
+    };
+
+    const navStyle = computed(() => ({
+      "--tab-nav-decorator-indicator-color": controls.indicatorColor,
+      "--tab-nav-link-color": controls.linkColor,
+      "--tab-nav-link-hover-color": controls.linkHoverColor,
+      "--tab-nav-link-active-color": controls.linkActiveColor,
+      "--tab-nav-panel-bg": controls.panelBg,
+      "--tab-nav-panel-link-color": controls.panelLinkColor,
+      "--tab-nav-burger-color": controls.burgerColor,
+      "--page-bg": controls.pageBg,
+      "margin-block": "3.6rem",
+    }));
+
+    const cssSnippet = computed(
+      () => `.your-selector {
+  /* Indicator */
+  --tab-nav-decorator-indicator-color: ${controls.indicatorColor};
+
+  /* Horizontal nav links */
+  --tab-nav-link-color: ${controls.linkColor};
+  --tab-nav-link-hover-color: ${controls.linkHoverColor};
+  --tab-nav-link-active-color: ${controls.linkActiveColor};
+
+  /* Mobile panel */
+  --tab-nav-panel-bg: ${controls.panelBg};
+  --tab-nav-panel-link-color: ${controls.panelLinkColor};
+
+  /* Burger */
+  --tab-nav-burger-color: ${controls.burgerColor};
+}`
+    );
+
+    const copied = ref(false);
+    const copySnippet = async () => {
+      await navigator.clipboard.writeText(cssSnippet.value);
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, 2000);
+    };
+
+    return { args, navItemData, theme, controls, setTheme, navStyle, cssSnippet, copied, copySnippet };
+  },
+  template: `
+    <div class="sb-tabnav-story">
+
+      <div class="sb-tabnav-note">
+        Resize the browser window to see the navigation collapse into a burger menu.
+        The active indicator uses CSS <code>anchor-name</code> / <code>position-anchor</code> —
+        no JavaScript required. Unsupported browsers fall back to link colour changes only.
+      </div>
+      <div class="sb-tabnav-header" :class="'theme-' + theme" :style="navStyle">
+        <div class="sb-tabnav-logo">LOGO</div>
+        <TabNavigationComponent
+          :nav-item-data="navItemData"
+          :nav-align="args.navAlign"
+        />
+      </div>
+
+      <!-- Controls -->
+      <div class="sb-tabnav-playground">
+
+        <fieldset>
+          <legend>Theme</legend>
+          <div class="sb-control-row">
+            <label>Light / Dark</label>
+            <div class="sb-theme-toggle">
+              <button :class="{ active: theme === 'light' }" @click="setTheme('light')">Light</button>
+              <button :class="{ active: theme === 'dark' }" @click="setTheme('dark')">Dark</button>
+            </div>
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>Indicator</legend>
+          <div class="sb-control-row">
+            <label for="sb-indicator-color">Indicator colour</label>
+            <input id="sb-indicator-color" v-model="controls.indicatorColor" type="color" />
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>Horizontal nav links</legend>
+          <div class="sb-control-row">
+            <label for="sb-link-color">Link colour</label>
+            <input id="sb-link-color" v-model="controls.linkColor" type="color" />
+          </div>
+          <div class="sb-control-row">
+            <label for="sb-link-hover-color">Hover colour</label>
+            <input id="sb-link-hover-color" v-model="controls.linkHoverColor" type="color" />
+          </div>
+          <div class="sb-control-row">
+            <label for="sb-link-active-color">Active colour</label>
+            <input id="sb-link-active-color" v-model="controls.linkActiveColor" type="color" />
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>Mobile panel</legend>
+          <div class="sb-control-row">
+            <label for="sb-panel-bg">Panel background</label>
+            <input id="sb-panel-bg" v-model="controls.panelBg" type="color" />
+          </div>
+          <div class="sb-control-row">
+            <label for="sb-panel-link-color">Panel link colour</label>
+            <input id="sb-panel-link-color" v-model="controls.panelLinkColor" type="color" />
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>Burger</legend>
+          <div class="sb-control-row">
+            <label for="sb-burger-color">Burger colour</label>
+            <input id="sb-burger-color" v-model="controls.burgerColor" type="color" />
+          </div>
+        </fieldset>
+
+      </div>
+
+      <!-- CSS snippet -->
+      <div class="sb-css-snippet">
+        <div class="sb-css-snippet-header">
+          <strong>CSS Token Snippet</strong>
+          <button class="sb-copy-btn" @click="copySnippet">{{ copied ? 'Copied!' : 'Copy' }}</button>
+        </div>
+        <pre class="sb-css-snippet-code">{{ cssSnippet }}</pre>
+      </div>
+
+    </div>
+
+    <style>
+      .sb-tabnav-story {
+        font-size: 1.4rem;
+        display: grid;
+        gap: 2.4rem;
+        padding: 2.4rem;
+      }
+      .sb-tabnav-note {
+        font-size: 1.3rem;
+        color: #888;
+        font-style: italic;
+      }
+      .sb-tabnav-note code {
+        font-family: monospace;
+        background: rgba(128,128,128,0.15);
+        padding: 0.1em 0.4em;
+        border-radius: 0.2rem;
+      }
+      .sb-tabnav-header {
+        display: flex;
+        align-items: center;
+        gap: 3.2rem;
+        padding: 1.2rem 2.4rem;
+        transition: background 300ms;
+        position: relative;
+        min-height: 6rem;
+        border-radius: 0.4rem;
+      }
+      .sb-tabnav-header.theme-dark {
+        background: var(--page-bg, #1a1614);
+        color-scheme: dark;
+      }
+      .sb-tabnav-header.theme-light {
+        background: var(--page-bg, #f5f2f0);
+        color-scheme: light;
+      }
+      .sb-tabnav-logo {
+        font-size: 1.8rem;
+        font-weight: 700;
+        letter-spacing: 0.1em;
+        flex-shrink: 0;
+        opacity: 0.5;
+      }
+      .sb-tabnav-header .tab-navigation {
+        flex: 1;
+        min-width: 0;
+      }
+      .sb-tabnav-playground {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+        gap: 1.6rem;
+      }
+      .sb-tabnav-playground fieldset {
+        border: 1px solid #ccc;
+        border-radius: 0.4rem;
+        padding: 1.6rem;
+      }
+      .sb-tabnav-playground legend {
+        font-weight: bold;
+        padding: 0 0.8rem;
+        font-size: 1.4rem;
+      }
+      .sb-control-row {
+        display: grid;
+        grid-template-columns: 1fr 14rem;
+        gap: 1rem;
+        align-items: center;
+        padding: 0.5rem 0;
+        font-size: 1.3rem;
+      }
+      .sb-control-row input[type="color"] {
+        height: 3.2rem;
+        width: 100%;
+        padding: 0.2rem;
+        border: 1px solid #ccc;
+        border-radius: 0.2rem;
+        cursor: pointer;
+        background: transparent;
+      }
+      .sb-theme-toggle { display: flex; gap: 0.4rem; }
+      .sb-theme-toggle button {
+        padding: 0.4rem 1.6rem;
+        border: 1px solid #ccc;
+        border-radius: 0.2rem;
+        cursor: pointer;
+        background: transparent;
+        font-size: 1.3rem;
+        color: inherit;
+      }
+      .sb-theme-toggle button.active { background: #e0e0e0; font-weight: bold; }
+      .sb-css-snippet {
+        border: 1px solid #ccc;
+        border-radius: 0.4rem;
+        overflow: hidden;
+      }
+      .sb-css-snippet-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem 1.6rem;
+        border-bottom: 1px solid #ccc;
+        font-size: 1.4rem;
+      }
+      .sb-css-snippet-code {
+        margin: 0;
+        padding: 1.6rem;
+        font-family: monospace;
+        font-size: 1.3rem;
+        line-height: 1.6;
+        overflow-x: auto;
+        white-space: pre;
+      }
+      .sb-copy-btn {
+        padding: 0.4rem 1.2rem;
+        border: 1px solid #ccc;
+        border-radius: 0.2rem;
+        cursor: pointer;
+        background: transparent;
+        font-size: 1.3rem;
+        color: inherit;
+      }
+      .sb-copy-btn:hover { background: #e0e0e0; }
+    </style>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = { navAlign: "left" };

package/app/components/02.molecules/navigation/tab-navigation/tests/TabNavigation.spec.ts

@@ -0,0 +1,335 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import TabNavigation from "../TabNavigation.vue";
+import type { NavItemData } from "~/types/components/navigation-horizontal.d";
+
+// useResizeObserver (from @vueuse/core) requires ResizeObserver
+const mockResizeObserver = vi.fn(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+beforeEach(() => {
+  vi.stubGlobal("ResizeObserver", mockResizeObserver);
+  // ⚠️ Do NOT call vi.unstubAllGlobals() in afterEach —
+  // it removes global stubs from vitest.setup.ts ($fetch, etc.)
+});
+
+const defaultNavItemData: NavItemData = {
+  main: [
+    { text: "Home", href: "/" },
+    { text: "About", href: "/about" },
+    { text: "Contact", href: "/contact" },
+  ],
+};
+
+describe("TabNavigation", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders a nav element as root", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("nav");
+  });
+
+  it("has aria-label on the nav", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.attributes("aria-label")).toBe("Site navigation");
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── isLoaded ──────────────────────────────────────────────────────────────
+
+  it("applies is-loaded class after mounting", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    await nextTick();
+    expect(wrapper.classes()).toContain("is-loaded");
+  });
+
+  // ─── Nav list ──────────────────────────────────────────────────────────────
+
+  it("renders the nav list when not collapsed", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.find(".tab-nav-list").exists()).toBe(true);
+  });
+
+  it("renders the correct number of nav items", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    const items = wrapper.findAll(".tab-nav-list li:not(.nav-indicator-li)");
+    expect(items.length).toBe(3);
+  });
+
+  it("renders item text correctly", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    const links = wrapper.findAll(".tab-nav-link");
+    expect(links[0]!.text()).toContain("Home");
+    expect(links[1]!.text()).toContain("About");
+    expect(links[2]!.text()).toContain("Contact");
+  });
+
+  it("renders item href correctly", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    const links = wrapper.findAll(".tab-nav-link");
+    expect(links[0]!.attributes("href")).toBe("/");
+    expect(links[1]!.attributes("href")).toBe("/about");
+    expect(links[2]!.attributes("href")).toBe("/contact");
+  });
+
+  it("applies cssName as class on the li element", async () => {
+    const navItemData: NavItemData = {
+      main: [{ text: "Home", href: "/", cssName: "is-active" }],
+    };
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData },
+    });
+    expect(wrapper.find(".tab-nav-list li").classes()).toContain("is-active");
+  });
+
+  it("renders an icon when iconName is provided", async () => {
+    const navItemData: NavItemData = {
+      main: [{ text: "Home", href: "/", iconName: "heroicons:home" }],
+    };
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData },
+    });
+    const firstItem = wrapper.find(".tab-nav-list li:not(.nav-indicator-li)");
+    expect(firstItem.find("[aria-hidden='true']").exists()).toBe(true);
+  });
+
+  it("does not render an icon when iconName is not provided", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    const firstLink = wrapper.find(".tab-nav-link");
+    expect(firstLink.find("[aria-hidden='true']").exists()).toBe(false);
+  });
+
+  it("renders external links with the correct href", async () => {
+    const navItemData: NavItemData = {
+      main: [{ text: "External", href: "https://example.com", isExternal: true }],
+    };
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData },
+    });
+    expect(wrapper.find(".tab-nav-link").attributes("href")).toBe("https://example.com");
+  });
+
+  it("renders two indicator elements inside the nav list", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    const indicators = wrapper.findAll(".tab-nav-list .nav-indicator-li");
+    expect(indicators.length).toBe(2);
+    expect(wrapper.find(".nav__hovered").exists()).toBe(true);
+    expect(wrapper.find(".nav__active-indicator").exists()).toBe(true);
+  });
+
+  // ─── Alignment variants ────────────────────────────────────────────────────
+
+  it("applies tab-navigation--left class by default", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.classes()).toContain("tab-navigation--left");
+  });
+
+  it("applies tab-navigation--center class when navAlign is center", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData, navAlign: "center" },
+    });
+    expect(wrapper.classes()).toContain("tab-navigation--center");
+  });
+
+  it("applies tab-navigation--right class when navAlign is right", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData, navAlign: "right" },
+    });
+    expect(wrapper.classes()).toContain("tab-navigation--right");
+  });
+
+  // ─── styleClassPassthrough ─────────────────────────────────────────────────
+
+  it("applies styleClassPassthrough classes to the nav element", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: {
+        navItemData: defaultNavItemData,
+        styleClassPassthrough: ["custom-nav", "theme-dark"],
+      },
+    });
+    expect(wrapper.classes()).toContain("custom-nav");
+    expect(wrapper.classes()).toContain("theme-dark");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: {
+        navItemData: defaultNavItemData,
+        styleClassPassthrough: ["initial-class"],
+      },
+    });
+    expect(wrapper.classes()).toContain("initial-class");
+
+    await wrapper.setProps({ styleClassPassthrough: ["updated-class"] });
+    await nextTick();
+
+    expect(wrapper.classes()).toContain("updated-class");
+    expect(wrapper.classes()).not.toContain("initial-class");
+  });
+
+  // ─── Non-collapsed state (default in JSDOM — dimensions are all 0) ─────────
+
+  it("does not show the burger button when not collapsed", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.find(".tab-nav-burger").exists()).toBe(false);
+  });
+
+  it("does not show the nav panel when not collapsed", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.find(".tab-nav-panel").exists()).toBe(false);
+  });
+
+  it("does not have is-collapsed class when not collapsed", async () => {
+    const wrapper = await mountSuspended(TabNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.classes()).not.toContain("is-collapsed");
+  });
+
+  // ─── Collapsed state ───────────────────────────────────────────────────────
+  // isCollapsed is driven by DOM layout measurements (scrollWidth > clientWidth).
+  // In JSDOM both values are 0 so we cannot trigger collapse via resize.
+  // Instead we force the state directly through the component's setup context.
+
+  describe("when collapsed", () => {
+    interface TabNavSetup {
+      isCollapsed: boolean;
+      isMenuOpen: boolean;
+    }
+
+    async function mountCollapsed() {
+      const wrapper = await mountSuspended(TabNavigation, {
+        props: { navItemData: defaultNavItemData },
+      });
+      const setup = (wrapper.vm as unknown as { $: { setupState: TabNavSetup } }).$.setupState;
+      setup.isCollapsed = true;
+      await nextTick();
+      return { wrapper, setup };
+    }
+
+    it("applies is-collapsed class", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.classes()).toContain("is-collapsed");
+    });
+
+    it("hides the horizontal nav list", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".tab-nav-list").exists()).toBe(false);
+    });
+
+    it("shows the burger button", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".tab-nav-burger").exists()).toBe(true);
+    });
+
+    it("shows the nav panel", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".tab-nav-panel").exists()).toBe(true);
+    });
+
+    it("burger button has aria-expanded false when menu is closed", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".tab-nav-burger").attributes("aria-expanded")).toBe("false");
+    });
+
+    it("panel does not have is-open class when menu is closed", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".tab-nav-panel").classes()).not.toContain("is-open");
+    });
+
+    it("renders panel links matching main nav items", async () => {
+      const { wrapper } = await mountCollapsed();
+      const panelLinks = wrapper.findAll(".tab-nav-panel-link");
+      expect(panelLinks.length).toBe(3);
+      expect(panelLinks[0]!.text()).toContain("Home");
+      expect(panelLinks[1]!.text()).toContain("About");
+      expect(panelLinks[2]!.text()).toContain("Contact");
+    });
+
+    it("toggles isMenuOpen on burger click", async () => {
+      const { wrapper, setup } = await mountCollapsed();
+      expect(setup.isMenuOpen).toBe(false);
+      await wrapper.find(".tab-nav-burger").trigger("click");
+      expect(setup.isMenuOpen).toBe(true);
+      await wrapper.find(".tab-nav-burger").trigger("click");
+      expect(setup.isMenuOpen).toBe(false);
+    });
+
+    it("applies menu-open class when menu is open", async () => {
+      const { wrapper } = await mountCollapsed();
+      await wrapper.find(".tab-nav-burger").trigger("click");
+      await nextTick();
+      expect(wrapper.classes()).toContain("menu-open");
+    });
+
+    it("burger has aria-expanded true when menu is open", async () => {
+      const { wrapper } = await mountCollapsed();
+      await wrapper.find(".tab-nav-burger").trigger("click");
+      await nextTick();
+      expect(wrapper.find(".tab-nav-burger").attributes("aria-expanded")).toBe("true");
+    });
+
+    it("panel has is-open class when menu is open", async () => {
+      const { wrapper } = await mountCollapsed();
+      await wrapper.find(".tab-nav-burger").trigger("click");
+      await nextTick();
+      expect(wrapper.find(".tab-nav-panel").classes()).toContain("is-open");
+    });
+
+    it("panel is inert when menu is closed", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".tab-nav-panel").attributes("inert")).toBeDefined();
+    });
+
+    it("panel is not inert when menu is open", async () => {
+      const { wrapper } = await mountCollapsed();
+      await wrapper.find(".tab-nav-burger").trigger("click");
+      await nextTick();
+      expect(wrapper.find(".tab-nav-panel").attributes("inert")).toBeUndefined();
+    });
+
+    it("panel has aria-controls pointing to tab-nav-panel", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".tab-nav-burger").attributes("aria-controls")).toBe("tab-nav-panel");
+    });
+  });
+});

package/package.json

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