srcdev-nuxt-components 9.6.15 → 9.6.17

package/.claude/skills/components/responsive-header.md

@@ -209,6 +209,10 @@ All tokens are read via `var(--token, default)` — see the full list in the com
 | Token | Default | Controls |
 |---|---|---|
 | `--responsive-header-link-font-size` | `inherit` | Nav-link font-size. **Set this to a fixed value** — see the measurement-pipeline note above for why leaving it `inherit` from a fluid ancestor is a footgun. |
+| `--responsive-header-link-padding-block` / `--responsive-header-link-padding-inline` | `0.8rem` / `0.2rem` | Padding around each top-bar link and summary. The active underline and hover highlight span this box, so larger inline padding makes them reach past the label. Set fixed values, as with the font size: the overflow-collapse measurement only re-runs when the header resizes. |
+| `--responsive-header-nav-item-gap` | `30px` | Gap between items within each top-bar list. Reduce it when you raise the inline padding to keep the label-to-label spacing. |
+| `--responsive-header-link-icon-size` / `--responsive-header-link-icon-gap` | `1.35em` / `6px` | Link icon and summary chevron size, and its gap to the label. Keep the size fixed so a late icon can't widen an item after measurement. |
+| `--responsive-header-nav-group-gap` | `60px` | Gap between the main and secondary nav groups. |
 | `--responsive-header-link-color` | `inherit` | Link/summary text colour. |
 | `--responsive-header-link-color-hover` / `-active` | the resting colour | Per-state link colour in the top bar (added 2026-10-07). Hover falls back to the item's current state. `--overflow-nav-link-color-hover` / `-active` do the same in the overflow panel. |
 | `--responsive-header-bg` / `--responsive-header-padding-*` / `--responsive-header-border*` | transparent / `0` / `none` | Root element theming. |
@@ -217,6 +221,8 @@ All tokens are read via `var(--token, default)` — see the full list in the com
 
 Defaults are for a **light** header (changed 2026-10-07): panels use `--page-bg`, borders and hover tints are `color-mix()`es of `--theme-text`, the overflow button is transparent with a `--theme-border-focus` hover outline. They used to assume a dark bar (`Canvas`, translucent white borders and tints). A dark header sets the tokens.
 | `--responsive-nav-decorator-indicator-color` / `--responsive-nav-decorator-hovered-*` | `currentColor` / inherits | The sliding active/hover indicator bar under the main nav. |
+| `--responsive-nav-decorator-indicator-offset` | `2px` | Distance of the active indicator below the active item's bottom edge; negative raises it. |
+| `--responsive-nav-decorator-indicator-height` / `--responsive-nav-decorator-hovered-border-radius` / `--responsive-nav-decorator-transition-duration` | `2px` / `4px` / `200ms` | Active indicator thickness, hover highlight radius, and how long both take to slide. |
 
 ---
 

package/app/components/03.organisms/responsive-header/CONSUMER-STYLING.md

@@ -10,6 +10,11 @@ are documented alongside it since that's where they're consumed.
 | Token | Default | Controls |
 |---|---|---|
 | `--responsive-header-link-font-size` | `inherit` | Nav-link font-size. **Always set this to a fixed value.** Leaving it `inherit` means a fluid ancestor font-size (`clamp()`/`vw`) can drift nav-item text width without ever re-triggering the overflow-collapse measurement — see the component skill doc's "measurement pipeline" section for the full mechanism. |
