srcdev-nuxt-components 9.6.0 → 9.6.1

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

@@ -1,288 +0,0 @@
-# TabNavigation
-
-> **Deprecated (2026-10-06): use [ResponsiveHeader](responsive-header.md) for new work.** It does
-> everything TabNavigation does, including same-page `#anchor` links with `anchorScrollOffset`, and
-> collapses item by item instead of all-or-nothing. Follow "Migrating from TabNavigation" in that doc.
-> TabNavigation stays until existing consumers have moved, then it will be removed. It logs a
-> dev-mode console warning on mount.
-
-## 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 |
-| `open-menu-label` | `string` | `"Open navigation menu"` | Burger button label while closed — override for localisation |
-| `close-menu-label` | `string` | `"Close navigation menu"` | Burger button label while open — override for localisation |
-| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root `<nav>` element |
-
----
-
-> **Changed 2026-10-06:** the burger labels are props (were hardcoded English). Items with blank `text`
-> are skipped (a link with no text has no accessible name), and nothing renders when none are left.
-> Items are keyed by position, so duplicate or missing `href`s no longer break rendering. The mobile
-> panel's id comes from `useId()` (was a fixed `tab-nav-panel`, which duplicated with two navs on a
-> page). Links show a focus ring (`--tab-nav-focus-ring-*`), and long panel labels wrap. Colour
-> defaults are light-theme now (`--theme-text` links, `--theme-accent` hover and indicator, `--page-bg`
-> panel); they used to assume a dark header. Dark headers or dark mode set the colour tokens.
-
-## 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(--theme-text)` | Link text colour |
-| `--tab-nav-link-hover-color` | `var(--theme-accent)` | Link hover colour |
-| `--tab-nav-link-active-color` | the link colour | 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(--theme-accent)` | 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, var(--theme-surface-subtle))` | Panel background |
-| `--tab-nav-panel-border-color` | the link colour at 20% | Panel top border |
-| `--tab-nav-panel-item-border` | the panel link colour at 12% | Item dividers |
-| `--tab-nav-panel-link-color` | the link colour | 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` | the link colour | 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-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}\" open-menu-label=\"${3:Open navigation menu}\" close-menu-label=\"${4:Close navigation menu}\" />"
-    ]
-  },
-  "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\" },",
-      "  ],",
-      "};"
-    ]
-  }
-}

package/app/components/01.atoms/navigation/tabs/CONSUMER-STYLING.md

@@ -1,120 +0,0 @@
-# TabsCore — Consumer Styling Guide
-
-## Public token API
-
-| Token | Default | Controls |
-|---|---|---|
-| `--tabs-nav-border` | `0.1rem solid var(--slate-06)` | Border between the tab list and its content (bottom border on `axis="x"`, left border on `axis="y"`) |
-| `--tabs-hover-indicator-colour` | `var(--slate-07)` | Background of the moving hover highlight (`trackHover`) |
-| `--tabs-hover-indicator-text-colour` | `var(--slate-00)` | Text colour of a hovered tab trigger's label — keep this in contrast with `--tabs-hover-indicator-colour` |
-| `--tabs-active-indicator-colour` | `var(--slate-09)` | Background of the moving active-tab highlight (`trackActive`) |
-| `--tabs-active-indicator-text-colour` | `var(--slate-00)` | Fallback text colour of the active tab trigger's label — keep this in contrast with `--tabs-active-indicator-colour` |
-| `--tabs-underline-indicator-colour` | `var(--slate-10)` | Colour of the underline/sideline indicator (`trackIndicator`) |
-| `--tabs-underline-indicator-height` | `0.4rem` | Thickness of the underline indicator (`axis="x"`) — also used as its width on `axis="y"` |
-| `--tabs-list-item-opacity` | `0.7` | Opacity of an inactive tab trigger |
-| `--tabs-list-item-colour` | `var(--slate-10)` | Text colour of an inactive tab trigger |
-| `--tabs-list-item-colour-selected` | falls back to `--tabs-active-indicator-text-colour` | Text colour of the active tab trigger — set this directly to override without touching `--tabs-active-indicator-text-colour` |
-| `--tabs-list-item-text-transform` | `uppercase` | `text-transform` of tab trigger labels |
-| `--tabs-list-item-font-weight` | `500` | Font weight of tab trigger labels |
-| `--tabs-list-item-padding-block` | `1em` | Vertical padding of a tab trigger |
-| `--tabs-list-item-padding-inline` | `2em` | Horizontal padding of a tab trigger |
-| `--tabs-list-item-colour-transition-duration` | `100ms` | Transition duration of the trigger text-colour change |
-| `--tabs-list-item-focus-outline-width` | `2px` | Focus outline width on a tab trigger/panel (colour is `--theme-ring`) |
-| `--tabs-list-item-focus-outline-offset` | `-2px` | Focus outline offset on a tab trigger |
-| `--tabs-content-background-colour` | `var(--slate-09)` | Background of the content panel wrapper |
-| `--tabs-content-border-width` | `0.1rem` | Border/outline width of the content panel wrapper |
-| `--tabs-content-border-colour` | `var(--slate-06)` | Border/outline colour of the content panel wrapper |
-| `--tabs-content-border-radius` | `0` | Corner radius of the content panel wrapper |
-| `--tabs-axis-y-gap` | `2em` | Gap between the tab list and content when `axis="y"` |
-
-```css
-.my-page {
-  --tabs-active-indicator-colour: #1a1a1a;
-  --tabs-underline-indicator-colour: #b5651d;
-  --tabs-content-border-radius: 0.8rem;
-}
-```
-
----
-
-## Colour tokens are flat values, not light-dark() pairs
-
-Every colour token above defaults to a single flat `--slate-*` value rather than a
-`light-dark(lightValue, darkValue)` pair — this component doesn't bake in automatic light/dark
-scheme-switching for its own defaults. If you want a token to adapt to `color-scheme`, wrap your
-own override in `light-dark()`:
-
-```css
-.my-page {
-  --tabs-active-indicator-colour: light-dark(#1a1a1a, #f5f5f5);
-}
-```
-
----
-
-## Tab-label text colour tracks the indicator behind it
-
-Hover and active can have different background colours (`--tabs-hover-indicator-colour` vs.
-`--tabs-active-indicator-colour`), so the trigger label uses two separate text-colour tokens
-rather than one shared "selected" colour — otherwise overriding just one indicator's background
-risks making the label unreadable against it while leaving the other state fine. If you override
-either indicator background, override its matching text-colour token to keep contrast:
-
-```css
-.my-page {
-  --tabs-hover-indicator-colour: gold;
-  --tabs-hover-indicator-text-colour: black;
-  --tabs-active-indicator-colour: navy;
-  --tabs-active-indicator-text-colour: white;
-}
-```
-
----
-
-## Tabs spanned by a jump keep their normal styling
-
-When the active tab (or hover) jumps across several tabs at once (e.g. clicking tab 5 while tab 1
-is active), the sliding indicator animates across the tabs in between, but their own labels are
-**not** recoloured to the active/hover text colour during that transition — they keep their normal
-inactive styling throughout. An earlier version force-applied the active text colour to every
-spanned tab for the whole transition, on the assumption the sliding indicator visually covered them
-the entire time — it doesn't (a forward jump grows the indicator gradually from the old tab's
-position, so it only reaches later tabs partway through), so intermediate labels could end up a
-colour that matched neither their own background nor the indicator yet, making them briefly
-invisible. Fixed 2026-09-15.
-
-Since a non-active tab keeps its normal inactive text colour throughout, and the active indicator
-still visually passes under it while sliding, `--tabs-active-indicator-colour`'s default
-(`var(--slate-09)`) is deliberately *not* the same value as `--tabs-list-item-colour`'s default
-(`var(--slate-10)`) — they used to be identical, which meant a passed-over tab's text became
-literally the same colour as the indicator sliding beneath it (invisible). If you override
-`--tabs-active-indicator-colour`, check it still differs enough from `--tabs-list-item-colour` (or
-override that too) to avoid the same collision recurring.
-
----
-
-## Indicator visibility is prop-driven, not tokens
-
-Whether the hover highlight, active highlight, and underline indicator render at all is controlled
-by the `trackHover`/`trackActive`/`trackIndicator` boolean props (all default `true`), since they
-also gate whether the underlying DOM nodes are created — not just their styling.
-
----
-
-## Movement/position values are private
-
-`--_x-active`, `--_x-hovered`, `--_width-active`, `--_width-hovered`, `--_y-active`, `--_y-hovered`,
-`--_y-height`, `--_y-width`, and `--_transition-duration` are computed at runtime from the tab
-elements' measured layout (`offsetLeft`/`offsetWidth`/etc. in `useTabs`) and aren't meaningful to
-override directly — use `transitionDuration` (a prop, in ms) to control indicator movement speed.
-
----
-
-## Local overrides
-
-Set the tokens above on an element you own (a page or section class, or a class added with
-`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
-`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
-`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
-`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
-