srcdev-nuxt-components 9.6.17 → 9.6.19

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: () => [],

package/app/components/02.molecules/action-menu/ActionMenu.vue

@@ -174,6 +174,7 @@ watch(
       background-color: var(--action-menu-popover-background, var(--slate-00));
       border-radius: var(--action-menu-popover-border-radius, 0.8rem);
       min-width: var(--action-menu-popover-min-width, 20rem);
+      max-inline-size: var(--action-menu-popover-max-width, min(32rem, calc(100vw - 3.2rem)));
       box-shadow: var(--action-menu-popover-shadow, 0 0.4rem 1.6rem rgba(0, 0, 0, 0.1));
       overflow: hidden;
 
@@ -181,7 +182,10 @@ watch(
       top: calc(anchor(bottom) + var(--action-menu-block-distance, 0.4rem));
       right: anchor(right);
       left: auto;
-      position-try-fallbacks: flip-block;
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline;
 
       opacity: 0;
       display: none;
@@ -221,7 +225,7 @@ watch(
 
       .action-menu-list {
         display: grid;
-        grid-template-columns: auto 1fr auto;
+        grid-template-columns: auto minmax(0, 1fr) auto;
 
         list-style: none;
         padding: 0;

package/app/components/02.molecules/action-menu/ActionMenuItem.vue

@@ -66,7 +66,7 @@ watch(
     box-sizing: border-box;
     cursor: pointer;
     display: grid;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
 
     width: 100%;
@@ -105,9 +105,12 @@ watch(
 
     .action-menu-item-label {
       grid-column: 2;
-      white-space: nowrap;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
       overflow: hidden;
-      text-overflow: ellipsis;
+      overflow-wrap: anywhere;
+      -webkit-line-clamp: var(--action-menu-item-label-line-clamp, none);
+      line-clamp: var(--action-menu-item-label-line-clamp, none);
     }
 
     .action-menu-item-arrow {

package/app/components/02.molecules/action-menu/CONSUMER-STYLING.md

@@ -29,6 +29,7 @@ All `--action-menu-*` tokens are the stable override surface. Action menus repea
 | `--action-menu-popover-border` | `0.1rem solid var(--slate-03)` | Menu panel border shorthand |
 | `--action-menu-popover-border-radius` | `0.8rem` | Menu panel corner rounding |
 | `--action-menu-popover-min-width` | `20rem` | Minimum menu width |
+| `--action-menu-popover-max-width` | `min(32rem, calc(100vw - 3.2rem))` | Maximum menu width; longer labels wrap |
 | `--action-menu-popover-shadow` | `0 0.4rem 1.6rem rgba(0, 0, 0, 0.1)` | Menu panel drop shadow |
 | `--action-menu-popover-transition-duration` | `200ms` | Open/close fade duration |
 | `--action-menu-popover-z-index` | `999999` | Stacking order in browsers without CSS anchor positioning (see Positioning). Ignored where the popover renders in the top layer |
@@ -45,7 +46,13 @@ All `--action-menu-*` tokens are the stable override surface. Action menus repea
 | `--action-menu-item-gap` | `1.2rem` | Space between icon, label and arrow |
 | `--action-menu-item-padding-inline` | `1.6rem` | Row horizontal padding |
 | `--action-menu-item-padding-block` | `1.2rem` | Row vertical padding |
+| `--action-menu-item-label-line-clamp` | `none` | Caps the label at this many lines with an ellipsis (`1` is single-line ellipsis, `none` shows it all) |
 
+> Changed 2026-10-20: labels used to stay on one line and widen the menu without limit, so a long
+> label pushed it past a phone screen. The menu now stops at `--action-menu-popover-max-width` and
+> labels wrap; set `--action-menu-item-label-line-clamp: 1` for the old single-line look with an
+> ellipsis. `--action-menu-popover-max-width` and `--action-menu-item-label-line-clamp` are new.
+>
 > Changed 2026-09-27: item `light-dark()` defaults replaced by their light values (older iPad
 > Safari lacks `light-dark()`), matching the already-light panel. Icon sizes are applied as
 > `font-size`; the old `width`/`height` on the trigger and arrow icons was silently overridden by
@@ -79,8 +86,8 @@ Inner classes: `.action-menu-trigger`, `.action-menu-trigger-icon`, `.action-men
 ## Positioning
 
 The menu uses the Popover API plus CSS anchor positioning: it opens below the trigger,
-right-aligned, and flips above near the bottom of the viewport (`position-try-fallbacks:
-flip-block`).
+right-aligned, and flips above near the bottom of the viewport and to open rightwards near the left
+edge (`position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline`).
 
 Fallbacks, via the shared `useAnchoredPopover` composable:
 
@@ -148,5 +155,5 @@ doesn't rely on it for its defaults.
 ## Notes
 
 - Negative `--action-menu-block-distance` values make the menu overlap the trigger.
-- `--action-menu-popover-min-width` is a floor; long labels widen the menu. Set
-  `width: max-content` on `.action-menu-popover` to change that.
+- `--action-menu-popover-min-width` is a floor and `--action-menu-popover-max-width` a ceiling;
+  between them the menu sizes to its longest label, and labels wrap at the ceiling.

package/app/components/02.molecules/action-menu/stories/ActionMenu.stories.ts

@@ -2,11 +2,14 @@ import { computed, ref } from "vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import ActionMenu from "../ActionMenu.vue";
 import ActionMenuItem from "../ActionMenuItem.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 // ─── Meta ─────────────────────────────────────────────────────────────────────
 
 interface StoryArgs {
   itemCount?: number;
+  labelLineClamp?: string;
   label?: string;
   triggerIcon?: string;
   styleClassPassthrough?: string | string[];
@@ -17,8 +20,8 @@ const meta: Meta<StoryArgs> = {
   component: ActionMenu,
   argTypes: {
     itemCount: {
-      control: { type: "number", min: 0, max: 8, step: 1 },
-      description: "Number of items to show (story control — not a component prop)",
+      control: { type: "number", min: 0, max: 5, step: 1 },
+      description: "**Story control, not a prop.** Number of items to show (0 to 5, the size of this data set).",
       table: { category: "Content" },
     },
     label: {
@@ -31,6 +34,13 @@ const meta: Meta<StoryArgs> = {
       description: "Icon name for the trigger button",
       table: { category: "Appearance" },
     },
+    labelLineClamp: {
+      control: { type: "select" },
+      options: ["none", "1", "2", "3"],
+      description:
+        "**Story control, not a prop.** Sets `--action-menu-item-label-line-clamp`. In your CSS: `.my-page { --action-menu-item-label-line-clamp: 1; }`",
+      table: { category: "CSS tokens (story only, set in your CSS)" },
+    },
     styleClassPassthrough: {
       table: { disable: true },
     },
@@ -38,6 +48,7 @@ const meta: Meta<StoryArgs> = {
   args: {
     itemCount: 5,
     label: "Open actions menu",
+    labelLineClamp: "none",
     triggerIcon: "lucide:ellipsis",
   },
   parameters: {
@@ -67,6 +78,17 @@ const actionItems = [
   { label: "Delete",     icon: "lucide:trash-2",  href: undefined },
 ] as const;
 
+function useStorySetup(args: StoryArgs) {
+  const componentArgs = computed(() => {
+    const { itemCount: _itemCount, labelLineClamp: _labelLineClamp, ...rest } = args;
+    return rest;
+  });
+  const tokenStyle = computed(() => ({
+    "--action-menu-item-label-line-clamp": args.labelLineClamp || undefined,
+  }));
+  return { args, componentArgs, tokenStyle };
+}
+
 // ─── Stories ──────────────────────────────────────────────────────────────────
 
 /**
@@ -81,13 +103,7 @@ export const Default: Story = {
   render: (args) => ({
     components: { ActionMenu, ActionMenuItem },
     setup() {
-      // `args` is Storybook's own reactive object — read from it directly (`args.x`) inside
-      // these computeds rather than destructuring it into local variables at setup-time, which
-      // would snapshot the values once and stop reflecting later Controls-panel changes.
-      const componentArgs = computed(() => {
-        const { itemCount, ...rest } = args;
-        return rest;
-      });
+      const { componentArgs, tokenStyle } = useStorySetup(args);
       const lastAction = ref<string | null>(null);
       const items = computed(() =>
         actionItems.slice(0, args.itemCount ?? 5).map((item, i) => ({
@@ -95,11 +111,11 @@ export const Default: Story = {
           slotName: `item-${i}`,
         }))
       );
-      return { componentArgs, items, lastAction };
+      return { componentArgs, tokenStyle, items, lastAction };
     },
     template: `
       <div style="padding: 4rem 8rem; display: flex; flex-direction: column; align-items: flex-end; gap: 2rem;">
-        <ActionMenu v-bind="componentArgs">
+        <ActionMenu v-bind="componentArgs" :style="tokenStyle">
           <template v-for="item in items" :key="item.slotName" #[item.slotName]>
             <ActionMenuItem :label="item.label" @click="lastAction = item.label">
               <template #icon>
@@ -128,11 +144,11 @@ export const MixedItems: Story = {
   render: (args) => ({
     components: { ActionMenu, ActionMenuItem },
     setup() {
-      return { args };
+      return useStorySetup(args);
     },
     template: `
       <div style="padding: 4rem 8rem; display: flex; justify-content: flex-end;">
-        <ActionMenu v-bind="args">
+        <ActionMenu v-bind="componentArgs" :style="tokenStyle">
           <template #item-0>
             <ActionMenuItem label="Edit record" @click="() => {}">
               <template #icon><Icon name="lucide:pencil" /></template>
@@ -168,11 +184,11 @@ export const NoIcons: Story = {
   render: (args) => ({
     components: { ActionMenu, ActionMenuItem },
     setup() {
-      return { args };
+      return useStorySetup(args);
     },
     template: `
       <div style="padding: 4rem 8rem; display: flex; justify-content: flex-end;">
-        <ActionMenu v-bind="args">
+        <ActionMenu v-bind="componentArgs" :style="tokenStyle">
           <template #item-0>
             <ActionMenuItem label="Approve" @click="() => {}" />
           </template>
@@ -206,7 +222,7 @@ export const InContext: Story = {
         { name: "Sam Patel",      email: "sam@example.com",     role: "Editor" },
         { name: "Jordan Clarke",  email: "jordan@example.com",  role: "Viewer" },
       ];
-      return { args, users };
+      return { ...useStorySetup(args), users };
     },
     template: `
       <div style="padding: 4rem; max-width: 56rem; margin: 0 auto;">
@@ -234,7 +250,7 @@ export const InContext: Story = {
               flex-shrink: 0;
             "
           >
-            {{ user.name[0] }}
+            {{ Array.from(user.name)[0] }}
           </div>
           <div style="flex: 1; min-width: 0;">
             <p style="margin: 0; font-size: 1.4rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
@@ -245,7 +261,7 @@ export const InContext: Story = {
             </p>
           </div>
           <span style="font-size: 1.2rem; opacity: 0.5; white-space: nowrap;">{{ user.role }}</span>
-          <ActionMenu v-bind="args">
+          <ActionMenu v-bind="componentArgs" :style="tokenStyle">
             <template #item-0>
               <ActionMenuItem label="Edit user" @click="() => {}">
                 <template #icon><Icon name="lucide:pencil" /></template>
@@ -337,3 +353,99 @@ export const ItemCoreStandalone: Story = {
     `,
   }),
 };
+
+/**
+ * Stress test: hostile labels and item counts, with triggers at both inline edges.
+ */
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    label: "Aktionen für diesen Eintrag öffnen",
+  },
+  render: (args) => ({
+    components: { ActionMenu, ActionMenuItem },
+    setup() {
+      const hostileLabels = [
+        "Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft",
+        "https://example.com/" + "a-very-long-path-segment-without-spaces".repeat(3),
+        "Diesen Eintrag dauerhaft löschen, einschließlich aller zugehörigen Anhänge und Kommentare",
+        "🎉 Celebrate",
+        "<b>Not bold</b>",
+        "حذف هذا السجل نهائيا",
+        "A",
+      ];
+      const manyItems = Array.from({ length: 12 }, (_, i) => `Action ${i + 1}`);
+      return { ...useStorySetup(args), hostileLabels, manyItems };
+    },
+    template: `
+      <div style="padding: 2.4rem 1.6rem; display: grid; gap: 4rem;">
+        <div style="display: flex; justify-content: space-between; align-items: center; gap: 1.6rem;">
+          <ActionMenu v-bind="componentArgs" :style="tokenStyle">
+            <template v-for="(text, i) in hostileLabels" :key="i" #[\`item-\${i}\`]>
+              <ActionMenuItem :label="text" @click="() => {}">
+                <template #icon><Icon name="lucide:pencil" /></template>
+              </ActionMenuItem>
+            </template>
+          </ActionMenu>
+          <span>Hostile labels: left-edge trigger and right-edge trigger</span>
+          <ActionMenu v-bind="componentArgs" :style="tokenStyle">
+            <template v-for="(text, i) in hostileLabels" :key="i" #[\`item-\${i}\`]>
+              <ActionMenuItem :label="text" href="https://example.com"></ActionMenuItem>
+            </template>
+          </ActionMenu>
+        </div>
+
+        <div style="display: flex; justify-content: space-between; align-items: center; gap: 1.6rem;">
+          <span>Twelve items</span>
+          <ActionMenu v-bind="componentArgs" :style="tokenStyle">
+            <template v-for="(text, i) in manyItems" :key="i" #[\`item-\${i}\`]>
+              <ActionMenuItem :label="text" @click="() => {}"></ActionMenuItem>
+            </template>
+          </ActionMenu>
+        </div>
+
+        <div style="display: flex; justify-content: space-between; align-items: center; gap: 1.6rem;">
+          <span>One item</span>
+          <ActionMenu v-bind="componentArgs" :style="tokenStyle">
+            <template #item-0><ActionMenuItem label="Only action" @click="() => {}"></ActionMenuItem></template>
+          </ActionMenu>
+        </div>
+
+        <div style="display: flex; justify-content: space-between; align-items: center; gap: 1.6rem;">
+          <span>No items (opens an empty panel, nothing focusable)</span>
+          <ActionMenu v-bind="componentArgs" :style="tokenStyle"></ActionMenu>
+        </div>
+      </div>
+    `,
+  }),
+  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>
+      `,
+    }),
+  ],
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "640px" },
+      description: {
+        story:
+          "Open each menu at every canvas width. Long unbroken words and URLs should wrap inside the menu, which never grows past " +
+          "`--action-menu-popover-max-width` (32rem, or the viewport less 3.2rem). The left-edge menu should flip to open rightwards " +
+          "rather than off-screen (CSS anchor positioning browsers). Emoji and HTML-like text render as text, the Arabic label wraps like the rest, " +
+          "twelve items stay keyboard-navigable, and the empty menu opens without errors. Try the line-clamp control to cap labels at 1 to 3 lines.",
+      },
+    },
+  },
+};