fix(ResponsiveHeader): fix keyboard hover state leak and ResizeObserver race

- Add @focusout handler on main-navigation that clears hoveredItemKey
  when focus moves outside the nav entirely (checked via relatedTarget);
  previously, keyboard Tab past the last nav item left an item stuck in
  is-hovered with the indicator still visible

- Guard the ResizeObserver async callback with an isMeasuring/pendingMeasure
  mutex using the run-latest do/while pattern; the two-pass geometry path
  awaits multiple ticks and toggles isOverflowVisibleForMeasurement —
  concurrent observer fires could race on that state and corrupt
  mainNavigationState

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: srcdev

app/components/responsive-header/ResponsiveHeader.vue

@@ -6,6 +6,7 @@
       :class="{ 'is-animated': isAnimated }"
       aria-label="Main navigation"
       @mouseleave="hoveredItemKey = null"
+      @focusout="handleNavFocusout"
     >
       <ul
         v-for="(navGroup, groupKey) in responsiveNavLinks"
@@ -199,6 +200,14 @@ const handleNavigationItemHover = (key: string) => {
   closeAllNavigationDetails();
 };
 
+const handleNavFocusout = (event: FocusEvent) => {
+  // Only clear when focus moves outside the nav entirely, not between nav items.
+  const nav = event.currentTarget as HTMLElement;
+  if (!event.relatedTarget || !nav.contains(event.relatedTarget as Node)) {
+    hoveredItemKey.value = null;
+  }
+};
+
 const handleSummaryAction = (event: MouseEvent | KeyboardEvent) => {
   toggleDetailsElement(event);
 };
@@ -462,46 +471,74 @@ onMounted(async () => {
   setupClickOutsideListeners();
 });
 
