srcdev-nuxt-components 9.3.0 → 9.3.2

package/app/layouts/default.vue

@@ -1,43 +1,35 @@
 <template>
   <div class="page-layout">
-    <PageRow tag="div" variant="full" :style-class-passthrough="['header']">
-      <template #default>
-        <header class="responsive-header">
-          <nav class="home-navigation" aria-label="Home Navigation">
-            <SkipLinks>
-              <template #homeLink>
-                <NuxtLink to="/" class="home-link">
-                  SRCDEV
-                  <span>components</span>
-                </NuxtLink>
-              </template>
-            </SkipLinks>
-          </nav>
-          <ResponsiveHeader
-            :responsive-nav-links
-            :gap-between-first-and-second-nav="12"
-            :style-class-passthrough="['site-header-nav']"
-            :overflow-details-summary-icons="{
-              more: 'gravity-ui:ellipsis',
-              burger: 'gravity-ui:bars',
-            }"
-            :collapse-at-main-nav-intersection="false"
-            :allow-expand-on-gesture="false"
-          >
-            <template #secondaryNavigation>
-              <ul class="secondary-navigation-list">
-                <li class="secondary-navigation-item">
-                  <NuxtLink class="secondary-navigation-link" to="/">
-                    <Icon name="material-symbols:settings-outline-rounded" class="icon" aria-hidden="true" />
-                    <span class="sr-only">Settings</span>
-                  </NuxtLink>
-                </li>
-              </ul>
-            </template>
-          </ResponsiveHeader>
-        </header>
+    <SiteHeader
+      :responsive-nav-links
+      :gap-between-first-and-second-nav="12"
+      page-row-variant="full"
+      :style-class-passthrough="['header']"
+      :nav-style-class-passthrough="['site-header-nav']"
+      :overflow-details-summary-icons="{
+        more: 'gravity-ui:ellipsis',
+        burger: 'gravity-ui:bars',
+      }"
+      :collapse-at-main-nav-intersection="false"
+      :allow-expand-on-gesture="false"
+    >
+      <template #branding>
+        <NuxtLink to="/" class="home-link">
+          SRCDEV
+          <span>components</span>
+        </NuxtLink>
       </template>
-    </PageRow>
+      <template #secondaryNavigation>
+        <ul class="secondary-navigation-list">
+          <li class="secondary-navigation-item">
+            <NuxtLink class="secondary-navigation-link" to="/">
+              <Icon name="material-symbols:settings-outline-rounded" class="icon" aria-hidden="true" />
+              <span class="sr-only">Settings</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </template>
+    </SiteHeader>
     <PageRow id="main-content" class="main-content" tag="main" variant="full" :is-landmark="true">
       <template #default>
         <slot name="layout-content">Page content goes here</slot>
@@ -231,39 +223,31 @@ onMounted(() => {
 
   width: 100%;
 
-  .responsive-header {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 24px;
-    align-items: center;
-    padding-block: 0;
-    padding-inline: 24px;
-    background-color: #000;
+  /* SiteHeader token overrides — see .claude/skills/components/site-header.md */
+  --site-header-gap: 2.4rem;
+  --site-header-padding-inline: 2.4rem;
+  --site-header-bg: #000;
+  --site-header-position: relative;
+  --site-header-z-index: 9;
 
-    position: relative;
-    z-index: 9;
+  .home-link {
+    display: flex;
+    flex-direction: column;
+    text-wrap-mode: nowrap;
+    font-size: var(--step-5);
+    letter-spacing: 0.2em;
+    color: var(--slate-00);
+    text-decoration: none;
 
-    width: 100%;
-
-    .home-link {
-      display: flex;
-      flex-direction: column;
-      text-wrap-mode: nowrap;
-      font-size: var(--step-5);
-      letter-spacing: 0.2em;
-      color: var(--slate-00);
-      text-decoration: none;
-
-      span {
-        font-size: var(--step-3);
-        letter-spacing: initial;
-      }
+    span {
+      font-size: var(--step-3);
+      letter-spacing: initial;
+    }
 
-      &:hover {
-        border-radius: 0.4rem;
-        outline: 2px solid var(--green-08);
-        outline-offset: 0.4rem;
-      }
+    &:hover {
+      border-radius: 0.4rem;
+      outline: 2px solid var(--green-08);
+      outline-offset: 0.4rem;
     }
   }
 }
@@ -282,6 +266,19 @@ onMounted(() => {
   --responsive-header-color: var(--slate-00);
   --responsive-header-link-color: var(--slate-00);
 
+  /* Fixed (non-fluid) nav-link font-size — deliberately NOT var(--step-*).
+     A vw-based clamp() here drifts with the scrollbar (see
+     ResponsiveHeader.vue's token comment) without ever re-triggering the
+     overflow-collapse ResizeObserver, silently letting one extra item fit
+     that shouldn't. Values TBC after a visual pass. */
+  --responsive-header-link-font-size: 1.2rem;
+  @media (min-width: 768px) {
+    --responsive-header-link-font-size: 1.4rem;
+  }
+  @media (min-width: 1024px) {
+    --responsive-header-link-font-size: 1.5rem;
+  }
+
   --responsive-header-sub-nav-bg: #000;
   --responsive-header-sub-nav-border: 1px solid #efefef75;
 

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.3.0",
+  "version": "9.3.2",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
+  "engines": {
+    "node": ">=24.0.0"
+  },
   "scripts": {
     "postinstall": "node scripts/copy-snippets.mjs",
     "clean": "rm -rf .nuxt && rm -rf .output",