srcdev-nuxt-components 9.6.0 → 9.6.1

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

@@ -1,6 +1,8 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import StorybookComponent from "../ContainerGlow.vue";
+import CanvasSwitcher from "../../../canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 type StoryArgs = {
   tag: "div" | "li" | "article" | "section";
@@ -10,8 +12,22 @@ type StoryArgs = {
   gap: number;
   vertical: boolean;
   inactiveOpacity: number;
+  canvasBackground: string;
+  cardBackground: string;
 };
 
+const darkColours = ["#000000", "#020024", "#0f0f23", "#1e293b", "#262626"];
+const darkColourLabels = {
+  "": "Theme default (light)",
+  "#000000": "Black",
+  "#020024": "Midnight",
+  "#0f0f23": "Ink",
+  "#1e293b": "Slate",
+  "#262626": "Charcoal",
+};
+const surfaceLabels = { ...darkColourLabels, "#ffffff": "White" };
+const isDark = (colour: string) => darkColours.includes(colour);
+
 export default {
   title: "Atoms/Effects/ContainerGlow",
   component: StorybookComponent,
@@ -51,6 +67,20 @@ export default {
       description: "Opacity of the glow when not being hovered near",
       table: { category: "config" },
     },
+    canvasBackground: {
+      control: { type: "select", labels: darkColourLabels },
+      options: ["", ...darkColours],
+      description:
+        "**Story control, not a prop.** Background of the demo stage behind the cards, so the glow can be checked on a dark page.",
+      table: { category: "Story canvas (story only)" },
+    },
+    cardBackground: {
+      control: { type: "select", labels: surfaceLabels },
+      options: ["", "#ffffff", ...darkColours],
+      description:
+        "**Story control, not a prop.** Sets `--container-glow-background` (and a light `--container-glow-text-colour` for dark values). In your CSS: `.pricing { --container-glow-background: #0f0f23; --container-glow-text-colour: #f3f4f6; }`",
+      table: { category: "CSS tokens (story only, set in your CSS)" },
+    },
     styleClassPassthrough: {
       table: { disable: true },
     },
@@ -69,35 +99,47 @@ export default {
     gap: 32,
     vertical: false,
     inactiveOpacity: 0,
+    canvasBackground: "",
+    cardBackground: "",
   },
   parameters: {
     docs: {
       description: {
         component:
-          "An interactive glow effect wrapper that creates one card per named slot the consumer provides, each with an animated gradient border that responds to mouse proximity.",
+          "An interactive glow effect wrapper that creates one card per named slot the consumer provides, each with an animated gradient border that responds to mouse proximity. The canvas and card background controls are story-only, for checking the glow against dark themes.",
       },
     },
   },
 } as Meta<StoryArgs>;
 
-const cardStyle =
-  "height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #374151;";
+function useStorySetup(args: StoryArgs) {
+  const config = computed(() => ({
+    proximity: args.proximity,
+    spread: args.spread,
+    blur: args.blur,
+    gap: args.gap,
+    vertical: args.vertical,
+    inactiveOpacity: args.inactiveOpacity,
+  }));
+  const stageStyle = computed(() => ({
+    background: args.canvasBackground || undefined,
+    "--container-glow-background": args.cardBackground || undefined,
+    "--container-glow-text-colour":
+      isDark(args.cardBackground) ? "#f3f4f6" : undefined,
+  }));
+  return { args, config, stageStyle };
+}
+
+const stageLayout = "padding: 60px 40px; min-height: 80vh; display: flex; align-items: center; justify-content: center;";
+const cardStyle = "height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center;";
 
 const Template: StoryFn<StoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const config = computed(() => ({
-      proximity: args.proximity,
-      spread: args.spread,
-      blur: args.blur,
-      gap: args.gap,
-      vertical: args.vertical,
-      inactiveOpacity: args.inactiveOpacity,
-    }));
-    return { args, config };
+    return useStorySetup(args);
   },
   template: `
-    <div style="background: radial-gradient(ellipse at center, #0f0f23 0%, #020024 100%); padding: 60px 40px; min-height: 80vh; display: flex; align-items: center; justify-content: center;">
+    <div style="${stageLayout}" :style="stageStyle">
       <StorybookComponent :tag="args.tag" :config="config">
         <template #one>
           <div style="${cardStyle}">
@@ -127,18 +169,10 @@ export const Default = Template.bind({});
 export const SingleContainer: StoryFn<StoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const config = computed(() => ({
-      proximity: args.proximity,
-      spread: args.spread,
-      blur: args.blur,
-      gap: args.gap,
-      vertical: args.vertical,
-      inactiveOpacity: args.inactiveOpacity,
-    }));
-    return { args, config };
+    return useStorySetup(args);
   },
   template: `
