srcdev-nuxt-components 9.5.6 → 9.5.7

package/.claude/skills/component-compliance-checklist.md

@@ -13,7 +13,8 @@ skip silently. Notes marked **Existing component** only apply when migrating.
 
 A component passes when its Component Ledger row (`node .claude/component-ledger/build.mjs`, then
 `.claude/component-ledger/audit.json`) shows `score: 5`, a real tier, and `variants`, `legacy_props`,
-`story_args_bug`, `eslint_issues`, `redundant_priv_tokens` and `styling_doc_outdated` all `false`.
+`story_args_bug`, `eslint_issues`, `redundant_priv_tokens`, `styling_doc_outdated` and `missing_stress_story`
+all `false`.
 The ledger can't see items 9, 10, 11 and 14, so check those by hand.
 
 ## The checklist
@@ -131,7 +132,10 @@ The ledger can't see items 9, 10, 11 and 14, so check those by hand.
     covers ellipsis too (`1` is single-line ellipsis). Default it to `none` unless the layout
     clearly needs a cap, and never clamp text that must stay readable (legal or attribution text,
     link text that names its destination). Shape and rules: `theming-component-token-pattern.md`,
-    "Line-clamp tokens". Add a unit test for any logic fix. A component that takes no data or copy
+    "Line-clamp tokens". Give each line-clamp token a Controls-panel select in the stories (set on
+    a wrapper `:style`, stripped from the component's args), labelled as a story-only CSS token so
+    nobody mistakes it for a prop: `storybook-add-story.md`, "Label token controls as story-only".
+    Add a unit test for any logic fix. A component that takes no data or copy
     (e.g. a pure layout wrapper) still gets one with oversized slot content.
 7. **Skill doc** — create or update `.claude/skills/components/<component-name>.md`, following the
    pattern of an existing one. A labelled `<Name>Field` wrapper (or any other wrapper) is documented

package/.claude/skills/components/navigation-items.md

@@ -18,6 +18,7 @@ active-route highlighting, hover indicator).
 | `mainNavigationState` | `ResponsiveHeaderState` | `{ clonedNavLinks: {}, navListVisibility: {}, hasSecondNav: false }` | Shared geometry/visibility state, normally supplied by the parent `ResponsiveHeader` — not something a consumer constructs by hand outside of tests/stories. |
 | `panelVariant` | `"modern" \| "classic"` | `"classic"` | Which panel component renders a dropdown's submenu: `ExpandingPanel` (`"modern"`) or `ExpandingPanelClassic` (`"classic"`, default). `"modern"` is known not to work correctly on WebKit. Normally set via `ResponsiveHeader`'s own `panelVariant` prop rather than directly. See CLAUDE.md pitfall #19. |
 | `ariaLabel` | `string` | `"Overflow navigation menu"` | aria-label on the root `role="menu"` element — override for localisation. Normally set via `ResponsiveHeader`'s own `overflowMenuAriaLabel` prop rather than directly. |
+| `submenuAriaLabel` | `string` | `"{title} submenu"` | aria-label on each submenu summary; `{title}` is replaced with `childLinksTitle` (or `name`). Normally set via `ResponsiveHeader`'s `submenuAriaLabel`. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.overflow-navigation-wrapper` element. |
 
 ---

package/.claude/skills/components/opening-hours.md

@@ -78,6 +78,18 @@ earlier than `opens` means the session runs past midnight and is displayed as gi
 - Grouping compares status, sessions and note; only **consecutive** days (in `week-starts-on`
   order) group. No wrap-around from Sunday to Monday.
 - Exceptions don't alter the weekly table; they are listed separately.
