srcdev-nuxt-components 9.5.6 → 9.6.0

package/app/components/03.organisms/services/services-card/stories/ServicesCard.stories.ts

@@ -1,6 +1,9 @@
+import { computed, ref } from "vue";
 import ServicesCard from "../ServicesCard.vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { Service } from "~/types/types.services";
+import type { MediaCanvas } from "~/types/components";
 
 const meta: Meta<typeof ServicesCard> = {
   title: "Organisms/Services/Services Card",
@@ -47,12 +50,6 @@ const meta: Meta<typeof ServicesCard> = {
     styleClassPassthrough: [],
   },
   parameters: {
-    backgrounds: {
-      default: "storybook-canvas",
-      options: {
-        "storybook-canvas": { name: "Canvas", value: "oklch(0.163 0.005 17)" },
-      },
-    },
     docs: {
       description: {
         component:
@@ -329,32 +326,32 @@ export const DarkOverlayCards: Story = {
           --services-card-border-colour-hover: #6b5a4e;
           --services-card-transform-hover: translateY(-0.4rem);
 
-          --image-wrapper-border-radius: 0;
-          --image-wrapper-border-image-zoom-transform: none;
-          --image-wrapper-details-scrim-colour: #141110;
-          --image-wrapper-details-text-colour: #f3ece4;
-          --image-wrapper-details-eyebrow-text-colour: #c9a24a;
-          --image-wrapper-details-gap: 0.4rem;
+          --services-card-image-border-radius: 0;
+          --services-card-image-zoom-transform: none;
+          --services-card-image-details-scrim-colour: #141110;
+          --services-card-image-details-text-colour: #f3ece4;
+          --services-card-image-details-eyebrow-colour: #c9a24a;
+          --services-card-image-details-gap: 0.4rem;
           --eyebrow-text-font-family: "Poppins", sans-serif;
           --eyebrow-text-font-style: normal;
           --eyebrow-text-font-weight: 600;
           --eyebrow-text-letter-spacing: 0.25em;
-          --image-wrapper-details-eyebrow-text-padding-inline: 3.6rem;
-          --image-wrapper-details-hero-text-padding-block: 0 2.8rem;
-          --image-wrapper-details-hero-text-padding-inline: 3.6rem;
+          --services-card-image-details-eyebrow-padding-inline: 3.6rem;
+          --services-card-image-details-title-padding-block: 0 2.8rem;
+          --services-card-image-details-title-padding-inline: 3.6rem;
 
-          --details-wrapper-padding-block: 3.6rem;
-          --details-wrapper-padding-inline: 3.6rem;
-          --description-text-colour: #a39a94;
-          --description-line-height: 1.75;
-          --description-font-weight: 300;
-          --meta-border-colour: #2e2826;
-          --meta-padding-block: 2.4rem 0;
-          --meta-text-colour: #8a817b;
-          --meta-duration-font-weight: 400;
-          --meta-price-font-weight: 400;
-          --meta-letter-spacing: 0.15em;
-          --meta-price-text-colour: #e8dfd6;
+          --services-card-details-padding-block: 3.6rem;
+          --services-card-details-padding-inline: 3.6rem;
+          --services-card-description-text-colour: #a39a94;
+          --services-card-description-line-height: 1.75;
+          --services-card-description-font-weight: 300;
+          --services-card-meta-border-colour: #2e2826;
+          --services-card-meta-padding-block: 2.4rem 0;
+          --services-card-meta-text-colour: #8a817b;
+          --services-card-meta-duration-font-weight: 400;
+          --services-card-meta-price-font-weight: 400;
+          --services-card-meta-letter-spacing: 0.15em;
+          --services-card-meta-price-text-colour: #e8dfd6;
         }
       </component>
       <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap:4rem; padding:2.4rem; background:#121010;">
@@ -379,3 +376,173 @@ export const DarkOverlayCards: Story = {
     },
   },
 };
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+type LineClamp = "none" | "1" | "2" | "3" | "4";
+
+// Story-only arg: drives a CSS token, not a ServicesCard prop. See the argTypes entry.
+type StressArgs = InstanceType<typeof ServicesCard>["$props"] & { descriptionLineClamp: LineClamp };
+
+const longGerman = "Haarverlängerungsbehandlungsberatungsterminvereinbarungsbestätigungsschreiben";
+const longUrl =
+  "https://example.com/services/a-very-long-path-with-no-spaces-at-all?utm_source=newsletter&utm_campaign=autumn-2026";
+
+const stressService = (overrides: Partial<Service>): Service => ({ ...balayageService, ...overrides });
+
+const stressServices: { service: Service; titlesWithinImageWrapper?: boolean; href?: string; action?: string }[] = [
+  {
+    service: stressService({
+      slug: "long-german",
+      subtitle: `Freihändige ${longGerman}`,
+      title: longGerman,
+      shortDescription:
+        "Eine ausgesprochen lange Beschreibung, wie sie ein CMS liefert, wenn niemand die Zeichenanzahl prüft. ".repeat(6),
+      duration: "Ungefähr zweieinhalb bis dreieinhalb Stunden einschließlich Beratung",
+      price: "Ab 95,00 € zuzüglich Pflegeprodukte nach individueller Absprache",
+    }),
+  },
+  {
+    service: stressService({
+      slug: "emoji-html",
+      subtitle: "✨💇‍♀️ Colour",
+      title: "<script>alert('xss')</script>",
+      shortDescription: "🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈 <b>not bold</b>",
+      duration: "⏱",
+      price: "£∞",
+    }),
+    href: longUrl,
+  },
+  {
+    service: stressService({
+      slug: "rtl",
+      subtitle: "تلوين الشعر",
+      title: "تسريحات شعر جديدة لموسم الخريف",
+      shortDescription: "وصف طويل باللغة العربية يمتد عبر عدة أسطر للتحقق من أن النص من اليمين إلى اليسار يعرض بشكل صحيح.",
+      duration: "ساعتان",
+      price: "١٢٠ جنيه",
+    }),
+  },
+  {
+    service: stressService({
+      slug: "empty",
+      subtitle: "",
+      title: "",
+      shortDescription: "",
+      duration: "",
+      price: "",
+    }),
+  },
+  {
+    service: stressService({
+      slug: "broken-image",
+      image: "https://example.invalid/missing.jpg",
+      subtitle: "A",
+      title: "B",
+      shortDescription: "C",
+      duration: "1",
+      price: "£0",
+    }),
+  },
+  {
+    service: stressService({
+      slug: "overlay-long",
+      image: "https://picsum.photos/seed/stress-overlay/600/800",
+      subtitle: longUrl,
+      title: `${longGerman} ${longGerman}`,
+      shortDescription: longUrl,
+    }),
+    titlesWithinImageWrapper: true,
+    href: "#overlay-long",
+  },
+  {
+    service: stressService({ slug: "long-action", title: "Long button label" }),
+    action: `Jetzt ${longGerman} buchen`,
+  },
+];
+
+export const StressTest: StoryObj<StressArgs> = {
+  name: "Stress Test (Worst-Case Data)",
+  argTypes: {
+    descriptionLineClamp: {
+      control: "select",
+      options: ["none", "1", "2", "3", "4"] satisfies LineClamp[],
+      description:
+        "**Story control, not a prop.** Sets the `--services-card-description-line-clamp` CSS token on a wrapper so you can try it here. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.services-list { --services-card-description-line-clamp: 3; }`. " +
+        "`1` is single-line ellipsis, `none` (the default) shows everything.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "none" } },
+    },
+  },
+  args: {
+    descriptionLineClamp: "none",
+  },
+  render: (args) => ({
+    components: { ServicesCard },
+    setup() {
+      const componentArgs = computed(() => {
+        const { descriptionLineClamp: _descriptionLineClamp, ...rest } = args;
+        return rest;
+      });
+      const tokenStyles = computed(() => ({
+        "--services-card-description-line-clamp": args.descriptionLineClamp,
+      }));
+      return { componentArgs, tokenStyles, stressServices };
+    },
+    template: `
+      <div
+        :style="tokenStyles"
+        style="display:grid; grid-template-columns:repeat(auto-fit, minmax(min(25rem, 100%), 1fr)); gap:3.2rem;"
+      >
+        <ServicesCard
+          v-for="item in stressServices"
+          :key="item.service.slug"
+          v-bind="componentArgs"
+          :service-data="item.service"
+          :href="item.href"
+          :titles-within-image-wrapper="item.titlesWithinImageWrapper"
+        >
+          <template v-if="item.action" #actions>
+            <a href="#long-action" style="display:inline-block; padding:1.2rem 2.4rem; background:#333; color:#fff; border-radius:0.4rem; text-decoration:none;">
+              {{ item.action }}
+            </a>
+          </template>
+        </ServicesCard>
+      </div>
+    `,
+  }),
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        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; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Deliberately hostile data to find breakage, in a grid like ServicesCardGrid's: a long German compound word as title, " +
+          "eyebrow and actions label, a long paragraph description, long duration and price strings, emoji, HTML-like text " +
+          "(must render as text), right-to-left Arabic, a card with every text field empty (no empty eyebrow, heading, " +
+          "description or meta row is rendered), a broken image URL (its alt text shows), single characters, a whole-card " +
+          "link to a long URL, and long unbroken titles over the image. Check at every canvas width: no text runs out of its " +
+          "card, every column stays the same width, a long duration/price wraps onto two lines rather than overflowing, and " +
+          "the meta row and actions stay pinned to the bottom. Try the Description line clamp control too: it's a CSS token " +
+          "set by the story, not a prop.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/services/services-card/tests/ServicesCard.spec.ts

@@ -90,14 +90,14 @@ describe("ServicesCard", () => {
     const wrapper = await mountSuspended(ServicesCard, {
       props: { serviceData: mockService },
     });
-    expect(wrapper.find(".description").text()).toBe(mockService.shortDescription);
+    expect(wrapper.find(".services-card-description").text()).toBe(mockService.shortDescription);
   });
 
   it("passes image src and alt to the image element", async () => {
     const wrapper = await mountSuspended(ServicesCard, {
       props: { serviceData: mockService },
     });
-    const img = wrapper.find(".image-wrapper img");
+    const img = wrapper.find(".services-card-image-wrapper img");
     expect(img.attributes("src")).toContain(mockService.image);
     expect(img.attributes("alt")).toBe(mockService.title);
   });
@@ -106,7 +106,7 @@ describe("ServicesCard", () => {
     const wrapper = await mountSuspended(ServicesCard, {
       props: { serviceData: mockService },
     });
-    expect(wrapper.find(".image-wrapper img").attributes("loading")).toBe("lazy");
+    expect(wrapper.find(".services-card-image-wrapper img").attributes("loading")).toBe("lazy");
   });
 
   // ─── Meta row (duration / price) ───────────────────────────────────────
@@ -115,16 +115,16 @@ describe("ServicesCard", () => {
     const wrapper = await mountSuspended(ServicesCard, {
       props: { serviceData: mockService },
     });
-    expect(wrapper.find(".meta-duration").text()).toBe(mockService.duration);
-    expect(wrapper.find(".meta-price").text()).toBe(mockService.price);
+    expect(wrapper.find(".services-card-meta-duration").text()).toBe(mockService.duration);
+    expect(wrapper.find(".services-card-meta-price").text()).toBe(mockService.price);
   });
 
   it("overrides duration/price text with durationText/priceText props", async () => {
     const wrapper = await mountSuspended(ServicesCard, {
       props: { serviceData: mockService, durationText: "1 hour", priceText: "£75" },
     });
-    expect(wrapper.find(".meta-duration").text()).toBe("1 hour");
-    expect(wrapper.find(".meta-price").text()).toBe("£75");
+    expect(wrapper.find(".services-card-meta-duration").text()).toBe("1 hour");
+    expect(wrapper.find(".services-card-meta-price").text()).toBe("£75");
   });
 
   it("overrides duration/price content with duration/price slots", async () => {
@@ -144,7 +144,7 @@ describe("ServicesCard", () => {
     const wrapper = await mountSuspended(ServicesCard, {
       props: { serviceData: serviceWithoutMeta },
     });
-    expect(wrapper.find(".meta").exists()).toBe(false);
+    expect(wrapper.find(".services-card-meta").exists()).toBe(false);
   });
 
   // ─── Actions slot ───────────────────────────────────────────────────────
@@ -303,4 +303,30 @@ describe("ServicesCard", () => {
     expect(wrapper.find("a.is-clickable").exists()).toBe(false);
     expect(wrapper.find("button").exists()).toBe(true);
   });
+
+  // ─── Worst-case data ───────────────────────────────────────────────────
+
+  it("renders no empty eyebrow, heading or description for empty strings", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: { ...mockService, subtitle: "", title: "", shortDescription: "" } },
+    });
+    expect(wrapper.find(".eyebrow-text").exists()).toBe(false);
+    expect(wrapper.find(".hero-text").exists()).toBe(false);
+    expect(wrapper.find(".services-card-description").exists()).toBe(false);
+  });
+
+  it("drops the image overlay entirely when both titles are empty", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: { ...mockService, subtitle: "", title: "" }, titlesWithinImageWrapper: true },
+    });
+    expect(wrapper.find(".services-card-image-details").exists()).toBe(false);
+  });
+
+  it("renders HTML-like data as text", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: { ...mockService, title: "<b>bold</b>" } },
+    });
+    expect(wrapper.find(".hero-text").text()).toBe("<b>bold</b>");
+    expect(wrapper.find(".hero-text b").exists()).toBe(false);
+  });
 });