+// ─── Re-entrancy guard for the ResizeObserver callback ────────────────────
+// The observer fires an async callback that awaits multiple ticks and toggles
+// layout-affecting state. If the observer fires again while the first pass is
+// still in flight, two concurrent passes would race on isOverflowVisibleForMeasurement
+// and mainNavigationState.
+//
+// Pattern: "run-latest" queue.
+//   • isMeasuring gates entry — any new observer call while a pass is running
+//     sets pendingMeasure = true and returns immediately.
+//   • The do/while re-runs once after the pass completes if a new resize arrived,
+//     so we never silently drop the final geometry update.
+let isMeasuring = false;
+let pendingMeasure = false;
+
 useResizeObserver(navigationWrapperRef, async () => {
-  if (!isGeometryReady.value) {
-    // ─── Two-pass measurement on initial mount / route change ──────────────
-    //
-    // We never use a "peek" check to decide whether phase 2 is needed.
-    // A peek after phase 1 gives the wrong answer at the breakpoint because:
-    //   • updateNavigationConfig() sets secondaryNavRects reactively, but
-    //     v-bind(mainNavigationMarginBlockEndStr) isn't flushed to the DOM until
-    //     the next Vue render tick — so item rects are still measured against the
-    //     OLD margin, producing a stale DOM/computed mismatch.
-    //   • Even with correct timing, checking without the button reserved will
-    //     always pass marginal items (those that fit only when button is absent).
-    //
-    // Phase 1: button is 'visually-hidden' (width:0).
-    // Measure the wrapper and secondary-nav rects without the button.
-    await updateNavigationConfig("phase1");
-
-    // Phase 2: switch button to 'is-measuring' — opacity:0 / visibility:hidden
-    // but natural width — so secondaryNavRects captures the button's real width.
-    // The button is invisible to the user; nav items are still visually-hidden.
-    isOverflowVisibleForMeasurement.value = true;
-    await nextTick(); // let Vue render the 'is-measuring' class (button at natural width)
-    await updateNavigationConfig("phase2"); // secondaryNavRects now includes button width
-
-    // Wait for Vue to flush the updated mainNavigationMarginBlockEndStr via v-bind
-    // before reading item positions — without this tick, getBoundingClientRect()
-    // in initMainNavigationState would see the pre-phase-2 margin-inline-end.
-    await nextTick();
-
-    // Final visibility pass — reads item rects against the correct margin.
-    // Also sets isGeometryReady = true.
-    initMainNavigationState();
-    // Hand control back to showOverflowDetails; measurement flag no longer needed.
-    isOverflowVisibleForMeasurement.value = false;
-  } else {
-    // ─── Normal resize after geometry is settled ───────────────────────────
-    // The button's state is already correct (driven by showOverflowDetails),
-    // so a single-pass measurement gives accurate secondaryNavRects.
-    await updateNavigationConfig("useResizeObserver");
-    initMainNavigationState();
+  if (isMeasuring) {
+    pendingMeasure = true;
+    return;
+  }
+
+  isMeasuring = true;
+  try {
+    do {
+      pendingMeasure = false;
+
+      if (!isGeometryReady.value) {
+        // ─── Two-pass measurement on initial mount / route change ──────────────
+        //
+        // We never use a "peek" check to decide whether phase 2 is needed.
+        // A peek after phase 1 gives the wrong answer at the breakpoint because:
+        //   • updateNavigationConfig() sets secondaryNavRects reactively, but
+        //     v-bind(mainNavigationMarginBlockEndStr) isn't flushed to the DOM until
+        //     the next Vue render tick — so item rects are still measured against the
+        //     OLD margin, producing a stale DOM/computed mismatch.
+        //   • Even with correct timing, checking without the button reserved will
+        //     always pass marginal items (those that fit only when button is absent).
+        //
+        // Phase 1: button is 'visually-hidden' (width:0).
+        // Measure the wrapper and secondary-nav rects without the button.
+        await updateNavigationConfig("phase1");
+
+        // Phase 2: switch button to 'is-measuring' — opacity:0 / visibility:hidden
+        // but natural width — so secondaryNavRects captures the button's real width.
+        // The button is invisible to the user; nav items are still visually-hidden.
+        isOverflowVisibleForMeasurement.value = true;
+        await nextTick(); // let Vue render the 'is-measuring' class (button at natural width)
+        await updateNavigationConfig("phase2"); // secondaryNavRects now includes button width
+
+        // Wait for Vue to flush the updated mainNavigationMarginBlockEndStr via v-bind
+        // before reading item positions — without this tick, getBoundingClientRect()
+        // in initMainNavigationState would see the pre-phase-2 margin-inline-end.
+        await nextTick();
+
+        // Final visibility pass — reads item rects against the correct margin.
+        // Also sets isGeometryReady = true.
+        initMainNavigationState();
+        // Hand control back to showOverflowDetails; measurement flag no longer needed.
+        isOverflowVisibleForMeasurement.value = false;
+      } else {
+        // ─── Normal resize after geometry is settled ───────────────────────────
+        // The button's state is already correct (driven by showOverflowDetails),
+        // so a single-pass measurement gives accurate secondaryNavRects.
+        await updateNavigationConfig("useResizeObserver");
+        initMainNavigationState();
+      }
+    } while (pendingMeasure);
+  } finally {
+    isMeasuring = false;
   }
 });
 

app/pages/ui/simple-grid.vue

@@ -6,12 +6,7 @@
           <h1 class="page-heading-3">Simple Grid</h1>
           <p class="page-body-normal">Simple grid displaying dummy posts data</p>
 
-          <LayoutGridByWidth
-            v-if="status === 'success'"
-            column-width="300px"
-            gap="2rem"
-            :style-class-passthrough="['display-posts']"
-          >
+          <LayoutGridByWidth v-if="status === 'success'" column-width="300px" gap="2rem">
             <template v-for="(item, index) in postsData?.posts.slice(0, displayCount)" :key="item.id" #[item.id]>
               <div class="display-post-item">
                 <div>Views: {{ item.views }}</div>