srcdev-nuxt-components 9.5.6 → 9.5.7

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);

package/app/components/03.organisms/google-reviews/stories/GoogleReviews.stories.ts

@@ -54,14 +54,19 @@ const meta: Meta<StoryArgs> = {
     authorLineClamp: {
       control: "select",
       options: lineClampOptions,
-      description: "Story control for --google-reviews-author-line-clamp (1 = single-line ellipsis)",
-      table: { category: "CSS tokens" },
+      description:
+        "**Story control, not a prop.** Sets the `--google-reviews-author-line-clamp` CSS token on a wrapper. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.reviews { --google-reviews-author-line-clamp: 1; }`. " +
+        "`1` is single-line ellipsis.",
+      table: { category: "CSS tokens (story only, set in your CSS)" },
     },
     textLineClamp: {
       control: "select",
       options: lineClampOptions,
-      description: "Story control for --google-reviews-text-line-clamp",
-      table: { category: "CSS tokens" },
+      description:
+        "**Story control, not a prop.** Sets the `--google-reviews-text-line-clamp` CSS token on a wrapper. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.reviews { --google-reviews-text-line-clamp: 3; }`.",
+      table: { category: "CSS tokens (story only, set in your CSS)" },
     },
     data: { control: "object", description: "GoogleReviewsData, usually from useGoogleReviews()" },
     minRating: { control: { type: "range", min: 0, max: 5, step: 1 }, description: "Hide reviews below this rating; shows the filter notice" },

package/app/components/03.organisms/responsive-header/CONSUMER-STYLING.md

@@ -11,6 +11,7 @@ are documented alongside it since that's where they're consumed.
 |---|---|---|
 | `--responsive-header-link-font-size` | `inherit` | Nav-link font-size. **Always set this to a fixed value.** Leaving it `inherit` means a fluid ancestor font-size (`clamp()`/`vw`) can drift nav-item text width without ever re-triggering the overflow-collapse measurement — see the component skill doc's "measurement pipeline" section for the full mechanism. |
 | `--responsive-header-link-color` | `inherit` | Link/summary text colour. |
+| `--responsive-header-main-nav-justify-content` | `space-between` | How the main nav's groups are spread along the bar. Use `flex-start`, `safe center` or `safe end`; plain `center`/`end` let items that don't fit spill off the start edge, where they're clipped. (Safari 16 ignores `safe` values and falls back to start alignment.) |
 | `--responsive-header-color` | `inherit` | Root element text colour. |
 | `--responsive-header-margin` | `0` | Root element margin. |
 | `--responsive-header-bg` | `transparent` | Root element background. |
@@ -20,8 +21,21 @@ are documented alongside it since that's where they're consumed.
 | `--responsive-header-max-height` | `none` | Root element max-height. |
 | `--responsive-header-inline-size` | `100%` | Root element inline-size. |
 | `--responsive-header-sub-nav-bg` / `-border` / `-border-radius` / `-padding` | `Canvas` / `1px solid #efefef75` / `8px` / `12px` | Top-bar dropdown panel (`.main-navigation-sub-nav`). |
+| `--responsive-header-sub-nav-max-inline-size` | `min(48rem, calc(100vw - 3.2rem))` | Widest the top-bar dropdown panel gets; long child names wrap inside it. |
+| `--responsive-header-sub-nav-max-block-size` | `70vh` | Tallest the top-bar dropdown panel gets before it scrolls, so a long child list stays reachable under a sticky header. |
 | `--responsive-header-overflow-btn-bg` / `-size` / `-border` / `-outline` / `-icon-color` / `-hover-outline` | `Canvas` / `20px` / `1px solid #ffffff90` / `1px solid #ffffff10` / `inherit` / `1px solid #ffffff` | Overflow burger button. |
 | `--responsive-header-overflow-nav-bg` / `-border` / `-border-radius` / `-padding-block` | `Canvas` / `1px solid #ffffff90` / `8px` / `12px` | Overflow panel container. |
+| `--responsive-header-overflow-nav-max-block-size` | `70vh` | Tallest the overflow panel gets before it scrolls. |
+| `--overflow-nav-max-inline-size` | `calc(100vw - 3.2rem)` | Widest the overflow panel's content gets (set on `NavigationItems`); long names wrap inside it. |
+
+Link and dropdown text is never line-clamped: it names where the link goes. Long unbroken names
+wrap inside the dropdown and overflow panels; in the top bar, an item too wide to fit moves to the
+overflow menu.
+
+> **Changed 2026-10-05**: the dropdown and overflow panels had no maximum size, so a long child
+> name or a long child list ran off-screen. They are now capped by the four tokens above.
+> `--_overflow-drop-down-width`, a private token nothing ever set, is gone (`min-width: fit-content`
+> directly).
 | `--responsive-nav-decorator-indicator-color` | `currentColor` | Active-item indicator bar/underline. |
 | `--responsive-nav-decorator-hovered-indicator-color` | inherits the above | Indicator colour while hovering. |
 | `--responsive-nav-decorator-hovered-bg` | `oklch(100% 0 0 / 8%)` | Hover highlight background behind the hovered item. |