+- **Bad data never throws** (since 2026-10-05): a time that isn't a valid `HH:MM` from `00:00` to
+  `23:59` (e.g. `"abc"`, `"25:99"`, `"24:00"`) and an exception date that isn't a real
+  `YYYY-MM-DD` are shown exactly as written. An invalid `locale` falls back to `en-GB`, and an
+  invalid `timeZone` to the browser's own. An exception whose `to` is before its `from` is shown
+  the right way round, and duplicate exception dates both render. The checks are the
+  auto-imported `parseOpeningTime` and `parseOpeningDate` utils (`app/utils/opening-hours.ts`).
+- A session that closes after midnight (`22:00`–`02:00`) displays as written; schema.org reads
+  `closes` before `opens` as the next day.
+- `status: "open"` with no sessions is treated as closed (since 2026-10-05): the row shows
+  `closedLabel`, gets `data-status="closed"`, and structured data treats it as closed too.
+- Long text wraps rather than overflowing; notes and exception labels have line-clamp tokens
+  (`CONSUMER-STYLING.md`). The `StressTest` story covers the worst-case data.
 - Today's highlight and past-exception hiding run in `onMounted`, never on the server, so cached
   HTML can't carry a stale day. Past exceptions are briefly visible before hydration.
 - **Structured data**: emits `{ "@type": structuredData.type ?? "LocalBusiness", "@id", name,

package/.claude/skills/components/price-list.md

@@ -4,7 +4,8 @@
 
 `PriceList` (`app/components/02.molecules/price-list/`) renders a service/menu-style price list:
 one or more columns, each with a heading (optional icon) and a `<dl>` of description/price rows.
-Columns stack below `48em` and sit two-up above it. Not a SaaS plan comparison, use `PricingCard`
+Columns stack in a narrow container and sit two-up once the component itself is wide enough
+(a container-width grid since 2026-10-05, not a viewport media query). Not a SaaS plan comparison, use `PricingCard`
 for that.
 
 ---
@@ -48,6 +49,8 @@ No slots, no events.
 - Column titles are `HeroText` headings at `heading-tag`. Prices are plain `<span>`s inside `<dd>`,
   not headings (before 2026-09-27 each price was an `<h2>`, which flooded the heading outline).
 - Rows are `<div>`-wrapped `<dt>`/`<dd>` pairs, valid inside `<dl>`.
+- A column with an empty `headingtext` renders no heading at all (no empty `<h2>`); its rows still
+  render.
 
 ---
 
@@ -57,6 +60,12 @@ All tokens are `--price-list-*`; full table in `CONSUMER-STYLING.md` next to the
 Common ones: `--price-list-divider-colour`, `--price-list-divider-opacity`,
 `--price-list-price-font-size`, `--price-list-heading-margin-block-end`.
 
+Layout and long data: `--price-list-column-min-inline-size` (`32rem`) and `--price-list-max-columns`
+(`2`) control when columns sit side by side; `--price-list-price-max-inline-size` (`50%`) caps the
+price so a long price wraps instead of crushing the description; `--price-list-description-line-clamp`
+(`none`) caps description lines. Unbroken strings wrap anywhere. The `StressTest` story covers the
+worst-case data.
+
 ---
 
 ## Usage

package/.claude/skills/components/responsive-header.md

@@ -110,8 +110,33 @@ buggy toggle-based version too.
 | `mainNavAriaLabel` | `string` | `"Main navigation"` | aria-label on the primary nav landmark — override for localisation. |
 | `secondaryNavAriaLabel` | `string` | `"Secondary navigation"` | aria-label on the secondary (overflow) nav landmark — override for localisation. |
 | `overflowMenuAriaLabel` | `string` | `"Overflow navigation menu"` | Forwarded to `NavigationItems`' `ariaLabel` — override for localisation. |
+| `overflowButtonLabel` | `string` | `"More navigation"` | Accessible name of the overflow/burger button, which shows only icons. |
+| `submenuAriaLabel` | `string` | `"{title} submenu"` | aria-label on each dropdown summary, top bar and overflow panel; `{title}` is replaced with `childLinksTitle` (or `name`). Forwarded to `NavigationItems`. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.navigation` element. |
 
