srcdev-nuxt-components 9.5.6 → 9.6.0

package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServiceSummaryGrid.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
 "<div class="service-summary-grid">
   <div class="service-summary">
     <div class="service-summary__grid">
-      <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/_/images/locs-installation.jpg"></div>
+      <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/locs-installation.jpg 1x, /_ipx/s_2160x2160/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/s_1080x1080/images/locs-installation.jpg"></div>
       <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
         <div class="eyebrow-text large">Subtitle for Locs Installation</div>
         <h2 id="v-0-0-0" class="hero-text mb-20 title axis-horizontal">
@@ -17,7 +17,7 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
   </div>
   <div class="service-summary">
     <div class="service-summary__grid">
-      <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" fetchpriority="auto" class="service-summary__image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+      <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/locs-retwist.jpg 1x, /_ipx/s_2160x2160/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" fetchpriority="auto" class="service-summary__image" src="/_ipx/s_1080x1080/images/locs-retwist.jpg"></div>
       <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
         <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
         <h2 id="v-0-0-1" class="hero-text mb-20 title axis-horizontal">
@@ -30,7 +30,7 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
   </div>
   <div class="service-summary">
     <div class="service-summary__grid">
-      <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" fetchpriority="auto" class="service-summary__image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+      <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/colour-treatment.jpg 1x, /_ipx/s_2160x2160/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" fetchpriority="auto" class="service-summary__image" src="/_ipx/s_1080x1080/images/colour-treatment.jpg"></div>
       <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
         <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
         <h2 id="v-0-0-2" class="hero-text mb-20 title axis-horizontal">

package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesCardGrid.spec.ts.snap

@@ -3,20 +3,20 @@
 exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
 "<div class="services-card-grid">
   <div class="services-card">
-    <div class="grid-stack image-wrapper">
-      <div class="grid-stack__layer"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="lazy" class="image" src="/_ipx/_/images/locs-installation.jpg"></div>
+    <div class="grid-stack services-card-image-wrapper">
+      <div class="grid-stack__layer"><img width="640" height="853" data-nuxt-img="" srcset="/_ipx/s_640x853/images/locs-installation.jpg 1x, /_ipx/s_1280x1706/images/locs-installation.jpg 2x" alt="Locs Installation" loading="lazy" class="services-card-image" src="/_ipx/s_640x853/images/locs-installation.jpg"></div>
       <div class="grid-stack__layer"></div>
     </div>
-    <div class="details-wrapper">
+    <div class="services-card-details">
       <div class="eyebrow-text large">Subtitle for Locs Installation</div>
       <h2 class="hero-text heading axis-horizontal">
         <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
       </h2>
-      <div class="description">Short description for Locs Installation.</div>
-      <div class="footer">
-        <div class="meta">
-          <div class="meta-duration">60 mins</div>
-          <div class="meta-price">£50</div>
+      <div class="services-card-description">Short description for Locs Installation.</div>
+      <div class="services-card-footer">
+        <div class="services-card-meta">
+          <div class="services-card-meta-duration">60 mins</div>
+          <div class="services-card-meta-price">£50</div>
         </div><a href="/services/locs-installation" data-testid="input-button" data-theme="default" class="input-button secondary mbs-24 is-link">
           <!--v-if-->
           <!--v-if--><span class="button-text">Enquire about Locs Installation</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
@@ -26,20 +26,20 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
     </div>
   </div>
   <div class="services-card">
-    <div class="grid-stack image-wrapper">
-      <div class="grid-stack__layer"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="lazy" class="image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+    <div class="grid-stack services-card-image-wrapper">
+      <div class="grid-stack__layer"><img width="640" height="853" data-nuxt-img="" srcset="/_ipx/s_640x853/images/locs-retwist.jpg 1x, /_ipx/s_1280x1706/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="lazy" class="services-card-image" src="/_ipx/s_640x853/images/locs-retwist.jpg"></div>
       <div class="grid-stack__layer"></div>
     </div>