+| `--responsive-header-link-padding-block` / `--responsive-header-link-padding-inline` | `0.8rem` / `0.2rem` | Padding around each top-bar link and summary. The active underline and hover highlight span this box, so larger inline padding makes them reach past the label. Set fixed values, as with the font size: the overflow-collapse measurement only re-runs when the header resizes. |
+| `--responsive-header-nav-item-gap` | `30px` | Gap between items within each top-bar list. Reduce it when you raise the inline padding to keep the label-to-label spacing. |
+| `--responsive-header-link-icon-size` | `1.35em` | Size of a top-bar link's icon and a sub-nav summary's chevron. Keep it a fixed size (not `auto`): the slot is reserved so a late-loading icon can't widen an item after the overflow measurement. |
+| `--responsive-header-link-icon-gap` | `6px` | Gap between a top-bar link's icon and label, and a summary's label and chevron. |
+| `--responsive-header-nav-group-gap` | `60px` | Gap between the main and secondary nav groups. |
 | `--responsive-header-link-color` | `inherit` | Link/summary text colour. |
 | `--responsive-header-main-nav-justify-content` | `space-between` | How the main nav's groups are spread along the bar. Use `flex-start`, `safe center` or `safe end`; plain `center`/`end` let items that don't fit spill off the start edge, where they're clipped. (Safari 16 ignores `safe` values and falls back to start alignment.) |
 | `--responsive-header-color` | `inherit` | Root element text colour. |
@@ -29,8 +34,12 @@ are documented alongside it since that's where they're consumed.
 | `--responsive-header-overflow-nav-bg` / `-border` / `-border-radius` / `-padding-block` | `var(--page-bg, var(--theme-surface-subtle))` / `1px solid color-mix(in oklch, var(--theme-text) 20%, transparent)` / `8px` / `12px` | Overflow panel container. |
 | `--responsive-header-overflow-nav-max-block-size` | `70vh` | Tallest the overflow panel gets before it scrolls. |
 | `--responsive-nav-decorator-indicator-color` | `currentColor` | Active-item indicator bar/underline. |
+| `--responsive-nav-decorator-indicator-offset` | `2px` | How far the active indicator sits below the active item's bottom edge. Negative values raise it inside the item (`-4px` sits it 4px up). |
 | `--responsive-nav-decorator-hovered-indicator-color` | inherits the above | Indicator colour while hovering. |
 | `--responsive-nav-decorator-hovered-bg` | `color-mix(in oklch, var(--theme-text) 8%, transparent)` | Hover highlight background behind the hovered item. |
+| `--responsive-nav-decorator-indicator-height` | `2px` | Thickness of the active indicator. |
+| `--responsive-nav-decorator-hovered-border-radius` | `4px` | Corner radius of the hover highlight. |
+| `--responsive-nav-decorator-transition-duration` | `200ms` | How long the active indicator and hover highlight take to slide between items. |
 
 ### Overflow panel content (`NavigationItems`)
 

package/app/components/03.organisms/responsive-header/ResponsiveHeader.vue

