srcdev-nuxt-components 9.6.0 → 9.6.2

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

@@ -6,9 +6,10 @@
       "<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|}']\"",
+      "  status=\"${6|online,idle,dnd,offline|}\"",
+      "  status-label=\"${7:Online}\"",
       ">",
-      "  $7",
+      "  $8",
       "</DisplayChip>"
     ]
   },

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

@@ -34,5 +34,15 @@
       "  --display-pill-border-colour: ${4:currentColor};",
       "}"
     ]
+  },
+  "SRCDEV DisplayPill Two-Tone Ring": {
+    "description": "DisplayPill dark border plus light ring in each variant's own colours",
+    "scope": "css",
+    "body": [
+      ".${1:tag-list} {",
+      "  --display-pill-border-colour: currentColor;",
+      "  --display-pill-ring-width: ${2:0.2rem};",
+      "}"
+    ]
   }
 }

package/.vscode/srcdev-component-profile-section.code-snippets

@@ -5,16 +5,16 @@
     "body": [
       "<ProfileSection",
       "  tag=\"section\"",
-      "  :profile-picture=\"{ src: '$1', alt: '$2' }\"",
+      "  :profile-picture=\"{ src: '$2', alt: '$3' }\"",
       ">",
       "  <template #eyebrowText>",
-      "    <EyebrowText text-content=\"$3\" />",
+      "    <EyebrowText text-content=\"$4\" />",
       "  </template>",
       "  <template #heroText=\"{ headingId }\">",
-      "    <HeroText :id=\"headingId\" tag=\"h2\" :text-content=\"[{ text: '$4' }]\" />",
+      "    <HeroText :id=\"headingId\" tag=\"h2\" :text-content=\"[{ text: '$5' }]\" />",
       "  </template>",
       "  <template #profile-info-1>",
-      "    <p>$5</p>",
+      "    <p>$6</p>",
       "  </template>",
       "  <template #profile-info-2>",
       "    <p>$6</p>",
@@ -22,6 +22,27 @@
       "</ProfileSection>"
     ]
   },
+  "SRCDEV ProfileSection Header In Picture": {
+    "description": "ProfileSection with the eyebrow and heading over the bottom or top of the picture, on a scrim",
+    "scope": "vue,html",
+    "body": [
+      "<ProfileSection",
+      "  tag=\"section\"",
+      "  header-placement=\"${1|picture-bottom,picture-top|}\"",
+      "  :profile-picture=\"{ src: '$2', alt: '$3' }\"",
+      ">",
+      "  <template #eyebrowText>",
+      "    <EyebrowText text-content=\"$4\" />",
+      "  </template>",
+      "  <template #heroText=\"{ headingId }\">",
+      "    <HeroText :id=\"headingId\" tag=\"h2\" :text-content=\"[{ text: '$5' }]\" />",
+      "  </template>",
+      "  <template #profile-info-1>",
+      "    <p>$6</p>",
+      "  </template>",
+      "</ProfileSection>"
+    ]
+  },
   "SRCDEV ProfileSection CSS Override": {
     "description": "CSS override scaffold for ProfileSection tokens",
     "scope": "css",
@@ -30,6 +51,8 @@
       "  --profile-section-picture-width: $2;",
       "  --profile-section-gap-wide: $3;",
       "  --profile-section-picture-border-radius: $4;",
+      "  --profile-section-highlight-colour: $5;",
+      "  --profile-section-link-colour: $6;",
       "}"
     ]
   }

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

@@ -51,6 +51,12 @@
     "body": [
       ".$1site-header-nav {",
       "  --responsive-header-link-color: $2inherit;",
+      "  --responsive-header-link-color-hover: ;",
+      "  --responsive-header-link-color-active: ;",
+      "  --responsive-nav-decorator-indicator-color: ;",
+      "  --overflow-nav-link-color: ;",
+      "  --overflow-nav-link-color-hover: ;",
+      "  --overflow-nav-link-color-active: ;",
       "  --responsive-header-bg: $3transparent;",
       "  /* Fixed, NOT var(--step-*) — see responsive-header.md's measurement-pipeline note. */",
       "  --responsive-header-link-font-size: ${4:1.4rem};",

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

@@ -61,6 +61,34 @@
       "/>"
     ]
   },
