srcdev-nuxt-components 9.4.4 → 9.4.6

package/.claude/skills/components/display-tooltip.md

@@ -0,0 +1,85 @@
+---
+name: DisplayTooltip
+description: DisplayTooltip anchor-positioned popover trigger, browser support caveat, CSS token API
+type: reference
+---
+
+# DisplayTooltip
+
+## Overview
+
+`DisplayTooltip` renders a trigger button that opens an anchor-positioned popover panel, built on
+the native Popover API (`popover`/`popovertarget`) and CSS anchor-positioning
+(`anchor-name`/`position-anchor`/`anchor()`). For a structured title/body/action content shape
+with a built-in close button, see [`DisplayTooltipDefined`](display-tooltip-defined.md), which
+composes this component.
+
+**Browser support caveat:** CSS anchor-positioning and the Popover API are both comparatively
+recent — check current browser support before relying on this where broad support is a hard
+requirement, same caution as `DeepExpandingMenu`'s equivalent gap.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tooltipId` | `string` | `""` | Id linking the trigger button (`popovertarget`) to the popover panel (`id`). Auto-generated via `useId()` when omitted. |
+| `hideTrigger` | `boolean` | `false` | Visually hides the trigger button (kept in the DOM, not removed) — e.g. when an equivalent trigger is supplied via the `triggerContent` slot. |
+| `triggerAriaLabel` | `string` | `"Toggle the popover"` | aria-label on the trigger button — override for localisation. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `triggerContent` | Optional content rendered before the trigger button (e.g. a label the tooltip icon sits next to). |
+| `tooltipContent` | Content rendered inside the popover panel. |
+
+## Basic usage
+
+```vue
+<DisplayTooltip>
+  <template #triggerContent>
+    <span>Delivery cost</span>
+  </template>
+  <template #tooltipContent>
+    <p>Free delivery on orders over £50.</p>
+  </template>
+</DisplayTooltip>
+```
+
+## CSS custom properties
+
+See `CONSUMER-STYLING.md` for the full `--display-tooltip-*` token API (padding, gaps, icon size,
+popover width/colours/radius, and the close-button tokens `DisplayTooltipDefined` uses).
+
+## Notes
+
+- Auto-imported in Nuxt — no manual import needed.
+- `tooltipId` is only reactive at mount — changing it after mount does not regenerate the linked
+  `popovertarget`/`id` pair reactively beyond Vue's normal re-render, since both derive from the
+  same computed.
+- 2026-09-07 migration: moved from an unplaced top-level folder into `01.atoms/display-tooltip/`;
+  converted options-style `defineProps` to `interface Props` + `withDefaults`; fixed a real
+  accessibility bug where the trigger button's hover/focus-visible state set `outline-offset` but
+  never an `outline-color` (it stayed `transparent`), so the focus indicator was never actually
+  visible; fixed two custom properties (`--nuxt-text-header`, `--nuxt-text-accessibility-blue`)
+  that referenced tokens never declared anywhere in this repo (same class of bug as
+  `AnimatedSvgText`, CLAUDE.md pitfall #21) — both now default to the real `--theme-text` token;
+  removed a dead, unused `ref="popover1"` template ref; added the missing
+  `resetElementClasses`/`watch` pairing for `styleClassPassthrough` (present on every other
+  component in this library but missing here); promoted ~20 previously-hardcoded values to public
+  CSS tokens; the previously-dead `hideTooltipTrigger` ref (declared, never mutated) is now the
+  `hideTrigger` prop.
+- 2026-09-07 (same day, follow-up): the initial migration carried over the original's bare,
+  under-styled look (raw `light-dark(black, white)` outline/text/background, no padding on the
+  content wrapper, no shadow) — it worked but didn't read as "a tooltip." Reworked the popover's
+  default appearance: background/text/border now use the library's neutral `--slate-*` scale
+  instead of pure black/white; `.display-tooltip-popover-content` gained default `padding`,
+  `display: flex; flex-direction: column;`, and `gap` (new `--display-tooltip-popover-padding`/
+  `-content-gap` tokens); the popover gained a default elevation `box-shadow` (new
+  `--display-tooltip-popover-shadow` token); the close button's permanent resting outline was
+  dropped in favour of a normal border, with the outline reserved for hover/focus (matching the
+  trigger button's own convention). All existing token names are unchanged — only their default
+  values and two new tokens were added, so this is non-breaking for anyone who already overrode a
+  token.
+- File: `app/components/01.atoms/display-tooltip/DisplayTooltip.vue`

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

@@ -0,0 +1,130 @@
+---
+name: MarqueeScroller
+description: MarqueeScroller infinite horizontal logo/badge scroller — props, dynamic per-item slots, accessibility controls, CSS tokens, consumer styling
+type: reference
+---
+
+# MarqueeScroller
+
+## Overview
+
+`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.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `animationRuntime` | `string` | `"40s"` | CSS `animation-duration` for one full loop of the track. |
+| `reverse` | `boolean` | `false` | Reverses the scroll direction. |
+| `marqueeData` | `MarqueeItem[]` (`{ id: number; content: string }[]`) | `[]` | The items to render. Each item's `id` names the slot that renders its markup. `content` is not rendered by the component itself — it's a convenience field for the consumer to key off inside the slot. |
+| `itemConfig` | `MarqueeItemConfig` (`{ width?, height?, gap? }`) | `{ width: "50px", height: "50px", gap: "16px" }` | Item box size and the gap between items. Also sets the track height. |
+| `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. |
+| `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. |
+
+Import the item types from the library's type exports when building `marqueeData`/`itemConfig`
+outside the component:
+
+```ts
+import type { MarqueeItem, MarqueeItemConfig } from "srcdev-nuxt-components";
+```
+
+## Slots
+
+One dynamically-named slot per `marqueeData` entry, named after that item's `id`:
+
+```vue
+<MarqueeScroller :marquee-data="[{ id: 1, content: 'logo-a' }, { id: 2, content: 'logo-b' }]">
+  <template #1>
+    <img src="/logos/a.svg" alt="Logo A" />
+  </template>
+  <template #2>
+    <img src="/logos/b.svg" alt="Logo B" />
+  </template>
+</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.
+
+`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
+different icon set):
+
+```vue
+<MarqueeScroller show-controls>
+  <template #toggle-icon="{ isPaused }">
+    <Icon :name="isPaused ? 'lucide:play' : 'lucide:pause'" />
+  </template>
+</MarqueeScroller>
+```
+
+## 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
+  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.
+- 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"`.
+- 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.
+
+## Basic usage
+
+```vue
+<MarqueeScroller
+  :marquee-data="[
+    { id: 1, content: 'acme' },
+    { id: 2, content: 'globex' },
+  ]"
+  :item-config="{ width: '120px', height: '60px', gap: '24px' }"
+  show-controls
+>
+  <template #1><img src="/logos/acme.svg" alt="Acme" /></template>
+  <template #2><img src="/logos/globex.svg" alt="Globex" /></template>
+</MarqueeScroller>
+```
+
+## CSS custom properties
+
+See `CONSUMER-STYLING.md` in this component's folder for the full public token table. Item size,
+gap, and animation duration are prop-driven (`itemConfig`, `animationRuntime`), not tokens, since
+they also drive the component's own layout math. The `prefers-contrast: high` override's
+`ButtonFace`/`ButtonText` colours are deliberately not tokens (they track the OS high-contrast
+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
+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`
+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`.
+
+## Auto-repeating marqueeData in a wide container
+
+If a single pass of `marqueeData` is narrower than the container (few items, or a full-bleed
+section on a wide viewport), the loop briefly shows empty space before snapping back into view —
+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
+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.

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

@@ -17,6 +17,7 @@ active-route highlighting, hover indicator).
 |------|------|---------|-------|
 | `mainNavigationState` | `ResponsiveHeaderState` | `{ clonedNavLinks: {}, navListVisibility: {}, hasSecondNav: false }` | Shared geometry/visibility state, normally supplied by the parent `ResponsiveHeader` — not something a consumer constructs by hand outside of tests/stories. |
 | `panelVariant` | `"modern" \| "classic"` | `"classic"` | Which panel component renders a dropdown's submenu: `ExpandingPanel` (`"modern"`) or `ExpandingPanelClassic` (`"classic"`, default). `"modern"` is known not to work correctly on WebKit. Normally set via `ResponsiveHeader`'s own `panelVariant` prop rather than directly. See CLAUDE.md pitfall #19. |
+| `ariaLabel` | `string` | `"Overflow navigation menu"` | aria-label on the root `role="menu"` element — override for localisation. Normally set via `ResponsiveHeader`'s own `overflowMenuAriaLabel` prop rather than directly. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.overflow-navigation-wrapper` element. |
 
 ---

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

@@ -107,6 +107,9 @@ buggy toggle-based version too.
 | `collapseAtMainNavIntersection` | `boolean` | `false` | Like `collapseBreakpoint`, but the breakpoint is derived automatically from the main nav's own measured width rather than a fixed number. |
 | `allowExpandOnGesture` | `boolean` | `true` | When `true`, hovering/focusing a dropdown summary opens it (in addition to click). When `false`, only click toggles it. |
 | `panelVariant` | `"modern" \| "classic"` | `"classic"` | Forwarded to `NavigationItems` for its dropdown submenu panels: `ExpandingPanel` (`"modern"`) or `ExpandingPanelClassic` (`"classic"`, default). `"modern"` is known not to work correctly on WebKit. See CLAUDE.md pitfall #19. |
+| `mainNavAriaLabel` | `string` | `"Main navigation"` | aria-label on the primary nav landmark — override for localisation. |
+| `secondaryNavAriaLabel` | `string` | `"Secondary navigation"` | aria-label on the secondary (overflow) nav landmark — override for localisation. |
+| `overflowMenuAriaLabel` | `string` | `"Overflow navigation menu"` | Forwarded to `NavigationItems`' `ariaLabel` — override for localisation. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.navigation` element. |
 
 ## Slots

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

@@ -23,6 +23,10 @@ Branding (logo/wordmark) is entirely consumer-authored via the `#branding` slot
 | `pageRowVariant` | `"full" \| "popout" \| "content" \| "inset-content"` | `"content"` | Forwarded to the root `PageRow`'s `variant` prop. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes on the root `PageRow` — targets `--site-header-*` tokens (see `CONSUMER-STYLING.md`). |
 | `navStyleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes on the nested `ResponsiveHeader` — targets its own `--responsive-header-*`/`--overflow-nav-*` tokens. |
+| `homeNavAriaLabel` | `string` | `"Home Navigation"` | aria-label on the home/branding nav landmark — override for localisation. |
+| `mainNavAriaLabel` | `string` | `"Main navigation"` | Forwarded to `ResponsiveHeader`'s `mainNavAriaLabel` — override for localisation. |
+| `secondaryNavAriaLabel` | `string` | `"Secondary navigation"` | Forwarded to `ResponsiveHeader`'s `secondaryNavAriaLabel` — override for localisation. |
+| `overflowMenuAriaLabel` | `string` | `"Overflow navigation menu"` | Forwarded to `ResponsiveHeader`'s `overflowMenuAriaLabel` — override for localisation. |
 
 ---
 

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

@@ -16,6 +16,7 @@ Both the horizontal list and the panel include animated active/hover indicator d
 |---|---|---|---|
 | `navItemData` | `NavItemData` | — (required) | Navigation items — see type below |
 | `navAlign` | `"left" \| "center" \| "right"` | `"left"` | Alignment of the horizontal nav list |
+| `ariaLabel` | `string` | `"Site navigation"` | aria-label on the root `<nav>` landmark — override for localisation |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root `<nav>` |
 
 ## NavItemData type

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

@@ -40,6 +40,7 @@ interface NavItemData {
 | `nav-item-data` | `NavItemData` | required | Navigation link data — only `main` key is read |
 | `nav-align` | `"left" \| "center" \| "right"` | `"left"` | Positions the tab list within the nav container |
 | `anchor-scroll-offset` | `number \| (() => number)` | — | Pixel offset subtracted from scroll target; pass a getter so it is re-evaluated at click time |
+| `aria-label` | `string` | `"Site navigation"` | aria-label on the root `<nav>` landmark — override for localisation |
 | `:style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root `<nav>` element |
 
 ---

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

@@ -89,6 +89,16 @@ 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
+
+[`DisplayTooltip`](components/display-tooltip.md) and
+[`DisplayTooltipDefined`](components/display-tooltip-defined.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
+`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.
+
 ## Notes
 
 - If no trigger button is found for a popover, `togglePopover(true)` is called directly as a fallback — anchor positioning may not apply in this case.

package/.claude/skills/index.md

@@ -63,6 +63,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── composable-analytics.md           — useAnalytics: provider-agnostic trackEvent/page-view tracking (google-analytics only implemented), consent-gated, single call site for setup + firing events
 └── components/
     ├── alert-content-inner.md    — AlertContentInner: shared icon/body/dismiss molecule under AlertContent + AlertMaskedContent; app.config icon map (alertContent.icons + dismissIcon) covers all consumers
+    ├── animated-svg-text.md    — AnimatedSvgText: inline SVG stroke-draw-then-fill animation, text slot, CSS token API
     ├── accordian-core.md       — AccordianCore indexed dynamic slots (accordian-{n}-summary/icon/content), exclusive-open grouping
     ├── eyebrow-text.md         — EyebrowText props, usage patterns, styling
     ├── hero-text.md            — HeroText props, usage patterns, styling
@@ -88,6 +89,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── 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, CSS tokens, browser support
     ├── scroll-reveal-image.md  — ScrollRevealImage: single-image parallax reveal, focalX, imgWidth/imgHeight, responsive frame height
+    ├── marquee-scroller.md     — MarqueeScroller: infinite logo/badge scroller, per-item dynamic slots (marqueeData id), hover/focus/keyboard pause, reduced-motion, CSS tokens
     ├── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
     ├── tab-navigation.md       — TabNavigation: horizontal tab nav with CSS anchor-positioning indicators, anchor scroll, burger collapse, full CSS token API
     ├── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens
@@ -109,7 +111,12 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── site-header.md            — SiteHeader: PageRow + SkipLinks + ResponsiveHeader composition, #branding/#secondaryNavigation slots, dual styleClassPassthrough hooks
     ├── responsive-header.md      — ResponsiveHeader: overflow-collapsing adaptive nav, measurement-pipeline gotchas (unsized icons, vw font-size drift), full CSS token API
     ├── navigation-items.md       — NavigationItems: internal overflow-panel renderer for ResponsiveHeader, complement-visibility logic, not used standalone
-    └── cookie-consent-banner.md  — CookieConsentBanner: fixed non-modal Accept/Reject banner driven by useCookieConsent, message/acceptLabel/rejectLabel slots, CSS token API
+    ├── cookie-consent-banner.md  — CookieConsentBanner: fixed non-modal Accept/Reject banner driven by useCookieConsent, message/acceptLabel/rejectLabel slots, CSS token API
+    ├── 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
 ```
 
 ## Skill file template

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

@@ -240,3 +240,33 @@ Key points:
   them in the Storybook controls panel (e.g. `"Model"`, `"Basic"`, `"Validation"`, `"Styling"`, `"Slots"`).
 - Export multiple named stories (`Default`, `WithError`, `Outlined`, etc.) when you want
   Playwright to test distinct visual states via separate story URLs.
+
+## Scroll/animation-driven effects need surrounding chrome, not just the bare component
+
+A story that renders a scroll- or timer-driven component with no other markup often fails to
+show the effect at all — not because the component is broken, but because the demo gives the
+viewer nothing to judge it against. Things that make an animated/scroll-driven effect illegible
+in isolation:
+
+- The effect resolves over a short distance/time relative to the page (e.g. a 100px scroll
+  window on an otherwise-long page) — easy to scroll straight past it.
+- The visual change is a subtle crop/shift on photographic content, where the eye has no
+  reference point to notice a boundary moving.
+- There's no indicator of *where* or *when* the effect completes.
+
+Add scaffolding around the component to fix this, rather than assuming a bigger/slower prop
+value alone solves it:
+
+- A fixed marker (a line, label) at the point in the viewport where the effect's key transition
+  happens (e.g. `position: fixed; top: 0` for a component that resolves when its own top hits
+  the viewport top).
+- A ruled/striped overlay or contrasting background behind the animated content so a boundary
+  (clip edge, wipe line, fade) is visible against it, not just a crop of photo pixels.
+- Short on-page instructions telling the viewer what to do and what to watch for ("scroll
+  slowly — the image clips in over the last 100px before the red line").
+- A second story with an exaggerated prop value (larger distance/duration) purely so the effect
+  is easy to preview without precise scrolling/timing — see `ClipElement`'s `LargeClipDistance`
+  story for the pattern (`.claude/skills/components/clip-element.md`).
+
+This is a documentation-only concern — it doesn't change the component's default props, just
+how the story demonstrates it.

package/.vscode/srcdev-component-animated-svg-text.code-snippets

@@ -0,0 +1,15 @@
+{
+  "SRCDEV AnimatedSvgText": {
+    "description": "AnimatedSvgText — stroke-draw-then-fill animation for inline SVG text/path content",
+    "scope": "vue,html",
+    "body": [
+      "<AnimatedSvgText>",
+      "  <template #text>",
+      "    <svg viewBox=\"0 0 $1600 $2150\">",
+      "      <path d=\"$3\" />",
+      "    </svg>",
+      "  </template>",
+      "</AnimatedSvgText>"
+    ]
+  }
+}

package/.vscode/srcdev-component-breadcrumb.code-snippets

@@ -10,5 +10,18 @@
       "  ]\"",
       "/>"
     ]
+  },
+  "SRCDEV Breadcrumb Localised": {
+    "description": "Breadcrumb with a localised aria-label",
+    "scope": "vue,html",
+    "body": [
+      "<Breadcrumb",
+      "  :items=\"[",
+      "    { label: '$1Services', to: '$2/services' },",
+      "    { label: '$3${TM_FILENAME_BASE}' },",
+      "  ]\"",
+      "  aria-label=\"${4:Breadcrumb}\"",
+      "/>"
+    ]
   }
 }

package/.vscode/srcdev-component-canvas-switcher.code-snippets

@@ -0,0 +1,9 @@
+{
+  "SRCDEV CanvasSwitcher": {
+    "description": "CanvasSwitcher — v-model:canvas-name icon button group for MediaCanvas preview widths",
+    "scope": "vue,html",
+    "body": [
+      "<CanvasSwitcher v-model:canvas-name=\"${1:canvasName}\" />"
+    ]
+  }
+}

package/.vscode/srcdev-component-clip-element.code-snippets

@@ -0,0 +1,20 @@
+{
+  "SRCDEV ClipElement Basic": {
+    "description": "ClipElement — scroll-driven clip-path reveal for a single image or block",
+    "scope": "vue,html",
+    "body": [
+      "<ClipElement :max-clip=\"$1100\">",
+      "  <img src=\"$2/images/hero.jpg\" alt=\"$3Hero\" style=\"width: 100%; display: block;\" />",
+      "</ClipElement>"
+    ]
+  },
+  "SRCDEV ClipElement With Passthrough": {
+    "description": "ClipElement with styleClassPassthrough for a custom wrapper class",
+    "scope": "vue,html",
+    "body": [
+      "<ClipElement :max-clip=\"$1150\" style-class-passthrough=\"$2my-clip-wrapper\">",
+      "  $0",
+      "</ClipElement>"
+    ]
+  }
+}

package/.vscode/srcdev-component-clipped-panel.code-snippets

@@ -0,0 +1,23 @@
+{
+  "SRCDEV ClippedPanel Basic": {
+    "description": "ClippedPanel — fixed-size notched/cutout shape panel",
+    "scope": "vue,html",
+    "body": [
+      "<ClippedPanel variant=\"$1square\">",
+      "  $0",
+      "</ClippedPanel>"
+    ]
+  },
+  "SRCDEV ClippedPanel Custom Colours": {
+    "description": "ClippedPanel with background/outline colour overrides",
+    "scope": "vue,html",
+    "body": [
+      "<ClippedPanel",
+      "  variant=\"$1square\"",
+      "  style=\"--clipped-panel-background-colour: $2#fef3e7; --clipped-panel-outline-colour: $3#b5651d;\"",
+      ">",
+      "  $0",
+      "</ClippedPanel>"
+    ]
+  }
+}

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

@@ -33,6 +33,24 @@
       "</ContentDocs>"
     ]
   },
