srcdev-nuxt-components 9.6.0 → 9.6.1

package/.claude/skills/components/glowing-border.md

@@ -17,7 +17,7 @@ a configurable root element via the `tag` prop.
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `tag` | `"div" \| "p" \| "span" \| "section" \| "article" \| "aside" \| "header" \| "footer" \| "main" \| "nav" \| "ul" \| "ol"` | `"div"` | Root element tag. |
-| `variant` | `"subtle" \| "vivid" \| "silver" \| "steel" \| "green"` | `"subtle"` | Glow colour variant. |
+| `variant` | `"subtle" \| "vivid" \| "silver" \| "steel" \| "green"` | `"subtle"` | Glow colour variant, rendered as `data-variant` on the root (not a class). |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
 
 ## Slots
@@ -36,7 +36,7 @@ a configurable root element via the `tag` prop.
 
 ## Styling
 
-Border width, radius, surface colour, animation duration, and every variant's 5 gradient colour
+Border width, radius, surface colour (defaults to `--theme-surface-subtle`), text colour (`--theme-text`), animation duration, and every variant's 5 gradient colour
 stops are public CSS custom properties — see `CONSUMER-STYLING.md` for the full token table.
 
 ```vue
@@ -48,6 +48,14 @@ stops are public CSS custom properties — see `CONSUMER-STYLING.md` for the ful
 </GlowingBorder>
 ```
 