-    <div style="background: radial-gradient(ellipse at center, #0f0f23 0%, #020024 100%); padding: 60px 40px; min-height: 80vh; display: flex; align-items: center; justify-content: center;">
+    <div style="${stageLayout}" :style="stageStyle">
       <StorybookComponent :tag="args.tag" :config="config">
         <template #cta>
           <div style="${cardStyle}">
@@ -173,3 +207,75 @@ SubtleGlow.args = {
   gap: 20,
   inactiveOpacity: 0,
 };
+
+export const StressTest: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const longUnbroken = "Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft";
+    const longUrl = "https://example.com/" + "a-very-long-path-segment-without-spaces".repeat(4);
+    const longCopy =
+      "Unsere Behandlungen werden individuell auf Ihre Bedürfnisse abgestimmt, damit Sie sich rundum wohlfühlen und entspannt nach Hause gehen können. ".repeat(
+        3
+      );
+    return { ...useStorySetup(args), longUnbroken, longUrl, longCopy };
+  },
+  template: `
+    <div style="padding: 40px 16px; min-height: 80vh;" :style="stageStyle">
+      <StorybookComponent :tag="args.tag" :config="config">
+        <template #long-unbroken>
+          <h3 style="margin: 0 0 8px 0;">{{ longUnbroken }}</h3>
+          <p style="margin: 0;">{{ longUrl }}</p>
+        </template>
+        <template #long-copy>
+          <h3 style="margin: 0 0 8px 0;">Sehr lange übersetzte Überschrift für eine Karte</h3>
+          <p style="margin: 0; font-size: 1.3rem;">{{ longCopy }}</p>
+        </template>
+        <template #empty></template>
+        <template #single-char><p style="margin: 0;">A</p></template>
+        <template #emoji><p style="margin: 0;">🎉 Emoji first, then &lt;script&gt;alert("html")&lt;/script&gt; as text</p></template>
+        <template #rtl><p dir="rtl" style="margin: 0;">نص عربي طويل من اليمين إلى اليسار للتحقق من الاتجاه</p></template>
+        <template #broken-image>
+          <img src="/does-not-exist.jpg" alt="Broken image" width="200" height="120" style="max-width: 100%; height: auto;" />
+        </template>
+        <template #eight><p style="margin: 0;">Card 8</p></template>
+        <template #nine><p style="margin: 0;">Card 9</p></template>
+        <template #ten><p style="margin: 0;">Card 10</p></template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = {
+  tag: "li",
+  gap: 16,
+};
+StressTest.decorators = [
+  (story, context) => ({
+    components: { story, CanvasSwitcher },
+    setup() {
+      const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "mobileCanvas");
+      return { canvasName };
+    },
+    template: `
+      <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+        <CanvasSwitcher v-model:canvas-name="canvasName" />
+      </div>
+      <div :class="canvasName" style="margin-inline: auto; outline: 1px dashed currentColor;">
+        <story />
+      </div>
+    `,
+  }),
+];
+StressTest.parameters = {
+  initialCanvas: "mobileCanvas",
+  docs: {
+    description: {
+      story:
+        "Hostile content to find breakage. Ten cards should wrap onto new rows instead of overflowing sideways, " +
+        "long unbroken words and URLs should wrap inside the 280px card, the long German copy should grow the card past its aspect ratio " +
+        "rather than spilling out, the empty card should keep its size, HTML-like text should render as text, RTL text should align right, " +
+        "and the broken image should not stretch the card. With tag 'li' the wrapper renders as a ul. " +
+        "Negative, fractional and non-finite config values are clamped (covered by unit tests), so the layout should never collapse. Check at every canvas width.",
+    },
+  },
+};

package/app/components/01.atoms/animations/container-glow/tests/ContainerGlow.spec.ts

@@ -64,6 +64,29 @@ describe("ContainerGlow", () => {
     expect(wrapper.find(".container-glow").element.tagName).toBe(tag.toUpperCase());
   });
 
+  it("renders the wrapper as <ul> when tag='li' so the items form a valid list", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      props: { tag: "li" },
+      slots: { one: "<p>One</p>" },
+    });
+    expect(wrapper.element.tagName).toBe("UL");
+  });
+
+  it.each(["div", "article", "section"] as const)("renders the wrapper as <div> when tag='%s'", async (tag) => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      props: { tag },
+      slots: { one: "<p>One</p>" },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("hides the decorative glow layer from assistive technology", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      slots: { one: "<p>One</p>" },
+    });
+    expect(wrapper.find(".container-glow-glows").attributes("aria-hidden")).toBe("true");
+  });
+
   // ─── Config ─────────────────────────────────────────────────────────────
 
   it("applies default config values to the wrapper as CSS custom properties", async () => {
@@ -99,6 +122,28 @@ describe("ContainerGlow", () => {
     expect(style.getPropertyValue("--_gap")).toBe("32");
   });
 
+  it("clamps negative and out-of-range config values", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      props: { config: { gap: -10, blur: -5, spread: 999 } },
+      slots: { one: "<p>One</p>" },
+    });
+    const style = wrapper.element.style;
+    expect(style.getPropertyValue("--_gap")).toBe("0");
+    expect(style.getPropertyValue("--_blur")).toBe("0");
+    expect(style.getPropertyValue("--_spread")).toBe("360");
+  });
+
+  it("falls back to defaults for non-finite config values", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      props: { config: { gap: Number.NaN, blur: Number.POSITIVE_INFINITY, spread: Number.NaN } },
+      slots: { one: "<p>One</p>" },
+    });
+    const style = wrapper.element.style;
+    expect(style.getPropertyValue("--_gap")).toBe("32");
+    expect(style.getPropertyValue("--_blur")).toBe("20");
+    expect(style.getPropertyValue("--_spread")).toBe("80");
+  });
+
   // ─── styleClassPassthrough ────────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string", async () => {

package/app/components/01.atoms/animations/container-glow/tests/__snapshots__/ContainerGlow.spec.ts.snap

@@ -3,11 +3,11 @@
 exports[`ContainerGlow > renders correct HTML structure (default) 1`] = `
 "<div class="container-glow-wrapper" style="--_gap: 32; --_blur: 20; --_spread: 80; --_direction: row;">
   <div class="container-glow">
