srcdev-nuxt-components 9.5.5 → 9.5.7

package/app/components/02.molecules/opening-hours/stories/OpeningHours.stories.ts

@@ -1,7 +1,19 @@
+import { computed, ref } from "vue";
 import OpeningHours from "../OpeningHours.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { MediaCanvas } from "~/types/components";
 import type { OpeningDay, OpeningException } from "~/types/components/opening-hours";
 
+type LineClamp = "none" | "1" | "2" | "3" | "4";
+const lineClampOptions: LineClamp[] = ["none", "1", "2", "3", "4"];
+
+// Story-only args: they drive CSS tokens, not OpeningHours props. See the argTypes entries.
+type StoryArgs = InstanceType<typeof OpeningHours>["$props"] & {
+  noteLineClamp: LineClamp;
+  exceptionLabelLineClamp: LineClamp;
+};
+
 const shopDays: OpeningDay[] = [
   { day: 0, sessions: [{ opens: "09:00", closes: "17:30" }] },
   { day: 1, sessions: [{ opens: "09:00", closes: "17:30" }] },
@@ -38,10 +50,27 @@ const exceptions: OpeningException[] = [
   { from: isoInDays(30), label: "Bank holiday", sessions: [{ opens: "10:00", closes: "16:00" }] },
 ];
 
-const meta: Meta<typeof OpeningHours> = {
+const meta: Meta<StoryArgs> = {
   title: "Molecules/OpeningHours",
   component: OpeningHours,
   argTypes: {
+    noteLineClamp: {
+      control: "select",
+      options: lineClampOptions,
+      description:
+        "**Story control, not a prop.** Sets the `--opening-hours-note-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. `.shop-hours { --opening-hours-note-line-clamp: 2; }`. " +
+        "`1` is single-line ellipsis, `none` (the default) shows everything.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "none" } },
+    },
+    exceptionLabelLineClamp: {
+      control: "select",
+      options: lineClampOptions,
+      description:
+        "**Story control, not a prop.** Sets the `--opening-hours-exception-label-line-clamp` CSS token on a wrapper. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.shop-hours { --opening-hours-exception-label-line-clamp: 1; }`.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "none" } },
+    },
     days: { control: "object", description: "One entry per day (0 = Monday); missing days are closed", table: { category: "Content" } },
     exceptions: { control: "object", description: "Special dates that override the weekly pattern", table: { category: "Content" } },
     locale: { control: "text", description: "BCP 47 locale for day, date and time formatting", table: { category: "Formatting", defaultValue: { summary: "en-GB" } } },
@@ -61,18 +90,53 @@ const meta: Meta<typeof OpeningHours> = {
     structuredData: { control: false, table: { category: "SEO" } },
     styleClassPassthrough: { control: "object", table: { category: "Styling" } },
   },
-  decorators: [() => ({ template: `<div style="max-width: 48rem;"><story /></div>` })],
+  args: {
+    noteLineClamp: "none",
+    exceptionLabelLineClamp: "none",
+  },
+  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;">
+          <div style="max-width: 48rem;"><story /></div>
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof OpeningHours>;
+type Story = StoryObj<StoryArgs>;
 
-const render: Story["render"] = (args) => ({
+function useStorySetup(args: StoryArgs) {
+  const componentArgs = computed(() => {
+    const { noteLineClamp: _noteLineClamp, exceptionLabelLineClamp: _exceptionLabelLineClamp, ...rest } = args;
+    return rest;
+  });
+  const tokenStyles = computed(() => ({
+    "--opening-hours-note-line-clamp": args.noteLineClamp,
+    "--opening-hours-exception-label-line-clamp": args.exceptionLabelLineClamp,
+  }));
+  return { componentArgs, tokenStyles };
+}
+
+const render = (args: StoryArgs) => ({
   components: { OpeningHours },
   setup() {
-    return { args };
+    return useStorySetup(args);
   },
-  template: `<OpeningHours v-bind="args" />`,
+  template: `<div :style="tokenStyles"><OpeningHours v-bind="componentArgs" /></div>`,
 });
 
 export const Default: Story = {
@@ -125,3 +189,71 @@ export const Localised: Story = {
   },
   render,
 };
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+const stressDays: OpeningDay[] = [
+  {
+    day: 0,
+    sessions: [
+      { opens: "09:00", closes: "12:00", label: "Vormittagssprechstunde nur für Bestandskundinnen und Bestandskunden" },
+      { opens: "13:00", closes: "17:30", label: "Nachmittagssprechstundeohneleerzeichenunddasziemlichlang" },
+    ],
+    note: "Bitte beachten Sie, dass wir an diesem Tag zusätzlich telefonisch erreichbar sind, Rückrufe aber erst ab dem nächsten Werktag erfolgen.",
+  },
+  { day: 1, sessions: [{ opens: "22:00", closes: "02:00", label: "Overnight" }], note: "Closes after midnight" },
+  { day: 2, sessions: [{ opens: "abc", closes: "25:99" }], note: "Malformed times are shown as written" },
+  {
+    day: 3,
+    sessions: Array.from({ length: 6 }, (_, i) => ({ opens: `${String(8 + i * 2).padStart(2, "0")}:00`, closes: `${String(9 + i * 2).padStart(2, "0")}:00` })),
+  },
+  { day: 4, status: "open", sessions: [], note: "Status open with no sessions, shown as closed" },
+  { day: 5, status: "by-appointment", note: "💇‍♀️ <b>not bold</b> https://example.com/a/very/long/booking/link/that/never/breaks/segmentsegment" },
+  { day: 6, status: "24-hours", note: "مفتوح طوال اليوم" },
+];
+
+const stressExceptions: OpeningException[] = [
+  {
+    from: isoInDays(1),
+    label: "Betriebsversammlungundinventurwochenendeohneleerzeichen und danach noch eine sehr lange Beschreibung",
+    sessions: [{ opens: "10:00", closes: "12:00" }],
+  },
+  { from: isoInDays(20), to: isoInDays(18), label: "Reversed range (to before from)" },
+  { from: isoInDays(5), label: "Duplicate date" },
+  { from: isoInDays(5), label: "Duplicate date" },
+  { from: "not-a-date", label: "Invalid date" },
+  { from: isoInDays(40), label: "" },
+];
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    days: stressDays,
+    exceptions: stressExceptions,
+    hidePastExceptions: false,
+    groupDays: true,
+    locale: "not a locale!!",
+    timeZone: "Mars/Base",
+    exceptionsHeading: "Sonderöffnungszeiten an Feiertagen, Brückentagen und während betrieblicher Veranstaltungen",
+    closedLabel: "Geschlossen",
+    open24HoursLabel: "Rund um die Uhr geöffnet, auch an Sonn- und Feiertagen",
+    byAppointmentLabel: "Ausschließlich nach vorheriger telefonischer Terminvereinbarung",
+    toLabel: "bis",
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Deliberately hostile data to find breakage: an invalid locale (falls back to en-GB) and time zone (falls back to the browser's), " +
+          "malformed times like abc and 25:99 (shown as written, not reformatted), a session crossing midnight, six sessions in a day, " +
+          "status open with no sessions (shown as closed), long German session labels, notes, status labels and exceptions heading, an unbroken exception label, " +
+          "emoji, HTML-like text (must render as text), a long URL, right-to-left Arabic, a reversed date range (shown the right way round), " +
+          "duplicate exception dates, an invalid date (shown as written) and an empty label. " +
+          "Check at every canvas width: nothing overflows, each session's times stay on one line while its label wraps, and the hours " +
+          "column never takes more than 60% of the row. Try the line-clamp controls too: they're CSS tokens set by the story, not props.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/opening-hours/tests/OpeningHours.spec.ts

@@ -200,6 +200,59 @@ describe("OpeningHours", () => {
       wrapper = await createWrapper();
       expect(wrapper.find(".opening-hours__exceptions").exists()).toBe(false);
     });
+
+    it("swaps a range whose to is before from", async () => {
+      vi.setSystemTime(new Date("2026-12-25T12:00:00Z"));
+      wrapper = await createWrapper({ exceptions: [{ from: "2026-12-26", to: "2026-12-24", label: "Reversed" }] });
+      await nextTick();
+      expect(rowTexts(wrapper, ".opening-hours__exceptions")).toEqual(["Reversed 24 December – to 26 December Closed"]);
+      expect(wrapper.find(".opening-hours__exceptions .opening-hours__row").attributes("data-today")).toBe("true");
+    });
+
+    it("renders duplicate exceptions without key clashes", async () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      vi.setSystemTime(new Date("2026-09-27T12:00:00Z"));
+      wrapper = await createWrapper({ exceptions: [{ from: "2026-12-25" }, { from: "2026-12-25" }] });
+      await nextTick();
+      expect(wrapper.find(".opening-hours__exceptions").findAll(".opening-hours__row").length).toBe(2);
+      expect(warn.mock.calls.some(([msg]) => String(msg).includes("Duplicate keys"))).toBe(false);
+      warn.mockRestore();
+    });
+  });
+
+  describe("Bad data", () => {
+    it("shows an unparseable or out-of-range time as written instead of throwing", async () => {
+      wrapper = await createWrapper({ days: [{ day: 0, sessions: [{ opens: "abc", closes: "25:99" }] }], groupDays: false });
+      expect(rowTexts(wrapper)[0]).toBe("Monday abc – to 25:99");
+    });
+
+    it("shows an invalid exception date as written instead of throwing", async () => {
+      wrapper = await createWrapper({
+        exceptions: [{ from: "not-a-date", label: "Bad" }],
+        hidePastExceptions: false,
+      });
+      await nextTick();
+      expect(rowTexts(wrapper, ".opening-hours__exceptions")).toEqual(["Bad not-a-date Closed"]);
+    });
+
+    it("shows the closed label for status open with no sessions", async () => {
+      wrapper = await createWrapper({ days: [{ day: 0, status: "open", sessions: [] }], groupDays: false });
+      const row = wrapper.find(".opening-hours__row");
+      expect(row.attributes("data-status")).toBe("closed");
+      expect(row.find(".opening-hours__status").text()).toBe("Closed");
+    });
+
+    it("falls back to en-GB for an invalid locale", async () => {
+      wrapper = await createWrapper({ locale: "not a locale!!" });
+      expect(rowTexts(wrapper)[0]).toBe("Monday – to Saturday 09:00 – to 17:30");
+    });
+
+    it("still mounts with an invalid timeZone", async () => {
+      vi.setSystemTime(new Date("2026-09-28T12:00:00Z"));
+      wrapper = await createWrapper({ timeZone: "Mars/Base" });
+      await nextTick();
+      expect(wrapper.find("[data-today]").exists()).toBe(true);
+    });
   });
 
   describe("Accessibility", () => {

package/app/components/02.molecules/opening-hours/tests/__snapshots__/OpeningHours.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`OpeningHours > Snapshots > default 1`] = `
   <dl class="opening-hours__list">
     <div class="opening-hours__row" data-status="open" data-today="true" aria-current="date">
       <dt class="opening-hours__days"><span>Monday</span><span aria-hidden="true"> – </span><span class="sr-only">to</span><span>Saturday</span></dt>
-      <dd class="opening-hours__hours"><span class="opening-hours__session"><!--v-if--><time datetime="09:00">09:00</time><span aria-hidden="true"> – </span><span class="sr-only">to</span><time datetime="17:30">17:30</time></span>
+      <dd class="opening-hours__hours"><span class="opening-hours__session"><!--v-if--><span class="opening-hours__session-times"><time datetime="09:00">09:00</time><span aria-hidden="true"> – </span><span class="sr-only">to</span><time datetime="17:30">17:30</time></span></span>
         <!--v-if-->
       </dd>
     </div>

package/app/components/02.molecules/opening-hours/tests/buildOpeningHoursSpecification.spec.ts

@@ -1,5 +1,36 @@
 import { describe, it, expect } from "vitest";
-import { buildOpeningHoursSpecification, resolveOpeningStatus } from "~/utils/opening-hours";
+import {
+  buildOpeningHoursSpecification,
+  parseOpeningDate,
+  parseOpeningTime,
+  resolveOpeningStatus,
+} from "~/utils/opening-hours";
+
+describe("parseOpeningTime", () => {
+  it("parses HH:MM and H:MM", () => {
+    expect(parseOpeningTime("09:30")).toEqual({ hours: 9, minutes: 30 });
+    expect(parseOpeningTime("9:05")).toEqual({ hours: 9, minutes: 5 });
+    expect(parseOpeningTime("23:59")).toEqual({ hours: 23, minutes: 59 });
+  });
+
+  it("rejects malformed and out-of-range times", () => {
+    for (const bad of ["", "abc", "9", "24:00", "25:99", "12:60", "12:3", "-1:00"]) {
+      expect(parseOpeningTime(bad)).toBeNull();
+    }
+  });
+});
+
+describe("parseOpeningDate", () => {
+  it("parses a real YYYY-MM-DD date as UTC midnight", () => {
+    expect(parseOpeningDate("2026-02-28")?.toISOString()).toBe("2026-02-28T00:00:00.000Z");
+  });
+
+  it("rejects malformed and impossible dates", () => {
+    for (const bad of ["", "not-a-date", "2026-13-01", "2026-02-30", "26-01-01", "2026-1-1"]) {
+      expect(parseOpeningDate(bad)).toBeNull();
+    }
+  });
+});
 
 describe("resolveOpeningStatus", () => {
   it("defaults to open with sessions and closed without", () => {
@@ -7,6 +38,11 @@ describe("resolveOpeningStatus", () => {
     expect(resolveOpeningStatus({})).toBe("closed");
     expect(resolveOpeningStatus({ status: "by-appointment" })).toBe("by-appointment");
   });
+
+  it("treats open with no sessions as closed", () => {
+    expect(resolveOpeningStatus({ status: "open" })).toBe("closed");
+    expect(resolveOpeningStatus({ status: "open", sessions: [] })).toBe("closed");
+  });
 });
 
 describe("buildOpeningHoursSpecification", () => {

package/app/components/02.molecules/price-list/CONSUMER-STYLING.md

@@ -2,7 +2,8 @@
 
 `PriceList` renders one or more columns of priced items (a salon/service menu). Each column is a
 `HeroText` heading followed by a `<dl>` of description/price rows separated by dividers. Columns
-stack on narrow viewports and sit two-up from `48em`.
+stack in a narrow container and sit side by side (two at most by default) once the container is
+wide enough for each to reach `--price-list-column-min-inline-size`.
 
 ## Public token API
 
@@ -10,7 +11,17 @@ stack on narrow viewports and sit two-up from `48em`.
 
 | Token | Default | Controls |
 |---|---|---|
-| `--price-list-column-gap` | `2.4rem` | Gap between columns (and between stacked columns on mobile) |
+| `--price-list-column-gap` | `2.4rem` | Gap between columns (and between stacked columns) |
+| `--price-list-column-min-inline-size` | `32rem` | Narrowest a column gets before the columns stack. Measured against the component's own width, not the viewport |
+| `--price-list-max-columns` | `2` | Most columns side by side. A single column still takes only its share of the width (half, by default) |
+
+Private `--_column-gap` and `--_max-columns` hold the two tokens above so the column formula can
+read each twice; they are not public API.
+
+> **Changed 2026-10-05**: the two-column switch used to be a `48em` viewport media query, so a
+> list in a narrow container (a sidebar, a card) stayed two-up and cramped on a wide screen. It now
+> follows the component's own width, set by `--price-list-column-min-inline-size` and
+> `--price-list-max-columns`.
 
 ### Column heading
 
@@ -35,6 +46,7 @@ The heading is a `HeroText`, so `--hero-text-font-family` also applies to it.
 | `--price-list-divider-opacity` | `0.15` | Divider opacity (0 to 1), mixed into the colour |
 | `--price-list-description-font-size` | `1.4rem` | Item description size |
 | `--price-list-description-colour` | `inherit` | Item description colour |
+| `--price-list-description-line-clamp` | `none` | Cap the description at this many lines, with an ellipsis on the last. `1` is single-line ellipsis, `none` shows everything |
 
 ### Price
 
@@ -46,8 +58,9 @@ The heading is a `HeroText`, so `--hero-text-font-family` also applies to it.
 | `--price-list-from-font-size` | `1.4rem` | "from" label size |
 | `--price-list-from-colour` | `inherit` | "from" label colour |
 | `--price-list-from-gap` | `0.5ch` | Space between "from" and the amount |
+| `--price-list-price-max-inline-size` | `50%` | Most of the row the price can take. A price longer than this wraps inside it, right-aligned; normal short prices stay on one line |
 
-There are no private `--_` tokens.
+Long unbroken descriptions, headings and prices wrap anywhere rather than overflow the column.
 
 > **Changed 2026-09-27**: `--price-list-divider-color` is now `--price-list-divider-colour`
 > (repo spelling convention). `--price-list-price-font-size` used to be dead for the amount itself
@@ -74,8 +87,7 @@ No `data-*` attributes. Inner element classes, safe to target:
 | `.price-list__from` | "from" label (only when `item.from` is true) |
 | `.price-list__amount` | Price amount |
 
-The two-column breakpoint (`48em`) is a media query and can't be tokenised; override
-`grid-template-columns` on `.price-list` if you need a different split.
+`.price-list__heading` is not rendered for a column whose `headingtext` is empty.
 
 ---
 

package/app/components/02.molecules/price-list/PriceList.vue

@@ -2,6 +2,7 @@
   <div class="price-list" :class="elementClasses">
     <div v-for="(column, colIndex) in priceListData" :key="colIndex" class="price-list__column">
       <HeroText
+        v-if="column.headingtext"
         :tag="headingTag"
         font-size="subheading"
         :text-content="[{ text: column.headingtext }]"
@@ -49,15 +50,28 @@ watch(
 <style lang="css">
 @layer components {
   .price-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--price-list-column-gap, 2.4rem);
+    --_column-gap: var(--price-list-column-gap, 2.4rem);
+    --_max-columns: var(--price-list-max-columns, 2);
 
-    @media (min-width: 48em) {
-      grid-template-columns: 1fr 1fr;
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(
+        max(
+          min(100%, var(--price-list-column-min-inline-size, 32rem)),
+          calc((100% - (var(--_max-columns) - 1) * var(--_column-gap)) / var(--_max-columns))
+        ),
+        1fr
+      )
+    );
+    gap: var(--_column-gap);
+
+    .price-list__column {
+      min-inline-size: 0;
     }
 
     .price-list__heading.hero-text {
+      overflow-wrap: anywhere;
       font-size: var(--price-list-heading-font-size, var(--hero-text-subheading));
       font-weight: var(--price-list-heading-font-weight, 600);
       color: var(--price-list-heading-colour, inherit);
@@ -75,10 +89,10 @@ watch(
       flex-direction: column;
 
       .price-list__row {
-        display: flex;
-        justify-content: space-between;
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) fit-content(var(--price-list-price-max-inline-size, 50%));
         align-items: center;
-        gap: var(--price-list-row-gap, 1.2rem);
+        column-gap: var(--price-list-row-gap, 1.2rem);
         padding-block: var(--price-list-row-padding-block, 1.4rem);
         border-block-end: var(--price-list-divider-width, 1px) solid
           color-mix(
@@ -93,17 +107,26 @@ watch(
         }
 
         .price-list__description {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          overflow-wrap: anywhere;
+          -webkit-line-clamp: var(--price-list-description-line-clamp, none);
+          line-clamp: var(--price-list-description-line-clamp, none);
           font-size: var(--price-list-description-font-size, 1.4rem);
           color: var(--price-list-description-colour, inherit);
         }
 
         .price-list__price {
           display: flex;
+          flex-wrap: wrap;
+          justify-content: flex-end;
           align-items: baseline;
           gap: var(--price-list-from-gap, 0.5ch);
           margin: 0;
+          text-align: end;
+          overflow-wrap: anywhere;
           font-variant-numeric: tabular-nums;
-          white-space: nowrap;
         }
 
         .price-list__from {

package/app/components/02.molecules/price-list/stories/PriceList.stories.ts

@@ -1,5 +1,8 @@
+import { computed, ref } from "vue";
 import PriceList from "../PriceList.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { MediaCanvas, PriceListData } from "~/types/components";
 
 const priceListData = [
   {
@@ -26,10 +29,26 @@ const priceListData = [
   },
 ];
 
-const meta: Meta<typeof PriceList> = {
+type LineClamp = "none" | "1" | "2" | "3" | "4";
+
+// Story-only arg: drives a CSS token, not a PriceList prop. See the argTypes entry.
+type StoryArgs = InstanceType<typeof PriceList>["$props"] & {
+  descriptionLineClamp: LineClamp;
+};
+
+const meta: Meta<StoryArgs> = {
   title: "Molecules/PriceList",
   component: PriceList,
   argTypes: {
+    descriptionLineClamp: {
+      control: "select",
+      options: ["none", "1", "2", "3", "4"] satisfies LineClamp[],
+      description:
+        "**Story control, not a prop.** Sets the `--price-list-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. `.salon-menu { --price-list-description-line-clamp: 2; }`. " +
+        "`1` is single-line ellipsis, `none` (the default) shows everything.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "none" } },
+    },
     priceListData: {
       control: "object",
       description: "Array of columns, each with a heading and list of items",
@@ -52,10 +71,52 @@ const meta: Meta<typeof PriceList> = {
       table: { category: "Styling" },
     },
   },
+  args: {
+    descriptionLineClamp: "none",
+  },
+  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",
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof PriceList>;
+type Story = StoryObj<StoryArgs>;
+
+function useStorySetup(args: StoryArgs) {
+  const componentArgs = computed(() => {
+    const { descriptionLineClamp: _descriptionLineClamp, ...rest } = args;
+    return rest;
+  });
+  const tokenStyles = computed(() => ({
+    "--price-list-description-line-clamp": args.descriptionLineClamp,
+  }));
+  return { componentArgs, tokenStyles };
+}
+
+const render = (args: StoryArgs) => ({
+  components: { PriceList },
+  setup() {
+    return useStorySetup(args);
+  },
+  template: `<div :style="tokenStyles"><PriceList v-bind="componentArgs" /></div>`,
+});
 
 export const Default: Story = {
   args: {
@@ -64,13 +125,7 @@ export const Default: Story = {
     fromLabel: "from",
     styleClassPassthrough: [],
   },
-  render: (args) => ({
-    components: { PriceList },
-    setup() {
-      return { args };
-    },
-    template: `<PriceList v-bind="args" />`,
-  }),
+  render,
 };
 
 export const SingleColumn: Story = {
@@ -78,13 +133,7 @@ export const SingleColumn: Story = {
   args: {
     priceListData: [priceListData[0]!],
   },
-  render: (args) => ({
-    components: { PriceList },
-    setup() {
-      return { args };
-    },
-    template: `<PriceList v-bind="args" />`,
-  }),
+  render,
 };
 
 export const EmptyState: Story = {
@@ -92,13 +141,7 @@ export const EmptyState: Story = {
   args: {
     priceListData: priceListData.map(({ headingtext, headingIcon }) => ({ headingtext, headingIcon, items: [] })),
   },
-  render: (args) => ({
-    components: { PriceList },
-    setup() {
-      return { args };
-    },
-    template: `<PriceList v-bind="args" />`,
-  }),
+  render,
 };
 
 export const NoIcons: Story = {
@@ -106,11 +149,64 @@ export const NoIcons: Story = {
   args: {
     priceListData: priceListData.map(({ headingtext, items }) => ({ headingtext, items })),
   },
-  render: (args) => ({
-    components: { PriceList },
-    setup() {
-      return { args };
+  render,
+};
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+const stressPriceListData: PriceListData[] = [
+  {
+    headingtext: "Haarschnitte, Pflegebehandlungen und Kopfhautmassagen für jeden Haartyp und jede Länge",
+    headingIcon: "lucide:sparkles",
+    items: [
+      { description: "Pneumonoultramicroscopicsilicovolcanoconiosisbehandlungohneleerzeichen", price: "£45" },
+      {
+        description: `${"Cut, wash, condition, blow dry and finish with a heat protectant serum. ".repeat(5)}`,
+        price: "£1,234.56 – £9,999.99 pro Sitzung inklusive Beratung",
+        from: true,
+      },
+      { description: "Price with no spaces", price: "£123456789012345678901234567890.00" },
+      { description: "From, but the price is empty", price: "", from: true },
+      { description: "", price: "£10" },
+      { description: "💇‍♀️💅🏽 Emoji first", price: "£0" },
+      { description: "<script>alert('xss')</script> rendered as text &amp; entities", price: "<b>£5</b>" },
+      { description: "قص الشعر وتصفيفه", price: "٤٥ £" },
+      { description: "X", price: "1" },
+      { description: "See https://example.com/a/very/long/path/that/never/breaks/segmentsegmentsegment", price: "-£20" },
+    ],
+  },
+  {
+    headingtext: "",
+    items: Array.from({ length: 30 }, (_, i) => ({ description: `Item ${i + 1} in a column with no heading`, price: `£${(i + 1) * 5}` })),
+  },
+  {
+    headingtext: "Broken icon, no items",
+    headingIcon: "lucide:this-icon-does-not-exist",
+    items: [],
+  },
+];
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    priceListData: stressPriceListData,
+    headingTag: "h2",
+    fromLabel: "ab einem Mindestpreis von",
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Deliberately hostile data to find breakage: a long German heading, unbroken description and price strings, " +
+          "a long price range with a long German 'from' label, a 'from' item with an empty price, an empty description, " +
+          "emoji, HTML-like text (must render as text), right-to-left Arabic, single characters, a negative price, " +
+          "a column with no heading (no empty heading is rendered) and 30 items, a broken icon name, and a column with no items. " +
+          "Check at every canvas width: nothing overflows its column, the price column never takes more than half the row " +
+          "and wraps inside it, columns go two-up only when the container is wide enough, and a third column wraps to a new row. " +
+          "Try the Description line clamp control too: it's a CSS token set by the story, not a prop.",
+      },
     },
-    template: `<PriceList v-bind="args" />`,
-  }),
+  },
 };

package/app/components/02.molecules/price-list/tests/PriceList.spec.ts

@@ -191,6 +191,26 @@ describe("PriceList", () => {
       expect(classes).not.toContain("first-class");
     });
 
+    it("does not render an empty heading when headingtext is empty", async () => {
+      wrapper = await createWrapper([
+        { headingtext: "", items: [{ description: "Cut", price: "£45" }] },
+        { headingtext: "Colour", items: [] },
+      ]);
+      const columns = wrapper.findAll(".price-list__column");
+      expect(columns[0]!.find(".price-list__heading").exists()).toBe(false);
+      expect(columns[0]!.findAll(".price-list__row").length).toBe(1);
+      expect(columns[1]!.find(".price-list__heading").text()).toBe("Colour");
+    });
+
+    it("renders HTML-like text as text", async () => {
+      wrapper = await createWrapper([
+        { headingtext: "Cuts", items: [{ description: "<script>alert(1)</script>", price: "<b>£5</b>" }] },
+      ]);
+      expect(wrapper.find("script").exists()).toBe(false);
+      expect(wrapper.find("dd b").exists()).toBe(false);
+      expect(wrapper.find(".price-list__description").text()).toBe("<script>alert(1)</script>");
+    });
+
     it("does not render a 'from' label when item.from is omitted", async () => {
       wrapper = await createWrapper();
       expect(wrapper.find(".price-list__from").exists()).toBe(false);