+## Highlighting a single control
+
+Wrap just an `InputButton` or `InputTextCore` so the glow becomes the control's border (a design
+call-out for something "special"). Set `--glowing-border-radius` to the control's radius plus the
+glow width, `--glowing-border-surface: transparent`, `--glowing-border-overflow: visible` (or the
+control's focus ring is clipped), shrink-to-fit display, and `--input-text-border: transparent` for
+the input. Full recipe in `CONSUMER-STYLING.md`; `HighlightedControls` story.
+
 ## Motion
 
 The glow animation stops automatically under `prefers-reduced-motion: reduce`.
@@ -64,3 +72,13 @@ The glow animation stops automatically under `prefers-reduced-motion: reduce`.
   override surface.
 - 2026-09-20: added `green` variant (vibrant, saturated greens: `#00ff87`, `#39ff14`, `#00c853`,
   `#64dd17`, `#00e676`), each stop overridable via `--glowing-border-green-color-{1-5}`.
+- 2026-10-08 stress-test pass (`StressTest` story): the variant moved from a bare root class
+  (`.vivid`, `.green`...) to `data-variant`, since those names collide with common consumer
+  classes; `@keyframes glow` renamed to `glowing-border-rotate` for the same reason. Added
+  `overflow-wrap: anywhere` so long unbroken text wraps rather than being clipped by
+  `overflow: hidden`. `--glowing-border-surface` default moved from `canvas` to
+  `--theme-surface-subtle`, and a new `--glowing-border-text-colour` token defaults to
+  `--theme-text`. Stories gained story-only canvas and surface background controls with dark
+  values; the hardcoded dark stage was removed.
+- 2026-10-08: added `--glowing-border-overflow` (default `hidden`) so a wrapped control's hover/focus
+  outlines can show, plus the `HighlightedControls` story and recipe.

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

@@ -132,6 +132,9 @@ Route links and anchor links can be mixed in the same data. See the "Same-Page A
 
 ## Migrating from TabNavigation
 
+> `TabNavigation` was deprecated 2026-10-06 and **removed 2026-10-07**, along with its `NavItem` /
+> `NavItemData` types and the `useNavCollapse` composable. Type the new data as `ResponsiveHeaderProp`.
+
 `ResponsiveHeader` covers everything `TabNavigation` does, and collapses progressively (only the items
 that don't fit move into the overflow menu) instead of all-or-nothing. To switch:
 
@@ -149,8 +152,12 @@ that don't fit move into the overflow menu) instead of all-or-nothing. To switch
 | `anchor-scroll-offset` | `anchor-scroll-offset` |
 | collapse everything to a burger when items don't fit | default is per-item overflow; add `collapse-at-main-nav-intersection` for the old all-or-nothing burger |
 | `--tab-nav-link-color` | `--responsive-header-link-color` |
+| `--tab-nav-link-hover-color` / `--tab-nav-link-active-color` | `--responsive-header-link-color-hover` / `-active` (added 2026-10-07) |
+| `--tab-nav-decorator-hovered-bg` | `--responsive-nav-decorator-hovered-bg` |
 | `--tab-nav-decorator-indicator-color` | `--responsive-nav-decorator-indicator-color` |
-| `--tab-nav-*` panel and burger tokens | the overflow tokens in `CONSUMER-STYLING.md` and NavigationItems' `--overflow-nav-*` |
+| `--tab-nav-panel-link-color` / `-hover-color` / `-active-color` | `--overflow-nav-link-color` / `-color-hover` / `-color-active` |
+| `--tab-nav-panel-bg` / `--tab-nav-panel-border-color` / `--tab-nav-panel-item-border` | `--responsive-header-overflow-nav-bg` / `--responsive-header-overflow-nav-border` (full shorthand) / `--overflow-nav-link-border-color` |
+| `--tab-nav-burger-color` | `--responsive-header-overflow-btn-icon-color` |
 
 ```vue
 <!-- Before -->
@@ -203,9 +210,12 @@ 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-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. |
 | `--responsive-header-overflow-btn-*` | various | Overflow burger button sizing/colour. |
 | `--responsive-header-sub-nav-*` / `--responsive-header-overflow-nav-*` | various | Top-bar dropdown panel and overflow-panel container theming. |
+
+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. |
 
 ---

package/.claude/skills/components/select-menu.md

@@ -21,14 +21,18 @@ open between picks.
 
 | Prop | Type | Default | Notes |
 |---|---|---|---|
-| `options` | `SelectMenuOption[]` | — | **Required.** `{ value: string \| number; label: string; icon?: string }[]`. |
+| `options` | `SelectMenuOption[]` | — | **Required.** `{ value: string \| number; label: string; icon?: string; dotColor?: string }[]`. `dotColor` (any CSS colour) colours the trigger's status dot while that option is selected (`indicator="dot"`, single-select) and shows a matching dot beside the option in the list when it has no `icon`. |
 | `label` | `string` | — | **Required.** Accessible name for the trigger + listbox (`aria-label`). Also the trigger's fallback text when nothing is selected and no `placeholder` is set — this doubles as a visible category tag, e.g. `"Choose a service"`. |
 | `placeholder` | `string` | `undefined` | Trigger text shown when nothing is selected. Falls back to `label` when omitted. |
-| `showIcon` | `boolean` | `true` | Show the selected option's icon in the trigger. |
+| `showIcon` | `boolean` | `true` | Show the leading icon in the trigger: the selected option's icon (single-select), otherwise `triggerIcon`. |
+| `triggerIcon` | `string` | `undefined` | Fixed leading icon, e.g. a filter category icon. Shown in both modes; in single-select a selected option's own icon replaces it. |
+| `indicator` | `"none" \| "count" \| "dot"` | `"none"` | Marker after the trigger text, visible only while something is selected; otherwise kept in the layout with `visibility: hidden` (`.select-menu-trigger-indicator-empty`) so the trigger width doesn't jump. `count` = badge with the number selected (for `multiple`); `dot` = status dot (for single-select filters, flags the filter as active). `aria-hidden`. |
+| `selectedCountLabel` | `string` | `"{count} selected"` | Appended to the trigger's `aria-label` while the indicator shows (`"Category, 3 selected"`). `{count}` is replaced. Override for translation. |
 | `showLabel` | `boolean` | `true` | Show the selected option's label (or placeholder/label fallback) text in the trigger. Set `false` for an icon-only compact trigger. |
 | `showChevron` | `boolean` | `true` | Show the trailing chevron in the trigger. |
-| `multiple` | `boolean` | `false` | Allow selecting more than one option. Each option gets a checkbox indicator, `v-model` becomes an array, and picking an option leaves the popover open so more can be toggled. Trigger icon is not shown when `true` (no single option to represent). |
+| `multiple` | `boolean` | `false` | Allow selecting more than one option. Each option gets a checkbox indicator, `v-model` becomes an array, and picking an option leaves the popover open so more can be toggled. No option icon in the trigger when `true` (no single option to represent); `triggerIcon` still shows. |
 | `showSelectionInTrigger` | `boolean` | `false` | Multiple mode only. When `true`, the trigger text updates to a comma-separated list of the currently checked options instead of staying fixed on `placeholder`/`label`. No effect outside `multiple`. |
+| `reserveLabelWidth` | `boolean` | `false` | Single-select only. Renders hidden copies of the placeholder and every option label in the same grid cell as the visible text, so the trigger is always as wide as the longest one and doesn't resize when the selection changes. Off by default, since sometimes a trigger that hugs its text is wanted. No effect with `multiple`. |
 | `inputVariant` | `InputUiVariant` | `"normal"` | Trigger border style, same prop as `InputSelect`: `"normal"` (bordered box) or `"underlined"` (bottom border only, square corners), added as a class on the root. `"outlined"` has no CSS, same as the `05.forms` inputs. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root `<div>`. |
 
@@ -132,6 +136,39 @@ Set `showSelectionInTrigger` to opt out of that and have the trigger update inst
 
 ---
 
+## Filter trigger: icon + count or status dot
+
+```vue
+<!-- Multi-select category filter: list icon, "Category", badge "3", chevron -->
+<SelectMenu
+  v-model="categories"
+  :options="categoryOptions"
+  label="Category"
+  multiple
+  trigger-icon="lucide:list"
+  indicator="count"
+/>
+
+<!-- Single-select status filter: dot appears once a status is picked, in that option's dotColor
+     statusOptions = [{ value: "active", label: "Active", dotColor: "var(--status-success)" }, ...] -->
+<SelectMenu
+  v-model="status"
+  :options="statusOptions"
+  label="Status"
+  trigger-icon="lucide:circle-dot"
+  indicator="dot"
+/>
+```
+
+The indicator is only visible while something is selected, so an unfiltered trigger looks plain,
+but its space is always reserved so the trigger doesn't resize as the filter is set and cleared.
+Per-option `dotColor` beats `--select-menu-trigger-dot-color`, which is the fallback (and the only
+colour in `multiple` mode).
+Badge/dot tokens (`--select-menu-trigger-count-*`, `--select-menu-trigger-dot-*`) are in
+`CONSUMER-STYLING.md`.
+
+---
+
 ## Filter bar (multiple categories)
 
 `SelectMenu` is single-select per instance — a faceted filter bar is built by placing one instance
@@ -167,6 +204,13 @@ Quick reference:
 }
 ```
 
+### Long content
+
+The root caps at its container width, so a long trigger label truncates with an ellipsis. The
+popover caps at `--select-menu-popover-max-width` (default `calc(100vw - 3.2rem)`) and option labels
+wrap; `--select-menu-item-label-line-clamp` (default `none`) caps them, `1` for single-line
+ellipsis. The `StressTest` story covers this at every canvas width.
+
 ---
 
 ## Notes
@@ -188,7 +232,8 @@ Quick reference:
     drop the whole rule.
   Confirmed broken on a Safari 16 iPad before this (trigger rendered, menu never opened).
 - **Left-aligned popover** (`left: anchor(left)`) — unlike `ActionMenu` which right-aligns. Matches
-  native `<select>` dropdown behaviour. Flips above the trigger near the bottom of the viewport.
+  native `<select>` dropdown behaviour. Flips above the trigger near the bottom of the viewport,
+  and to right-aligned when it would overflow the right edge (anchor-positioning browsers only).
 - **Keyboard navigation** follows the WAI-ARIA listbox pattern: `ArrowDown`/`ArrowUp` move between
   options (wraps around), `Home`/`End` jump to first/last, `Enter`/`Space` select the focused
   option, `Tab` closes without stealing focus back to the trigger (matches `ActionMenu`'s
@@ -209,7 +254,7 @@ Quick reference:
   weight doesn't resize the popover. Hover/focus has `-text-color-hover` and `-border-hover`, which
   fall back to the row's *current* state (selected or resting), not always to resting. There's no
   hover font-weight token on purpose: the width reserve only covers one alternate weight.
-- **Chevron rotation** keys off the trigger's `aria-expanded` (from the composable's `isOpen`), not
+- **Chevron flip** (`scaleY(-1)`, was `rotate(180deg)` until 2026-10-07) keys off the trigger's `aria-expanded` (from the composable's `isOpen`), not
   `:has(...:popover-open)`, so it also works without the Popover API (changed 2026-10-05).
 - **No native `<select>`/`appearance: base-select` involved** — this is a from-scratch popover
   listbox, not a styled native select, so it doesn't inherit `InputSelectCore`'s WebKit
@@ -217,3 +262,7 @@ Quick reference:
 - **Not a form field** — `SelectMenu` has no `fieldHasError`/`theme`/`inputVariant` props like the
   `05.forms` inputs. Use `InputSelectCore` instead for an actual form field that needs validation
   state and native `<select>` semantics.
+- **2026-10-08 stress-test pass**: root `max-inline-size: 100%` (a long trigger label overflowed
+  narrow containers instead of truncating), popover `--select-menu-popover-max-width` and
+  `flip-inline` fallbacks (a long option made the menu wider than the viewport), option labels wrap
+  with a `--select-menu-item-label-line-clamp` token instead of `nowrap`.

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

@@ -99,6 +99,6 @@ const responsiveNavLinks = {
 
 ## Migration notes
 
-- Consuming layouts previously assembling `PageRow` + `SkipLinks` + `ResponsiveHeader` (or `TabNavigation`) by hand can switch to `SiteHeader` directly; the two `styleClassPassthrough` props map 1:1 onto the two independent passthrough hooks that pattern used.
-- `TabNavigation`'s `NavItemData` shape (`{ main: [{ text, href, iconName, cssName }] }`) is **not** the same shape as `ResponsiveHeaderProp` (`{ groupKey: [{ name, path, childLinksTitle, childLinks }] }`) — migrating a `TabNavigation` consumer means reshaping the nav data, not just swapping the component. `TabNavigation`'s `navAlign` prop has no `SiteHeader` equivalent since `ResponsiveHeader`'s layout is fixed (branding column + nav column).
+- Consuming layouts previously assembling `PageRow` + `SkipLinks` + `ResponsiveHeader` (or the removed `TabNavigation`) by hand can switch to `SiteHeader` directly; the two `styleClassPassthrough` props map 1:1 onto the two independent passthrough hooks that pattern used.
+- `TabNavigation` (removed 2026-10-07) took `NavItemData` (`{ main: [{ text, href, iconName, cssName }] }`, also removed), which is **not** the same shape as `ResponsiveHeaderProp` (`{ groupKey: [{ name, path, childLinksTitle, childLinks }] }`): migrating means reshaping the nav data, not just swapping the component. See "Migrating from TabNavigation" in `responsive-header.md`. Its `navAlign` prop has no `SiteHeader` equivalent since `ResponsiveHeader`'s layout is fixed (branding column + nav column).
 - Requires the consuming layout's main/footer regions to carry `id="main-content"` / `id="footer-content"` — same requirement as using `SkipLinks` directly.

package/.claude/skills/components/tabbed-content.md

@@ -0,0 +1,300 @@
+---
+name: TabbedContent
+description: TabbedContent tab list/panel widget (was TabsCore) — indexed dynamic slots, arrow-key navigation, moving hover/active/underline indicators, CSS tokens
+type: reference
+---
+
+# TabbedContent
+
+> **Renamed 2026-10-07:** `TabsCore` → `TabbedContent`, moved from `01.atoms/navigation/tabs/` to
+> `01.atoms/tabbed-content/`. Root class `.tabs-core` → `.tabbed-content`; inner classes
+> `.tabs-list` → `.tabbed-content-list`, `.tabs-list-item` → `.tabbed-content-trigger`,
+> `.nav__hovered`/`.nav__active`/`.nav__active-indicator` → `.tabbed-content-indicator-hover`/
+> `-active`/`-underline`, `.tab-content-wrapper` → `.tabbed-content-panels`, `.tab-content` →
+> `.tabbed-content-panel`. Tokens keep their `--tabs-*` names. Slot names are unchanged.
+
+## Overview
+
+`TabbedContent` renders a WAI-ARIA tablist and its panels from indexed slots. The number of tabs is
+set via `itemCount`; each tab's trigger and content come from `tab-{n}-trigger`/`tab-{n}-content`
+slots. Indexed slots (rather than named dynamic slots) are used deliberately: `itemCount` is needed
+for ARIA linking across the two parallel loops (triggers and panels), not just the slot loop itself.
+
+Moving decorators track pointer/keyboard state: a hover highlight, an active-tab highlight, a
+thick underline/sideline under the active tab, and a thin one (`--tabs-hover-underline-indicator-height`,
+default `0.1rem`, added 2026-10-07) following the hovered tab. `trackHover` / `trackActive` /
+`trackIndicator` turn them off; the hover underline needs both `trackHover` and `trackIndicator`.
+
+Not navigation: for page/site navigation use `ResponsiveHeader` (which replaced `TabNavigation`).
+
+**Location**: `app/components/01.atoms/tabbed-content/`
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `itemCount` | `number` | — | **Required.** Number of tabs; drives both slot loops. Rounded down; 0, negative or `NaN` renders no tabs. Can change after mount (the active tab is kept if it still exists, otherwise the first tab becomes active). |
+| `axis` | `"x" \| "y"` | `"x"` | Horizontal row or vertical column. Also sets `aria-orientation` and which arrow keys move between tabs. Reactive. |
+| `transitionDuration` | `number` | `200` | ms duration of the moving indicators. Negative values clamp to 0. Reactive. |
+| `trackHover` | `boolean` | `true` | Moving hover highlight. Reactive. |
+| `trackActive` | `boolean` | `true` | Moving active-tab highlight. Reactive. |
+| `trackIndicator` | `boolean` | `true` | Moving underline/sideline. Reactive. |
+| `overflowMode` | `"menu" \| "scroll"` | `"menu"` | `axis="x"` only. `menu`: tabs that don't fit collapse from the end into a "More" button and menu (added 2026-10-07). `scroll`: the tab row scrolls sideways inside itself. Reactive. |
+| `ariaLabel` | `string` | `"Tabs"` | `aria-label` on the tablist; override for localisation. |
+| `moreLabel` | `string` | `"More tabs"` | Accessible name of the More button and its menu; override for localisation. |
+| `moreIcon` | `string` | `"lucide:ellipsis"` | Icon on the More button. |
+| `moreActiveIcon` | `string` | `"lucide:chevron-down"` | Icon after the active tab's label on the More button while that tab is collapsed. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Classes on the root `.tabbed-content` (was the tab list before 2026-10-07). |
+
+## Slots
+
+For each index `0..itemCount-1`:
+
+- `tab-{n}-trigger` — content of the tab button. May contain icons or other elements; a click
+  anywhere inside the button activates the tab.
+- `tab-{n}-content` — content of that tab's panel.
+
+```vue
+<TabbedContent :item-count="2" aria-label="Product details">
+  <template #tab-0-trigger>Overview</template>
+  <template #tab-0-content>Overview content…</template>
+  <template #tab-1-trigger>Specs</template>
+  <template #tab-1-content>Specs content…</template>
+</TabbedContent>
+```
+
+## Accessibility behaviour
+
+- `role="tablist"` is a `<div>` that owns the `role="tab"` buttons directly (it used to be a
+  `<ul>` with plain `<li>`s in between, an ARIA required-children violation, with the indicator
+  `<div>`s injected into the list by JS). Indicators are `aria-hidden` `<span>`s rendered by the
+  template.
+- `aria-orientation` follows `axis`.
+- Each trigger has `aria-controls` pointing at its panel; each panel has `aria-labelledby` pointing
+  at its trigger. IDs are prefixed with `useId()`, so several instances on one page don't clash
+  (before 2026-10-07 every instance used `tab-0-trigger` etc.).
+- Inactive panels carry the `hidden` attribute; the first panel is visible in the SSR markup.
+  Panels have `tabindex="0"` so keyboard users can reach scrollable panel content.
+- Roving tabindex: only the active trigger has `tabindex="0"`.
+- Arrow keys move focus and activate the target tab (automatic activation): `ArrowLeft`/`ArrowRight`
+  on `axis="x"`, `ArrowUp`/`ArrowDown` on `axis="y"`, wrapping at the ends; `Home`/`End` jump to
+  the first/last tab. Not mirrored for RTL.
+- Focus ring: `--tabs-focus-ring-colour` (default `--theme-border-focus`) on triggers and panels.
+
+## Overflow menu (`overflowMode="menu"`, default, since 2026-10-07)
+
+- On `axis="x"`, a ResizeObserver on the bar and the tablist measures the tabs (widths cached
+  while each is visible) and collapses the ones that don't fit, from the end, into a "More" button
+  at the end of the tab row (`--tabs-more-margin-inline-start: auto`; `0` puts it straight after
+  the last visible tab). Collapsed triggers get `hidden`, so they leave the tablist; the menu lists
+  them as `role="menuitemradio"` rows (re-rendering each tab's own `tab-{n}-trigger` slot), with
+  `aria-checked` on the active one. Picking one activates that tab and returns focus to the
+  More button.
+- The More button is outside `role="tablist"` (`aria-haspopup="menu"`, `aria-label` from
+  `moreLabel`). While nothing has overflowed it stays in the DOM but idle (invisible,
+  `tabindex="-1"`) so its width can be measured.
+- When the active tab is collapsed, the More button shows that tab's own trigger slot plus a
+  chevron (instead of `⋯`), gets `.is-active` and the active/hover indicators sit on it. A
+  ResizeObserver on the button re-measures, so if the wider button no longer fits, the tab before
+  it moves into the menu (and comes back when a visible tab is picked). The button has no
+  `aria-label`: `moreLabel` is visually hidden text inside it, so its name ("Shipping, More tabs")
+  always contains the visible label (WCAG 2.5.3). Trigger slot content renders up to three times
+  (tab, menu row, More button), so don't put `id`s in it.
+- Indicators sit on the More button while the active tab is collapsed (`useTabs` swaps any
+  hidden tab for `[data-more-trigger]` when positioning). Arrow keys move between visible tabs only, and the first visible tab keeps `tabindex="0"` so
+  the tablist stays reachable with Tab.
+- The popover uses `useAnchoredPopover` (Popover API + anchor positioning, with the Safari 16/17
+  fallbacks), like `SelectMenu` and `ActionMenu`. Menu keys: Arrow Up/Down (wrapping),
+  Home/End, Escape (light dismiss), Tab closes.
+- Not on `axis="y"`: a column doesn't run out of width.
+
+## Layout under hostile data
+
+- With `overflowMode="scroll"` the tab row scrolls sideways inside itself; the indicators scroll
+  with it. In both modes triggers never shrink, and wrap their label past
+  `--tabs-list-item-max-inline-size` (`24rem`).
+- On `axis="y"` the tab column is capped at `--tabs-axis-y-list-max-inline-size` (`50%`).
+- Panels wrap unbroken strings (`overflow-wrap: anywhere`).
+- No line-clamp token: trigger and panel text is consumer slot markup, so the consumer controls it.
+
+## CSS custom properties
+
+See `CONSUMER-STYLING.md` in the component folder for the full `--tabs-*` token API. Colour
+defaults come from the `--theme-*` slots (changed 2026-10-07, were fixed `--slate-*` steps with a
+dark panel).
+
+## useTabs
+
+`app/composables/useTabs.ts` drives the behaviour and is only used by this component. Its nav ref
+is `.tabbed-content-bar` (the indicators' positioning box); it also exposes `activeIndex` and
+`activateTabByIndex()` for the More menu. It takes
+`axis`, `transitionDuration` and `trackHover` as getters (read at use time, so prop changes apply),
+and exposes `refreshTabs()`, which the component calls on mount and after any change to the tab
+count, axis or indicator props. Click/hover handlers use `event.currentTarget` (the button), not
+`event.target`, so clicking an icon inside a trigger works. Panels are matched to triggers by
+`data-tab-index`, not by position in the `v-for` ref array, since Vue doesn't keep that array in
+source order when the list changes.
+
+## Indicator motion: edge insets (2026-10-08)
+
+`useTabs.placeIndicator(kind, animate)` writes each indicator's two edges as insets from the
+bar's start/end along the axis (`--_{kind}-start` / `--_{kind}-end`), and the CSS transitions
+`left`/`right` (or `top`/`bottom`) separately. Moving forward, the start edge gets a delay of one
+duration (`--_{kind}-start-delay`); moving back, the end edge does. So the leading edge moves first
+and the trailing edge catches up: the same stretch effect as before, symmetric both ways, with no
+settle timer. CSS retargets each edge from its current position, so a quick second move can't
+pull an edge backwards. Hover and active have separate duration/delay variables.
+
+This replaced a `translate` + `scale` model (a bar-wide box translated to the tab's left and
+scaled to its width, plus a timeout to settle after a stretch, and one shared
+`--_transition-duration`). Rightward moves animated both properties together in the settle step,
+and the indicator visibly stepped back mid-move (reported for hover, then n to n+x clicks); the
+computed values were always correct, the composition wasn't. Avoid reintroducing a transform
+pair for this.
+
+## Label colour under the sliding highlight (2026-10-08)
+
+With `trackActive`, `useTabs` re-checks every animation frame while the active indicator
+transitions (`trackCoverage`, for `transitionDuration` + 50ms) which visible tabs and the More
+button the indicator (`[data-active-indicator]`) covers by at least half, and toggles
+`data-under-active` on them (an attribute, not a class, so Vue's own class binding on the More
+button can't wipe it). CSS under `.tracks-active` colours by that attribute rather than
+`aria-selected`. The coverage window only ever extends (`coverageUntil`): a refresh landing
+mid-move (e.g. the More button resizing straight after a click) used to restart it with zero
+length, cancelling the per-frame checks while the highlight was still sliding and leaving stale
+colours (dark selected label, invisible neighbour). A More-button resize also re-places both
+indicators (`syncIndicators(true)`), since its box moves even when no tab changes sides, and an
+overflow change refreshes with `refreshTabs(true)` so an in-flight move retargets instead of
+snapping. This replaces the per-component timing trick `TripleToggleSwitch` uses (swap
+colour at half the slide), which only works for single-step moves; a tab jump passes under
+several labels.
+
+## Migration note (2026-10-07)
+
+Fixed during the compliance pass that renamed it:
+
+- Duplicate IDs across instances (above).
+- `event.target` in the click handler: clicking an element inside a trigger set the active tab to
+  that inner element, so no panel matched and every panel was hidden.
+- `axis`, `transitionDuration` and the `track*` flags were read once at setup, and a changed
+  `itemCount` was never picked up (new tabs had no roving tabindex and weren't navigable).
+- Dark-on-dark panel content by default, near-invisible focus ring, `styleClassPassthrough` on
+  the wrong element, unprefixed inner class names (pitfall #16).
+- A long label or many tabs pushed the page sideways.
+
+## Migration note (2026-09-15)
+
+Previously lived at `tabs/TabsCore.vue` with options-style `defineProps`, no tier folder, and
+several defects fixed in this pass:
+
+- `querySelectorAll("[data-nav-item")` was missing its closing `]` — an invalid selector that
+  some browsers tolerate but that throws in strict DOM implementations (including this repo's test
+  environment). Fixed to `"[data-nav-item]"`.
+- `aria-labelledby="channel-name"` was hardcoded on the tablist, pointing at an id that doesn't
+  exist anywhere in this library. Replaced with the new `ariaLabel` prop.
+- `border-bottom`/`border-left` on the tab list referenced `--_tabs-border-bottom`, a private CSS
+  variable that was never set anywhere (dead reference — the border never rendered). Promoted to
+  the public `--tabs-nav-border` token with a real default.
+- `tag`, `trackHover`, `trackActive`, and `trackIndicator` were all declared props with no effect
+  anywhere in the component or its composable (`useTabs`). `tag` had no coherent purpose (triggers
+  were always hardcoded `<button>`s) and was removed; the three `track*` flags were wired up to
+  actually gate their respective decorator elements, since removing them would have been a bigger
+  behavioural change than making them work as their names already implied.
+- Almost every colour/spacing/typography value in the `<style>` block was hardcoded with no
+  override hook at all (not even a private token) — promoted to public `--tabs-*` tokens.
+
+## Performance notes (2026-09-15)
+
+`useTabs` had a few real perf issues, fixed alongside the migration:
+
+- **Layout thrashing**: `moveActiveIndicator`/`moveHoveredIndicator`/`setFinalActivePositions`/
+  `setFinalHoveredPositions` used to interleave `offsetLeft`/`offsetWidth`/etc. reads with
+  `style.setProperty` writes, forcing a synchronous reflow between each pair. All layout reads are
+  now batched into local variables before any writes happen.
+- **`@mouseover` → `@mouseenter`**: the hover trigger listener used `mouseover`, which bubbles and
+  re-fires as the pointer crosses any child element inside the button. `mouseenter` fires exactly
+  once per tab entered.
+- **Debounced settle timers**: `moveActiveIndicator`/`moveHoveredIndicator` schedule a `setTimeout`
+  to snap the indicator to its exact final position once the CSS transition ends. Previously each
+  call scheduled a new timeout without clearing the last one, so moving the pointer quickly across
+  several tabs stacked up redundant pending timeouts. Now the previous timeout is cleared before
+  scheduling the next, and both are cleared in `onUnmounted`.
+- `handleTransitioningClass` called `.indexOf()` on the same two tabs repeatedly inside its loop
+  condition and body — now computed once per call.
+- `previousActiveTab` used `useState("previousActiveTab", ...)` with a fixed, unscoped key — every
+  `TabsCore` instance on a page would have shared that one piece of state. Not actually a
+  performance issue, but a correctness bug found while auditing this file; fixed by switching to a
+  plain per-instance `ref`, since this state doesn't need SSR/hydration sharing.
+
+## Fixed: hover/active label text could become unreadable against the indicator (2026-09-15)
+
+`--tabs-hover-indicator-text-colour` and `--tabs-active-indicator-text-colour` were set as `color`
+on `.nav__hovered`/`.nav__active` — decorative, empty, absolutely-positioned divs with no text
+content, so that `color` was dead CSS with no visible effect. The actual tab label
+(`.tabs-list-item`) used one shared `--tabs-list-item-colour-selected` token for hover, active,
+*and* transitioning alike, regardless of which of the two (potentially differently-coloured)
+indicator backgrounds was actually behind it at that moment. A consumer overriding only the hover
+indicator's background (or the active one) had no working lever to keep the label readable against
+it, and could end up with text the same colour as the background sliding behind it — this was the
+original defect noticed during this component's initial authoring, reported as "the button text
+became the same colour as the track item background and became invisible."
+
+Fixed by removing the dead `color` declarations from the two decorator divs and splitting
+`.tabs-list-item`'s combined `:hover, [aria-selected="true"], .transitioning` rule so hover uses
+`--tabs-hover-indicator-text-colour` and active uses `--tabs-list-item-colour-selected` falling
+back to `--tabs-active-indicator-text-colour` — each state's text colour now tracks the background
+actually behind it. See `CONSUMER-STYLING.md`'s "Tab-label text colour tracks the indicator behind
+it" section: overriding an indicator background without its matching text-colour token can still
+produce poor contrast (same tradeoff as any two independently-set colour tokens) — the fix makes
+the tokens functional, it doesn't auto-compute contrast.
+
+## Fixed: intermediate tab labels could go invisible during a multi-tab jump (2026-09-15)
+
+The first fix above wasn't the whole story. The exact repro that surfaced the rest of it: with tab
+1 active, hover then click tab 5 — the tabs in between briefly lost all visible text. Going the
+other direction (tab 5 active, hover then click tab 1) looked fine.
+
+Cause: `useTabs` had a `handleTransitioningClass` helper that added a `.transitioning` class to
+every tab spanned by a jump (previously shared by the `[aria-selected="true"]` colour rule fixed
+above), on the assumption the sliding indicator visually covers every spanned tab for the whole
+transition — so it force-applied the active text colour to all of them, for the full
+`transitionDuration`. It doesn't cover them the whole time: the indicator's "grow from anchor" CSS
+transition (see `moveActiveIndicator`/`moveHoveredIndicator`) keeps the box's leading edge pinned
+at the *old* tab's position on a forward move and only grows its width, so it only gradually sweeps
+across later tabs — a tab several positions away isn't actually covered until *late* in the
+transition. Recolouring it to the active text colour from the very start meant its label matched
+neither its own background nor the not-yet-arrived indicator, going invisible. A backward move
+animates position and width toward their final values together, so the box's rendered coverage is
+more consistent throughout — which is why that direction looked fine and made the bug easy to miss
+without a specific repro.
+
+Fixed by removing `handleTransitioningClass` and the `.transitioning` class entirely — it had no
+other purpose. Tabs spanned by a jump now keep their normal (inactive) styling throughout; only the
+newly-active tab (`[aria-selected="true"]`) and the currently-hovered tab (`:hover`) get their
+special colours. See `CONSUMER-STYLING.md`'s "Tabs spanned by a jump keep their normal styling".
+
+## Fixed: passed-over tab text still invisible under the active indicator specifically (2026-09-15)
+
+Removing `.transitioning` (previous fix) uncovered a second, pre-existing defect that
+`.transitioning`'s forced recolour had been accidentally masking the whole time: a non-active tab's
+normal text colour (`--tabs-list-item-colour`) was **exactly the same value** as the active
+indicator's background (`--tabs-active-indicator-colour`, same default) — this collision existed in
+the very first authored version of this component, not something introduced by any migration
+change. So whenever the active pill visually passes under (or briefly sits under) any tab that
+isn't itself marked active — which happens on every transition, single-step or distant, in either
+direction — that tab's text became literally the same colour as the background sliding beneath it.
+`--tabs-hover-indicator-colour`'s default never had this problem since it doesn't coincide with the
+inactive text default.
+
+Fixed by changing `--tabs-active-indicator-colour`'s default to one step in from the extreme,
+still clearly the boldest of the three indicator colours, but no longer numerically identical to
+`--tabs-list-item-colour`'s default. `--tabs-active-indicator-text-colour`/
+`--tabs-list-item-colour-selected` (used by the truly active tab) still contrast fine against the
+new value. See `CONSUMER-STYLING.md` for the note on keeping these two tokens from colliding again
+if you override either one.
+
+## Colour token defaults (2026-10-07)
+
+Colour defaults were flat `--slate-*` steps from 2026-09-15 (when `light-dark()` pairs were
+dropped) until 2026-10-07, when they moved to the `--theme-*` slots. Light-only, like the rest of
+the library.

package/.claude/skills/composable-anchor-scroll.md

@@ -64,26 +64,27 @@ onMounted(() => {
 >{{ section.label }}</a>
 ```
 
-### Active state in TabNavigation
+### Active state in ResponsiveHeader
 
-`TabNavigation` handles `activeHash` internally for hash nav items. No extra work needed —
-just pass anchor hrefs in `navItemData` and the active indicator moves automatically on click
-and on initial load (defaulting to the first hash item when the URL has no hash).
+`ResponsiveHeader` handles `activeHash` internally for `#` nav items. No extra work needed —
+just pass anchor paths in `responsiveNavLinks` and the active indicator moves automatically on
+click and on initial load (defaulting to the first anchor item when the URL has no hash).
+(`TabNavigation` did the same until it was removed on 2026-10-07.)
 
 ---
 
 ## Usage patterns
 
-### 1. TabNavigation with a sticky site header
+### 1. ResponsiveHeader with a sticky site header
 
-`TabNavigation` accepts an `anchorScrollOffset` prop that is passed directly to `useAnchorScroll`.
+`ResponsiveHeader` accepts an `anchorScrollOffset` prop that is passed directly to `useAnchorScroll`.
 Pass a getter so the live header height is read at scroll time — this stays correct if the
 header resizes on different viewports.
 
 ```vue
 <header ref="headerRef">
-  <TabNavigation
-    :nav-item-data="navItemData"
+  <ResponsiveHeader
+    :responsive-nav-links="responsiveNavLinks"
     :anchor-scroll-offset="() => headerRef?.offsetHeight ?? 0"
   />
 </header>
@@ -92,18 +93,18 @@ header resizes on different viewports.
 ```ts
 const headerRef = ref<HTMLElement | null>(null);
 
-const navItemData = {
+const responsiveNavLinks = {
   main: [
-    { text: "About",    href: "#about" },
-    { text: "Services", href: "#services" },
-    { text: "Contact",  href: "#contact" },
-    { text: "Blog",     href: "/blog" },  // route — NuxtLink handles as normal
+    { name: "About",    path: "#about" },
+    { name: "Services", path: "#services" },
+    { name: "Contact",  path: "#contact" },
+    { name: "Blog",     path: "/blog" },  // route — NuxtLink handles as normal
   ],
 };
 ```
 
 **CSS alternative** — if you want all anchor links site-wide to respect the sticky header
-(not just the ones inside `TabNavigation`), add `scroll-padding-top` to `html` instead and
+(not just the ones inside `ResponsiveHeader`), add `scroll-padding-top` to `html` instead and
 skip the prop:
 
 ```css
@@ -290,4 +291,4 @@ takes effect immediately on the next click.
 - **SSR** — both `handleNavClick` and `scrollToAnchor` guard with `import.meta.server` and return
   early. No special SSR setup is needed.
 - **Multiple instances** — each call to `useAnchorScroll` is independent. You can run a sticky
-  section nav alongside a `TabNavigation` on the same page with different offsets.
+  section nav alongside a `ResponsiveHeader` on the same page with different offsets.

package/.claude/skills/index.md

@@ -33,6 +33,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── theming-partial-override.md      — override a specific colour token category (palette, buttons, inputs) without a full theme replacement
 ├── theming-form-geometry-tokens.md  — non-colour form/button/input tokens (padding, border-radius, gaps): full inventory, why partial override doesn't need duplicating the source files
 ├── theming-component-token-pattern.md — standard shape for overridable component colours: public token + inline fallback, no bare var()/no private-only indirection; the three tiers (theme slots / cross-component families / component-scoped); line-clamp tokens for overflowing text; rollout status
+├── theming-status-tokens.md        — global --status-* colours (success/warning/danger/info/neutral: solid + surface + text), which components read them, how to override once for the whole library
 ├── theming-dark-mode.md            — add a dark scheme in a consumer app (layer is light-only): enable plumbing, full dark token set without light-dark(), light-dark() alternative, light-only pinning
 ├── colour-scheme-disable.md         — disable light/dark scheme support in a consumer app
 ├── component-dynamic-slots.md        — named dynamic slots ($slots iteration) vs indexed dynamic slots (itemCount pattern)
@@ -62,7 +63,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── composable-zod-validation.md      — useZodValidation: schema-driven form validation, error binding, submit flow, API error push
 ├── composable-colour-scheme.md       — useColourScheme: reactive light/dark/auto switching, localStorage persistence, runtime config
 ├── composable-dialog-controls.md     — useDialogControls: single-call setup with config object, openDialog/closeDialog API, confirm/cancel callbacks
-├── composable-anchor-scroll.md       — useAnchorScroll: smooth anchor scrolling with reduced-motion support, dynamic offset, and TabNavigation integration
+├── composable-anchor-scroll.md       — useAnchorScroll: smooth anchor scrolling with reduced-motion support, dynamic offset, and ResponsiveHeader integration
 ├── composable-tooltips-guide.md      — useTooltipsGuide: sequential popover guide with auto-start, dismiss-to-advance, manual controls
 ├── composable-cookie-consent.md      — useCookieConsent: unset/granted/denied state, cookie persistence, wraps @nuxt/scripts' useScriptTriggerConsent
 ├── composable-analytics.md           — useAnalytics: provider-agnostic trackEvent/page-view tracking (google-analytics only implemented), consent-gated, single call site for setup + firing events
@@ -90,7 +91,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── service-detail.md            — ServiceDetail: full service detail page (hero banner, sticky sidebar booking card + related services, closing CTA), headerTag vs subheadingTag split, book-cta/sidebar-note/related-service/final-cta slots
     ├── breadcrumb.md                — Breadcrumb: items (BreadcrumbItem[]) trail, link vs current-page text, CSS token API
     ├── skip-links.md                — SkipLinks: focus-revealed accessibility skip-nav, links (SkipLink[]) data-driven, homeLink slot, CSS token API
-    ├── tabs-core.md                 — TabsCore: tablist from indexed slots (itemCount), arrow-key nav, moving hover/active/underline indicators, CSS token API
+    ├── tabbed-content.md            — TabbedContent (was TabsCore): tablist + panels from indexed slots (itemCount), arrow-key nav, moving hover/active/underline indicators, CSS token API
     ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
     ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, contentIsOnTop overlay mode, slots (summary/icon/content), ARIA wiring, CSS token API
@@ -107,7 +108,6 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── wipe-away-vertical.md   — WipeAwayVertical: scroll-driven vertical wipe-away effect, pure-CSS grid overlay (no JS), indexed dynamic slots, sticky-centering-via-calc gotcha, CSS tokens
     ├── marquee-scroller.md     — MarqueeScroller: infinite logo/badge scroller, per-item dynamic slots (marqueeData id), hover/focus/keyboard pause, reduced-motion, CSS tokens
     ├── rotating-carousel-image.md — RotatingCarouselImage: 3D rotating image carousel, scroll-parallax tilt, focus/keyboard/hover pause, reduced-motion, CSS tokens
-    ├── tab-navigation.md       — TabNavigation (DEPRECATED, use ResponsiveHeader): horizontal tab nav with CSS anchor-positioning indicators, anchor scroll, burger collapse, full CSS token API
     ├── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens
     ├── display-qr-code.md      — DisplayQrCode: QR code SVG from a string value, colour/size/variant/radius props, currentColor default
     ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, error state, visibility/route/KeepAlive lifecycle, media stream cleanup
@@ -120,7 +120,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── select-menu.md          — SelectMenu: v-model single-select listbox popover (ActionMenu's popover mechanics, InputSelectCore's selected-option semantics), icon/text/chevron trigger toggles, checkmark on selected option, options-array driven, full CSS token API
     ├── display-dialog.md       — DisplayDialog: native <dialog> overlay, 5 variants (dialog/modal/confirm/alert/fullscreen), useDialogControls integration, CSS token API
     ├── display-chip.md         — DisplayChip: status indicator chip overlay, CSS trig positioning, circle/square shapes, status colours, icon/label content
-    ├── display-pill.md         — DisplayPill: pill/badge label with icon slot, 6 variants, 3 sizes, reversible order, --display-pill-* tokens (renamed from --theme-pill-*; variants fall back to base colour tokens)
+    ├── display-pill.md         — DisplayPill: pill/badge label with icon slot, 6 variants, 3 sizes, reversible order, --display-pill-* tokens (variants fall back to base colour/border/ring tokens); data-size/data-variant/data-reversed hooks (2026-10-08, were bare classes), label line-clamp token, -02 ring and outlined-monochrome recipes, StressTest story
     ├── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay), CSS tokens
     ├── samaritan-prompt.md — SamaritanPrompt + SamaritanPromptMixed: animated text prompts, typewriter/word-pulse effects, MessageConfig API, pause on hover, aria-live, CSS tokens
     ├── display-toast.md          — DisplayToast (standalone v-model) + DisplayToastProvider + useToastQueue (app-wide queue): stacking, FLIP dismiss, maxVisible, SemanticTheme × 4, masked SVG glass variant