srcdev-nuxt-components 9.6.11 → 9.6.13

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

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

package/.vscode/srcdev-component-form-field.code-snippets

@@ -3,7 +3,7 @@
     "description": "FormField layout wrapper around a single form control",
     "scope": "vue,html",
     "body": [
-      "<FormField width=\"${1|wide,medium,narrow|}\" :has-gutter=\"${2|false,true|}\" :field-has-error=\"!!$3errors.fieldName\">",
+      "<FormField width=\"${1|wide,medium,narrow|}\" :has-gutter=\"${2|false,true|}\" :field-has-error=\"!!${3:errors.fieldName}\">",
       "  $0",
       "</FormField>"
     ]
@@ -12,12 +12,13 @@
     "description": "CSS override scaffold for FormField tokens",
     "scope": "css",
     "body": [
-      ".$1my-page {",
+      ".${1:my-page} {",
       "  .form-field {",
-      "    --form-field-max-width-narrow: $2;",
-      "    --form-field-gutter-width: $3;",
-      "    --form-field-margin-block: $4;",
-      "    --form-field-background-color: $5;",
+      "    --form-field-max-width-narrow: ${2:400px};",
+      "    --form-field-gutter-width: ${3:1.6rem};",
+      "    --form-field-margin-block: ${4:0 1.6rem};",
+      "    --form-field-background-color: ${5:transparent};",
+      "    --form-field-border-radius: ${6:0.4rem};",
       "  }",
       "}"
     ]

package/.vscode/srcdev-component-form-fieldset.code-snippets

