srcdev-nuxt-components 9.4.5 → 9.4.7

package/.claude/skills/components/masonry-grid.md

@@ -0,0 +1,153 @@
+---
+name: MasonryGrid
+description: MasonryGrid — real measured-height masonry layout (greedy shortest-column packing, animated resize), named dynamic slots, itemMinWidth/gap/fixedWidth/justify, CSS token API
+type: reference
+---
+
+# MasonryGrid
+
+## Overview
+
+`MasonryGrid` is a genuine masonry layout: each item is measured (its real rendered height) and
+placed into whichever column is currently shortest — a greedy bin-pack, the same technique
+Pinterest-style layouts use. This is different from (and better than) laying items out with CSS
+`columns`, which just fills one column's accumulated height before starting the next and has no
+awareness of "shortest column."
+
+Because placement follows natural DOM order directly (item 1 gets measured and placed first, then
+item 2, etc.), there's no reordering trick needed to keep visual and reading order in sync — DOM
+order *is* the packing order, so a screen reader or `Tab` key always encounters items 1, 2, 3...
+in the order they were authored, regardless of which column each one's height ends up landing it
+in visually.
+
+**History**: this component absorbed the implementation from `MasonryGridOrdered` (now retired —
+see **Migration history** below), replacing a CSS-`columns`-based reorder trick this component
+used previously (see `git log` / `ColumnFlowGrid`'s history for that era).
+
+## When to use this vs. `ColumnFlowGrid`
+
+- Use **`ColumnFlowGrid`** (`.claude/skills/components/column-flow-grid.md`) when you don't need
+  true masonry packing or animated reflow — a lighter CSS `columns`-only layout, no JS
+  measurement, no resize animation.
+- Use **`MasonryGrid`** when you want genuine Pinterest-style packing with items animating into
+  new positions on resize.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tag` | `"div" \| "section" \| "article" \| "main"` | `"div"` | HTML element rendered as the root. |
+| `itemMinWidth` | `number` | `300` | Minimum tile width in pixels — also the fixed tile width when `fixedWidth` is set. |
+| `gap` | `number` | `12` | Gap between tiles in pixels. |
+| `fixedWidth` | `boolean` | `false` | Keep every tile at exactly `itemMinWidth` instead of stretching to fill each column. |
+| `justify` | `"left" \| "center" \| "right"` | `"left"` | How the block of tiles aligns within the wrapper — only visible when `fixedWidth` is set (tiles otherwise stretch to fill the full width, so there's nothing to align). |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
+
+## Slot API
+
+Any named slot is accepted — there are no declared slot names, and **no count/data prop to keep
+in sync**. Give slots in whatever order you want them read/tabbed through:
+
+```vue
+<MasonryGrid>
+  <template #item-1>...</template>
+  <template #item-2>...</template>
+  <template #item-3>...</template>
+</MasonryGrid>
+```
+
+## Basic usage
+
+```vue
+<MasonryGrid :item-min-width="280" :gap="16">
+  <template v-for="(photo, i) in photos" :key="photo.id" #[`item-${i}`]>
+    <img :src="photo.src" :alt="photo.alt" />
+  </template>
+</MasonryGrid>
+```
+
+### Fixed-width, centered
+
+```vue
+<MasonryGrid :fixed-width="true" justify="center" :item-min-width="240">
+  <template v-for="(card, i) in cards" :key="card.id" #[`item-${i}`]>
+    <Card v-bind="card" />
+  </template>
+</MasonryGrid>
+```
+
+## CSS Token Customization
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--masonry-grid-item-border-colour` | `var(--theme-border)` | Outline colour around each item |
+| `--masonry-grid-item-padding` | `1.2rem` | Inner padding of each item |
+| `--masonry-grid-transition-duration` | `0.3s` | How long an item takes to slide into its new position on resize |
+
+Column width, gap, fixed-width mode, and alignment are controlled via props, not CSS custom
+properties, since column count and item positions are computed in JS from measured pixel values.
+See `CONSUMER-STYLING.md` in the component folder.
+
+## Accessibility
+
+- The resize/reflow animation (`--masonry-grid-transition-duration`) is wrapped in
+  `@media (prefers-reduced-motion: no-preference)` — a visitor with reduced motion enabled sees
+  items snap to their new position with no transition.
+- DOM/tab order always matches slot authoring order (see Overview) — no additional ARIA is needed
+  to communicate item order.
+
+## Notes
+
+- **How positioning works**: on mount and on every measured resize, each item is read (`item.
+  offsetHeight`) in DOM order and placed at the top of whichever column currently has the least
+  accumulated height, via inline `--_position-top`/`--_position-left`/`--_element-width` custom
+  properties the component sets directly (not part of the public token API — these are internal
+  positioning state, not a styling surface). Column steps are computed in real pixels
+  (`itemWidth + gap`) rather than equal percentage slots of the container — a percentage slot only
+  matches the item's actual width when the item stretches to fill it (the default, non-`fixedWidth`
+  case); with `fixedWidth`, `justify`'s left/center/right offset is also computed here in JS
+  (`(wrapperWidth - totalContentWidth) / 2` for `center`, etc.), not via CSS `justify-content` —
+  that property has no effect on children once `position: absolute` takes them out of grid flow,
+  so it doesn't work here regardless of how it's set.
+- **Single-column fallback**: below the width needed for a second `itemMinWidth` column plus gap,
+  items render in normal CSS Grid flow (no absolute positioning) at a single, always-full-width
+  column (`grid-template-columns: 1fr`, ignoring `itemMinWidth` entirely) — there's nothing to
+  pack with only one column, so it always just fills the container rather than applying
+  `itemMinWidth`'s floor. `itemMinWidth` starts governing column width only once there's an actual
+  multi-column choice to make (two columns up).
+- **Column count is a JS estimate**: `Math.floor(measuredWidth / (itemMinWidth + gap))`. This
+  drives an underlying CSS Grid (`grid-template-columns`, with `768px`/`1024px`/`1280px` container
+  query breakpoints) as a no-JS-yet initial layout, which JS then overrides with absolute
+  positioning once it has real measurements — so there's no flash of unstyled/overlapping content
+  before the first `updateGrid()` run.
+- **Images without explicit dimensions** will change height after they load, but nothing currently
+  re-triggers a re-pack when that happens (only container resize does) — a known limitation
+  inherited from the original implementation. Set explicit `width`/`height` on images inside slots
+  to avoid this, or file a follow-up if it becomes a real problem.
+- **Migration history**: this component's algorithm was ported from `MasonryGridOrdered`
+  (`app/components/masonry-grid-ordered/MasonryGridOrdered.vue`), which is now retired along with
+  its `MasonryGridOrderedGridExperiment` sibling (an abandoned, more fragile alternative that
+  inferred CSS Grid's own auto-placement via `index % columnCount` rather than genuine shortest-
+  column packing — never used it). The port modernized typed props (dropped the unused
+  `mobilePreferredColCount` prop, and the CSS-string-with-validator `justify` prop became a real
+  union type), promoted CSS custom properties to a proper public token API, added
+  `prefers-reduced-motion` handling (missing before), and removed a redundant second
+  `useResizeObserver` call that duplicated the one `useElementSize` already sets up internally. It
+  also replaced `MasonryGrid`'s own previous CSS-`columns`-based reorder-trick implementation,
+  which is now `ColumnFlowGrid` (`.claude/skills/components/column-flow-grid.md`). No known
+  consumer app was using any of the old APIs/names.
+- **Found after the port, via manual testing**: the original's `--_position-left` used equal
+  percentage slots (`minIndex * (100 / columnCount)%`) for every mode. That's fine when items
+  stretch to fill their slot, but with `fixedWidth` the item is narrower than its slot, so the
+  unused slot space showed up as a much bigger gap than the `gap` prop actually specified — it
+  visually looked like `justify-content: space-between`. Also, the CSS `justify-content` the port
+  initially added (see above) turned out to be entirely dead: it has no effect on children once
+  `position: absolute` removes them from grid flow, so `justify` never did anything either.
+  Fixed by computing both column steps and the `justify` offset in real pixels in JS (see **How
+  positioning works** above) instead of relying on CSS for either.
+- **Found after that, testing narrow/mobile viewports**: the single-column CSS fallback template
+  was `minmax(itemMinWidth, 1fr)`, same as every other breakpoint — on a container narrower than
+  `itemMinWidth`, that floor fought the container instead of just filling it, producing a
+  non-full-width, misaligned single column. Fixed by making the single-column template a plain
+  `1fr` unconditionally (see **Single-column fallback** above) — `itemMinWidth` never had a
+  multi-column decision to inform in that case anyway.

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/pop-over.md

