srcdev-nuxt-components 9.6.13 → 9.6.15

package/.claude/rules/consumer/story-register-components.md

@@ -6,7 +6,7 @@ paths:
 # Register every component a story template uses
 
 Every component in a story's `template` string, including ones placed in the component's slots, must
-be listed in that story's `components: {}`.
+be listed in that story's `components: {}`. Globally registered ones (`Icon`, `NuxtLink`) are the exception.
 
 Why: components aren't auto-registered in story templates; unregistered ones render as unknown tags.
 Detail: skill `storybook-add-story.md` (srcdev-nuxt-components).

package/.claude/skills/component-compliance-checklist.md

@@ -138,6 +138,11 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
       `computed()`: Vue renders nothing for a fractional or negative range and only warns in dev
       (`StepperList`, 2026-10-15)
     - broken image or link URLs
+    - data a third-party child can't handle: a library that throws while rendering (an encoder, a
+      parser) breaks the whole page render. Catch it with `onErrorCaptured` and render a fallback
+      (`DisplayQrCode` threw "Data too long" on an over-capacity value until 2026-10-19). Check story
+      control ranges against the library's real range too: its `radius` control ran to 20 while the
+      library clamps to 0-1
     Describe what to check in the story's docs description, and look at it at every
     `CanvasSwitcher` width. Fixes usually mean `overflow-wrap: anywhere`, `min-inline-size: 0` on
     flex/grid children, `Array.from(str)` instead of `str[0]`, and `clamp()` on values

package/.claude/skills/components/display-qr-code.md

@@ -10,10 +10,10 @@ Renders a styled QR code SVG from a string value. Supports colour, size, corner
 |------|------|---------|-------------|
 | `qr-value` | `string` | required | The string to encode into the QR code |
 | `variant` | `QrCodeVariant` | `{ inner: "default", marker: "default", pixel: "default" }` | Shape variants for inner markers, outer markers, and pixels |
-| `radius` | `number` | `0` | Corner rounding applied to pixels/markers (0–1 scale) |
+| `radius` | `number` | `0` | Corner rounding for the rounded, circle and dots shapes, 0 to 1 (the library clamps values outside) |
 | `black-color` | `string` | `"currentColor"` | Colour for the dark modules |
 | `white-color` | `string` | `"transparent"` | Colour for the light modules |
-| `size` | `string` | `"256px"` | Width of the QR code (height matches via `aspect-ratio: 1 / 1`) |
+| `size` | `string` | `"256px"` | Width of the QR code (height matches via `aspect-ratio: 1 / 1`), never wider than its container |
 | `aria-label` | `string` | `"QR code"` | Accessible name for the QR image (root has `role="img"`). Pass something specific and translated, e.g. "Scan to book an appointment". |
 | `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
 
@@ -22,7 +22,7 @@ Renders a styled QR code SVG from a string value. Supports colour, size, corner
 ```typescript
 import type { QrCodeVariant } from "srcdev-nuxt-components/types/components";
 
