srcdev-nuxt-components 9.4.11 → 9.5.0

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

@@ -0,0 +1,228 @@
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import OpeningHours from "../OpeningHours.vue";
+import type { OpeningDay, OpeningException } from "~/types/components/opening-hours";
+
+const weekdays: OpeningDay[] = [0, 1, 2, 3, 4, 5].map((day) => ({
+  day: day as OpeningDay["day"],
+  sessions: [{ opens: "09:00", closes: "17:30" }],
+}));
+
+const createWrapper = async (props: Record<string, unknown> = {}) =>
+  mountSuspended(OpeningHours, { props: { days: weekdays, ...props } });
+
+const rowTexts = (wrapper: Awaited<ReturnType<typeof createWrapper>>, selector = ".opening-hours__list") =>
+  wrapper
+    .find(selector)
+    .findAll(".opening-hours__row")
+    .map((row) =>
+      row
+        .findAll("*")
+        .filter((node) => node.element.children.length === 0)
+        .map((node) => node.text())
+        .filter(Boolean)
+        .join(" ")
+    );
+
+describe("OpeningHours", () => {
+  let wrapper: Awaited<ReturnType<typeof createWrapper>> | undefined;
+
+  afterEach(() => {
+    wrapper?.unmount();
+  });
+
+  describe("Snapshots", () => {
+    it("default", async () => {
+      vi.setSystemTime(new Date("2026-09-28T12:00:00Z"));
+      wrapper = await createWrapper();
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+
+  describe("Rendering", () => {
+    it("mounts without error", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.vm).toBeTruthy();
+    });
+
+    it("groups consecutive identical days and fills missing days as closed", async () => {
+      wrapper = await createWrapper();
+      expect(rowTexts(wrapper)).toEqual(["Monday – to Saturday 09:00 – to 17:30", "Sunday Closed"]);
+    });
+
+    it("lists every day separately when groupDays is false", async () => {
+      wrapper = await createWrapper({ groupDays: false });
+      expect(wrapper.findAll(".opening-hours__row").length).toBe(7);
+    });
+
+    it("starts the week on Sunday when weekStartsOn is sunday", async () => {
+      wrapper = await createWrapper({ weekStartsOn: "sunday" });
+      expect(rowTexts(wrapper)[0]).toBe("Sunday Closed");
+    });
+
+    it("does not group non-consecutive identical days", async () => {
+      wrapper = await createWrapper({
+        days: [
+          { day: 0, sessions: [{ opens: "09:00", closes: "17:00" }] },
+          { day: 2, sessions: [{ opens: "09:00", closes: "17:00" }] },
+        ],
+      });
+      expect(rowTexts(wrapper).map((row) => row.split(" ")[0])).toEqual(["Monday", "Tuesday", "Wednesday", "Thursday"]);
+    });
+
+    it("renders split sessions with labels", async () => {
+      wrapper = await createWrapper({
+        days: [
+          {
+            day: 0,
+            sessions: [
+              { opens: "12:00", closes: "14:30", label: "Lunch" },
+              { opens: "18:00", closes: "22:00", label: "Dinner" },
+            ],
+          },
+        ],
+      });
+      const sessions = wrapper.find(".opening-hours__row").findAll(".opening-hours__session");
+      expect(sessions.length).toBe(2);
+      expect(sessions[0]!.find(".opening-hours__session-label").text()).toBe("Lunch");
+      expect(sessions[1]!.findAll("time").map((t) => t.attributes("datetime"))).toEqual(["18:00", "22:00"]);
+    });
+
+    it("renders overnight sessions as given", async () => {
+      wrapper = await createWrapper({ days: [{ day: 4, sessions: [{ opens: "18:00", closes: "02:00" }] }] });
+      expect(wrapper.find("[data-status='open'] .opening-hours__hours").text()).toContain("02:00");
+    });
+
+    it("renders 24-hour and by-appointment statuses", async () => {
+      wrapper = await createWrapper({
+        days: [
+          { day: 0, status: "24-hours" },
+          { day: 1, status: "by-appointment" },
+        ],
+      });
+      const statuses = wrapper.findAll(".opening-hours__status").map((s) => s.text());
+      expect(statuses).toEqual(["Open 24 hours", "By appointment only", "Closed"]);
+    });
+
+    it("renders a note", async () => {
+      wrapper = await createWrapper({
+        days: [{ day: 0, sessions: [{ opens: "12:00", closes: "22:00" }], note: "Last orders 21:30" }],
+      });
+      expect(wrapper.find(".opening-hours__note").text()).toBe("Last orders 21:30");
+    });
+  });
+
+  describe("Formatting", () => {
+    it("formats times in 12-hour form when hour12 is true", async () => {
+      wrapper = await createWrapper({ hour12: true, locale: "en-US" });
+      expect(wrapper.find(".opening-hours__session").text()).toMatch(/9:00\sAM.*5:30\sPM/);
+    });
+
+    it("uses short day names when dayFormat is short", async () => {
+      wrapper = await createWrapper({ dayFormat: "short" });
+      expect(wrapper.find(".opening-hours__days").text()).toContain("Mon");
+      expect(wrapper.find(".opening-hours__days").text()).not.toContain("Monday");
+    });
+
+    it("localises day names", async () => {
+      wrapper = await createWrapper({ locale: "fr-FR" });
+      expect(wrapper.find(".opening-hours__days").text()).toContain("lundi");
+    });
+  });
+
+  describe("Labels", () => {
+    it("uses custom labels", async () => {
+      wrapper = await createWrapper({ closedLabel: "Fermé", toLabel: "à" });
+      expect(wrapper.text()).toContain("Fermé");
+      expect(wrapper.find(".opening-hours__session .sr-only").text()).toBe("à");
+    });
+  });
+
+  describe("Today highlight", () => {
+    it("marks the row containing today after mount", async () => {
+      vi.setSystemTime(new Date("2026-09-27T12:00:00Z")); // Sunday
+      wrapper = await createWrapper();
+      await nextTick();
+      const today = wrapper.find("[data-today]");
+      expect(today.text()).toContain("Sunday");
+      expect(today.attributes("aria-current")).toBe("date");
+    });
+
+    it("highlights a grouped row when today falls inside it", async () => {
+      vi.setSystemTime(new Date("2026-09-29T12:00:00Z")); // Tuesday
+      wrapper = await createWrapper();
+      await nextTick();
+      expect(wrapper.find("[data-today]").text()).toContain("Monday");
+    });
+
+    it("does not highlight when highlightToday is false", async () => {
+      wrapper = await createWrapper({ highlightToday: false });
+      await nextTick();
+      expect(wrapper.find("[data-today]").exists()).toBe(false);
+    });
+  });
+
+  describe("Exceptions", () => {
+    const exceptions: OpeningException[] = [
+      { from: "2026-12-25", to: "2026-12-26", label: "Christmas" },
+      { from: "2026-12-31", label: "New Year's Eve", sessions: [{ opens: "10:00", closes: "14:00" }] },
+      { from: "2026-01-01", label: "Past" },
+    ];
+
+    it("renders upcoming exceptions with a heading and hides past ones", async () => {
+      vi.setSystemTime(new Date("2026-09-27T12:00:00Z"));
+      wrapper = await createWrapper({ exceptions });
+      await nextTick();
+      expect(wrapper.find(".opening-hours__exceptions-heading").element.tagName).toBe("H3");
+      const rows = rowTexts(wrapper, ".opening-hours__exceptions");
+      expect(rows).toEqual([
+        "Christmas 25 December – to 26 December Closed",
+        "New Year's Eve 31 December 10:00 – to 14:00",
+      ]);
+    });
+
+    it("keeps past exceptions when hidePastExceptions is false", async () => {
+      vi.setSystemTime(new Date("2026-09-27T12:00:00Z"));
+      wrapper = await createWrapper({ exceptions, hidePastExceptions: false });
+      await nextTick();
+      expect(wrapper.find(".opening-hours__exceptions").findAll(".opening-hours__row").length).toBe(3);
+    });
+
+    it("uses headingTag and omits the heading when exceptionsHeading is empty", async () => {
+      wrapper = await createWrapper({ exceptions, headingTag: "h4" });
+      expect(wrapper.find("h4.opening-hours__exceptions-heading").exists()).toBe(true);
+      await wrapper.setProps({ exceptionsHeading: "" });
+      expect(wrapper.find(".opening-hours__exceptions-heading").exists()).toBe(false);
+    });
+
+    it("does not render the exceptions block without exceptions", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".opening-hours__exceptions").exists()).toBe(false);
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("uses dl/dt/dd and time elements", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.findAll("dt").length).toBe(2);
+      expect(wrapper.findAll("dd").length).toBe(2);
+      expect(wrapper.find("time").attributes("datetime")).toBe("09:00");
+    });
+
+    it("hides the visual dash from assistive tech", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".opening-hours__session [aria-hidden='true']").text()).toBe("–");
+    });
+  });
+
+  describe("Props", () => {
+    it("updates classes when styleClassPassthrough changes", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: ["first-class"] });
+      await wrapper.setProps({ styleClassPassthrough: ["second-class"] });
+      const classes = wrapper.find(".opening-hours").classes();
+      expect(classes).toContain("second-class");
+      expect(classes).not.toContain("first-class");
+    });
+  });
+});

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

