srcdev-nuxt-components 9.6.18 → 9.6.19

package/.vscode/srcdev-component-accordion-group.code-snippets

@@ -0,0 +1,38 @@
+{
+  "SRCDEV AccordionGroup": {
+    "description": "AccordionGroup with item-{n}-summary/content slots; a shared name makes it exclusive-open",
+    "scope": "vue,html",
+    "body": [
+      "<AccordionGroup name=\"${1:faq}\">",
+      "  <template #item-0-summary>${2:Question one?}</template>",
+      "  <template #item-0-content><p>${3:Answer one.}</p></template>",
+      "",
+      "  <template #item-1-summary>${4:Question two?}</template>",
+      "  <template #item-1-content><p>${5:Answer two.}</p></template>",
+      "</AccordionGroup>"
+    ]
+  },
+  "SRCDEV AccordionGroup Looped": {
+    "description": "AccordionGroup driven by an array via dynamic item-{n} slot names",
+    "scope": "vue,html",
+    "body": [
+      "<AccordionGroup name=\"${1:faq}\">",
+      "  <template v-for=\"(item, i) in ${2:items}\" :key=\"`s\\${i}`\" #[`item-\\${i}-summary`]>{{ item.${3:question} }}</template>",
+      "  <template v-for=\"(item, i) in ${2:items}\" :key=\"`c\\${i}`\" #[`item-\\${i}-content`]><p>{{ item.${4:answer} }}</p></template>",
+      "</AccordionGroup>"
+    ]
+  },
+  "SRCDEV AccordionGroup CSS Override": {
+    "description": "AccordionGroup width and panel divider overrides scoped to a page or section class",
+    "scope": "css",
+    "body": [
+      ".${1:faq-section} {",
+      "  --accordion-group-max-width: ${2:72rem};",
+      "",
+      "  .accordion-group-item:not(:last-child) {",
+      "    border-block-end: 0.1rem solid ${3:var(--theme-border)};",
+      "  }",
+      "}"
+    ]
+  }
+}

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

@@ -20,8 +20,8 @@
     "scope": "vue,html",
     "body": [
       "<ActionMenu>",
-      "  <template v-for=\"($1action, $2i) in $3actions\" :key=\"$1action.label\" #[`item-${$2i}`]>",
-      "    <ActionMenuItem :label=\"$1action.label\" :href=\"$1action.href\" @click=\"$1action.onClick\" />",
+      "  <template v-for=\"(action, i) in ${1:actions}\" :key=\"`\\${i}-\\${action.label}`\" #[`item-\\${i}`]>",
+      "    <ActionMenuItem :label=\"action.label\" :href=\"action.href\" @click=\"action.onClick\" />",
       "  </template>",
       "</ActionMenu>"
     ]
