srcdev-nuxt-components 9.4.5 → 9.4.6

package/.claude/skills/components/site-navigation.md

@@ -16,6 +16,7 @@ Both the horizontal list and the panel include animated active/hover indicator d
 |---|---|---|---|
 | `navItemData` | `NavItemData` | — (required) | Navigation items — see type below |
 | `navAlign` | `"left" \| "center" \| "right"` | `"left"` | Alignment of the horizontal nav list |
+| `ariaLabel` | `string` | `"Site navigation"` | aria-label on the root `<nav>` landmark — override for localisation |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root `<nav>` |
 
 ## NavItemData type

package/.claude/skills/components/tab-navigation.md

@@ -40,6 +40,7 @@ interface NavItemData {
 | `nav-item-data` | `NavItemData` | required | Navigation link data — only `main` key is read |
 | `nav-align` | `"left" \| "center" \| "right"` | `"left"` | Positions the tab list within the nav container |
 | `anchor-scroll-offset` | `number \| (() => number)` | — | Pixel offset subtracted from scroll target; pass a getter so it is re-evaluated at click time |
+| `aria-label` | `string` | `"Site navigation"` | aria-label on the root `<nav>` landmark — override for localisation |
 | `:style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root `<nav>` element |
 
 ---

package/.claude/skills/index.md

@@ -89,6 +89,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── grid-stack.md           — GridStack: CSS Grid z-axis stacking, slot API, z-order rules, sizing, video+overlay and image+text patterns
     ├── scroll-reveal-frame.md  — ScrollRevealFrame: generic parallax clipping frame, slot API, image grid pattern, CSS tokens, browser support
     ├── scroll-reveal-image.md  — ScrollRevealImage: single-image parallax reveal, focalX, imgWidth/imgHeight, responsive frame height
+    ├── marquee-scroller.md     — MarqueeScroller: infinite logo/badge scroller, per-item dynamic slots (marqueeData id), hover/focus/keyboard pause, reduced-motion, CSS tokens
     ├── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
     ├── tab-navigation.md       — TabNavigation: horizontal tab nav with CSS anchor-positioning indicators, anchor scroll, burger collapse, full CSS token API
     ├── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens

package/.vscode/srcdev-component-breadcrumb.code-snippets

@@ -10,5 +10,18 @@
       "  ]\"",
       "/>"
     ]
+  },
+  "SRCDEV Breadcrumb Localised": {
+    "description": "Breadcrumb with a localised aria-label",
+    "scope": "vue,html",
+    "body": [
+      "<Breadcrumb",
+      "  :items=\"[",
+      "    { label: '$1Services', to: '$2/services' },",
+      "    { label: '$3${TM_FILENAME_BASE}' },",
+      "  ]\"",
+      "  aria-label=\"${4:Breadcrumb}\"",
+      "/>"
+    ]
   }
 }

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

@@ -33,6 +33,24 @@
       "</ContentDocs>"
     ]
   },
+  "SRCDEV ContentDocs Localised Nav Labels": {
+    "description": "ContentDocs with localised aria-labels on the docsNav/docsPageNav <nav> landmarks",
+    "scope": "vue,html",
+    "body": [
+      "<ContentDocs",
+      "  v-model:active-nav-item=\"$1activeNavItem\"",
+      "  v-model:active-page-nav-item=\"$2activePageNavItem\"",
+      "  :docs-nav-items=\"$3docsNavItems\"",
+      "  :docs-page-nav-items=\"$4docsPageNavItems\"",
+      "  docs-nav-aria-label=\"${5:Docs navigation}\"",
+      "  docs-page-nav-aria-label=\"${6:On this page}\"",
+      ">",
+      "  <template #docsContent>",
+      "    <p>$7Page content goes here.</p>",
+      "  </template>",
+      "</ContentDocs>"
+    ]
+  },
   "SRCDEV ContentDocs Items Script": {
     "description": "docsNavItems / docsPageNavItems + active-item refs for ContentDocs",
     "scope": "typescript,vue",

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

@@ -10,5 +10,20 @@
       "  }\"",
       "/>"
     ]
+  },
+  "SRCDEV DisplayTooltipDefined Localised Copy": {
+    "description": "DisplayTooltipDefined with localised trigger/close-button copy",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltipDefined",
+      "  :content-text=\"{",
+      "    tooltipTitle: { tag: 'h4', text: '$1' },",
+      "    tooltipContent: { tag: 'p', text: '$2' },",
+      "  }\"",
+      "  trigger-aria-label=\"${3:Toggle the popover}\"",
+      "  close-button-text=\"${4:Close}\"",
+      "  close-button-aria-label=\"${5:Close tool tip}\"",
+      "/>"
+    ]
   }
 }

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

@@ -23,5 +23,16 @@
       "  </template>",
       "</DisplayTooltip>"
     ]
+  },
+  "SRCDEV DisplayTooltip Localised Trigger Label": {
+    "description": "DisplayTooltip with a localised triggerAriaLabel",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayTooltip trigger-aria-label=\"${1:Toggle the popover}\">",
+      "  <template #tooltipContent>",
+      "    <p>$0</p>",
+      "  </template>",
+      "</DisplayTooltip>"
+    ]
   }
 }

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

@@ -0,0 +1,93 @@
+{
+  "SRCDEV MarqueeScroller Basic": {
+    "description": "MarqueeScroller — infinite horizontal logo/badge scroller with per-item slots",
+    "scope": "vue,html",
+    "body": [
+      "<MarqueeScroller",
+      "  :marquee-data=\"[",
+      "    { id: 1, content: '$1logo-a' },",
+      "    { id: 2, content: '$2logo-b' },",
+      "  ]\"",
+      "  :item-config=\"{ width: '${3:120px}', height: '${4:60px}', gap: '${5:24px}' }\"",
+      ">",
+      "  <template #1>",
+      "    $6",
+      "  </template>",
+      "  <template #2>",
+      "    $7",
+      "  </template>",
+      "</MarqueeScroller>"
+    ]
+  },
+  "SRCDEV MarqueeScroller With Controls": {
+    "description": "MarqueeScroller with the visible pause/play control button (WCAG 2.2.2)",
+    "scope": "vue,html",
+    "body": [
+      "<MarqueeScroller",
+      "  :marquee-data=\"$1items\"",
+      "  show-controls",
+      "  aria-label=\"$2Scrolling client logos\"",
+      ">",
+      "  <template v-for=\"item in $1items\" #[item.id] :key=\"item.id\">",
+      "    $3",
+      "  </template>",
+      "</MarqueeScroller>"
+    ]
+  },
+  "SRCDEV MarqueeScroller Custom Control Icon/Copy": {
+    "description": "MarqueeScroller control button with custom icons and localised aria-labels",
+    "scope": "vue,html",
+    "body": [
+      "<MarqueeScroller",
+      "  :marquee-data=\"$1items\"",
+      "  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\">",
+      "    $6",
+      "  </template>",
+      "</MarqueeScroller>"
+    ]
+  },
+  "SRCDEV MarqueeScroller Custom Toggle Icon Slot": {
+    "description": "MarqueeScroller with the toggle-icon slot fully replacing the control button's icon",
+    "scope": "vue,html",
+    "body": [
+      "<MarqueeScroller :marquee-data=\"$1items\" show-controls>",
+      "  <template #toggle-icon=\"{ isPaused }\">",
+      "    $2",
+      "  </template>",
+      "</MarqueeScroller>"
+    ]
+  },
+  "SRCDEV MarqueeScroller CSS Override": {
+    "description": "CSS override scaffold for MarqueeScroller — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-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: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-responsive-header.code-snippets

@@ -15,6 +15,18 @@
       "</ResponsiveHeader>"
     ]
   },
+  "SRCDEV ResponsiveHeader Localised Nav Labels": {
+    "description": "ResponsiveHeader with localised aria-labels on the main/secondary nav landmarks and overflow menu",
+    "scope": "vue,html",
+    "body": [
+      "<ResponsiveHeader",
+      "  :responsive-nav-links=\"$1responsiveNavLinks\"",
+      "  main-nav-aria-label=\"${2:Main navigation}\"",
+      "  secondary-nav-aria-label=\"${3:Secondary navigation}\"",
+      "  overflow-menu-aria-label=\"${4:Overflow navigation menu}\"",
+      "/>"
+    ]
+  },
   "SRCDEV ResponsiveHeader Nav Data (with dropdown)": {
     "description": "responsiveNavLinks data with a dropdown group",
     "scope": "typescript,vue",

package/.vscode/srcdev-component-site-header.code-snippets

@@ -30,6 +30,23 @@
       "</SiteHeader>"
     ]
   },
+  "SRCDEV SiteHeader Localised Nav Labels": {
+    "description": "SiteHeader with localised aria-labels on all its nav landmarks (home, main, secondary, overflow)",
+    "scope": "vue,html",
+    "body": [
+      "<SiteHeader",
+      "  :responsive-nav-links=\"$1responsiveNavLinks\"",
+      "  home-nav-aria-label=\"${2:Home Navigation}\"",
+      "  main-nav-aria-label=\"${3:Main navigation}\"",
+      "  secondary-nav-aria-label=\"${4:Secondary navigation}\"",
+      "  overflow-menu-aria-label=\"${5:Overflow navigation menu}\"",
+      ">",
+      "  <template #branding>",
+      "    <NuxtLink to=\"/\" class=\"home-link\">$6Brand</NuxtLink>",
+      "  </template>",
+      "</SiteHeader>"
+    ]
+  },
   "SRCDEV SiteHeader Nav Data (flat)": {
     "description": "Simple flat responsiveNavLinks data with no dropdowns, for a few-page site",
     "scope": "typescript,vue",

package/.vscode/srcdev-component-site-navigation.code-snippets

@@ -0,0 +1,30 @@
+{
+  "SRCDEV SiteNavigation Basic": {
+    "description": "SiteNavigation horizontal nav with sliding active/hover indicator",
+    "scope": "vue,html",
+    "body": [
+      "<SiteNavigation :nav-item-data=\"$1navData\" nav-align=\"${2:left}\" />"
+    ]
+  },
+  "SRCDEV SiteNavigation Localised": {
+    "description": "SiteNavigation with a localised aria-label",
+    "scope": "vue,html",
+    "body": [
+      "<SiteNavigation :nav-item-data=\"$1navData\" aria-label=\"${2:Site navigation}\" />"
+    ]
+  },
+  "SRCDEV SiteNavigation Nav Data Script": {
+    "description": "navItemData for SiteNavigation",
+    "scope": "typescript,vue",
+    "body": [
+      "import type { NavItemData } from \"srcdev-nuxt-components\";",
+      "",
+      "const $1navData: NavItemData = {",
+      "  main: [",
+      "    { text: \"$2Home\", href: \"$3/\" },",
+      "    { text: \"$4About\", href: \"$5/about\" },",
+      "  ],",
+      "};"
+    ]
+  }
+}

package/.vscode/srcdev-component-slider-gallery.code-snippets

@@ -0,0 +1,38 @@
+{
+  "SRCDEV SliderGallery Basic": {
+    "description": "SliderGallery full-screen image slider with thumbnails and prev/next arrows",
+    "scope": "vue,html",
+    "body": [
+      "<SliderGallery v-model:gallery-data=\"$1galleryData\" />"
+    ]
+  },
+  "SRCDEV SliderGallery Localised": {
+    "description": "SliderGallery with localised loading/CTA/arrow copy",
+    "scope": "vue,html",
+    "body": [
+      "<SliderGallery",
+      "  v-model:gallery-data=\"$1galleryData\"",
+      "  loading-text=\"${2:Loading gallery...}\"",
+      "  see-more-text=\"${3:SEE MORE}\"",
+      "  prev-aria-label=\"${4:Previous image}\"",
+      "  next-aria-label=\"${5:Next image}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SliderGallery Data Script": {
+    "description": "galleryData ref for SliderGallery",
+    "scope": "typescript,vue",
+    "body": [
+      "import type { IGalleryData } from \"srcdev-nuxt-components\";",
+      "",
+      "const $1galleryData = ref<IGalleryData[]>([",
+      "  {",
+      "    src: \"$2/images/slide-1.jpg\",",
+      "    alt: \"$3\",",
+      "    title: \"$4\",",
+      "    textBrightness: \"${5:light}\",",
+      "  },",
+      "]);"
+    ]
+  }
+}

package/.vscode/srcdev-component-tab-navigation.code-snippets

@@ -0,0 +1,30 @@
+{
+  "SRCDEV TabNavigation Basic": {
+    "description": "TabNavigation with route/hash links",
+    "scope": "vue,html",
+    "body": [
+      "<TabNavigation :nav-item-data=\"$1navData\" nav-align=\"${2:center}\" />"
+    ]
+  },
+  "SRCDEV TabNavigation Localised": {
+    "description": "TabNavigation with a localised aria-label",
+    "scope": "vue,html",
+    "body": [
+      "<TabNavigation :nav-item-data=\"$1navData\" aria-label=\"${2:Site navigation}\" />"
+    ]
+  },
+  "SRCDEV TabNavigation Nav Data Script": {
+    "description": "navItemData for TabNavigation",
+    "scope": "typescript,vue",
+    "body": [
+      "import type { NavItemData } from \"srcdev-nuxt-components\";",
+      "",
+      "const $1navData: NavItemData = {",
+      "  main: [",
+      "    { text: \"$2Home\", href: \"$3/\" },",
+      "    { text: \"$4Overview\", href: \"$5#overview\" },",
+      "  ],",
+      "};"
+    ]
+  }
+}

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

@@ -0,0 +1,94 @@
+# MarqueeScroller — Consumer Styling Guide
+
+## Public token API
+
+| 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-offset` | `2px` | Outline offset on the same two focus states |
+| `--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` | `light-dark(var(--slate-10), var(--slate-00))` | 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 |
+| `--marquee-scroller-control-background-colour-hover` | `rgba(0, 0, 0, 0.9)` | Pause/play button background on hover |
+| `--marquee-scroller-control-text-colour` | `white` | Pause/play button icon colour |
+| `--marquee-scroller-control-border-radius` | `4px` | Pause/play button border radius |
+| `--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. |
+
+```css
+.my-page {
+  --marquee-scroller-item-border-colour: #b5651d;
+  --marquee-scroller-control-background-colour: #1a1a1a;
+  --marquee-scroller-fade-width: 20%;
+}
+```
+
+## High-contrast mode colours are not tokenised
+
+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.
+
+## Item size and spacing are prop-driven, not tokens
+
+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:
+
+```vue
+<MarqueeScroller
+  :item-config="{ width: '80px', height: '80px', gap: '24px' }"
+  animation-runtime="60s"
+/>
+```
+
+## 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:
+
+```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>
+```
+
+## 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`):
+
+```vue
+<MarqueeScroller
+  show-controls
+  play-icon="mdi:play-circle"
+  pause-icon="mdi:pause-circle"
+  play-label="Reproduire"
+  pause-label="Suspendre"
+/>
+```
+
+```vue
+<MarqueeScroller show-controls>
+  <template #toggle-icon="{ isPaused }">
+    <Icon :name="isPaused ? 'lucide:play' : 'lucide:pause'" />
+  </template>
+</MarqueeScroller>
+```