srcdev-nuxt-components 9.6.0 → 9.6.1

package/.claude/skills/storybook-add-story.md

@@ -285,6 +285,59 @@ prop and try to pass it. Make it unmistakable:
 
 `PriceList.stories.ts` and `GoogleReviews.stories.ts` (line-clamp controls) follow this.
 
+## Link to the stories of components that use this one
+
+When the component you're working on is a building block of other components (it's rendered
+inside them, or they're a specialised version of it), its stories only show it in isolation. Add a
+short note to each story that names the components using it, says what they add, and links to their
+stories, so a reader can see it in real use. Examples: `AlertContent` is the panel inside
+`DisplayToast`, `DisplayPrompt` and `CookieConsentBanner`; `AlertContentInner` is shared by
+`AlertContent` and `AlertMaskedContent`.
+
+- **Say how they're related, not just "see also".** Name the parent and what it adds, e.g. "The
+  #actions slot wired to real accept and reject handlers: see the CookieConsentBanner story."
+- **Link to the story that shows the relevant feature**, not just any story. A story about a slot
+  or behaviour links to the parent story that exercises it. Other stories can share one general
+  note.
+- **Check the parent story actually shows what the note says.** Read its component before writing
+  the note. `DisplayToast` doesn't fill `AlertContent`'s `#actions` slot, so a toast note that
+  promised action buttons would send people to the wrong place.
+- **Put the note in the canvas**, as a `<p>` above the component, so it's visible on the Canvas tab
+  as well as Docs. If the story has a `parameters.docs.description`, add the link there too.
+- Find the parent's story id from its `title` and export name: `"Molecules/CookieConsentBanner"` +
+  `Default` gives `molecules-cookieconsentbanner--default` (lowercase, `/` and spaces become `-`,
+  then `--` and the kebab-cased export name).
+
+```ts
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const cookieNote = `
+  <p style="${storyNoteStyle}">
+    For the #actions slot wired up to real accept and reject handlers, open the
+    <a href="/?path=/story/molecules-cookieconsentbanner--default" target="_top">CookieConsentBanner</a> story.
+  </p>
+`;
+
+// In the story template:
+template: `
+  <div style="max-width: 600px; padding: 2rem;">
+    ${cookieNote}
+    <AlertContent v-bind="componentArgs">...</AlertContent>
+  </div>
+`,
+
+// In parameters.docs.description (markdown): use "?path=..." with no leading slash.
+story: "See the [CookieConsentBanner](?path=/story/molecules-cookieconsentbanner--default) story. ...",
+```
+
+- Canvas links need `target="_top"` and a leading `/` (`/?path=...`). Without `target="_top"` the
+  whole Storybook UI loads inside the preview frame. The leading `/` assumes Storybook is served
+  from the root of its domain, which holds locally and on the deployed Storybook.
+- Define each note once as a constant at the top of the file and interpolate it, rather than
+  repeating the markup in every story.
+
+`AlertContent.stories.ts` follows this.
+
 ## Notes
 
 - **Colour scheme:** `.storybook/preview.ts` pins every story to the light scheme

package/.claude/skills/theming-status-tokens.md

@@ -0,0 +1,60 @@
+# Status tokens
+
+Global status colours, declared on `:root` in `app/assets/styles/setup/03.theming/_status.css`.
+Components that show a status (a dot, a badge, a pill) fall back to these, so a consumer restyles
+every status indicator in the library from one place.
+
+## The set
+
+Each status has three roles:
+
+| Role | Token | Use |
+|---|---|---|
+| Solid | `--status-<name>` | Dots, markers, small fills (mid-ramp step, visible on light and dark) |
+| Surface | `--status-<name>-surface` | Tinted background of a badge or pill |
+| Text | `--status-<name>-text` | Text/icon on that surface |
+
+| Status | Solid | Surface / text | Meaning |
+|---|---|---|---|
+| `success` | `--green-06` | `--green-01` / `--green-10` | Good, active, online, complete |
+| `warning` | `--orange-05` | `--orange-01` / `--orange-10` | Needs attention, pending, idle |
+| `danger` | `--red-06` | `--red-01` / `--red-10` | Error, blocked, do not disturb |
+| `info` | `--blue-06` | `--blue-01` / `--blue-09` | Informational, in progress, new |
+| `neutral` | `--slate-05` | `--slate-01` / `--slate-09` | Inactive, offline, archived, draft |
+
+Keep the set to these five. A domain-specific state (`pending`, `archived`, `in-progress`) maps
+onto one of them rather than getting its own token; if a consumer genuinely needs a sixth colour,
+they define it in their app and pass it wherever the component takes a colour (e.g. `dotColor`).
+
+## Who reads them
+
+The component's own token always wins, then the global status token:
+
+| Component | Mapping |
+|---|---|
+| `DisplayChip` | `online` → success, `idle` → warning, `dnd` → danger, no class → neutral (solid) |
+| `DisplayPill` | `success`/`warning`/`danger` variants → surface + text. `primary` (brand) and `neutral` (dark, inverted) do **not** read the set |
+| `SelectMenu` | Nothing automatic; options pass `dotColor: "var(--status-success)"` etc. |
+
+When adding a component that shows a status, default its colour tokens to these
+(`var(--component-colour-online, var(--status-success))`), never to a palette step or hex value
+directly.
+
+## Overriding
+
+```css
+/* consuming app, unlayered */
+:root {
+  --status-success: #1f9d55;
+  --status-success-surface: #e6f6ec;
+  --status-success-text: #0f5132;
+}
+```
+
+One component only: set its own token instead (`--display-chip-colour-online: hotpink`).
+
+## Dark mode
+
+Light values only, like every other layer token (no `light-dark()`). Storybook's dark values live
+in `.storybook/color-scheme.css`: surfaces move to step `09`, text to step `02`; solids stay put.
+A consumer app with a dark scheme copies those overrides (see `theming-dark-mode.md`).

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

@@ -21,7 +21,8 @@
       "  src=\"${1:/images/profile.jpg}\"",
       "  alt=\"${2:Jane Smith}\"",
       "  :chip=\"{ size: '${3:12px}', maskWidth: '${4:4px}', offset: '${5:0px}', angle: '${6:45deg}' }\"",
-      "  :style-class-passthrough=\"['${7|online,offline|}']\"",
+      "  status=\"${7|online,idle,dnd,offline|}\"",
+      "  status-label=\"${8:Online}\"",
       "/>"
     ]
   }

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-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;
         }
       }