-    <div class="details-wrapper">
+    <div class="services-card-details">
       <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
       <h2 class="hero-text heading axis-horizontal">
         <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
       </h2>
-      <div class="description">Short description for Locs Retwist.</div>
-      <div class="footer">
-        <div class="meta">
-          <div class="meta-duration">60 mins</div>
-          <div class="meta-price">£50</div>
+      <div class="services-card-description">Short description for Locs Retwist.</div>
+      <div class="services-card-footer">
+        <div class="services-card-meta">
+          <div class="services-card-meta-duration">60 mins</div>
+          <div class="services-card-meta-price">£50</div>
         </div><a href="/services/locs-retwist" data-testid="input-button" data-theme="default" class="input-button secondary mbs-24 is-link">
           <!--v-if-->
           <!--v-if--><span class="button-text">Enquire about Locs Retwist</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
@@ -49,20 +49,20 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
     </div>
   </div>
   <div class="services-card">
-    <div class="grid-stack image-wrapper">
-      <div class="grid-stack__layer"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" class="image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+    <div class="grid-stack services-card-image-wrapper">
+      <div class="grid-stack__layer"><img width="640" height="853" data-nuxt-img="" srcset="/_ipx/s_640x853/images/colour-treatment.jpg 1x, /_ipx/s_1280x1706/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" class="services-card-image" src="/_ipx/s_640x853/images/colour-treatment.jpg"></div>
       <div class="grid-stack__layer"></div>
     </div>
-    <div class="details-wrapper">
+    <div class="services-card-details">
       <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
       <h2 class="hero-text heading axis-horizontal">
         <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
       </h2>
-      <div class="description">Short description for Colour Treatment.</div>
-      <div class="footer">
-        <div class="meta">
-          <div class="meta-duration">60 mins</div>
-          <div class="meta-price">£50</div>
+      <div class="services-card-description">Short description for Colour Treatment.</div>
+      <div class="services-card-footer">
+        <div class="services-card-meta">
+          <div class="services-card-meta-duration">60 mins</div>
+          <div class="services-card-meta-price">£50</div>
         </div><a href="/services/colour-treatment" data-testid="input-button" data-theme="default" class="input-button secondary mbs-24 is-link">
           <!--v-if-->
           <!--v-if--><span class="button-text">Enquire about Colour Treatment</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>

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

@@ -20,6 +20,8 @@
           :main-nav-aria-label="mainNavAriaLabel"
           :secondary-nav-aria-label="secondaryNavAriaLabel"
           :overflow-menu-aria-label="overflowMenuAriaLabel"
+          :overflow-button-label="overflowButtonLabel"
+          :submenu-aria-label="submenuAriaLabel"
         >
           <template v-if="slots.secondaryNavigation" #secondaryNavigation>
             <slot name="secondaryNavigation"></slot>
