srcdev-nuxt-components 9.6.17 → 9.6.18

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

@@ -222,7 +222,7 @@ 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. |
+| `--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

@@ -39,7 +39,7 @@ are documented alongside it since that's where they're consumed.
 | `--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. |
+| `--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`)
 
@@ -63,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

@@ -914,6 +914,10 @@ watch(
                 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;
+                }
               }
             }
 
@@ -1062,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;
@@ -1234,6 +1244,17 @@ watch(
       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.17",
+  "version": "9.6.18",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",