srcdev-nuxt-components 9.6.15 → 9.6.16

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

@@ -209,6 +209,8 @@ 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-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. |

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

@@ -10,6 +10,8 @@ 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-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. |

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

@@ -779,6 +779,9 @@ watch(
        --responsive-nav-decorator-hovered-bg              (default: color-mix(in oklch, var(--theme-text) 8%, transparent))
 
        --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-main-nav-justify-content (default: space-between)
     ──────────────────────────────────────────────────────────────────────── */
 
@@ -810,8 +813,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;
@@ -835,11 +838,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 {

package/package.json

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