@@ -54,6 +56,10 @@ interface Props {
   secondaryNavAriaLabel?: string;
   /** Forwarded to ResponsiveHeader's overflowMenuAriaLabel — override for localisation. */
   overflowMenuAriaLabel?: string;
+  /** Forwarded to ResponsiveHeader's overflowButtonLabel, the burger button's accessible name. */
+  overflowButtonLabel?: string;
+  /** Forwarded to ResponsiveHeader's submenuAriaLabel; {title} is replaced with the item's title. */
+  submenuAriaLabel?: string;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -73,6 +79,8 @@ withDefaults(defineProps<Props>(), {
   mainNavAriaLabel: "Main navigation",
   secondaryNavAriaLabel: "Secondary navigation",
   overflowMenuAriaLabel: "Overflow navigation menu",
+  overflowButtonLabel: "More navigation",
+  submenuAriaLabel: "{title} submenu",
 });
 
 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-links__link">Skip to main content</a><a href="#footer-content" class="skip-links__link">Skip to footer</a></nav>
       </div>
     </nav>
-    <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>
+    <div class="responsive-header-stub" main-nav-aria-label="Main navigation" secondary-nav-aria-label="Secondary navigation" overflow-menu-aria-label="Overflow navigation menu" overflow-button-label="More navigation" submenu-aria-label="{title} submenu"></div>
   </header>
 </div>"
 `;

package/app/components/05.forms/input-button/CONSUMER-STYLING.md

@@ -70,6 +70,14 @@ Same shape again:
 something this token set changes. The animated border added by `has-pending-effect` has its own
 `--pending-effect-*` tokens, see `../pending-effect/CONSUMER-STYLING.md`.
 
+### Text wrapping
+
+| Token | Default | Controls |
+|---|---|---|
+| `--input-button-text-white-space` | `nowrap` | Set `normal` to let a long label wrap onto several lines instead of overflowing the button. Unbroken strings break anywhere once wrapping is on |
+
+> Added 2026-10-06. `ServicesCardGrid` sets it to `normal` on its CTA buttons so a long service title stays inside the card.
+
 `InputCopy` and `PricingCard` fall back through `--input-button-primary-*` for their own copy/CTA
 buttons (see their own `CONSUMER-STYLING.md`) rather than duplicating this chain.
 

package/app/components/05.forms/input-button/InputButton.vue

@@ -292,7 +292,9 @@ watch(
 
     .button-text {
       display: inline-block;
-      white-space: nowrap;
+      min-inline-size: 0;
+      white-space: var(--input-button-text-white-space, nowrap);
+      overflow-wrap: anywhere;
       font-size: var(--button-font-size);
       line-height: var(--button-line-height);
       font-weight: var(--button-font-weight);

package/app/composables/tests/useAnchorScroll.spec.ts

@@ -75,6 +75,14 @@ describe("useAnchorScroll", () => {
         expect(history.pushState).not.toHaveBeenCalled();
       });
 
+      it("still records the clicked hash as active", () => {
+        stubMatchMedia(true);
+        appendEl("overview");
+        const { handleNavClick, activeHash } = useAnchorScroll();
+        handleNavClick(makeEvent(), "#overview");
+        expect(activeHash.value).toBe("#overview");
+      });
+
       it("does not scroll", () => {
         stubMatchMedia(true);
         const el = appendEl("overview");

package/app/composables/useAnchorScroll.ts

@@ -47,10 +47,10 @@ export const useAnchorScroll = (options: UseAnchorScrollOptions = {}) => {
   // and smooth-scroll ourselves.
   const handleNavClick = (event: MouseEvent, href: string): void => {
     if (!href.startsWith("#")) return;
+    activeHash.value = href;
     if (prefersReducedMotion()) return;
 
     event.preventDefault();
-    activeHash.value = href;
     history.pushState(null, "", href);
     scrollToAnchor(href);
   };

package/app/utils/opening-hours.ts

@@ -8,8 +8,29 @@ import type {
 
 const SCHEMA_DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
 
-export const resolveOpeningStatus = (entry: { status?: OpeningStatus; sessions?: OpeningSession[] }): OpeningStatus =>
-  entry.status ?? (entry.sessions?.length ? "open" : "closed");
+// "HH:MM" from 00:00 to 23:59, else null so the caller can show the raw value instead of throwing
+export const parseOpeningTime = (time: string): { hours: number; minutes: number } | null => {
+  const match = /^(\d{1,2}):(\d{2})$/.exec(time.trim());
+  if (!match) return null;
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  return hours < 24 && minutes < 60 ? { hours, minutes } : null;
+};
+
+// A real calendar date in "YYYY-MM-DD" form, as a UTC midnight Date, else null
+export const parseOpeningDate = (iso: string): Date | null => {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso.trim());
+  if (!match) return null;
+  const [y, m, d] = [Number(match[1]), Number(match[2]), Number(match[3])];
+  const date = new Date(Date.UTC(y, m - 1, d));
+  return date.getUTCFullYear() === y && date.getUTCMonth() === m - 1 && date.getUTCDate() === d ? date : null;
+};
+
+// "open" with no sessions has nothing to show, so it's treated as closed
+export const resolveOpeningStatus = (entry: { status?: OpeningStatus; sessions?: OpeningSession[] }): OpeningStatus => {
+  const status = entry.status ?? "open";
+  return status === "open" && !entry.sessions?.length ? "closed" : status;
+};
 
 const specsFor = (
   entry: { status?: OpeningStatus; sessions?: OpeningSession[] },

package/nuxt.config.ts

@@ -150,7 +150,7 @@ export default defineNuxtConfig({
     // "esbuild". lightningcss has an open bug where it drops the unprefixed `backdrop-filter`
     // once autoprefixer adds `-webkit-backdrop-filter` alongside it, breaking glass/blur effects
     // (see https://github.com/vitejs/vite/issues/22649) — this repo relies on backdrop-filter in
-    // several components (GlassPanel, SiteNavigation, TabNavigation, DisplayDialog,
+    // several components (GlassPanel, TabNavigation, DisplayDialog,
     // MagneticNavigation). Pin back to esbuild until upstream fixes it.
     build: {
       cssMinify: "esbuild",

package/package.json

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

package/.claude/skills/components/site-navigation.md

@@ -1,145 +0,0 @@
-# SiteNavigation
-
-## Overview
-
-`SiteNavigation` is a responsive site-wide navigation component. It renders a horizontal link list on wide viewports and automatically collapses to a burger-menu + slide-down panel on narrow viewports. Collapse is driven by a `ResizeObserver` that compares the list's natural `scrollWidth` against the nav container's `clientWidth` — no breakpoint prop needed.
-
-Both the horizontal list and the panel include animated active/hover indicator decorators (underline indicator + background highlight) that snap into position using CSS custom properties set via JavaScript.
-
-## Component location
-
-`app/components/02.molecules/navigation/site-navigation/SiteNavigation.vue`
-
-## Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `navItemData` | `NavItemData` | — (required) | Navigation items — see type below |
-| `navAlign` | `"left" \| "center" \| "right"` | `"left"` | Alignment of the horizontal nav list |
-| `ariaLabel` | `string` | `"Site navigation"` | aria-label on the root `<nav>` landmark — override for localisation |
-| `openMenuLabel` | `string` | `"Open navigation menu"` | Burger button text (screen-reader) while closed — override for localisation |
-| `closeMenuLabel` | `string` | `"Close navigation menu"` | Burger button text (screen-reader) while open — override for localisation |
-| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root `<nav>` |
-
-## NavItemData type
-
-**Within the layer:**
-
-```ts
-import type { NavItemData } from "~/types/components/nav-item.d";
-```
-
-**In a consuming app:**
-
-```ts
-import type { NavItemData } from "srcdev-nuxt-components";
-```
-
-```ts
-const navItemData: NavItemData = {
-  main: [
-    { text: "Home",     href: "/" },
-    { text: "About",    href: "/about" },
-    { text: "Services", href: "/services", cssName: "is-featured" },
-    { text: "Contact",  href: "/contact", iconName: "heroicons:envelope", isExternal: false },
-  ],
-};
-```
-
-`NavItem` fields:
-
-| Field | Type | Description |
-|---|---|---|
-| `text` | `string` | Link label |
-| `href` | `string` | Link destination |
-| `isExternal` | `boolean?` | Passed to NuxtLink `:external` — opens in new tab |
-| `iconName` | `string?` | Iconify icon name rendered before the label |
-| `cssName` | `string?` | CSS class applied to the `<li>` element |
-
-## Basic usage
-
-```vue
-<SiteNavigation :nav-item-data="navItemData" nav-align="left" />
-```
-
-Always use hyphenated prop names in templates (ESLint enforces this).
-
-## CSS token API
-
-Set these tokens on a parent element (e.g. your `<header>`) to theme the navigation.
-
-```css
-.your-header {
-  /* ── Decorators ────────────────────────────────────── */
-  --site-nav-decorator-indicator-color: var(--rose-05);  /* underline bar */
-  --site-nav-decorator-hovered-bg:      transparent;     /* hover pill behind a link */
-  --site-nav-decorator-active-bg:       transparent;     /* active pill behind a link */
-
-  /* ── Horizontal nav links ──────────────────────────── */
-  --site-nav-link-color:        var(--warm-01);
-  --site-nav-link-hover-color:  var(--rose-04);
-  --site-nav-link-active-color: var(--rose-05);
-  --site-nav-link-size:         1.6rem;
-  --site-nav-link-weight:       400;
-  --site-nav-link-tracking:     0.06em;
-  --site-nav-gap:               2.2rem;
-  --site-nav-transition:        250ms ease;
-
-  /* ── Mobile panel ──────────────────────────────────── */
-  --site-nav-panel-bg:                  var(--page-bg, #1a1614);
-  --site-nav-panel-border-color:        color-mix(in oklch, var(--rose-05) 35%, transparent);
-  --site-nav-panel-link-color:          var(--warm-01);
-  --site-nav-panel-link-hover-color:    var(--rose-04);
-  --site-nav-panel-link-active-color:   var(--rose-05);
-  --site-nav-panel-padding-block:       1.4rem;
-  --site-nav-panel-padding-inline:      1.5rem;
-  --site-nav-panel-slide-duration:      350ms;
-  --site-nav-panel-slide-easing:        cubic-bezier(0.4, 0, 0.2, 1);
-  --site-nav-panel-decorator-indicator-color: var(--rose-05);
-  --site-nav-panel-indicator-left:      0;      /* position the panel indicator bar */
-  --site-nav-panel-indicator-right:     auto;
-
-  /* ── Burger button ─────────────────────────────────── */
-  --site-nav-burger-color:      var(--warm-01);
-  --site-nav-burger-width:      22px;
-  --site-nav-burger-height:     1.5px;
-  --site-nav-burger-gap:        5px;
-  --site-nav-burger-transition: 300ms ease;
-
-}
-```
-
-The backdrop is teleported to `<body>`, so its tokens only land when set on `:root`/`html`/`body`,
-not on your header:
-
-```css
-:where(html) {
-  --site-nav-backdrop-bg:       oklch(0% 0 0 / 55%);
-  --site-nav-backdrop-blur:     3px;
-  --site-nav-backdrop-duration: 350ms;
-  --site-nav-backdrop-z-index:  10;  /* keep your header above this */
-}
-```
-
-Full reference: `app/components/02.molecules/navigation/site-navigation/CONSUMER-STYLING.md`.
-
-## Behaviour notes
-
-- **Collapse detection**: `ResizeObserver` fires on every container resize. The list's `scrollWidth` is cached whenever the list is in the DOM; that cached value is compared against the container's `clientWidth` to set `isCollapsed`.
-- **isLoaded state**: The component uses `useState("site-nav-loaded")` — a Nuxt shared state — to gate visibility until the first measurement is complete, preventing a flash of the wrong nav state on load. The nav renders `opacity: 0` until `is-loaded` is applied.
-- **Teleport**: The backdrop overlay is teleported to `<body>` via `<Teleport>` and is only mounted when `isCollapsed && isLoaded`.
-- **Panel inert**: The panel div (id `site-nav-panel-{useId}`, unique per instance) receives `:inert="!isMenuOpen ? true : undefined"` — it is inert (keyboard/pointer-inaccessible) when closed.
-- **Decorator init**: `initNavDecorators()` and `initPanelDecorators()` inject `<li>` elements with CSS-driven indicator `<div>`s. They query `[data-nav-item]` / `[data-panel-nav-item]` to find links, and look for `router-link-active` to set the initial active position.
-
-## Accessibility
-
-- Root `<nav>` has `aria-label` from the `ariaLabel` prop (default `"Site navigation"`).
-- Burger button text comes from `openMenuLabel`/`closeMenuLabel`, with `aria-expanded` (string `"true"/"false"`) and `aria-controls` pointing at the panel's per-instance id (was a fixed `site-nav-panel`, which collided when two navs were on one page; fixed 2026-09-27).
-- Backdrop and indicator `<li>` elements are `aria-hidden="true"`.
-- Panel div is `inert` when closed.
-
-## Related files
-
-- Type: `app/types/components/nav-item.d.ts`
-- Tests: `app/components/02.molecules/navigation/site-navigation/tests/SiteNavigation.spec.ts`
-- Story: `app/components/02.molecules/navigation/site-navigation/stories/SiteNavigation.stories.ts`

package/.vscode/srcdev-component-site-navigation.code-snippets

@@ -1,38 +0,0 @@
-{
-  "SRCDEV SiteNavigation": {
-    "description": "SiteNavigation: horizontal links that collapse to a burger panel when they don't fit",
-    "scope": "vue,html",
-    "body": [
-      "<SiteNavigation",
-      "  :nav-item-data=\"$1navItems\"",
-      "  nav-align=\"${2|left,center,right|}\"",
-      "  aria-label=\"${3:Site navigation}\"",
-      "/>"
-    ]
-  },
-  "SRCDEV SiteNavigation Items": {
-    "description": "NavItemData object for SiteNavigation",
-    "scope": "javascript,typescript",
-    "body": [
-      "const $1navItems: NavItemData = {",
-      "  main: [",
-      "    { text: \"$2Home\", href: \"/\" },",
-      "    { text: \"$3About\", href: \"/about\" },",
-      "  ],",
-      "};"
-    ]
-  },
-  "SRCDEV SiteNavigation CSS Override": {
-    "description": "CSS override scaffold for SiteNavigation tokens (backdrop tokens go on :root)",
-    "scope": "css",
-    "body": [
-      ".$1site-header {",
-      "  --site-nav-link-color: $2;",
-      "  --site-nav-link-hover-color: $3;",
-      "  --site-nav-decorator-indicator-color: $4;",
-      "  --site-nav-panel-bg: $5;",
-      "  --site-nav-burger-color: $6;",
-      "}"
-    ]
-  }
-}

package/app/components/02.molecules/navigation/site-navigation/CONSUMER-STYLING.md

@@ -1,109 +0,0 @@
-# SiteNavigation — Consumer Styling Guide
-
-## Public token API
-
-Defaults that read `var(--slate-01, currentColor)` use the library palette when it's loaded and fall
-back to the inherited text colour otherwise.
-
-### Horizontal nav
-
-| Token | Default | Controls |
-|---|---|---|
-| `--site-nav-link-color` | `var(--slate-01, currentColor)` | Link colour |
-| `--site-nav-link-hover-color` | `var(--slate-04, <link colour>)` | Link colour on hover |
-| `--site-nav-link-active-color` | `var(--slate-01, <link colour>)` | Active link colour |
-| `--site-nav-link-accent` | `var(--slate-01, currentColor)` | Link accent colour |
-| `--site-nav-link-size` | `1.6rem` | Link font size |
-| `--site-nav-link-weight` | `400` | Link font weight |
-| `--site-nav-link-tracking` | `0.06em` | Link letter spacing |
-| `--site-nav-gap` | `2.2rem` | Gap between links |
-| `--site-nav-transition` | `250ms ease` | Link colour transition |
-| `--site-nav-decorator-indicator-color` | `var(--slate-01, currentColor)` | Sliding underline bar |
-| `--site-nav-decorator-hovered-bg` | `transparent` | Sliding pill behind the hovered link |
-| `--site-nav-decorator-active-bg` | `transparent` | Pill behind the active link |
-
-> Changed 2026-09-27: `--site-nav-decorator-hovered-bg` and `--site-nav-decorator-active-bg` are
-> new. The values were hardcoded `transparent` with no override, unlike the panel equivalents.
-
-### Collapsed panel
-
-| Token | Default | Controls |
-|---|---|---|
-| `--site-nav-panel-bg` | `var(--page-bg, #1a1614)` | Panel background |
-| `--site-nav-panel-border-color` | `color-mix(in oklch, var(--slate-01, #c0847a) 35%, transparent)` | Top border when open |
-| `--site-nav-panel-item-border` | `color-mix(in oklch, var(--slate-01, white) 8%, transparent)` | Divider between panel links |
-| `--site-nav-panel-link-color` | `var(--slate-01, currentColor)` | Panel link colour |
-| `--site-nav-panel-link-hover-color` | `var(--slate-04, <panel link colour>)` | Panel link hover colour |
-| `--site-nav-panel-link-active-color` | `var(--slate-01, <panel link colour>)` | Active panel link colour |
-| `--site-nav-panel-padding-block` | `1.4rem` | Panel link vertical padding |
-| `--site-nav-panel-padding-inline` | `1.5rem` | Panel link horizontal padding |
-| `--site-nav-panel-slide-duration` | `350ms` | Open/close slide duration |
-| `--site-nav-panel-slide-easing` | `cubic-bezier(0.4, 0, 0.2, 1)` | Open/close easing |
-| `--site-nav-panel-decorator-indicator-color` | `var(--slate-01, currentColor)` | Panel indicator bar |
-| `--site-nav-panel-decorator-hovered-bg` | `transparent` | Pill behind the hovered panel link |
-| `--site-nav-panel-decorator-active-bg` | `transparent` | Pill behind the active panel link |
-| `--site-nav-panel-indicator-left` | `0` | Indicator bar left position |
-| `--site-nav-panel-indicator-right` | `auto` | Indicator bar right position |
-
-### Burger button
-
-| Token | Default | Controls |
-|---|---|---|
-| `--site-nav-burger-color` | `var(--slate-01, currentColor)` | Bar colour |
-| `--site-nav-burger-width` | `22px` | Bar width |
-| `--site-nav-burger-height` | `1.5px` | Bar thickness |
-| `--site-nav-burger-gap` | `5px` | Gap between bars |
-| `--site-nav-burger-transition` | `300ms ease` | Open/close morph |
-
-### Backdrop (teleported to `<body>`)
-
-| Token | Default | Controls |
-|---|---|---|
-| `--site-nav-backdrop-bg` | `oklch(0% 0 0 / 55%)` | Scrim colour |
-| `--site-nav-backdrop-blur` | `3px` | Blur behind the scrim |
-| `--site-nav-backdrop-duration` | `350ms` | Fade duration |
-| `--site-nav-backdrop-z-index` | `10` | Scrim stacking order; keep your header above it |
-
-> Changed 2026-09-27: `--site-nav-backdrop-z-index` is new (was a hardcoded `10`).
-
-The `--_*` variables declared on `.site-navigation` are the resolved copies of the tokens above
-that are read in more than one place: not public API.
-
----
-
-## State hooks
-
-| Hook | Element | When |
-|---|---|---|
-| `.site-navigation--left`, `--center`, `--right` | root `<nav>` | `nav-align` |
-| `.is-collapsed` | root | Links don't fit, so the burger and panel are shown |
-| `.is-loaded` | root | First measurement done (the nav is `opacity: 0` until then) |
-| `.menu-open` | root | Panel open |
-| `.is-animated` | root | Indicator transitions enabled (after first layout) |
-| `li.is-active` | nav and panel items | Item matches the current route |
-| `.is-open` | `.site-nav-burger`, `.site-nav-panel`, `.site-nav-backdrop` | Panel open |
-
-Inner classes: `.site-nav-list`, `.site-nav-link`, `.site-nav-burger`, `.burger-bar`,
-`.site-nav-panel`, `.site-nav-panel-inner`, `.site-nav-panel-list`, `.site-nav-panel-link`,
-`.site-nav-backdrop`; decorators `.nav__hovered`, `.nav__active`, `.nav__active-indicator`.
-Each item `li` also gets its `NavItem.cssName`.
-
----
-
-## Local overrides
-
-Set the tokens above on an element you own (a page or section class, or a class added with
-`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
-`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
-`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
-`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
-
-**Caveat:** the backdrop is teleported to `<body>`, outside your header, so the
-`--site-nav-backdrop-*` tokens only land when set on `:root`, `html` or `body`.
-
----
-
-## Class passthrough
-
-`style-class-passthrough` adds classes to the root `<nav>`. Reactive after mount. It doesn't reach
-the teleported backdrop.