srcdev-nuxt-components 9.6.11 → 9.6.13

package/.claude/skills/components/marquee-scroller.md

@@ -10,8 +10,9 @@ type: reference
 
 `MarqueeScroller` renders an infinite horizontal scroller for small repeating items — client
 logos, badges, testimonial avatars. The track is duplicated once so the loop is seamless
-(`marquee-group` renders twice: once real, once `aria-hidden="true"`), and the whole thing pauses
-automatically on hover, on keyboard focus, and when the user has `prefers-reduced-motion` set.
+(`.marquee-scroller-group` renders twice: once real, once `aria-hidden="true"` and `inert`), and the
+whole thing pauses automatically on hover, whenever focus is inside it, and when the user has
+`prefers-reduced-motion` set.
 
 ## Props
 
@@ -24,11 +25,12 @@ automatically on hover, on keyboard focus, and when the user has `prefers-reduce
 | `ariaLabel` | `string` | `"Scrolling content"` | `aria-label` on the root region — override for localisation. |
 | `ariaDescription` | `string` | `"Use spacebar to pause or play the animation."` | Screen-reader-only instructions rendered inside the region — override for localisation. |
 | `showControls` | `boolean` | `false` | Shows a visible pause/play button. Recommended (WCAG 2.2.2, Pause/Stop/Hide) whenever content scrolls automatically and indefinitely. |
-| `respectReducedMotion` | `boolean` | `true` | Auto-pauses and disables the animation for users with `prefers-reduced-motion: reduce`, and pauses on keyboard focus. |
+| `respectReducedMotion` | `boolean` | `true` | Auto-pauses and disables the animation for users with `prefers-reduced-motion: reduce` (and keeps it paused after focus leaves). Focus-pausing no longer depends on it. |
 | `playIcon` | `string` | `"mdi:play"` | Iconify icon name shown on the control button while paused. Ignored if the `toggle-icon` slot is used. |
 | `pauseIcon` | `string` | `"mdi:pause"` | Iconify icon name shown on the control button while playing. Ignored if the `toggle-icon` slot is used. |
-| `playLabel` | `string` | `"Play animation"` | Control button `aria-label` while paused — override for localisation. |
-| `pauseLabel` | `string` | `"Pause animation"` | Control button `aria-label` while playing — override for localisation. |
+| `playLabel` | `string` | `"Play animation"` | Control button text (visually hidden, its accessible name) while paused — override for localisation. |
+| `pauseLabel` | `string` | `"Pause animation"` | Control button text (visually hidden, its accessible name) while playing — override for localisation. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root `.marquee-scroller`, via `useStyleClassPassthrough` (reacts to prop changes). |
 
 Import the item types from the library's type exports when building `marqueeData`/`itemConfig`
 outside the component:
@@ -52,8 +54,10 @@ One dynamically-named slot per `marqueeData` entry, named after that item's `id`
 </MarqueeScroller>
 ```
 
-Each slot is rendered twice (once in the visible group, once in the `aria-hidden` duplicate group)
-so the loop wraps seamlessly — don't put anything with side effects or unique ids inside a slot.
+Each slot is rendered twice (once in the visible group, once in the `aria-hidden`, `inert`
+duplicate group) so the loop wraps seamlessly. Don't put anything with side effects or unique ids
+inside a slot. Links are fine: only the real copy is focusable. Items are fixed-size boxes; text
+wraps inside them (`overflow-wrap: anywhere`) but content taller than `itemConfig.height` overflows.
 
 `toggle-icon` (scoped with `{ isPaused: boolean }`) replaces the control button's icon entirely —
 use this instead of `playIcon`/`pauseIcon` when an Iconify name isn't enough (custom SVG, a
@@ -70,16 +74,25 @@ different icon set):
 ## Accessibility behaviour
 
 - The root is `role="region"` with `tabindex="0"` so it's independently focusable.
-- Spacebar toggles pause/play while the region is focused. Arrow keys do nothing — there is no
+- Spacebar toggles pause/play while the region itself is focused (keydown from inside, e.g. on the
+  control button or a link, is left to that element). Arrow keys do nothing — there is no
   manual-stepping behaviour, so the default `ariaDescription` doesn't claim one (fixed 2026-09-08;
   it previously announced "arrow keys ... for manual control" with no implementation behind it).