+  "SRCDEV SelectMenu Filter Count": {
+    "description": "SelectMenu — multi-select filter with a category icon and a selected-count badge",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:selectedValues}\"",
+      "  :options=\"${2:options}\"",
+      "  label=\"${3:Category}\"",
+      "  multiple",
+      "  trigger-icon=\"${4:lucide:list}\"",
+      "  indicator=\"count\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SelectMenu Filter Status Dot": {
+    "description": "SelectMenu — single-select filter with a category icon and an active-filter status dot, fixed width across selections",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:status}\"",
+      "  :options=\"${2:statusOptions}\"",
+      "  label=\"${3:Status}\"",
+      "  trigger-icon=\"${4:lucide:circle-dot}\"",
+      "  indicator=\"dot\"",
+      "  reserve-label-width",
+      "/>"
+    ]
+  },
   "SRCDEV SelectMenu Multi-Select Showing Selection": {
     "description": "SelectMenu — multi-select where the trigger updates to list checked options",
     "scope": "vue,html",

package/.vscode/{srcdev-component-tabs-core.code-snippets → srcdev-component-tabbed-content.code-snippets}

@@ -1,9 +1,9 @@
 {
-  "SRCDEV TabsCore Basic": {
-    "description": "TabsCore — horizontal tablist with indexed trigger/content slots",
+  "SRCDEV TabbedContent Basic": {
+    "description": "TabbedContent — horizontal tablist with indexed trigger/content slots",
     "scope": "vue,html",
     "body": [
-      "<TabsCore :item-count=\"${1:3}\">",
+      "<TabbedContent :item-count=\"${1:3}\" aria-label=\"${8:Product details}\">",
       "  <template #tab-0-trigger>${2:Overview}</template>",
       "  <template #tab-0-content>",
       "    $3",
@@ -16,39 +16,39 @@
       "  <template #tab-2-content>",
       "    $7",
       "  </template>",
-      "</TabsCore>"
+      "</TabbedContent>"
     ]
   },
-  "SRCDEV TabsCore Vertical": {
-    "description": "TabsCore with axis=\"y\" for a vertical tab column",
+  "SRCDEV TabbedContent Vertical": {
+    "description": "TabbedContent with axis=\"y\" for a vertical tab column",
     "scope": "vue,html",
     "body": [
-      "<TabsCore axis=\"y\" :item-count=\"${1:3}\" aria-label=\"${2:Settings}\">",
+      "<TabbedContent axis=\"y\" :item-count=\"${1:3}\" aria-label=\"${2:Settings}\">",
       "  <template #tab-0-trigger>$3</template>",
       "  <template #tab-0-content>$4</template>",
-      "</TabsCore>"
+      "</TabbedContent>"
     ]
   },
-  "SRCDEV TabsCore Indicators Off": {
-    "description": "TabsCore with the moving hover/active/underline decorators all disabled",
+  "SRCDEV TabbedContent Indicators Off": {
+    "description": "TabbedContent with the moving hover/active/underline decorators all disabled",
     "scope": "vue,html",
     "body": [
-      "<TabsCore",
+      "<TabbedContent",
       "  :item-count=\"${1:3}\"",
       "  :track-hover=\"false\"",
       "  :track-active=\"false\"",
       "  :track-indicator=\"false\"",
       ">",
       "  $2",
-      "</TabsCore>"
+      "</TabbedContent>"
     ]
   },
-  "SRCDEV TabsCore CSS Override": {
-    "description": "CSS override scaffold for TabsCore — scope to a page or section class",
+  "SRCDEV TabbedContent CSS Override": {
+    "description": "CSS override scaffold for TabbedContent — scope to a page or section class",
     "scope": "css",
     "body": [
       ".$1my-page {",
-      "  .tabs-core {",
+      "  .tabbed-content {",
       "    --tabs-nav-border: ;",
       "    --tabs-hover-indicator-colour: ;",
       "    --tabs-hover-indicator-text-colour: ;",
@@ -56,6 +56,8 @@
       "    --tabs-active-indicator-text-colour: ;",
       "    --tabs-underline-indicator-colour: ;",
       "    --tabs-underline-indicator-height: ;",
+      "    --tabs-hover-underline-indicator-colour: ;",
+      "    --tabs-hover-underline-indicator-height: ;",
       "    --tabs-list-item-opacity: ;",
       "    --tabs-list-item-colour: ;",
       "    --tabs-list-item-colour-selected: ;",
@@ -63,16 +65,33 @@
       "    --tabs-list-item-font-weight: ;",
       "    --tabs-list-item-padding-block: ;",
       "    --tabs-list-item-padding-inline: ;",
+      "    --tabs-list-item-max-inline-size: ;",
       "    --tabs-list-item-colour-transition-duration: ;",
-      "    --tabs-list-item-focus-outline-width: ;",
+      "    --tabs-focus-ring-width: ;",
+      "    --tabs-focus-ring-colour: ;",
       "    --tabs-list-item-focus-outline-offset: ;",
+      "    --tabs-more-popover-surface: ;",
+      "    --tabs-more-popover-border: ;",
+      "    --tabs-more-item-surface-hover: ;",
+      "    --tabs-more-item-colour-selected: ;",
       "    --tabs-content-background-colour: ;",
+      "    --tabs-content-text-colour: ;",
       "    --tabs-content-border-width: ;",
       "    --tabs-content-border-colour: ;",
       "    --tabs-content-border-radius: ;",
       "    --tabs-axis-y-gap: ;",
+      "    --tabs-axis-y-list-max-inline-size: ;",
       "  }",
       "}"
     ]
+  },
+  "SRCDEV TabbedContent Scrolling Row": {
+    "description": "TabbedContent whose tab row scrolls sideways instead of collapsing into a More menu",
+    "scope": "vue,html",
+    "body": [
+      "<TabbedContent :item-count=\"${1:3}\" overflow-mode=\"scroll\" aria-label=\"${2:Product details}\">",
+      "  $3",
+      "</TabbedContent>"
+    ]
   }
 }

package/app/assets/styles/setup/03.theming/_status.css

@@ -0,0 +1,24 @@
+/* Shared status colours. Each status has a solid colour (dots, markers) plus a tinted
+   surface/text pair (badges, pills). Component tokens fall back to these, so overriding
+   one here restyles that status across every component. */
+:root {
+  --status-success: var(--green-06);
+  --status-success-surface: var(--green-01);
+  --status-success-text: var(--green-10);
+
+  --status-warning: var(--orange-05);
+  --status-warning-surface: var(--orange-01);
+  --status-warning-text: var(--orange-10);
+
+  --status-danger: var(--red-06);
+  --status-danger-surface: var(--red-01);
+  --status-danger-text: var(--red-10);
+
+  --status-info: var(--blue-06);
+  --status-info-surface: var(--blue-01);
+  --status-info-text: var(--blue-09);
+
+  --status-neutral: var(--slate-05);
+  --status-neutral-surface: var(--slate-01);
+  --status-neutral-text: var(--slate-09);
+}

package/app/assets/styles/setup/03.theming/index.css

@@ -4,3 +4,4 @@
 @import "./_error.css";
 @import "./_success.css";
 @import "./_warning.css";
+@import "./_status.css";

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

@@ -1,17 +1,18 @@
 # ContainerGlow — Consumer Styling Guide
 
-## Public CSS custom properties
+## Public token API
 
-These are static, per-card visual tokens — override them with a `style` attribute or from a
-consuming page's own stylesheet:
+Static, per-card visual tokens. Set them on an element you own (see Local overrides) or with a
+`style` attribute:
 
 | Token | Default | Description |
 |---|---|---|
-| `--container-glow-background` | `white` | Card background colour. |
+| `--container-glow-background` | `var(--theme-surface-subtle)` | Card background colour. |
+| `--container-glow-text-colour` | `var(--theme-text)` | Card text colour. |
 | `--container-glow-padding` | `2rem` | Card inner padding. |
-| `--container-glow-aspect-ratio` | `330 / 400` | Card aspect ratio. |
+| `--container-glow-aspect-ratio` | `330 / 400` | Card aspect ratio. Content taller than this grows the card. |
 | `--container-glow-border-radius` | `12px` | Card and glow-effect corner radius (shared by the card and every glow layer). |
-| `--container-glow-min-width` | `280px` | Card minimum width. |
+| `--container-glow-min-width` | `280px` | Card minimum width, capped at the wrapper's width so a narrow viewport never overflows. |
 | `--container-glow-max-width` | `280px` | Card maximum width. |
 | `--container-glow-content-gap` | `0.25rem` | Gap between a card's own slotted children. |
 | `--container-glow-highlight-colour` | `hsl(280 10% 50% / 1)` | Tint of the thin proximity-tracking ring drawn under the coloured glow. |
@@ -19,9 +20,14 @@ consuming page's own stylesheet:
 | `--container-glow-transition-duration` | `1s` | Fade duration when the glow's opacity changes (also disabled under `prefers-reduced-motion: reduce`). |
 | `--container-glow-gradient` | 5-stop conic rainbow gradient | The glow's colour gradient. Override with any valid `background` value (a `conic-gradient(...)`, a flat colour, etc). |
 
+> Changed 2026-10-08: `--container-glow-background` defaulted to `white` and the card set no text
+> colour. It now defaults to `var(--theme-surface-subtle)`, with the new
+> `--container-glow-text-colour` defaulting to `var(--theme-text)`. Set
+> `--container-glow-background: white` to keep the old look.
+
 ```vue
 <ContainerGlow
-  style="--container-glow-background: #111; --container-glow-border-radius: 4px; --container-glow-gradient: conic-gradient(from 180deg, #22d3ee, #a855f7, #22d3ee);"
+  style="--container-glow-background: #111; --container-glow-text-colour: #eee; --container-glow-gradient: conic-gradient(from 180deg, #22d3ee, #a855f7, #22d3ee);"
 >
   <template #cta>
     <p>Custom-coloured glow card</p>
@@ -29,25 +35,40 @@ consuming page's own stylesheet:
 </ContainerGlow>
 ```
 
----
+Private tokens, not public API: `--_start`, `--_opacity-active`, `--_gap`, `--_blur`, `--_spread`,
+`--_direction` and `--_gradient`. They're driven by pointer events and the `config` prop; use
+`config` (gap/blur/spread/direction/opacity) or the public tokens above (colour/geometry) instead.
+
+## State hooks
+
+| Selector | Element |
+|---|---|
+| `.container-glow-wrapper` | Root. A `<ul>` when `tag="li"`, otherwise a `<div>`. Flex row (column with `config.vertical`) that wraps onto new lines. |
+| `.container-glow` | One card per named slot, rendered as the `tag` element. |
+| `.container-glow-glows` | Decorative blurred glow layer inside each card (`aria-hidden`). |
+
+> Changed 2026-10-08: the glow layer class was `.glows`; renamed to `.container-glow-glows` so a
+> consumer's own `.glows` class can't collide with it. The wrapper also gained `flex-wrap: wrap`
+> (many cards used to overflow sideways) and renders as a `<ul>` when `tag="li"` (previously an
+> invalid `<li>` inside a `<div>`), with list margin, padding and bullets reset.
 
 ## The `config` prop (layout and interaction behaviour)
 
 Proximity distance, glow spread/blur, wrapper gap, wrapper direction, and the inactive-state
-opacity are **not** CSS tokens — they're computed per-pointer-move in JavaScript and applied as
-private custom properties, so they're driven entirely by the `config` prop instead
-(`ContainerGlowConfig`, importable from `srcdev-nuxt-components`):
+opacity are **not** CSS tokens. They're computed in JavaScript and applied as private custom
+properties, so they're driven entirely by the `config` prop (`ContainerGlowConfig`, importable
+from `srcdev-nuxt-components`):
 
 | Field | Type | Default | Description |
 |---|---|---|---|
-| `proximity` | `number` | `40` | Pointer distance (px) at which a card starts glowing. |
-| `spread` | `number` | `80` | Angular spread of the glow (degrees). |
-| `blur` | `number` | `20` | Blur applied to the glow layer (px). |
-| `gap` | `number` | `32` | Gap between cards in the wrapper (px). |
+| `proximity` | `number` | `40` | Pointer distance (px) at which a card starts glowing. Minimum `0`. |
+| `spread` | `number` | `80` | Angular spread of the glow (degrees). Clamped to `0`–`360`. |
+| `blur` | `number` | `20` | Blur applied to the glow layer (px). Minimum `0`. |
+| `gap` | `number` | `32` | Gap between cards in the wrapper (px). Minimum `0`. |
 | `vertical` | `boolean` | `false` | Stack cards vertically instead of horizontally. |
-| `inactiveOpacity` | `number` | `0` | Glow opacity when the pointer isn't nearby. |
+| `inactiveOpacity` | `number` | `0` | Glow opacity when the pointer isn't nearby. Clamped to `0`–`1`. |
 
-All fields are optional — pass only the ones you want to change:
+Non-finite values (`NaN`, `Infinity`) fall back to the default. All fields are optional:
 
 ```vue
 <ContainerGlow :config="{ blur: 40, vertical: true }">
@@ -56,11 +77,9 @@ All fields are optional — pass only the ones you want to change:
 </ContainerGlow>
 ```
 
----
-
 ## Named dynamic slots
 
-Each named slot renders as one glow card — the consumer controls the slot names, there's no
+Each named slot renders as one glow card. The consumer controls the slot names; there's no
 `itemCount`-style prop:
 
 ```vue
@@ -70,23 +89,11 @@ Each named slot renders as one glow card — the consumer controls the slot name
 </ContainerGlow>
 ```
 
----
-
 ## Motion
 
 The glow's opacity fade (`--container-glow-transition-duration`) is disabled under
 `prefers-reduced-motion: reduce`, so proximity changes are instant rather than animated.
 
----
-
-## Internal (non-overridable) custom properties
-
-`--_start`, `--_opacity-active`, `--_gap`, `--_blur`, `--_spread`, `--_direction`, and `--_gradient`
-are internal plumbing driven by pointer events and the `config` prop — use `config` (for
-gap/blur/spread/direction/opacity) or the public tokens above (for colour/geometry) instead.
-
----
-
 ## Local overrides
 
 Set the tokens above on an element you own (a page or section class, or a class added with
@@ -95,8 +102,6 @@ Set the tokens above on an element you own (a page or section class, or a class
 `<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`.
 
----
-
 ## Class passthrough
 
 Use `styleClassPassthrough` to add classes to the root `.container-glow-wrapper` element.
@@ -104,4 +109,3 @@ Use `styleClassPassthrough` to add classes to the root `.container-glow-wrapper`
 ```vue
 <ContainerGlow style-class-passthrough="my-container-glow">...</ContainerGlow>
 ```
-

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerGlowWrapper" class="container-glow-wrapper" :class="elementClasses">
+  <component :is="wrapperTag" ref="containerGlowWrapper" class="container-glow-wrapper" :class="elementClasses">
     <component
       :is="tag"
       v-for="(_, name) in $slots"
@@ -7,10 +7,10 @@
       ref="containerGlowItem"
       class="container-glow"
     >
-      <div class="glows"></div>
+      <div class="container-glow-glows" aria-hidden="true"></div>
       <slot :name="name"></slot>
     </component>
-  </div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -37,18 +37,22 @@ watch(
   }
 );
 
+const wrapperTag = computed(() => (props.tag === "li" ? "ul" : "div"));
+
 const controller = new AbortController();
 
 const containerGlowWrapper = ref<HTMLElement>();
 const containerGlowItem = ref<HTMLElement[]>([]);
 
-// Cache frequently used values to avoid repeated access
+const clampConfig = (value: number | undefined, fallback: number, min: number, max: number) =>
+  typeof value === "number" && Number.isFinite(value) ? Math.min(Math.max(value, min), max) : fallback;
+
 const configCache = computed(() => ({
-  proximity: props.config.proximity ?? 40,
-  inactiveOpacityStr: String(props.config.inactiveOpacity ?? 0),
-  gapStr: String(props.config.gap ?? 32),
-  blurStr: String(props.config.blur ?? 20),
-  spreadStr: String(props.config.spread ?? 80),
+  proximity: clampConfig(props.config.proximity, 40, 0, Infinity),
+  inactiveOpacityStr: String(clampConfig(props.config.inactiveOpacity, 0, 0, 1)),
+  gapStr: String(clampConfig(props.config.gap, 32, 0, Infinity)),
+  blurStr: String(clampConfig(props.config.blur, 20, 0, Infinity)),
+  spreadStr: String(clampConfig(props.config.spread, 80, 0, 360)),
   direction: props.config.vertical ? "column" : "row",
 }));
 
@@ -164,7 +168,11 @@ onBeforeUnmount(() => {
   .container-glow-wrapper {
     display: flex;
     flex-direction: var(--_direction, row);
+    flex-wrap: wrap;
     gap: calc(var(--_gap, 32) * 1px);
+    margin: 0;
+    padding: 0;
+    list-style: none;
 
     .container-glow {
       & *,
@@ -185,18 +193,20 @@ onBeforeUnmount(() => {
           hsla(0, 0%, 98%, 1) 1turn
         )
       );
-      --_opacity-active: v-bind("props.config.inactiveOpacity ?? 0");
+      --_opacity-active: v-bind("configCache.inactiveOpacityStr");
       --_start: 0;
 
       position: relative;
 
       height: 100%;
-      background: var(--container-glow-background, white);
+      background: var(--container-glow-background, var(--theme-surface-subtle));
+      color: var(--container-glow-text-colour, var(--theme-text));
       padding: var(--container-glow-padding, 2rem);
       aspect-ratio: var(--container-glow-aspect-ratio, 330 / 400);
       border-radius: var(--container-glow-border-radius, 12px);
-      min-width: var(--container-glow-min-width, 280px);
+      min-width: min(var(--container-glow-min-width, 280px), 100%);
       max-width: var(--container-glow-max-width, 280px);
+      overflow-wrap: anywhere;
       display: flex;
       flex-direction: column;
       gap: var(--container-glow-content-gap, 0.25rem);
@@ -255,7 +265,7 @@ onBeforeUnmount(() => {
         mask-composite: intersect;
       }
 
-      .glows {
+      .container-glow-glows {
         pointer-events: none;
         position: absolute;
         inset: 0;
@@ -288,8 +298,8 @@ onBeforeUnmount(() => {
       @media (prefers-reduced-motion: reduce) {
         &::before,
         &::after,
-        .glows::before,
-        .glows::after {
+        .container-glow-glows::before,
+        .container-glow-glows::after {
           transition: none;
         }
       }