srcdev-nuxt-components 9.1.11 → 9.1.13

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

@@ -5,7 +5,7 @@
     :class="[
       elementClasses,
       `site-navigation--${navAlign}`,
-      { 'is-collapsed': isCollapsed, 'is-loaded': isLoaded, 'menu-open': isMenuOpen },
+      { 'is-collapsed': isCollapsed, 'is-loaded': isLoaded, 'menu-open': isMenuOpen, 'is-animated': isAnimated },
     ]"
     aria-label="Site navigation"
   >
@@ -113,6 +113,13 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
+// ─── 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;
@@ -330,18 +337,30 @@ const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, activeHref, isAct
     onResize: async () => {
       await nextTick(); // wait for Vue to re-render after any isCollapsed change
       initNavDecorators();
+      if (!hasFirstLayout) {
+        hasFirstLayout = true;
+        nextTick(() => {
+          isAnimated.value = true;
+        });
+      }
       if (isMenuOpen.value) {
         setFinalPanelActivePositions(true);
         setFinalPanelHoveredPositions(true);
       }
     },
     onRouteChange: () => {
+      isAnimated.value = false;
       requestAnimationFrame(() => {
         initNavDecorators();
+        nextTick(() => {
+          isAnimated.value = true;
+        });
       });
     },
     onMounted: () => {
       initNavDecorators();
+      // isAnimated is set in onResize — ResizeObserver guarantees layout is
+      // complete before we enable transitions, unlike nextTick / RAF.
     },
   });
 
@@ -473,10 +492,15 @@ watch(
         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);
-        pointer-events: none;
       }
 
       .nav__active {
@@ -661,10 +685,15 @@ watch(
           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);
-          pointer-events: none;
         }
 
         .nav__active {

package/package.json

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