-// Each field accepts: "default" | "circle" | "rounded" | "dots" | "classy" | "classy-rounded"
+// Each field accepts: "default" | "circle" | "rounded" | "dots" | "pixelated"
 const variant: QrCodeVariant = {
   inner: "circle",
   marker: "rounded",
@@ -30,6 +30,21 @@ const variant: QrCodeVariant = {
 };
 ```
 
+## Slots and events
+
+| Name | Kind | Description |
+|------|------|-------------|
+| `fallback` | slot | Rendered in place of the code when `qr-value` is too long to encode (about 2.9KB at the lowest error correction, less at higher). Empty by default, leaving a blank box of the same size. |
+| `error` | event | `(error: Error)`, emitted once when encoding fails. Resets when `qr-value` changes. |
+
+```vue
+<DisplayQrCode :qr-value="bookingUrl" @error="reportQrError">
+  <template #fallback>
+    <a :href="bookingUrl">Open the booking page</a>
+  </template>
+</DisplayQrCode>
+```
+
 ## CSS token
 
 `--display-qr-code-size` overrides the `size` prop when set (e.g. on a page wrapper). Full reference: `app/components/01.atoms/qr-code/CONSUMER-STYLING.md`.
@@ -39,6 +54,7 @@ const variant: QrCodeVariant = {
 | Class | Where | Description |
 |-------|-------|-------------|
 | `.display-qr-code` | root | always present |
+| `.display-qr-code-fallback` | root | only when the value can't be encoded (with `data-error`) |
 
 ## Usage
 
@@ -63,7 +79,9 @@ Custom size, colour, and rounded pixels:
 
 ## Notes
 
-- The component renders directly as the `Qrcode` element from `nuxt-qrcode` — there is no wrapper `<div>`. The `.display-qr-code` class is applied to the `Qrcode` root, which renders as an `<svg>`.
+- The component renders directly as the `Qrcode` element from `nuxt-qrcode` — there is no wrapper `<div>`. The `.display-qr-code` class is applied to the `Qrcode` root, which renders as an `<svg>`. When encoding fails it renders a `<span class="display-qr-code display-qr-code-fallback">` instead.
+- Encoding errors are caught with `onErrorCaptured`, so an over-capacity value from a CMS can't break the page render. `nuxt-qrcode` must be installed in the consuming app.
 - `size` is applied via CSS `v-bind()` — pass any valid CSS length value (`px`, `rem`, `%`, etc.).
 - `black-color` defaults to `currentColor`, so the QR code inherits the surrounding text colour automatically unless overridden.
 - `white-color` defaults to `transparent`, making the background of the QR code see-through by default.
+- 2026-10-19 migration: added the `fallback` slot and `error` event, capped the width at the container, corrected the variant list (`pixelated`, no `classy`) and added a `StressTest` story; the story's radius control now uses the real 0 to 1 range.

package/.claude/skills/components/eyebrow-text.md

@@ -27,7 +27,7 @@ Do not assume placeholder text or default content.
 ## Basic Usage
 
 ```vue
-<EyebrowText textContent="Interior Design" />
+<EyebrowText text-content="Interior Design" />
 ```
 
 ## With Tag and Size
@@ -37,8 +37,8 @@ Use `tag="p"` for semantic paragraph context, or `tag="span"` when inline. Choos
 ```vue
 <EyebrowText
   tag="p"
-  fontSize="small"
-  textContent="Featured Collection"
+  font-size="small"
+  text-content="Featured Collection"
 />
 ```
 
@@ -47,10 +47,10 @@ Use `tag="p"` for semantic paragraph context, or `tag="span"` when inline. Choos
 EyebrowText is commonly placed directly above a `HeroText` heading:
 
 ```vue
-<EyebrowText tag="p" textContent="Our Services" />
+<EyebrowText tag="p" text-content="Our Services" />
 <HeroText
   tag="h2"
-  :textContent="[
+  :text-content="[
     { text: 'Crafted with', styleClass: 'normal' },
     { text: 'Care', styleClass: 'accent' },
   ]"
@@ -59,6 +59,8 @@ EyebrowText is commonly placed directly above a `HeroText` heading:
 
 ## Font Size Scale
 
+The prop is rendered as `data-font-size` on the root (not a class).
+
 | Value | CSS variable |
 |-------|-------------|
 | `large` | `--eyebrow-text-large` (default `1.4rem`) |
@@ -110,3 +112,5 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
 - Component is auto-imported in Nuxt — no import needed.
 - `tag` defaults to `"div"` which is block-level. Use `"span"` when the eyebrow must be inline within a flow of text.
+- Long text and unbroken strings wrap (`overflow-wrap: anywhere`). There is no line-clamp token: clamping needs `overflow: hidden`, which clips the italic overhang; `ServiceDetail` clamps its eyebrow itself with an allowance.
+- 2026-10-19 migration: the size moved from a bare `large`/`medium`/`small` class to `data-font-size`; added wrapping, a `StressTest` story and parent-story links.

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

@@ -58,10 +58,11 @@ heading to have an accessible name. Bind the same id to both:
 </section>
 ```
 
-Several components in this library (`PageRow`, `LayoutGridByCols`,
-`ProfileSection`, `ServiceSummary`, `ServiceDetail`, `PageHeroHighlights`) already generate this id
-automatically via the `useAriaLabelledById` composable and expose it as a `heading-id` slot prop —
-when composing inside one of those, bind `HeaderBlock`'s `id` to that slot prop instead of writing
+Three components in this library generate this id with the `useAriaLabelledById` composable and
+expose it as a `heading-id` slot prop: `PageRow` (default slot), `ProfileSection` (`heroText` slot)
+and `PageHeroHighlights` (`header` slot). (`LayoutGridByCols`, `ServiceSummary` and `ServiceDetail`
+use the composable too, but label their own heading or an `sr-only` label, with no slot prop.) When
+composing inside one of the three, bind `HeaderBlock`'s `id` to that slot prop instead of writing
 your own id:
 
 ```vue
@@ -72,7 +73,8 @@ your own id:
 
 ## Styling
 
