srcdev-nuxt-components 9.1.2 → 9.1.4

package/.claude/skills/components/glass-panel.md

@@ -0,0 +1,89 @@
+---
+name: GlassPanel
+description: GlassPanel props, slots, CSS token API, and theming override
+type: reference
+---
+
+# GlassPanel
+
+## Overview
+
+`GlassPanel` is a semantic container with a frosted-glass visual effect — blurred background, border, drop shadow, and an angled specular highlight on the top-left corner. All visual properties are driven by CSS custom properties so they can be overridden per-theme.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tag` | `"div" \| "section" \| "article" \| "main" \| "header" \| "footer"` | `"div"` | Rendered HTML element |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Panel content |
+
+## Basic usage
+
+```vue
+<GlassPanel tag="section" :style-class-passthrough="['p-8']">
+  <p>Content here</p>
+</GlassPanel>
+```
+
+## CSS token API
+
+All four tokens must be defined — the component has no built-in fallbacks.
+
+| Token | What it controls |
+|-------|-----------------|
+| `--glass-panel-bg` | Panel background (use `rgba` / `oklch` with alpha for the glass effect) |
+| `--glass-panel-border-color` | 1px border colour (typically a translucent white) |
+| `--glass-panel-shadow` | `box-shadow` value |
+| `--glass-panel-highlight` | Colour of the `135deg` specular gradient overlay (`::before`) |
+
+## Layer defaults
+
+**Light mode** (`:root` / `[data-color-scheme="light"]`):
+```css
+--glass-panel-bg:           rgba(255, 255, 255, 0.55);
+--glass-panel-border-color: rgba(255, 255, 255, 0.8);
+--glass-panel-shadow:       0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+--glass-panel-highlight:    rgba(255, 255, 255, 0.9);
+```
+
+**Dark mode** (`[data-color-scheme="dark"]`):
+```css
+--glass-panel-bg:           rgba(12, 12, 20, 0.45);
+--glass-panel-border-color: rgba(255, 255, 255, 0.07);
+--glass-panel-shadow:       0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
+--glass-panel-highlight:    rgba(255, 255, 255, 0.04);
+```
+
+## Overriding in a consuming app
+
+Add overrides to `app/assets/styles/setup/03.theming/default/_light.css` and `_dark.css`.
+
+For this site the background is dark/warm, so the dark-mode values are the primary brand values. Warm rose tints work well for the border and highlight:
+
+```css
+/* _dark.css — example warm-rose override */
+--glass-panel-bg:           oklch(12% 0.01 15 / 0.5);   /* warm near-black, semi-transparent */
+--glass-panel-border-color: oklch(60% 0.06 15 / 0.15);  /* muted rose border */
+--glass-panel-shadow:       0 8px 32px oklch(0% 0 0 / 0.6), 0 2px 8px oklch(0% 0 0 / 0.4);
+--glass-panel-highlight:    oklch(80% 0.04 15 / 0.06);  /* faint rose specular */
+```
+
+```css
+/* _light.css — example warm-rose override */
+--glass-panel-bg:           oklch(98% 0.005 15 / 0.6);
+--glass-panel-border-color: oklch(100% 0 0 / 0.75);
+--glass-panel-shadow:       0 8px 32px oklch(0% 0 0 / 0.06), 0 2px 8px oklch(0% 0 0 / 0.03);
+--glass-panel-highlight:    oklch(100% 0 0 / 0.85);
+```
+
+## Notes
+
+- The `backdrop-filter: blur(14px) saturate(180%)` is baked into the component — the blurred-background effect only looks right when the panel is layered over an image or textured background.
+- `overflow: hidden` is set on the root — ensure content that needs to escape (e.g. tooltips, dropdowns) is portalled outside.
+- The `::before` highlight overlay is `pointer-events: none` so it never blocks clicks.

package/.claude/skills/index.md

@@ -49,6 +49,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
     ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, slots (summary/icon/content), ARIA wiring
+    ├── glass-panel.md          — GlassPanel props, slots, CSS token API (--glass-panel-bg/border-color/shadow/highlight), theming override
     ├── navigation-horizontal.md — NavigationHorizontal props, NavItemData type, CSS token API, import path gotcha
     ├── input-copy-core.md      — InputCopyCore: readonly copy-to-clipboard input; props, emits, slots, CSS classes, usage
     └── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
@@ -60,19 +61,24 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 # <Title>
 
 ## Overview
+
 Brief description of what this skill does and why it exists.
 
 ## Prerequisites
+
 What needs to be in place before starting (optional section).
 
 ## Steps
 
 ### 1. <Step name>
+
 ...
 
 ### 2. <Step name>
+
 ...
 
 ## Notes
+
 Edge cases, gotchas, or links to related files (optional section).
 ```

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