+## Data edge cases (since 2026-10-05)
+
+- A dropdown with no `childLinksTitle` shows its `name` instead (it used to render an empty
+  summary labelled "undefined submenu").
+- Child links are keyed by index, so duplicate names are fine.
+- The overflow button appears whenever any item is hidden, whatever the group keys are called.
+  It used to read `navListVisibility.firstNav`/`secondNav` only, so a group named anything else
+  (e.g. `main`) kept the burger showing even when everything fitted. Empty nav data never shows
+  it, and still completes the geometry pass.
+- The top-bar dropdown and the overflow panel are capped in width and height (tokens in
+  `CONSUMER-STYLING.md`); long names wrap and long lists scroll inside them.
+- **Fit check (fixed 2026-10-05):** an item is visible when its right edge is at or before the main
+  nav's own measured right edge (which already has the secondary nav and gap reserved as
+  `margin-inline-end`). It used to compare against the wrapper while adding the gap a second time
+  with a strict `<`, so the last item of a flush-right second group (e.g. "Contact") was always
+  sent to the overflow menu, however wide the screen.
+- The component copies `responsiveNavLinks` before measuring. It used to write each item's
+  `config` straight into the consumer's own nav data object.
+- The `StressTest` story covers all of the above.
+- **Alignment (added 2026-10-05):** `--responsive-header-main-nav-justify-content`
+  (default `space-between`) sets how the main nav's groups sit along the bar; use `safe end` /
+  `safe center`, never plain `end`/`center`. The `MainNavAlignment` story shows the options.
+
 ## Slots
 
 | Slot | Purpose |

package/.claude/skills/components/site-header.md

@@ -27,6 +27,8 @@ Branding (logo/wordmark) is entirely consumer-authored via the `#branding` slot
 | `mainNavAriaLabel` | `string` | `"Main navigation"` | Forwarded to `ResponsiveHeader`'s `mainNavAriaLabel` — override for localisation. |
 | `secondaryNavAriaLabel` | `string` | `"Secondary navigation"` | Forwarded to `ResponsiveHeader`'s `secondaryNavAriaLabel` — override for localisation. |
 | `overflowMenuAriaLabel` | `string` | `"Overflow navigation menu"` | Forwarded to `ResponsiveHeader`'s `overflowMenuAriaLabel` — override for localisation. |
+| `overflowButtonLabel` | `string` | `"More navigation"` | Forwarded to `ResponsiveHeader`'s `overflowButtonLabel`, the burger button's accessible name. |
+| `submenuAriaLabel` | `string` | `"{title} submenu"` | Forwarded to `ResponsiveHeader`'s `submenuAriaLabel`; `{title}` is replaced with the item's title. |
 
 ---
 

package/.claude/skills/storybook-add-story.md

@@ -271,6 +271,20 @@ Key points:
 - Extra args must be stripped before `v-bind` — spreading unknown keys onto a component makes them unknown HTML attributes.
 - CSS custom properties set via `:style` on the component root are picked up by `var()` in the component's scoped CSS.
 
+### Label token controls as story-only
+
+A control that drives a CSS token (a line clamp, a colour) looks exactly like a prop in the
+Controls panel and the generated docs table, so a developer reading the story can assume it's a
+prop and try to pass it. Make it unmistakable:
+
+- Put it in the category `"CSS tokens (story only, set in your CSS)"`.
+- Start the description with `**Story control, not a prop.**`, name the token, and show the CSS a
+  consumer would write instead, e.g.
+  `` `.salon-menu { --price-list-description-line-clamp: 2; }` ``.
+- If a story's docs text tells people to try the control, say there too that it's a CSS token.
+
+`PriceList.stories.ts` and `GoogleReviews.stories.ts` (line-clamp controls) follow this.
+
 ## Notes
 
 - **Colour scheme:** `.storybook/preview.ts` pins every story to the light scheme

package/.vscode/srcdev-component-responsive-header.code-snippets

@@ -24,7 +24,9 @@
       "  main-nav-aria-label=\"${2:Main navigation}\"",
       "  secondary-nav-aria-label=\"${3:Secondary navigation}\"",
       "  overflow-menu-aria-label=\"${4:Overflow navigation menu}\"",