-    <div class="glows"></div>
+    <div class="container-glow-glows" aria-hidden="true"></div>
     <p>One</p>
   </div>
   <div class="container-glow">
-    <div class="glows"></div>
+    <div class="container-glow-glows" aria-hidden="true"></div>
     <p>Two</p>
   </div>
 </div>"

package/app/components/01.atoms/animations/glowing-border/CONSUMER-STYLING.md

@@ -1,13 +1,22 @@
 # GlowingBorder — Consumer Styling Guide
 
-## Public CSS custom properties
+## Public token API
+
+### Box
 
 | Token | Default | Description |
 |---|---|---|
 | `--glowing-border-width` | `3px` | Border thickness. |
 | `--glowing-border-radius` | `30px` | Corner radius. |
-| `--glowing-border-surface` | `canvas` | Fill colour behind the glow (the padding-box layer). |
+| `--glowing-border-surface` | `var(--theme-surface-subtle)` | Fill colour behind the glow (the padding-box layer). |
+| `--glowing-border-text-colour` | `var(--theme-text)` | Text colour inside the box. |
 | `--glowing-border-animation-duration` | `10s` | Time for the glow to complete one full rotation. |
+| `--glowing-border-overflow` | `hidden` | Clips content to the rounded corners. Set `visible` when wrapping a control whose hover/focus outline must show (see the recipe below). |
+
+> Changed 2026-10-08: `--glowing-border-surface` defaulted to the `canvas` system colour and no text
+> colour was set. It now defaults to `var(--theme-surface-subtle)`, with the new
+> `--glowing-border-text-colour` defaulting to `var(--theme-text)`. Set
+> `--glowing-border-surface: canvas` to keep the old fill.
 
 ```vue
 <GlowingBorder
@@ -17,9 +26,7 @@
 </GlowingBorder>
 ```
 