@@ -0,0 +1,45 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { unref } from "vue";
+import OpeningHours from "../OpeningHours.vue";
+
+const { useHeadMock } = vi.hoisted(() => ({ useHeadMock: vi.fn() }));
+mockNuxtImport("useHead", () => useHeadMock);
+
+const days = [{ day: 0 as const, sessions: [{ opens: "09:00", closes: "17:30" }] }];
+
+describe("OpeningHours structured data", () => {
+  beforeEach(() => {
+    useHeadMock.mockClear();
+  });
+
+  it("does not call useHead without structuredData", async () => {
+    await mountSuspended(OpeningHours, { props: { days } });
+    expect(useHeadMock).not.toHaveBeenCalled();
+  });
+
+  it("emits escaped LocalBusiness JSON-LD with opening hours", async () => {
+    await mountSuspended(OpeningHours, {
+      props: {
+        days,
+        exceptions: [{ from: "2026-12-25" }],
+        structuredData: { type: "HairSalon", name: "Salon </script>", id: "https://example.com/#business" },
+      },
+    });
+
+    const script = useHeadMock.mock.calls[0]![0].script[0];
+    expect(script.type).toBe("application/ld+json");
+
+    const raw = unref(script.innerHTML) as string;
+    expect(raw).not.toContain("</script>");
+
+    const json = JSON.parse(raw);
+    expect(json).toMatchObject({
+      "@context": "https://schema.org",
+      "@type": "HairSalon",
+      "@id": "https://example.com/#business",
+      name: "Salon </script>",
+    });
+    expect(json.openingHoursSpecification).toHaveLength(2);
+  });
+});

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

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`OpeningHours > Snapshots > default 1`] = `
+"<div class="opening-hours">
+  <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>
+        <!--v-if-->
+      </dd>
+    </div>
+    <div class="opening-hours__row" data-status="closed">
+      <dt class="opening-hours__days"><span>Sunday</span>
+        <!--v-if-->
+      </dt>
+      <dd class="opening-hours__hours"><span class="opening-hours__status">Closed</span>
+        <!--v-if-->
+      </dd>
+    </div>
+  </dl>
+  <!--v-if-->
+</div>"
+`;

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

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { buildOpeningHoursSpecification, resolveOpeningStatus } from "~/utils/opening-hours";
+
+describe("resolveOpeningStatus", () => {
+  it("defaults to open with sessions and closed without", () => {
+    expect(resolveOpeningStatus({ sessions: [{ opens: "09:00", closes: "17:00" }] })).toBe("open");
+    expect(resolveOpeningStatus({})).toBe("closed");
+    expect(resolveOpeningStatus({ status: "by-appointment" })).toBe("by-appointment");
+  });
+});
+
+describe("buildOpeningHoursSpecification", () => {
+  it("emits one spec per session and skips closed and by-appointment days", () => {
+    const specs = buildOpeningHoursSpecification([
+      {
+        day: 0,
+        sessions: [
+          { opens: "12:00", closes: "14:30" },
+          { opens: "18:00", closes: "22:00" },
+        ],
+      },
+      { day: 1, status: "24-hours" },
+      { day: 2 },
+      { day: 3, status: "by-appointment" },
+    ]);
+    expect(specs).toEqual([
+      { "@type": "OpeningHoursSpecification", dayOfWeek: "https://schema.org/Monday", opens: "12:00", closes: "14:30" },
+      { "@type": "OpeningHoursSpecification", dayOfWeek: "https://schema.org/Monday", opens: "18:00", closes: "22:00" },
+      { "@type": "OpeningHoursSpecification", dayOfWeek: "https://schema.org/Tuesday", opens: "00:00", closes: "23:59" },
+    ]);
+  });
+
+  it("marks closed exceptions with equal opens and closes", () => {
+    expect(buildOpeningHoursSpecification([], [{ from: "2026-12-25", to: "2026-12-26" }])).toEqual([
+      {
+        "@type": "OpeningHoursSpecification",
+        validFrom: "2026-12-25",
+        validThrough: "2026-12-26",
+        opens: "00:00",
+        closes: "00:00",
+      },
+    ]);
+  });
+
+  it("uses from as validThrough for single-day exceptions", () => {
+    const [spec] = buildOpeningHoursSpecification(
+      [],
+      [{ from: "2026-12-31", sessions: [{ opens: "10:00", closes: "14:00" }] }]
+    );
+    expect(spec).toMatchObject({ validFrom: "2026-12-31", validThrough: "2026-12-31", opens: "10:00" });
+  });
+});

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

