srcdev-nuxt-components 9.5.6 → 9.6.0

package/app/components/03.organisms/services/service-detail/stories/ServiceDetail.stories.ts

@@ -1,7 +1,10 @@
+import { computed, ref } from "vue";
 import ServiceDetail from "../ServiceDetail.vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import InputButton from "../../../../05.forms/input-button/InputButton.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 ServiceDetail> = {
   title: "Organisms/Services/Service Detail",
@@ -60,6 +63,9 @@ const meta: Meta<typeof ServiceDetail> = {
     relatedServices: { control: "object", description: "Services rendered in the 'You may also like' sidebar list" },
     finalCtaHeading: { control: "text", description: "Heading in the closing full-width CTA banner" },
     finalCtaBody: { control: "text", description: "Body text in the closing full-width CTA banner" },
+    pricePrefix: { control: "text", description: "Text before the price in the hero pill; empty shows the price alone" },
+    idealForIcon: { control: "text", description: "Icon shown on each ideal-for item" },
+    breadcrumbAriaLabel: { control: "text", description: "aria-label on the breadcrumb nav (Breadcrumb's default when unset)" },
     styleClassPassthrough: { control: "object", description: "Additional CSS classes applied to the root element" },
   },
   args: {
@@ -70,15 +76,11 @@ const meta: Meta<typeof ServiceDetail> = {
     heroContentVariant: "content",
     bodyVariant: "content",
     finalCtaVariant: "content",
+    pricePrefix: "From",
+    idealForIcon: "mdi:diamond-stone",
     styleClassPassthrough: [],
   },
   parameters: {
-    backgrounds: {
-      default: "storybook-canvas",
-      options: {
-        "storybook-canvas": { name: "Canvas", value: "oklch(0.163 0.005 17)" },
-      },
-    },
     docs: {
       description: {
         component:
@@ -154,13 +156,10 @@ const relatedServices: Service[] = [
 // ServiceDetail's own --service-detail-*/--glass-panel-*/--breadcrumb-* tokens (see
 // CONSUMER-STYLING.md) rather than new component defaults.
 const storyTheme = {
-  "--glass-panel-bg": "oklch(0.216 0.006 40)",
-  "--glass-panel-border-color": "oklch(0.283 0.008 44)",
   "--service-detail-process-divider-colour": "oklch(0.283 0.008 44)",
   "--service-detail-faq-divider-colour": "oklch(0.283 0.008 44)",
   "--service-detail-sidebar-row-divider-colour": "oklch(0.283 0.008 44)",
   "--service-detail-final-cta-divider-colour": "oklch(0.283 0.008 44)",
-  "--service-detail-ideal-for-item-border-colour": "oklch(0.283 0.008 44)",
   "--service-detail-process-index-colour": "oklch(0.727 0.089 87)",
   "--service-detail-ideal-for-icon-colour": "oklch(0.727 0.089 87)",
   "--service-detail-hero-pill-border-colour": "oklch(0.727 0.089 87)",
@@ -304,3 +303,152 @@ export const CustomRelatedServiceLink: Story = {
     },
   },
 };
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+type LineClamp = "none" | "1" | "2" | "3" | "4";
+
+// Story-only args: each drives a CSS token, not a ServiceDetail prop. See the argTypes entries.
+const lineClampTokens = {
+  breadcrumbItemLineClamp: { token: "--breadcrumb-item-line-clamp", label: "Breadcrumb item" },
+  heroEyebrowLineClamp: { token: "--service-detail-hero-eyebrow-line-clamp", label: "Hero eyebrow" },
+  heroTitleLineClamp: { token: "--service-detail-hero-title-line-clamp", label: "Hero title" },
+  sidebarLabelLineClamp: { token: "--service-detail-sidebar-label-line-clamp", label: "Sidebar label" },
+  sidebarValueLineClamp: { token: "--service-detail-sidebar-value-line-clamp", label: "Sidebar value" },
+  relatedTitleLineClamp: { token: "--service-detail-related-title-line-clamp", label: "Related title" },
+  finalCtaHeadingLineClamp: { token: "--service-detail-final-cta-heading-line-clamp", label: "Final CTA heading" },
+  finalCtaBodyLineClamp: { token: "--service-detail-final-cta-body-line-clamp", label: "Final CTA body" },
+} as const;
+
+type LineClampArg = keyof typeof lineClampTokens;
+
+type StressArgs = InstanceType<typeof ServiceDetail>["$props"] & Record<LineClampArg, LineClamp>;
+
+const longGerman = "Haarverlängerungsbehandlungsberatungsterminvereinbarung";
+const longUrl = "https://example.com/a/very/long/path/that/never/breaks/because/it/has/no/spaces/at/all?utm_source=newsletter";
+const germanParagraph = "Eine ausgesprochen lange Beschreibung, wie sie ein CMS liefert, wenn niemand die Zeichenanzahl prüft. ";
+
+const stressService: Service = {
+  ...balayage,
+  slug: "stress",
+  category: `Kategorie ${longGerman}`,
+  subtitle: `Freihändige ${longGerman}`,
+  title: `${longGerman} und ${longGerman}`,
+  price: "95,00 € zuzüglich Pflegeprodukte nach individueller Absprache mit Ihrer Stylistin",
+  duration: "Ungefähr zweieinhalb bis dreieinhalb Stunden einschließlich ausführlicher Beratung",
+  longDescription: germanParagraph.repeat(10),
+  heroHeading: [
+    { text: "Warum", styleClass: "normal" },
+    { text: longGerman, styleClass: "accent" },
+  ],
+  whatIsIt: `🌈✨ <b>not bold</b> <script>alert(1)</script> ${longUrl}`,
+  process: [
+    longGerman,
+    "A",
+    "وصف طويل باللغة العربية يمتد عبر عدة أسطر للتحقق من أن النص من اليمين إلى اليسار يعرض بشكل صحيح.",
+    ...Array.from({ length: 9 }, (_, index) => `Schritt ${index + 4}: ${germanParagraph}`),
+  ],
+  idealFor: [longGerman, "😀 Emoji first", longUrl, "B", ...Array.from({ length: 8 }, (_, index) => `Filler ${index + 1}`)],
+  maintenance: germanParagraph.repeat(3),
+  faqs: [
+    { question: `${longGerman}?`, answer: germanParagraph.repeat(4) },
+    { question: "<i>Is this italic?</i>", answer: "" },
+    { question: "", answer: "An answer with no question." },
+  ],
+};
+
+const stressRelated: Service[] = [
+  { ...balayage, slug: "related-long", title: `${longGerman} ${longGerman}`, price: "Ab 1.250,00 € pro Sitzung" },
+  { ...balayage, slug: "related-long", title: "Duplicate slug", price: "£0" },
+  { ...balayage, slug: "related-broken", title: "Broken image", image: "https://example.invalid/missing.jpg", price: "" },
+];
+
+export const StressTest: StoryObj<StressArgs> = {
+  name: "Stress Test (Worst-Case Data)",
+  argTypes: Object.fromEntries(
+    Object.entries(lineClampTokens).map(([arg, { token, label }]) => [
+      arg,
+      {
+        name: `${label} line clamp`,
+        control: "select",
+        options: ["none", "1", "2", "3", "4"] satisfies LineClamp[],
+        description:
+          `**Story control, not a prop.** Sets the \`${token}\` CSS token on the component so you can try it here. ` +
+          `To use it in an app, set the token in your own CSS, e.g. \`.service-page { ${token}: 2; }\`. ` +
+          "`1` is single-line ellipsis, `none` (the default) shows everything.",
+        table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "none" } },
+      },
+    ])
+  ),
+  args: {
+    tag: "section",
+    pricePrefix: "Ab einem Mindestpreis von",
+    idealForIcon: "this-icon:does-not-exist",
+    location: `Mobil im gesamten Großraum ${longGerman}, nach Vereinbarung auch an Wochenenden`,
+    bookingHeading: `Diese ${longGerman} jetzt buchen`,
+    finalCtaHeading: `Bereit für Ihre ${longGerman}?`,
+    finalCtaBody: germanParagraph.repeat(2),
+    ...(Object.fromEntries(Object.keys(lineClampTokens).map((arg) => [arg, "none"])) as Record<LineClampArg, LineClamp>),
+  },
+  render: (args) => ({
+    components: { ServiceDetail, InputButton },
+    setup() {
+      const componentArgs = computed(() =>
+        Object.fromEntries(Object.entries(args).filter(([arg]) => !(arg in lineClampTokens)))
+      );
+      const tokenStyles = computed(() => ({
+        ...storyTheme,
+        ...Object.fromEntries(
+          Object.entries(lineClampTokens).map(([arg, { token }]) => [token, args[arg as LineClampArg]])
+        ),
+      }));
+      return { componentArgs, tokenStyles, stressService, stressRelated };
+    },
+    template: `
+      <ServiceDetail v-bind="componentArgs" :service-data="stressService" :related-services="stressRelated" :style="tokenStyles">
+        <template #book-cta>
+          <InputButton tag="a" href="/contact" button-text="Jetzt unverbindlich einen Beratungstermin vereinbaren" variant="primary" />
+        </template>
+        <template #sidebar-note>
+          Ein Allergietest ist mindestens 48 Stunden vor jeder Farbbehandlung erforderlich: ${longUrl}
+        </template>
+        <template #final-cta>
+          <InputButton tag="a" href="/contact" button-text="Jetzt buchen" variant="secondary" />
+        </template>
+      </ServiceDetail>
+    `,
+  }),
+  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; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Deliberately hostile data to find breakage: a hero title of two 55-character German compound words (the hero " +
+          "grows instead of clipping it), long German breadcrumb, eyebrow, pills, booking copy and location, a German price " +
+          "prefix, emoji, HTML-like text (must render as text), an unbroken URL, right-to-left Arabic, 12 process steps and " +
+          "12 ideal-for items, FAQs with an empty answer and an empty question, related services with a long title, a " +
+          "duplicate slug, a broken image and an empty price, and a broken ideal-for icon name. Check at every canvas width: " +
+          "no text runs out of its column, the sidebar values wrap and stay right-aligned, and the body switches to two " +
+          "columns from 900px. Try the line clamp controls too (breadcrumb items, hero eyebrow and title, sidebar labels and values, related titles, final CTA heading and body): they set CSS tokens, they are not props. The final CTA button never shrinks or gets pushed out by long copy.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/services/service-detail/tests/ServiceDetail.spec.ts

@@ -311,4 +311,62 @@ describe("ServiceDetail", () => {
     expect(wrapper.classes()).not.toContain("original");
     expect(wrapper.classes()).toContain("updated");
   });
+
+  // ─── Worst-case data ───────────────────────────────────────────────────
+
+  it("leaves out every section whose data is empty, along with its heading", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      props: {
+        serviceData: {
+          ...mockService,
+          category: "",
+          subtitle: "",
+          title: "",
+          price: "",
+          duration: "",
+          longDescription: "",
+          heroHeading: [{ text: "", styleClass: "normal" }],
+          whatIsIt: "",
+          process: [],
+          idealFor: [],
+          maintenance: "",
+          faqs: [],
+        },
+        tag: "section",
+      },
+    });
+    expect(wrapper.find(".breadcrumb").exists()).toBe(false);
+    expect(wrapper.find(".service-detail__hero-pills").exists()).toBe(false);
+    expect(wrapper.find(".service-detail__process").exists()).toBe(false);
+    expect(wrapper.find(".service-detail__ideal-for").exists()).toBe(false);
+    expect(wrapper.find(".service-detail__faqs").exists()).toBe(false);
+    expect(wrapper.find(".service-detail__sidebar-row").exists()).toBe(false);
+    expect(wrapper.text()).not.toContain("The Process");
+    expect(wrapper.text()).not.toContain("Ideal For");
+    expect(wrapper.text()).not.toContain("Aftercare & Maintenance");
+    expect(wrapper.text()).not.toContain("Frequently Asked Questions");
+    expect(wrapper.attributes("aria-labelledby")).toBeUndefined();
+  });
+
+  it("uses pricePrefix for the hero price pill", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      props: { serviceData: mockService, pricePrefix: "Ab" },
+    });
+    expect(wrapper.find(".service-detail__hero-pills").text()).toContain(`Ab ${mockService.price}`);
+  });
+
+  it("puts FAQ questions one level below subheadingTag", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      props: { serviceData: mockService, subheadingTag: "h3" },
+    });
+    expect(wrapper.find(".service-detail__faq-question").element.tagName).toBe("H4");
+  });
+
+  it("hides the decorative ideal-for icon and accepts a custom one", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      props: { serviceData: mockService, idealForIcon: "mdi:check" },
+    });
+    const icon = wrapper.find(".service-detail__ideal-for-icon");
+    expect(icon.attributes("aria-hidden")).toBe("true");
+  });
 });

