srcdev-nuxt-components 9.6.12 → 9.6.14

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/skip-links.md

@@ -59,6 +59,17 @@ in `.skip-links__home`. Only rendered when the slot is actually used.
 Each `href` must match the `id` of a real element on the page (e.g. `<main id="main-content">`) —
 the component does not create those anchors itself.
 
+Data handling (safe to feed straight from a CMS):
+
+- An entry with an empty or whitespace-only `href` or `label` is dropped: an empty link has no
+  target or no accessible name.
+- When no entry survives, the `<nav>` isn't rendered at all, so there's no empty landmark.
+- Two entries may share an `href`; each renders (keys include the index). Before 2026-10-18 they
+  were keyed by `href` alone, and reordering such a list left a stale extra link in the DOM.
+- Labels render as text and wrap; the panel never exceeds the viewport width.
+
+`SiteHeader` renders `SkipLinks` as its branding row, passing its `branding` slot into `homeLink`.
+
 ## Accessibility behaviour
 
 - Links are hidden via `opacity`/`transform`, not `display`/`visibility` — they stay in the tab
@@ -80,3 +91,8 @@ See `CONSUMER-STYLING.md` in this component's folder for the full `--skip-links-
 - Migrated 2026-09-15 from the unplaced `skip-links/` folder: the link set was previously
   hardcoded (two fixed `<a>` tags with hardcoded English copy) — now data-driven via `links` so
   consumers can add/remove targets and localise the copy without forking the component.
+- 2026-10-18 migration: colours moved from hardcoded black/white to `--theme-surface-inverted` and
+  `--theme-on-surface` defaults (same high contrast, follows `data-theme`); z-index default
+  `1000` → `999999` (library overlay default); links wrap instead of `nowrap`, and the panel is
+  capped at the viewport width and anchored with `inset-inline-start`; invalid entries dropped, no
+  empty landmark, index-safe keys; StressTest story and a link to the SiteHeader story.

package/.claude/skills/composable-tooltips-guide.md

@@ -8,7 +8,7 @@
 
 ## Prerequisites
 
-- Built around the native Popover API (Chrome 114+, Firefox 125+, Safari 17+). With `DisplayTooltip`/`DisplayTooltipDefined` it also works on Safari 16, because those components fall back to JS open/close (`useAnchoredPopover`) and the guide drives them through their trigger buttons. Hand-written raw `[popover]` markup like the example below still needs the Popover API.
+- Built around the native Popover API (Chrome 114+, Firefox 125+, Safari 17+). With `DisplayTooltip`/`DisplayTooltipRich` it also works on Safari 16, because those components fall back to JS open/close (`useAnchoredPopover`) and the guide drives them through their trigger buttons. Hand-written raw `[popover]` markup like the example below still needs the Popover API.
 - Popovers must have `id` attributes and corresponding trigger buttons with `popovertarget` and `popovertargetaction="toggle"` attributes
 - Close buttons inside each popover must have `popovertargetaction="hide"`
 
@@ -91,13 +91,13 @@ await startGuide()
 | `stopGuide()` | `() => void` | Close any open popovers and stop the guide |
 | `initializePopovers()` | `() => void` | Re-scan the container for `[popover]` elements; call if popovers are added dynamically |
 
-## Example with DisplayTooltip / DisplayTooltipDefined
+## Example with DisplayTooltip / DisplayTooltipRich
 
 [`DisplayTooltip`](components/display-tooltip.md) and
-[`DisplayTooltipDefined`](components/display-tooltip-defined.md) already emit the
+[`DisplayTooltipRich`](components/display-tooltip-rich.md) already emit the
 `[popover]`/`popovertarget`/`popovertargetaction` markup this composable expects, so no extra
 wiring is needed beyond passing their shared container's ref in. See the `GuidedTour` story in
-`DisplayTooltipDefined.stories.ts` for a full working example — it recreates the old
+`DisplayTooltipRich.stories.ts` for a full working example — it recreates the old
 `app/pages/ui/tooltips.vue` demo page (removed 2026-08-23 when Storybook became the only demo
 surface), mixing one of each component as guide steps.
 

package/.claude/skills/index.md

