srcdev-nuxt-components 9.6.18 → 9.6.20

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.",
+    },
+  },
+};

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

@@ -0,0 +1,150 @@
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import SparkleEffect from "../SparkleEffect.vue";
+
+type Wrapper = Awaited<ReturnType<typeof mountSuspended<typeof SparkleEffect>>>;
+
+const sparkStyle = (el: Element) => (el as HTMLElement).style;
+
+describe("SparkleEffect", () => {
+  let wrapper: Wrapper | undefined;
+
+  afterEach(() => {
+    wrapper?.unmount();
+    vi.restoreAllMocks();
+  });
+
+  // ─── Mount and root ───────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    wrapper = await mountSuspended(SparkleEffect);
+    expect(wrapper!.vm).toBeTruthy();
+  });
+
+  it("renders as <span> by default with the sparkle-effect class", async () => {
+    wrapper = await mountSuspended(SparkleEffect);
+    expect(wrapper!.element.tagName).toBe("SPAN");
+    expect(wrapper!.classes()).toContain("sparkle-effect");
+  });
+
+  it("renders as <div> when tag='div'", async () => {
+    wrapper = await mountSuspended(SparkleEffect, { props: { tag: "div" } });
+    expect(wrapper!.element.tagName).toBe("DIV");
+  });
+
+  // ─── Slot ─────────────────────────────────────────────────────────────────
+
+  it("renders the slotted content unchanged", async () => {
+    wrapper = await mountSuspended(SparkleEffect, {
+      slots: { default: "<button type='button' class='slotted'>Whimsy</button>" },
+    });
+    const button = wrapper!.find(".slotted");
+    expect(button.exists()).toBe(true);
+    expect(button.text()).toBe("Whimsy");
+    expect(button.attributes("type")).toBe("button");
+  });
+
+  // ─── Sparks: count ────────────────────────────────────────────────────────
+
+  it("renders five sparks by default", async () => {
+    wrapper = await mountSuspended(SparkleEffect);
+    expect(wrapper!.findAll(".sparkle-effect-spark")).toHaveLength(5);
+  });
+
+  it.each([
+    [1, 1],
+    [7, 7],
+    [12, 12],
+    [99, 12],
+    [0, 1],
+    [-3, 1],
+    [2.5, 2],
+    [Number.NaN, 5],
+    [Number.POSITIVE_INFINITY, 5],
+  ])("renders count=%s as %s sparks", async (count, expected) => {
+    wrapper = await mountSuspended(SparkleEffect, { props: { count } });
+    expect(wrapper!.findAll(".sparkle-effect-spark")).toHaveLength(expected);
+  });
+
+  it("updates the spark count when the count prop changes", async () => {
+    wrapper = await mountSuspended(SparkleEffect, { props: { count: 3 } });
+    await wrapper!.setProps({ count: 8 });
+    expect(wrapper!.findAll(".sparkle-effect-spark")).toHaveLength(8);
+  });
+
+  // ─── Sparks: presets ──────────────────────────────────────────────────────
+
+  it("gives the first five sparks the tuned presets", async () => {
+    wrapper = await mountSuspended(SparkleEffect);
+    const sparks = wrapper!.findAll(".sparkle-effect-spark");
+    const offsets = sparks.map((s) => sparkStyle(s.element).getPropertyValue("--_sparkle-effect-spark-offset"));
+    const colours = sparks.map((s) => sparkStyle(s.element).getPropertyValue("--_sparkle-effect-spark-colour"));
+    expect(offsets).toEqual(["80%", "60%", "70%", "75%", "70%"]);
+    expect(colours[1]).toBe("oklch(from var(--_sparkle-effect-colour) 80% c calc(h + 50))");
+    expect(colours[2]).toBe("oklch(from var(--_sparkle-effect-colour) 70% c calc(h + 20))");
+    expect(colours[4]).toContain("calc(h + -200)");
+    expect(sparkStyle(sparks[3]!.element).getPropertyValue("--_sparkle-effect-spark-translate")).toBe("-2rem 5rem");
+  });
+
+  it("nudges hue and offset and mirrors drift for sparks past the fifth", async () => {
+    wrapper = await mountSuspended(SparkleEffect, { props: { count: 6 } });
+    const sixth = sparkStyle(wrapper!.findAll(".sparkle-effect-spark")[5]!.element);
+    expect(sixth.getPropertyValue("--_sparkle-effect-spark-colour")).toContain("calc(h + 35)");
+    expect(sixth.getPropertyValue("--_sparkle-effect-spark-offset")).toBe("93%");
+    expect(sixth.getPropertyValue("--_sparkle-effect-spark-translate")).toBe("0rem -3rem");
+  });
+
+  // ─── Radius ───────────────────────────────────────────────────────────────
+
+  it("sets --sparkle-effect-radius inline when radius is given", async () => {
+    wrapper = await mountSuspended(SparkleEffect, { props: { radius: "1.2rem" } });
+    expect((wrapper!.element as HTMLElement).style.getPropertyValue("--sparkle-effect-radius")).toBe("1.2rem");
+  });
+
+  it("leaves the radius token unset by default so an ancestor value applies", async () => {
+    wrapper = await mountSuspended(SparkleEffect);
+    expect((wrapper!.element as HTMLElement).style.getPropertyValue("--sparkle-effect-radius")).toBe("");
+  });
+
+  // ─── Continuous ───────────────────────────────────────────────────────────
+
+  it("is one-shot by default (no data-continuous)", async () => {
+    wrapper = await mountSuspended(SparkleEffect);
+    expect(wrapper!.attributes("data-continuous")).toBeUndefined();
+  });
+
+  it("sets data-continuous when continuous is on, and clears it when turned off", async () => {
+    wrapper = await mountSuspended(SparkleEffect, { props: { continuous: true } });
+    expect(wrapper!.attributes("data-continuous")).toBe("");
+    await wrapper!.setProps({ continuous: false });
+    expect(wrapper!.attributes("data-continuous")).toBeUndefined();
+  });
+
+  // ─── Accessibility ────────────────────────────────────────────────────────
+
+  it("hides the sparks from assistive tech and keeps them out of the tab order", async () => {
+    wrapper = await mountSuspended(SparkleEffect);
+    const sparks = wrapper!.find(".sparkle-effect-sparks");
+    expect(sparks.attributes("aria-hidden")).toBe("true");
+    expect(wrapper!.findAll("[tabindex]")).toHaveLength(0);
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies styleClassPassthrough classes", async () => {
+    wrapper = await mountSuspended(SparkleEffect, {
+      props: { styleClassPassthrough: ["promo", "featured"] },
+    });
+    expect(wrapper!.classes()).toContain("promo");
+    expect(wrapper!.classes()).toContain("featured");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    wrapper = await mountSuspended(SparkleEffect, {
+      props: { styleClassPassthrough: ["promo"] },
+    });
+    await wrapper!.setProps({ styleClassPassthrough: ["featured"] });
+    expect(wrapper!.classes()).not.toContain("promo");
+    expect(wrapper!.classes()).toContain("featured");
+  });
+});

package/app/components/01.atoms/content-wrappers/docs-pages/ContentDocs.vue

@@ -106,7 +106,7 @@ const props = withDefaults(defineProps<Props>(), {
   docsPageNavAriaLabel: "On this page",
   // Defaults to "classic" — the docs/admin nav toggle relies on contentIsOnTop on mobile, and
   // ExpandingPanel's ::details-content-based positioning silently fails on WebKit (Safari/iOS),
-  // making the nav unreachable there. See AccordianCore's own variant prop and CLAUDE.md
+  // making the nav unreachable there. See AccordionGroup's own variant prop and CLAUDE.md
   // pitfall #19 for the full mechanism. "modern" is opt-in.
   panelVariant: "classic",
   styleClassPassthrough: () => [],