@@ -4,11 +4,11 @@
     "scope": "vue,html",
     "body": [
       "<FormFieldset",
-      "  id=\"$1fieldId\"",
-      "  name=\"$2fieldName\"",
-      "  legend=\"$3Legend\"",
+      "  id=\"${1:fieldId}\"",
+      "  name=\"${2:fieldName}\"",
+      "  legend=\"${3:Legend}\"",
       "  group-role=\"${4|group,radiogroup|}\"",
-      "  :field-has-error=\"!!$5errors.fieldName\"",
+      "  :field-has-error=\"!!${5:errors.fieldName}\"",
       ">",
       "  <template #content>",
       "    $0",
@@ -20,15 +20,15 @@
     "description": "CSS override scaffold for FormFieldset tokens",
     "scope": "css",
     "body": [
-      ".$1my-page {",
+      ".${1:my-page} {",
       "  .form-fieldset {",
-      "    --form-fieldset-padding-block: $6;",
-      "    --form-fieldset-padding-inline: $7;",
-      "    --form-fieldset-border: $8;",
-      "    --form-fieldset-legend-color: $2;",
-      "    --form-fieldset-legend-font-size: $3;",
-      "    --form-fieldset-legend-font-weight: $4;",
-      "    --form-fieldset-legend-margin-block: $5;",
+      "    --form-fieldset-padding-block: ${2:0};",
+      "    --form-fieldset-padding-inline: ${3:0};",
+      "    --form-fieldset-border: ${4:0};",
+      "    --form-fieldset-legend-color: ${5:inherit};",
+      "    --form-fieldset-legend-font-size: ${6:var(--step-5)};",
+      "    --form-fieldset-legend-font-weight: ${7:normal};",
+      "    --form-fieldset-legend-margin-block: ${8:0.8rem};",
       "  }",
       "}"
     ]

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-skip-links.code-snippets

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

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

@@ -2,17 +2,30 @@
 
 ## Public token API
 
+### Region
+
 | Token | Default | Controls |
 |---|---|---|
 | `--marquee-scroller-fade-width` | `10%` | Width of the transparent fade at each edge of the track (`mask-image`) |
-| `--marquee-scroller-focus-outline-width` | `2px` | Outline width on the root region and the control button when keyboard-focused (colour is `--theme-ring`) |
+| `--marquee-scroller-focus-outline-width` | `2px` | Outline width on the root region and the control button when keyboard-focused |
+| `--marquee-scroller-focus-outline-colour` | `var(--theme-ring)` | Outline colour on the same two focus states |
 | `--marquee-scroller-focus-outline-offset` | `2px` | Outline offset on the same two focus states |
+
+### Items
+
+| Token | Default | Controls |
+|---|---|---|
 | `--marquee-scroller-group-hover-filter` | `grayscale(1)` | Filter applied to every item when the pointer hovers anywhere over the scroller |
 | `--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` | `var(--slate-10)` | Item border colour |
 | `--marquee-scroller-item-border-radius` | `4px` | Item border radius |
+
+### Control button
+
+| Token | Default | Controls |
+|---|---|---|
 | `--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 |
 | `--marquee-scroller-control-background-colour-hover` | `rgba(0, 0, 0, 0.9)` | Pause/play button background on hover |
@@ -21,15 +34,35 @@
 | `--marquee-scroller-control-padding` | `8px` | Pause/play button padding |
 | `--marquee-scroller-control-font-size` | `14px` | Pause/play button icon font size |
 | `--marquee-scroller-control-transition-duration` | `0.2s` | Pause/play button background-colour transition duration |
-| `--marquee-scroller-control-border-width` | `1px` | Pause/play button border width in forced-colors/high-contrast mode (`prefers-contrast: high`). The border colour itself stays the system `ButtonText` keyword — see note below. |
+| `--marquee-scroller-control-border-width` | `1px` | Pause/play button border width under `prefers-contrast: high`. The border colour itself stays the system `ButtonText` keyword, see below. |
 
-```css
-.my-page {
-  --marquee-scroller-item-border-colour: #b5651d;
-  --marquee-scroller-control-background-colour: #1a1a1a;
-  --marquee-scroller-fade-width: 20%;
-}
-```
+Private tokens (not public API): `--_fade-width`, `--_focus-outline` (width + colour, shared by
+both focus states) and `--_track-shift` (the loop distance, computed from `itemConfig`).
+
+---
+
+## State hooks
+
+The root `.marquee-scroller` carries:
+
+| Attribute | When |
+|---|---|
+| `data-paused` | The track is paused (control button, spacebar, focus inside, or reduced motion) |
+| `data-reverse` | `reverse` is `true` |
+| `data-reduced-motion` | The user prefers reduced motion and `respect-reduced-motion` is on |
+
+Inner elements: `.marquee-scroller-track` (the animated row), `.marquee-scroller-group` (one copy
+of the items; the second is `aria-hidden` and `inert`), `.marquee-scroller-item` (one fixed-size
+item box), `.marquee-scroller-control` (the pause/play `InputButton`) and
+`.marquee-scroller-description` (the visually hidden instructions).
+
+> **Changed 2026-10-17**: the generic class names were renamed so they can't collide with consumer
+> CSS. `.item` → `.marquee-scroller-item`, `.control-btn` → `.marquee-scroller-control` (now an
+> `InputButton`, so it also has `.input-button`), `.marquee-track` → `.marquee-scroller-track`,
+> `.marquee-group` → `.marquee-scroller-group`, `.sr-only` → `.marquee-scroller-description`. The
+> bare state classes became attributes: `.reverse` → `[data-reverse]`, `.paused` →
+> `[data-paused]`, `.reduced-motion` → `[data-reduced-motion]`. The keyframes are now
+> `marquee-scroller-move` (was `marqueeMove`).
 
 ---
 
@@ -37,10 +70,9 @@
 
 Under `prefers-contrast: high`, the control button switches to the system colour keywords
 `ButtonFace`/`ButtonText` rather than the component's own background/text tokens. These aren't
-exposed as overridable tokens on purpose — they're meant to track the user's OS-level high-contrast
-theme, which a component-level override would defeat. Only the border *width* in that mode is a
-token (`--marquee-scroller-control-border-width`), since it's a plain dimension with no such
-constraint.
+exposed as overridable tokens on purpose: they track the user's OS-level high-contrast theme, which
+a component-level override would defeat. Only the border *width* in that mode is a token
+(`--marquee-scroller-control-border-width`), since it's a plain dimension with no such constraint.
 
 ---
 
@@ -48,7 +80,7 @@ constraint.
 
 Item `width`/`height`/`gap` and the animation duration are set via the `itemConfig` and
 `animationRuntime` props (not CSS custom properties), since they also drive the component's own
-layout math (`aspect-ratio`, track width). Override those through props:
+loop math (`--_track-shift`) and the repeat measurement. Override those through props:
 
 ```vue
 <MarqueeScroller
@@ -57,58 +89,49 @@ layout math (`aspect-ratio`, track width). Override those through props:
 />
 ```
 
----
+Item boxes are a fixed size. Text in an item wraps (`overflow-wrap: anywhere`), but content taller
+than `itemConfig.height` overflows, so size slot content to the box.
 
-## Item content via slots
+---
 
-Each entry in `marqueeData` (`{ id, content }`) renders a slot named after its `id`. Provide the
-markup for each item via that dynamically-named slot:
+## Global theming
 
-```vue
-<MarqueeScroller :marquee-data="[{ id: 1, content: 'logo-a' }, { id: 2, content: 'logo-b' }]">
-  <template #1>
-    <img src="/logos/a.svg" alt="Logo A" />
-  </template>
-  <template #2>
-    <img src="/logos/b.svg" alt="Logo B" />
-  </template>
-</MarqueeScroller>
+```css
+:where(html) {
+  --marquee-scroller-fade-width: 15%;
+  --marquee-scroller-item-border-colour: var(--slate-04);
+}
 ```
 
 ---
 
-## Control button icon and copy
-
-The pause/play button's icon and its `aria-label` copy are all overridable — see `playIcon`/
-`pauseIcon`/`playLabel`/`pauseLabel` props, or the `toggle-icon` slot for a fully custom icon
-(scoped with `isPaused`):
+## Local overrides
 
-```vue
-<MarqueeScroller
-  show-controls
-  play-icon="mdi:play-circle"
-  pause-icon="mdi:pause-circle"
-  play-label="Reproduire"
-  pause-label="Suspendre"
-/>
-```
+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`.
 
-```vue
-<MarqueeScroller show-controls>
-  <template #toggle-icon="{ isPaused }">
-    <Icon :name="isPaused ? 'lucide:play' : 'lucide:pause'" />
-  </template>
-</MarqueeScroller>
+```css
+.partners-section {
+  --marquee-scroller-item-border-colour: #b5651d;
+  --marquee-scroller-control-background-colour: #1a1a1a;
+  --marquee-scroller-fade-width: 20%;
+}
 ```
 
 ---
 
-## Local overrides
+## Class passthrough
+
+`:style-class-passthrough` (string or string array) adds classes to the root `.marquee-scroller`
+region.
+
+---
 
-Set the tokens above on an element you own (a page or section class, or a plain `class` on the
-component (it falls through to the root element)): 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`.
+## Notes
 
+- Item content and the control button's icon and copy are covered in the skill doc
+  (`marquee-scroller.md`): one slot per `marqueeData` id, `toggle-icon` slot, and the
+  `playIcon`/`pauseIcon`/`playLabel`/`pauseLabel` props.