package/app/components/03.organisms/services/service-detail/tests/__snapshots__/ServiceDetail.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
 "<div class="service-detail">
   <div class="grid-stack service-detail__hero">
     <div class="grid-stack__layer">
-      <div class="page-row full service-detail__hero-image-row"><img data-nuxt-img="" srcset="/_ipx/_/images/balayage.jpg 1x, /_ipx/_/images/balayage.jpg 2x" alt="Balayage" loading="eager" fetchpriority="high" class="service-detail__hero-image" src="/_ipx/_/images/balayage.jpg"></div>
+      <div class="page-row full service-detail__hero-image-row"><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/balayage.jpg 1x, /_ipx/s_3840x2160/images/balayage.jpg 2x" alt="Balayage" loading="eager" fetchpriority="high" class="service-detail__hero-image" src="/_ipx/s_1920x1080/images/balayage.jpg"></div>
     </div>
     <div class="grid-stack__layer">
       <div class="page-row content service-detail__hero-overlay">
@@ -18,7 +18,7 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
             </ol>
           </nav>
           <div class="eyebrow-text large">Freehand colour artistry</div>
-          <h1 id="v-0-0" class="hero-text mb-20 display axis-horizontal">
+          <h1 id="v-0-0" class="hero-text display axis-horizontal">
             <!--v-if--><span class="text-block-0 normal">Balayage</span>
           </h1>
           <div class="service-detail__hero-pills"><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">2.5 - 3.5 hours</span></span><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">From £95</span></span></div>