@@ -97,19 +97,19 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── service-summary.md           — ServiceSummary props, summary-link slot, DisplayPill duration/price (renamed/stripped from ServicesSection — full mode is now ServiceDetail)
     ├── service-detail.md            — ServiceDetail: full service detail page (hero banner, sticky sidebar booking card + related services, closing CTA), headerTag vs subheadingTag split, book-cta/sidebar-note/related-service/final-cta slots
     ├── breadcrumb.md                — Breadcrumb: items (BreadcrumbItem[]) trail, link vs current-page text, CSS token API
-    ├── skip-links.md                — SkipLinks: focus-revealed accessibility skip-nav, links (SkipLink[]) data-driven, homeLink slot, CSS token API
+    ├── skip-links.md                — SkipLinks: focus-revealed accessibility skip-nav, links (SkipLink[]) data-driven, homeLink slot, empty entries dropped, index-safe keys, theme-token colours, viewport-capped wrapping panel, CSS token API
     ├── tabbed-content.md            — TabbedContent (was TabsCore): tablist + panels from indexed slots (itemCount), arrow-key nav, moving hover/active/underline indicators, CSS token API
     ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
     ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, measured connectors (gap, dashed image tokens), per-step state recipe
     ├── progress-tracker.md     — ProgressTracker: steps (ProgressTrackerStep[]) + v-model current index over StepperList, header label + progressbar, current-step #step-{n} slot for wizard forms, focus on change, CSS token API
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, contentIsOnTop overlay mode, slots (summary/icon/content), ARIA wiring, CSS token API
-    ├── content-docs.md         — ContentDocs docs-page shell: prop-driven docsNav/docsPageNav (not slots), DocsNavItem icons, container-width breakpoint behaviour, shared/per-side CSS token API
+    ├── content-docs.md         — ContentDocs docs-page shell: prop-driven docsNav/docsPageNav (not slots), DocsNavItem icons, container-width breakpoint behaviour, shared/per-side CSS token API, content-docs-* classes, aria-current active state
     ├── glass-panel.md          — GlassPanel: frosted-glass container, light-only token defaults in-component (light-dark() block removed from _default.css, no built-in dark glass), highlight behind content, section/article labelled via headingId slot prop, CSS token API
     ├── pricing-card.md         — PricingCard: plan card with highlight badge, corner ribbon, feature list, #cta slot, heading-tag, line-clamp tokens
     ├── price-list.md           — PriceList: service/menu price columns (dl rows), PriceListData type, headingTag/fromLabel props, CSS token API
     ├── opening-hours.md        — OpeningHours: per-day data auto-grouped into ranges, split sessions, 24h/appointment, exceptions, Intl formatting, today highlight, JSON-LD, CSS token API
     ├── input-copy.md           — InputCopy: readonly copy-to-clipboard input with an inline InputButton, copied state + status announcement, translatable labels/icons, container-query icon-only button, --input-copy-* tokens
-    ├── banner-video.md         — BannerVideo: full-width hero video banner, depth tier system, objectFit/objectPosition, playIcon/pauseIcon/toggle-icon slot, reduced-motion fallback, CSS tokens
+    ├── banner-video.md         — BannerVideo: full-width hero video banner, depth tier system, objectFit/objectPosition, playIcon/pauseIcon/toggle-icon slot, playLabel/pauseLabel, reduced-motion fallback, CSS tokens
     ├── grid-stack.md           — GridStack: CSS Grid z-axis stacking, slot API, z-order rules, sizing, video+overlay and image+text patterns
     ├── scroll-reveal-frame.md  — ScrollRevealFrame: generic parallax clipping frame, slot API, image grid pattern, public --scroll-reveal-frame-* tokens (props only write them when passed), browser support
     ├── scroll-reveal-image.md  — ScrollRevealImage: single-image parallax reveal, imgWidth/imgHeight, public focal-x/focal-y crop tokens, frame tokens settable from CSS
@@ -127,7 +127,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── card-core.md            — CardCore: generic card container, dynamic named slots as rows, 4 variants, blurred backdrop layer, full CSS token API
     ├── action-menu.md          — ActionMenu + ActionMenuItem: ellipsis trigger + anchored popover menu, indexed item-{n} slots, link/button items, full CSS token API
     ├── select-menu.md          — SelectMenu: v-model single-select listbox popover (ActionMenu's popover mechanics, InputSelect's selected-option semantics), icon/text/chevron trigger toggles, checkmark on selected option, options-array driven, full CSS token API