@@ -30,7 +30,7 @@
     "description": "CSS override scaffold for ActionMenu tokens",
     "scope": "css",
     "body": [
-      ".$1my-page {",
+      ".${1:my-page} {",
       "  --action-menu-trigger-icon-color: $2;",
       "  --action-menu-popover-background: $3;",
       "  --action-menu-popover-border: $4;",

package/.vscode/srcdev-component-sparkle-effect.code-snippets

@@ -0,0 +1,33 @@
+{
+  "SRCDEV SparkleEffect Button": {
+    "description": "SparkleEffect around a pill button (sparkles along its border on hover/focus)",
+    "scope": "vue,html",
+    "body": [
+      "<SparkleEffect :count=\"${1:5}\"${4| continuous,|}>",
+      "  <InputButton button-text=\"${2:Button text}\" variant=\"${3|primary,secondary,tertiary|}\" is-pill />",
+      "</SparkleEffect>"
+    ]
+  },
+  "SRCDEV SparkleEffect Card": {
+    "description": "SparkleEffect around block content with its own corner radius",
+    "scope": "vue,html",
+    "body": [
+      "<SparkleEffect tag=\"div\" radius=\"${1:1.2rem}\" :count=\"${2:7}\">",
+      "  $0",
+      "</SparkleEffect>"
+    ]
+  },
+  "SRCDEV SparkleEffect CSS Override": {
+    "description": "SparkleEffect token overrides scoped to a page or section class",
+    "scope": "css,vue",
+    "body": [
+      ".${1:page-name} {",
+      "  --sparkle-effect-colour: ${2:hsl(260 80% 70%)};",
+      "  --sparkle-effect-size: ${3:0.7rem};",
+      "  --sparkle-effect-blur: ${6:1px};",
+      "  --sparkle-effect-duration: ${4:1.5s};",
+      "  --sparkle-effect-glow-opacity: ${5:0.5};",
+      "}"
+    ]
+  }
+}

package/app/components/01.atoms/animations/sparkle-effect/CONSUMER-STYLING.md

@@ -0,0 +1,75 @@
+# SparkleEffect — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Description |
+|---|---|---|
+| `--sparkle-effect-colour` | `var(--theme-border)` | Glow colour, and the base hue the sparkles shift from. With relative colour support each sparkle is a lightened, hue-shifted version of it; without, they use it as-is. |
+| `--sparkle-effect-size` | `0.7rem` | Width of one sparkle arm (each arm is 1:3, and each sparkle scales this by its preset). |
+| `--sparkle-effect-blur` | `1px` | Blur on each sparkle. `0` gives crisp sparkles; the original pen used `3px`. |
+| `--sparkle-effect-duration` | `1.5s` | Base travel time; each sparkle multiplies it by its own speed. |
+| `--sparkle-effect-radius` | `100vw` | Corner shape of the path the sparkles follow and of the glow. Match the slotted element's radius. Also set by the `radius` prop. |
+| `--sparkle-effect-glow-blur` | `1.2rem` | Blur of the glow behind the slot. |
+| `--sparkle-effect-glow-opacity` | `0.5` | Glow opacity while active. |
+
+Private tokens, not public API: `--_sparkle-effect-colour` (the resolved colour) and the per-sparkle
+`--_sparkle-effect-spark-*` values (colour, scale, translate, offset, speed, timing), which
+the component writes inline on each sparkle from its preset table.
+
+## State hooks
+
+| Selector | Meaning |
+|---|---|
+| `.sparkle-effect` | Root element (`span` or `div`, per `tag`). |
+| `.sparkle-effect::before` | The glow, behind the slot. |
+| `.sparkle-effect-sparks` | `aria-hidden` layer holding the sparkles, over the slot. |
+| `.sparkle-effect-spark` | One sparkle. |
+| `.sparkle-effect[data-continuous]` | Set by the `continuous` prop: sparkles loop while active. |
+
+The effect runs on `.sparkle-effect:hover` and when anything inside has `:focus-visible`. It's
+suppressed while the slotted element (direct child) is `:disabled` or `[aria-disabled="true"]`.
+
+## Motion and browser support
+
+- Sparkles travel along the wrapper's border box with `offset-path: border-box`. They render only
+  where that's supported (Chrome 116+, Safari 17.2+, Firefox 122+). Elsewhere, including Safari
+  16, the glow still works.
+- Under `prefers-reduced-motion: reduce` the sparkles are hidden and only the glow fades in.
+- Sparkles start at the top-left of the path and snap back when the pointer leaves, so each hover
+  replays the effect. With `continuous`, each sparkle loops instead (`sparkle-effect-travel` keyframes:
+  travel, drift and fade in one), at its own speed, until the hover or focus ends.
+
+## Shape
+
+The wrapper shrinks to its slot (`inline-grid` for `span`, `grid` for `div`) and can't read the
+slotted element's own `border-radius`, so set `--sparkle-effect-radius` (or `radius`) to match it:
+the default `100vw` suits pill buttons, a card might need `1.2rem`, a round icon button `50%`.
+
+## Local overrides
+
+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`.
+
+**Caveat:** the `radius` prop writes `--sparkle-effect-radius` inline on the root, so when it's set
+an ancestor's value for that token never lands.
+
+## Class passthrough
+
+`styleClassPassthrough` adds classes to the root, for sizing or placing the wrapper (e.g.
+`inline-size: 100%` around a full-width card) or for setting the tokens above on one instance.
+
+```vue
+<SparkleEffect style-class-passthrough="promo-sparkle">
+  <InputButton button-text="Join the waitlist" is-pill />
+</SparkleEffect>
+```
+
+```css
+.promo-sparkle {
+  --sparkle-effect-colour: hsl(260 80% 70%);
+  --sparkle-effect-duration: 2s;
+}
+```

package/app/components/01.atoms/animations/sparkle-effect/SparkleEffect.vue

@@ -0,0 +1,213 @@
+<template>
+  <component
+    :is="tag"
+    class="sparkle-effect"
+    :class="elementClasses"
+    :style="rootStyle"
+    :data-continuous="continuous ? '' : undefined"
+  >
+    <slot></slot>
+    <span class="sparkle-effect-sparks" aria-hidden="true">
+      <span v-for="(spark, index) in sparks" :key="index" class="sparkle-effect-spark" :style="spark"></span>
+    </span>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  count?: number;
+  radius?: string;
+  continuous?: boolean;
+  tag?: "span" | "div";
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  count: 5,
+  radius: undefined,
+  continuous: false,
+  tag: "span",
+  styleClassPassthrough: () => [],
+});
+
+const DEFAULT_COUNT = 5;
+const MAX_COUNT = 12;
+
+const SPARK_PRESETS = [
+  { lightness: "80%", hue: 0, scale: 1, x: 0, y: 3, offset: 80, speed: 1 },
+  { lightness: "80%", hue: 50, scale: 0.85, x: 0, y: -3, offset: 60, speed: 1 },
+  { lightness: "70%", hue: 20, scale: 1.15, x: 0, y: -1, offset: 70, speed: 0.85 },
+  { lightness: "80%", hue: -20, scale: 0.7, x: -2, y: 5, offset: 75, speed: 1.2 },
+  { lightness: "80%", hue: -200, scale: 1, x: 0, y: 0, offset: 70, speed: 1 },
+] as const;
+
+const sparkCount = computed(() =>
+  Number.isFinite(props.count) ? Math.min(MAX_COUNT, Math.max(1, Math.floor(props.count))) : DEFAULT_COUNT
+);
+
+const sparks = computed(() =>
+  Array.from({ length: sparkCount.value }, (_, index) => {
+    const preset = SPARK_PRESETS[index % SPARK_PRESETS.length]!;
+    const cycle = Math.floor(index / SPARK_PRESETS.length);
+    const mirror = cycle % 2 === 1 ? -1 : 1;
+    return {
+      "--_sparkle-effect-spark-colour": `oklch(from var(--_sparkle-effect-colour) ${preset.lightness} c calc(h + ${preset.hue + cycle * 35}))`,
+      "--_sparkle-effect-spark-scale": `${preset.scale}`,
+      "--_sparkle-effect-spark-translate": `${preset.x * mirror}rem ${preset.y * mirror}rem`,
+      "--_sparkle-effect-spark-offset": `${(preset.offset + cycle * 13) % 100}%`,
+      "--_sparkle-effect-spark-speed": `${preset.speed + cycle * 0.1}`,
+    };
+  })
+);
+
+const rootStyle = computed(() => (props.radius ? { "--sparkle-effect-radius": props.radius } : undefined));
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .sparkle-effect {
+    --_sparkle-effect-colour: var(--sparkle-effect-colour, var(--theme-border));
+
+    position: relative;
+    display: inline-grid;
+    isolation: isolate;
+    border-radius: var(--sparkle-effect-radius, 100vw);
+
+    &:is(div) {
+      display: grid;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -2px;
+      z-index: -1;
+      border-radius: inherit;
+      background-color: var(--_sparkle-effect-colour);
+      filter: blur(var(--sparkle-effect-glow-blur, 1.2rem));
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.5s;
+    }
+
+    & > .sparkle-effect-sparks {
+      display: none;
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+
+      & > .sparkle-effect-spark {
+        --_sparkle-effect-spark-timing: calc(
+          var(--sparkle-effect-duration, 1.5s) * var(--_sparkle-effect-spark-speed, 1)
+        );
+
+        position: absolute;
+        offset-path: border-box;
+        offset-rotate: 0deg;
+        inline-size: calc(var(--sparkle-effect-size, 0.7rem) * var(--_sparkle-effect-spark-scale, 1));
+        aspect-ratio: 1 / 3;
+        border-radius: 50%;
+        background-color: var(--_sparkle-effect-colour);
+        filter: blur(var(--sparkle-effect-blur, 1px));
+        opacity: 0;
+
+        @supports (color: oklch(from red l c h)) {
+          background-color: var(--_sparkle-effect-spark-colour, var(--_sparkle-effect-colour));
+        }
+
+        &::before,
+        &::after {
+          content: "";
+          position: absolute;
+          inline-size: inherit;
+          aspect-ratio: inherit;
+          border-radius: inherit;
+          background-color: inherit;
+          translate: -50%;
+        }
+
+        &::before {
+          rotate: 55deg;
+        }
+
+        &::after {
+          rotate: -55deg;
+        }
+      }
+    }
+
+    &:is(:hover, :has(:focus-visible)):not(:has(> :disabled, > [aria-disabled="true"])) {
+      &::before {
+        opacity: var(--sparkle-effect-glow-opacity, 0.5);
+      }
+
+      & > .sparkle-effect-sparks > .sparkle-effect-spark {
+        offset-distance: var(--_sparkle-effect-spark-offset, 70%);
+        translate: var(--_sparkle-effect-spark-translate, 0 0);
+        transition:
+          translate var(--_sparkle-effect-spark-timing),
+          offset-distance var(--_sparkle-effect-spark-timing);
+        animation: sparkle-effect-life calc(var(--_sparkle-effect-spark-timing) * 0.85) both;
+      }
+
+      &[data-continuous] > .sparkle-effect-sparks > .sparkle-effect-spark {
+        transition: none;
+        animation: sparkle-effect-travel var(--_sparkle-effect-spark-timing) infinite;
+      }
+    }
+  }
+
+  @supports (offset-path: border-box) {
+    @media (prefers-reduced-motion: no-preference) {
+      .sparkle-effect > .sparkle-effect-sparks {
+        display: block;
+      }
+    }
+  }
+
+  @keyframes sparkle-effect-life {
+    0% {
+      opacity: 0;
+    }
+
+    20%,
+    70% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes sparkle-effect-travel {
+    0% {
+      offset-distance: 0%;
+      translate: 0 0;
+      opacity: 0;
+    }
+
+    20%,
+    60% {
+      opacity: 1;
+    }
+
+    85%,
+    100% {
+      offset-distance: var(--_sparkle-effect-spark-offset, 70%);
+      translate: var(--_sparkle-effect-spark-translate, 0 0);
+      opacity: 0;
+    }
+  }
+}
+</style>

package/app/components/01.atoms/animations/sparkle-effect/stories/SparkleEffect.stories.ts

@@ -0,0 +1,303 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed, ref } from "vue";
+import StorybookComponent from "../SparkleEffect.vue";
+import InputButton from "../../../../05.forms/input-button/InputButton.vue";
+import CanvasSwitcher from "../../../canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
+
+const COLOUR_OPTIONS = ["", "hsl(260 80% 70%)", "hsl(330 85% 65%)", "hsl(170 70% 45%)", "hsl(40 95% 55%)"] as const;
+const SIZE_OPTIONS = ["0.5rem", "0.7rem", "1rem", "1.4rem"] as const;
+const SPARK_BLUR_OPTIONS = ["0px", "0.5px", "1px", "2px", "3px"] as const;
+const DURATION_OPTIONS = ["0.8s", "1.5s", "2.5s", "4s"] as const;
+const BLUR_OPTIONS = ["0.6rem", "1.2rem", "2rem"] as const;
+const OPACITY_OPTIONS = ["0.3", "0.5", "0.8"] as const;
+
+type StoryArgs = {
+  count: number;
+  radius: string;
+  continuous: boolean;
+  tag: "span" | "div";
+  colour: (typeof COLOUR_OPTIONS)[number];
+  size: (typeof SIZE_OPTIONS)[number];
+  blur: (typeof SPARK_BLUR_OPTIONS)[number];
+  duration: (typeof DURATION_OPTIONS)[number];
+  glowBlur: (typeof BLUR_OPTIONS)[number];
+  glowOpacity: (typeof OPACITY_OPTIONS)[number];
+  buttonText: string;
+};
+
+const tokenCategory = "CSS tokens (story only, set in your CSS)";
+const tokenControl = (token: string, example: string, options: readonly string[]) => ({
+  control: { type: "select" as const },
+  options,
+  description: `**Story control, not a prop.** Sets \`${token}\`. In your CSS: \`.promo { ${token}: ${example}; }\``,
+  table: { category: tokenCategory },
+});
+
+export default {
+  title: "Atoms/Effects/SparkleEffect",
+  component: StorybookComponent,
+  argTypes: {
+    count: {
+      control: { type: "range", min: 1, max: 12, step: 1 },
+      description: "Number of sparkles (floored, clamped to 1 to 12).",
+    },
+    radius: {
+      control: { type: "text" },
+      description: "Corner radius the sparks travel around; match the slotted element's radius. Sets `--sparkle-effect-radius`.",
+    },
+    continuous: {
+      control: { type: "boolean" },
+      description: "Keep the sparkles looping for as long as the hover or focus lasts, instead of one burst per hover.",
+    },
+    tag: {
+      control: { type: "inline-radio" },
+      options: ["span", "div"],
+      description: "Root element. `span` wraps inline content like a button; `div` wraps block content like a card.",
+    },
+    colour: {
+      ...tokenControl("--sparkle-effect-colour", "hsl(260 80% 70%)", COLOUR_OPTIONS),
+      control: {
+        type: "select",
+        labels: { "": "Theme default", "hsl(260 80% 70%)": "Lavender (the original pen)", "hsl(330 85% 65%)": "Pink", "hsl(170 70% 45%)": "Teal", "hsl(40 95% 55%)": "Amber" },
+      },
+    },
+    size: tokenControl("--sparkle-effect-size", "1rem", SIZE_OPTIONS),
+    blur: tokenControl("--sparkle-effect-blur", "0px", SPARK_BLUR_OPTIONS),
+    duration: tokenControl("--sparkle-effect-duration", "2.5s", DURATION_OPTIONS),
+    glowBlur: tokenControl("--sparkle-effect-glow-blur", "2rem", BLUR_OPTIONS),
+    glowOpacity: tokenControl("--sparkle-effect-glow-opacity", "0.8", OPACITY_OPTIONS),
+    buttonText: {
+      control: { type: "text" },
+      description: "**Story control, not a prop.** Text of the demo button in the slot.",
+      table: { category: "Slot content (story only)" },
+    },
+    styleClassPassthrough: { table: { disable: true } },
+    class: { table: { disable: true } },
+    style: { table: { disable: true } },
+  },
+  args: {
+    count: 5,
+    radius: "",
+    continuous: false,
+    tag: "span",
+    colour: "hsl(260 80% 70%)",
+    size: "0.7rem",
+    blur: "1px",
+    duration: "1.5s",
+    glowBlur: "1.2rem",
+    glowOpacity: "0.5",
+    buttonText: "Whimsy",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Wraps its default slot and, on hover or keyboard focus inside it, sends small sparkles along the wrapper's rounded border while a soft glow fades in behind. " +
+          "`count` sets how many sparkles (1 to 12), `continuous` keeps them looping while hovered or focused, `radius` sets the shape they follow (match the slotted element's radius), and `tag` picks `span` or `div`. " +
+          "Sparkles need `offset-path: border-box` (Safari 17.2+), so older browsers and `prefers-reduced-motion: reduce` get the glow only. " +
+          "Effect adapted from a Kevin Powell CodePen. Hover or tab to each example to see it.",
+      },
+    },
+  },
+} as Meta<StoryArgs>;
+
+function useStorySetup(args: StoryArgs) {
+  const componentArgs = computed(() => ({
+    count: args.count,
+    radius: args.radius || undefined,
+    continuous: args.continuous,
+    tag: args.tag,
+  }));
+  const tokenStyle = computed(() => ({
+    "--sparkle-effect-colour": args.colour || undefined,
+    "--sparkle-effect-size": args.size,
+    "--sparkle-effect-blur": args.blur,
+    "--sparkle-effect-duration": args.duration,
+    "--sparkle-effect-glow-blur": args.glowBlur,
+    "--sparkle-effect-glow-opacity": args.glowOpacity,
+  }));
+  return { args, componentArgs, tokenStyle };
+}
+
+const stage = "padding: 6rem 4rem; display: flex; flex-wrap: wrap; gap: 4rem; align-items: center;";
+
+export const Default: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent, InputButton },
+  setup() {
+    return useStorySetup(args);
+  },
+  template: `
+    <div style="${stage}" :style="tokenStyle">
+      <StorybookComponent v-bind="componentArgs">
+        <InputButton :button-text="args.buttonText" variant="secondary" is-pill></InputButton>
+      </StorybookComponent>
+    </div>
+  `,
+});
+Default.parameters = {
+  docs: {
+    description: {
+      story:
+        "The original pen's look: a pill button with a lavender colour and five sparkles. Hover the button, or tab to it and check its own focus ring is still visible.",
+    },
+  },
+};
+
+export const ThemeColour: StoryFn<StoryArgs> = Default.bind({});
+ThemeColour.args = { colour: "" };
+ThemeColour.parameters = {
+  docs: {
+    description: {
+      story:
+        "With no colour set, the effect takes `--theme-border`. The sparkles keep the theme hue but are lightened, so they stay pastel on any theme.",
+    },
+  },
+};
+
+export const ManySparks: StoryFn<StoryArgs> = Default.bind({});
+ManySparks.args = { count: 12, buttonText: "Twelve sparkles" };
+ManySparks.parameters = {
+  docs: {
+    description: {
+      story:
+        "Sparkles 6 to 12 reuse the five tuned presets with a hue shift, a further end point and mirrored drift, so they spread out rather than doubling up.",
+    },
+  },
+};
+
+export const Continuous: StoryFn<StoryArgs> = Default.bind({});
+Continuous.args = { continuous: true, count: 7, buttonText: "Keep hovering" };
+Continuous.parameters = {
+  docs: {
+    description: {
+      story:
+        "With `continuous`, each sparkle loops (travel, drift and fade in one keyframe) for as long as the pointer stays or focus remains inside. Their different speeds stop them pulsing in step.",
+    },
+  },
+};
+
+export const OnCard: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return useStorySetup(args);
+  },
+  template: `
+    <div style="${stage}" :style="tokenStyle">
+      <StorybookComponent v-bind="componentArgs" style="inline-size: min(100%, 36rem);">
+        <a
+          href="#"
+          style="display: grid; gap: 0.8rem; padding: 2.4rem; border-radius: 1.2rem; border: 1px solid var(--theme-border); background: var(--theme-surface-subtle); color: var(--theme-text); text-decoration: none;"
+        >
+          <strong style="font-size: var(--step-5);">Northtown spring workshop</strong>
+          <span>Hover or tab to this card. The sparkles follow its 1.2rem corners because the wrapper has the same radius.</span>
+        </a>
+      </StorybookComponent>
+    </div>
+  `,
+});
+OnCard.args = { tag: "div", radius: "1.2rem", count: 7 };
+OnCard.parameters = {
+  docs: {
+    description: {
+      story:
+        "Block content uses `tag=\"div\"`, and `radius` matches the card's own corners. Keyboard focus on the link inside triggers the effect too.",
+    },
+  },
+};
+
+export const Disabled: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent, InputButton },
+  setup() {
+    return useStorySetup(args);
+  },
+  template: `
+    <div style="${stage}" :style="tokenStyle">
+      <StorybookComponent v-bind="componentArgs">
+        <button type="button" disabled style="padding: 1.2rem 3rem; border-radius: 100vw;">Disabled button</button>
+      </StorybookComponent>
+      <StorybookComponent v-bind="componentArgs">
+        <InputButton button-text="Read-only InputButton" variant="secondary" is-pill readonly></InputButton>
+      </StorybookComponent>
+    </div>
+  `,
+});
+Disabled.parameters = {
+  docs: {
+    description: {
+      story:
+        "No glow or sparkles while the slotted control is `:disabled` or `aria-disabled=\"true\"` (InputButton's `readonly` sets the latter).",
+    },
+  },
+};
+
+export const StressTest: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent, InputButton },
+  setup() {
+    const longUnbroken = "Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft";
+    const hostileCounts = [0, -3, 2.5, 99, Number.NaN];
+    return { ...useStorySetup(args), longUnbroken, hostileCounts };
+  },
+  template: `
+    <div style="padding: 4rem 1.6rem; display: grid; gap: 4rem; justify-items: start;" :style="tokenStyle">
+      <div style="display: flex; flex-wrap: wrap; gap: 3rem;">
+        <StorybookComponent v-for="(count, index) in hostileCounts" :key="index" :count="count">
+          <InputButton :button-text="'count=' + count" variant="secondary" is-pill></InputButton>
+        </StorybookComponent>
+      </div>
+
+      <StorybookComponent v-bind="componentArgs" style="max-inline-size: 100%;">
+        <InputButton :button-text="longUnbroken" variant="secondary" is-pill></InputButton>
+      </StorybookComponent>
+
+      <StorybookComponent v-bind="componentArgs" tag="div" radius="0" style="inline-size: 100%;">
+        <div style="padding: 2.4rem; background: var(--theme-surface-subtle); overflow-wrap: anywhere;">
+          Full-width block child with square corners. {{ longUnbroken }}
+        </div>
+      </StorybookComponent>
+
+      <StorybookComponent v-bind="componentArgs" radius="50%">
+        <InputButton button-text="Settings" variant="secondary" is-pill>
+          <template #iconOnly><Icon name="material-symbols:settings" class="icon"></Icon></template>
+        </InputButton>
+      </StorybookComponent>
+
+      <StorybookComponent v-bind="componentArgs" tag="div" radius="1.6rem" style="padding: 2rem; border: 1px dashed currentColor; border-radius: 1.6rem;">
+        <StorybookComponent v-bind="componentArgs">
+          <InputButton button-text="Nested SparkleEffect" variant="secondary" is-pill></InputButton>
+        </StorybookComponent>
+      </StorybookComponent>
+
+      <StorybookComponent v-bind="componentArgs"></StorybookComponent>
+    </div>
+  `,
+});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+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 counts (0 and -3 render one sparkle, 2.5 renders two, 99 renders twelve, NaN falls back to five), a button with a long unbroken label " +
+        "(it should wrap or overflow the same as without the wrapper, and the sparkles follow its box), a full-width square block, a round icon-only button, " +
+        "a nested SparkleEffect (hovering the inner one runs both) and an empty wrapper (renders nothing visible). Hover each at every canvas width.",
+    },
+  },
+};