@@ -98,11 +98,12 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
   <div class="page-row content service-detail__final-cta-row">
     <div class="service-detail__final-cta">
       <div class="service-detail__final-cta-copy">
-        <h2 class="hero-text mbs-0 mbe-8 subheading axis-horizontal">
+        <h2 class="hero-text subheading axis-horizontal">
           <!--v-if--><span class="text-block-0 normal">Ready to book your appointment?</span>
         </h2>
         <p class="page-body-normal">Get in touch to book your appointment.</p>
       </div>
+      <!--v-if-->
     </div>
   </div>
 </div>"

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

@@ -29,6 +29,14 @@ theme file, scoped to a page wrapper, or per-instance via `styleClassPassthrough
 | `--service-summary-image-border-radius` | `0.8rem` | Corner rounding on the service image |
 | `--service-summary-pills-gap` | `0.8rem` | Gap between the duration and price pills |
 | `--service-summary-pills-margin-block-end` | `2rem` | Space below the pill row |
+| `--service-summary-column-min-width` | `246px` | Minimum width of each column in the two-column layout (from the 768px container breakpoint), capped at the container width |
+| `--service-summary-body-line-clamp` | `none` | Max lines of the `whatIsIt` summary text, with an ellipsis on the last. `1` is single-line ellipsis, `none` shows everything |
+
+Long unbroken text wraps in every field. A pill longer than its column is capped at the column width
+and ends in an ellipsis (that is `DisplayPill` behaviour).
+
+> Changed 2026-10-06: added `--service-summary-column-min-width` (was a fixed `246px`) and
+> `--service-summary-body-line-clamp`; columns can no longer be widened by unbroken text.
 
 All breakpoints above (row height, image padding, and the two-column grid switch) are
 **container queries** against `.service-summary`'s own inline size (`container-name:
