srcdev-nuxt-components 9.5.7 → 9.6.1

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

@@ -1,145 +0,0 @@
-# SiteNavigation
-
-## Overview
-
-`SiteNavigation` is a responsive site-wide navigation component. It renders a horizontal link list on wide viewports and automatically collapses to a burger-menu + slide-down panel on narrow viewports. Collapse is driven by a `ResizeObserver` that compares the list's natural `scrollWidth` against the nav container's `clientWidth` — no breakpoint prop needed.
-
-Both the horizontal list and the panel include animated active/hover indicator decorators (underline indicator + background highlight) that snap into position using CSS custom properties set via JavaScript.
-
-## Component location
-
-`app/components/02.molecules/navigation/site-navigation/SiteNavigation.vue`
-
-## Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `navItemData` | `NavItemData` | — (required) | Navigation items — see type below |
-| `navAlign` | `"left" \| "center" \| "right"` | `"left"` | Alignment of the horizontal nav list |
-| `ariaLabel` | `string` | `"Site navigation"` | aria-label on the root `<nav>` landmark — override for localisation |
-| `openMenuLabel` | `string` | `"Open navigation menu"` | Burger button text (screen-reader) while closed — override for localisation |
-| `closeMenuLabel` | `string` | `"Close navigation menu"` | Burger button text (screen-reader) while open — override for localisation |
-| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root `<nav>` |
-
-## NavItemData type
-
-**Within the layer:**
-
-```ts
-import type { NavItemData } from "~/types/components/nav-item.d";
-```
-
-**In a consuming app:**
-
-```ts
-import type { NavItemData } from "srcdev-nuxt-components";
-```
-
-```ts
-const navItemData: NavItemData = {
-  main: [
-    { text: "Home",     href: "/" },
-    { text: "About",    href: "/about" },
-    { text: "Services", href: "/services", cssName: "is-featured" },
-    { text: "Contact",  href: "/contact", iconName: "heroicons:envelope", isExternal: false },
-  ],
-};
-```
-
-`NavItem` fields:
-
-| Field | Type | Description |
-|---|---|---|
-| `text` | `string` | Link label |
-| `href` | `string` | Link destination |
-| `isExternal` | `boolean?` | Passed to NuxtLink `:external` — opens in new tab |
-| `iconName` | `string?` | Iconify icon name rendered before the label |
-| `cssName` | `string?` | CSS class applied to the `<li>` element |
-
-## Basic usage
-
-```vue
-<SiteNavigation :nav-item-data="navItemData" nav-align="left" />
-```
-
-Always use hyphenated prop names in templates (ESLint enforces this).
-
-## CSS token API
-
-Set these tokens on a parent element (e.g. your `<header>`) to theme the navigation.
-
-```css
-.your-header {
-  /* ── Decorators ────────────────────────────────────── */
-  --site-nav-decorator-indicator-color: var(--rose-05);  /* underline bar */
-  --site-nav-decorator-hovered-bg:      transparent;     /* hover pill behind a link */
-  --site-nav-decorator-active-bg:       transparent;     /* active pill behind a link */
-
-  /* ── Horizontal nav links ──────────────────────────── */
-  --site-nav-link-color:        var(--warm-01);
-  --site-nav-link-hover-color:  var(--rose-04);
-  --site-nav-link-active-color: var(--rose-05);
-  --site-nav-link-size:         1.6rem;
-  --site-nav-link-weight:       400;
-  --site-nav-link-tracking:     0.06em;
-  --site-nav-gap:               2.2rem;
-  --site-nav-transition:        250ms ease;
-
-  /* ── Mobile panel ──────────────────────────────────── */
-  --site-nav-panel-bg:                  var(--page-bg, #1a1614);
-  --site-nav-panel-border-color:        color-mix(in oklch, var(--rose-05) 35%, transparent);
-  --site-nav-panel-link-color:          var(--warm-01);
-  --site-nav-panel-link-hover-color:    var(--rose-04);
-  --site-nav-panel-link-active-color:   var(--rose-05);
-  --site-nav-panel-padding-block:       1.4rem;
-  --site-nav-panel-padding-inline:      1.5rem;
-  --site-nav-panel-slide-duration:      350ms;
-  --site-nav-panel-slide-easing:        cubic-bezier(0.4, 0, 0.2, 1);
-  --site-nav-panel-decorator-indicator-color: var(--rose-05);
-  --site-nav-panel-indicator-left:      0;      /* position the panel indicator bar */
-  --site-nav-panel-indicator-right:     auto;
-
-  /* ── Burger button ─────────────────────────────────── */
-  --site-nav-burger-color:      var(--warm-01);
-  --site-nav-burger-width:      22px;
-  --site-nav-burger-height:     1.5px;
-  --site-nav-burger-gap:        5px;
-  --site-nav-burger-transition: 300ms ease;
-
-}
-```
-
-The backdrop is teleported to `<body>`, so its tokens only land when set on `:root`/`html`/`body`,
-not on your header:
-
-```css
-:where(html) {
-  --site-nav-backdrop-bg:       oklch(0% 0 0 / 55%);
-  --site-nav-backdrop-blur:     3px;
-  --site-nav-backdrop-duration: 350ms;
-  --site-nav-backdrop-z-index:  10;  /* keep your header above this */
-}
-```
-
-Full reference: `app/components/02.molecules/navigation/site-navigation/CONSUMER-STYLING.md`.
-
-## Behaviour notes
-
-- **Collapse detection**: `ResizeObserver` fires on every container resize. The list's `scrollWidth` is cached whenever the list is in the DOM; that cached value is compared against the container's `clientWidth` to set `isCollapsed`.
-- **isLoaded state**: The component uses `useState("site-nav-loaded")` — a Nuxt shared state — to gate visibility until the first measurement is complete, preventing a flash of the wrong nav state on load. The nav renders `opacity: 0` until `is-loaded` is applied.
-- **Teleport**: The backdrop overlay is teleported to `<body>` via `<Teleport>` and is only mounted when `isCollapsed && isLoaded`.
-- **Panel inert**: The panel div (id `site-nav-panel-{useId}`, unique per instance) receives `:inert="!isMenuOpen ? true : undefined"` — it is inert (keyboard/pointer-inaccessible) when closed.
-- **Decorator init**: `initNavDecorators()` and `initPanelDecorators()` inject `<li>` elements with CSS-driven indicator `<div>`s. They query `[data-nav-item]` / `[data-panel-nav-item]` to find links, and look for `router-link-active` to set the initial active position.
-
-## Accessibility
-
-- Root `<nav>` has `aria-label` from the `ariaLabel` prop (default `"Site navigation"`).
-- Burger button text comes from `openMenuLabel`/`closeMenuLabel`, with `aria-expanded` (string `"true"/"false"`) and `aria-controls` pointing at the panel's per-instance id (was a fixed `site-nav-panel`, which collided when two navs were on one page; fixed 2026-09-27).
-- Backdrop and indicator `<li>` elements are `aria-hidden="true"`.
-- Panel div is `inert` when closed.
-
-## Related files
-
-- Type: `app/types/components/nav-item.d.ts`
-- Tests: `app/components/02.molecules/navigation/site-navigation/tests/SiteNavigation.spec.ts`
-- Story: `app/components/02.molecules/navigation/site-navigation/stories/SiteNavigation.stories.ts`