@@ -23,6 +23,9 @@
           {{ 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"></div></li>
+      <li aria-hidden="true" role="none" class="nav-indicator-li"><div class="nav__active-indicator"></div></li>
     </ul>
 
     <InputButtonCore
@@ -79,6 +82,9 @@
               {{ 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"></div></li>
+          <li aria-hidden="true" role="none" class="nav-indicator-li"><div class="nav__active-indicator"></div></li>
         </ul>
       </div>
     </div>
@@ -108,17 +114,17 @@ const isLoaded = useState("site-nav-loaded", () => false);
 const isMenuOpen = ref(false);
 
 // Stored natural width of the list — used when the list is not in the DOM
-const navListNaturalWidth = ref(0);
+let navListNaturalWidth = 0;
 
 const checkOverflow = () => {
   if (!navRef.value) return;
 
   // Measure and store the list width whenever it's in the DOM
   if (navListRef.value) {
-    navListNaturalWidth.value = navListRef.value.scrollWidth;
+    navListNaturalWidth = navListRef.value.scrollWidth;
   }
 
-  isCollapsed.value = navListNaturalWidth.value > navRef.value.clientWidth;
+  isCollapsed.value = navListNaturalWidth > navRef.value.clientWidth;
 };
 
 const toggleMenu = () => {
@@ -137,36 +143,43 @@ const NAV_DECORATOR_DURATION = 200;
 let navSnapTimer: ReturnType<typeof setTimeout> | null = null;
 let panelSnapTimer: ReturnType<typeof setTimeout> | null = null;
 
-const currentActiveNavLink = ref<HTMLElement | null>(null);
-const currentHoveredNavLink = ref<HTMLElement | null>(null);
-const previousHoveredNavLink = ref<HTMLElement | null>(null);
+let currentActiveNavLink: HTMLElement | null = null;
+let currentHoveredNavLink: HTMLElement | null = null;
+let previousHoveredNavLink: HTMLElement | null = null;
 
-const getNavLinks = () =>
-  navListRef.value ? Array.from(navListRef.value.querySelectorAll<HTMLElement>("[data-nav-item]")) : [];
+// Cached after first init — invalidated when nav list is re-rendered (collapse toggle)
+let cachedNavLinks: HTMLElement[] = [];
+
+const getNavLinks = (): HTMLElement[] => {
+  if (cachedNavLinks.length) return cachedNavLinks;
+  if (!navListRef.value) return [];
+  cachedNavLinks = Array.from(navListRef.value.querySelectorAll<HTMLElement>("[data-nav-item]"));
+  return cachedNavLinks;
+};
 
 const setFinalNavActivePositions = (instant = false) => {
-  if (!navListRef.value || !currentActiveNavLink.value) return;
+  if (!navListRef.value || !currentActiveNavLink) return;
   const list = navListRef.value;
-  const el = currentActiveNavLink.value;
+  const el = currentActiveNavLink;
   list.style.setProperty("--_transition-duration", instant ? "0ms" : NAV_DECORATOR_DURATION + "ms");
   list.style.setProperty("--_x-active", el.offsetLeft + "px");
   list.style.setProperty("--_width-active", String(el.offsetWidth / list.offsetWidth));
 };
 
 const setFinalNavHoveredPositions = (instant = false) => {
-  if (!navListRef.value || !currentHoveredNavLink.value) return;
+  if (!navListRef.value || !currentHoveredNavLink) return;
   const list = navListRef.value;
-  const el = currentHoveredNavLink.value;
+  const el = currentHoveredNavLink;
   list.style.setProperty("--_transition-duration", instant ? "0ms" : NAV_DECORATOR_DURATION + "ms");
   list.style.setProperty("--_x-hovered", el.offsetLeft + "px");
   list.style.setProperty("--_width-hovered", String(el.offsetWidth / list.offsetWidth));
 };
 
 const moveNavHoveredIndicator = () => {
-  if (!navListRef.value || !currentHoveredNavLink.value || !previousHoveredNavLink.value) return;
+  if (!navListRef.value || !currentHoveredNavLink || !previousHoveredNavLink) return;
   const list = navListRef.value;
-  const curr = currentHoveredNavLink.value;
-  const prev = previousHoveredNavLink.value;
+  const curr = currentHoveredNavLink;
+  const prev = previousHoveredNavLink;
   list.style.setProperty("--_transition-duration", NAV_DECORATOR_DURATION + "ms");
   const isMovingRight = prev.compareDocumentPosition(curr) === 4;
   let transitionWidth: number;
@@ -187,23 +200,23 @@ const moveNavHoveredIndicator = () => {
 const handleNavLinkClick = (event: MouseEvent) => {
   const target = (event.target as HTMLElement).closest<HTMLElement>("[data-nav-item]");
   if (!target) return;
-  currentActiveNavLink.value = target;
-  currentHoveredNavLink.value = target;
-  previousHoveredNavLink.value = target;
+  currentActiveNavLink = target;
+  currentHoveredNavLink = target;
+  previousHoveredNavLink = target;
 };
 
 const handleNavHover = (event: MouseEvent) => {
   const target = (event.target as HTMLElement).closest<HTMLElement>("[data-nav-item]");
-  if (!target || target === currentHoveredNavLink.value) return;
-  previousHoveredNavLink.value = currentHoveredNavLink.value;
-  currentHoveredNavLink.value = target;
+  if (!target || target === currentHoveredNavLink) return;
+  previousHoveredNavLink = currentHoveredNavLink;
+  currentHoveredNavLink = target;
   moveNavHoveredIndicator();
 };
 
 const resetHoverNavToActive = () => {
-  if (!currentActiveNavLink.value || currentHoveredNavLink.value === currentActiveNavLink.value) return;
-  previousHoveredNavLink.value = currentHoveredNavLink.value;
-  currentHoveredNavLink.value = currentActiveNavLink.value;
+  if (!currentActiveNavLink || currentHoveredNavLink === currentActiveNavLink) return;
+  previousHoveredNavLink = currentHoveredNavLink;
+  currentHoveredNavLink = currentActiveNavLink;
   moveNavHoveredIndicator();
 };
 
@@ -212,71 +225,66 @@ const initNavDecorators = () => {
   const links = getNavLinks();
   if (!links.length) return;
 
-  // Cancel any in-flight snap timer before resetting positions
   if (navSnapTimer !== null) {
     clearTimeout(navSnapTimer);
     navSnapTimer = null;
   }
 
-  navListRef.value.querySelectorAll(".nav-indicator-li").forEach((el) => el.remove());
-
-  const activeLink = links.find((el) => el.classList.contains("router-link-active")) ?? links[0];
+  const activeLink =
+    links.find((el) => el.classList.contains("router-link-exact-active")) ??
+    links.find((el) => el.classList.contains("router-link-active")) ??
+    links[0];
   if (!activeLink) return;
 
-  currentActiveNavLink.value = activeLink;
-  currentHoveredNavLink.value = activeLink;
-  previousHoveredNavLink.value = activeLink;
+  currentActiveNavLink = activeLink;
+  currentHoveredNavLink = activeLink;
+  previousHoveredNavLink = activeLink;
 
   setFinalNavActivePositions(true);
   setFinalNavHoveredPositions(true);
-
-  // Wrap each indicator in a <li> so the <ul> contains only valid children
-  ["nav__active-indicator", "nav__active", "nav__hovered"].forEach((cls) => {
-    const li = document.createElement("li");
-    li.classList.add("nav-indicator-li");
-    li.setAttribute("aria-hidden", "true");
-    li.setAttribute("role", "none");
-    const div = document.createElement("div");
-    div.classList.add(cls);
-    li.appendChild(div);
-    navListRef.value!.appendChild(li);
-  });
 };
 
 // ─── Panel decorators (y-axis active / hover indicators) ─────────────────────
 
 const panelListRef = ref<HTMLUListElement | null>(null);
 
-const currentActivePanelLink = ref<HTMLElement | null>(null);
-const currentHoveredPanelLink = ref<HTMLElement | null>(null);
-const previousHoveredPanelLink = ref<HTMLElement | null>(null);
+let currentActivePanelLink: HTMLElement | null = null;
+let currentHoveredPanelLink: HTMLElement | null = null;
+let previousHoveredPanelLink: HTMLElement | null = null;
 
-const getPanelLinks = () =>
-  panelListRef.value ? Array.from(panelListRef.value.querySelectorAll<HTMLElement>("[data-panel-nav-item]")) : [];
+// Cached after first init — invalidated when panel list is re-rendered (menu open/close)
+let cachedPanelLinks: HTMLElement[] = [];
+
+const getPanelLinks = (): HTMLElement[] => {
+  if (cachedPanelLinks.length) return cachedPanelLinks;
+  if (!panelListRef.value) return [];
+  cachedPanelLinks = Array.from(panelListRef.value.querySelectorAll<HTMLElement>("[data-panel-nav-item]"));
+  return cachedPanelLinks;
+};
 
 const setFinalPanelActivePositions = (instant = false) => {
-  if (!panelListRef.value || !currentActivePanelLink.value) return;
+  if (!panelListRef.value || !currentActivePanelLink) return;
   const list = panelListRef.value;
-  const el = currentActivePanelLink.value;
+  const el = currentActivePanelLink;
   list.style.setProperty("--_panel-transition-duration", instant ? "0ms" : NAV_DECORATOR_DURATION + "ms");
   list.style.setProperty("--_panel-y-active", el.offsetTop + "px");
   list.style.setProperty("--_panel-height-active", String(el.offsetHeight / list.offsetHeight));
 };
 
 const setFinalPanelHoveredPositions = (instant = false) => {
-  if (!panelListRef.value || !currentHoveredPanelLink.value) return;
+  if (!panelListRef.value || !currentHoveredPanelLink) return;
   const list = panelListRef.value;
-  const el = currentHoveredPanelLink.value;
+  const el = currentHoveredPanelLink;
   list.style.setProperty("--_panel-transition-duration", instant ? "0ms" : NAV_DECORATOR_DURATION + "ms");
   list.style.setProperty("--_panel-y-hovered", el.offsetTop + "px");
   list.style.setProperty("--_panel-height-hovered", String(el.offsetHeight / list.offsetHeight));
 };
 
 const movePanelHoveredIndicator = () => {
-  if (!panelListRef.value || !currentHoveredPanelLink.value || !previousHoveredPanelLink.value) return;
+  if (!panelListRef.value || !currentHoveredPanelLink || !previousHoveredPanelLink) return;
   const list = panelListRef.value;
-  const curr = currentHoveredPanelLink.value;
-  const prev = previousHoveredPanelLink.value;
+  const curr = currentHoveredPanelLink;
+  const prev = previousHoveredPanelLink;
   list.style.setProperty("--_panel-transition-duration", NAV_DECORATOR_DURATION + "ms");
   const isMovingDown = prev.compareDocumentPosition(curr) === 4;
   let transitionHeight: number;
@@ -297,28 +305,29 @@ const movePanelHoveredIndicator = () => {
 const handlePanelLinkClick = (event: MouseEvent) => {
   const target = (event.target as HTMLElement).closest<HTMLElement>("[data-panel-nav-item]");
   if (!target) return;
-  currentActivePanelLink.value = target;
-  currentHoveredPanelLink.value = target;
-  previousHoveredPanelLink.value = target;
+  currentActivePanelLink = target;
+  currentHoveredPanelLink = target;
+  previousHoveredPanelLink = target;
 };
 
 const handlePanelHover = (event: MouseEvent) => {
   const target = (event.target as HTMLElement).closest<HTMLElement>("[data-panel-nav-item]");
-  if (!target || target === currentHoveredPanelLink.value) return;
-  previousHoveredPanelLink.value = currentHoveredPanelLink.value;
-  currentHoveredPanelLink.value = target;
+  if (!target || target === currentHoveredPanelLink) return;
+  previousHoveredPanelLink = currentHoveredPanelLink;
+  currentHoveredPanelLink = target;
   movePanelHoveredIndicator();
 };
 
 const resetHoverPanelToActive = () => {
-  if (!currentActivePanelLink.value || currentHoveredPanelLink.value === currentActivePanelLink.value) return;
-  previousHoveredPanelLink.value = currentHoveredPanelLink.value;
-  currentHoveredPanelLink.value = currentActivePanelLink.value;
+  if (!currentActivePanelLink || currentHoveredPanelLink === currentActivePanelLink) return;
+  previousHoveredPanelLink = currentHoveredPanelLink;
+  currentHoveredPanelLink = currentActivePanelLink;
   movePanelHoveredIndicator();
 };
 
 const initPanelDecorators = () => {
   if (!panelListRef.value) return;
+  cachedPanelLinks = []; // panel DOM is re-rendered each open — invalidate cache
   const links = getPanelLinks();
   if (!links.length) return;
 
@@ -327,27 +336,18 @@ const initPanelDecorators = () => {
     panelSnapTimer = null;
   }
 
-  panelListRef.value.querySelectorAll(".nav-indicator-li").forEach((el) => el.remove());
-
-  const activeLink = links.find((el) => el.classList.contains("router-link-active")) ?? links[0];
+  const activeLink =
+    links.find((el) => el.classList.contains("router-link-exact-active")) ??
+    links.find((el) => el.classList.contains("router-link-active")) ??
+    links[0];
   if (!activeLink) return;
 
-  currentActivePanelLink.value = activeLink;
-  currentHoveredPanelLink.value = activeLink;
-  previousHoveredPanelLink.value = activeLink;
+  currentActivePanelLink = activeLink;
+  currentHoveredPanelLink = activeLink;
+  previousHoveredPanelLink = activeLink;
 
   setFinalPanelActivePositions(true);
   setFinalPanelHoveredPositions(true);
-  ["nav__active-indicator", "nav__active", "nav__hovered"].forEach((cls) => {
-    const li = document.createElement("li");
-    li.classList.add("nav-indicator-li");
-    li.setAttribute("aria-hidden", "true");
-    li.setAttribute("role", "none");
-    const div = document.createElement("div");
-    div.classList.add(cls);
-    li.appendChild(div);
-    panelListRef.value!.appendChild(li);
-  });
 };
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -389,6 +389,7 @@ onMounted(async () => {
 
 watch(isCollapsed, async (collapsed) => {
   if (!collapsed) {
+    cachedNavLinks = []; // nav <ul> was re-rendered — invalidate cache
     await nextTick();
     initNavDecorators();
   }
@@ -437,23 +438,23 @@ watch(
     /* Decorators — horizontal nav */
     --_decorator-hovered-bg: transparent;
     --_decorator-active-bg: transparent;
-    --_decorator-indicator-color: var(--site-nav-decorator-indicator-color, var(--rose-05, currentColor));
+    --_decorator-indicator-color: var(--site-nav-decorator-indicator-color, var(--slate-01, currentColor));
 
     /* Decorators — panel */
     --_panel-decorator-hovered-bg: var(--site-nav-panel-decorator-hovered-bg, transparent);
     --_panel-decorator-active-bg: var(--site-nav-panel-decorator-active-bg, transparent);
-    --_panel-decorator-indicator-color: var(--site-nav-panel-decorator-indicator-color, var(--rose-05, currentColor));
+    --_panel-decorator-indicator-color: var(--site-nav-panel-decorator-indicator-color, var(--slate-01, currentColor));
     --_panel-indicator-left: var(--site-nav-panel-indicator-left, 0);
     --_panel-indicator-right: var(--site-nav-panel-indicator-right, auto);
 
     /* Horizontal nav */
-    --_link-color: var(--site-nav-link-color, var(--warm-01, currentColor));
-    --_link-hover-color: var(--site-nav-link-hover-color, var(--rose-04, var(--_link-color)));
-    --_link-active-color: var(--site-nav-link-active-color, var(--rose-05, var(--_link-color)));
+    --_link-color: var(--site-nav-link-color, var(--slate-01, currentColor));
+    --_link-hover-color: var(--site-nav-link-hover-color, var(--slate-04, var(--_link-color)));
+    --_link-active-color: var(--site-nav-link-active-color, var(--slate-01, var(--_link-color)));
     --_link-size: var(--site-nav-link-size, 1.6rem);
     --_link-tracking: var(--site-nav-link-tracking, 0.06em);
     --_link-weight: var(--site-nav-link-weight, 400);
-    --_link-accent: var(--site-nav-link-accent, var(--rose-05, currentColor));
+    --_link-accent: var(--site-nav-link-accent, var(--slate-01, currentColor));
     --_nav-gap: var(--site-nav-gap, 2.2rem);
     --_nav-transition: var(--site-nav-transition, 250ms ease);
 
@@ -461,12 +462,15 @@ watch(
     --_panel-bg: var(--site-nav-panel-bg, var(--page-bg, #1a1614));
     --_panel-border-color: var(
       --site-nav-panel-border-color,
-      color-mix(in oklch, var(--rose-05, #c0847a) 35%, transparent)
+      color-mix(in oklch, var(--slate-01, #c0847a) 35%, transparent)
+    );
+    --_panel-item-border: var(
+      --site-nav-panel-item-border,
+      color-mix(in oklch, var(--slate-01, white) 8%, transparent)
     );
-    --_panel-item-border: var(--site-nav-panel-item-border, color-mix(in oklch, var(--warm-01, white) 8%, transparent));
-    --_panel-link-color: var(--site-nav-panel-link-color, var(--warm-01, currentColor));
-    --_panel-link-hover-color: var(--site-nav-panel-link-hover-color, var(--rose-04, var(--_panel-link-color)));
-    --_panel-link-active-color: var(--site-nav-panel-link-active-color, var(--rose-05, var(--_panel-link-color)));
+    --_panel-link-color: var(--site-nav-panel-link-color, var(--slate-01, currentColor));
+    --_panel-link-hover-color: var(--site-nav-panel-link-hover-color, var(--slate-04, var(--_panel-link-color)));
+    --_panel-link-active-color: var(--site-nav-panel-link-active-color, var(--slate-01, var(--_panel-link-color)));
     --_panel-padding-block: var(--site-nav-panel-padding-block, 1.4rem);
     --_panel-padding-inline: var(--site-nav-panel-padding-inline, 1.5rem);
     --_panel-slide-duration: var(--site-nav-panel-slide-duration, 350ms);
@@ -476,7 +480,7 @@ watch(
     --_burger-bar-width: var(--site-nav-burger-width, 22px);
     --_burger-bar-height: var(--site-nav-burger-height, 1.5px);
     --_burger-bar-gap: var(--site-nav-burger-gap, 5px);
-    --_burger-color: var(--site-nav-burger-color, var(--warm-01, currentColor));
+    --_burger-color: var(--site-nav-burger-color, var(--slate-01, currentColor));
     --_burger-transition: var(--site-nav-burger-transition, 300ms ease);
 
     /* ─────────────────────────────────────────────────────────────────── */
@@ -576,7 +580,7 @@ watch(
           outline: none;
         }
 
-        &.router-link-active {
+        &.router-link-exact-active {
           color: var(--_link-active-color);
         }
       }
@@ -769,7 +773,7 @@ watch(
             outline: none;
           }
 
-          &.router-link-active {
+          &.router-link-exact-active {
             color: var(--_panel-link-active-color);
           }
         }

package/app/layouts/site-navigation-demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="site-nav-demo-layout">
     <header class="site-nav-demo-header">
-      <NuxtLink to="/ui/navigation/site-navigation" class="site-nav-demo-logo">SiteNav Demo</NuxtLink>
+      <NuxtLink to="/" class="site-nav-demo-logo">SiteNav Demo</NuxtLink>
       <SiteNavigation :nav-item-data="navItemData" nav-align="right" />
     </header>
     <main class="site-nav-demo-main">
@@ -66,4 +66,121 @@ const navItemData: NavItemData = {
     width: 100%;
   }
 }
+
+/* Shared demo page styles */
+.snav-demo-page {
+  h1,
+  h2,
+  h3 {
+    margin-block-end: 1.6rem;
+  }
+  h2 {
+    margin-block-start: 4rem;
+  }
+  > p {
+    margin-block-end: 2.4rem;
+    line-height: 1.6;
+  }
+  ul {
+    padding-inline-start: 2rem;
+    margin-block-end: 2.4rem;
+    line-height: 2;
+  }
+}
+
+.snav-demo-hero {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 2 / 1;
+  object-fit: cover;
+  border-radius: 0.8rem;
+  display: block;
+  margin-block-end: 2.4rem;
+}
+
+.snav-demo-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.6rem;
+
+  &--wide {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 600px) {
+    grid-template-columns: repeat(2, 1fr);
+    &--wide {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+.snav-demo-img {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+  border-radius: 0.4rem;
+  display: block;
+}
+
+.snav-demo-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3.2rem;
+  align-items: start;
+  margin-block-end: 4rem;
+
+  &__text {
+    h2,
+    h3 {
+      margin-block-start: 2.4rem;
+    }
+    p {
+      line-height: 1.6;
+      margin-block-end: 1.6rem;
+    }
+  }
+
+  &__img {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 3 / 4;
+    object-fit: cover;
+    border-radius: 0.4rem;
+    display: block;
+  }
+
+  @media (max-width: 650px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.snav-demo-services {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2.4rem;
+
+  @media (max-width: 650px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.snav-demo-service-card {
+  border-radius: 0.8rem;
+  overflow: hidden;
+  background: oklch(100% 0 0 / 5%);
+
+  &__body {
+    padding: 1.6rem;
+    h3 {
+      margin-block-end: 0.8rem;
+    }
+    p {
+      font-size: 1.4rem;
+      line-height: 1.6;
+      opacity: 0.8;
+    }
+  }
+}
 </style>

package/app/pages/ui/navigation/site-navigation/about.vue

@@ -1,7 +1,32 @@
 <template>
-  <div>
+  <div class="snav-demo-page">
     <h1>About</h1>
-    <p>This is the About page. The active indicator in the navigation above should be sitting under "About".</p>
+    <p>This is the About page. The active indicator in the navigation above should be sitting under "About". Lots of images below to simulate a content-heavy page.</p>
+
+    <div class="snav-demo-split">
+      <div class="snav-demo-split__text">
+        <h2>Our Story</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <h2>Our Team</h2>
+        <p>We are a team of dedicated professionals committed to delivering the best experience. Our combined expertise spans design, development, and user experience research.</p>
+        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
+      </div>
+      <NuxtImg src="/images/rotating-carousel/image-1.webp" alt="About hero" width="600" height="800" loading="eager" class="snav-demo-split__img" />
+    </div>
+
+    <h2>Gallery</h2>
+    <div class="snav-demo-grid">
+      <NuxtImg v-for="n in 9" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`About gallery ${n}`" width="600" height="400" loading="lazy" class="snav-demo-img" />
+    </div>
+
+    <h2>Behind the scenes</h2>
+    <div class="snav-demo-grid snav-demo-grid--wide">
+      <NuxtImg src="/images/banners/banner-ginger.jpeg" alt="Behind the scenes 1" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/banners/banner-mid-brown.webp" alt="Behind the scenes 2" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/page/hero/hero-dark.jpg" alt="Behind the scenes 3" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/page/hero/hero-red.jpg" alt="Behind the scenes 4" width="800" height="500" loading="lazy" class="snav-demo-img" />
+    </div>
   </div>
 </template>
 

package/app/pages/ui/navigation/site-navigation/contact.vue

@@ -1,7 +1,35 @@
 <template>
-  <div>
+  <div class="snav-demo-page">
     <h1>Contact</h1>
     <p>This is the Contact page. The active indicator in the navigation above should be sitting under "Contact".</p>
+
+    <div class="snav-demo-split">
+      <div class="snav-demo-split__text">
+        <h2>Get in Touch</h2>
+        <p>We'd love to hear from you. Whether you have a question about our services, want to book an appointment, or just want to say hello — our door is always open.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        <h3>Opening Hours</h3>
+        <ul>
+          <li>Monday – Friday: 9am – 7pm</li>
+          <li>Saturday: 9am – 5pm</li>
+          <li>Sunday: Closed</li>
+        </ul>
+        <h3>Address</h3>
+        <p>123 Example Street<br />London, UK<br />EC1A 1BB</p>
+      </div>
+      <NuxtImg src="/images/rotating-carousel/55-woman-garden-backdrop.webp" alt="Contact hero" width="600" height="800" loading="eager" class="snav-demo-split__img" />
+    </div>
+
+    <h2>Find Us</h2>
+    <div class="snav-demo-grid snav-demo-grid--wide">
+      <NuxtImg src="/images/rotating-carousel/image-5.webp" alt="Location 1" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/rotating-carousel/image-6.webp" alt="Location 2" width="800" height="500" loading="lazy" class="snav-demo-img" />
+    </div>
+
+    <h2>Instagram</h2>
+    <div class="snav-demo-grid">
+      <NuxtImg v-for="n in [1, 2, 3, 7, 8, 9]" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`Instagram post ${n}`" width="600" height="600" loading="lazy" class="snav-demo-img snav-demo-img--square" />
+    </div>
   </div>
 </template>
 

package/app/pages/ui/navigation/site-navigation/index.vue

@@ -1,7 +1,34 @@
 <template>
-  <div>
+  <div class="snav-demo-page">
     <h1>Home</h1>
-    <p>Welcome to the SiteNavigation component demo. Resize the window to see the burger menu collapse, and navigate between pages to see the active indicator update.</p>
+    <p>Welcome to the SiteNavigation component demo. Resize the window to see the burger menu collapse, and navigate between pages to see the active indicator update. This page is intentionally heavy with images to stress-test nav behaviour during loading.</p>
+
+    <NuxtImg
+      src="/images/banners/banner-ginger.jpeg"
+      alt="Hero banner"
+      width="1200"
+      height="600"
+      loading="eager"
+      class="snav-demo-hero"
+    />
+
+    <h2>Featured Gallery</h2>
+    <div class="snav-demo-grid">
+      <NuxtImg v-for="n in 9" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`Gallery image ${n}`" width="600" height="400" loading="lazy" class="snav-demo-img" />
+    </div>
+
+    <h2>More Images</h2>
+    <div class="snav-demo-grid snav-demo-grid--wide">
+      <NuxtImg src="/images/banners/banner-light-brunette.webp" alt="Banner light brunette" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/banners/banner-mid-brown.webp" alt="Banner mid brown" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/rotating-carousel/35-light-brown-highlights.webp" alt="Light brown highlights" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/rotating-carousel/55-woman-garden-backdrop.webp" alt="Woman garden backdrop" width="800" height="500" loading="lazy" class="snav-demo-img" />
+    </div>
+
+    <h2>Hero Images</h2>
+    <div class="snav-demo-grid">
+      <NuxtImg v-for="hero in ['hero-blonde', 'hero-dark', 'hero-hair', 'hero-red']" :key="hero" :src="`/images/page/hero/${hero}.jpg`" :alt="hero" width="600" height="400" loading="lazy" class="snav-demo-img" />
+    </div>
   </div>
 </template>
 

package/app/pages/ui/navigation/site-navigation/portfolio.vue

@@ -1,7 +1,28 @@
 <template>
-  <div>
+  <div class="snav-demo-page">
     <h1>Portfolio</h1>
-    <p>This is the Portfolio page. The active indicator in the navigation above should be sitting under "Portfolio".</p>
+    <p>This is the Portfolio page. The active indicator in the navigation above should be sitting under "Portfolio". Maximum image load to stress-test navigation behaviour.</p>
+
+    <h2>Spotlight Work</h2>
+    <div class="snav-demo-grid snav-demo-grid--dense">
+      <NuxtImg v-for="n in 9" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`Portfolio piece ${n}`" width="600" height="600" loading="lazy" class="snav-demo-img snav-demo-img--square" />
+    </div>
+
+    <h2>Featured Looks</h2>
+    <div class="snav-demo-grid snav-demo-grid--wide">
+      <NuxtImg src="/images/banners/banner-ginger.jpeg" alt="Ginger look" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/banners/banner-light-brunette.webp" alt="Light brunette look" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/banners/banner-mid-brown.webp" alt="Mid brown look" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/rotating-carousel/35-light-brown-highlights.webp" alt="Light brown highlights" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/rotating-carousel/55-woman-garden-backdrop.webp" alt="Garden backdrop" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/rotating-carousel/indian-pink-stripe.webp" alt="Pink stripe" width="800" height="500" loading="lazy" class="snav-demo-img" />
+      <NuxtImg src="/images/rotating-carousel/spanish-green-stripe.webp" alt="Green stripe" width="800" height="500" loading="lazy" class="snav-demo-img" />
+    </div>
+
+    <h2>Hero Series</h2>
+    <div class="snav-demo-grid">
+      <NuxtImg v-for="hero in ['hero-blonde', 'hero-dark', 'hero-hair', 'hero-red']" :key="hero" :src="`/images/page/hero/${hero}.jpg`" :alt="hero" width="600" height="400" loading="lazy" class="snav-demo-img" />
+    </div>
   </div>
 </template>
 
@@ -9,3 +30,14 @@
 definePageMeta({ layout: "site-navigation-demo" });
 useHead({ title: "SiteNavigation Demo — Portfolio" });
 </script>
+
+<style lang="css">
+.snav-demo-img--square {
+  aspect-ratio: 1 / 1;
+}
+
+.snav-demo-grid--dense {
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.8rem;
+}
+</style>

package/app/pages/ui/navigation/site-navigation/services.vue

@@ -1,11 +1,42 @@
 <template>
-  <div>
+  <div class="snav-demo-page">
     <h1>Services</h1>
     <p>This is the Services page. The active indicator in the navigation above should be sitting under "Services".</p>
+
+    <NuxtImg
+      src="/images/banners/banner-light-brunette.webp"
+      alt="Services banner"
+      width="1200"
+      height="500"
+      loading="eager"
+      class="snav-demo-hero"
+    />
+
+    <h2>What We Offer</h2>
+    <div class="snav-demo-services">
+      <div v-for="(service, i) in services" :key="i" class="snav-demo-service-card">
+        <NuxtImg :src="service.img" :alt="service.title" width="600" height="400" loading="lazy" class="snav-demo-img" />
+        <div class="snav-demo-service-card__body">
+          <h3>{{ service.title }}</h3>
+          <p>{{ service.description }}</p>
+        </div>
+      </div>
+    </div>
+
+    <h2>Our Work</h2>
+    <div class="snav-demo-grid">
+      <NuxtImg v-for="n in [4, 5, 6, 7, 8, 9]" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`Work sample ${n}`" width="600" height="400" loading="lazy" class="snav-demo-img" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 definePageMeta({ layout: "site-navigation-demo" });
 useHead({ title: "SiteNavigation Demo — Services" });
+
+const services = [
+  { title: "Colour", img: "/images/rotating-carousel/image-1.webp", description: "From subtle highlights to bold transformations. Our colour specialists use only the finest products for vibrant, lasting results." },
+  { title: "Cut & Style", img: "/images/rotating-carousel/image-2.webp", description: "Precision cuts tailored to your face shape and lifestyle. Walk out feeling confident every single time." },
+  { title: "Treatment", img: "/images/rotating-carousel/image-3.webp", description: "Restore shine and health with our premium treatment range. Ideal for damaged, dry, or colour-treated hair." },
+];
 </script>

package/package.json

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