srcdev-nuxt-components 9.5.6 → 9.6.0

package/app/components/02.molecules/opening-hours/OpeningHours.vue

@@ -21,10 +21,12 @@
           <template v-if="row.status === 'open'">
             <span v-for="(session, index) in row.sessions" :key="index" class="opening-hours__session">
               <span v-if="session.label" class="opening-hours__session-label">{{ session.label }}</span>
-              <time :datetime="session.opens">{{ formatTime(session.opens) }}</time>
-              <span aria-hidden="true"> – </span>
-              <span class="sr-only"> {{ toLabel }} </span>
-              <time :datetime="session.closes">{{ formatTime(session.closes) }}</time>
+              <span class="opening-hours__session-times">
+                <time :datetime="session.opens">{{ formatTime(session.opens) }}</time>
+                <span aria-hidden="true"> – </span>
+                <span class="sr-only"> {{ toLabel }} </span>
+                <time :datetime="session.closes">{{ formatTime(session.closes) }}</time>
+              </span>
             </span>
           </template>
           <span v-else class="opening-hours__status">{{ statusLabel(row.status) }}</span>
@@ -61,10 +63,12 @@
             <template v-if="row.status === 'open'">
               <span v-for="(session, index) in row.sessions" :key="index" class="opening-hours__session">
                 <span v-if="session.label" class="opening-hours__session-label">{{ session.label }}</span>
-                <time :datetime="session.opens">{{ formatTime(session.opens) }}</time>
-                <span aria-hidden="true"> – </span>
-                <span class="sr-only"> {{ toLabel }} </span>
-                <time :datetime="session.closes">{{ formatTime(session.closes) }}</time>
+                <span class="opening-hours__session-times">
+                  <time :datetime="session.opens">{{ formatTime(session.opens) }}</time>
+                  <span aria-hidden="true"> – </span>
+                  <span class="sr-only"> {{ toLabel }} </span>
+                  <time :datetime="session.closes">{{ formatTime(session.closes) }}</time>
+                </span>
               </span>
             </template>
             <span v-else class="opening-hours__status">{{ statusLabel(row.status) }}</span>
