srcdev-nuxt-components 9.6.12 → 9.6.13

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

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

@@ -34,5 +34,36 @@
       "  </template>",
       "</DisplayTooltip>"
     ]
+  },
+  "SRCDEV DisplayTooltip Custom Icon": {
+    "description": "DisplayTooltip with a custom trigger icon and localised label",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltip trigger-icon=\"${1:lucide:info}\" trigger-aria-label=\"${2:More information}\">",
+      "  <template #triggerContent>",
+      "    <span>$3</span>",
+      "  </template>",
+      "  <template #tooltipContent>",
+      "    <p>$0</p>",
+      "  </template>",
+      "</DisplayTooltip>"
+    ]
+  },
+  "SRCDEV DisplayTooltip CSS Override": {
+    "description": "CSS override scaffold for DisplayTooltip, scoped to a page or section class",
+    "scope": "css",
+    "body": [
+      ".${1:my-page} {",
+      "  .display-tooltip {",
+      "    --display-tooltip-trigger-icon-box-size: ;",
+      "    --display-tooltip-trigger-icon-colour: ;",
+      "    --display-tooltip-popover-width: ;",
+      "    --display-tooltip-popover-background-colour: ;",
+      "    --display-tooltip-popover-text-colour: ;",
+      "    --display-tooltip-popover-outline-colour: ;",
+      "    --display-tooltip-popover-border-radius: ;",
+      "  }",
+      "}"
+    ]
   }
 }

package/.vscode/srcdev-component-skip-links.code-snippets

@@ -34,7 +34,7 @@
     "description": "CSS override scaffold for SkipLinks — scope to a page or section class",
     "scope": "css",
     "body": [
-      ".$1my-page {",
+      ".${1:my-page} {",
       "  .skip-links {",
       "    --skip-links-z-index: ;",
       "    --skip-links-gap: ;",