srcdev-nuxt-components 9.6.18 → 9.6.20

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

package/app/components/02.molecules/expandable/accordion-chat/AccordionChat.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="accordion-chat" :class="elementClasses">
+    <ExpandingPanelClassic
+      v-for="index in panelIndexes()"
+      :key="index"
+      :name
+      :animation-duration="animationDuration"
+      :style-class-passthrough="['accordion-chat-item']"
+    >
+      <template #summary>
+        <slot :name="`item-${index}-summary`"></slot>
+      </template>
+      <template #icon>
+        <slot :name="`item-${index}-icon`">
+          <span class="accordion-chat-icon" aria-hidden="true">
+            <Icon name="lucide:plus" class="accordion-chat-icon-glyph" />
+          </span>
+        </slot>
+      </template>
+      <template #content>
+        <div v-if="slots[`item-${index}-content`]" class="accordion-chat-answer">
+          <span v-if="hasAvatar(index)" class="accordion-chat-avatar" aria-hidden="true">
+            <slot :name="`item-${index}-avatar`">
+              <slot name="avatar">{{ avatarInitials }}</slot>
+            </slot>
+          </span>
+          <div class="accordion-chat-bubble">
+            <slot :name="`item-${index}-content`"></slot>
+          </div>
+        </div>
+      </template>
+    </ExpandingPanelClassic>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ExpandingPanelClassic from "../expanding-panel-classic/ExpandingPanelClassic.vue";
+
+interface Props {
+  name?: string;
+  animationDuration?: number;
+  avatarLabel?: string;
+  showAvatar?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: undefined,
+  animationDuration: 300,
+  avatarLabel: "",
+  showAvatar: true,
+  styleClassPassthrough: () => [],
+});
+
+const slots = useSlots();
+const SUMMARY_SLOT = /^item-(\d+)-summary$/;
+
+const panelIndexes = () =>
+  Object.keys(slots)
+    .map((slotName) => SUMMARY_SLOT.exec(slotName)?.[1])
+    .filter((index): index is string => index !== undefined)
+    .map(Number)
+    .sort((a, b) => a - b);
+
+const toGraphemes = (text: string) =>
+  typeof Intl.Segmenter === "function"
+    ? Array.from(new Intl.Segmenter(undefined, { granularity: "grapheme" }).segment(text), ({ segment }) => segment)
+    : Array.from(text);
+
+const avatarInitials = computed(() => toGraphemes(props.avatarLabel.trim()).slice(0, 2).join(""));
+
+const hasAvatar = (index: number) =>
+  props.showAvatar && Boolean(slots[`item-${index}-avatar`] || slots.avatar || avatarInitials.value);
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .accordion-chat {
+    --_accordion-chat-radius: var(--accordion-chat-radius, 2rem);
+    --_accordion-chat-tail-radius: var(--accordion-chat-tail-radius, 0.6rem);
+    --_accordion-chat-bubble-max-width: var(--accordion-chat-bubble-max-width, 82%);
+    --_accordion-chat-duration: var(--accordion-chat-transition-duration, 200ms);
+
+    display: grid;
+    gap: var(--accordion-chat-gap, 1.4rem);
+
+    .accordion-chat-item.expanding-panel-classic {
+      --expanding-panel-classic-icon-size: var(--accordion-chat-icon-size, 2.2rem);
+      --expanding-panel-classic-summary-gap: var(--accordion-chat-question-icon-gap, 1.4rem);
+
+      .expanding-panel-classic-summary {
+        inline-size: fit-content;
+        max-inline-size: var(--_accordion-chat-bubble-max-width);
+        margin-inline-start: auto;
+        padding-block: var(--accordion-chat-question-padding-block, 1.3rem);
+        padding-inline: var(--accordion-chat-question-padding-inline, 2rem 1.8rem);
+        border: var(--accordion-chat-question-border-width, 0.1rem) solid
+          var(--accordion-chat-question-border, transparent);
+        border-radius: var(--_accordion-chat-radius);
+        border-end-end-radius: var(--_accordion-chat-tail-radius);
+        background-color: var(--accordion-chat-question-surface, var(--theme-surface-subtle));
+        color: var(--accordion-chat-question-colour, var(--theme-text));
+        font-family: var(--accordion-chat-question-font-family, inherit);
+        font-size: var(--accordion-chat-question-font-size, 1.6rem);
+        font-weight: var(--accordion-chat-question-font-weight, 600);
+        line-height: var(--accordion-chat-question-line-height, 1.3);
+        transition:
+          background-color var(--_accordion-chat-duration),
+          color var(--_accordion-chat-duration),
+          border-color var(--_accordion-chat-duration);
+
+        &:focus-visible {
+          outline: var(--accordion-chat-focus-ring-width, 0.2rem) solid
+            var(--accordion-chat-focus-ring-colour, var(--theme-border-focus));
+          outline-offset: 0.2rem;
+        }
+
+        .expanding-panel-classic-details[open] & {
+          border-color: var(--accordion-chat-question-border-open, var(--accordion-chat-question-border, transparent));
+          background-color: var(--accordion-chat-question-surface-open, var(--theme-surface-inverted));
+          color: var(--accordion-chat-question-colour-open, var(--theme-text-inverted));
+        }
+
+        .accordion-chat-icon {
+          display: grid;
+          place-items: center;
+          inline-size: 100%;
+          aspect-ratio: 1;
+          border-radius: 50%;
+          background-color: var(--accordion-chat-icon-surface, rgb(0 0 0 / 0.07));
+
+          .expanding-panel-classic-details[open] & {
+            background-color: var(--accordion-chat-icon-surface-open, rgb(255 255 255 / 0.16));
+            rotate: 45deg;
+          }
+
+          @media (prefers-reduced-motion: no-preference) {
+            transition:
+              background-color var(--_accordion-chat-duration),
+              rotate calc(var(--_accordion-chat-duration) * 1.25);
+          }
+
+          .accordion-chat-icon-glyph {
+            display: block;
+            font-size: var(--accordion-chat-icon-glyph-size, 1.4rem);
+          }
+        }
+      }
+    }
+
+    .accordion-chat-answer {
+      display: flex;
+      align-items: flex-end;
+      gap: var(--accordion-chat-avatar-gap, 1rem);
+      padding-block-start: var(--accordion-chat-answer-gap, 1rem);
+
+      .accordion-chat-avatar {
+        flex: none;
+        display: grid;
+        place-items: center;
+        inline-size: var(--accordion-chat-avatar-size, 3rem);
+        aspect-ratio: 1;
+        overflow: hidden;
+        border-radius: 50%;
+        background-color: var(--accordion-chat-avatar-surface, var(--theme-surface-inverted));
+        color: var(--accordion-chat-avatar-colour, var(--theme-text-inverted));
+        font-family: var(--accordion-chat-avatar-font-family, inherit);
+        font-size: var(--accordion-chat-avatar-font-size, 1.2rem);
+        font-weight: var(--accordion-chat-avatar-font-weight, 600);
+        line-height: 1;
+        white-space: nowrap;
+
+        & :where(img, svg) {
+          inline-size: 100%;
+          block-size: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .accordion-chat-bubble {
+        min-inline-size: 0;
+        max-inline-size: var(--_accordion-chat-bubble-max-width);
+        padding-block: var(--accordion-chat-answer-padding-block, 1.4rem);
+        padding-inline: var(--accordion-chat-answer-padding-inline, 1.8rem);
+        border: var(--accordion-chat-answer-border-width, 0.1rem) solid
+          var(--accordion-chat-answer-border, var(--theme-surface-subtle));
+        border-radius: var(--_accordion-chat-radius);
+        border-end-start-radius: var(--_accordion-chat-tail-radius);
+        background-color: var(--accordion-chat-answer-surface, var(--theme-text-inverted));
+        color: var(--accordion-chat-answer-colour, var(--theme-text));
+        font-family: var(--accordion-chat-answer-font-family, inherit);
+        font-size: var(--accordion-chat-answer-font-size, 1.55rem);
+        font-weight: var(--accordion-chat-answer-font-weight, 400);
+        line-height: var(--accordion-chat-answer-line-height, 1.6);
+
+        & :where(img, video) {
+          max-inline-size: 100%;
+          block-size: auto;
+        }
+
+        @media (prefers-reduced-motion: no-preference) {
+          .expanding-panel-classic-details[open] + .expanding-panel-classic-content & {
+            animation: accordion-chat-answer-in var(--accordion-chat-entrance-duration, 260ms) ease-out both;
+          }
+        }
+      }
+    }
+  }
+
+  @keyframes accordion-chat-answer-in {
+    from {
+      opacity: 0;
+      translate: 0 0.6rem;
+      scale: 0.98;
+    }
+  }
+}
+</style>