srcdev-nuxt-components 9.6.16 → 9.6.18

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

@@ -211,6 +211,8 @@ All tokens are read via `var(--token, default)` — see the full list in the com
 | `--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. |
@@ -219,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 (they jump under `prefers-reduced-motion`; the chevron and overflow button don't animate their movement either). |
 
 ---
 

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

@@ -12,6 +12,9 @@ are documented alongside it since that's where they're consumed.
 | `--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. |
@@ -31,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. Under `prefers-reduced-motion` they jump instead (the hover highlight still fades). |
 
 ### Overflow panel content (`NavigationItems`)
 
@@ -56,13 +63,17 @@ Link and dropdown text is never line-clamped: it names where the link goes. Long
 wrap inside the dropdown and overflow panels; in the top bar, an item too wide to fit moves to the
 overflow menu.
 
+> **Changed 2026-10-20**: under `prefers-reduced-motion` the active indicator and hover highlight
+> jump to the new item instead of sliding, the dropdown chevron flips without rotating, and the
+> overflow button appears without animating its width. Opacity fades stay.
+>
 > **Changed 2026-10-07**: the defaults assumed a dark bar: `Canvas` panel and button backgrounds,
 > translucent white borders (`#ffffff90`, `#efefef75`), a white button outline/hover outline and
 > white-tint hover highlights, all near-invisible on a light header. They now come from the
 > `--theme-*` slots and `--page-bg` (see the tables). A dark header sets these tokens. Also added
 > the `-link-color-hover` / `-link-color-active` tokens (top bar and overflow panel), which
 > TabNavigation had and ResponsiveHeader lacked.
-
+>
 > **Changed 2026-10-05**: the dropdown and overflow panels had no maximum size, so a long child
 > name or a long child list ran off-screen. They are now capped by the max-size tokens above.
 > `--_overflow-drop-down-width`, a private token nothing ever set, is gone (`min-width: fit-content`

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

@@ -775,13 +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)
     ──────────────────────────────────────────────────────────────────────── */
 
@@ -825,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);
 
@@ -856,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));
@@ -880,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 {
@@ -895,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
@@ -903,10 +910,14 @@ 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;
+
+                @media (prefers-reduced-motion: reduce) {
+                  transition: none;
+                }
               }
             }
 
@@ -1055,6 +1066,12 @@ watch(
 
         transition: all 0.2s ease-in-out;
 
+        @media (prefers-reduced-motion: reduce) {
+          transition:
+            opacity 0.2s ease-in-out,
+            visibility 0.2s ease-in-out;
+        }
+
         &.visually-hidden {
           opacity: 0;
           visibility: hidden;
@@ -1191,12 +1208,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;
     }
 
@@ -1214,19 +1231,30 @@ 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 {
       transition: none;
     }
 
+    /* The indicators jump to the new item instead of sliding; the hover highlight still fades. */
+    @media (prefers-reduced-motion: reduce) {
+      .nav-indicator-hovered {
+        transition: opacity 150ms ease;
+      }
+
+      .nav-indicator-active {
+        transition: none;
+      }
+    }
+
     &:has(li.is-hovered) .nav-indicator-active {
       background: var(
         --responsive-nav-decorator-hovered-indicator-color,

package/package.json

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