@@ -138,29 +142,35 @@ watch(
 const todayIso = ref<string | null>(null);
 
 onMounted(() => {
-  todayIso.value = new Intl.DateTimeFormat("en-CA", {
-    timeZone: props.timeZone,
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-  }).format(new Date());
+  const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
+  let formatter: Intl.DateTimeFormat;
+  try {
+    formatter = new Intl.DateTimeFormat("en-CA", { ...options, timeZone: props.timeZone });
+  } catch {
+    formatter = new Intl.DateTimeFormat("en-CA", options);
+  }
+  todayIso.value = formatter.format(new Date());
 });
 
-const parseIsoDate = (iso: string) => {
-  const [y = 0, m = 1, d = 1] = iso.split("-").map(Number);
-  return new Date(Date.UTC(y, m - 1, d));
-};
+const todayWeekday = computed<OpeningWeekday | null>(() => {
+  const today = todayIso.value ? parseOpeningDate(todayIso.value) : null;
+  return today ? (((today.getUTCDay() + 6) % 7) as OpeningWeekday) : null;
+});
 
-const todayWeekday = computed<OpeningWeekday | null>(() =>
-  todayIso.value ? (((parseIsoDate(todayIso.value).getUTCDay() + 6) % 7) as OpeningWeekday) : null
-);
+const safeLocale = computed(() => {
+  try {
+    return Intl.getCanonicalLocales(props.locale)[0] ?? "en-GB";
+  } catch {
+    return "en-GB";
+  }
+});
 
 const dayFormatter = computed(
-  () => new Intl.DateTimeFormat(props.locale, { weekday: props.dayFormat, timeZone: "UTC" })
+  () => new Intl.DateTimeFormat(safeLocale.value, { weekday: props.dayFormat, timeZone: "UTC" })
 );
 const timeFormatter = computed(
   () =>
-    new Intl.DateTimeFormat(props.locale, {
+    new Intl.DateTimeFormat(safeLocale.value, {
       hour: props.hour12 ? "numeric" : "2-digit",
       minute: "2-digit",
       hour12: props.hour12,
@@ -168,15 +178,20 @@ const timeFormatter = computed(
     })
 );
 const dateFormatter = computed(
-  () => new Intl.DateTimeFormat(props.locale, { day: "numeric", month: "long", timeZone: "UTC" })
+  () => new Intl.DateTimeFormat(safeLocale.value, { day: "numeric", month: "long", timeZone: "UTC" })
 );
 
 // 1 Jan 2024 was a Monday
 const dayName = (day: OpeningWeekday) => dayFormatter.value.format(new Date(Date.UTC(2024, 0, 1 + day)));
 
 const formatTime = (time: string) => {
-  const [h = 0, m = 0] = time.split(":").map(Number);
-  return timeFormatter.value.format(new Date(Date.UTC(2024, 0, 1, h, m)));
+  const parsed = parseOpeningTime(time);
+  return parsed ? timeFormatter.value.format(new Date(Date.UTC(2024, 0, 1, parsed.hours, parsed.minutes))) : time;
+};
+
+const formatDate = (iso: string) => {
+  const date = parseOpeningDate(iso);
+  return date ? dateFormatter.value.format(date) : iso;
 };
 
 const statusLabel = (status: OpeningStatus) => {
@@ -225,21 +240,22 @@ const weeklyRows = computed(() => {
 
 const exceptionRows = computed(() =>
   props.exceptions
-    .filter((exception) => !(props.hidePastExceptions && todayIso.value && (exception.to ?? exception.from) < todayIso.value))
-    .map((exception) => {
-      const to = exception.to && exception.to !== exception.from ? exception.to : null;
+    .filter((exception) => {
+      const last = exception.to && exception.to > exception.from ? exception.to : exception.from;
+      return !(props.hidePastExceptions && todayIso.value && last < todayIso.value);
+    })
+    .map((exception, index) => {
+      const [from, rawTo] =
+        exception.to && exception.to < exception.from ? [exception.to, exception.from] : [exception.from, exception.to];
+      const to = rawTo && rawTo !== from ? rawTo : null;
       return {
-        key: `${exception.from}-${to ?? ""}`,
+        key: `${index}-${from}-${to ?? ""}`,
         label: exception.label,
-        from: exception.from,
+        from,
         to,
-        start: dateFormatter.value.format(parseIsoDate(exception.from)),
-        end: to ? dateFormatter.value.format(parseIsoDate(to)) : null,
-        isToday:
-          props.highlightToday &&
-          todayIso.value !== null &&
-          exception.from <= todayIso.value &&
-          todayIso.value <= (to ?? exception.from),
+        start: formatDate(from),
+        end: to ? formatDate(to) : null,
+        isToday: props.highlightToday && todayIso.value !== null && from <= todayIso.value && todayIso.value <= (to ?? from),
         ...resolve(exception),
       };
     })
@@ -269,6 +285,7 @@ if (props.structuredData) {
     gap: var(--opening-hours-section-gap, 3.2rem);
 
     .opening-hours__exceptions-heading {
+      overflow-wrap: anywhere;
       font-size: var(--opening-hours-exceptions-heading-font-size, 1.6rem);
       font-weight: var(--opening-hours-exceptions-heading-font-weight, 600);
       margin: 0 0 var(--opening-hours-exceptions-heading-margin-block-end, 1.2rem);
@@ -279,10 +296,10 @@ if (props.structuredData) {
       padding: 0;
 
       .opening-hours__row {
-        display: flex;
-        justify-content: space-between;
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) fit-content(var(--opening-hours-hours-max-inline-size, 60%));
         align-items: baseline;
-        gap: var(--opening-hours-row-gap, 1.2rem);
+        column-gap: var(--opening-hours-row-gap, 1.2rem);
         padding-block: var(--opening-hours-row-padding-block, 1.2rem);
         padding-inline: var(--opening-hours-row-padding-inline, 0);
         border-block-end: var(--opening-hours-divider-width, 1px) solid
@@ -308,12 +325,17 @@ if (props.structuredData) {
       }
 
       .opening-hours__days {
+        overflow-wrap: anywhere;
         font-size: var(--opening-hours-day-font-size, 1.4rem);
         color: var(--opening-hours-day-colour, inherit);
       }
 
       .opening-hours__exception-label {
-        display: block;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        -webkit-line-clamp: var(--opening-hours-exception-label-line-clamp, none);
+        line-clamp: var(--opening-hours-exception-label-line-clamp, none);
       }
 
       .opening-hours__date {
@@ -329,11 +351,12 @@ if (props.structuredData) {
         gap: var(--opening-hours-session-gap, 0.4rem);
         margin: 0;
         text-align: end;
+        overflow-wrap: anywhere;
         font-size: var(--opening-hours-hours-font-size, 1.4rem);
         font-variant-numeric: tabular-nums;
       }
 
-      .opening-hours__session {
+      .opening-hours__session-times {
         white-space: nowrap;
       }
 
@@ -343,6 +366,11 @@ if (props.structuredData) {
       }
 
       .opening-hours__note {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        -webkit-line-clamp: var(--opening-hours-note-line-clamp, none);
+        line-clamp: var(--opening-hours-note-line-clamp, none);
         font-size: var(--opening-hours-note-font-size, 1.2rem);
         color: var(--opening-hours-note-colour, inherit);
       }

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 {