-      "/>"
+      "  overflow-button-label=\"${5:More navigation}\"",
+      "  submenu-aria-label=\"${6:{title\\} submenu}\"",
+      "></ResponsiveHeader>"
     ]
   },
   "SRCDEV ResponsiveHeader Nav Data (with dropdown)": {

package/.vscode/srcdev-component-site-header.code-snippets

@@ -40,9 +40,11 @@
       "  main-nav-aria-label=\"${3:Main navigation}\"",
       "  secondary-nav-aria-label=\"${4:Secondary navigation}\"",
       "  overflow-menu-aria-label=\"${5:Overflow navigation menu}\"",
+      "  overflow-button-label=\"${6:More navigation}\"",
+      "  submenu-aria-label=\"${7:{title\\} submenu}\"",
       ">",
       "  <template #branding>",
-      "    <NuxtLink to=\"/\" class=\"home-link\">$6Brand</NuxtLink>",
+      "    <NuxtLink to=\"/\" class=\"home-link\">$8Brand</NuxtLink>",
       "  </template>",
       "</SiteHeader>"
     ]

package/app/components/02.molecules/opening-hours/CONSUMER-STYLING.md

@@ -25,6 +25,7 @@ deliberately matches `PriceList`.
 | `--opening-hours-day-font-size` | `1.4rem` | Day name / exception label size |
 | `--opening-hours-day-colour` | `inherit` | Day name / exception label colour |
 | `--opening-hours-hours-font-size` | `1.4rem` | Times and status text size |
+| `--opening-hours-hours-max-inline-size` | `60%` | Most of the row the hours column can take. Longer content (long session labels, notes, status labels) wraps inside it |
 | `--opening-hours-closed-colour` | `inherit` | Hours colour on closed rows |
 
 ### Sessions and notes
@@ -36,6 +37,9 @@ deliberately matches `PriceList`.
 | `--opening-hours-session-label-colour` | `inherit` | Session label colour |
 | `--opening-hours-note-font-size` | `1.2rem` | Note size |
 | `--opening-hours-note-colour` | `inherit` | Note colour |
+| `--opening-hours-note-line-clamp` | `none` | Cap notes at this many lines, with an ellipsis on the last. `1` is single-line ellipsis, `none` shows everything |
+
+Each session's times stay on one line; a long session label wraps before them.
 
 ### Today
 
@@ -54,8 +58,13 @@ deliberately matches `PriceList`.
 | `--opening-hours-exceptions-heading-margin-block-end` | `1.2rem` | Space below the exceptions heading |
 | `--opening-hours-date-font-size` | `1.2rem` | Exception date size |
 | `--opening-hours-date-colour` | `inherit` | Exception date colour |
+| `--opening-hours-exception-label-line-clamp` | `none` | Cap exception labels at this many lines. `1` is single-line ellipsis, `none` shows everything |
+
+There are no private `--_` tokens. Long unbroken text anywhere in the component wraps rather than overflowing.
 
-There are no private `--_` tokens.
+> **Changed 2026-10-05**: rows are a grid instead of a flex row, so the day column can shrink and
+> the hours column is capped by `--opening-hours-hours-max-inline-size`. `.opening-hours__session`
+> is no longer `nowrap`; the new `.opening-hours__session-times` wrapper is.
 
 ---
 
@@ -77,6 +86,7 @@ Inner element classes, safe to target:
 | `.opening-hours__hours` | `<dd>` |
 | `.opening-hours__session` | One opening session |
 | `.opening-hours__session-label` | Session label ("Lunch") |
+| `.opening-hours__session-times` | The opens–closes pair, kept on one line |
 | `.opening-hours__status` | "Closed" / "Open 24 hours" / "By appointment only" |
 | `.opening-hours__note` | Per-day or per-exception note |
 | `.opening-hours__exceptions` | Exceptions wrapper |

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