package/app/components/03.organisms/services/services-card/tests/__snapshots__/ServicesCard.spec.ts.snap

@@ -2,20 +2,20 @@
 
 exports[`ServicesCard > renders correct HTML structure 1`] = `
 "<div class="services-card">
-  <div class="grid-stack image-wrapper">
-    <div class="grid-stack__layer"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test Service" loading="lazy" class="image" src="/_ipx/_/images/test.jpg"></div>
+  <div class="grid-stack services-card-image-wrapper">
+    <div class="grid-stack__layer"><img width="640" height="853" data-nuxt-img="" srcset="/_ipx/s_640x853/images/test.jpg 1x, /_ipx/s_1280x1706/images/test.jpg 2x" alt="Test Service" loading="lazy" class="services-card-image" src="/_ipx/s_640x853/images/test.jpg"></div>
     <div class="grid-stack__layer"></div>
   </div>
-  <div class="details-wrapper">
+  <div class="services-card-details">
     <div class="eyebrow-text large">A subtitle</div>
     <h2 class="hero-text heading axis-horizontal">
       <!--v-if--><span class="text-block-0 normal">Test Service</span>
     </h2>
-    <div class="description">A short description of the service.</div>
-    <div class="footer">
-      <div class="meta">
-        <div class="meta-duration">60 mins</div>
-        <div class="meta-price">£50</div>
+    <div class="services-card-description">A short description of the service.</div>
+    <div class="services-card-footer">
+      <div class="services-card-meta">
+        <div class="services-card-meta-duration">60 mins</div>
+        <div class="services-card-meta-price">£50</div>
       </div>
     </div>
   </div>

package/app/components/03.organisms/services/services-grids/CONSUMER-STYLING.md

@@ -14,12 +14,17 @@
 |---|---|---|
 | `--services-card-grid-column-min-width` | `250px` | Minimum card column width before wrapping (capped at the container width) |
 | `--services-card-grid-gap` | `4rem` | Gap between cards |
+| `--services-card-grid-button-text-white-space` | `normal` | Wrapping of each card CTA label (`InputButton`'s `--input-button-text-white-space`). Set `nowrap` for single-line labels |
 
 Each item is a full `ServiceSummary` or `ServicesCard`, styled by its own tokens (see
 `03.organisms/services/service-summary/CONSUMER-STYLING.md` and
 `03.organisms/services/services-card/CONSUMER-STYLING.md`). ServicesCardGrid's CTA is
 `InputButton` (`variant="secondary"`).
 
+> Changed 2026-10-06: CTA labels wrap inside the card (they used to stay on one line and be clipped
+> by the card edge for a long or translated title), and an empty title no longer leaves a trailing
+> space in the label.
+
 > Changed 2026-09-28: ServicesCardGrid columns use `minmax(min(<min-width>, 100%), 1fr)`, so a
 > single column no longer overflows a container narrower than the minimum width.
 
@@ -42,6 +47,10 @@ Set the tokens above on an element you own (a page or section class, or a class
 `<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
 `:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
 
+**Caveat:** `.services-card-grid` re-declares `--input-button-text-white-space` on itself, so setting
+that InputButton token on an ancestor doesn't reach the grid's buttons. Use
+`--services-card-grid-button-text-white-space` instead.
+
 ---
 
 ## Class passthrough

package/app/components/03.organisms/services/services-grids/ServicesCardGrid.vue

@@ -10,7 +10,7 @@
       <template #actions="{ serviceData }">
         <InputButton
           variant="secondary"
-          :button-text="`${buttonTextPrefix} ${serviceData.title}`"
+          :button-text="`${buttonTextPrefix} ${serviceData.title}`.trim()"
           :href="`${hrefBase}${serviceData.slug}`"
           :style-class-passthrough="['mbs-24']"
         >
@@ -64,6 +64,7 @@ watch(
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(var(--services-card-grid-column-min-width, 250px), 100%), 1fr));
     gap: var(--services-card-grid-gap, 4rem);
+    --input-button-text-white-space: var(--services-card-grid-button-text-white-space, normal);
   }
 }
 </style>

package/app/components/03.organisms/services/services-grids/stories/ServiceSummaryGrid.stories.ts

@@ -32,12 +32,6 @@ const meta: Meta<typeof ServiceSummaryGrid> = {
     styleClassPassthrough: [],
   },
   parameters: {
-    backgrounds: {
-      default: "storybook-canvas",
-      options: {
-        "storybook-canvas": { name: "Canvas", value: "oklch(0.163 0.005 17)" },
-      },
-    },
     docs: {
       description: {
         component:
@@ -201,3 +195,49 @@ export const EmptyData: Story = {
     },
   },
 };
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+const stressServices: Service[] = [
+  ...Array.from({ length: 7 }, (_, index) =>
+    makeService(`stress-${index}`, `Service ${index + 1}`, "Grid stress", `https://picsum.photos/seed/summary-stress-${index}/800/600`)
+  ),
+  makeService("stress-0", "Duplicate slug", "Same slug as the first row", "https://picsum.photos/seed/summary-stress-dup/800/600"),
+];
+
+const longLinkLabel =
+  "Mehr über diese außergewöhnlich ausführliche Haarverlängerungsbehandlungsberatung erfahren und einen Termin vereinbaren";
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    useAlternateReverse: true,
+  },
+  render: (args) => ({
+    components: { ServiceSummaryGrid },
+    setup() {
+      return { args, stressServices, longLinkLabel };
+    },
+    template: `
+      <ServiceSummaryGrid v-bind="args" :services-data="stressServices">
+        <template #summary-link="{ serviceData }">
+          <a :href="'/services/' + serviceData.slug" style="display:inline-block;margin-top:1.6rem;color:inherit;overflow-wrap:anywhere;">
+            {{ longLinkLabel }}
+          </a>
+        </template>
+      </ServiceSummaryGrid>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Grid-level worst case: eight rows (an odd count of distinct services, so alternate-reverse ends on a " +
+          "non-reversed row), two rows sharing a slug, and a long German summary-link label in every row. Check that " +
+          "rows alternate correctly all the way down, the duplicate slug renders both rows, and the slot content stays " +
+          "inside its column. Field-level worst-case data (long titles, empty fields, emoji) belongs to ServiceSummary's " +
+          "own stress story, since every field is rendered there.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/services/services-grids/stories/ServicesCardGrid.stories.ts

@@ -1,7 +1,9 @@
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import ServicesCardGrid from "../ServicesCardGrid.vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { Service } from "~/types/types.services";
+import type { MediaCanvas } from "~/types/components";
 
 type StoryArgs = {
   tag?: "div" | "section" | "main";
@@ -57,7 +59,7 @@ const meta: Meta<StoryArgs> = {
       control: { type: "inline-radio" },
       options: [1, 2, 3, 4, 5],
       description:
-        "Story-only control — sets ServicesCard's --description-line-clamp custom property on the grid wrapper (not a real component prop) to demo description clamping across cards",
+        "Story-only control — sets ServicesCard's --services-card-description-line-clamp custom property on the grid wrapper (not a real component prop) to demo description clamping across cards",
     },
     cardMinWidth: {
       control: { type: "inline-radio" },
@@ -78,12 +80,6 @@ const meta: Meta<StoryArgs> = {
     cardMinWidth: "250px",
   },
   parameters: {
-    backgrounds: {
-      default: "storybook-canvas",
-      options: {
-        "storybook-canvas": { name: "Canvas", value: "oklch(0.163 0.005 17)" },
-      },
-    },
     docs: {
       description: {
         component:
@@ -201,13 +197,13 @@ const hideDemoControls = {
 
 /**
  * lineClamp and cardMinWidth are story-only controls (not real ServicesCardGrid props).
- * They set --description-line-clamp (read by each ServicesCard's .description) and
+ * They set --services-card-description-line-clamp (read by each ServicesCard's .description) and
  * --services-card-grid-column-min-width (the grid's minmax() floor) on a wrapper div,
  * and are stripped from the args bound to the component so they don't leak as attributes.
  */
 function useStorySetup(args: StoryArgs) {
   const wrapperStyle = computed(() => ({
-    "--description-line-clamp": String(args.lineClamp ?? 3),
+    "--services-card-description-line-clamp": String(args.lineClamp ?? 3),
     "--services-card-grid-column-min-width": args.cardMinWidth ?? "250px",
   }));
   const componentArgs = computed(() => {
@@ -360,7 +356,7 @@ export const DescriptionLineClamp: Story = {
     docs: {
       description: {
         story:
-          "Six cards with progressively longer shortDescription text, all sharing one --description-line-clamp value set via the lineClamp control. Use the control to see how the same clamp value affects a one-line description (no visible clamping) versus a long paragraph (clamped with an ellipsis) — card heights stay equal since the meta row and actions slot sit below the clamped description rather than growing with it.",
+          "Six cards with progressively longer shortDescription text, all sharing one --services-card-description-line-clamp value set via the lineClamp control. Use the control to see how the same clamp value affects a one-line description (no visible clamping) versus a long paragraph (clamped with an ellipsis) — card heights stay equal since the meta row and actions slot sit below the clamped description rather than growing with it.",
       },
     },
   },
@@ -391,3 +387,85 @@ export const CardWidth: Story = {
     },
   },
 };
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+const longGerman = "Haarverlängerungsbehandlungsberatungsterminvereinbarung";
+
+const stressServices: Service[] = [
+  {
+    ...makeService("long-german", longGerman, `Freihändige ${longGerman}`, "https://picsum.photos/seed/stress-grid-1/600/800"),
+    shortDescription: "Eine ausgesprochen lange Beschreibung, wie sie ein CMS liefert. ".repeat(6),
+    duration: "Ungefähr zweieinhalb bis dreieinhalb Stunden",
+    price: "Ab 95,00 € zuzüglich Pflegeprodukte",
+  },
+  { ...makeService("emoji", "✨💇‍♀️ <b>not bold</b>", "<script>alert(1)</script>", "https://picsum.photos/seed/stress-grid-2/600/800") },
+  {
+    ...makeService("rtl", "تسريحات شعر جديدة لموسم الخريف", "تلوين الشعر", "https://picsum.photos/seed/stress-grid-3/600/800"),
+    shortDescription: "وصف طويل باللغة العربية يمتد عبر عدة أسطر للتحقق من النص من اليمين إلى اليسار.",
+  },
+  {
+    ...makeService("", "", "", "https://example.invalid/missing.jpg"),
+    shortDescription: "",
+    duration: "",
+    price: "",
+  },
+  { ...makeService("a b/c?d=é#frag", "A", "B", "https://picsum.photos/seed/stress-grid-5/600/800"), shortDescription: "C" },
+  { ...makeService("long-german", "Duplicate slug", "Same slug as the first card", "https://picsum.photos/seed/stress-grid-6/600/800") },
+  ...Array.from({ length: 6 }, (_, index) =>
+    makeService(`filler-${index}`, `Filler ${index + 1}`, "Filler", `https://picsum.photos/seed/stress-grid-f${index}/600/800`)
+  ),
+];
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    buttonTextPrefix: "Unverbindliche Anfrage stellen zu",
+    hrefBase: "",
+    buttonIcon: "this-icon:does-not-exist",
+  },
+  render: (args) => ({
+    components: { ServicesCardGrid },
+    setup() {
+      return { ...useStorySetup(args), stressServices };
+    },
+    template: `
+      <div :style="wrapperStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="stressServices" />
+      </div>
+    `,
+  }),
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        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; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Deliberately hostile data to find breakage: a long German title, so the CTA label (long German prefix + title) " +
+          "is far wider than the card; emoji and HTML-like text (must render as text); right-to-left Arabic; a card with " +
+          "every text field and the slug empty (label is just the prefix, no trailing space); a broken image; a slug with " +
+          "spaces and URL characters; two cards sharing a slug; 12 cards; an empty hrefBase and a broken icon name. " +
+          "Check at every canvas width: every CTA label wraps inside its card instead of being clipped at the edge, all " +
+          "columns stay equal, and the meta rows and buttons line up along each row. The line clamp and card width " +
+          "controls are CSS tokens set by the story, not props.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/services/services-grids/tests/ServicesCardGrid.spec.ts

@@ -196,4 +196,12 @@ describe("ServicesCardGrid button icon", () => {
     });
     expect(iconName(wrapper)).toContain("lucide:arrow-right");
   });
+
+  it("drops the trailing space from the CTA label when a title is empty", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: [makeService("untitled", "")] },
+    });
+    expect(wrapper.find(".button-text").text()).toBe("Enquire about");
+    expect(wrapper.find(".button-text").element.textContent).toBe("Enquire about");
+  });
 });