+  "SRCDEV ContentDocs Localised Nav Labels": {
+    "description": "ContentDocs with localised 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}\"",
+      ">",
+      "  <template #docsContent>",
+      "    <p>$7Page content goes here.</p>",
+      "  </template>",
+      "</ContentDocs>"
+    ]
+  },
   "SRCDEV ContentDocs Items Script": {
     "description": "docsNavItems / docsPageNavItems + active-item refs for ContentDocs",
     "scope": "typescript,vue",

package/.vscode/srcdev-component-deep-expanding-menu-classic.code-snippets

@@ -0,0 +1,9 @@
+{
+  "SRCDEV DeepExpandingMenuClassic Basic": {
+    "description": "DeepExpandingMenuClassic — <details>-based fallback nav",
+    "scope": "vue,html",
+    "body": [
+      "<DeepExpandingMenuClassic :nav-links=\"$1navLinks\" />"
+    ]
+  }
+}

package/.vscode/srcdev-component-deep-expanding-menu.code-snippets

@@ -0,0 +1,9 @@
+{
+  "SRCDEV DeepExpandingMenu Basic": {
+    "description": "DeepExpandingMenu — anchor-positioned popover nav panels",
+    "scope": "vue,html",
+    "body": [
+      "<DeepExpandingMenu :nav-links=\"$1navLinks\" />"
+    ]
+  }
+}

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

@@ -0,0 +1,30 @@
+{
+  "SRCDEV DisplayBanner Basic": {
+    "description": "DisplayBanner — canvas/content stacked overlay banner",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayBanner>",
+      "  <template #canvas>",
+      "    $1",
+      "  </template>",
+      "  <template #content>",
+      "    $0",
+      "  </template>",
+      "</DisplayBanner>"
+    ]
+  },
+  "SRCDEV DisplayBanner Min Height": {
+    "description": "DisplayBanner with min-height override",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayBanner style=\"--display-banner-min-height: $140rem;\">",
+      "  <template #canvas>",
+      "    $2",
+      "  </template>",
+      "  <template #content>",
+      "    $0",
+      "  </template>",
+      "</DisplayBanner>"
+    ]
+  }
+}

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