-    ├── display-dialog.md       — DisplayDialog: native <dialog> overlay, 5 variants (dialog/modal/confirm/alert/fullscreen), useDialogControls integration, CSS token API
+    ├── display-dialog.md       — DisplayDialog: native <dialog> overlay, 5 variants (dialog/modal/confirm/alert/fullscreen), useDialogControls integration, InputButton close button, viewport-capped panel with wrapping title/content/footer, aria-label fallthrough when untitled, CSS token API
     ├── display-chip.md         — DisplayChip: status indicator chip overlay, CSS trig positioning, circle/square shapes, status colours, icon/label content
     ├── display-pill.md         — DisplayPill: pill/badge label with icon slot, 6 variants, 3 sizes, reversible order, --display-pill-* tokens (variants fall back to base colour/border/ring tokens); data-size/data-variant/data-reversed hooks (2026-10-08, were bare classes), label line-clamp token, -02 ring and outlined-monochrome recipes, StressTest story
     ├── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay), CSS tokens
@@ -142,8 +142,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── display-banner.md         — DisplayBanner: canvas/content stacked overlay banner, conditional slot wrappers, CSS token API
     ├── deep-expanding-menu.md         — DeepExpandingMenu: anchor-positioned popover nav panels, browser support caveat, CSS token API
     ├── deep-expanding-menu-classic.md — DeepExpandingMenuClassic: <details>-based fallback nav, click-outside close, CSS token API
-    ├── display-tooltip.md         — DisplayTooltip: anchor-positioned popover trigger, browser support caveat, CSS token API
-    ├── display-tooltip-defined.md — DisplayTooltipDefined: structured title/body/action tooltip content with close button, composes DisplayTooltip
+    ├── display-tooltip.md         — DisplayTooltip: anchor-positioned popover trigger, browser support caveat, triggerIcon prop, type="button" trigger, hideTrigger removes it from tab order (data-hidden), CSS token API
+    ├── display-tooltip-rich.md    — DisplayTooltipRich (Material 3 rich tooltip, renamed from DisplayTooltipDefined 2026-10-18): structured title/body/action content with InputButton close button, per-field line-clamp tokens, composes DisplayTooltip
     ├── pop-over.md                — PopOver: generic anchor-positioned disclosure panel, consumer-supplied trigger/content slots, placement prop, CSS token API
     ├── input-text.md            — InputText (bare control), InputTextField, InputPasswordField, InputTextAsNumberField: renamed from Core/WithLabel, data-* state hooks, readonly/autocomplete props, leak-free digit filtering, wrapper attr-leak/empty-description/passthrough fixes, rounded+clamped stepping, min/max pass-through, CSS token API, stress stories
     ├── input-button.md           — InputButton (renamed from InputButtonCore 2026-09-28): button/NuxtLink/a; primary filled, secondary outlined, tertiary text-only, inline unstyled; data-* state hooks; shadow ring + border-colour hover; wrapping labels; icon slots; readonly (aria-disabled, activation blocked); tokens

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

@@ -180,9 +180,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 +277,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:
 

package/.claude/skills/testing-add-unit-test.md