@@ -57,6 +65,22 @@ under `.service-summary__pills` — see [display-pill.md](../../../../../.claude
 
 ---
 
+## State hooks
+
+| Hook | When |
+|---|---|
+| `.service-summary__grid--reverse` | `reverse` is set: the image column moves after the text column from the 768px container breakpoint |
+| `.service-summary__info-wrapper--align-start` / `-center` / `-end` | The `alignment` prop |
+
+Inner classes: `.service-summary__grid`, `.service-summary__image-wrapper`, `.service-summary__image`,
+`.service-summary__info-wrapper`, `.service-summary__pills`. The eyebrow, title and pills are
+`EyebrowText`, `HeroText` and `DisplayPill`; the summary text is a `p.page-body-normal`.
+
+Empty `subtitle`, `title`, `whatIsIt`, `duration` or `price` render no element (and no pill row when
+both pill values are empty). With no title, a landmark `tag` gets no `aria-labelledby`.
+
+---
+
 ## Global theming
 
 Create `assets/styles/setup/07.components/service-summary.css` in the consuming app and
@@ -117,6 +141,12 @@ visual style, pass a modifier class:
 
 ---
 
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `.service-summary`. Reactive after mount.
+
+---
+
 ## Notes
 
 - `--service-summary-grid-gap-desktop` only applies at `768px` and above — the breakpoint

package/app/components/03.organisms/services/service-summary/ServiceSummary.vue

@@ -5,14 +5,17 @@
         <NuxtImg
           :src="serviceData.image"
           :alt="serviceData.title"
+          width="1080"
+          height="1080"
           :loading="imageLoading"
           :fetchpriority="imageFetchPriority"
           class="service-summary__image"
         />
       </div>
       <div class="service-summary__info-wrapper" :class="infoWrapperClasses">
-        <EyebrowText font-size="large" :text-content="serviceData.subtitle" />
+        <EyebrowText v-if="serviceData.subtitle" font-size="large" :text-content="serviceData.subtitle" />
         <HeroText
+          v-if="serviceData.title"
           :id="headingId"
           :tag="headerTag"
           font-size="title"
@@ -20,12 +23,12 @@
           :style-class-passthrough="['mb-20']"
         />
 
-        <div class="service-summary__pills">
-          <DisplayPill :label="serviceData.duration" size="md" variant="neutral" />
-          <DisplayPill :label="`From ${serviceData.price}`" size="md" variant="neutral" />
+        <div v-if="serviceData.duration || serviceData.price" class="service-summary__pills">
+          <DisplayPill v-if="serviceData.duration" :label="serviceData.duration" size="md" variant="neutral" />
+          <DisplayPill v-if="serviceData.price" :label="priceLabel" size="md" variant="neutral" />
         </div>
 
-        <p class="page-body-normal">{{ serviceData.whatIsIt }}</p>
+        <p v-if="serviceData.whatIsIt" class="page-body-normal">{{ serviceData.whatIsIt }}</p>
 
         <slot name="summary-link" :service-data="serviceData"></slot>
       </div>
@@ -43,6 +46,8 @@ interface Props {
   serviceData: Service;
   alignment?: "start" | "center" | "end";
   reverse?: boolean;
+  /** Text before the price in its pill, e.g. "From £95". Override for localisation; "" shows the price alone. */
+  pricePrefix?: string;
   styleClassPassthrough?: string | string[];
 }
 const props = withDefaults(defineProps<Props>(), {
@@ -51,10 +56,14 @@ const props = withDefaults(defineProps<Props>(), {
   index: 0,
   alignment: "center",
   reverse: false,
+  pricePrefix: "From",
   styleClassPassthrough: () => [],
 });
 
-const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
+// No title means no heading to point at, so don't label the landmark from one.
+const { headingId, ariaLabelledby } = useAriaLabelledById(() => (props.serviceData.title ? props.tag : "div"));
+
+const priceLabel = computed(() => `${props.pricePrefix} ${props.serviceData.price}`.trim());
 
 const infoWrapperClasses = computed(() => ({
   [`service-summary__info-wrapper--align-${props.alignment}`]: true,
@@ -98,14 +107,17 @@ watch(
       --_grid-gap: var(--service-summary-grid-gap, 2rem);
 
       display: grid;
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(0, 1fr);
       gap: var(--_grid-gap);
       height: 100%;
 
       @container service-summary (width >= 768px) {
         --_grid-gap: var(--service-summary-grid-gap-desktop, 3rem);
 
-        grid-template-columns: repeat(auto-fit, minmax(246px, 1fr));
+        grid-template-columns: repeat(
+          auto-fit,
+          minmax(min(var(--service-summary-column-min-width, 246px), 100%), 1fr)
+        );
 
         &.service-summary__grid--reverse {
           .service-summary__image-wrapper {
@@ -117,6 +129,17 @@ watch(
 
       .service-summary__info-wrapper {
         display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        min-inline-size: 0;
+        overflow-wrap: anywhere;
+
+        .page-body-normal {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          -webkit-line-clamp: var(--service-summary-body-line-clamp, none);
+          line-clamp: var(--service-summary-body-line-clamp, none);
+        }
 
         &.service-summary__info-wrapper--align-start {
           align-content: start;
@@ -171,6 +194,7 @@ watch(
         display: flex;
         flex-wrap: wrap;
         gap: var(--service-summary-pills-gap, 0.8rem);
+        min-inline-size: 0;
         margin-block-end: var(--service-summary-pills-margin-block-end, 2rem);
 
         --display-pill-background: var(--service-summary-pill-bg, transparent);

package/app/components/03.organisms/services/service-summary/stories/ServiceSummary.stories.ts

@@ -1,10 +1,13 @@
+import { computed, ref } from "vue";
 import ServiceSummary from "../ServiceSummary.vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import PageRow from "../../../../01.atoms/page-row/PageRow.vue";
 import TextBlock from "../../../../01.atoms/text-block/TextBlock.vue";
 import EyebrowText from "../../../../01.atoms/text-blocks/eyebrow-text/EyebrowText.vue";
 import HeroText from "../../../../01.atoms/text-blocks/hero-text/HeroText.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 ServiceSummary> = {
   title: "Organisms/Services/Service Summary",
@@ -29,6 +32,10 @@ const meta: Meta<typeof ServiceSummary> = {
       control: { type: "boolean" },
       description: "Swap image and content columns",
     },
+    pricePrefix: {
+      control: { type: "text" },
+      description: "Text before the price in its pill; override for localisation, empty shows the price alone",
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -39,6 +46,7 @@ const meta: Meta<typeof ServiceSummary> = {
     headerTag: "h2",
     alignment: "center",
     reverse: false,
+    pricePrefix: "From",
     styleClassPassthrough: [],
   },
   parameters: {
@@ -297,3 +305,142 @@ export const RealisticPageContext: Story = {
     },
   },
 };
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+type LineClamp = "none" | "1" | "2" | "3" | "4";
+
+// Story-only arg: drives a CSS token, not a ServiceSummary prop. See the argTypes entry.
+type StressArgs = InstanceType<typeof ServiceSummary>["$props"] & { bodyLineClamp: LineClamp };
+
+const longGerman = "Haarverlängerungsbehandlungsberatungsterminvereinbarung";
+
+const stressSummaries: Service[] = [
+  {
+    ...sampleService,
+    slug: "long-german",
+    subtitle: `Freihändige ${longGerman}`,
+    title: `${longGerman} und ${longGerman}`,
+    duration: "Ungefähr zweieinhalb bis dreieinhalb Stunden einschließlich ausführlicher Beratung",
+    price: "95,00 € zuzüglich Pflegeprodukte nach individueller Absprache mit Ihrer Stylistin",
+    whatIsIt: "Eine ausgesprochen lange Beschreibung, wie sie ein CMS liefert, wenn niemand die Zeichenanzahl prüft. ".repeat(8),
+  },
+  {
+    ...sampleService,
+    slug: "emoji-html",
+    subtitle: "✨💇‍♀️ Colour",
+    title: "<script>alert('xss')</script>",
+    duration: "⏱",
+    price: "£∞",
+    whatIsIt: "🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈 <b>not bold</b> https://example.com/a/very/long/url/that/never/breaks/at/all",
+  },
+  {
+    ...sampleService,
+    slug: "rtl",
+    subtitle: "تلوين الشعر",
+    title: "تسريحات شعر جديدة لموسم الخريف",
+    duration: "ساعتان",
+    price: "١٢٠ جنيه",
+    whatIsIt: "وصف طويل باللغة العربية يمتد عبر عدة أسطر للتحقق من أن النص من اليمين إلى اليسار يعرض بشكل صحيح.",
+  },
+  {
+    ...sampleService,
+    slug: "empty",
+    image: "https://example.invalid/missing.jpg",
+    subtitle: "",
+    title: "",
+    duration: "",
+    price: "",
+    whatIsIt: "",
+  },
+  {
+    ...sampleService,
+    slug: "single-chars",
+    subtitle: "A",
+    title: "B",
+    duration: "1",
+    price: "0",
+    whatIsIt: "C",
+  },
+];
+
+export const StressTest: StoryObj<StressArgs> = {
+  name: "Stress Test (Worst-Case Data)",
+  argTypes: {
+    bodyLineClamp: {
+      control: "select",
+      options: ["none", "1", "2", "3", "4"] satisfies LineClamp[],
+      description:
+        "**Story control, not a prop.** Sets the `--service-summary-body-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-page { --service-summary-body-line-clamp: 4; }`. " +
+        "`1` is single-line ellipsis, `none` (the default) shows everything.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "none" } },
+    },
+  },
+  args: {
+    pricePrefix: "Ab einem Mindestpreis von",
+    bodyLineClamp: "none",
+  },
+  render: (args) => ({
+    components: { ServiceSummary },
+    setup() {
+      const componentArgs = computed(() => {
+        const { bodyLineClamp: _bodyLineClamp, ...rest } = args;
+        return rest;
+      });
+      const tokenStyles = computed(() => ({ "--service-summary-body-line-clamp": args.bodyLineClamp }));
+      return { componentArgs, tokenStyles, stressSummaries };
+    },
+    template: `
+      <div :style="tokenStyles" style="display:grid; gap:4rem;">
+        <ServiceSummary
+          v-for="(service, index) in stressSummaries"
+          :key="service.slug"
+          v-bind="componentArgs"
+          :index="index"
+          :reverse="index % 2 === 1"
+          :service-data="service"
+        >
+          <template #summary-link="{ serviceData }">
+            <a :href="'/services/' + serviceData.slug" style="color:inherit;">
+              Mehr über {{ serviceData.title || "diese Behandlung" }} erfahren →
+            </a>
+          </template>
+        </ServiceSummary>
+      </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: long German copy and unbroken compound words in every field, a long " +
+          "German price prefix, a very long duration and price (their pills cap at the column width and end in an ellipsis), " +
+          "emoji, HTML-like text (must render as text), an unbroken URL, right-to-left Arabic, a broken image, single characters, " +
+          "and a summary with every text field empty (no empty eyebrow, heading, pills or body is rendered, and a section root " +
+          "drops its aria-labelledby). Check at every canvas width, in both column orders: no text runs out of its column, " +
+          "the two columns stay balanced and stack on narrow canvases. Try the Body line clamp control too: it's a CSS token " +
+          "set by the story, not a prop.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/services/service-summary/tests/ServiceSummary.spec.ts

@@ -207,4 +207,30 @@ describe("ServiceSummary", () => {
     expect(wrapper.classes()).not.toContain("original");
     expect(wrapper.classes()).toContain("updated");
   });
+
+  // ─── Worst-case data ───────────────────────────────────────────────────
+
+  it("renders no empty eyebrow, heading, pills or body for empty strings", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: {
+        serviceData: { ...mockService, subtitle: "", title: "", duration: "", price: "", whatIsIt: "" },
+        tag: "section",
+      },
+    });
+    expect(wrapper.find(".eyebrow-text").exists()).toBe(false);
+    expect(wrapper.find(".hero-text").exists()).toBe(false);
+    expect(wrapper.find(".service-summary__pills").exists()).toBe(false);
+    expect(wrapper.find("p.page-body-normal").exists()).toBe(false);
+    expect(wrapper.attributes("aria-labelledby")).toBeUndefined();
+  });
+
+  it("uses pricePrefix for the price pill, and shows the price alone when it is empty", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, pricePrefix: "Ab" },
+    });
+    expect(wrapper.text()).toContain(`Ab ${mockService.price}`);
+    await wrapper.setProps({ pricePrefix: "" });
+    const labels = wrapper.findAll(".display-pill-label").map((label) => label.element.textContent);
+    expect(labels).toContain(mockService.price);
+  });
 });