srcdev-nuxt-components 9.6.1 → 9.6.3

package/app/components/02.molecules/pricing-card/tests/PricingCard.spec.ts

@@ -1,16 +1,13 @@
 import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
 import PricingCard from "../PricingCard.vue";
 
+const baseProps = { planName: "Test Plan", price: 100 };
+
 describe("PricingCard", () => {
-  it("renders plan name, price, and CTA", () => {
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Single Site",
-        price: 99,
-        billingPeriod: "one-time",
-        ctaText: "Get started",
-      },
+  it("renders plan name, price, and CTA", async () => {
+    const wrapper = await mountSuspended(PricingCard, {
+      props: { planName: "Single Site", price: 99, billingPeriod: "one-time", ctaText: "Get started" },
     });
 
     expect(wrapper.text()).toContain("Single Site");
@@ -19,173 +16,202 @@ describe("PricingCard", () => {
     expect(wrapper.text()).toContain("Get started");
   });
 
-  it("uses custom currency symbol when provided", () => {
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Single Site",
-        price: 49,
-        currencySymbol: "£",
-      },
+  it("uses custom currency symbol when provided", async () => {
+    const wrapper = await mountSuspended(PricingCard, {
+      props: { planName: "Single Site", price: 49, currencySymbol: "£" },
     });
 
     expect(wrapper.text()).toContain("£49");
     expect(wrapper.text()).not.toContain("$49");
   });
 
-  it("renders features from props", () => {
-    const features = ["Feature 1", "Feature 2", "Feature 3"];
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Test Plan",
-        price: 100,
-        features,
-      },
+  describe("price display", () => {
+    it("shows whole numbers without decimals", async () => {
+      const wrapper = await mountSuspended(PricingCard, { props: { ...baseProps, price: 1500 } });
+      expect(wrapper.find(".pricing-card__amount").text()).toBe("$1500");
+    });
+
+    it("shows fractional prices to two decimal places", async () => {
+      const wrapper = await mountSuspended(PricingCard, { props: { ...baseProps, price: 9.5 } });
+      expect(wrapper.find(".pricing-card__amount").text()).toBe("$9.50");
+    });
+
+    it("keeps zero and negative prices", async () => {
+      const zero = await mountSuspended(PricingCard, { props: { ...baseProps, price: 0 } });
+      expect(zero.find(".pricing-card__amount").text()).toBe("$0");
+
+      const negative = await mountSuspended(PricingCard, { props: { ...baseProps, price: -20 } });
+      expect(negative.find(".pricing-card__amount").text()).toBe("$-20");
+    });
+
+    it("shows only the currency symbol for a non-finite price", async () => {
+      const wrapper = await mountSuspended(PricingCard, { props: { ...baseProps, price: Number.NaN } });
+      expect(wrapper.find(".pricing-card__amount").text()).toBe("$");
+    });
+
+    it("updates when the price prop changes", async () => {
+      const wrapper = await mountSuspended(PricingCard, { props: { ...baseProps, price: 10 } });
+      await wrapper.setProps({ price: 12.25 });
+      expect(wrapper.find(".pricing-card__amount").text()).toBe("$12.25");
     });
+  });
 
+  it("renders features from props", async () => {
+    const features = ["Feature 1", "Feature 2", "Feature 3"];
+    const wrapper = await mountSuspended(PricingCard, { props: { ...baseProps, features } });
+
+    expect(wrapper.findAll(".pricing-card__feature")).toHaveLength(3);
     features.forEach((feature) => {
       expect(wrapper.text()).toContain(feature);
     });
   });
 
-  it("renders description when provided", () => {
-    const description = "This is a great plan";
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Test Plan",
-        price: 100,
-        description,
-      },
+  it("renders HTML-like text as text", async () => {
+    const wrapper = await mountSuspended(PricingCard, {
+      props: { ...baseProps, planName: "<b>Bold</b>", features: ["<script>alert(1)</script>"] },
     });
 
-    expect(wrapper.text()).toContain(description);
+    expect(wrapper.find(".pricing-card__name b").exists()).toBe(false);
+    expect(wrapper.find(".pricing-card__name").text()).toBe("<b>Bold</b>");
+    expect(wrapper.find("script").exists()).toBe(false);
   });
 
-  it("applies highlighted class when isHighlighted is true", () => {
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Test Plan",
-        price: 100,
-        isHighlighted: true,
-      },
+  it("renders description when provided and omits it otherwise", async () => {
+    const withDescription = await mountSuspended(PricingCard, {
+      props: { ...baseProps, description: "This is a great plan" },
     });
+    expect(withDescription.find(".pricing-card__description").text()).toBe("This is a great plan");
+
+    const without = await mountSuspended(PricingCard, { props: baseProps });
+    expect(without.find(".pricing-card__description").exists()).toBe(false);
+  });
 
-    expect(wrapper.classes()).toContain("is-highlighted");
+  it("omits the billing period when empty", async () => {
+    const wrapper = await mountSuspended(PricingCard, { props: { ...baseProps, billingPeriod: "" } });
+    expect(wrapper.find(".pricing-card__period").exists()).toBe(false);
   });
 
-  it("displays badge when highlighted", () => {
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Test Plan",
-        price: 100,
-        isHighlighted: true,
-      },
+  describe("highlight", () => {
+    it("applies highlighted class and default badge", async () => {
+      const wrapper = await mountSuspended(PricingCard, { props: { ...baseProps, isHighlighted: true } });
+
+      expect(wrapper.classes()).toContain("is-highlighted");
+      expect(wrapper.find(".pricing-card__badge").text()).toBe("Most Popular");
     });
 
-    expect(wrapper.text()).toContain("Most Popular");
-  });
+    it("renders custom badge text", async () => {
+      const wrapper = await mountSuspended(PricingCard, {
+        props: { ...baseProps, isHighlighted: true, badgeText: "Le plus populaire" },
+      });
 
-  it("renders custom badge text when highlighted", () => {
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Test Plan",
-        price: 100,
-        isHighlighted: true,
-        badgeText: "Le plus populaire",
-      },
+      expect(wrapper.find(".pricing-card__badge").text()).toBe("Le plus populaire");
     });
 
-    expect(wrapper.find(".pricing-card__badge").text()).toBe("Le plus populaire");
+    it("has no badge when not highlighted", async () => {
+      const wrapper = await mountSuspended(PricingCard, { props: baseProps });
+      expect(wrapper.find(".pricing-card__badge").exists()).toBe(false);
+      expect(wrapper.classes()).not.toContain("is-highlighted");
+    });
   });
 
-  it("emits select event with plan name on CTA click", async () => {
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Test Plan",
-        price: 100,
-      },
-    });
+  describe("CTA", () => {
+    it("emits select event with plan name on click", async () => {
+      const wrapper = await mountSuspended(PricingCard, { props: baseProps });
 
-    const button = wrapper.find("button");
-    await button.trigger("click");
+      await wrapper.find("button").trigger("click");
 
-    expect(wrapper.emitted("select")).toBeTruthy();
-    expect(wrapper.emitted("select")?.[0]).toEqual(["Test Plan"]);
-  });
+      expect(wrapper.emitted("select")?.[0]).toEqual(["Test Plan"]);
+    });
 
-  it("disables CTA when ctaDisabled is true", () => {
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Test Plan",
-        price: 100,
-        ctaDisabled: true,
-      },
+    it("disables CTA when ctaDisabled is true", async () => {
+      const wrapper = await mountSuspended(PricingCard, { props: { ...baseProps, ctaDisabled: true } });
+
+      const button = wrapper.find("button");
+      expect(button.attributes("readonly")).toBeDefined();
+      expect(button.attributes("aria-disabled")).toBe("true");
     });
 
-    const button = wrapper.find("button");
-    expect(button.attributes("readonly")).toBeDefined();
-    expect(button.attributes("aria-disabled")).toBe("true");
+    it("passes scope to the cta slot", async () => {
+      const wrapper = await mountSuspended(PricingCard, {
+        props: { ...baseProps, ctaText: "Choose", ctaDisabled: true },
+        slots: {
+          cta: `<template #cta="{ ctaText, isDisabled, planName, onSelect }">
+            <button class="custom-cta" :data-disabled="isDisabled" :data-plan="planName" @click="onSelect">{{ ctaText }}</button>
+          </template>`,
+        },
+      });
+
+      const button = wrapper.find(".custom-cta");
+      expect(button.text()).toBe("Choose");
+      expect(button.attributes("data-disabled")).toBe("true");
+      expect(button.attributes("data-plan")).toBe("Test Plan");
+      await button.trigger("click");
+      expect(wrapper.emitted("select")?.[0]).toEqual(["Test Plan"]);
+    });
   });
 
-  it("renders custom features via slot", () => {
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Test Plan",
-        price: 100,
-      },
-      slots: {
-        features: '<li>Custom Feature 1</li><li>Custom Feature 2</li>',
-      },
+  it("renders custom features via slot", async () => {
+    const wrapper = await mountSuspended(PricingCard, {
+      props: baseProps,
+      slots: { features: "<li>Custom Feature 1</li><li>Custom Feature 2</li>" },
     });
 
     expect(wrapper.text()).toContain("Custom Feature 1");
     expect(wrapper.text()).toContain("Custom Feature 2");
   });
 
-  it("uses semantic article tag by default", () => {
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Test Plan",
-        price: 100,
-      },
+  describe("semantics", () => {
+    it("uses an article with an h3 by default", async () => {
+      const wrapper = await mountSuspended(PricingCard, { props: baseProps });
+
+      expect(wrapper.element.tagName).toBe("ARTICLE");
+      expect(wrapper.find(".pricing-card__name").element.tagName).toBe("H3");
     });
 
-    expect(wrapper.element.tagName).toBe("ARTICLE");
-  });
+    it("allows custom tag and heading level", async () => {
+      const wrapper = await mountSuspended(PricingCard, {
+        props: { ...baseProps, tag: "section", headingTag: "h2" },
+      });
 
-  it("allows custom tag via prop", () => {
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Test Plan",
-        price: 100,
-        tag: "section",
-      },
+      expect(wrapper.element.tagName).toBe("SECTION");
+      expect(wrapper.find(".pricing-card__name").element.tagName).toBe("H2");
     });
 
-    expect(wrapper.element.tagName).toBe("SECTION");
+    it("labels the root with the plan name heading", async () => {
+      const wrapper = await mountSuspended(PricingCard, { props: baseProps });
+
+      const headingId = wrapper.find(".pricing-card__name").attributes("id");
+      expect(headingId).toBeTruthy();
+      expect(wrapper.attributes("aria-labelledby")).toBe(headingId);
+    });
   });
 
-  it("does not render a ribbon when ribbonText is unset", () => {
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Test Plan",
-        price: 100,
-      },
+  describe("ribbon", () => {
+    it("does not render a ribbon when ribbonText is unset", async () => {
+      const wrapper = await mountSuspended(PricingCard, { props: baseProps });
+
+      expect(wrapper.find(".pricing-card__ribbon-clip").exists()).toBe(false);
+      expect(wrapper.classes()).not.toContain("has-ribbon");
     });
 
-    expect(wrapper.find(".pricing-card__ribbon-clip").exists()).toBe(false);
+    it("renders ribbon text and flags the root when ribbonText is provided", async () => {
+      const wrapper = await mountSuspended(PricingCard, {
+        props: { ...baseProps, ribbonText: "EARLYBIRD50 · 50% off" },
+      });
+
+      expect(wrapper.find(".pricing-card__ribbon").text()).toBe("EARLYBIRD50 · 50% off");
+      expect(wrapper.classes()).toContain("has-ribbon");
+    });
   });
 
-  it("renders ribbon text when ribbonText is provided", () => {
-    const wrapper = mount(PricingCard, {
-      props: {
-        planName: "Test Plan",
-        price: 100,
-        ribbonText: "EARLYBIRD50 · 50% off",
-      },
+  it("applies and updates styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(PricingCard, {
+      props: { ...baseProps, styleClassPassthrough: ["custom-a"] },
     });
+    expect(wrapper.classes()).toContain("custom-a");
 
-    const ribbon = wrapper.find(".pricing-card__ribbon-clip");
-    expect(ribbon.exists()).toBe(true);
-    expect(ribbon.text()).toContain("EARLYBIRD50 · 50% off");
+    await wrapper.setProps({ styleClassPassthrough: ["custom-b"] });
+    expect(wrapper.classes()).toContain("custom-b");
+    expect(wrapper.classes()).not.toContain("custom-a");
   });
 });

package/app/components/02.molecules/profile-section/CONSUMER-STYLING.md

@@ -2,35 +2,89 @@
 
 ## Public token API
 
+### Grid and picture
+
 | Token | Default | Controls |
 |---|---|---|
-| `--profile-section-gap` | `2rem` | Gap between picture and info, single column (below 768px) |
-| `--profile-section-gap-wide` | `4rem` | Gap between picture and info columns (768px+) |
-| `--profile-section-picture-width` | `384px` | Picture column width (768px+) |
+| `--profile-section-gap` | `2rem` | Gap between picture and info, single column (component under 768px wide) |
+| `--profile-section-gap-wide` | `4rem` | Gap between picture and info columns (component 768px wide or more) |
+| `--profile-section-picture-width` | `38.4rem` | Maximum picture column width in the two-column layout. The column can shrink below it |
 | `--profile-section-picture-aspect-ratio` | `3 / 4` | Picture frame aspect ratio |
-| `--profile-section-picture-border-radius` | `8px` | Picture frame corner rounding |
+| `--profile-section-picture-border-radius` | `0.8rem` | Picture frame corner rounding |
 | `--profile-section-info-block-gap` | `1.5rem` | Space after each `profile-info-N` block |
 | `--profile-section-links-gap` | `1rem` | Gap between items in the `profileLinks` slot |
+| `--profile-section-info-text-colour` | `inherit` | Text colour of the info column (blocks and links) |
+
+### Info block highlights
+
+| Token | Default | Controls |
+|---|---|---|
+| `--profile-section-highlight-colour` | `var(--colour-text-accent)` | `.highlight` inside a `.location` element |
+| `--profile-section-link-colour` | `var(--colour-link-default)` | `.highlight` inside a `.services` element |
+| `--profile-section-link-colour-hover` | `var(--colour-link-hover)` | The same, on hover |
+| `--profile-section-highlight-font-weight` | `600` | Weight of both highlight kinds (also sets the `wght` variation axis) |
+
+The defaults read the global `--colour-*` tokens, so setting those on an ancestor still works.
 
-Highlight colours inside info blocks read the global `--colour-text-accent`,
-`--colour-link-default` and `--colour-link-hover` (see **State hooks**).
+### Header in picture
 
+These only apply when `header-placement` is `picture-bottom` or `picture-top`. The scrim fades
+upward from the bottom edge for `picture-bottom` and downward from the top edge for `picture-top`.
+
+| Token | Default | Controls |
+|---|---|---|
+| `--profile-section-picture-header-scrim-colour` | `#000` | Colour the scrim starts from at the frame's edge |
+| `--profile-section-picture-header-scrim-opacity` | `75%` | Opacity of the scrim colour at its start |
+| `--profile-section-picture-header-scrim-solid-stop` | `0%` | How far into the header the scrim stays at full strength before it starts to fade (e.g. `55%` keeps it solid behind the text) |
+| `--profile-section-picture-header-scrim-target-colour` | `transparent` | Colour the scrim fades into at the header's inner edge. Set it to roughly the photo's colour there (often translucent) so the fade blends into the image instead of leaving a grey band or a visible edge |
+| `--profile-section-picture-header-scrim` | gradient from the scrim colour | The whole scrim `background`; set `none` to remove it |
+| `--profile-section-picture-header-text-colour` | `contrast-color(<scrim colour>)`, `#fff` without support | Eyebrow and heading text colour |
+| `--profile-section-picture-header-eyebrow-colour` | `inherit` | Eyebrow colour only |
+| `--profile-section-picture-header-padding` | `2.4rem` | Padding around the header inside the picture |
+| `--profile-section-picture-header-gap` | `0.4rem` | Gap between eyebrow and heading |
+
+Matching the photo is a judgement call per image: pick the target colour from the part of the photo
+the fade ends on, and add end padding (`--profile-section-picture-header-padding`, e.g.
+`3.2rem 3.2rem 6.4rem` for `picture-top`) so the fade sits past the text. The header only rounds the
+corners on the frame's edge, so an opaque target colour doesn't show rounded inner corners.
+Browsers without `color-mix()` (before Safari 16.2) start the scrim from 75% black whatever the scrim
+colour and opacity; the solid stop and target colour still apply.
+
+`contrast-color()` only reads the scrim colour, not the photo. If you remove the scrim, set
+`--profile-section-picture-header-text-colour` yourself to suit the image. The eyebrow's own
+`--eyebrow-text-bg-img` is set to `none` inside the picture.
+
+> Changed 2026-10-14: new `header-placement` prop and its tokens, and `--profile-section-info-text-colour`. The scrim
+> gained opacity, solid-stop and target-colour tokens. The image is now absolutely positioned
+> inside the frame (no visual change), so a header in the frame can grow it past its aspect ratio.
+>
+> Changed 2026-10-14: the highlight colours read the global `--colour-*` tokens directly; they now
+> go through the `--profile-section-*` tokens above, with the same defaults. `384px` and `8px`
+> became the same values in rem.
+>
 > Changed 2026-09-27: all of these were hardcoded values; they're now tokens with the same
 > defaults.
 
-No private `--_` tokens.
+Private tokens (not public API): `--_scrim-colour`, the resolved scrim colour used by the gradient
+and `contrast-color()`, `--_scrim-direction` (`to top` or `to bottom`, set by the placement), and
+`--_scrim-start-colour`, `--_scrim-solid-stop` and `--_scrim-target-colour`, which compose the
+gradient from the tokens above.
 
 ---
 
 ## State hooks
 
-Inner classes: `.profile-section-header`, `.profile-section-inner` (the grid),
-`.profile-section-picture` (frame), `.profile-section-image` (the `NuxtImg`),
-`.profile-section-info`, `.profile-section-info-content`, `.profile-section-info-block` (one per
-`profile-info-N` slot), `.profile-section-links`.
+Inner classes: `.profile-section-header` (only rendered when the `eyebrowText` or `heroText` slot
+is given; it moves inside `.profile-section-picture`, before the image, when `header-placement` is
+`picture-bottom` or `picture-top`), `.profile-section-inner` (the grid), `.profile-section-picture` (frame),
+`.profile-section-image` (the `NuxtImg`), `.profile-section-info`,
+`.profile-section-info-content`, `.profile-section-info-block` (one per `profile-info-N` slot
+given), `.profile-section-links`.
 
-Content hooks inside info blocks: an element with class `location` or `services` containing a
-`.highlight` gets a bold accent (`location`) or link (`services`) colour.
+`data-header-placement` on the root: `above`, `picture-bottom` or `picture-top`.
+
+Content hooks inside info blocks: a `.highlight` inside an element with class `location` or
+`services` gets the highlight or link colour above.
 
 > Changed 2026-09-27: renamed from `.picture`, `.profile-picture`, `.profile-info`,
 > `.profile-info-content`, `.profile-info-block` and `.profile-links`. `.picture` in particular
@@ -38,6 +92,35 @@ Content hooks inside info blocks: an element with class `location` or `services`
 
 ---
 
+## Layout
+
+The root is a size container named `profile-section` (`container: profile-section / inline-size`).
+The grid switches to two columns when **the component itself** is 768px wide or more, not the
+viewport, so it stays stacked in a narrow column or sidebar. Because it's an inline-size container,
+its width can't come from its content: in a flex row or other shrink-to-fit context, give it a
+width (`flex: 1`, `width: 100%`) or it collapses.
+
+Both grid columns are `minmax(0, …)`, so long unbroken text wraps (the root sets
+`overflow-wrap: anywhere`) instead of widening the grid. Profile links wrap onto more lines.
+
+To target the two-column layout in your own CSS, query the same container:
+
+```css
+.my-page .profile-section-inner {
+  @container profile-section (min-width: 768px) {
+    align-items: center;
+  }
+}
+```
+
+> Changed 2026-10-14: the breakpoint was a viewport `@media (min-width: 768px)` query. A
+> `@media (min-width: 768px)` override of `.profile-section-inner`'s `grid-template-columns` now
+> applies at a different point from the component's own switch. Remove it and set
+> `--profile-section-picture-width` instead (`minmax(0, 320px) 1fr` is
+> `--profile-section-picture-width: 32rem`, since the column is now `minmax(0, …)` by default).
+
+---
+
 ## Local overrides
 
 Set the tokens above on an element you own (a page or section class, or a class added with
@@ -51,3 +134,10 @@ Set the tokens above on an element you own (a page or section class, or a class
 ## Class passthrough
 
 `style-class-passthrough` adds classes to the root element. Reactive after mount.
+
+---
+
+## Notes
+
+There are no line-clamp tokens. All text comes through slots, so it is your own markup: clamp it
+there, for example with `-webkit-line-clamp` on your own paragraph class.