package/.claude/skills/components/tab-navigation.md

@@ -1,272 +0,0 @@
-# TabNavigation
-
-## Overview
-
-A responsive horizontal navigation bar with CSS anchor-positioning indicators, smooth anchor
-scroll, and a burger-menu collapse at narrow widths. Accepts both route links (`NuxtLink`) and
-hash anchors (`<a>`). Items are driven by a `NavItemData` object; the component only reads the
-`main` key.
-
----
-
-## Types
-
-Import from the layer package root — do **not** use `~/types/...` in consuming apps:
-
-```ts
-import type { NavItemData } from "srcdev-nuxt-components"
-```
-
-```ts
-interface NavItem {
-  text: string;
-  href?: string;
-  isExternal?: boolean; // adds target="_blank" rel behaviour via NuxtLink
-  iconName?: string;    // icon set name, rendered via <Icon>
-  cssName?: string;     // extra CSS class on the <li>
-}
-
-interface NavItemData {
-  [key: string]: NavItem[]; // component reads navItemData.main
-}
-```
-
----
-
-## Props
-
-| Prop (template form) | Type | Default | Notes |
-|---|---|---|---|
-| `nav-item-data` | `NavItemData` | required | Navigation link data — only `main` key is read |
-| `nav-align` | `"left" \| "center" \| "right"` | `"left"` | Positions the tab list within the nav container |
-| `anchor-scroll-offset` | `number \| (() => number)` | — | Pixel offset subtracted from scroll target; pass a getter so it is re-evaluated at click time |
-| `aria-label` | `string` | `"Site navigation"` | aria-label on the root `<nav>` landmark — override for localisation |
-| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root `<nav>` element |
-
----
-
-## Basic usage — route links
-
-```vue
-<TabNavigation :nav-item-data="navData" nav-align="center" />
-```
-
-```ts
-import type { NavItemData } from "srcdev-nuxt-components"
-
-const navData: NavItemData = {
-  main: [
-    { text: "Home", href: "/" },
-    { text: "About", href: "/about" },
-    { text: "Services", href: "/services" },
-    { text: "Contact", href: "/contact" },
-  ],
-}
-```
-
-Items without a leading `#` render as `NuxtLink`. The active indicator tracks the current route
-via `router-link-exact-active`.
-
----
-
-## Anchor scroll usage
-
-Hash-prefixed hrefs render as plain `<a>` elements to keep Vue Router out of the scroll path.
-Pass a getter for the offset so the sticky bar height is read at click time (not at mount).
-
-```vue
-<div ref="stickyRef" class="sticky-nav">
-  <TabNavigation
-    :nav-item-data="anchorData"
-    :anchor-scroll-offset="() => stickyRef?.offsetHeight ?? 0"
-  />
-</div>
-```
-
-```ts
-const stickyRef = ref<HTMLElement | null>(null)
-
-const anchorData: NavItemData = {
-  main: [
-    { text: "Overview", href: "#overview" },
-    { text: "Features", href: "#features" },
-    { text: "Pricing", href: "#pricing" },
-  ],
-}
-```
-
-Clicks are handled by `useAnchorScroll`. Respects `prefers-reduced-motion` — motion-sensitive
-users get an instant jump rather than smooth scroll. See the `composable-anchor-scroll.md` skill
-for the full composable reference.
-
-### Mixed navigation
-
-Route links and hash anchors can coexist in the same `navItemData`:
-
-```ts
-const navData: NavItemData = {
-  main: [
-    { text: "Home", href: "/" },          // NuxtLink
-    { text: "Overview", href: "#intro" }, // <a> + smooth scroll
-    { text: "Blog", href: "/blog" },      // NuxtLink
-  ],
-}
-```
-
----
-
-## Responsive collapse
-
-`useNavCollapse` measures the nav list on every resize. When the list overflows its container it
-is hidden and replaced with a burger button. The button opens a slide-down panel listing all items.
-
-The nav hides itself (opacity 0) until the first measurement completes to prevent a flash of the
-wrong state.
-
----
-
-## Alignment variants
-
-```vue
-<TabNavigation :nav-item-data="navData" nav-align="left" />   <!-- default -->
-<TabNavigation :nav-item-data="navData" nav-align="center" />
-<TabNavigation :nav-item-data="navData" nav-align="right" />
-```
-
-`center` and `right` use `margin-inline: auto` / `margin-inline-start: auto` on the `ul`.
-
----
-
-## CSS token API
-
-Set `--tab-nav-*` tokens on any ancestor element — no prop needed. See `CONSUMER-STYLING.md` in
-the component source folder for the full token reference.
-
-### Horizontal nav
-
-| Token | Default | Controls |
-|---|---|---|
-| `--tab-nav-link-color` | `var(--slate-01, currentColor)` | Link text colour |
-| `--tab-nav-link-hover-color` | `var(--slate-04, currentColor)` | Link hover colour |
-| `--tab-nav-link-active-color` | `var(--slate-01, currentColor)` | Active link colour |
-| `--tab-nav-link-size` | `1.6rem` | Font size |
-| `--tab-nav-link-weight` | `400` | Font weight |
-| `--tab-nav-link-tracking` | `0.06em` | Letter spacing |
-| `--tab-nav-gap` | `2.2rem` | Gap between items |
-| `--tab-nav-transition` | `250ms ease` | Colour fade on hover/active |
-
-### Indicator decorators
-
-| Token | Default | Controls |
-|---|---|---|
-| `--tab-nav-decorator-indicator-color` | `var(--slate-01, currentColor)` | Active underline bar colour |
-| `--tab-nav-decorator-hovered-bg` | `transparent` | Hover pill background (set non-transparent to enable) |
-
-### Mobile panel
-
-| Token | Default | Controls |
-|---|---|---|
-| `--tab-nav-panel-bg` | `var(--page-bg, #1a1614)` | Panel background |
-| `--tab-nav-panel-border-color` | `color-mix(in oklch, var(--slate-01) 35%, transparent)` | Panel top border |
-| `--tab-nav-panel-item-border` | `color-mix(in oklch, var(--slate-01) 8%, transparent)` | Item dividers |
-| `--tab-nav-panel-link-color` | `var(--slate-01, currentColor)` | Panel link colour |
-| `--tab-nav-panel-padding-block` | `1.4rem` | Link vertical padding |
-| `--tab-nav-panel-padding-inline` | `1.5rem` | Link horizontal padding |
-| `--tab-nav-panel-slide-duration` | `350ms` | Panel open/close duration |
-| `--tab-nav-panel-slide-easing` | `cubic-bezier(0.4, 0, 0.2, 1)` | Panel easing |
-
-### Burger button
-
-| Token | Default | Controls |
-|---|---|---|
-| `--tab-nav-burger-color` | `var(--slate-01, currentColor)` | Bar colour |
-| `--tab-nav-burger-width` | `22px` | Bar width |
-| `--tab-nav-burger-height` | `1.5px` | Bar height |
-| `--tab-nav-burger-gap` | `5px` | Gap between bars |
-| `--tab-nav-burger-transition` | `300ms ease` | Open/close animation |
-
-### Backdrop
-
-| Token | Default | Controls |
-|---|---|---|
-| `--tab-nav-backdrop-bg` | `oklch(0% 0 0 / 55%)` | Overlay colour |
-| `--tab-nav-backdrop-blur` | `3px` | Overlay blur |
-| `--tab-nav-backdrop-duration` | `350ms` | Overlay fade duration |
-
-### Page-scoped theme example
-
-```css
-/* Unscoped <style> in the consuming page */
-.services-page {
-  .tab-navigation {
-    --tab-nav-decorator-indicator-color: var(--brand-accent);
-    --tab-nav-decorator-hovered-bg: oklch(from var(--brand-accent) l c h / 0.1);
-    --tab-nav-link-active-color: var(--brand-accent);
-    --tab-nav-panel-bg: var(--page-bg);
-  }
-}
-```
-
----
-
-## Notes
-
-- Auto-imported in Nuxt — no manual import needed.
-- The indicator and hover pill use CSS Anchor Positioning and animate via `left`/`right` transitions
-  — set `--tab-nav-decorator-hovered-bg` to a semi-transparent colour to enable the pill; it is
-  invisible by default.
-- `--tab-nav-transition` controls only the link colour fade; the indicator slide animation is
-  internally managed and does not inherit this token.
-- The panel teleports its backdrop to `<body>` so it escapes any parent `overflow: hidden` or
-  stacking-context constraint.
-- `--tab-nav-panel-bg` should match `--page-bg` for a seamless panel appearance in the collapsed
-  state.
-
-## Known issue: SSR/hydration layout shift when the nav needs to collapse (2026-07-07)
-
-**Symptom:** on first page load (hard reload/direct navigation), the header briefly renders taller
-than its settled state, then shrinks — visibly shifting all content below it up. Most noticeable on
-short pages (little content below the fold makes the jump occupy a large fraction of the viewport),
-but the same underlying reflow happens on every page where the nav actually needs to collapse at
-the viewport's width; it's just less visible on long pages or when the timing happens to resolve
-before first paint.
-
-**Root cause:** `useNavCollapse`'s `isLoaded` ref (and therefore `isCollapsed`) can only be
-determined client-side — the server has no way to measure real DOM/viewport widths. So:
-
-```vue
-<ul v-if="!isCollapsed || !isLoaded" ...>
-```
-
-SSR and the very first client paint always render the **full, uncollapsed** `<ul>` (since
-`!isLoaded` is true pre-mount), regardless of whether it will actually fit. Once mounted,
-`checkOverflow()` runs (in `onMounted`, after `nextTick()`), and if the nav overflows, sets
-`isCollapsed = true` — swapping the full list out for the shorter collapsed/burger variant. That
-swap is what shrinks the header and shifts everything below it.
-
-Confirmed via `PerformanceObserver({type: "layout-shift"})` plus DOM `MutationObserver` tracing in a
-consuming app: the class mutation on `.tab-navigation` (adding
-`is-loaded is-animated`) lines up exactly with `.main-content`'s bounding-rect top moving by the
-header's full height delta, at a variable point (roughly 100ms–800ms after first paint depending on
-hydration timing) after first paint.
-
-**Candidate fixes (not yet implemented — pick up later):**
-
-1. **CSS-only collapse instead of JS-measured overflow.** Use a `@container` or `@media` breakpoint
-   to switch between the full nav and the burger button, so the correct variant renders on the very
-   first paint (both server and client agree, no measurement round-trip needed). Loses the
-   "collapse exactly when it overflows, regardless of item count" precision of the current
-   JS-measured approach, gains zero-reflow correctness. Probably the most robust fix if a
-   reasonably conservative breakpoint can be chosen.
-2. **Reserve height instead of eliminating the swap.** Give the header a `min-height` matching the
-   taller (uncollapsed) state so the swap doesn't change the header's box size — trades a visible
-   "jump" for a slightly awkward gap during the pre-collapse window, but never moves content below
-   it. Cheap, but doesn't fix the actual root cause, just its visible symptom.
-3. **Suppress the flash rather than the shift**, e.g. hide the header's nav content entirely
-   (`visibility: hidden` or `opacity: 0`) until `isLoaded` is true, then fade in — avoids showing
-   the "wrong" state at all, but delays when the nav becomes visible/interactive, and would need
-   care to avoid its own CLS/accessibility issues (e.g. focus order, screen readers encountering
-   hidden nav).
-4. Investigate whether a plausible default guess for `isCollapsed` could be derived from something
-   SSR does have access to (e.g. a `Sec-CH-Viewport-Width` client hint header, if the deployment
-   target reliably sends one) — likely not worth the complexity/fragility versus option 1.