-- Focusing the region pauses the animation when `respectReducedMotion` is `true` (the default);
-  blurring resumes it unless the user prefers reduced motion.
+- Focus anywhere inside the region (the region itself, or a link in an item) pauses the animation
+  and removes `aria-hidden` from the track, so the focused content is announced. Focus moving between
+  elements inside keeps it paused. When focus leaves, it resumes only if focus caused the pause and
+  the user doesn't prefer reduced motion: a pause chosen with the button or spacebar sticks.
+  Focus landing on the control button doesn't auto-pause, so one click pauses. (Changed 2026-10-17:
+  this used to listen for `focus`/`blur` on the region only, gated on `respectReducedMotion`, so
+  tabbing to a link in an item left it moving and `aria-hidden`.)
 - Hovering anywhere over the scroller pauses the track and applies
   `--marquee-scroller-group-hover-filter` (default `grayscale(1)`) to every item; hovering an
   individual item restores it via `--marquee-scroller-item-hover-filter` (default `grayscale(0)`).
 - `aria-live` switches to `"polite"` while paused so screen readers announce the paused content.
-- The duplicate track group is always `aria-hidden="true"`.
+- The track is `aria-hidden="true"` while playing (attribute removed when paused). The duplicate
+  group is always `aria-hidden="true"` and `inert`, so its copies of any links can't be focused.
+- The control button is an `InputButton` (`variant="inline"`, icon-only): `playLabel`/`pauseLabel`
+  is its visually hidden text rather than an `aria-label`.
 - All user-visible copy (`ariaLabel`, `ariaDescription`, `playLabel`, `pauseLabel`) is a plain
   string prop with an English default — there's no i18n framework dependency in this library, so
   pass translated strings from the consumer's own i18n solution.
@@ -110,11 +123,11 @@ theme); only its border width is (`--marquee-scroller-control-border-width`).
 
 ## Seamless loop math
 
-The track duplicates `marqueeData` into two `.marquee-group` children so the loop can wrap without
+The track duplicates `marqueeData` into two `.marquee-scroller-group` children so the loop can wrap without
 a visible cut. The animation must shift the track by exactly one group's width plus its connecting
 gap — not `translateX(-50%)`, which overshoots short of the seam once the track's own `gap`
 between the two groups is added to its total width. This is computed as a private
-`--_track-shift: calc(itemCount * (itemWidth + gap))` token and used in the `marqueeMove`
+`--_track-shift: calc(itemCount * (itemWidth + gap))` token and used in the `marquee-scroller-move`
 keyframe. Fixed 2026-09-08 — the original `-50%` version produced a small but visible gap/overlap
 at the loop point once more than a couple of items were in `marqueeData`.
 
@@ -125,6 +138,30 @@ section on a wide viewport), the loop briefly shows empty space before snapping
 the visible track only spans as wide as the content, not the container. On mount (and on
 container resize, via `ResizeObserver`), the component measures one rendered group's `scrollWidth`
 against the root element's `offsetWidth` and repeats `marqueeData` internally (`repeatCount`)
-enough times per `.marquee-group` so a single group's width always covers the container. This is
+enough times per `.marquee-scroller-group` so a single group's width always covers the container. This is
 transparent to consumers — it doesn't change `marqueeData` or any prop, only how many times each
 item's slot is rendered internally. Fixed 2026-09-08.
+
+The repeat count is capped at 50 copies per group, so tiny items in a huge container can't flood
+the DOM (added 2026-10-17).
+
+## Storybook
+
+`Atoms/Effects/MarqueeScroller`: `WithControls`, `FocusableItems` (links in items, for the focus
+behaviour), and `StressTest` (24 items of hostile copy, a broken image, long localised labels, a
+single item, tiny items hitting the repeat cap, and empty data). Stories use the `CanvasSwitcher`
+decorator.
+
+## History
+
+**2026-10-17** (stress-test pass, breaking class renames):
+
+- Structural classes prefixed (`.marquee-scroller-item`, `-control`, `-track`, `-group`,
+  `-description`); bare `.reverse`/`.paused`/`.reduced-motion` became `data-*` attributes; keyframes
+  renamed `marquee-scroller-move`. See CONSUMER-STYLING.md for the full map.
+- Raw `<button>` replaced with `InputButton variant="inline"` (icon-only slot).
+- Focus-pausing reworked (focusin/focusout, see Accessibility behaviour); duplicate group `inert`.
+- `prefers-reduced-motion` change listener is now removed on unmount.
+- New `--marquee-scroller-focus-outline-colour` token (was bare `--theme-ring`).
+- Added `styleClassPassthrough`. Removed the redundant `aspect-ratio: 1 / 1` on items (width and
+  height are both set, and it mis-centres on old Safari). Items wrap unbroken text.

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/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: ;",
       "}"
     ]
   }

