srcdev-nuxt-components 9.4.12 → 9.5.1

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

@@ -71,6 +71,7 @@ Use when the component has `v-model`, reactive state, or named slots that need t
 
 ```ts
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../ComponentName.vue";
 
 interface ComponentStoryArgs {
@@ -117,13 +118,16 @@ export default {
 const Template: StoryFn<ComponentStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const { modelValue, ...otherArgs } = args;
-    const inputValue = ref(modelValue);
-    return { inputValue, args: otherArgs, useSlot: args.useSlot, slotContent: args.slotContent };
+    // Strip non-prop extra args inside a computed, never at setup time (see below)
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, useSlot: _useSlot, slotContent: _slotContent, ...rest } = args;
+      return rest;
+    });
+    return { args, componentArgs };
   },
   template: `
-    <StorybookComponent v-model="inputValue" v-bind="args">
-      <template v-if="useSlot" #slotName>{{ slotContent }}</template>
+    <StorybookComponent v-model="args.modelValue" v-bind="componentArgs">
+      <template v-if="args.useSlot" #slotName>{{ args.slotContent }}</template>
     </StorybookComponent>
   `,
 });
@@ -135,6 +139,39 @@ export const WithSlot = Template.bind({});
 WithSlot.args = { useSlot: true, slotContent: "Custom content" };
 ```
 
+### Reacting to a Controls change
+
+Storybook mounts the story once and mutates `args` in place on every Controls change; `setup()`
+never re-runs. So:
+
+- **Don't destructure or copy `args` at setup time** (`const { x, ...rest } = args`, `ref(args.x)`):
+  it's a one-time snapshot and the control silently stops working. Read `args.x` in the template,
+  or destructure inside a `computed()`. The Component Ledger's `story_args_bug` column flags this.
+- **Don't `watch(() => args.x)` either.** The template does pick up the new value, but the
+  watcher never fires (found 2026-09-27 in `InputCheckboxRadioButton`'s Option group story, where
+  a `watch` meant to reset local state on a `type` switch did nothing). When a control change
+  must reset local state, move that state into a small inline child component and key it on the
+  arg, so the change remounts it:
+
+```ts
+const Group = defineComponent({
+  props: { type: { type: String, required: true } },
+  setup(props) {
+    const selected = ref(props.type === "checkbox" ? [] : "");
+    return { selected };
+  },
+  template: `...`,
+});
+
+const Template: StoryFn<StoryArgs> = (args) => ({
+  components: { Group },
+  setup: () => ({ args }),
+  template: `<Group :key="args.type" :type="args.type" />`,
+});
+```
+
+Don't name the inline component the same as an exported story (`TS2451: Cannot redeclare`).
+
 ## Title format
 
 `"Category/Subcategory/ComponentName"` — this becomes the Storybook sidebar path and the
@@ -236,10 +273,21 @@ Key points:
 
 ## Notes
 
+- **Colour scheme:** `.storybook/preview.ts` pins every story to the light scheme
+  (`html[data-color-scheme="light"]`, off-white `--slate-00` stage) by default, whatever the OS
+  setting. Use the toolbar "Colour scheme" menu (Light / Dark / Follow OS) to check dark mode.
+  Don't hardcode a stage background in a story to get a light canvas; it's already the default.
 - Use `table: { category: "..." }` in `argTypes` when a component has many props — it groups
   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.
+- **Every story inherits the meta's `argTypes`**, so its Controls panel shows them even if the
+  story ignores `args`. A template written as `StoryFn = () => ({...})` never receives `args`, so
+  those controls silently do nothing (found 2026-09-25 on `InputCheckboxRadioButton`'s
+  `OptionGroup`: switching `type` to `radio` changed nothing). Either take `(args)` and bind the
+  controls that make sense (hide irrelevant ones with `Story.argTypes = { x: { table: { disable: true } } }`),
+  or, for a fixed showcase (comparisons, all-themes grids, composition examples), add
+  `controls: { disable: true }` to that story's `parameters`.
 
 ## Scroll/animation-driven effects need surrounding chrome, not just the bare component
 

package/.claude/skills/testing-add-playwright.md

@@ -105,7 +105,7 @@ and replace `/` with `-`:
 | Story `title`                                     | `STORY_BASE`                                    |
 | ------------------------------------------------- | ----------------------------------------------- |
 | `"Atoms/Text Blocks/HeroText"`                    | `atoms-text-blocks-herotext`                    |
-| `"Components/Forms/Input Button/InputButtonCore"` | `components-forms-input-button-inputbuttoncore` |
+| `"Components/Forms/Input Button/InputButton"` | `components-forms-input-button-inputbuttoncore` |
 
 The full story URL pattern is:
 

package/.claude/skills/theming-colour-ramps.md

@@ -60,8 +60,8 @@ Defined in `ramps.config.mjs`, generated to `_theme-params.css` as `--palette-{n
 | red    | 30  | 0.24       | Error/danger theme            |
 | green  | 157 | 0.19       | Success theme                 |
 | amber  | 75  | 0.19       |                               |
-| orange | 60  | 0.15       |                               |
-| sunset | 50  | 0.22       | Warning theme — drift: -25    |
+| orange | 55  | 0.19       | Warning theme                 |
+| sunset | 50  | 0.22       | drift: -25 (amber to red-orange) |
 | slate  | 260 | 0.02       | Near-neutral grey             |
 
 Also generates one named-step file per palette, e.g. `_blue.css` with `--blue-00` … `--blue-10`.
@@ -105,7 +105,7 @@ Additional context tokens (declared in `_default.css`):
 |--------------------|---------|----------------------------------------------|
 | `"default"`        | blue    | Page-level default                           |
 | `"success"`        | green   |                                              |
-| `"warning"`        | sunset  | Overrides surface to step 5 for warm feel    |
+| `"warning"`        | orange  | Surface step 6, hover step 7 (both modes), for AA text contrast |
 | `"error"`          | red     | Also applied on `[data-invalid]` elements    |
 
 ## Generator
@@ -159,6 +159,21 @@ Produces `_gold.css` with `--gold-00` … `--gold-10`, and adds `--palette-gold-
 }
 ```
 
+1. Add a story export for it in `stories/foundations/colour-ramps/ColourRamps.stories.ts`
+   (`export const Gold: Story = rampStory("gold");`). The "All Ramps" story picks new ramps up
+   automatically, but Storybook needs a static export per ramp page.
+
+## Storybook reference (Foundations)
+
+`Foundations/Colour Ramps` in Storybook is the visual reference for this system: a Setup Guide
+(consumer instructions, `SetupGuide.mdx`), an All Ramps overview, and one page per ramp showing
+each step's oklch and hex value (flagged P3 when the hex is a clipped sRGB fallback), contrast
+against white and black text, the theme roles it plays (parsed from `03.theming/*.css`), and
+which components reference it by name (scanned from `app/` source via `import.meta.glob`).
+Everything is derived from `ramps.config.mjs` and the source, so it never needs manual
+updating beyond the per-ramp story export. It lives in the root `stories/` folder, which is not
+in the package `files` list, so it doesn't ship to consumers.
+
 ## Consumer app: generating a custom palette
 
 The recommended approach is to generate named colour files so you can reference clean step
@@ -326,3 +341,10 @@ The `useColourScheme()` composable toggles the `.light` / `.dark` class on `<htm
 | 310–360| Magenta / rose   |
 
 Use [oklch.com](https://oklch.com) to preview values before committing.
+
+> Changed 2026-09-27: `orange` moved from hue 60 / chroma 0.15 to hue 55 / chroma 0.19 (the old
+> values read as brown, not orange), and the warning theme switched from `sunset` to `orange` so
+> warning inputs, alerts, prompts and buttons read as orange rather than red-orange. `sunset`
+> remains available as a named ramp. Warning's filled surface then moved from step
+> 05 (light) / 04 (dark) to step 06 in both modes, hover step 07: step 06 is the lightest orange
+> where the near-white `--theme-on-surface` text meets AA (4.65:1; step 05 was 3.3:1).

package/.claude/skills/theming-component-token-pattern.md

@@ -16,7 +16,7 @@ practice.
 
 ## Why this replaced the old pattern
 
-Two things used to go wrong, both found while auditing `luxury-locs-by-natasha`'s theming
+Two things used to go wrong, both found while auditing a consumer app's theming
 overrides (2026-08-25):
 
 1. **Bare `var(--theme-checkbox-symbol-color)` with no fallback anywhere.** The only way for this
@@ -26,7 +26,7 @@ overrides (2026-08-25):
    `var()` with an undefined custom property and no fallback just resolves to the property's
    initial value; there is no error, no warning, ever.
 2. **Tokens that were "shared" only by accident.** `InputTextCore`, `InputSelectCore`,
-   `InputNumberCore` and the checkbox button all read the exact same `--theme-input-surface`, so a
+   `InputNumber` and the checkbox button all read the exact same `--theme-input-surface`, so a
    consumer wanting to restyle just text inputs had no way to do that without also restyling every
    other input type. The private `--_input-text-surface: var(--theme-input-surface);` indirection
    made this look like it had its own override point when it didn't.
@@ -49,7 +49,7 @@ an inline fallback, even if that fallback happens to be a Tier 1 or Tier 2 token
 - `--input-button-primary-surface` / `-surface-hover` — variant + property + state
 - `--services-card-border-colour` / `-border-colour-hover` — property + state
 - Only add a `-hover`/`-focus`/`-active` suffix if that state's value actually differs from the
-  base token. If hover reuses the exact same value as base (see `InputButtonCore`'s primary text
+  base token. If hover reuses the exact same value as base (see `InputButton`'s primary text
   colour, fixed on purpose across states), reuse the base token — don't manufacture a second name
   for a value that never diverges.
 
@@ -59,7 +59,7 @@ A component that wants to *look like* another component's default (rather than d
 raw value) chains through it:
 
 ```css
-/* InputCopy's copy button defaults to InputButtonCore's primary look */
+/* InputCopy's copy button defaults to InputButton's primary look */
 --_button-bg: var(--input-copy-button-bg, var(--input-button-primary-surface, var(--theme-surface)));
 ```
 
@@ -76,44 +76,44 @@ consuming app having declared anything.
 
 ## Rollout status
 
-- ✅ `InputButtonCore` (primary/secondary/tertiary), `InputCopy`, `PricingCard` — migrated
+- ✅ `InputButton` (primary/secondary/tertiary), `InputCopy`, `PricingCard` — migrated
   2026-08-25, see their `CONSUMER-STYLING.md` for the full token list. This pass also included a
   deliberate visual redesign (flat borders, `color-mix()`-darkened hover, transparent resting
   outline, separated `:focus-visible`), not just the token API change.
-- ✅ `InputCheckboxRadioCore`/`Button` — migrated 2026-08-25, see their `CONSUMER-STYLING.md`.
-  Pure token-rename pass, no visual/default changes (unlike `InputButtonCore`'s redesign above).
-  Added Storybook stories for both (`InputCheckboxRadioCore`, `InputCheckboxRadioButton`) —
+- ✅ `InputCheckboxRadio`/`Button` — migrated 2026-08-25, see their `CONSUMER-STYLING.md`.
+  Pure token-rename pass, no visual/default changes (unlike `InputButton`'s redesign above).
+  Added Storybook stories for both (`InputCheckboxRadio`, `InputCheckboxRadioButton`) —
   neither had one before.
-- ✅ `InputTextCore`, `InputSelectCore`, `InputNumberCore` — migrated 2026-08-25, see their
+- ✅ `InputTextCore`, `InputSelectCore`, `InputNumber` — migrated 2026-08-25, see their
   `CONSUMER-STYLING.md`. `InputTextCore`/`InputSelectCore` also had this exact problem's original
   form: a private `--_input-text-*`/`--_input-select-*` naming scheme documented as a second
   "local override path" alongside the global tokens, added 2026-08-22 (three days before this
   pattern was formalised) as a workaround for a global-override-not-landing report that was never
   root-caused. That private-var-as-override-point shape is exactly what this pattern replaces —
-  renamed public with real fallbacks, old two-path docs removed. `InputNumberCore` had no
+  renamed public with real fallbacks, old two-path docs removed. `InputNumber` had no
   component-scoped tokens at all before this (bare `--theme-input-*` throughout). Added a
-  Storybook story for `InputSelectCore` (didn't have one); `InputNumberCore` still doesn't.
+  Storybook story for `InputSelectCore` (didn't have one); `InputNumber` still doesn't.
   `InputTextCore`/`InputSelectCore`'s `.normal` variant also had hover and `:focus-visible` share
   one token (literally the same rule content duplicated under two selectors) — split into
   `--input-text-border-hover`/`--input-select-border-hover` alongside the existing `-border-focus`
   pair, both still defaulting to `--theme-border-focus` so default rendering is unchanged, but
-  mouse and assistive-tech interaction can now be themed independently. `InputNumberCore` has no
+  mouse and assistive-tech interaction can now be themed independently. `InputNumber` has no
   hover state on its border at all (only a `:focus-visible` box-shadow toggle), so there was
   nothing to split there.
-- ✅ `ToggleSwitchCore`, `TripleToggleSwitchCore`, `DisplayThemeSwitch` — migrated 2026-08-25, see
+- ✅ `ToggleSwitchCore`, `TripleToggleSwitch`, `DisplayThemeSwitch` — migrated 2026-08-25, see
   the first two's `CONSUMER-STYLING.md`. Correction to the two lines this replaces: they claimed
   `ToggleSwitchCore` read a bare `--theme-toggle-symbol-color-*` — that token doesn't exist
   anywhere in this codebase and never did; false memory from conflating it with the checkbox
   fix. `ToggleSwitchCore` itself turned out to be a plain Tier 2 case (real, live tokens, just no
   component-scoped override point) plus five confirmed-dead private locals (declared, never read
-  anywhere in the file) removed outright. The real dead-token bug was in `TripleToggleSwitchCore`
+  anywhere in the file) removed outright. The real dead-token bug was in `TripleToggleSwitch`
   (and duplicated in `DisplayThemeSwitch`'s own override): `--theme-form-radio-border`,
   `--theme-form-radio-outline`, `--theme-form-checkbox-bg` — all three declared nowhere in the
   layer. The first two fed two further-unused private locals (removed); the third fed the
   selected-option marker's background (real bug, narrow impact — only visible when none of the
   component's `system`/`light`/`dark` `:has()` overrides match).
 
-  Second bug, found while adding the Storybook story `TripleToggleSwitchCore` never had: those
+  Second bug, found while adding the Storybook story `TripleToggleSwitch` never had: those
   `:has()` selectors (and the matching `.option-icon.system/.light/.dark` classes, template-bound
   to each option's `id`) said `"auto"`, not `"system"` — but the only known consumer,
   `DisplayThemeSwitch`, has only ever emitted `id`/`value: "system"` (it has to; that literal
@@ -121,6 +121,6 @@ consuming app having declared anything.
   `"auto"` never matched anything real, so the system option's green gradient marker had never
   actually fired — confirmed live before and after the fix. Renamed the selectors to `"system"`
   rather than the data, since the data value is a real external contract this component's
-  presentational selectors have no business dictating. `TripleToggleSwitchCore` still hardcodes
+  presentational selectors have no business dictating. `TripleToggleSwitch` still hardcodes
   three option values as CSS selectors rather than being genuinely value-agnostic — noted in its
   `CONSUMER-STYLING.md`, left as a larger separate change.

package/.claude/skills/theming-override-default.md

@@ -140,6 +140,13 @@ palette by name.
 @import "./03.theming/_default.css";
 ```
 
+**Per-component site defaults:** once you start setting a component's own public tokens site-wide
+(e.g. CardCore's background and radius), give each component its own `03.theming/_<component>.css`
+using the same `:where(html) { ... }` shape, and switch to a `03.theming/index.css` that imports
+`_default.css` plus each component file, then `@import "./03.theming/";` here instead. See
+"Site-wide component defaults" in `component-local-style-override.md` for why `:where(html)`,
+and `consumer-styles-structure.md` for the full consumer `setup/` tree.
+
 ### 7. Wire up the CSS entry point
 
 `app/assets/styles/main.css`:

package/.claude/skills/theming-partial-override.md

@@ -40,7 +40,7 @@ affects buttons, inputs, prompts, and toasts simultaneously:
 | --------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
 | `--theme-surface`           | `--colour-theme-7` / `9` | Filled button/chip surface                                                                                              |
 | `--theme-surface-hover`     | `--colour-theme-9` / `7` | Hover state of filled surface                                                                                            |
-| `--theme-surface-inverted`  | `--colour-theme-9` / `2` | Inverted surface (`InputButtonCore`'s `.secondary` background)                                                          |
+| `--theme-surface-inverted`  | `--colour-theme-9` / `2` | Inverted surface (`InputButton`'s `.secondary` background)                                                          |
 | `--theme-accent`            | `--colour-theme-5` / `4` | Decorative accent strip (prompt/toast left edge)                                                                        |
 | `--theme-surface-subtle`    | `--colour-theme-1` / `9` | Subtle body bg for prompt/toast, outline element hover                                                                  |
 | `--theme-border`            | `--colour-theme-6` / `5` | Input/card border                                                                                                        |

package/.claude/skills/theming-typography-tokens.md

@@ -104,6 +104,6 @@ labels), and so on upward for headings.
   needs the same `var(--step-N)` treatment, since it inherits the same `62.5%` root reset via the
   layer's global CSS.
 - Caught in the wild: a docs-page sidebar/TOC/code-block set of components in a consumer app
-  (`guidemyhair`) shipped with raw `0.75rem`/`0.85rem`/`0.9rem` font-sizes, assuming a 16px root —
+  shipped with raw `0.75rem`/`0.85rem`/`0.9rem` font-sizes, assuming a 16px root —
   rendered far too small once the layer's `62.5%` reset applied. Fixed by switching every one to the
   matching `--step-N` token.

package/.claude/skills/vercel-node-version.md

@@ -38,7 +38,7 @@ Vercel reads `.nvmrc` and provisions Node 24 (npm 11), which handles the version
 
 If `.nvmrc` is ever accidentally deleted, recreate it immediately. This applies to:
 - `nuxt-components` (the layer)
-- Every consumer app (`instepreflexology`, `luxury-locs-by-natasha-nuxt3`, etc.)
+- Every consumer app
 
 ## Notes
 

package/.vscode/srcdev-component-action-menu.code-snippets

@@ -0,0 +1,42 @@
+{
+  "SRCDEV ActionMenu": {
+    "description": "ActionMenu with indexed item-{n} slots, each holding one ActionMenuItem",
+    "scope": "vue,html",
+    "body": [
+      "<ActionMenu label=\"${1:Open actions menu}\">",
+      "  <template #item-0>",
+      "    <ActionMenuItem label=\"${2:Edit}\" @click=\"$3\">",
+      "      <template #icon><Icon name=\"${4:lucide:pencil}\" /></template>",
+      "    </ActionMenuItem>",
+      "  </template>",
+      "  <template #item-1>",
+      "    <ActionMenuItem label=\"${5:View}\" href=\"${6:/path}\" />",
+      "  </template>",
+      "</ActionMenu>"
+    ]
+  },
+  "SRCDEV ActionMenu Looped": {
+    "description": "ActionMenu driven by an array via dynamic item-{n} slot names",
+    "scope": "vue,html",
+    "body": [
+      "<ActionMenu>",
+      "  <template v-for=\"($1action, $2i) in $3actions\" :key=\"$1action.label\" #[`item-${$2i}`]>",
+      "    <ActionMenuItem :label=\"$1action.label\" :href=\"$1action.href\" @click=\"$1action.onClick\" />",
+      "  </template>",
+      "</ActionMenu>"
+    ]
+  },
+  "SRCDEV ActionMenu CSS Override": {
+    "description": "CSS override scaffold for ActionMenu tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --action-menu-trigger-icon-color: $2;",
+      "  --action-menu-popover-background: $3;",
+      "  --action-menu-popover-border: $4;",
+      "  --action-menu-item-text-color: $5;",
+      "  --action-menu-item-surface-hover: $6;",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,36 @@
+{
+  "SRCDEV AlertContent Basic": {
+    "description": "AlertContent: themed alert panel with title and message",
+    "scope": "vue,html",
+    "body": [
+      "<AlertContent theme=\"${1|info,success,warning,error|}\">",
+      "  <template #title>${2:Title}</template>",
+      "  <template #content>${3:Message}</template>",
+      "</AlertContent>"
+    ]
+  },
+  "SRCDEV AlertContent Dismissible": {
+    "description": "AlertContent with a dismiss button",
+    "scope": "vue,html",
+    "body": [
+      "<AlertContent theme=\"${1|info,success,warning,error|}\" dismissible @dismiss=\"${2:onDismiss}\">",
+      "  <template #content>${3:Message}</template>",
+      "  <template #dismissLabel>${4:Close}</template>",
+      "</AlertContent>"
+    ]
+  },
+  "SRCDEV AlertContent Actions": {
+    "description": "AlertContent with a title, custom icon and a right-aligned actions row",
+    "scope": "vue,html",
+    "body": [
+      "<AlertContent theme=\"${1|info,success,warning,error|}\" custom-icon=\"${2:material-symbols:cookie-outline}\">",
+      "  <template #title>${3:Title}</template>",
+      "  <template #content>${4:Message}</template>",
+      "  <template #actions>",
+      "    <InputButton type=\"button\" variant=\"tertiary\" button-text=\"${5:Cancel}\" @click=\"${6:onCancel}\" />",
+      "    <InputButton type=\"button\" variant=\"primary\" button-text=\"${7:Confirm}\" @click=\"${8:onConfirm}\" />",
+      "  </template>",
+      "</AlertContent>"
+    ]
+  }
+}

package/.vscode/srcdev-component-alert-masked-content.code-snippets

@@ -0,0 +1,35 @@
+{
+  "SRCDEV AlertMaskedContent Basic": {
+    "description": "AlertMaskedContent — alert with SVG accent-border mask and translucent fill",
+    "scope": "vue,html",
+    "body": [
+      "<AlertMaskedContent theme=\"${1|info,success,warning,error|}\">",
+      "  <template #title>$2</template>",
+      "  <template #content>$0</template>",
+      "</AlertMaskedContent>"
+    ]
+  },
+  "SRCDEV AlertMaskedContent Dismissible": {
+    "description": "AlertMaskedContent with dismiss button",
+    "scope": "vue,html",
+    "body": [
+      "<AlertMaskedContent theme=\"${1|info,success,warning,error|}\" dismissible @dismiss=\"$2\">",
+      "  <template #title>$3</template>",
+      "  <template #content>$0</template>",
+      "</AlertMaskedContent>"
+    ]
+  },
+  "SRCDEV AlertMaskedContent Custom Mask": {
+    "description": "AlertMaskedContent with custom mask geometry",
+    "scope": "vue,html",
+    "body": [
+      "<AlertMaskedContent",
+      "  theme=\"${1|info,success,warning,error|}\"",
+      "  :mask-config=\"{ radiusLeft: ${2:8}, radiusRight: ${3:4}, borderLeft: ${4:6}, borderTop: ${5:1}, borderRight: ${6:1}, borderBottom: ${7:1} }\"",
+      ">",
+      "  <template #title>$8</template>",
+      "  <template #content>$0</template>",
+      "</AlertMaskedContent>"
+    ]
+  }
+}

package/.vscode/srcdev-component-auto-grid.code-snippets

@@ -0,0 +1,39 @@
+{
+  "SRCDEV AutoGrid Basic": {
+    "description": "Basic AutoGrid with a few named item slots",
+    "scope": "vue,html",
+    "body": [
+      "<AutoGrid>",
+      "  <template #item-1>",
+      "    $1",
+      "  </template>",
+      "  <template #item-2>",
+      "    $2",
+      "  </template>",
+      "</AutoGrid>"
+    ]
+  },
+  "SRCDEV AutoGrid Looped": {
+    "description": "AutoGrid rendering a v-for list via dynamic slot names",
+    "scope": "vue,html",
+    "body": [
+      "<AutoGrid${1: is-responsive}>",
+      "  <template v-for=\"$2item in $3items\" :key=\"$2item.id\" #[$2item.id]>",
+      "    $4",
+      "  </template>",
+      "</AutoGrid>"
+    ]
+  },
+  "SRCDEV AutoGrid CSS Override": {
+    "description": "CSS override scaffold for AutoGrid tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --auto-grid-gap: $2;",
+      "  --auto-grid-min-col-size-default: $3;",
+      "  --auto-grid-min-col-size-small: $4;",
+      "  --auto-grid-min-col-size-large: $5;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-capture-decode-qr-code.code-snippets

@@ -0,0 +1,28 @@
+{
+  "SRCDEV CaptureQrCode": {
+    "description": "CaptureQrCode live camera scanner with localisable copy",
+    "scope": "vue,html",
+    "body": [
+      "<CaptureQrCode camera-stopped-label=\"${1:Camera stopped}\" reset-camera-label=\"${2:Reset camera}\" />"
+    ]
+  },
+  "SRCDEV CaptureQrCode Custom Error": {
+    "description": "CaptureQrCode with a custom, translated error block",
+    "scope": "vue,html",
+    "body": [
+      "<CaptureQrCode>",
+      "  <template #error=\"{ error, reset }\">",
+      "    <p>{{ error === 'NotAllowedError' ? '$1' : '$2' }}</p>",
+      "    <InputButton variant=\"secondary\" button-text=\"$3\" @click=\"reset\" />",
+      "  </template>",
+      "</CaptureQrCode>"
+    ]
+  },
+  "SRCDEV DecodeQrCode": {
+    "description": "DecodeQrCode image upload / drop decoder",
+    "scope": "vue,html",
+    "body": [
+      "<DecodeQrCode upload-label=\"${1:Upload a QR code image}\" drop-label=\"${2:Or drop a QR code image here}\" />"
+    ]
+  }
+}

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

@@ -89,10 +89,10 @@
     "body": [
       ".$1my-content-docs {",
       "  .content-docs {",
-      "    --docs-nav-link-icon-gap: $2;",
-      "    --docs-nav-link-icon-size: $3;",
-      "    --docs-nav-link-icon-order: $4rtl; /* icon at the end */",
-      "    --docs-page-nav-link-icon-order: $5ltr; /* icon at the start (default) */",
+      "    --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) */",
       "  }",
       "}"
     ]

package/.vscode/srcdev-component-cookie-consent-banner.code-snippets

@@ -0,0 +1,33 @@
+{
+  "SRCDEV CookieConsentBanner Basic": {
+    "description": "CookieConsentBanner: fixed Accept/Reject banner (built on AlertContent) driven by useCookieConsent, once in the default layout",
+    "scope": "vue,html",
+    "body": [
+      "<CookieConsentBanner />"
+    ]
+  },
+  "SRCDEV CookieConsentBanner Translated": {
+    "description": "CookieConsentBanner with translated copy and accessible name",
+    "scope": "vue,html",
+    "body": [
+      "<CookieConsentBanner :aria-label=\"${1:t('global.cookieConsent.ariaLabel')}\">",
+      "  <template #title>{{ ${2:t('global.cookieConsent.title')} }}</template>",
+      "  <template #message>{{ ${3:t('global.cookieConsent.message')} }}</template>",
+      "  <template #acceptLabel>{{ ${4:t('global.cookieConsent.accept')} }}</template>",
+      "  <template #rejectLabel>{{ ${5:t('global.cookieConsent.reject')} }}</template>",
+      "</CookieConsentBanner>"
+    ]
+  },
+  "SRCDEV CookieConsentBanner Tokens": {
+    "description": "CookieConsentBanner token overrides, scoped to the (teleported) banner root",
+    "scope": "css",
+    "body": [
+      ".cookie-consent-banner {",
+      "  --cookie-consent-banner-max-width: ${1:64rem};",
+      "  --cookie-consent-banner-accent: ${2:var(--theme-accent)};",
+      "  --alert-content-inner-background: ${3:var(--theme-surface-subtle)};",
+      "  --alert-content-text-colour: ${4:var(--theme-text)};",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,28 @@
+{
+  "SRCDEV DisplayAvatar Image": {
+    "description": "DisplayAvatar: circular image avatar",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayAvatar src=\"${1:/images/profile.jpg}\" alt=\"${2:Jane Smith}\" size=\"${3|md,xs,s,lg,xl|}\" />"
+    ]
+  },
+  "SRCDEV DisplayAvatar Initials": {
+    "description": "DisplayAvatar: initials derived from alt (alt is announced, initials hidden from screen readers)",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayAvatar alt=\"${1:Jane Smith}\" size=\"${2|md,xs,s,lg,xl|}\" />"
+    ]
+  },
+  "SRCDEV DisplayAvatar Chip": {
+    "description": "DisplayAvatar with a status chip",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayAvatar",
+      "  src=\"${1:/images/profile.jpg}\"",
+      "  alt=\"${2:Jane Smith}\"",
+      "  :chip=\"{ size: '${3:12px}', maskWidth: '${4:4px}', offset: '${5:0px}', angle: '${6:45deg}' }\"",
+      "  :style-class-passthrough=\"['${7|online,offline|}']\"",
+      "/>"
+    ]
+  }
+}

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

@@ -0,0 +1,27 @@
+{
+  "SRCDEV DisplayChip": {
+    "description": "DisplayChip status dot cut into the corner of its slotted content",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayChip",
+      "  shape=\"${1|circle,square|}\"",
+      "  :config=\"{ size: '${2:12px}', maskWidth: '${3:4px}', offset: '${4:0px}', angle: '${5:135deg}' }\"",
+      "  :style-class-passthrough=\"['${6|online,idle,dnd|}']\"",
+      ">",
+      "  $7",
+      "</DisplayChip>"
+    ]
+  },
+  "SRCDEV DisplayChip CSS Override": {
+    "description": "CSS override scaffold for DisplayChip status colours",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --display-chip-colour-online: $2;",
+      "  --display-chip-colour-idle: $3;",
+      "  --display-chip-colour-dnd: $4;",
+      "  --display-chip-colour-offline: $5;",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,38 @@
+{
+  "SRCDEV DisplayPill Label": {
+    "description": "DisplayPill: pill/badge with a text label",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayPill label=\"${1:Status}\" variant=\"${2|default,primary,success,warning,danger,neutral|}\" size=\"${3|md,sm,lg|}\" />"
+    ]
+  },
+  "SRCDEV DisplayPill Icon": {
+    "description": "DisplayPill with an icon",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayPill label=\"${1:Active}\" variant=\"${2|success,default,primary,warning,danger,neutral|}\">",
+      "  <template #icon>",
+      "    <Icon name=\"${3:material-symbols:circle}\" />",
+      "  </template>",
+      "</DisplayPill>"
+    ]
+  },
+  "SRCDEV DisplayPill Link": {
+    "description": "DisplayPill as a link (focusable, pointer cursor)",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayPill tag=\"a\" href=\"${1:/tags/example}\" label=\"${2:Example}\" variant=\"${3|primary,default,success,warning,danger,neutral|}\" />"
+    ]
+  },
+  "SRCDEV DisplayPill Tokens": {
+    "description": "DisplayPill outlined style for every variant via base tokens",
+    "scope": "css",
+    "body": [
+      ".${1:tag-list} {",
+      "  --display-pill-background: ${2:transparent};",
+      "  --display-pill-text-colour: ${3:currentColor};",
+      "  --display-pill-border-colour: ${4:currentColor};",
+      "}"
+    ]
+  }
+}