package/.claude/skills/components/tabs-core.md

@@ -1,187 +0,0 @@
----
-name: TabsCore
-description: TabsCore tab list/panel widget — indexed dynamic slots, arrow-key navigation, moving hover/active/underline indicators, CSS tokens
-type: reference
----
-
-# TabsCore
-
-## Overview
-
-`TabsCore` renders a WAI-ARIA tablist 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 here deliberately — `itemCount` is needed
-for ARIA linking across the two parallel loops (triggers and panels), not just the slot loop
-itself.
-
-Three independent moving-highlight decorators track pointer/keyboard state: a hover highlight, an
-active-tab highlight, and an underline/sideline indicator — each can be turned off individually.
-
-## Props
-
-| Prop | Type | Default | Required |
-|------|------|---------|----------|
-| `itemCount` | `number` | — | **yes** — number of tabs; drives both slot loops |
-| `axis` | `"x" \| "y"` | `"x"` | no — horizontal row or vertical column layout |
-| `transitionDuration` | `number` | `200` | no — ms duration of the moving indicators |
-| `trackHover` | `boolean` | `true` | no — shows the moving hover highlight |
-| `trackActive` | `boolean` | `true` | no — shows the moving active-tab highlight |
-| `trackIndicator` | `boolean` | `true` | no — shows the moving underline/sideline indicator |
-| `ariaLabel` | `string` | `"Tabs"` | no — override for localisation |
-| `styleClassPassthrough` | `string \| string[]` | `[]` | no |
-
-## Slots
-
-For each index `0..itemCount-1`:
-
-- `tab-{n}-trigger` — content of the tab button.
-- `tab-{n}-content` — content of that tab's panel.
-
-```vue
-<TabsCore :item-count="2">
-  <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>
-</TabsCore>
-```
-
-## Accessibility behaviour
-
-- Renders `role="tablist"` (with `aria-label`), `role="tab"` triggers (`type="button"`), and
-  `role="tabpanel"` panels (`aria-labelledby` pointing at their trigger, `tabindex="0"` so keyboard
-  users can scroll into panel content per the WAI-ARIA Tabs Pattern).
-  Fixed 2026-09-15 — panels previously used `role="region"` and were hardcoded
-  `aria-hidden="true"` permanently, even the visible one, hiding all tab content from assistive
-  tech at all times.
-- Roving tabindex: only the active trigger has `tabindex="0"`; the rest are `-1`.
-- 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. Fixed 2026-09-15 — previously there was no keyboard navigation at all beyond
-  native Tab-key focus and click/Enter/Space activation on individual buttons.
-- Focus is visible via `:focus-visible` on both triggers and panels.
-
-## CSS custom properties
-
-See `CONSUMER-STYLING.md` in this component's folder for the full `--tabs-*` token API (indicator
-colours, list-item spacing/typography, content-panel border/background, axis-y gap). Whether each
-indicator renders at all is controlled by `trackHover`/`trackActive`/`trackIndicator`, not tokens.
-
-## 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 are flat values, not light-dark() (2026-09-15)
-
-Every colour token's default was originally a `light-dark(lightValue, darkValue)` pair (as most of
-this library's other components use). Deliberately changed to a single flat `--slate-*` value per
-token for this component — it doesn't bake in automatic light/dark scheme-switching for its own
-defaults; a consumer who wants a token to adapt to `color-scheme` wraps their own override value in
-`light-dark()`. See `CONSUMER-STYLING.md`'s "Colour tokens are flat values, not light-dark() pairs".