@@ -0,0 +1,100 @@
+---
+name: PopOver
+description: PopOver generic anchor-positioned disclosure panel with consumer-supplied trigger/content slots, placement prop, CSS token API
+type: reference
+---
+
+# PopOver
+
+## Overview
+
+`PopOver` renders a fully consumer-supplied trigger that opens an anchor-positioned popover panel
+with fully consumer-supplied content, built on the native Popover API
+(`popover`/`popovertarget`) and CSS anchor-positioning (`anchor-name`/`position-anchor`/
+`anchor()`). Unlike [`DisplayTooltip`](display-tooltip.md) (a fixed icon trigger for inline help
+text) or `ActionMenu` (menu semantics with arrow-key navigation), `PopOver` makes no assumption
+about what the trigger or content look like, and always renders its own visible close button.
+
+**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 `DisplayTooltip`/`DeepExpandingMenu`'s equivalent gap.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `placement` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Which side of the trigger the popover panel opens on. Each side has a `position-try-fallbacks` so the browser flips it automatically if it would overflow the viewport. |
+| `triggerAriaLabel` | `string` | `""` | aria-label on the trigger button — set this when the `trigger` slot is icon-only. Unset (no attribute) by default, since the trigger slot usually carries its own visible/accessible content. |
+| `popoverAriaLabel` | `string` | `""` | aria-label on the popover content region — set this when the `content` slot has no visible heading. |
+| `closeButtonAriaLabel` | `string` | `"Close"` | aria-label on the close button — override for localisation. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `trigger` | Content rendered inside the trigger button. |
+| `content` | Content rendered inside the popover panel, below the close button. |
+
+## Basic usage
+
+```vue
+<PopOver placement="bottom">
+  <template #trigger>
+    <span>Open popover</span>
+  </template>
+  <template #content>
+    <p>This is some popover content.</p>
+  </template>
+</PopOver>
+```
+
+Icon-only trigger:
+
+```vue
+<PopOver trigger-aria-label="Show filters" popover-aria-label="Filter options">
+  <template #trigger>
+    <Icon name="lucide:filter" aria-hidden="true" />
+  </template>
+  <template #content>
+    <p>Filter controls would go here.</p>
+  </template>
+</PopOver>
+```
+
+## Notes on content
+
+The `content` slot's immediate children have their default UA top/bottom margins trimmed (via
+`:first-child`/`:last-child`), so `--pop-over-content-padding`/`-content-padding-block-start` are
+the only source of space above/below the slotted content — a plain `<p>` doesn't stack its own
+`margin-block` on top of the panel's padding. Interior spacing between multiple slotted children
+(e.g. two paragraphs) is untouched.
+
+## Behaviour
+
+- Opening/closing is handled natively by the Popover API: clicking the trigger toggles the panel,
+  clicking the close button or pressing Escape hides it, and focus returns to the trigger
+  automatically on close.
+- On open, focus moves to the close button (`handleToggle`, driven by the popover's native
+  `toggle` event) so keyboard users land inside the panel immediately.
+
+## CSS custom properties
+
+See `CONSUMER-STYLING.md` for the full `--pop-over-*` token API (gap, trigger outline, panel
+border/background/text/shadow/width, content padding, and close-button tokens).
+
+## Notes
+
+- Auto-imported in Nuxt — no manual import needed.
+- 2026-09-13 migration: moved from an unplaced top-level folder (`app/components/pop-over/`) into
+  `01.atoms/pop-over/`; converted options-style `defineProps` to `interface Props` +
+  `withDefaults`; the slot named `popoverCotent` (typo) was renamed to `content`, and the required
+  `popovertarget` prop was replaced with an auto-generated id (`useId()`) so consumers no longer
+  need to wire up matching ids themselves; the `role="tooltip"` on the popover panel was removed
+  (it described a tooltip, not this component's actual arbitrary-content disclosure semantics);
+  added a real, visible close button (the original template referenced one with no styling or
+  accessible label — literal `x` text); added `placement` (`top`/`right`/`bottom`/`left`, all with
+  `position-try-fallbacks`) — the original only supported opening to the right, with several
+  `@position-try` blocks commented out and unused; promoted every hardcoded value to a public CSS
+  token; added tests, a Storybook story, this skill doc, and a VS Code snippet (all previously
+  missing).

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/index.md

@@ -89,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
@@ -115,7 +116,12 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── 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-defined.md — DisplayTooltipDefined: structured title/body/action tooltip content with close button, composes DisplayTooltip
+    ├── pop-over.md                — PopOver: generic anchor-positioned disclosure panel, consumer-supplied trigger/content slots, placement prop, CSS token API
+    ├── input-text-core.md        — InputTextCore: native text/date/number input primitive, min/max pass-through (date-picker range), CSS token API; Variants section covers InputTextWithLabel/InputPasswordWithLabel/InputTextAsNumberWithLabel
+    ├── entry-animation.md         — EntryAnimation: scroll-driven entry animation wrapper (slide-in/zoom-reveal/exit-blur utility classes), skipAnimation for above-the-fold loop items, reduced-motion handled at the CSS layer
+    ├── column-flow-grid.md        — ColumnFlowGrid (renamed from MasonryGrid): CSS multi-column text-flow layout, named dynamic slots (no count/data prop), itemMinWidth/gap/unit sizing, CSS token API; not a true masonry, see "which one do I want?"
+    └── masonry-grid.md            — MasonryGrid: real measured-height masonry (greedy shortest-column packing, animated resize) absorbed from the now-retired MasonryGridOrdered; named dynamic slots, fixedWidth/justify, CSS token API
 ```
 
 ## Skill file template

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-column-flow-grid.code-snippets

@@ -0,0 +1,39 @@
+{
+  "SRCDEV ColumnFlowGrid Basic": {
+    "description": "Basic ColumnFlowGrid with a few named item slots",
+    "scope": "vue,html",
+    "body": [
+      "<ColumnFlowGrid :item-min-width=\"$1300\" :gap=\"$21.2\">",
+      "  <template #item-1>",
+      "    $3",
+      "  </template>",
+      "  <template #item-2>",
+      "    $4",
+      "  </template>",
+      "</ColumnFlowGrid>"
+    ]
+  },
+  "SRCDEV ColumnFlowGrid Looped": {
+    "description": "ColumnFlowGrid rendering a v-for list via dynamic slot names (no count prop needed)",
+    "scope": "vue,html",
+    "body": [
+      "<ColumnFlowGrid :item-min-width=\"$1280\" :gap=\"$21.6\">",
+      "  <template v-for=\"($3item, $4index) in $5items\" :key=\"$3item.id\" #[`item-${$4index}`]>",
+      "    $6",
+      "  </template>",
+      "</ColumnFlowGrid>"
+    ]
+  },
+  "SRCDEV ColumnFlowGrid CSS Override": {
+    "description": "CSS override scaffold for ColumnFlowGrid tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .column-flow-grid-wrapper {",
+      "    --column-flow-grid-item-border-colour: $2;",
+      "    --column-flow-grid-item-padding: $3;",
+      "  }",
+      "}"
+    ]
+  }
+}

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-display-tooltip-defined.code-snippets

@@ -10,5 +10,20 @@
       "  }\"",
       "/>"
     ]
+  },
+  "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

@@ -23,5 +23,16 @@
       "  </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>"
+    ]
   }
 }

package/.vscode/srcdev-component-entry-animation.code-snippets

@@ -0,0 +1,29 @@
+{
+  "SRCDEV EntryAnimation Basic": {
+    "description": "Basic EntryAnimation wrapper with a default slide-in animation",
+    "scope": "vue,html",
+    "body": [
+      "<EntryAnimation animation-type=\"$1entry-slide-in\">",
+      "  <template #default>",
+      "    $2",
+      "  </template>",
+      "</EntryAnimation>"
+    ]
+  },
+  "SRCDEV EntryAnimation Looped, Skip First": {
+    "description": "EntryAnimation in a v-for loop, skipping the first (above-the-fold) item",
+    "scope": "vue,html",
+    "body": [
+      "<EntryAnimation",
+      "  v-for=\"($1item, $2index) in $3items\"",
+      "  :key=\"$1item.id\"",
+      "  :skip-animation=\"$2index === 0\"",
+      "  animation-type=\"$4entry-slide-in\"",
+      ">",
+      "  <template #default>",
+      "    $5",
+      "  </template>",
+      "</EntryAnimation>"
+    ]
+  }
+}

package/.vscode/srcdev-component-input-text.code-snippets

@@ -0,0 +1,107 @@
+{
+  "SRCDEV InputTextCore Basic": {
+    "description": "Basic InputTextCore native input (no label/error wrapper)",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextCore",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  type=\"$4text\"",
+      "  placeholder=\"$5Enter value...\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputTextCore Date with min/max": {
+    "description": "InputTextCore date input constrained to a min/max range (e.g. no dates in the past)",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextCore",
+      "  id=\"$1appointment-date\"",
+      "  name=\"$2appointmentDate\"",
+      "  v-model=\"$3appointmentDate\"",
+      "  type=\"date\"",
+      "  :min=\"new Date().toISOString().split('T')[0]\"",
+      "  max=\"$42027-12-31\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputTextWithLabel Basic": {
+    "description": "InputTextWithLabel: labelled text field with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextWithLabel",
+      "  v-model=\"$1fieldValue\"",
+      "  id=\"$2fieldId\"",
+      "  name=\"$3fieldName\"",
+      "  type=\"$4text\"",
+      "  label=\"$5Field label\"",
+      "  :error-message=\"$6errors.fieldName\"",
+      "  :field-has-error=\"!!$6errors.fieldName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputTextWithLabel Date with min/max": {
+    "description": "InputTextWithLabel date field constrained to a min/max range",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextWithLabel",
+      "  v-model=\"$1appointmentDate\"",
+      "  id=\"$2appointment-date\"",
+      "  name=\"$2appointmentDate\"",
+      "  type=\"date\"",
+      "  label=\"$3Appointment date\"",
+      "  :min=\"new Date().toISOString().split('T')[0]\"",
+      "  max=\"$42027-12-31\"",
+      "  :error-message=\"$5errors.appointmentDate\"",
+      "  :field-has-error=\"!!$5errors.appointmentDate\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputPasswordWithLabel": {
+    "description": "InputPasswordWithLabel with show/hide toggle",
+    "scope": "vue,html",
+    "body": [
+      "<InputPasswordWithLabel",
+      "  v-model=\"$1password\"",
+      "  name=\"$2password\"",
+      "  label=\"$3Password\"",
+      "  :error-message=\"$4errors.password\"",
+      "  :field-has-error=\"!!$4errors.password\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputTextAsNumberWithLabel": {
+    "description": "InputTextAsNumberWithLabel numeric stepper with min/max/step",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextAsNumberWithLabel",
+      "  v-model=\"$1quantity\"",
+      "  name=\"$2quantity\"",
+      "  label=\"$3Quantity\"",
+      "  :min=\"$41\"",
+      "  :max=\"$599\"",
+      "  :step=\"$61\"",
+      "  :error-message=\"$7errors.quantity\"",
+      "  :field-has-error=\"!!$7errors.quantity\"",
+      ">",
+      "  <template #left>−</template>",
+      "  <template #right>+</template>",
+      "</InputTextAsNumberWithLabel>"
+    ]
+  },
+  "SRCDEV InputText CSS Override": {
+    "description": "CSS override scaffold for InputTextCore tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .input-text-wrapper {",
+      "    --input-text-surface: $2;",
+      "    --input-text-border: $3;",
+      "    --input-text-border-focus: $4;",
+      "    --input-text-color: $5;",
+      "  }",
+      "}"
+    ]
+  }
+}