----
-
-## Variant colour stops
+### Variant colour stops
 
 Each `variant` drives a 5-stop conic gradient. Every stop is an individually overridable token,
 named `--glowing-border-{variant}-color-{1-5}`:
@@ -41,22 +48,26 @@ named `--glowing-border-{variant}-color-{1-5}`:
 </GlowingBorder>
 ```
 
----
+Private tokens, not public API: `--_glow-deg`, `--_clr-1` through `--_clr-5`, and
+`--_gradient-glow` (the resolved per-variant colour stops and the animated rotation angle). Use the
+public tokens above instead.
 
-## Motion
-
-The glow rotates continuously via CSS animation and stops automatically when the visitor has
-`prefers-reduced-motion: reduce` set.
+## State hooks
 
----
+| Selector | Meaning |
+|---|---|
+| `.glowing-border` | Root element (rendered as the `tag` element). |
+| `.glowing-border[data-variant="subtle\|vivid\|silver\|steel\|green"]` | The active colour variant. |
 
-## Internal (non-overridable) custom properties
+> Changed 2026-10-08: the variant used to be added as a bare class (`.glowing-border.green`), which
+> collided with any consumer class of the same name (`.green`, `.silver` are common). It's now a
+> `data-variant` attribute; update any selector that targeted the old class. The animation's
+> keyframes were renamed from the generic `glow` to `glowing-border-rotate` for the same reason.
 
-`--_glow-deg`, `--_clr-1` through `--_clr-5`, and `--_gradient-glow` are internal composition
-plumbing (the resolved per-variant colour stops and the animated rotation angle) — use the public
-tokens above instead.
+## Motion
 
----
+The glow rotates continuously via CSS animation and stops automatically when the visitor has
+`prefers-reduced-motion: reduce` set.
 
 ## Local overrides
 
@@ -66,15 +77,61 @@ 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`.
 
----
+**Caveat:** the active variant re-declares its `--_clr-*` stops on the root from the
+`--glowing-border-{variant}-color-*` tokens, so set those public tokens, never `--_clr-*`.
+
+## Recipe: glow as a control's border
+
+For a single "special" button or input, wrap just the control so the glow becomes its border.
+No changes to the control are needed:
+
+- `InputButton`'s border already defaults to its own surface colour, so it shows no edge of its own.
+- `InputTextCore` needs `--input-text-border: transparent`.
+- On the `GlowingBorder`: radius is the control's radius plus the glow width, surface
+  `transparent`, overflow `visible` (so the control's hover and focus outlines aren't clipped),
+  and an inline or shrink-to-fit display so it hugs the control.
+
+```vue
+<GlowingBorder tag="span" variant="vivid" style-class-passthrough="special-cta">
+  <InputButton variant="primary" button-text="Book a free consultation"></InputButton>
+</GlowingBorder>
+
+<GlowingBorder variant="vivid" style-class-passthrough="special-input">
+  <InputTextCore id="email" v-model="email" type="email" name="email"></InputTextCore>
+</GlowingBorder>
+```
+
+```css
+.special-cta,
+.special-input {
+  --glowing-border-width: 3px;
+  --glowing-border-surface: transparent;
+  --glowing-border-overflow: visible;
+}
+
+.special-cta {
+  --glowing-border-radius: calc(var(--button-border-radius) + 3px);
+  display: inline-block;
+}
+
+.special-input {
+  --glowing-border-radius: calc(var(--form-input-border-radius) + 3px);
+  --input-text-border: transparent;
+}
+```
+
+The `HighlightedControls` story shows both.
 
 ## Class passthrough
 
 Use `styleClassPassthrough` to add classes to the root element for layout purposes (positioning,
-sizing) — it doesn't affect the glow's colours or geometry, which stay governed by the tokens
-above.
+sizing). It doesn't affect the glow's colours or geometry, which stay governed by the tokens above.
 
 ```vue
 <GlowingBorder style-class-passthrough="my-glowing-border">...</GlowingBorder>
 ```
 