@@ -0,0 +1,29 @@
+{
+  "SRCDEV DisplayTooltipDefined Basic": {
+    "description": "DisplayTooltipDefined — structured title/body/action tooltip",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltipDefined",
+      "  :content-text=\"{",
+      "    tooltipTitle: { tag: 'h4', text: '$1' },",
+      "    tooltipContent: { tag: 'p', text: '$0' },",
+      "  }\"",
+      "/>"
+    ]
+  },
+  "SRCDEV DisplayTooltipDefined Localised Copy": {
+    "description": "DisplayTooltipDefined with localised trigger/close-button copy",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltipDefined",
+      "  :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}\"",
+      "/>"
+    ]
+  }
+}

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

@@ -0,0 +1,38 @@
+{
+  "SRCDEV DisplayTooltip Basic": {
+    "description": "DisplayTooltip — anchor-positioned popover trigger",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltip>",
+      "  <template #tooltipContent>",
+      "    <p>$0</p>",
+      "  </template>",
+      "</DisplayTooltip>"
+    ]
+  },
+  "SRCDEV DisplayTooltip With Trigger Content": {
+    "description": "DisplayTooltip with a triggerContent label",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltip>",
+      "  <template #triggerContent>",
+      "    <span>$1</span>",
+      "  </template>",
+      "  <template #tooltipContent>",
+      "    <p>$0</p>",
+      "  </template>",
+      "</DisplayTooltip>"
+    ]
+  },
+  "SRCDEV DisplayTooltip Localised Trigger Label": {
+    "description": "DisplayTooltip with a localised triggerAriaLabel",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltip trigger-aria-label=\"${1:Toggle the popover}\">",
+      "  <template #tooltipContent>",
+      "    <p>$0</p>",
+      "  </template>",
+      "</DisplayTooltip>"
+    ]
+  }
+}