@@ -775,10 +775,20 @@ watch(
        --responsive-header-overflow-nav-max-block-size  (default: 70vh)
 
        --responsive-nav-decorator-indicator-color         (default: currentColor)
+       --responsive-nav-decorator-indicator-offset        (default: 2px, below the item; negative raises it)
        --responsive-nav-decorator-hovered-indicator-color (default: inherits --responsive-nav-decorator-indicator-color)
        --responsive-nav-decorator-hovered-bg              (default: color-mix(in oklch, var(--theme-text) 8%, transparent))
+       --responsive-nav-decorator-indicator-height        (default: 2px)
+       --responsive-nav-decorator-hovered-border-radius   (default: 4px)
+       --responsive-nav-decorator-transition-duration     (default: 200ms)
 
        --responsive-header-link-font-size       (default: inherit)
+       --responsive-header-link-padding-block   (default: 0.8rem)
+       --responsive-header-link-padding-inline  (default: 0.2rem)
+       --responsive-header-nav-item-gap         (default: 30px)
+       --responsive-header-link-icon-size       (default: 1.35em)
+       --responsive-header-link-icon-gap        (default: 6px)
+       --responsive-header-nav-group-gap        (default: 60px)
        --responsive-header-main-nav-justify-content (default: space-between)
     ──────────────────────────────────────────────────────────────────────── */
 
@@ -810,8 +820,8 @@ watch(
 
     .main-navigation {
       /* Set up some global vars */
-      --_link-padding-block: 0.8rem;
-      --_link-padding-inline: 0.2rem;
+      --_link-padding-block: var(--responsive-header-link-padding-block, 0.8rem);
+      --_link-padding-inline: var(--responsive-header-link-padding-inline, 0.2rem);
       --_link-margin-block: 0.1rem;
       --_link-margin-inline: 0.1rem;
       --_link-focus-visible-outline-width: 0.2rem;
@@ -822,7 +832,7 @@ watch(
       flex-wrap: nowrap;
       flex-grow: 1;
       justify-content: var(--responsive-header-main-nav-justify-content, space-between);
-      gap: 60px;
+      gap: var(--responsive-header-nav-group-gap, 60px);
       overflow-x: hidden;
       margin-inline-end: v-bind(mainNavigationMarginBlockEndStr);
 
@@ -835,11 +845,11 @@ watch(
         flex-wrap: nowrap;
 
         &:nth-of-type(1) {
-          gap: 30px;
+          gap: var(--responsive-header-nav-item-gap, 30px);
         }
 
         &:nth-of-type(2) {
-          gap: 30px;
+          gap: var(--responsive-header-nav-item-gap, 30px);
         }
 
         .main-navigation-item {
@@ -853,7 +863,7 @@ watch(
 
           .main-navigation-link {
             display: flex;
-            gap: 6px;
+            gap: var(--responsive-header-link-icon-gap, 6px);
             white-space: nowrap;
             font-size: var(--responsive-header-link-font-size, inherit);
             color: var(--_link-color, var(--responsive-header-link-color, inherit));
@@ -877,8 +887,8 @@ watch(
              (the wrapper's own box doesn't necessarily change size when it happens). */
           .decorator-icon {
             flex-shrink: 0;
-            width: 1.35em;
-            height: 1.35em;
+            width: var(--responsive-header-link-icon-size, 1.35em);
+            height: var(--responsive-header-link-icon-size, 1.35em);
           }
 
           .main-navigation-details {
@@ -892,7 +902,7 @@ watch(
 
             .has-toggle-icon {
               display: flex;
-              gap: 6px;
+              gap: var(--responsive-header-link-icon-gap, 6px);
               white-space: nowrap;
 
               /* Reserved for the same reason as .decorator-icon above — an
@@ -900,8 +910,8 @@ watch(
               .icon {
                 display: block;
                 flex-shrink: 0;
-                width: 1.35em;
-                height: 1.35em;
+                width: var(--responsive-header-link-icon-size, 1.35em);
+                height: var(--responsive-header-link-icon-size, 1.35em);
                 transform: var(--_icon-transform);
                 transition: transform 0.2s ease-in-out;
               }
@@ -1188,12 +1198,12 @@ watch(
       top: anchor(top);
       bottom: anchor(bottom);
       background: var(--responsive-nav-decorator-hovered-bg, color-mix(in oklch, var(--theme-text) 8%, transparent));
-      border-radius: 4px;
+      border-radius: var(--responsive-nav-decorator-hovered-border-radius, 4px);
       z-index: 1;
       opacity: 0;
       transition:
-        left 200ms ease,
-        right 200ms ease,
+        left var(--responsive-nav-decorator-transition-duration, 200ms) ease,
+        right var(--responsive-nav-decorator-transition-duration, 200ms) ease,
         opacity 150ms ease;
     }
 
@@ -1211,13 +1221,13 @@ watch(
       position-anchor: --responsive-main-nav-indicator;
       left: anchor(left);
       right: anchor(right);
-      bottom: calc(anchor(bottom) - 2px);
-      height: 2px;
+      bottom: calc(anchor(bottom) - var(--responsive-nav-decorator-indicator-offset, 2px));
+      height: var(--responsive-nav-decorator-indicator-height, 2px);
       background: var(--responsive-nav-decorator-indicator-color, currentColor);
       z-index: 3;
       transition:
-        left 200ms ease,
-        right 200ms ease;
+        left var(--responsive-nav-decorator-transition-duration, 200ms) ease,
+        right var(--responsive-nav-decorator-transition-duration, 200ms) ease;
     }
 
     &:not(.is-animated) .nav-indicator-active {

package/package.json

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