srcdev-nuxt-components 9.5.7 → 9.6.0

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

@@ -1,751 +0,0 @@
-<template>
-  <nav
-    ref="navRef"
-    class="site-navigation"
-    :class="[
-      elementClasses,
-      `site-navigation--${navAlign}`,
-      { 'is-collapsed': isCollapsed, 'is-loaded': isLoaded, 'menu-open': isMenuOpen, 'is-animated': isAnimated },
-    ]"
-    :aria-label="ariaLabel"
-  >
-    <ul
-      v-if="!isCollapsed || !isLoaded"
-      ref="navListRef"
-      class="site-nav-list"
-      @click="handleNavLinkClick"
-      @mouseleave="resetHoverNavToActive"
-      @mouseover="handleNavHover"
-    >
-      <li
-        v-for="item in navItemData.main"
-        :key="item.href"
-        :class="[item.cssName, { 'is-active': isActiveItem(item.href) }]"
-      >
-        <NuxtLink :href="item.href" :external="item.isExternal || undefined" class="site-nav-link" data-nav-item>
-          <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
-          {{ item.text }}
-        </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>
-
-    <InputButton
-      v-if="isCollapsed && isLoaded"
-      class="site-nav-burger"
-      :class="{ 'is-open': isMenuOpen }"
-      variant="tertiary"
-      :button-text="isMenuOpen ? closeMenuLabel : openMenuLabel"
-      :aria-expanded="String(isMenuOpen)"
-      :aria-controls="panelId"
-      @click="toggleMenu"
-    >
-      <template #iconOnly>
-        <span class="burger-bar" aria-hidden="true"></span>
-        <span class="burger-bar" aria-hidden="true"></span>
-        <span class="burger-bar" aria-hidden="true"></span>
-      </template>
-    </InputButton>
-
-    <Teleport to="body">
-      <div
-        v-if="isCollapsed && isLoaded"
-        class="site-nav-backdrop"
-        :class="{ 'is-open': isMenuOpen }"
-        aria-hidden="true"
-        @click="closeMenu"
-      ></div>
-    </Teleport>
-
-    <div
-      v-if="isCollapsed && isLoaded"
-      :id="panelId"
-      class="site-nav-panel"
-      :class="{ 'is-open': isMenuOpen }"
-      :inert="!isMenuOpen ? true : undefined"
-    >
-      <div class="site-nav-panel-inner">
-        <ul
-          ref="panelListRef"
-          class="site-nav-panel-list"
-          @click="handlePanelLinkClick"
-          @mouseover="handlePanelHover"
-          @mouseleave="resetHoverPanelToActive"
-        >
-          <li
-            v-for="item in navItemData.main"
-            :key="item.href"
-            :class="[item.cssName, { 'is-active': isActiveItem(item.href) }]"
-          >
-            <NuxtLink
-              :href="item.href"
-              :external="item.isExternal || undefined"
-              class="site-nav-panel-link"
-              data-panel-nav-item
-              @click="closeMenu"
-            >
-              <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
-              {{ item.text }}
-            </NuxtLink>
-          </li>
-          <li aria-hidden="true" role="none" class="nav-indicator-li"><div class="nav__hovered"></div></li>
-          <li aria-hidden="true" role="none" class="nav-indicator-li"><div class="nav__active"></div></li>
-          <li aria-hidden="true" role="none" class="nav-indicator-li"><div class="nav__active-indicator"></div></li>
-        </ul>
-      </div>
-    </div>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import type { NavItemData } from "~/types/components";
-
-interface Props {
-  navItemData: NavItemData;
-  navAlign?: "left" | "center" | "right";
-  styleClassPassthrough?: string | string[];
-  /** aria-label on the nav landmark — override for localisation. */
-  ariaLabel?: string;
-  /** Burger button label while the menu is closed — override for localisation. */
-  openMenuLabel?: string;
-  /** Burger button label while the menu is open — override for localisation. */
-  closeMenuLabel?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  navAlign: "left",
-  styleClassPassthrough: () => [],
-  ariaLabel: "Site navigation",
-  openMenuLabel: "Open navigation menu",
-  closeMenuLabel: "Close navigation menu",
-});
-
-const panelId = `site-nav-panel-${useId()}`;
-
-// ─── Animation gate — prevents indicator from transitioning on first paint ───
-
-const isAnimated = ref(false);
-// Stays false until ResizeObserver confirms the nav has been laid out (stronger
-// guarantee than nextTick / RAF which don't ensure layout is complete).
-let hasFirstLayout = false;
-
-// ─── Nav decorators (active / hover indicators) ─────────────────────────────
-
-const NAV_DECORATOR_DURATION = 200;
-
-// Single pending snap timer — cancel the previous one when a new move starts
-let navSnapTimer: ReturnType<typeof setTimeout> | null = null;
-let panelSnapTimer: ReturnType<typeof setTimeout> | null = null;
-
-let currentActiveNavLink: HTMLElement | null = null;
-let currentHoveredNavLink: HTMLElement | null = null;
-let previousHoveredNavLink: HTMLElement | null = null;
-
-// 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) return;
-  const list = navListRef.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) return;
-  const list = navListRef.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 || !previousHoveredNavLink) return;
-  const list = navListRef.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;
-  if (isMovingRight) {
-    transitionWidth = curr.offsetLeft + curr.offsetWidth - prev.offsetLeft;
-  } else {
-    transitionWidth = prev.offsetLeft + prev.offsetWidth - curr.offsetLeft;
-    list.style.setProperty("--_x-hovered", curr.offsetLeft + "px");
-  }
-  list.style.setProperty("--_width-hovered", String(transitionWidth / list.offsetWidth));
-  if (navSnapTimer !== null) clearTimeout(navSnapTimer);
-  navSnapTimer = setTimeout(() => {
-    navSnapTimer = null;
-    setFinalNavHoveredPositions();
-  }, NAV_DECORATOR_DURATION + 20);
-};
-
-const handleNavLinkClick = (event: MouseEvent) => {
-  const target = (event.target as HTMLElement).closest<HTMLElement>("[data-nav-item]");
-  if (!target) return;
-  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) return;
-  previousHoveredNavLink = currentHoveredNavLink;
-  currentHoveredNavLink = target;
-  moveNavHoveredIndicator();
-};
-
-const resetHoverNavToActive = () => {
-  if (!currentActiveNavLink || currentHoveredNavLink === currentActiveNavLink) return;
-  previousHoveredNavLink = currentHoveredNavLink;
-  currentHoveredNavLink = currentActiveNavLink;
-  moveNavHoveredIndicator();
-};
-
-const initNavDecorators = () => {
-  cachedNavLinks = []; // invalidate — list may have been re-rendered (collapse toggle)
-  if (!navListRef.value) return;
-  const links = getNavLinks();
-  if (!links.length) return;
-
-  if (navSnapTimer !== null) {
-    clearTimeout(navSnapTimer);
-    navSnapTimer = null;
-  }
-
-  const activeLink = links.find((el) => el.getAttribute("href") === activeHref.value) ?? links[0];
-  if (!activeLink) return;
-
-  currentActiveNavLink = activeLink;
-  currentHoveredNavLink = activeLink;
-  previousHoveredNavLink = activeLink;
-
-  setFinalNavActivePositions(true);
-  setFinalNavHoveredPositions(true);
-};
-
-// ─── Panel decorators (y-axis active / hover indicators) ─────────────────────
-
-const panelListRef = ref<HTMLUListElement | null>(null);
-
-let currentActivePanelLink: HTMLElement | null = null;
-let currentHoveredPanelLink: HTMLElement | null = null;
-let previousHoveredPanelLink: HTMLElement | null = null;
-
-// 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) return;
-  const list = panelListRef.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) return;
-  const list = panelListRef.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 || !previousHoveredPanelLink) return;
-  const list = panelListRef.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;
-  if (isMovingDown) {
-    transitionHeight = curr.offsetTop + curr.offsetHeight - prev.offsetTop;
-  } else {
-    transitionHeight = prev.offsetTop + prev.offsetHeight - curr.offsetTop;
-    list.style.setProperty("--_panel-y-hovered", curr.offsetTop + "px");
-  }
-  list.style.setProperty("--_panel-height-hovered", String(transitionHeight / list.offsetHeight));
-  if (panelSnapTimer !== null) clearTimeout(panelSnapTimer);
-  panelSnapTimer = setTimeout(() => {
-    panelSnapTimer = null;
-    setFinalPanelHoveredPositions();
-  }, NAV_DECORATOR_DURATION + 20);
-};
-
-const handlePanelLinkClick = (event: MouseEvent) => {
-  const target = (event.target as HTMLElement).closest<HTMLElement>("[data-panel-nav-item]");
-  if (!target) return;
-  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) return;
-  previousHoveredPanelLink = currentHoveredPanelLink;
-  currentHoveredPanelLink = target;
-  movePanelHoveredIndicator();
-};
-
-const resetHoverPanelToActive = () => {
-  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;
-
-  if (panelSnapTimer !== null) {
-    clearTimeout(panelSnapTimer);
-    panelSnapTimer = null;
-  }
-
-  const activeLink = links.find((el) => el.getAttribute("href") === activeHref.value) ?? links[0];
-  if (!activeLink) return;
-
-  currentActivePanelLink = activeLink;
-  currentHoveredPanelLink = activeLink;
-  previousHoveredPanelLink = activeLink;
-
-  setFinalPanelActivePositions(true);
-  setFinalPanelHoveredPositions(true);
-};
-
-// ─────────────────────────────────────────────────────────────────────────────
-
-const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, activeHref, isActiveItem, toggleMenu, closeMenu } =
-  useNavCollapse("site-nav-loaded", {
-    onResize: async () => {
-      await nextTick(); // wait for Vue to re-render after any isCollapsed change
-      initNavDecorators();
-      if (!hasFirstLayout) {
-        hasFirstLayout = true;
-        // RAF here (not nextTick) ensures the browser paints the snapped position
-        // before transitions are enabled — avoids animating from x=0 on first layout.
-        requestAnimationFrame(() => {
-          isAnimated.value = true;
-        });
-      }
-      if (isMenuOpen.value) {
-        setFinalPanelActivePositions(true);
-        setFinalPanelHoveredPositions(true);
-      }
-    },
-    onRouteChange: () => {
-      isAnimated.value = false;
-      // Double RAF: RAF1 sets the new position and lets the browser paint it
-      // without transitions. RAF2 re-enables transitions only after that frame
-      // has committed — so there is no position delta left to animate.
-      requestAnimationFrame(() => {
-        initNavDecorators();
-        requestAnimationFrame(() => {
-          isAnimated.value = true;
-        });
-      });
-    },
-    onMounted: () => {
-      initNavDecorators();
-      // isAnimated is set in onResize — ResizeObserver guarantees layout is
-      // complete before we enable transitions, unlike nextTick / RAF.
-    },
-  });
-
-watch(isMenuOpen, async (open) => {
-  if (open) {
-    await nextTick();
-    initPanelDecorators();
-  }
-});
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => resetElementClasses(props.styleClassPassthrough)
-);
-</script>
-
-<style lang="css">
-@layer components {
-  .site-nav-backdrop {
-    position: fixed;
-    inset: 0;
-    z-index: var(--site-nav-backdrop-z-index, 10);
-    background: var(--site-nav-backdrop-bg, oklch(0% 0 0 / 55%));
-    backdrop-filter: blur(var(--site-nav-backdrop-blur, 3px));
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--site-nav-backdrop-duration, 350ms) ease;
-
-    &.is-open {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-
-  .site-navigation {
-    /* ─── Public token API ────────────────────────────────────────────── */
-
-    /* Horizontal nav */
-    --_link-color: var(--site-nav-link-color, var(--slate-01, currentColor));
-    --_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);
-    --_nav-transition: var(--site-nav-transition, 250ms ease);
-
-    /* Panel */
-    --_panel-border-color: var(
-      --site-nav-panel-border-color,
-      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-link-color: var(--site-nav-panel-link-color, var(--slate-01, currentColor));
-    --_panel-slide-duration: var(--site-nav-panel-slide-duration, 350ms);
-    --_panel-slide-easing: var(--site-nav-panel-slide-easing, cubic-bezier(0.4, 0, 0.2, 1));
-
-    /* Burger */
-    --_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(--slate-01, currentColor));
-    --_burger-transition: var(--site-nav-burger-transition, 300ms ease);
-
-    /* ─────────────────────────────────────────────────────────────────── */
-
-    display: flex;
-    align-items: center;
-    min-width: 0;
-
-    /* Hide everything until first measurement to prevent wrong-state flash */
-    &:not(.is-loaded) {
-      opacity: 0;
-    }
-
-    /* ─── Horizontal list ───────────────────────────────────────────── */
-
-    .site-nav-list {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      display: flex;
-      gap: var(--site-nav-gap, 2.2rem);
-      align-items: center;
-      position: relative;
-
-      .nav-indicator-li {
-        position: absolute;
-        inset: 0;
-        pointer-events: none;
-        list-style: none;
-      }
-
-      .nav__hovered,
-      .nav__active,
-      .nav__active-indicator {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        scale: var(--_width-hovered, 0.001) 1;
-        translate: var(--_x-hovered, 0) 0;
-        transform-origin: left;
-        pointer-events: none;
-      }
-
-      .site-navigation.is-animated & .nav__hovered,
-      .site-navigation.is-animated & .nav__active,
-      .site-navigation.is-animated & .nav__active-indicator {
-        transition:
-          scale var(--_transition-duration, 200ms),
-          translate var(--_transition-duration, 200ms);
-      }
-
-      .nav__active {
-        scale: var(--_width-active, 0.001) 1;
-        translate: var(--_x-active, 0) 0;
-      }
-
-      .nav__active-indicator {
-        scale: var(--_width-hovered, 0.001) 1;
-        translate: var(--_x-hovered, 0) 0;
-      }
-
-      .nav__hovered {
-        background: var(--site-nav-decorator-hovered-bg, transparent);
-        border-radius: 4px;
-        z-index: 1;
-      }
-
-      .nav__active {
-        background: var(--site-nav-decorator-active-bg, transparent);
-        border-radius: 4px;
-        z-index: 2;
-      }
-
-      .nav__active-indicator {
-        top: auto;
-        height: 2px;
-        background-color: var(--site-nav-decorator-indicator-color, var(--slate-01, currentColor));
-        z-index: 3;
-      }
-
-      .site-nav-link {
-        display: flex;
-        align-items: center;
-        gap: 0.4em;
-        color: var(--_link-color);
-        font-size: var(--_link-size);
-        font-weight: var(--_link-weight);
-        letter-spacing: var(--_link-tracking);
-        text-decoration: none;
-        white-space: nowrap;
-        padding-block: 0.8rem;
-        padding-inline: 0.4rem;
-        position: relative;
-        z-index: 4;
-        transition: color var(--_nav-transition);
-
-        &:hover,
-        &:focus-visible {
-          color: var(--site-nav-link-hover-color, var(--slate-04, var(--_link-color)));
-          outline: none;
-        }
-      }
-      li.is-active .site-nav-link {
-        color: var(--site-nav-link-active-color, var(--slate-01, var(--_link-color)));
-      }
-    }
-
-    /* ─── Alignment variants ────────────────────────────────────────── */
-
-    &.site-navigation--center .site-nav-list {
-      margin-inline: auto;
-    }
-
-    &.site-navigation--right .site-nav-list {
-      margin-inline-start: auto;
-    }
-
-    &.is-collapsed {
-      justify-content: end;
-    }
-
-    /* ─── Burger button (InputButton) ──────────────────────────── */
-
-    .site-nav-burger.input-button.icon-only {
-      margin-inline-start: auto;
-      color: var(--_burger-color);
-
-      /* Strip all InputButton visual styling */
-      background: none;
-      border: none;
-      outline: none;
-      text-decoration: none;
-      padding: 8px;
-      border-radius: 4px;
-      transition: outline-color var(--_nav-transition);
-
-      /* Override icon-only aspect-ratio and inner icon margin */
-      &.icon-only {
-        aspect-ratio: unset;
-        border-radius: 4px;
-
-        .btn-icon {
-          margin: 0;
-          display: flex;
-          flex-direction: column;
-          gap: var(--_burger-bar-gap);
-        }
-      }
-
-      &:focus-visible {
-        outline: 2px solid var(--_burger-color);
-        outline-offset: 4px;
-      }
-    }
-
-    .burger-bar {
-      display: block;
-      width: var(--site-nav-burger-width, 22px);
-      height: var(--_burger-bar-height);
-      background: currentColor;
-      border-radius: 1px;
-      transform-origin: center;
-      transition:
-        transform var(--_burger-transition),
-        opacity var(--_burger-transition);
-    }
-
-    .site-nav-burger.is-open {
-      .burger-bar:nth-child(1) {
-        transform: translateY(calc(var(--_burger-bar-height) + var(--_burger-bar-gap))) rotate(45deg);
-      }
-
-      .burger-bar:nth-child(2) {
-        opacity: 0;
-        transform: scaleX(0);
-      }
-
-      .burger-bar:nth-child(3) {
-        transform: translateY(calc(-1 * (var(--_burger-bar-height) + var(--_burger-bar-gap)))) rotate(-45deg);
-      }
-    }
-
-    /* ─── Mobile drop panel ─────────────────────────────────────────── */
-
-    .site-nav-panel {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 100%;
-
-      display: grid;
-      grid-template-rows: 0fr;
-      border-block-start: 1px solid transparent;
-      transition:
-        grid-template-rows var(--_panel-slide-duration) var(--_panel-slide-easing),
-        border-color var(--_panel-slide-duration) var(--_panel-slide-easing);
-
-      z-index: 1;
-
-      &.is-open {
-        grid-template-rows: 1fr;
-        border-block-start-color: var(--_panel-border-color);
-      }
-
-      .site-nav-panel-inner {
-        overflow: hidden;
-        background-color: var(--site-nav-panel-bg, var(--page-bg, #1a1614));
-      }
-
-      .site-nav-panel-list {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        position: relative;
-
-        .nav-indicator-li {
-          position: absolute;
-          inset: 0;
-          pointer-events: none;
-          list-style: none;
-        }
-
-        .nav__hovered,
-        .nav__active,
-        .nav__active-indicator {
-          position: absolute;
-          left: 0;
-          top: 0;
-          bottom: 0;
-          right: 0;
-          scale: 1 var(--_panel-height-hovered, 0.001);
-          translate: 0 var(--_panel-y-hovered, 0);
-          transform-origin: top;
-          pointer-events: none;
-        }
-
-        .site-navigation.is-animated & .nav__hovered,
-        .site-navigation.is-animated & .nav__active,
-        .site-navigation.is-animated & .nav__active-indicator {
-          transition:
-            scale var(--_panel-transition-duration, 200ms),
-            translate var(--_panel-transition-duration, 200ms);
-        }
-
-        .nav__active {
-          scale: 1 var(--_panel-height-active, 0.001);
-          translate: 0 var(--_panel-y-active, 0);
-        }
-
-        .nav__active-indicator {
-          left: var(--site-nav-panel-indicator-left, 0);
-          right: var(--site-nav-panel-indicator-right, auto);
-          width: 2px;
-        }
-
-        .nav__hovered {
-          background: var(--site-nav-panel-decorator-hovered-bg, transparent);
-          z-index: 1;
-        }
-
-        .nav__active {
-          background: var(--site-nav-panel-decorator-active-bg, transparent);
-          z-index: 2;
-        }
-
-        .nav__active-indicator {
-          background: var(--site-nav-panel-decorator-indicator-color, var(--slate-01, currentColor));
-          z-index: 3;
-        }
-
-        li {
-          border-block-end: 1px solid var(--_panel-item-border);
-
-          &:last-child {
-            border-block-end: none;
-          }
-        }
-
-        .site-nav-panel-link {
-          display: flex;
-          align-items: center;
-          gap: 0.5em;
-          color: var(--_panel-link-color);
-          font-size: var(--_link-size);
-          font-weight: var(--_link-weight);
-          letter-spacing: var(--_link-tracking);
-          text-decoration: none;
-          padding-block: var(--site-nav-panel-padding-block, 1.4rem);
-          padding-inline: var(--site-nav-panel-padding-inline, 1.5rem);
-          position: relative;
-          z-index: 4;
-          transition: color var(--_nav-transition);
-
-          &:hover,
-          &:focus-visible {
-            color: var(--site-nav-panel-link-hover-color, var(--slate-04, var(--_panel-link-color)));
-            outline: none;
-          }
-        }
-        li.is-active .site-nav-panel-link {
-          color: var(--site-nav-panel-link-active-color, var(--slate-01, var(--_panel-link-color)));
-        }
-      }
-    }
-  }
-}
-</style>