@@ -0,0 +1,106 @@
+# PriceList — Consumer Styling Guide
+
+`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`.
+
+## Public token API
+
+### Layout
+
+| Token | Default | Controls |
+|---|---|---|
+| `--price-list-column-gap` | `2.4rem` | Gap between columns (and between stacked columns on mobile) |
+
+### Column heading
+
+| Token | Default | Controls |
+|---|---|---|
+| `--price-list-heading-font-size` | `var(--hero-text-subheading)` | Heading size |
+| `--price-list-heading-font-weight` | `600` | Heading weight |
+| `--price-list-heading-colour` | `inherit` | Heading text colour |
+| `--price-list-heading-margin-block-end` | `1.8rem` | Space between heading and the first row |
+| `--price-list-heading-icon-gap` | `1rem` | Space after the optional `headingIcon` |
+
+The heading is a `HeroText`, so `--hero-text-font-family` also applies to it.
+
+### Rows
+
+| Token | Default | Controls |
+|---|---|---|
+| `--price-list-row-gap` | `1.2rem` | Gap between description and price |
+| `--price-list-row-padding-block` | `1.4rem` | Vertical padding per row (last row has none below) |
+| `--price-list-divider-width` | `1px` | Divider thickness |
+| `--price-list-divider-colour` | `currentColor` | Divider colour |
+| `--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
+
+| Token | Default | Controls |
+|---|---|---|
+| `--price-list-price-font-family` | `var(--hero-text-font-family, "Playfair Display")` | Price amount font |
+| `--price-list-price-font-size` | `var(--hero-text-label)` | Price amount size |
+| `--price-list-price-colour` | `inherit` | Price amount colour |
+| `--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 |
+
+There are no private `--_` tokens.
+
+> **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
+> (the nested `HeroText` overrode it) and now sizes the amount; the "from" label has its own
+> `--price-list-from-font-size`. `--price-list-heading-font-size` was declared but never applied;
+> it now works. The amount is no longer an `<h2>` per row, and "from" now sits inline before it
+> rather than on its own line.
+
+---
+
+## State hooks
+
+No `data-*` attributes. Inner element classes, safe to target:
+
+| Class | Element |
+|---|---|
+| `.price-list` | Root grid |
+| `.price-list__column` | One column |
+| `.price-list__heading` | Column heading (`HeroText`, tag from `heading-tag`) |
+| `.price-list__list` | The `<dl>` |
+| `.price-list__row` | One description/price pair |
+| `.price-list__description` | `<dt>` |
+| `.price-list__price` | `<dd>`, holds the "from" label and amount |
+| `.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.
+
+---
+
+## Global theming
+
+```css
+:where(html) {
+  --price-list-divider-colour: var(--theme-border);
+  --price-list-divider-opacity: 1;
+}
+```
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+---
+
+## Class passthrough
+
+`:style-class-passthrough` (string or string array) adds classes to the root `.price-list` element.
+Reactive: changing the prop replaces the previous classes.

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

@@ -2,7 +2,7 @@
   <div class="price-list" :class="elementClasses">
     <div v-for="(column, colIndex) in priceListData" :key="colIndex" class="price-list__column">
       <HeroText
-        :tag="'h2'"
+        :tag="headingTag"
         font-size="subheading"
         :text-content="[{ text: column.headingtext }]"
         :icon="column.headingIcon ? column.headingIcon : undefined"
@@ -13,8 +13,8 @@
         <div v-for="(item, index) in column.items" :key="index" class="price-list__row">
           <dt class="price-list__description">{{ item.description }}</dt>
           <dd class="price-list__price">
-            <span v-if="item.from" class="price-list__from">from</span>
-            <HeroText :tag="'h2'" font-size="label" :text-content="[{ text: item.price }]" />
+            <span v-if="item.from" class="price-list__from">{{ fromLabel }}</span>
+            <span class="price-list__amount">{{ item.price }}</span>
           </dd>
         </div>
       </dl>
@@ -23,58 +23,48 @@
 </template>
 
 <script setup lang="ts">
-export interface PriceItem {
-  description: string;
-  price: string;
-  from?: boolean;
-}
-
-export interface PriceListData {
-  headingtext: string;
-  headingIcon?: string;
-  items: PriceItem[];
-}
+import type { PriceListData } from "~/types/components/price-list";
 
 interface Props {
   priceListData: PriceListData[];
+  headingTag?: "h2" | "h3" | "h4" | "h5" | "h6";
+  fromLabel?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  headingTag: "h2",
+  fromLabel: "from",
   styleClassPassthrough: () => [],
 });
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
 </script>
 
 <style lang="css">
 @layer components {
   .price-list {
-    --_price-list-gap: 2rem;
-    --_price-list-heading-margin-block-end: 1.8rem;
-    --_price-list-row-gap: 0.75rem;
-    --_price-list-divider-color: var(--price-list-divider-color, currentColor);
-    --_price-list-divider-opacity: var(--price-list-divider-opacity, 0.15);
-    --_price-list-heading-font-size: var(--price-list-heading-font-size, 1.8rem);
-    --_price-list-description-font-size: var(--price-list-description-font-size, 1.4rem);
-    --_price-list-price-font-size: var(--price-list-price-font-size, 1.4rem);
-
     display: grid;
     grid-template-columns: 1fr;
-    gap: 2.4rem;
+    gap: var(--price-list-column-gap, 2.4rem);
 
     @media (min-width: 48em) {
       grid-template-columns: 1fr 1fr;
     }
 
-    .price-list__heading {
-      font-weight: 600;
-      margin: 0 0 var(--_price-list-heading-margin-block-end);
+    .price-list__heading.hero-text {
+      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);
+      margin: 0 0 var(--price-list-heading-margin-block-end, 1.8rem);
 
-      &.hero-text {
-        .hero-text__icon {
-          margin-inline-end: 1rem;
-        }
+      .hero-text__icon {
+        margin-inline-end: var(--price-list-heading-icon-gap, 1rem);
       }
     }
 
@@ -83,18 +73,17 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       padding: 0;
       display: flex;
       flex-direction: column;
-      gap: 0rem;
 
       .price-list__row {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        gap: 1.2rem;
-        padding-block: 1.4rem;
-        border-block-end: 1px solid
+        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(
             in srgb,
-            var(--_price-list-divider-color) calc(var(--_price-list-divider-opacity) * 100%),
+            var(--price-list-divider-colour, currentColor) calc(var(--price-list-divider-opacity, 0.15) * 100%),
             transparent
           );
 
@@ -102,15 +91,34 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
           border-block-end: none;
           padding-block-end: 0;
         }
+
         .price-list__description {
-          font-size: var(--_price-list-description-font-size);
+          font-size: var(--price-list-description-font-size, 1.4rem);
+          color: var(--price-list-description-colour, inherit);
         }
 
         .price-list__price {
-          font-size: var(--_price-list-price-font-size);
+          display: flex;
+          align-items: baseline;
+          gap: var(--price-list-from-gap, 0.5ch);
+          margin: 0;
           font-variant-numeric: tabular-nums;
           white-space: nowrap;
-          margin: 0;
+        }
+
+        .price-list__from {
+          font-size: var(--price-list-from-font-size, 1.4rem);
+          color: var(--price-list-from-colour, inherit);
+        }
+
+        .price-list__amount {
+          font-family: var(--price-list-price-font-family, var(--hero-text-font-family, "Playfair Display"));
+          font-size: var(--price-list-price-font-size, var(--hero-text-label));
+          font-variation-settings:
+            "wght" 400,
+            "ital" 1;
+          line-height: 1;
+          color: var(--price-list-price-colour, inherit);
         }
       }
     }

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

@@ -10,7 +10,7 @@ const priceListData = [
       { description: "Restyle", price: "£65" },
       { description: "Wash & Blow Dry", price: "£35" },
       { description: "Trim & Tidy", price: "£25" },
-      { description: "Keratin Treatment", price: "£120" },
+      { description: "Keratin Treatment", price: "£120", from: true },
     ],
   },
   {
@@ -20,7 +20,7 @@ const priceListData = [
       { description: "Full Head Colour", price: "£75" },
       { description: "Half Head Highlights", price: "£65" },
       { description: "Full Head Highlights", price: "£85" },
-      { description: "Balayage", price: "£95" },
+      { description: "Balayage", price: "£95", from: true },
       { description: "Toner", price: "£35" },
     ],
   },
@@ -35,6 +35,17 @@ const meta: Meta<typeof PriceList> = {
       description: "Array of columns, each with a heading and list of items",
       table: { category: "Content" },
     },
+    headingTag: {
+      control: "select",
+      options: ["h2", "h3", "h4", "h5", "h6"],
+      description: "Heading level for each column title; pick to fit the surrounding page outline",
+      table: { category: "Content", defaultValue: { summary: "h2" } },
+    },
+    fromLabel: {
+      control: "text",
+      description: "Text shown before a price whose item has `from: true`",
+      table: { category: "Content", defaultValue: { summary: "from" } },
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -49,6 +60,8 @@ type Story = StoryObj<typeof PriceList>;
 export const Default: Story = {
   args: {
     priceListData,
+    headingTag: "h2",
+    fromLabel: "from",
     styleClassPassthrough: [],
   },
   render: (args) => ({