srcdev-nuxt-components 9.1.3 → 9.1.5

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/components/02.molecules/navigation/site-navigation/tests/__snapshots__/SiteNavigation.spec.ts.snap

@@ -12,14 +12,14 @@ exports[`SiteNavigation > renders correct HTML structure 1`] = `
     <li class=""><a href="/contact" class="site-nav-link" data-nav-item="">
         <!--v-if--> Contact
       </a></li>
-    <li class="nav-indicator-li" aria-hidden="true" role="none">
-      <div class="nav__active-indicator"></div>
+    <li aria-hidden="true" role="none" class="nav-indicator-li">
+      <div class="nav__hovered"></div>
     </li>
-    <li class="nav-indicator-li" aria-hidden="true" role="none">
+    <li aria-hidden="true" role="none" class="nav-indicator-li">
       <div class="nav__active"></div>
     </li>
-    <li class="nav-indicator-li" aria-hidden="true" role="none">
-      <div class="nav__hovered"></div>
+    <li aria-hidden="true" role="none" class="nav-indicator-li">
+      <div class="nav__active-indicator"></div>
     </li>
   </ul>
   <!--v-if-->

package/app/components/03.organisms/services/services-section/ServicesSection.vue

@@ -1,10 +1,5 @@
 <template>
-  <component
-    :is="tag"
-    class="services-section"
-    :class="[elementClasses]"
-    :aria-labelledby="ariaLabelledby"
-  >
+  <component :is="tag" class="services-section" :class="[elementClasses]" :aria-labelledby="ariaLabelledby">
     <div class="services-section__grid" :class="{ 'services-section__grid--reverse': reverse }">
       <div class="image-wrapper">
         <NuxtImg :src="serviceData.image" :alt="serviceData.title" :loading="imageLoading" class="image" />
@@ -67,8 +62,7 @@
           :show-connectors="true"
           :item-count="serviceData.process.length"
         >
-          <template v-for="(item, index) in serviceData.process" :key="index" #[`item-${index}`]>
-            <p class="page-body-normal">{{ item }}</p>
+          <template v-for="(item, i) in serviceData.process" :key="i" #[`item-${i}`]>
             <p class="page-body-normal">{{ item }}</p>
           </template>
         </StepperList>
@@ -83,11 +77,10 @@
         />
 
         <StepperList v-if="!isSummary" :connected="false" :item-count="serviceData.idealFor.length">
-          <template v-for="(_, index) in serviceData.idealFor" :key="index" #[`indicator-${index}`]>
+          <template v-for="(_, i) in serviceData.idealFor" :key="i" #[`indicator-${i}`]>
             <Icon name="mdi:checkbox-marked-circle-outline" class="indicator-icon" />
           </template>
-          <template v-for="(item, index) in serviceData.idealFor" :key="index" #[`item-${index}`]>
-            <p class="page-body-normal">{{ item }}</p>
+          <template v-for="(item, i) in serviceData.idealFor" :key="i" #[`item-${i}`]>
             <p class="page-body-normal">{{ item }}</p>
           </template>
         </StepperList>

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.3",
+  "version": "9.1.5",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",