+## Notes
+
+The root has `overflow: hidden` by default (`--glowing-border-overflow`, to clip content to the
+rounded corners) and `overflow-wrap: anywhere`, so long unbroken words and URLs wrap instead of being clipped.

package/app/components/01.atoms/animations/glowing-border/GlowingBorder.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" class="glowing-border" :class="[variant, elementClasses]">
+  <component :is="tag" class="glowing-border" :class="elementClasses" :data-variant="variant">
     <slot></slot>
   </component>
 </template>
@@ -66,7 +66,7 @@ watch(
   }
 
   .glowing-border {
-    &.vivid {
+    &[data-variant="vivid"] {
       --_clr-1: var(--glowing-border-vivid-color-1, #ff0000);
       --_clr-2: var(--glowing-border-vivid-color-2, #ffa500);
       --_clr-3: var(--glowing-border-vivid-color-3, #ffff00);
@@ -74,7 +74,7 @@ watch(
       --_clr-5: var(--glowing-border-vivid-color-5, #0000ff);
     }
 
-    &.subtle {
+    &[data-variant="subtle"] {
       --_clr-1: var(--glowing-border-subtle-color-1, #ff9a9e);
       --_clr-2: var(--glowing-border-subtle-color-2, #fad0c4);
       --_clr-3: var(--glowing-border-subtle-color-3, #fad0c4);
@@ -82,7 +82,7 @@ watch(
       --_clr-5: var(--glowing-border-subtle-color-5, #a18cd1);
     }
 
-    &.silver {
+    &[data-variant="silver"] {
       --_clr-1: var(--glowing-border-silver-color-1, #d4d4d4);
       --_clr-2: var(--glowing-border-silver-color-2, #e4e4e4);
       --_clr-3: var(--glowing-border-silver-color-3, #f5f5f5);
@@ -90,7 +90,7 @@ watch(
       --_clr-5: var(--glowing-border-silver-color-5, #d4d4d4);
     }
 
-    &.steel {
+    &[data-variant="steel"] {
       --_clr-1: var(--glowing-border-steel-color-1, #434343);
       --_clr-2: var(--glowing-border-steel-color-2, #5a5a5a);
       --_clr-3: var(--glowing-border-steel-color-3, #6e6e6e);
@@ -98,7 +98,7 @@ watch(
       --_clr-5: var(--glowing-border-steel-color-5, #434343);
     }
 
-    &.green {
+    &[data-variant="green"] {
       --_clr-1: var(--glowing-border-green-color-1, #00ff87);
       --_clr-2: var(--glowing-border-green-color-2, #39ff14);
       --_clr-3: var(--glowing-border-green-color-3, #00c853);
@@ -110,20 +110,22 @@ watch(
 
     border: var(--glowing-border-width, 3px) solid transparent;
     border-radius: var(--glowing-border-radius, 30px);
+    color: var(--glowing-border-text-colour, var(--theme-text));
+    overflow-wrap: anywhere;
     background:
-      linear-gradient(var(--glowing-border-surface, canvas) 0 0) padding-box,
+      linear-gradient(var(--glowing-border-surface, var(--theme-surface-subtle)) 0 0) padding-box,
       conic-gradient(from var(--_glow-deg), var(--_gradient-glow)) border-box;
 
-    animation: glow var(--glowing-border-animation-duration, 10s) infinite linear;
+    animation: glowing-border-rotate var(--glowing-border-animation-duration, 10s) infinite linear;
 
-    overflow: hidden;
+    overflow: var(--glowing-border-overflow, hidden);
 
     @media (prefers-reduced-motion: reduce) {
       animation: none;
     }
   }
 
-  @keyframes glow {
+  @keyframes glowing-border-rotate {
     100% {
       --_glow-deg: 270deg;
     }