package/.vscode/srcdev-component-site-navigation.code-snippets

@@ -1,38 +0,0 @@
-{
-  "SRCDEV SiteNavigation": {
-    "description": "SiteNavigation: horizontal links that collapse to a burger panel when they don't fit",
-    "scope": "vue,html",
-    "body": [
-      "<SiteNavigation",
-      "  :nav-item-data=\"$1navItems\"",
-      "  nav-align=\"${2|left,center,right|}\"",
-      "  aria-label=\"${3:Site navigation}\"",
-      "/>"
-    ]
-  },
-  "SRCDEV SiteNavigation Items": {
-    "description": "NavItemData object for SiteNavigation",
-    "scope": "javascript,typescript",
-    "body": [
-      "const $1navItems: NavItemData = {",
-      "  main: [",
-      "    { text: \"$2Home\", href: \"/\" },",
-      "    { text: \"$3About\", href: \"/about\" },",
-      "  ],",
-      "};"
-    ]
-  },
-  "SRCDEV SiteNavigation CSS Override": {
-    "description": "CSS override scaffold for SiteNavigation tokens (backdrop tokens go on :root)",
-    "scope": "css",
-    "body": [
-      ".$1site-header {",
-      "  --site-nav-link-color: $2;",
-      "  --site-nav-link-hover-color: $3;",
-      "  --site-nav-decorator-indicator-color: $4;",
-      "  --site-nav-panel-bg: $5;",
-      "  --site-nav-burger-color: $6;",
-      "}"
-    ]
-  }
-}

package/.vscode/srcdev-component-tab-navigation.code-snippets

@@ -1,30 +0,0 @@
-{
-  "SRCDEV TabNavigation Basic": {
-    "description": "TabNavigation with route/hash links",
-    "scope": "vue,html",
-    "body": [
-      "<TabNavigation :nav-item-data=\"$1navData\" nav-align=\"${2:center}\" />"
-    ]
-  },
-  "SRCDEV TabNavigation Localised": {
-    "description": "TabNavigation with a localised aria-label",
-    "scope": "vue,html",
-    "body": [
-      "<TabNavigation :nav-item-data=\"$1navData\" aria-label=\"${2:Site navigation}\" />"
-    ]
-  },
-  "SRCDEV TabNavigation Nav Data Script": {
-    "description": "navItemData for TabNavigation",
-    "scope": "typescript,vue",
-    "body": [
-      "import type { NavItemData } from \"srcdev-nuxt-components\";",
-      "",
-      "const $1navData: NavItemData = {",
-      "  main: [",
-      "    { text: \"$2Home\", href: \"$3/\" },",
-      "    { text: \"$4Overview\", href: \"$5#overview\" },",
-      "  ],",
-      "};"
-    ]
-  }
-}