-`HeaderBlock` has no CSS of its own — `classLevel` applies one of the global
+The root always has the `.header-block` class, whose only style is `overflow-wrap: anywhere` (so
+an unbroken word wraps instead of overflowing). `classLevel` applies one of the global
 `.page-heading-1`–`.page-heading-6` utility classes defined in
 `app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-page-heading.css`, each
 setting `font-size` from a shared fluid type-scale token (`--step-3` through `--step-8`). All six
@@ -90,3 +92,9 @@ Moved to `01.atoms/text-blocks/header-block/`, alongside `EyebrowText`/`HeroText
 added the `id` prop in the same pass — several sections need their heading to carry a specific id
 for `aria-labelledby`, and `HeaderBlock` had no explicit way to receive one (matching `PageRow`'s
 existing `id?: string | null` + `:id` convention).
+
+## Migration note (2026-10-19)
+
+Added the `.header-block` root class and `overflow-wrap: anywhere`, a `StressTest` story, a
+story-only slot-text control and docs text. The spec now unmounts every wrapper. Corrected the list
+of components that expose a `heading-id` slot prop.

package/.claude/skills/components/hero-text.md

@@ -45,7 +45,7 @@ interface TextConfig {
 ```vue
 <HeroText
   tag="h1"
-  :textContent="[
+  :text-content="[
     { text: 'Designing', styleClass: 'normal' },
     { text: 'Artistry', styleClass: 'accent' },
     { text: 'at Home', styleClass: 'normal' },
