srcdev-nuxt-components 9.6.10 → 9.6.12

package/.vscode/srcdev-component-marquee-scroller.code-snippets

@@ -5,16 +5,17 @@
     "body": [
       "<MarqueeScroller",
       "  :marquee-data=\"[",
-      "    { id: 1, content: '$1logo-a' },",
-      "    { id: 2, content: '$2logo-b' },",
+      "    { id: 1, content: '${1:logo-a}' },",
+      "    { id: 2, content: '${2:logo-b}' },",
       "  ]\"",
       "  :item-config=\"{ width: '${3:120px}', height: '${4:60px}', gap: '${5:24px}' }\"",
+      "  :style-class-passthrough=\"[${6:}]\"",
       ">",
       "  <template #1>",
-      "    $6",
+      "    $7",
       "  </template>",
       "  <template #2>",
-      "    $7",
+      "    $8",
       "  </template>",
       "</MarqueeScroller>"
     ]
@@ -24,11 +25,11 @@
     "scope": "vue,html",
     "body": [
       "<MarqueeScroller",
-      "  :marquee-data=\"$1items\"",
+      "  :marquee-data=\"${1:items}\"",
       "  show-controls",
-      "  aria-label=\"$2Scrolling client logos\"",
+      "  aria-label=\"${2:Scrolling client logos}\"",
       ">",
-      "  <template v-for=\"item in $1items\" #[item.id] :key=\"item.id\">",
+      "  <template v-for=\"item in ${1:items}\" #[item.id] :key=\"item.id\">",
       "    $3",
       "  </template>",
       "</MarqueeScroller>"
@@ -39,14 +40,14 @@
     "scope": "vue,html",
     "body": [
       "<MarqueeScroller",
-      "  :marquee-data=\"$1items\"",
+      "  :marquee-data=\"${1:items}\"",
       "  show-controls",
       "  play-icon=\"${2:mdi:play-circle}\"",
       "  pause-icon=\"${3:mdi:pause-circle}\"",
       "  play-label=\"${4:Play}\"",
       "  pause-label=\"${5:Pause}\"",
       ">",
-      "  <template v-for=\"item in $1items\" #[item.id] :key=\"item.id\">",
+      "  <template v-for=\"item in ${1:items}\" #[item.id] :key=\"item.id\">",
       "    $6",
       "  </template>",
       "</MarqueeScroller>"
@@ -56,7 +57,7 @@
     "description": "MarqueeScroller with the toggle-icon slot fully replacing the control button's icon",
     "scope": "vue,html",
     "body": [
-      "<MarqueeScroller :marquee-data=\"$1items\" show-controls>",
+      "<MarqueeScroller :marquee-data=\"${1:items}\" show-controls>",
       "  <template #toggle-icon=\"{ isPaused }\">",
       "    $2",
       "  </template>",
@@ -67,25 +68,27 @@
     "description": "CSS override scaffold for MarqueeScroller — scope to a page or section class",
     "scope": "css",
     "body": [
-      ".$1my-page {",
+      ".${1:my-page} {",
       "  .marquee-scroller {",
-      "    --marquee-scroller-fade-width: ;",
-      "    --marquee-scroller-focus-outline-width: ;",
-      "    --marquee-scroller-focus-outline-offset: ;",
-      "    --marquee-scroller-item-border-colour: ;",
-      "    --marquee-scroller-item-border-width: ;",
-      "    --marquee-scroller-item-border-radius: ;",
-      "    --marquee-scroller-item-transition-duration: ;",
-      "    --marquee-scroller-group-hover-filter: ;",
-      "    --marquee-scroller-item-hover-filter: ;",
-      "    --marquee-scroller-control-offset: ;",
-      "    --marquee-scroller-control-background-colour: ;",
-      "    --marquee-scroller-control-background-colour-hover: ;",
-      "    --marquee-scroller-control-text-colour: ;",
-      "    --marquee-scroller-control-border-radius: ;",
-      "    --marquee-scroller-control-border-width: ;",
-      "    --marquee-scroller-control-padding: ;",
-      "    --marquee-scroller-control-font-size: ;",
+      "    --marquee-scroller-fade-width: ${2:10%};",
+      "    --marquee-scroller-focus-outline-width: ${3:2px};",
+      "    --marquee-scroller-focus-outline-colour: ${4:var(--theme-ring)};",
+      "    --marquee-scroller-focus-outline-offset: ${5:2px};",
+      "    --marquee-scroller-item-border-colour: ${6:var(--slate-10)};",
+      "    --marquee-scroller-item-border-width: ${7:1px};",
+      "    --marquee-scroller-item-border-radius: ${8:4px};",
+      "    --marquee-scroller-item-transition-duration: ${9:0.5s};",
+      "    --marquee-scroller-group-hover-filter: ${10:grayscale(1)};",
+      "    --marquee-scroller-item-hover-filter: ${11:grayscale(0)};",
+      "    --marquee-scroller-control-offset: ${12:8px};",
+      "    --marquee-scroller-control-background-colour: ${13:rgba(0, 0, 0, 0.7)};",
+      "    --marquee-scroller-control-background-colour-hover: ${14:rgba(0, 0, 0, 0.9)};",
+      "    --marquee-scroller-control-text-colour: ${15:white};",
+      "    --marquee-scroller-control-border-radius: ${16:4px};",
+      "    --marquee-scroller-control-border-width: ${17:1px};",
+      "    --marquee-scroller-control-padding: ${18:8px};",
+      "    --marquee-scroller-control-font-size: ${19:14px};",
+      "    --marquee-scroller-control-transition-duration: ${20:0.2s};",
       "  }",
       "}"
     ]

package/.vscode/{srcdev-component-triple-toggle-switch.code-snippets → srcdev-component-segmented-control.code-snippets}

@@ -1,18 +1,17 @@
 {
-  "SRCDEV TripleToggleSwitch": {
-    "description": "TripleToggleSwitch: three-option radio pill with a sliding marker",
+  "SRCDEV SegmentedControl": {
+    "description": "SegmentedControl: three-option radio pill with a sliding marker",
     "scope": "vue,html",
     "body": [
-      "<TripleToggleSwitch",
+      "<SegmentedControl",
       "  v-model=\"${1:selected}\"",
       "  v-model:field-data=\"${2:options}\"",
-      "  name=\"${3:triple-toggle}\"",
-      "  aria-label=\"${4:Choose an option}\"",
+      "  aria-label=\"${3:Choose an option}\"",
       "/>"
     ]
   },
-  "SRCDEV TripleToggleSwitch Options": {
-    "description": "IFormMultipleOptions data for TripleToggleSwitch (system/light/dark values get marker gradients)",
+  "SRCDEV SegmentedControl Options": {
+    "description": "IFormMultipleOptions data for SegmentedControl (system/light/dark values get marker gradients)",
     "scope": "typescript,vue",
     "body": [
       "const ${1:options} = ref<IFormMultipleOptions>({",

package/app/assets/styles/setup/03.theming/_theme-slots.css

@@ -13,6 +13,6 @@
   --theme-ring: var(--colour-theme-1);
   --theme-on-surface: var(--colour-theme-0);
   --theme-text: var(--colour-theme-9);
-  /* Light step: pairs with the dark --theme-surface-inverted (InputButton .secondary). */
+  /* Light step: pairs with the dark --theme-surface-inverted. */
   --theme-text-inverted: var(--colour-theme-0);
 }

package/app/assets/styles/setup/04.elements/forms/03.generic-input-geometry.css

@@ -20,6 +20,10 @@
   --form-element-outline-width-focus: 0.2rem;
   --form-element-outline-offset-focus: 0.2rem;
 
+  /* Resting shadow ring outside bordered controls. Its colour, --form-element-shadow-colour, is unset
+     so each control falls back to its own theme step 2 (red when invalid). */
+  --form-element-shadow-width: 0.2rem;
+
   /* Focus */
   --input-focus-ring-width: 0.2rem; /* 2px */
   --input-focus-ring-offset: 0.2rem;

package/app/components/01.atoms/alert-mask/AlertMask.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="alert-mask" :class="elementClasses">
+    <svg
+      class="alert-mask-decorator"
+      :style="{ '--_height': svgHeight + 'px' }"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <defs>
+        <mask :id="maskId" maskUnits="userSpaceOnUse">
+          <path :d="outerPath" fill="white" />
+          <path :d="innerPath" fill="black" />
+        </mask>
+      </defs>
+
+      <path
+        class="alert-mask-border"
+        :d="outerPath"
+        :style="cfg.borderColour ? { fill: cfg.borderColour } : undefined"
+        :mask="`url(#${maskId})`"
+      />
+      <path
+        class="alert-mask-background"
+        :d="innerPath"
+        :style="cfg.backgroundColour ? { fill: cfg.backgroundColour } : undefined"
+      />
+    </svg>
+
+    <div
+      class="alert-mask-content"
+      :style="{
+        '--_inset-left': cfg.borderLeft + 'px',
+        '--_inset-right': cfg.borderRight + 'px',
+        '--_inset-top': cfg.borderTop + 'px',
+        '--_inset-bottom': cfg.borderBottom + 'px',
+      }"
+    >
+      <div ref="alertContentRef" class="alert-mask-content-slot">
+        <slot name="default"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AlertMaskConfig } from "~/types/components";
+
+interface Props {
+  config?: AlertMaskConfig;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  config: () => ({}),
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+const maskId = `alert-mask-${useId()}`;
+const alertContentRef = useTemplateRef<HTMLElement | null>("alertContentRef");
+const contentWidth = ref(0);
+const contentHeight = ref(0);
+const measured = ref(false);
+let resizeObserver: ResizeObserver | null = null;
+
+const toSize = (value: number | undefined, fallback: number) =>
+  typeof value === "number" && Number.isFinite(value) ? Math.max(0, value) : fallback;
+
+const cfg = computed(() => ({
+  backgroundColour: props.config?.backgroundColour,
+  borderColour: props.config?.borderColour,
+  radiusLeft: toSize(props.config?.radiusLeft, 12),
+  radiusRight: toSize(props.config?.radiusRight, 12),
+  borderLeft: toSize(props.config?.borderLeft, 8),
+  borderTop: toSize(props.config?.borderTop, 8),
+  borderRight: toSize(props.config?.borderRight, 8),
+  borderBottom: toSize(props.config?.borderBottom, 8),
+}));
+
+const svgWidth = computed(() =>
+  measured.value ? contentWidth.value + cfg.value.borderLeft + cfg.value.borderRight : 0
+);
+const svgHeight = computed(() =>
+  measured.value ? contentHeight.value + cfg.value.borderTop + cfg.value.borderBottom : 0
+);
+
+const updateDimensions = () => {
+  const contentEl = alertContentRef.value;
+  if (!contentEl) return;
+  const rect = contentEl.getBoundingClientRect();
+  contentWidth.value = rect.width;
+  contentHeight.value = rect.height;
+  measured.value = true;
+};
+
+onMounted(() => {
+  nextTick(updateDimensions);
+  if (alertContentRef.value) {
+    resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(alertContentRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+});
+
+const outerPath = computed(() => {
+  const width = svgWidth.value;
+  const height = svgHeight.value;
+  if (!width || !height) return "";
+
+  const rl = Math.min(cfg.value.radiusLeft, width / 2, height / 2);
+  const rr = Math.min(cfg.value.radiusRight, width / 2, height / 2);
+
+  return `
+    M ${rl} 0
+    L ${width - rr} 0
+    Q ${width} 0 ${width} ${rr}
+    L ${width} ${height - rr}
+    Q ${width} ${height} ${width - rr} ${height}
+    L ${rl} ${height}
+    Q 0 ${height} 0 ${height - rl}
+    L 0 ${rl}
+    Q 0 0 ${rl} 0 Z
+  `;
+});
+
+const innerPath = computed(() => {
+  const width = svgWidth.value;
+  const height = svgHeight.value;
+  const { borderLeft: bl, borderTop: bt, borderRight: br, borderBottom: bb } = cfg.value;
+  const innerWidth = width - bl - br;
+  const innerHeight = height - bt - bb;
+  if (!width || !height || innerWidth <= 0 || innerHeight <= 0) return "";
+
+  const rl = Math.min(cfg.value.radiusLeft, innerWidth / 2, innerHeight / 2);
+  const rr = Math.min(cfg.value.radiusRight, innerWidth / 2, innerHeight / 2);
+  const right = width - br;
+  const bottom = height - bb;
+
+  return `
+    M ${bl + rl} ${bt}
+    L ${right - rr} ${bt}
+    Q ${right} ${bt} ${right} ${bt + rr}
+    L ${right} ${bottom - rr}
+    Q ${right} ${bottom} ${right - rr} ${bottom}
+    L ${bl + rl} ${bottom}
+    Q ${bl} ${bottom} ${bl} ${bottom - rl}
+    L ${bl} ${bt + rl}
+    Q ${bl} ${bt} ${bl + rl} ${bt} Z
+  `;
+});
+</script>
+
+<style lang="css">
+@layer components {
+  .alert-mask {
+    display: grid;
+    grid-template-areas: "mask";
+    min-inline-size: 0;
+
+    .alert-mask-decorator {
+      grid-area: mask;
+      width: 100%;
+      height: var(--_height);
+
+      .alert-mask-border {
+        fill: var(--alert-mask-border-colour, var(--theme-accent));
+      }
+
+      .alert-mask-background {
+        fill: var(--alert-mask-background-colour, color-mix(in oklab, var(--theme-surface-subtle) 80%, transparent));
+      }
+    }
+
+    .alert-mask-content {
+      grid-area: mask;
+      min-inline-size: 0;
+      margin: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);
+    }
+  }
+}
+</style>

package/app/components/01.atoms/alert-mask/CONSUMER-STYLING.md

@@ -1,64 +1,79 @@
-# AlertMaskCore — Consumer Styling Guide
+# AlertMask — Consumer Styling Guide
 
-## No public CSS token API
+> **Renamed 2026-10-17**: `AlertMaskCore` → `AlertMask`, root class `.alert-mask-core` →
+> `.alert-mask`. The colours also became CSS tokens (below); `config` colours still override them.
 
-`AlertMaskCore` draws its border/background via an SVG `<mask>` whose path geometry is computed
-from measured content dimensions, so it can't expose colour/radius/thickness as CSS custom
-properties the way most components do — a `var()` can't be interpolated into an SVG path or
-resized reactively the way a `fill` attribute can. Instead, the override surface is the `config`
-prop (`AlertMaskConfig`):
+`AlertMask` draws a border and a translucent fill around its slot as an SVG path, sized to the
+measured content. Geometry (radii, per-side border widths) can't be a CSS token, because the path
+is computed in script, so it comes from the `config` prop. Colours are plain CSS `fill` values, so
+they're tokens.
 
-```vue
-<AlertMaskCore
-  :config="{
-    backgroundColour: '#1a1a1a',
-    borderColour: 'var(--theme-accent)',
-    radiusLeft: 8,
-    radiusRight: 4,
-    borderLeft: 6,
-    borderTop: 1,
-    borderRight: 1,
-    borderBottom: 1,
-  }"
->
-  <p>Alert content</p>
-</AlertMaskCore>
-```
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--alert-mask-border-colour` | `var(--theme-accent)` | Border fill |
+| `--alert-mask-background-colour` | `color-mix(in oklab, var(--theme-surface-subtle) 80%, transparent)` | Inner fill |
+
+A `config.borderColour` or `config.backgroundColour` is applied as an inline `fill` style on its
+path and beats the token. Both read the theme of the nearest `data-theme` ancestor.
+
+> **Changed 2026-10-17**: the colours were `config`-only, with hardcoded defaults
+> (`var(--orange-08)` border, `rgba(0,0,0,0.25)` fill). They now default from the tokens above.
+
+### Geometry (`config`, `AlertMaskConfig`)
+
+| Field | Default | Controls |
+|---|---|---|
+| `radiusLeft` / `radiusRight` | `12` | Corner radius (px) of the left and right corners |
+| `borderLeft` / `borderTop` / `borderRight` / `borderBottom` | `8` | Border width (px) per side; the content is inset by the same amounts |
 
-Colours are applied as `fill` styles, so `borderColour`/`backgroundColour` can be `var()`
-references to your own tokens (a `var(--theme-*)` value needs a `data-theme` ancestor to resolve).
+Sides are physical (left stays left in a right-to-left layout), matching the drawn path. Negative
+or non-finite values fall back to `0` and the default respectively, and a radius larger than the
+box is clamped to half its smaller side.
 
-All fields are optional and fall back to `backgroundColour: "rgba(0,0,0,0.25)"`,
-`borderColour: "var(--orange-08)"`, `radiusLeft`/`radiusRight: 12`, `borderLeft`/`borderTop`/
-`borderRight`/`borderBottom: 8`.
+Private tokens (not public API): `--_height` (the measured SVG height) and `--_inset-left`,
+`--_inset-right`, `--_inset-top`, `--_inset-bottom` (content margins from the border widths), all set
+inline from script.
 
 ---
 
-## Internal (non-overridable) custom properties
+## State hooks
 
-`--_height`, `--_inset-inline-start`, `--_inset-inline-end`, `--_inset-block-start`, and
-`--_inset-block-end` are set inline from measured content size and `config` border widths. They're
-private implementation plumbing, not a consumer override surface — use `config` instead.
+None. Inner elements: `.alert-mask` > `.alert-mask-decorator` (the SVG, with `.alert-mask-border`
+and `.alert-mask-background` paths) + `.alert-mask-content` > `.alert-mask-content-slot`.
+
+---
+
+## Global theming
+
+```css
+:where(html) {
+  --alert-mask-border-colour: var(--theme-border);
+}
+```
 
 ---
 
 ## Local overrides
 
-There are no public tokens, so override the classes above with direct properties, scoped to an
-element you own (a page or section class, or a class added with `:style-class-passthrough`). Keep
-the block **unlayered** (no `@layer` wrapper) so it beats the library's `@layer components`. If your
-own file uses `<style scoped>`, selectors that reach inside the component need `:deep()`. Patterns
-and examples: `.claude/skills/component-local-style-override.md`.
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the
+component need `:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+**Caveat:** a colour passed in `config` is an inline style on the path, so it wins over the token
+wherever the token is set. `AlertMaskedContent` passes both colours this way (through its own
+`--alert-masked-content-*` tokens), so inside it set those instead.
 
 ---
 
 ## Class passthrough
 
-Use `styleClassPassthrough` to add classes to the root `.alert-mask-core` element for layout
-purposes (positioning, sizing) — it doesn't affect the mask's own colours or geometry, which stay
-governed by `config`.
+`style-class-passthrough` adds classes to the root `.alert-mask` element and updates after mount.
+Use it for layout (sizing, positioning) or to scope the colour tokens.
 
 ```vue
-<AlertMaskCore style-class-passthrough="my-alert-mask">...</AlertMaskCore>
+<AlertMask style-class-passthrough="my-alert-mask">...</AlertMask>
 ```
-