@@ -338,6 +338,14 @@ const ids = host.findAll("input").map((input) => input.attributes("id"));
 expect(new Set(ids).size).toBe(ids.length);
 ```
 
+## Testing duplicate `v-for` keys
+
+Duplicate keys don't show on first render, and Vue only warns (and only corrupts the DOM) inside
+the keyed diff's unsorted middle section. A reorder that keeps the first or last item in place can
+be resolved from the ends and never reaches it. Mount with two items sharing the repeatable field,
+then `setProps` with the first and last items swapped, and assert the rendered labels in order
+(`SkipLinks.spec.ts`). With an `href`-only key that test rendered five links instead of four.
+
 ## Mocking browser APIs
 
 ### Global constructors (ResizeObserver, IntersectionObserver, etc.)

package/.vscode/srcdev-component-banner-video.code-snippets

@@ -4,12 +4,24 @@
     "scope": "vue,html",
     "body": [
       "<BannerVideo",
-      "  src=\"$1/videos/hero.mp4\"",
-      "  poster=\"$2/images/hero-poster.jpg\"",
-      "  alt=\"$3Studio interior\"",
-      "  :img-width=\"1920\"",
-      "  :img-height=\"1080\"",
-      "  depth=\"$4md\"",
+      "  src=\"${1:/videos/hero.mp4}\"",
+      "  poster=\"${2:/images/hero-poster.jpg}\"",
+      "  alt=\"${3:Studio interior}\"",
+      "  :img-width=\"${4:1920}\"",
+      "  :img-height=\"${5:1080}\"",
+      "  depth=\"${6|md,xs,sm,lg,xl|}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV BannerVideo Localised Labels": {
+    "description": "BannerVideo with translated pause/play toggle labels (the button's visually hidden accessible name)",
+    "scope": "vue,html",
+    "body": [
+      "<BannerVideo",
+      "  src=\"${1:/videos/hero.mp4}\"",
+      "  poster=\"${2:/images/hero-poster.jpg}\"",
+      "  :play-label=\"${3:t('banner.playVideo')}\"",
+      "  :pause-label=\"${4:t('banner.pauseVideo')}\"",
       "/>"
     ]
   },
@@ -18,10 +30,10 @@
     "scope": "vue,html",
     "body": [
       "<BannerVideo",
-      "  src=\"$1/videos/hero.mp4\"",
-      "  poster=\"$2/images/hero-poster.jpg\"",
-      "  play-icon=\"$3mdi:play-circle\"",
-      "  pause-icon=\"$4mdi:pause-circle\"",
+      "  src=\"${1:/videos/hero.mp4}\"",
+      "  poster=\"${2:/images/hero-poster.jpg}\"",
+      "  play-icon=\"${3:mdi:play-circle}\"",
+      "  pause-icon=\"${4:mdi:pause-circle}\"",
       "/>"
     ]
   },
@@ -29,7 +41,7 @@
     "description": "BannerVideo with the toggle-icon slot fully replacing the toggle button's icon",
     "scope": "vue,html",
     "body": [
-      "<BannerVideo src=\"$1/videos/hero.mp4\" poster=\"$2/images/hero-poster.jpg\">",
+      "<BannerVideo src=\"${1:/videos/hero.mp4}\" poster=\"${2:/images/hero-poster.jpg}\">",
       "  <template #toggle-icon=\"{ isPlaying }\">",
       "    $3",
       "  </template>",
@@ -37,22 +49,23 @@
     ]
   },
   "SRCDEV BannerVideo CSS Override": {
-    "description": "CSS override scaffold for BannerVideo — scope to a page or section class",
+    "description": "CSS override scaffold for BannerVideo — set tokens on a page or section class you own",
     "scope": "css",
     "body": [
-      ".$1my-page {",
-      "  .banner-video {",
-      "    --banner-video-max-height-xs: ;",
-      "    --banner-video-max-height-sm: ;",
-      "    --banner-video-max-height-md: ;",
-      "    --banner-video-max-height-lg: ;",
-      "    --banner-video-max-height-xl: ;",
-      "    --banner-video-toggle-size: ;",
-      "    --banner-video-toggle-offset: ;",
-      "    --banner-video-toggle-background: ;",
-      "    --banner-video-toggle-background-hover: ;",
-      "    --banner-video-toggle-icon-color: ;",
-      "  }",
+      ".${1:my-page} {",
+      "  --banner-video-max-height-xs: ;",
+      "  --banner-video-max-height-sm: ;",
+      "  --banner-video-max-height-md: ;",
+      "  --banner-video-max-height-lg: ;",
+      "  --banner-video-max-height-xl: ;",
+      "  --banner-video-toggle-size: ;",
+      "  --banner-video-toggle-offset: ;",
+      "  --banner-video-toggle-background: ;",
+      "  --banner-video-toggle-background-hover: ;",
+      "  --banner-video-toggle-icon-color: ;",
+      "  --banner-video-toggle-focus-outline-width: ;",
+      "  --banner-video-toggle-focus-outline-color: ;",
+      "  --banner-video-toggle-focus-outline-offset: ;",
       "}"
     ]
   }