@@ -61,8 +61,8 @@ interface TextConfig {
 <HeroText
   tag="h2"
   icon="lucide:sparkles"
-  fontSize="heading"
-  :textContent="[{ text: 'Featured', styleClass: 'accent' }]"
+  font-size="heading"
+  :text-content="[{ text: 'Featured', styleClass: 'accent' }]"
 />
 ```
 
@@ -74,8 +74,8 @@ Use `axis="vertical"` to stack text segments in a column instead of a row.
 <HeroText
   tag="h1"
   axis="vertical"
-  fontSize="display"
-  :textContent="[
+  font-size="display"
+  :text-content="[
     { text: 'Modern', styleClass: 'normal' },
     { text: 'Living', styleClass: 'accent' },
   ]"
@@ -96,7 +96,9 @@ Define these CSS custom properties in your consuming app to control sizes.
 
 ## Styling
 
-Override via `styleClassPassthrough` or a parent HOC `<style>` block targeting `.hero-text`.
+Override via `styleClassPassthrough` or a parent HOC `<style>` block targeting `.hero-text`. Size
+and axis are `data-font-size` and `data-axis` attributes on the root (not classes); each segment is a
+`<span class="hero-text-segment">` plus its `styleClass`.
 
 Key CSS custom properties:
 
@@ -107,7 +109,6 @@ Key CSS custom properties:
 | `--hero-text-{scale}` | see CONSUMER-STYLING.md | Font size per `fontSize` prop value (the library theme sets them on `:root`; the component has matching fallbacks) |
 | `--hero-text-font-family` | `"Playfair Display"` | Font family of the whole component |
 | `--hero-text-margin` | `0` | Margin on the root element |
-| `--hero-text-horizontal-gap` | `0.5ch` | Gap between segments in `axis="horizontal"` mode |
 | `--hero-text-vertical-gap` | `0.4em` | Gap between segments in `axis="vertical"` mode |
 | `--hero-text-accent-offset` | `0.2em` | Underline-clearance offset on `.accent` spans (`padding-bottom` and the matching negative `margin-bottom`) |
 
@@ -115,7 +116,7 @@ Key CSS custom properties:
 
 ```css
 .my-page {
-  .hero-text.axis-vertical {
+  .hero-text[data-axis="vertical"] {
     --hero-text-vertical-gap: 0.6em;
   }
 }
@@ -149,6 +150,9 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
 ## Notes
 
-- Text segments are trimmed and a trailing space is automatically appended between segments in horizontal axis — do not manually pad `text` values.
+- Text segments are trimmed and a trailing space is automatically appended between segments — do not manually pad `text` values. Segments with blank or missing `text` (common in CMS data) are dropped.
+- The icon is decorative (`aria-hidden`).
+- Long text and unbroken strings wrap. No line-clamp token: clamping needs `overflow: hidden`, which clips the accent descender offset; `ServiceDetail` clamps its title itself.
+- 2026-10-19 migration: size and axis moved from bare root classes to `data-font-size`/`data-axis`, segments from `.text-block-{n}` to `.hero-text-segment`; dropped the dead `--hero-text-horizontal-gap`; added a `StressTest` story.
 - The icon is sized to match the font size. At `subheading` scale it is `0.75em` (applied as `font-size`, since `width`/`height` on an `<Icon>` are overridden by `@nuxt/icon`).
 - Component is auto-imported in Nuxt — no import needed.

package/.claude/skills/components/link-text.md

@@ -26,13 +26,13 @@ Both slots are optional. If neither is provided, no icon wrapper elements are re
 ## Basic Usage
 
 ```vue
-<LinkText to="/about" linkText="About Us" />
+<LinkText to="/about" link-text="About Us" />
 ```
 
 ## With Left Icon (back/previous pattern)
 
 ```vue
-<LinkText to="/blog" linkText="Back to Blog">
+<LinkText to="/blog" link-text="Back to Blog">
   <template #left>
     <Icon name="lucide:arrow-left" />
   </template>
@@ -42,7 +42,7 @@ Both slots are optional. If neither is provided, no icon wrapper elements are re
 ## With Right Icon (forward/more pattern)
 
 ```vue
-<LinkText to="/services" linkText="Learn More">
+<LinkText to="/services" link-text="Learn More">
   <template #right>
     <Icon name="lucide:arrow-right" />
   </template>
@@ -52,7 +52,7 @@ Both slots are optional. If neither is provided, no icon wrapper elements are re
 ## Both Icons
 
 ```vue
-<LinkText to="/collection" linkText="Explore">
+<LinkText to="/collection" link-text="Explore">
   <template #left>
     <Icon name="lucide:sparkles" />
   </template>
@@ -67,7 +67,7 @@ Both slots are optional. If neither is provided, no icon wrapper elements are re
 ```vue
 <LinkText
   to="https://example.com"
-  linkText="Visit Site"
+  link-text="Visit Site"
   :external="true"
   target="_blank"
 >
@@ -132,3 +132,6 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 - NuxtLink handles both internal (`/path`) and external (`https://...`) URLs automatically. Only set `external: true` if you need to force external handling on an internal-looking path.
 - The label is always rendered inside `.link-text__label` — target this class if you need to style the text independently of the icons.
 - DOM order is always: left icon → label → right icon.
+- Long and unbroken labels wrap inside the column (the root is capped at `max-inline-size: 100%`). There is no line-clamp token: link text names its destination.
+- For an icon-only link, pass an empty `link-text` and an `aria-label`; it falls through to the `<a>`.
+- 2026-10-19 migration: label wrapping, rem focus ring, `StressTest` story, docs text; the spec now unmounts every wrapper.

package/.claude/skills/components/pop-over.md

@@ -28,8 +28,9 @@ and Escape dismissal.
 |------|------|---------|-------------|
 | `placement` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Which side of the trigger the popover panel opens on. Each side has a `position-try-fallbacks` so the browser flips it automatically if it would overflow the viewport. |
 | `triggerAriaLabel` | `string` | `""` | aria-label on the trigger button — set this when the `trigger` slot is icon-only. Unset (no attribute) by default, since the trigger slot usually carries its own visible/accessible content. |
-| `popoverAriaLabel` | `string` | `""` | aria-label on the popover content region — set this when the `content` slot has no visible heading. |
-| `closeButtonAriaLabel` | `string` | `"Close"` | aria-label on the close button — override for localisation. |
+| `popoverAriaLabel` | `string` | `""` | Names the popover panel and gives it `role="dialog"` (with no label it has no role, since a name on a generic element isn't announced) — set this when the `content` slot has no visible heading. |
+| `closeButtonAriaLabel` | `string` | `"Close"` | The close button's accessible name (its `aria-label` and its visually hidden button text) — override for localisation. |
+| `closeIcon` | `string` | `"lucide:x"` | Iconify name for the close button icon. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
 
 ## Slots
@@ -80,11 +81,20 @@ the only source of space above/below the slotted content — a plain `<p>` doesn
   does the same in JS. The trigger has `aria-expanded` in every browser.
 - On open, focus moves to the close button (the composable's `onOpen`) so keyboard users land
   inside the panel immediately.
+- The close button is an icon-only `InputButton variant="inline"` with class
+  `pop-over-close-button`, pinned to the panel's block-start/inline-end corner, so it sits top left
+  in right-to-left text. The content slot's top padding keeps content clear of it.
+- The panel is never wider than the viewport minus `3.2rem` (whatever `--pop-over-width` says) or
+  taller than `--pop-over-max-block-size` (default `calc(100dvh - 3.2rem)`); taller content scrolls
+  inside the panel. Unbroken strings in the trigger and panel wrap (`overflow-wrap: anywhere`).
 
 ## CSS custom properties
 
 See `CONSUMER-STYLING.md` for the full `--pop-over-*` token API (gap, trigger outline, panel
-border/background/text/shadow/width, content padding, and close-button tokens).
+border/background/text/shadow/width/max-height, content padding, and close-button tokens).
+
+No line-clamp tokens: all text arrives through the `trigger` and `content` slots, so the consumer
+clamps it in their own markup.
 
 ## Notes
 
@@ -101,3 +111,7 @@ border/background/text/shadow/width, content padding, and close-button tokens).
   `@position-try` blocks commented out and unused; promoted every hardcoded value to a public CSS
   token; added tests, a Storybook story, this skill doc, and a VS Code snippet (all previously
   missing).
+- 2026-10-19 migration: the close button became an `InputButton variant="inline"` (it was a raw
+  `<button>`) and gained a `closeIcon` prop; it now uses logical insets. The panel caps at the
+  viewport width and height and wraps unbroken strings; the trigger wraps too. Added a
+  `StressTest` story and per-story docs descriptions.

package/.claude/skills/components/sliding-toggle.md

@@ -0,0 +1,108 @@
+---
+name: SlidingToggle
+description: SlidingToggle single-choice segmented radiogroup with text labels of any width, measured sliding indicator (stretch-then-catch-up) plus hover indicator, corner-shape token, CSS token API
+type: reference
+---
+
+# SlidingToggle
+
+## Overview
+
+A single-choice segmented control for short text choices such as a billing period or a site tier.
+The selected option's background slides between options of different widths, with the same
+stretch-then-catch-up motion as `TabbedContent`'s indicator (both use `useSlidingIndicator`), and a
+second indicator follows the pointer. It's a WAI-ARIA radio group of `<button role="radio">`s, not
+a form control: there are no native inputs and nothing is submitted.
+
+Lives in `app/components/02.molecules/sliding-toggle/`.
+
+**Which one to use:**
+
+- `SlidingToggle` — text labels of any width, page UI state (pricing toggles, view switches).
+- `SegmentedControl` (`05.forms`) — icon-only, equal-width options, native radio inputs that submit
+  with a form.
+- `TabbedContent` — the choice switches between panels of content.
+
+## Props
+
+| Prop (template form) | Type | Default | Notes |
+|---|---|---|---|
+| `v-model` | `T` (`string \| number`) | (required) | The selected option's `value`. A value matching no option leaves nothing selected. |
+| `options` | `SlidingToggleOption<T>[]` | (required) | `{ value, label, disabled? }`. Labels are plain text. |
+| `aria-label` | `string` | `""` | Names the radiogroup. Set this or `aria-labelledby`. |
+| `aria-labelledby` | `string` | `""` | Id of a visible heading naming the group. |
+| `disabled` | `boolean` | `false` | Disables every option. |
+| `track-hover` | `boolean` | `true` | Show the hover indicator. |
+| `transition-duration` | `number` (ms) | `200` | Length of each edge's slide. |
+| `style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root. |
+
+`SlidingToggleOption` is exported from `~/types/components`.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+const billing = ref<"monthly" | "yearly">("monthly");
+const billingOptions = [
+  { value: "monthly", label: "Monthly" },
+  { value: "yearly", label: "Yearly (save 20%)" },
+] as const;
+</script>
+
+<template>
+  <SlidingToggle v-model="billing" :options="[...billingOptions]" aria-label="Billing period" />
+</template>
+```
+
+Equal widths across a full-width switch:
+
+```css
+.billing-switch {
+  --sliding-toggle-option-flex: 1 1 0;
+}
+
+.billing-switch .sliding-toggle {
+  inline-size: 100%;
+}
+```
+
+## Behaviour
+
+- The root is `role="radiogroup"`, named by `aria-label` or `aria-labelledby`. Each option is a
+  `<button type="button" role="radio">` with `aria-checked`.
+- Clicking an option sets `v-model`; changing `v-model` from outside moves the selection.
+- Only the selected option is a tab stop. With no match, the first enabled option is.
+- Arrow keys move focus and select, wrapping round and skipping disabled options. Right and Down go
+  to the next option, Left and Up to the previous; inside `dir="rtl"` Left and Right swap. Home and
+  End go to the first and last enabled option.
+- `disabled` on the group or on one option blocks clicks and keys; disabled options are skipped and
+  never get the hover indicator.
+- The selected indicator slides to the new option, its leading edge first and the trailing edge one
+  `transition-duration` later. The hover indicator follows the pointer and returns to the selected
+  option when it leaves; `track-hover="false"` turns it off. `--sliding-toggle-indicator-stretch: 0`
+  makes both indicators slide their edges together instead of stretching, mirroring TabbedContent's
+  `--tabs-indicator-stretch`.
+- Under `prefers-reduced-motion` both indicators snap.
+- Before it's mounted and measured (SSR, first paint) the indicators are hidden and the selected
+  option paints its own background and marker, so there's no flash of an unselected group.
+- It re-measures when the track or any single option resizes (a late web font changes label widths
+  without resizing the track) and when options are added, removed or re-classed.
+- Long, unbroken and many labels wrap and shrink inside the track instead of overflowing.
+
+## CSS custom properties
+
+See `CONSUMER-STYLING.md` for the full `--sliding-toggle-*` token API: track surface, padding, gap,
+radii, `--sliding-toggle-corner-shape`, indicator and hover-indicator surfaces, marker, option
+padding/flex/typography/colours and the focus ring. Colours default from `--theme-*` tokens.
+
+`--sliding-toggle-corner-shape` takes any `corner-shape` value (`squircle`, `superellipse(n)`,
+`bevel`, `scoop`, `notch`). It's a progressive enhancement: Chromium 139+ only, and other browsers
+keep the `border-radius` corners.
+
+## Notes
+
+- Auto-imported in Nuxt.
+- The motion comes from the `useSlidingIndicator` composable, shared with `TabbedContent` (via
+  `useTabs`). It writes `--_sliding-toggle-active-*` / `--_sliding-toggle-hover-*` on the root.
+- Added 2026-10-19, generalised from a consumer app's pricing-page toggle (which used `aria-pressed`
+  buttons; this version uses radio semantics).

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

@@ -137,6 +137,10 @@ source order when the list changes.
 
 ## Indicator motion: edge insets (2026-10-08)
 
+> **Changed 2026-10-19**: the edge maths moved into `useSlidingIndicator` (`composable-sliding-indicator.md`),
+> shared with `SlidingToggle`. `useTabs.placeIndicator` now calls it and keeps the label-coverage
+> tracking. Under `prefers-reduced-motion` the indicators now snap instead of sliding.
+
 `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
@@ -145,9 +149,10 @@ and the trailing edge catches up: the same stretch effect as before, symmetric b
 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.
 
-`--tabs-hover-indicator-stretch` (default `1`) multiplies the hover pair's two edge delays in CSS,
-so `0` turns the hover stretch into a plain slide (both edges move together over the same
-duration). The active indicator and underline always stretch.
+`--tabs-indicator-stretch` (default `1`) multiplies every indicator's two edge delays in CSS, so `0`
+turns the stretch into a plain slide (both edges move together over the same duration) for the
+hover, active and underline indicators alike. Renamed 2026-10-19 from `--tabs-hover-indicator-stretch`,
+which covered the hover pair only.
 
 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

package/.claude/skills/composable-sliding-indicator.md

@@ -0,0 +1,60 @@
+# useSlidingIndicator
+
+## Overview
+
+Positions one or more sliding indicators (a highlight or underline that moves between items) inside
+a container, with a stretch-then-catch-up motion: the edge in the direction of travel moves first
+and the trailing edge follows one duration later. Used by `useTabs` (TabbedContent) and
+`SlidingToggle`. Lives in `app/composables/useSlidingIndicator.ts`, auto-imported.
+
+## API
+
+```ts
+const { place, reset } = useSlidingIndicator(containerRef, { axis?: "x" | "y", duration });
+```
+
+| Param | Type | Notes |
+|---|---|---|
+| `containerRef` | `Ref<HTMLElement \| null>` | The positioned element the indicators sit in. The CSS variables are written on it. |
+| `axis` | `MaybeRefOrGetter<"x" \| "y">` | Default `"x"`. |
+| `duration` | `MaybeRefOrGetter<number>` | Slide length per edge, in ms. Invalid or negative values count as `0`. |
+
+`place(name, target, animate)` measures `target` (its `offsetLeft`/`offsetTop` and size against the
+container's client size) and writes, on the container:
+
+- `--_{name}-start` / `--_{name}-end` — insets from the container's start and end edges, in px;
+- `--_{name}-duration`, `--_{name}-start-delay`, `--_{name}-end-delay`.
+
+It returns the transition length in ms, or `null` when the container or target is missing (nothing
+written). The first placement of a name, `animate: false`, and `prefers-reduced-motion` all snap
+(duration `0ms`).
+
+`reset(name)` forgets the last position, so the next placement snaps instead of sliding in from
+wherever the indicator last was (use it when an indicator is hidden).
+
+## CSS side
+
+```css
+.my-indicator {
+  position: absolute;
+  left: var(--_my-thing-active-start, 0px);
+  right: var(--_my-thing-active-end, 100%);
+  transition:
+    left var(--_my-thing-active-duration, 0ms) ease var(--_my-thing-active-start-delay, 0ms),
+    right var(--_my-thing-active-duration, 0ms) ease var(--_my-thing-active-end-delay, 0ms);
+}
+```
+
+Use physical `left`/`right` (and `top`/`bottom` for `"y"`): the measurements are physical, so this
+also works in right-to-left layouts.
+
+## Rules
+
+- Prefix the `name` with the component (`"sliding-toggle-active"`), so a component nested inside
+  another that uses the composable can't inherit its values (pitfall #26). `useTabs` keeps the
+  historic `"active"`/`"hovered"` names that TabbedContent's CSS reads.
+- Re-place with `animate: false` when the container or any measured item resizes, and when items
+  are added or removed (`measured-layout-observers.md`). Don't observe `style` changes: the
+  composable writes inline styles on the container.
+- Keep the indicators hidden until the first placement (SlidingToggle's `data-ready`), and give the
+  selected item its own fallback background for SSR and first paint.

package/.claude/skills/index.md

@@ -75,6 +75,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── 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
 ├── composable-anchored-popover.md    — useAnchoredPopover: popover + anchor positioning with JS fallbacks for Safari 16 (no Popover API) and 17–18 (no anchor positioning); used by ActionMenu/SelectMenu/DeepExpandingMenu/DisplayTooltip/PopOver
+├── composable-sliding-indicator.md   — useSlidingIndicator: stretch-then-catch-up sliding indicator edges written as --_{name}-* vars, reduced-motion snap; used by useTabs/TabbedContent and SlidingToggle
 └── components/
     ├── alert-content.md          — AlertContent + AlertContentInner: themed alert panel (icon/title/content/actions/dismiss) under DisplayToast, DisplayPrompt and AlertMaskedContent; showIcon, #actions row, --alert-content-* tokens, app.config icon map
     ├── alert-mask.md      — AlertMask (renamed from AlertMaskCore): SVG border/fill sized to slotted content via ResizeObserver; config-prop geometry, --alert-mask-* colour tokens
@@ -164,6 +165,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── input-radio.md            — MultipleRadiobuttons: fieldset radiogroup (data-driven, button or labelled), shared-name grouping bug fixed, dead label/placeholder/equalCols props removed, data-options-layout hook, spacing token API, useId button ids, wraps hostile content
     ├── toggle-switch.md         — ToggleSwitch (bare control), ToggleSwitchField (labelled, layout="stacked"|"inline", replaces ToggleSwitchWithLabelInline): renamed from Core/WithLabel, role="switch", prefixed inner classes + data-checked, single-toggle click handling, reduced motion, round prop + border-radius token, track width from geometry, CSS token API, stress stories
     ├── segmented-control.md    — SegmentedControl (renamed from TripleToggleSwitch): icon radio pill for any number of options with sliding marker, radiogroup + ariaLabel, system/light/dark marker-gradient tokens, reduced-motion, CSS token API
+    ├── sliding-toggle.md       — SlidingToggle: single-choice segmented radiogroup with text labels of any width, measured sliding + hover indicators (useSlidingIndicator), roving tabindex/arrow keys, corner-shape token, CSS token API
     ├── entry-animation.md         — EntryAnimation: scroll-driven entry animation wrapper (slide-in/zoom-reveal/exit-blur utility classes), skipAnimation for above-the-fold loop items, reduced-motion handled at the CSS layer
     ├── column-flow-grid.md        — ColumnFlowGrid (renamed from MasonryGrid): CSS multi-column text-flow layout, named dynamic slots (no count/data prop), itemMinWidth/gap/unit sizing, CSS token API; not a true masonry, see "which one do I want?"
     ├── masonry-grid.md            — MasonryGrid: real measured-height masonry (greedy shortest-column packing, animated resize) absorbed from the now-retired MasonryGridOrdered; named dynamic slots, fixedWidth/justify, CSS token API

package/.claude/skills/storybook-add-story.md

@@ -172,6 +172,23 @@ const Template: StoryFn<StoryArgs> = (args) => ({
 
 Don't name the inline component the same as an exported story (`TS2451: Cannot redeclare`).
 
+### Generic components (`<script setup generic="T">`)
+
+A generic component's type doesn't fit `Meta`'s `component` field (`ConcreteComponent<Args>`), so
+`npx nuxi typecheck` fails on `component: MyGeneric`. Cast it, with a one-line comment; the
+autodocs props table still generates:
+
+```ts
+import type { ConcreteComponent } from "vue";
+
+const meta: Meta<StoryArgs> = {
+  // Generic components don't fit Meta's ConcreteComponent<Args>; the props table still generates.
+  component: SlidingToggle as unknown as ConcreteComponent<StoryArgs>,
+};
+```
+
+`SlidingToggle.stories.ts` is the reference.
+
 ## Title format
 
 `"Category/Subcategory/ComponentName"` — this becomes the Storybook sidebar path and the
@@ -180,9 +197,12 @@ Playwright `STORY_BASE` slug. The slug is derived by lowercasing and replacing s
 
 | Title                                         | STORY_BASE slug                             |
 | --------------------------------------------- | ------------------------------------------- |
-| `"Atoms/Text Blocks/HeroText"`                | `atoms-text-blocks-herotext`                |
+| `"Atoms/Text Blocks/Hero Text"`               | `atoms-text-blocks-hero-text`               |
 | `"Components/Forms/Input Text/InputText"`     | `components-forms-input-text-inputtext`     |
 
+Renaming a title changes the slug: update any `playwright/*.playwright.ts` `STORY_BASE` and any
+story links (`?path=/story/...`) that point at it.
+
 ## argTypes control types
 
 | Prop type      | `control`                        |
@@ -274,7 +294,7 @@ export const Default: Story = {
 Key points:
 
 - `computed` is **not** auto-imported in `.ts` story files — import it explicitly from `"vue"`.
-- Components aren't auto-registered in a story's `template` string either. Every component used there, including ones you put in the component's slots (`EyebrowText`, `HeroText`, `SocialIconsList`, ...), must be imported and listed in `components: {}`. Otherwise Vue renders it as an empty unknown element (`<eyebrowtext>`) with no error. ProfileSection's header and social-icons stories rendered blank this way until 2026-10-14.
+- Components aren't auto-registered in a story's `template` string either. Every component used there, including ones you put in the component's slots (`EyebrowText`, `HeroText`, `SocialIconsList`, ...), must be imported and listed in `components: {}`. Otherwise Vue renders it as an empty unknown element (`<eyebrowtext>`) with no error. ProfileSection's header and social-icons stories rendered blank this way until 2026-10-14. Globally registered components are the exception and need no entry: `Icon` (`@nuxt/icon` registers it with `global: true`) and `NuxtLink`.
 - Props in a story's `template` string aren't type-checked either. An invalid value renders silently with no warning: ProfileSection's stories passed `font-size="large"` to `HeroText`, which only has `display`/`title`/`heading`/`subheading`/`label`, so the heading fell back to unstyled text. Check every literal prop value against the component's `interface Props`.
 - Extra args must be stripped before `v-bind` — spreading unknown keys onto a component makes them unknown HTML attributes.
 - CSS custom properties set via `:style` on the component root are picked up by `var()` in the component's scoped CSS.

package/.claude/skills/testing-add-playwright.md

@@ -99,13 +99,18 @@ test.describe("ComponentName — combinations", () => {
 
 ## Deriving the STORY_BASE slug
 
-Take the story `title` from the `.stories.ts` file, lowercase everything, remove spaces,
-and replace `/` with `-`:
-
-| Story `title`                                     | `STORY_BASE`                                    |
-| ------------------------------------------------- | ----------------------------------------------- |
-| `"Atoms/Text Blocks/HeroText"`                    | `atoms-text-blocks-herotext`                    |
-| `"Components/Forms/Input Button/InputButton"` | `components-forms-input-button-inputbuttoncore` |
+Take the story `title` from the `.stories.ts` file, lowercase everything, and replace both spaces
+and `/` with `-`:
+
+| Story `title`                                 | `STORY_BASE`                                |
+| --------------------------------------------- | ------------------------------------------- |
+| `"Atoms/Text Blocks/Hero Text"`               | `atoms-text-blocks-hero-text`               |
+| `"Components/Forms/Input Button/InputButton"` | `components-forms-input-button-inputbutton` |
+
+`STORY_BASE` is hardcoded, and nothing (Vitest, ESLint, the Component Ledger) checks it. When you
+change a story `title`, update `STORY_BASE` in the component's `playwright/` folder in the same
+change. EyebrowText and HeroText pointed at ids from an older title (`...-eyebrowtext`,
+`...-herotext`) until 2026-10-19, so their suites loaded a missing story.
 
 The full story URL pattern is: