srcdev-nuxt-components 9.4.10 → 9.4.12

package/.claude/skills/components/select-menu.md

@@ -0,0 +1,195 @@
+# SelectMenu
+
+## Overview
+
+`SelectMenu` is a trigger-and-popover component for selecting from a list of options — a custom,
+fully token-styled alternative to a native `<select>` or `InputSelectCore`, built for non-form
+contexts (language switchers, category filters, faceted filter bars, multi-pick treatment lists).
+It reuses the same Popover API + CSS anchor-positioning mechanism as `ActionMenu` (see that skill
+doc), but its items carry a `value`/`label`/optional `icon`, and the whole thing is driven by
+`v-model` instead of slotted actions. Defaults to single-select (checkmark, closes on pick); set
+`multiple` for a checkbox-per-option multi-select where `v-model` is an array and the popover stays
+open between picks.
+
+**Location**: `app/components/02.molecules/select-menu/`
+
+---
+
+## Components
+
+### SelectMenu
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `options` | `SelectMenuOption[]` | — | **Required.** `{ value: string \| number; label: string; icon?: string }[]`. |
+| `label` | `string` | — | **Required.** Accessible name for the trigger + listbox (`aria-label`). Also the trigger's fallback text when nothing is selected and no `placeholder` is set — this doubles as a visible category tag, e.g. `"Choose a service"`. |
+| `placeholder` | `string` | `undefined` | Trigger text shown when nothing is selected. Falls back to `label` when omitted. |
+| `showIcon` | `boolean` | `true` | Show the selected option's icon in the trigger. |
+| `showLabel` | `boolean` | `true` | Show the selected option's label (or placeholder/label fallback) text in the trigger. Set `false` for an icon-only compact trigger. |
+| `showChevron` | `boolean` | `true` | Show the trailing chevron in the trigger. |
+| `multiple` | `boolean` | `false` | Allow selecting more than one option. Each option gets a checkbox indicator, `v-model` becomes an array, and picking an option leaves the popover open so more can be toggled. Trigger icon is not shown when `true` (no single option to represent). |
+| `showSelectionInTrigger` | `boolean` | `false` | Multiple mode only. When `true`, the trigger text updates to a comma-separated list of the currently checked options instead of staying fixed on `placeholder`/`label`. No effect outside `multiple`. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root `<div>`. |
+
+**v-model**
+
+`defineModel<string | number | (string | number)[] | undefined>({ default: undefined })` — the
+selected value(s). In single-select mode (default) it's the one selected option's `value`, or
+`undefined` if nothing is selected — a valid, expected state that renders the placeholder. With
+`multiple`, it's an array of selected values (`[]` when nothing is selected). `{ default: undefined }`
+is this repo's fix for the `vue/require-default-prop` false positive on `defineModel`-declared
+props that are legitimately optional — unlike `InputSelectCore`'s `modelValue`, which uses
+`{ required: true }` because a native form field genuinely can't be meaningfully empty, this model
+is optional by design (see that rule's `defineModel` gap noted in the repo's ledger `eslint_issues`
+docs). For several independent single-select categories, place multiple `SelectMenu` instances
+side by side rather than using `multiple` on one instance — see the "Filter bar" section below.
+
+**Type import**
+
+```ts
+import type { SelectMenuOption } from "~/types/components/select-menu";
+// consuming apps: import type { SelectMenuOption } from "srcdev-nuxt-components";
+```
+
+---
+
+## Basic usage
+
+```vue
+<script setup lang="ts">
+import type { SelectMenuOption } from "~/types/components/select-menu";
+
+const language = ref<string>("en");
+const languageOptions: SelectMenuOption[] = [
+  { value: "en", label: "English", icon: "flag:gb-4x3" },
+  { value: "fr", label: "Français", icon: "flag:fr-4x3" },
+];
+</script>
+
+<template>
+  <SelectMenu v-model="language" :options="languageOptions" label="Language" />
+</template>
+```
+
+---
+
+## Trigger content variants
+
+| Variant | Usage |
+|---|---|
+| Icon-only (compact switcher, e.g. a flag in a tight header) | `:show-label="false" :show-chevron="false"` |
+| Icon + chevron, no text (flag with a visible dropdown affordance) | `:show-label="false"` |
+| Text + chevron (category filter, no per-option icons) | `:show-icon="false"` |
+| Icon + text + chevron (full select) | Defaults — no overrides needed |
+
+When nothing is selected, the trigger shows `placeholder` (or `label` if no placeholder is given)
+— this is what makes it work as a filter-category tag, e.g. a `SelectMenu` with
+`label="Choose a service"` and no `placeholder` shows "Choose a service" until an option is
+picked, then swaps to the selected option's label.
+
+---
+
+## Multi-select (checkboxes)
+
+Set `multiple` to turn every option into a checkbox row. `v-model` becomes an array, and clicking
+an option toggles it without closing the popover:
+
+```vue
+<script setup lang="ts">
+const treatments = ref<string[]>([]);
+const treatmentOptions = [
+  { value: "trim", label: "Trim" },
+  { value: "layers", label: "Layers" },
+  { value: "restyle", label: "Restyle" },
+  { value: "straightening", label: "Straightening" },
+];
+</script>
+
+<template>
+  <SelectMenu v-model="treatments" :options="treatmentOptions" label="Services required" multiple />
+</template>
+```
+
+Unlike single-select, the trigger text stays fixed by default on `placeholder`/`label` as a static
+category tag regardless of the current selection — it doesn't update to list checked options, so
+`label="Services required"` remains visible in the trigger the whole time. Use the checkboxes
+inside the open popover to see what's currently selected.
+
+Set `showSelectionInTrigger` to opt out of that and have the trigger update instead:
+
+```vue
+<SelectMenu
+  v-model="treatments"
+  :options="treatmentOptions"
+  label="Services required"
+  multiple
+  show-selection-in-trigger
+/>
+<!-- Trigger reads e.g. "Layers, Restyle" once those two are checked, falling back to
+     "Services required" again if everything is unchecked. -->
+```
+
+---
+
+## Filter bar (multiple categories)
+
+`SelectMenu` is single-select per instance — a faceted filter bar is built by placing one instance
+per category, each with its own `v-model`:
+
+```vue
+<template>
+  <div style="display: flex; gap: 1.2rem;">
+    <SelectMenu label="Choose a service" v-model="service" :options="serviceOptions" />
+    <SelectMenu label="Choose a stylist" v-model="stylist" :options="stylistOptions" />
+  </div>
+</template>
+```
+
+---
+
+## CSS token API
+
+See `CONSUMER-STYLING.md` in the component folder for the full token reference. Default styling
+targets the same visual language as the library's other select-like controls (border, background,
+radius, focus ring drawn from `--theme-*` tokens).
+
+Quick reference:
+
+```css
+/* assets/styles/setup/07.components/select-menu.css */
+:root {
+  --select-menu-trigger-border-radius: 999rem;
+  --select-menu-trigger-surface: var(--brand-surface);
+  --select-menu-popover-surface: var(--brand-surface);
+  --select-menu-item-surface-hover: var(--brand-surface-subtle);
+  --select-menu-item-check-color: var(--brand-accent);
+}
+```
+
+---
+
+## Notes
+
+- **Popover API + CSS anchor positioning** — same mechanism as `ActionMenu`. Broadly supported
+  (Chrome 114+, Firefox 125+, Safari 17+). No polyfill is included.
+- **Left-aligned popover** (`left: anchor(left)`) — unlike `ActionMenu` which right-aligns. Matches
+  native `<select>` dropdown behaviour. Flips above the trigger near the bottom of the viewport.
+- **Keyboard navigation** follows the WAI-ARIA listbox pattern: `ArrowDown`/`ArrowUp` move between
+  options (wraps around), `Home`/`End` jump to first/last, `Enter`/`Space` select the focused
+  option, `Tab` closes without stealing focus back to the trigger (matches `ActionMenu`'s
+  `handleKeydown` convention — see that skill doc's note on the `currentIndex === -1` guard, which
+  applies identically here). `Enter`/`Space` close the popover in single-select mode but only
+  toggle the checkbox (leaving it open) when `multiple` is set.
+- **Opens focused on the current selection** — `handleToggle` focuses the first selected
+  `[role="option"]` if one exists (in `multiple` mode, the first checked item), otherwise the first
+  option (unlike `ActionMenu`, which always focuses the first item since it has no selection state).
+- **`aria-multiselectable="true"`** is set on the listbox only when `multiple` is `true`.
+- **Chevron rotation is pure CSS** via `:has(.select-menu-popover:popover-open)` on the root — no
+  JS state drives the visual. `isOpen` is still tracked internally, but only to set `aria-expanded`
+  on the trigger.
+- **No native `<select>`/`appearance: base-select` involved** — this is a from-scratch popover
+  listbox, not a styled native select, so it doesn't inherit `InputSelectCore`'s WebKit
+  `appearance: base-select` constraints.
+- **Not a form field** — `SelectMenu` has no `fieldHasError`/`theme`/`inputVariant` props like the
+  `05.forms` inputs. Use `InputSelectCore` instead for an actual form field that needs validation
+  state and native `<select>` semantics.

package/.claude/skills/components/toggle-switch-core.md

@@ -0,0 +1,150 @@
+# ToggleSwitchCore Component
+
+## Overview
+
+`ToggleSwitchCore` is the low-level pill-shaped (or square, via `round`) toggle switch primitive
+for the `05.forms` toggle family. It renders a visually-hidden native `<input type="checkbox">`
+(kept in the DOM for real keyboard/checkbox semantics) plus a styled track/thumb visual, with
+optional icon slots shown inside the thumb for the on/off states. It has no label, description, or
+error-message rendering of its own — that's composed by the `ToggleSwitchWithLabel` and
+`ToggleSwitchWithLabelInline` variants below.
+
+Most consumers should reach for **ToggleSwitchWithLabel** or **ToggleSwitchWithLabelInline** rather
+than `ToggleSwitchCore` directly.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:field-has-error`, `:style-class-passthrough`, `:aria-describedby`, `:true-value`, `:false-value`.
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:id` | `string` | (required) | Combined with a fixed prefix to build the native input's `id` (`toggle-switch-${id}`). |
+| `:name` | `string` | (required) | Applied to the native checkbox. |
+| `:required` | `boolean` | `false` | Native `required`. |
+| `:field-has-error` | `boolean` | `false` | Drives `aria-invalid` on the checkbox, and switches `data-theme` to `"error"` regardless of the `theme` prop's own value. |
+| `:true-value` / `:false-value` | `string \| number \| boolean` | `true` / `false` | The two values `v-model` toggles between. |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root element. |
+| `:theme` | `FormUiTheme` | `"default"` | Sets `data-theme` on the root (superseded by `"error"` when `field-has-error` is true — see above). |
+| `:round` | `boolean` | `true` | `true` renders a pill-shaped track/thumb (`border-radius: 100vw`); `false` renders a rounded-square shape (`border-radius: 0.4rem`). See the `--toggle-switch-border-radius` token in CONSUMER-STYLING.md to override the exact value either state produces. |
+| `:aria-describedby` | `string` | `""` | Forwarded to the native checkbox. |
+
+### v-model
+
+- `v-model` — `string | number | boolean`, **required** (`defineModel({ required: true })`, satisfying `vue/require-default-prop` — see `project_ledger_eslint_issues_column` in memory).
+
+### Slots
+
+- `iconOn` / `iconOff` — replace the default `material-symbols:circle-outline` icon shown inside the thumb for each state. Providing either slot switches off the `use-default-icons` wrapper class (checked via `useSlots()`, so this only reacts to slot *presence*, not conditional slot content).
+
+---
+
+## CSS token API
+
+See [CONSUMER-STYLING.md](../../app/components/05.forms/toggle-switch/CONSUMER-STYLING.md) for the
+full table with defaults.
+
+**Common tokens:**
+- `--toggle-switch-surface` / `-surface-hover` — track background resting/hover, fall back to `--theme-checkbox-symbol-surface`/`--theme-surface-subtle`
+- `--toggle-switch-border` / `-border-focus` — track border colour, and `:focus-visible` outline colour, fall back to `--theme-border`/`--theme-border-focus`
+- `--toggle-switch-symbol-surface-off` / `-symbol-surface-on` — thumb background unchecked/checked
+- `--toggle-switch-border-radius` — track and thumb shape; see the `round` prop above
+
+---
+
+## Fixed 2026-09-23: dead functionality and story bugs
+
+`ToggleSwitchCore` (and its two variants) migrated to full compliance from a `variants:true`,
+`eslint_issues:true`, score-3/5 state (no tests, no skill doc).
+
+- **`round` prop was completely dead** — both variants declared and forwarded it to
+  `ToggleSwitchCore`, and Storybook's `SquareShape` story existed specifically to demonstrate
+  `round: false`, but `ToggleSwitchCore` never declared the prop at all, so it silently fell
+  through as an inert `round` DOM attribute on the root `<div>` and the track/thumb stayed pill-shaped
+  regardless. Fixed by adding `round` to `ToggleSwitchCore` and wiring it to a new
+  `--toggle-switch-border-radius` token (100vw when round, 0.4rem when square).
+- **`fieldHasError` didn't switch the component's theme** — `ToggleSwitchCore` and
+  `ToggleSwitchWithLabel` both computed an error-aware theme value but bound `data-theme` to the
+  raw `theme` prop instead of that computed, so this library's `[data-theme="error"]` global
+  token overrides never applied when a consumer set `fieldHasError`. Fixed by binding `data-theme`
+  to the computed value in both files.
+- **An invalid `for` attribute on a `<div>`** (`.toggle-switch-wrapper`) was removed — `for` is
+  only a valid HTML attribute on `<label>`/`<output>`, so it was inert dead markup; the real
+  label association is via `InputLabel`'s own `for`/`id` wiring in the variants.
+- **`defineModel` had no default**, tripping `vue/require-default-prop` (a known false-positive
+  for `defineModel` — see `project_ledger_eslint_issues_column` in memory) — fixed with
+  `{ required: true }` across `ToggleSwitchCore` and both variants, since a checkbox genuinely
+  can't be meaningfully empty.
+- **Two dead, unread `--_transition-duration` private tokens** (one per variant) were removed —
+  nothing in either variant's own CSS or `ToggleSwitchCore`'s ever read them; the actual
+  transition durations are hardcoded `0.4s` literals inside `ToggleSwitchCore`.
+- **Custom `iconOn`/`iconOff` slot content could render as a non-square box, throwing off
+  centering** — `.symbol-icon` is `display: grid; place-content: center;`, and its single
+  auto-sized track shrink-wraps to the slotted content's own box. A plain inline element (e.g. a
+  `<span>` wrapping a 16×16 SVG, as in the `WithCustomIcons` stories) sizes to its line box's
+  leading rather than its intrinsic height, rendering as ~16×20 instead of 16×16. Fixed by adding
+  `line-height: 0` to `.symbol-icon`, which collapses that leading for whatever markup a consumer
+  slots in. The default icon (`@nuxt/icon`'s `Icon` component) wasn't affected, since iconify sets
+  its own sizing/`vertical-align` internally.
+- **All three story files' `theme` control listed the wrong option set**
+  (`["primary", "secondary", "tertiary", "ghost", "error", "success", "warning"]`, none of which
+  match `FormUiTheme`) — fixed to the real `["default", "success", "error", "warning"]`.
+  `ToggleSwitchWithLabelInline.stories.ts`'s `InlineFormExample` story also passed the now-invalid
+  `theme="secondary"` directly — fixed to `"default"`.
+
+---
+
+## Variants
+
+### ToggleSwitchWithLabel
+
+`ToggleSwitchWithLabel` (`variants/ToggleSwitchWithLabel.vue`) composes `ToggleSwitchCore` with
+`InputLabel`, an optional `description` slot, and `InputError`.
+
+**Additional props over ToggleSwitchCore:**
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:label` | `string` | (required) | Rendered via `InputLabel`. |
+| `:error-message` | `object \| string` | `""` | Rendered via `InputError` when `field-has-error` is true. |
+
+Note this wrapper passes `id`/`name`/`required`/`field-has-error`/`true-value`/`false-value`/
+`theme`/`round`/`aria-describedby` straight through to `ToggleSwitchCore`; `id` is a self-generated
+`useId()` value, not a prop — consumers don't set it directly.
+
+**Slots**: `description`, `iconOn`, `iconOff` (the latter two forwarded to `ToggleSwitchCore`).
+
+```vue
+<ToggleSwitchWithLabel
+  name="notifications"
+  label="Enable notifications"
+  v-model="notificationsEnabled"
+  :error-message="errors.notifications"
+  :field-has-error="!!errors.notifications"
+>
+  <template #description>Turn this on to receive notifications</template>
+</ToggleSwitchWithLabel>
+```
+
+### ToggleSwitchWithLabelInline
+
+`ToggleSwitchWithLabelInline` (`variants/ToggleSwitchWithLabelInline.vue`) composes
+`ToggleSwitchCore` with `InputLabel` laid out inline (label and switch side by side, no
+description/error-message support — this variant is for compact settings-row usage).
+
+**Additional props over ToggleSwitchCore:**
+
+| Prop (template form) | Type | Default | Notes |
+|------|------|---------|-------|
+| `:label` | `string` | (required) | Rendered via `InputLabel`. |
+| `:label-weight` | `LabelWeight` (`"normal" \| "semi-bold" \| "bold"`) | `"normal"` | Maps to a `body-normal`/`body-normal-semibold`/`body-normal-bold` class on the label. |
+
+This variant has no `required`/`field-has-error`/`error-message` props — it never claimed error-state
+support, unlike `ToggleSwitchWithLabel`.
+
+**Slots**: `iconOn`, `iconOff` (forwarded to `ToggleSwitchCore`).
+
+```vue
+<ToggleSwitchWithLabelInline name="darkMode" label="Dark mode" v-model="darkModeEnabled" />
+```

package/.claude/skills/index.md

@@ -107,6 +107,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── display-theme-switch.md — DisplayThemeSwitch: system/light/dark picker wrapping TripleToggleSwitchCore, wired to useSettingsStore, labels/icons props, small sizing variant
     ├── 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 + ActionMenuItemCore: 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, InputSelectCore'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-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, full CSS token API for border/outline/colour
@@ -127,6 +128,10 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── 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
     ├── input-range-core.md       — InputRangeCore: native range-slider primitive, markers/datalist slots, dead --theme-form-range-accent-color token fixed, CSS token API; Variants section covers InputRangeDefault
+    ├── input-number-core.md      — InputNumberCore: native number-input primitive, left/right step-button slots, missing base class/placeholder/mismatched slot-selector bugs fixed, CSS token API; Variants section covers InputNumberDefault
+    ├── input-textarea-core.md    — InputTextareaCore: native textarea primitive, left/right decorative slots, undefined-token/dead-code/label-leak bugs fixed, CSS token API; Variants section covers InputTextareaWithLabel
+    ├── input-select-core.md      — InputSelectCore: native select primitive, data-driven options with icon decorator, dead required/styleClassPassthrough/isDirty-isActive functionality fixed, appearance:base-select browser-support note, CSS token API; Variants section covers InputSelectWithLabel
+    ├── toggle-switch-core.md      — ToggleSwitchCore: pill/square checkbox-backed toggle primitive, dead round-prop/data-theme-error functionality and story theme-options bugs fixed, CSS token API; Variants section covers ToggleSwitchWithLabel/ToggleSwitchWithLabelInline
     ├── 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

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

@@ -0,0 +1,65 @@
+{
+  "SRCDEV InputNumberCore Basic": {
+    "description": "Basic InputNumberCore native number input (no label/error wrapper)",
+    "scope": "vue,html",
+    "body": [
+      "<InputNumberCore",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  :min=\"$40\"",
+      "  :max=\"$5100\"",
+      "  :step=\"$61\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputNumberDefault Basic": {
+    "description": "InputNumberDefault: labelled number input with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputNumberDefault",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "  :min=\"$40\"",
+      "  :max=\"$5100\"",
+      "  :step=\"$61\"",
+      "  :error-message=\"$7errors.fieldName\"",
+      "  :field-has-error=\"!!$7errors.fieldName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputNumberDefault With Step Buttons": {
+    "description": "InputNumberDefault with step-down/step-up buttons wired into the left/right slots",
+    "scope": "vue,html",
+    "body": [
+      "<InputNumberDefault",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "  :min=\"$40\"",
+      "  :max=\"$5100\"",
+      "  :step=\"$61\"",
+      "  :error-message=\"$7errors.fieldName\"",
+      "  :field-has-error=\"!!$7errors.fieldName\"",
+      ">",
+      "  <template #left>\\u2212</template>",
+      "  <template #right>+</template>",
+      "</InputNumberDefault>"
+    ]
+  },
+  "SRCDEV InputNumber CSS Override": {
+    "description": "CSS override scaffold for InputNumberCore tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .input-number-wrapper {",
+      "    --input-number-surface: $2;",
+      "    --input-number-border: $3;",
+      "    --input-number-border-hover: $4;",
+      "    --input-number-border-focus: $5;",
+      "  }",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,42 @@
+{
+  "SRCDEV InputSelectCore Basic": {
+    "description": "Basic InputSelectCore native select (no label/error wrapper)",
+    "scope": "vue,html",
+    "body": [
+      "<InputSelectCore",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  v-model:field-data=\"$4fieldOptions\"",
+      "  placeholder=\"$5Choose an option\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputSelectWithLabel Basic": {
+    "description": "InputSelectWithLabel: labelled select with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputSelectWithLabel",
+      "  v-model=\"$1fieldValue\"",
+      "  v-model:field-data=\"$2fieldOptions\"",
+      "  name=\"$3fieldName\"",
+      "  label=\"$4Field label\"",
+      "  placeholder=\"$5Choose an option\"",
+      "  :error-message=\"$6errors.fieldName\"",
+      "  :field-has-error=\"!!$6errors.fieldName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputSelect CSS Override": {
+    "description": "CSS override scaffold for InputSelectCore tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .input-select-wrapper {",
+      "    --input-select-surface: $2;",
+      "    --input-select-border: $3;",
+      "  }",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,40 @@
+{
+  "SRCDEV InputTextareaCore Basic": {
+    "description": "Basic InputTextareaCore native textarea (no label/error wrapper)",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextareaCore",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  placeholder=\"$4Placeholder text\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputTextareaWithLabel Basic": {
+    "description": "InputTextareaWithLabel: labelled textarea with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextareaWithLabel",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "  placeholder=\"$4Placeholder text\"",
+      "  :error-message=\"$5errors.fieldName\"",
+      "  :field-has-error=\"!!$5errors.fieldName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputTextarea CSS Override": {
+    "description": "CSS override scaffold for InputTextareaCore tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .input-textarea-wrapper {",
+      "    --input-textarea-surface: $2;",
+      "    --input-textarea-border: $3;",
+      "  }",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,65 @@
+{
+  "SRCDEV SelectMenu Basic": {
+    "description": "SelectMenu — v-model single-select popover listbox",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:selectedValue}\"",
+      "  :options=\"${2:options}\"",
+      "  label=\"${3:Choose an option}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SelectMenu Icon Only": {
+    "description": "SelectMenu — icon-only compact trigger (e.g. language switcher)",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:language}\"",
+      "  :options=\"${2:languageOptions}\"",
+      "  label=\"${3:Language}\"",
+      "  :show-label=\"false\"",
+      "  :show-chevron=\"false\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SelectMenu Category Filter": {
+    "description": "SelectMenu — text + chevron category filter, no per-option icons",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:filterValue}\"",
+      "  :options=\"${2:filterOptions}\"",
+      "  label=\"${3:Choose a service}\"",
+      "  :show-icon=\"false\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SelectMenu Multi-Select": {
+    "description": "SelectMenu — checkbox-per-option multi-select, v-model is an array",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:selectedValues}\"",
+      "  :options=\"${2:options}\"",
+      "  label=\"${3:Services required}\"",
+      "  :show-icon=\"false\"",
+      "  multiple",
+      "/>"
+    ]
+  },
+  "SRCDEV SelectMenu Multi-Select Showing Selection": {
+    "description": "SelectMenu — multi-select where the trigger updates to list checked options",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:selectedValues}\"",
+      "  :options=\"${2:options}\"",
+      "  label=\"${3:Services required}\"",
+      "  :show-icon=\"false\"",
+      "  multiple",
+      "  show-selection-in-trigger",
+      "/>"
+    ]
+  }
+}

package/.vscode/srcdev-component-toggle-switch.code-snippets

@@ -0,0 +1,49 @@
+{
+  "SRCDEV ToggleSwitchCore": {
+    "description": "ToggleSwitchCore — bare toggle switch (no label, use ToggleSwitchWithLabel for that)",
+    "scope": "vue,html",
+    "body": [
+      "<ToggleSwitchCore",
+      "  v-model=\"$1modelValue\"",
+      "  id=\"$2toggle-id\"",
+      "  name=\"$3toggleName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV ToggleSwitchWithLabel": {
+    "description": "ToggleSwitchWithLabel: labelled toggle switch with description/error support",
+    "scope": "vue,html",
+    "body": [
+      "<ToggleSwitchWithLabel",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "  :error-message=\"$4errors.fieldName\"",
+      "  :field-has-error=\"!!$4errors.fieldName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV ToggleSwitchWithLabelInline": {
+    "description": "ToggleSwitchWithLabelInline: compact label + toggle switch side by side, no error support",
+    "scope": "vue,html",
+    "body": [
+      "<ToggleSwitchWithLabelInline",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "/>"
+    ]
+  },
+  "SRCDEV ToggleSwitch CSS Override": {
+    "description": "CSS override scaffold for ToggleSwitchCore tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .toggle-switch-wrapper {",
+      "    --toggle-switch-surface: $2;",
+      "    --toggle-switch-symbol-surface-on: $3;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/app/components/01.atoms/animations/container-glow/CONSUMER-STYLING.md

@@ -7,7 +7,7 @@ consuming page's own stylesheet:
 
 | Token | Default | Description |
 |---|---|---|
-| `--container-glow-background` | `light-dark(white, hsl(246 44% 7%))` | Card background colour. |
+| `--container-glow-background` | `white` | Card background colour. |
 | `--container-glow-padding` | `2rem` | Card inner padding. |
 | `--container-glow-aspect-ratio` | `330 / 400` | Card aspect ratio. |
 | `--container-glow-border-radius` | `12px` | Card and glow-effect corner radius (shared by the card and every glow layer). |

package/app/components/01.atoms/animations/container-glow/ContainerGlow.vue

@@ -191,7 +191,7 @@ onBeforeUnmount(() => {
       position: relative;
 
       height: 100%;
-      background: var(--container-glow-background, light-dark(white, hsl(246 44% 7%)));
+      background: var(--container-glow-background, white);
       padding: var(--container-glow-padding, 2rem);
       aspect-ratio: var(--container-glow-aspect-ratio, 330 / 400);
       border-radius: var(--container-glow-border-radius, 12px);

package/app/components/01.atoms/animations/marquee-scroller/CONSUMER-STYLING.md

@@ -11,7 +11,7 @@
 | `--marquee-scroller-item-hover-filter` | `grayscale(0)` | Filter applied to a single item when it is individually hovered (overrides the group filter for that item) |
 | `--marquee-scroller-item-transition-duration` | `0.5s` | Transition duration for the item hover filter change |
 | `--marquee-scroller-item-border-width` | `1px` | Item border width |
-| `--marquee-scroller-item-border-colour` | `light-dark(var(--slate-10), var(--slate-00))` | Item border colour |
+| `--marquee-scroller-item-border-colour` | `var(--slate-10)` | Item border colour |
 | `--marquee-scroller-item-border-radius` | `4px` | Item border radius |
 | `--marquee-scroller-control-offset` | `8px` | Distance of the pause/play button from the top and end edges |
 | `--marquee-scroller-control-background-colour` | `rgba(0, 0, 0, 0.7)` | Pause/play button background |