package/.vscode/srcdev-component-content-docs.code-snippets

@@ -4,49 +4,51 @@
     "scope": "vue,html",
     "body": [
       "<ContentDocs",
-      "  v-model:active-nav-item=\"$1activeNavItem\"",
-      "  v-model:active-page-nav-item=\"$2activePageNavItem\"",
-      "  :docs-nav-items=\"$3docsNavItems\"",
-      "  :docs-page-nav-items=\"$4docsPageNavItems\"",
+      "  v-model:active-nav-item=\"${1:activeNavItem}\"",
+      "  v-model:active-page-nav-item=\"${2:activePageNavItem}\"",
+      "  :docs-nav-items=\"${3:docsNavItems}\"",
+      "  :docs-page-nav-items=\"${4:docsPageNavItems}\"",
       ">",
       "  <template #docsContent>",
-      "    <p>$5Page content goes here.</p>",
+      "    <p>${5:Page content goes here.}</p>",
       "  </template>",
       "</ContentDocs>"
     ]
   },
-  "SRCDEV ContentDocs Custom Labels" : {
+  "SRCDEV ContentDocs Custom Labels": {
     "description": "ContentDocs with custom docsNav / docsPageNav panel headings",
     "scope": "vue,html",
     "body": [
       "<ContentDocs",
-      "  v-model:active-nav-item=\"$1activeNavItem\"",
-      "  v-model:active-page-nav-item=\"$2activePageNavItem\"",
-      "  :docs-nav-items=\"$3docsNavItems\"",
-      "  :docs-page-nav-items=\"$4docsPageNavItems\"",
-      "  docs-nav-label=\"$5Sections\"",
-      "  docs-page-nav-label=\"$6Contents\"",
+      "  v-model:active-nav-item=\"${1:activeNavItem}\"",
+      "  v-model:active-page-nav-item=\"${2:activePageNavItem}\"",
+      "  :docs-nav-items=\"${3:docsNavItems}\"",
+      "  :docs-page-nav-items=\"${4:docsPageNavItems}\"",
+      "  docs-nav-label=\"${5:Sections}\"",
+      "  docs-page-nav-label=\"${6:Contents}\"",
       ">",
       "  <template #docsContent>",
-      "    <p>$7Page content goes here.</p>",
+      "    <p>${7:Page content goes here.}</p>",
       "  </template>",
       "</ContentDocs>"
     ]
   },
   "SRCDEV ContentDocs Localised Nav Labels": {
-    "description": "ContentDocs with localised aria-labels on the docsNav/docsPageNav <nav> landmarks",
+    "description": "ContentDocs with localised headings and aria-labels on the docsNav/docsPageNav <nav> landmarks",
     "scope": "vue,html",
     "body": [
       "<ContentDocs",
-      "  v-model:active-nav-item=\"$1activeNavItem\"",
-      "  v-model:active-page-nav-item=\"$2activePageNavItem\"",
-      "  :docs-nav-items=\"$3docsNavItems\"",
-      "  :docs-page-nav-items=\"$4docsPageNavItems\"",
-      "  docs-nav-aria-label=\"${5:Docs navigation}\"",
-      "  docs-page-nav-aria-label=\"${6:On this page}\"",
+      "  v-model:active-nav-item=\"${1:activeNavItem}\"",
+      "  v-model:active-page-nav-item=\"${2:activePageNavItem}\"",
+      "  :docs-nav-items=\"${3:docsNavItems}\"",
+      "  :docs-page-nav-items=\"${4:docsPageNavItems}\"",
+      "  :docs-nav-label=\"${5:t('docs.navLabel')}\"",
+      "  :docs-page-nav-label=\"${6:t('docs.pageNavLabel')}\"",
+      "  :docs-nav-aria-label=\"${7:t('docs.navAriaLabel')}\"",
+      "  :docs-page-nav-aria-label=\"${8:t('docs.pageNavAriaLabel')}\"",
       ">",
       "  <template #docsContent>",
-      "    <p>$7Page content goes here.</p>",
+      "    <p>${9:Page content goes here.}</p>",
       "  </template>",
       "</ContentDocs>"
     ]
@@ -56,11 +58,11 @@
     "scope": "typescript,vue",
     "body": [
       "const docsNavItems: DocsNavItem[] = [",
-      "  { label: \"$1Getting started\", to: \"$2/docs\" },",
+      "  { label: \"${1:Getting started}\", to: \"${2:/docs}\" },",
       "];",
       "",
       "const docsPageNavItems: DocsNavItem[] = [",
-      "  { label: \"$3Overview\", to: \"$2/docs#overview\" },",
+      "  { label: \"${3:Overview}\", to: \"${2:/docs}#overview\" },",
       "];",
       "",
       "const activeNavItem = ref<string | undefined>(docsNavItems[0]?.to);",
@@ -72,11 +74,11 @@
     "scope": "typescript,vue",
     "body": [
       "const docsNavItems: DocsNavItem[] = [",
-      "  { label: \"$1Getting started\", to: \"$2/docs\", icon: \"$3lucide:rocket\" },",
+      "  { label: \"${1:Getting started}\", to: \"${2:/docs}\", icon: \"${3:lucide:rocket}\" },",
       "];",
       "",
       "const docsPageNavItems: DocsNavItem[] = [",
-      "  { label: \"$4Overview\", to: \"$2/docs#overview\", icon: \"$5lucide:list\" },",
+      "  { label: \"${4:Overview}\", to: \"${2:/docs}#overview\", icon: \"${5:lucide:list}\" },",
       "];",
       "",
       "const activeNavItem = ref<string | undefined>(docsNavItems[0]?.to);",
@@ -87,13 +89,11 @@
     "description": "CSS override scaffold for ContentDocs nav-link icon tokens (gap, size, and start/end order)",
     "scope": "css",
     "body": [
-      ".$1my-content-docs {",
-      "  .content-docs {",
-      "    --content-docs-link-icon-gap: $2;",
-      "    --content-docs-link-icon-size: $3;",
-      "    --content-docs-nav-link-icon-order: $4rtl; /* icon at the end */",
-      "    --content-docs-page-nav-link-icon-order: $5ltr; /* icon at the start (default) */",
-      "  }",
+      ".${1:my-content-docs} {",
+      "  --content-docs-link-icon-gap: $2;",
+      "  --content-docs-link-icon-size: $3;",
+      "  --content-docs-nav-link-icon-order: ${4:rtl}; /* icon at the end */",
+      "  --content-docs-page-nav-link-icon-order: ${5:ltr}; /* icon at the start (default) */",
       "}"
     ]
   },
@@ -101,27 +101,26 @@
     "description": "CSS override scaffold for ContentDocs heading/panel/link tokens, applied to both docsNav and docsPageNav at once",
     "scope": "css",
     "body": [
-      ".$1my-content-docs {",
-      "  .content-docs {",
-      "    --content-docs-heading-font-size: $2;",
-      "    --content-docs-heading-color: $3;",
-      "    --content-docs-heading-bg: $4;",
-      "    --content-docs-heading-padding-block: $5;",
+      ".${1:my-content-docs} {",
+      "  --content-docs-heading-font-size: $2;",
+      "  --content-docs-heading-color: $3;",
+      "  --content-docs-heading-bg: $4;",
+      "  --content-docs-heading-padding-block: $5;",
       "",
-      "    --content-docs-panel-bg: $6;",
-      "    --content-docs-panel-padding-block: $7;",
-      "    --content-docs-panel-padding-inline: $8;",
+      "  --content-docs-panel-bg: $6;",
+      "  --content-docs-panel-padding-block: $7;",
+      "  --content-docs-panel-padding-inline: $8;",
       "",
-      "    --content-docs-link-font-size: $9;",
-      "    --content-docs-link-color: $10;",
-      "    --content-docs-link-hover-bg: $11;",
-      "    --content-docs-link-active-bg: $12;",
-      "    --content-docs-link-active-color: $13;",
+      "  --content-docs-link-font-size: $9;",
+      "  --content-docs-link-color: $10;",
+      "  --content-docs-link-hover-bg: $11;",
+      "  --content-docs-link-active-bg: $12;",
+      "  --content-docs-link-active-color: $13;",
+      "  --content-docs-link-focus-outline-color: $14;",
       "",
-      "    --content-docs-nav-column-width: $14;",
-      "    --content-docs-page-nav-column-width: $15;",
-      "    --content-docs-page-nav-column-width-tablet: $16;",
-      "  }",
+      "  --content-docs-nav-column-width: $15;",
+      "  --content-docs-page-nav-column-width: $16;",
+      "  --content-docs-page-nav-column-width-tablet: $17;",
       "}"
     ]
   },
@@ -129,17 +128,27 @@
     "description": "CSS override scaffold for independently theming docsNav vs docsPageNav heading/panel/link tokens",
     "scope": "css",
     "body": [
-      ".$1my-content-docs {",
-      "  .content-docs {",
-      "    /* docsNav (primary) */",
-      "    --content-docs-nav-heading-color: $2;",
-      "    --content-docs-nav-panel-bg: $3;",
-      "    --content-docs-nav-link-active-bg: $4;",
+      ".${1:my-content-docs} {",
+      "  /* docsNav (primary) */",
+      "  --content-docs-nav-heading-color: $2;",
+      "  --content-docs-nav-panel-bg: $3;",
+      "  --content-docs-nav-link-active-bg: $4;",
       "",
-      "    /* docsPageNav (on-this-page / secondary) */",
-      "    --content-docs-page-nav-heading-color: $5;",
-      "    --content-docs-page-nav-panel-bg: $6;",
-      "    --content-docs-page-nav-link-active-bg: $7;",
+      "  /* docsPageNav (on-this-page / secondary) */",
+      "  --content-docs-page-nav-heading-color: $5;",
+      "  --content-docs-page-nav-panel-bg: $6;",
+      "  --content-docs-page-nav-link-active-bg: $7;",
+      "}"
+    ]
+  },
+  "SRCDEV ContentDocs CSS Override — Active Link": {
+    "description": "Style the active ContentDocs link beyond its tokens: select [aria-current=\"page\"], there is no .is-active class",
+    "scope": "css",
+    "body": [
+      ".${1:my-content-docs} {",
+      "  .content-docs-nav-link[aria-current=\"page\"],",
+      "  .content-docs-page-nav-link[aria-current=\"page\"] {",
+      "    $2",
       "  }",
       "}"
     ]

package/.vscode/srcdev-component-display-dialog.code-snippets

@@ -19,7 +19,7 @@
     ]
   },
   "SRCDEV DisplayDialog Confirm Template": {
-    "description": "DisplayDialog confirm variant — content-sized, requires explicit action",
+    "description": "DisplayDialog confirm variant — compact (max 48rem), dismissable with Escape or outside-click",
     "scope": "vue,html",
     "body": [
       "<DisplayDialog",
@@ -114,10 +114,12 @@
       "    --display-dialog-backdrop-blur: ;",
       "    --display-dialog-transition-duration: ;",
       "",
-      "    .inner {",
-      "      .header {}",
-      "      .dialog-content {}",
-      "      .footer {}",
+      "    --display-dialog-header-accent-color: ;",
+      "",
+      "    .display-dialog-inner {",
+      "      .display-dialog-header {}",
+      "      .display-dialog-content {}",
+      "      .display-dialog-footer {}",
       "    }",
       "  }",
       "}"

package/.vscode/srcdev-component-display-tooltip-rich.code-snippets

@@ -0,0 +1,50 @@
+{
+  "SRCDEV DisplayTooltipRich Basic": {
+    "description": "DisplayTooltipRich — structured title/body/action tooltip",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltipRich",
+      "  :content-text=\"{",
+      "    tooltipTitle: { tag: 'h4', text: '$1' },",
+      "    tooltipContent: { tag: 'p', text: '$0' },",
+      "  }\"",
+      "/>"
+    ]
+  },
+  "SRCDEV DisplayTooltipRich Localised Copy": {
+    "description": "DisplayTooltipRich with localised trigger/close-button copy and a custom trigger icon",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltipRich",
+      "  :content-text=\"{",
+      "    tooltipTitle: { tag: 'h4', text: '$1' },",
+      "    tooltipContent: { tag: 'p', text: '$2' },",
+      "  }\"",
+      "  trigger-aria-label=\"${3:Toggle the popover}\"",
+      "  close-button-text=\"${4:Close}\"",
+      "  close-button-aria-label=\"${5:Close tool tip}\"",
+      "  trigger-icon=\"${6:fa7-solid:circle-question}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV DisplayTooltipRich CSS Override": {
+    "description": "CSS override scaffold for DisplayTooltipRich, scoped to a page or section class",
+    "scope": "css",
+    "body": [
+      ".${1:my-page} {",
+      "  .display-tooltip-rich {",
+      "    --display-tooltip-rich-content-gap: ;",
+      "    --display-tooltip-rich-title-colour: ;",
+      "    --display-tooltip-rich-title-font-size: ;",
+      "    --display-tooltip-rich-title-line-clamp: ${2:none};",
+      "    --display-tooltip-rich-body-font-size: ;",
+      "    --display-tooltip-rich-body-line-clamp: ${3:none};",
+      "    --display-tooltip-rich-action-colour: ;",
+      "    --display-tooltip-rich-action-line-clamp: ${4:none};",
+      "    --display-tooltip-popover-background-colour: ;",
+      "    --display-tooltip-popover-text-colour: ;",
+      "  }",
+      "}"
+    ]
+  }
+}