srcdev-nuxt-components 9.6.10 → 9.6.12

package/app/components/02.molecules/alert-masked-content/tests/AlertMaskedContent.spec.ts

@@ -38,16 +38,16 @@ describe("AlertMaskedContent", () => {
     expect(wrapper.find(".alert-masked-content").attributes("data-theme")).toBe("success");
   });
 
-  // ─── AlertMaskCore ────────────────────────────────────────────────────────
+  // ─── AlertMask ────────────────────────────────────────────────────────
 
-  it("renders AlertMaskCore", async () => {
+  it("renders AlertMask", async () => {
     const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
-    expect(wrapper.find(".alert-mask-core").exists()).toBe(true);
+    expect(wrapper.find(".alert-mask").exists()).toBe(true);
   });
 
-  it("renders AlertContentInner inside AlertMaskCore", async () => {
+  it("renders AlertContentInner inside AlertMask", async () => {
     const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
-    expect(wrapper.find(".alert-mask-core .alert-content-inner").exists()).toBe(true);
+    expect(wrapper.find(".alert-mask .alert-content-inner").exists()).toBe(true);
   });
 
   // ─── Icon ─────────────────────────────────────────────────────────────────
@@ -131,15 +131,15 @@ describe("AlertMaskedContent", () => {
 
   // ─── Default maskConfig ───────────────────────────────────────────────────
 
-  it("passes the resolved maskConfig to AlertMaskCore", async () => {
+  it("passes the resolved maskConfig to AlertMask", async () => {
     const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
     const contentEl = wrapper.find(".alert-mask-content");
     const style = (contentEl.element as HTMLElement).style;
-    // Default borderLeft: 6 → --_inset-inline-start: 6px
-    expect(style.getPropertyValue("--_inset-inline-start")).toBe("6px");
-    expect(style.getPropertyValue("--_inset-block-start")).toBe("1px");
-    expect(style.getPropertyValue("--_inset-inline-end")).toBe("1px");
-    expect(style.getPropertyValue("--_inset-block-end")).toBe("1px");
+    // Default borderLeft: 6 → --_inset-left: 6px
+    expect(style.getPropertyValue("--_inset-left")).toBe("6px");
+    expect(style.getPropertyValue("--_inset-top")).toBe("1px");
+    expect(style.getPropertyValue("--_inset-right")).toBe("1px");
+    expect(style.getPropertyValue("--_inset-bottom")).toBe("1px");
   });
 
   it("routes the default mask colours through public tokens", async () => {
@@ -168,7 +168,7 @@ describe("AlertMaskedContent", () => {
     });
     const contentEl = wrapper.find(".alert-mask-content");
     const style = (contentEl.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_inset-inline-start")).toBe("12px");
+    expect(style.getPropertyValue("--_inset-left")).toBe("12px");
   });
 
   // ─── showIcon / actions (added 2026-09-27) ──────────────────────────────────

package/app/components/02.molecules/cookie-consent-banner/CONSUMER-STYLING.md

@@ -9,7 +9,7 @@ adds: position, motion and the two buttons.
 > **Changed 2026-10-15**: the closed state class `.closed` is now `.cookie-consent-banner-closed`,
 > and the buttons are `InputButton`s (`variant="inline"`, so the banner's tokens still style them):
 > each button is `.cookie-consent-banner-accept.input-button` / `.cookie-consent-banner-reject.input-button`
-> with the label in an inner `.button-text`. The button tokens below are unchanged.
+> with the label in an inner `.input-button-text` (`.button-text` until 2026-10-17). The button tokens below are unchanged.
 >
 > **Changed 2026-09-27**: rebuilt on `AlertContent`. The banner's own panel tokens
 > (`--cookie-consent-banner-padding`, `-gap`, `-border-radius`, `-border`, `-accent-border-width`,
@@ -47,7 +47,7 @@ adds: position, motion and the two buttons.
 
 The gap between the buttons and their alignment (right by default) are `AlertContent`'s
 `--alert-content-actions-gap` and `--alert-content-actions-justify`. Long labels wrap inside the
-buttons (`InputButton`'s `.button-text`), and the buttons wrap onto their own lines when the row is full.
+buttons (`InputButton`'s `.input-button-text`), and the buttons wrap onto their own lines when the row is full.
 The label keeps the banner's font size and case: `InputButton`'s `--button-font-size` and
 `--button-text-transform` don't apply here.
 
@@ -63,7 +63,7 @@ each resolving a public token once for reuse.
 - Classes: `.cookie-consent-banner` > `.cookie-consent-banner-inner` (the `role="region"`) >
   `.alert-content` (see its guide for the inner structure); the buttons are
   `InputButton`s with `.cookie-consent-banner-reject` and `.cookie-consent-banner-accept` (plus
-  `.input-button.inline`) inside `.alert-content-actions`.
+  `.input-button[data-variant="inline"]`) inside `.alert-content-actions`.
 - `data-test-id`: `cookie-consent-banner`, `cookie-consent-banner-reject`, `cookie-consent-banner-accept`,
   plus `AlertContent`'s `alert-icon`, `alert-title`, `alert-content`, `alert-actions`.
 

package/app/components/02.molecules/cookie-consent-banner/CookieConsentBanner.vue

@@ -127,7 +127,7 @@ const isClosed = computed(() => status.value !== "unset");
         outline-offset: 0.2rem;
       }
 
-      .button-text {
+      & .input-button-text {
         font-size: inherit;
         text-transform: none;
       }

package/app/components/02.molecules/cookie-consent-banner/tests/CookieConsentBanner.spec.ts

@@ -118,7 +118,7 @@ describe("CookieConsentBanner", () => {
       expect(button.tagName).toBe("BUTTON");
       expect(button.getAttribute("type")).toBe("button");
       expect(button.classList).toContain("input-button");
-      expect(button.classList).toContain("inline");
+      expect(button.dataset.variant).toBe("inline");
     }
   });
 

package/app/components/02.molecules/display-theme-switch/CONSUMER-STYLING.md

@@ -1,11 +1,11 @@
 # DisplayThemeSwitch — Consumer Styling Guide
 
-## No tokens of its own — delegates entirely to TripleToggleSwitch
+## No tokens of its own — delegates entirely to SegmentedControl
 
-`DisplayThemeSwitch` is a thin wrapper around `TripleToggleSwitch` (see
-`app/components/05.forms/triple-toggle-switch/CONSUMER-STYLING.md`) and declares no
+`DisplayThemeSwitch` is a thin wrapper around `SegmentedControl` (see
+`app/components/05.forms/segmented-control/CONSUMER-STYLING.md`) and declares no
 `--display-theme-switch-*` tokens of its own. Every colour token documented there
-(`--triple-toggle-switch-surface`, `--triple-toggle-switch-border`, `--triple-toggle-switch-marker-surface`,
+(`--segmented-control-surface`, `--segmented-control-border`, `--segmented-control-marker-surface`,
 etc.) applies unchanged, since `DisplayThemeSwitch` renders that component directly with no
 intermediate styling layer.
 
@@ -20,14 +20,14 @@ tight header/nav slot:
 <DisplayThemeSwitch style-class-passthrough="small" />
 ```
 
-This sets `TripleToggleSwitch`'s public `--triple-toggle-switch-gap`/`-padding`/
+This sets `SegmentedControl`'s public `--segmented-control-gap`/`-padding`/
 `-option-padding`/`-icon-size` tokens to smaller values (`0.2rem`/`0.2rem`/`0.2rem`/`1.6rem` vs the
-default `0.4rem`/`0.4rem`/`0.4rem`/`2rem` — both already more compact than `TripleToggleSwitch`'s
+default `0.4rem`/`0.4rem`/`0.4rem`/`2rem` — both already more compact than `SegmentedControl`'s
 own defaults of `1rem`/`0.6rem`/`0.5rem`/`2rem`). Override any of the four directly for a custom
 size instead of using `small`:
 
 ```vue
-<DisplayThemeSwitch style="--triple-toggle-switch-icon-size: 2.4rem;" />
+<DisplayThemeSwitch style="--segmented-control-icon-size: 2.4rem;" />
 ```
 
 ---
@@ -40,8 +40,8 @@ the block **unlayered** (no `@layer` wrapper) so it beats the library's `@layer
 own file uses `<style scoped>`, selectors that reach inside the component need `:deep()`. Patterns
 and examples: `.claude/skills/component-local-style-override.md`.
 
-**Caveat:** the colour tokens (`--triple-toggle-switch-surface`, `-border`, ...) work from any
-ancestor, but the four sizing tokens (`--triple-toggle-switch-gap`, `-padding`, `-option-padding`,
+**Caveat:** the colour tokens (`--segmented-control-surface`, `-border`, ...) work from any
+ancestor, but the four sizing tokens (`--segmented-control-gap`, `-padding`, `-option-padding`,
 `-icon-size`) are declared on this component's own root (that's how its default and `small` sizes
 work), so an ancestor value never reaches the toggle. Set those on the root itself: a class from
 `style-class-passthrough`, or inline `style` as shown above.

package/app/components/02.molecules/display-theme-switch/DisplayThemeSwitch.vue

@@ -1,6 +1,6 @@
 <template>
   <ClientOnly>
-    <TripleToggleSwitch
+    <SegmentedControl
       v-model="colorModeVal"
       v-model:field-data="sampleFieldData"
       :aria-label="ariaLabel"
@@ -77,27 +77,27 @@ watch(colorModeVal, (val) => {
 .colour-scheme-select {
   /* Everything DisplayThemeSwitch used to redeclare here beyond sizing (wrapper background/border/
      focus ring, marker border, option border/outline/focus/hover, option-icon colours, and the
-     system/light/dark marker gradients) was a byte-for-byte duplicate of TripleToggleSwitch's
+     system/light/dark marker gradients) was a byte-for-byte duplicate of SegmentedControl's
      own defaults for the exact same selectors — a no-op at best, and for the ones that bypassed
-     TripleToggleSwitch's public --triple-toggle-switch-* tokens with a hardcoded literal
+     SegmentedControl's public --segmented-control-* tokens with a hardcoded literal
      (background-color, border, focus outline, marker border, option border/hover/focus, icon
-     colour) an active bug: a consumer setting e.g. --triple-toggle-switch-surface globally would
+     colour) an active bug: a consumer setting e.g. --segmented-control-surface globally would
      have been silently overridden back to the hardcoded default by this block's higher
-     specificity. Removed 2026-09-20 — TripleToggleSwitch already owns all of that. Only the
-     genuine "small" sizing variant remains, now driving TripleToggleSwitch's own public
+     specificity. Removed 2026-09-20 — SegmentedControl already owns all of that. Only the
+     genuine "small" sizing variant remains, now driving SegmentedControl's own public
      sizing tokens instead of reaching into its private --_form-* and --_scheme-icon-font-size
-     locals directly (see TripleToggleSwitch's CONSUMER-STYLING.md). */
-  &.triple-toggle-switch {
-    --triple-toggle-switch-gap: 0.4rem;
-    --triple-toggle-switch-padding: 0.4rem;
-    --triple-toggle-switch-option-padding: 0.4rem;
-    --triple-toggle-switch-icon-size: 2rem;
+     locals directly (see SegmentedControl's CONSUMER-STYLING.md). */
+  &.segmented-control {
+    --segmented-control-gap: 0.4rem;
+    --segmented-control-padding: 0.4rem;
+    --segmented-control-option-padding: 0.4rem;
+    --segmented-control-icon-size: 2rem;
 
     &.small {
-      --triple-toggle-switch-gap: 0.2rem;
-      --triple-toggle-switch-padding: 0.2rem;
-      --triple-toggle-switch-option-padding: 0.2rem;
-      --triple-toggle-switch-icon-size: 1.6rem;
+      --segmented-control-gap: 0.2rem;
+      --segmented-control-padding: 0.2rem;
+      --segmented-control-option-padding: 0.2rem;
+      --segmented-control-icon-size: 1.6rem;
     }
   }
 }

package/app/components/02.molecules/display-theme-switch/stories/DisplayThemeSwitch.stories.ts

@@ -1,3 +1,6 @@
+import { ref } from "vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 import DisplayThemeSwitch from "../DisplayThemeSwitch.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 
@@ -50,7 +53,7 @@ const meta: Meta<typeof DisplayThemeSwitch> = {
     docs: {
       description: {
         component:
-          "A system/light/dark theme switch wrapping TripleToggleSwitch, wired to useSettingsStore. Colour and sizing are entirely delegated to TripleToggleSwitch's public --triple-toggle-switch-* tokens — see CONSUMER-STYLING.md.",
+          "A system/light/dark theme switch wrapping SegmentedControl, wired to useSettingsStore. Colour and sizing are entirely delegated to SegmentedControl's public --segmented-control-* tokens — see CONSUMER-STYLING.md.",
       },
     },
   },
@@ -118,3 +121,52 @@ export const InNavigation: Story = {
     },
   },
 };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    ariaLabel: "Farbschema für die gesamte Website auswählen <b>not bold</b>",
+    systemLabel: "Systemeinstellung des Betriebssystems übernehmen",
+    lightLabel: "🌞",
+    darkLabel: "داكن",
+    lightIcon: "",
+  },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "mobileCanvas");
+        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>
+      `,
+    }),
+  ],
+  render: (args) => ({
+    components: { DisplayThemeSwitch },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 1.6rem; justify-items: start;">
+        <DisplayThemeSwitch v-bind="args" />
+        <DisplayThemeSwitch v-bind="args" style-class-passthrough="small" />
+        <div dir="rtl"><DisplayThemeSwitch v-bind="args" /></div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Long, HTML-like, emoji and right-to-left labels (screen-reader text only), an empty light icon, the small size and a right-to-left container, all bound to the one site colour scheme. Check at every canvas width: the switch stays inside the dashed outline, the empty-icon option still renders as a clickable circle, the marker follows the scheme in every copy, and it slides the right way in right-to-left.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/display-theme-switch/tests/DisplayThemeSwitch.spec.ts

@@ -25,17 +25,17 @@ describe("DisplayThemeSwitch", () => {
     expect(wrapper.vm).toBeTruthy();
   });
 
-  it("renders TripleToggleSwitch with the colour-scheme-select class", async () => {
+  it("renders SegmentedControl with the colour-scheme-select class", async () => {
     const wrapper = await mountSuspended(DisplayThemeSwitch);
     await nextTick();
     expect(wrapper.find(".colour-scheme-select").exists()).toBe(true);
-    expect(wrapper.find(".triple-toggle-switch").exists()).toBe(true);
+    expect(wrapper.find(".segmented-control").exists()).toBe(true);
   });
 
   it("renders default option labels", async () => {
     const wrapper = await mountSuspended(DisplayThemeSwitch);
     await nextTick();
-    const labels = wrapper.findAll(".option-group .sr-only").map((el) => el.text());
+    const labels = wrapper.findAll(".segmented-control-option .sr-only").map((el) => el.text());
     expect(labels).toEqual(["System", "Light", "Dark"]);
   });
 
@@ -48,7 +48,7 @@ describe("DisplayThemeSwitch", () => {
       },
     });
     await nextTick();
-    const labels = wrapper.findAll(".option-group .sr-only").map((el) => el.text());
+    const labels = wrapper.findAll(".segmented-control-option .sr-only").map((el) => el.text());
     expect(labels).toEqual(["Auto", "Day", "Night"]);
   });
 
@@ -61,8 +61,8 @@ describe("DisplayThemeSwitch", () => {
       },
     });
     await nextTick();
-    const icons = wrapper.findAll(".option-icon").map((el) => el.attributes("class"));
-    expect(icons.some((c) => c?.includes("system"))).toBe(true);
+    const icons = wrapper.findAll(".segmented-control-option-icon").map((el) => el.html());
+    expect(icons.some((html) => html.includes("custom:system") || html.includes("custom-system"))).toBe(true);
   });
 
   it("names the radiogroup with ariaLabel", async () => {
@@ -79,14 +79,14 @@ describe("DisplayThemeSwitch", () => {
       props: { styleClassPassthrough: "small" },
     });
     await nextTick();
-    expect(wrapper.find(".triple-toggle-switch").classes()).toContain("small");
+    expect(wrapper.find(".segmented-control").classes()).toContain("small");
   });
 
   it("calls setColourScheme when the selected option changes", async () => {
     const wrapper = await mountSuspended(DisplayThemeSwitch);
     await nextTick();
 
-    const lightInput = wrapper.findAll("input.option-input")[1];
+    const lightInput = wrapper.findAll("input.segmented-control-option-input")[1];
     await lightInput?.setValue(true);
     await nextTick();
 

package/app/components/02.molecules/input-copy/CONSUMER-STYLING.md

@@ -17,7 +17,7 @@ style it rather than `InputButton`'s variant colours), with optional description
 >   `--input-copy-gap`, `--input-copy-focus-ring`, `--input-copy-description-line-clamp`.
 > - The input's focus outline used the border-radius token as its colour; it's now a real
 >   `:focus-visible` ring from `--input-copy-focus-ring`.
-> - The button label is `InputButton`'s `.button-text` (was `.input-copy__button-text`), and it
+> - The button label is `InputButton`'s `.input-button-text` (was `.input-copy__button-text`, then `.button-text` until 2026-10-17), and it
 >   hides below 48rem of the **component's** width (a container query), not a 480px viewport.
 
 ## Public token API
@@ -70,10 +70,10 @@ shared by the input and the button.
   `copiedIcon`.
 - `disabled` on the button when `isDisabled` is set.
 - Classes: `.input-copy` > `.input-copy__wrapper` > `.input-copy__input` and
-  `.input-copy__button` (also `.input-button.inline`, containing `.input-copy__icon` and
-  `.button-text`); then `.input-copy__description` and a visually hidden `role="status"` span.
+  `.input-copy__button` (also `.input-button[data-variant="inline"]`, containing `.input-copy__icon` and
+  `.input-button-text`); then `.input-copy__description` and a visually hidden `role="status"` span.
 - Container: the root is `container: input-copy / inline-size`. Below `48rem` of its own width the
-  button's `.button-text` is hidden and only the icon shows (the button keeps its aria-label).
+  button's `.input-button-text` is hidden and only the icon shows (the button keeps its aria-label).
 
 ## Global theming
 

package/app/components/02.molecules/input-copy/InputCopy.vue

@@ -199,14 +199,14 @@ onUnmounted(() => {
         flex-shrink: 0;
       }
 
-      .button-text {
+      & .input-button-text {
         font-size: inherit;
         text-transform: none;
       }
     }
 
     @container input-copy (width < 48rem) {
-      .input-copy__button.input-button .button-text {
+      .input-copy__button.input-button .input-button-text {
         display: none;
       }
     }

package/app/components/02.molecules/input-copy/tests/InputCopy.spec.ts

@@ -56,7 +56,7 @@ describe("InputCopy", () => {
       const w = await mountCopy();
       const button = w.find("button");
       expect(button.classes()).toContain("input-button");
-      expect(button.classes()).toContain("inline");
+      expect(button.attributes("data-variant")).toBe("inline");
       expect(button.classes()).toContain("input-copy__button");
       expect(button.attributes("type")).toBe("button");
     });
@@ -182,7 +182,7 @@ describe("InputCopy", () => {
       await nextTick();
       expect(w.classes()).not.toContain("input-copy-copied");
       expect(w.find("button").text()).toContain("Copy");
-      expect(w.find("button").attributes("aria-disabled")).toBe("false");
+      expect(w.find("button").attributes("aria-disabled")).toBeUndefined();
     });
 
     it("logs and stays in the resting state when the clipboard write fails", async () => {

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

@@ -163,11 +163,11 @@ describe("GoogleReviews", () => {
     setScrollMetrics(list.element, { scrollWidth: 1000, clientWidth: 400, scrollLeft: 0 });
     await list.trigger("scroll");
     expect(wrapper.find(".google-reviews-prev").attributes("aria-disabled")).toBe("true");
-    expect(wrapper.find(".google-reviews-next").attributes("aria-disabled")).toBe("false");
+    expect(wrapper.find(".google-reviews-next").attributes("aria-disabled")).toBeUndefined();
 
     setScrollMetrics(list.element, { scrollWidth: 1000, clientWidth: 400, scrollLeft: 600 });
     await list.trigger("scroll");
-    expect(wrapper.find(".google-reviews-prev").attributes("aria-disabled")).toBe("false");
+    expect(wrapper.find(".google-reviews-prev").attributes("aria-disabled")).toBeUndefined();
     expect(wrapper.find(".google-reviews-next").attributes("aria-disabled")).toBe("true");
   });
 
@@ -192,8 +192,8 @@ describe("GoogleReviews", () => {
     const list = wrapper.find(".google-reviews-list");
     setScrollMetrics(list.element, { scrollWidth: 1000, clientWidth: 400, scrollLeft: 0 });
     await list.trigger("scroll");
-    expect(wrapper.find(".google-reviews-prev .button-text").text()).toBe("Previous reviews");
-    expect(wrapper.find(".google-reviews-next .button-text").text()).toBe("Next reviews");
+    expect(wrapper.find(".google-reviews-prev .input-button-text").text()).toBe("Previous reviews");
+    expect(wrapper.find(".google-reviews-next .input-button-text").text()).toBe("Next reviews");
   });
 
   // ─── Copy and slots ────────────────────────────────────────────────────

package/app/components/03.organisms/services/services-card/CONSUMER-STYLING.md

@@ -155,8 +155,8 @@ cards regardless of each card's description length, without needing CSS subgrid.
 
 `.services-card`, `.services-card-image-wrapper`, `.services-card-details`, and `.services-card-footer` all set
 `min-inline-size: 0`. Without it, an unbreakable child — most commonly a long `actions` slot
-button label, since `InputButton`'s `.button-text` is `white-space: nowrap` with no
-ellipsis — forces its content's min-content width up through the flex/grid chain and widens
+button label kept on one line with `--input-button-text-white-space: nowrap` (the default was
+`nowrap` until 2026-10-17) — forces its content's min-content width up through the flex/grid chain and widens
 that one card's grid column in `ServicesCardGrid` wider than its siblings. If a card/column
 ever looks wider than the rest with content cut off at the edge, check for a long unbreakable
 string in a slot before assuming it's an image sizing issue — the image is just riding along

package/app/components/03.organisms/services/services-grids/tests/ServicesCardGrid.spec.ts

@@ -201,7 +201,7 @@ describe("ServicesCardGrid button icon", () => {
     const wrapper = await mountSuspended(ServicesCardGrid, {
       props: { servicesData: [makeService("untitled", "")] },
     });
-    expect(wrapper.find(".button-text").text()).toBe("Enquire about");
-    expect(wrapper.find(".button-text").element.textContent).toBe("Enquire about");
+    expect(wrapper.find(".input-button-text").text()).toBe("Enquire about");
+    expect(wrapper.find(".input-button-text").element.textContent).toBe("Enquire about");
   });
 });

package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesCardGrid.spec.ts.snap

@@ -17,9 +17,9 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
         <div class="services-card-meta">
           <div class="services-card-meta-duration">60 mins</div>
           <div class="services-card-meta-price">£50</div>
-        </div><a href="/services/locs-installation" data-testid="input-button" data-theme="default" class="input-button secondary mbs-24 is-link">
+        </div><a href="/services/locs-installation" data-testid="input-button" data-theme="default" data-variant="secondary" data-link="" class="input-button mbs-24">
           <!--v-if-->
-          <!--v-if--><span class="button-text">Enquire about Locs Installation</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
+          <!--v-if--><span class="input-button-text">Enquire about Locs Installation</span><span class="input-button-icon" data-slot="right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
       </div>
@@ -40,9 +40,9 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
         <div class="services-card-meta">
           <div class="services-card-meta-duration">60 mins</div>
           <div class="services-card-meta-price">£50</div>
-        </div><a href="/services/locs-retwist" data-testid="input-button" data-theme="default" class="input-button secondary mbs-24 is-link">
+        </div><a href="/services/locs-retwist" data-testid="input-button" data-theme="default" data-variant="secondary" data-link="" class="input-button mbs-24">
           <!--v-if-->
-          <!--v-if--><span class="button-text">Enquire about Locs Retwist</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
+          <!--v-if--><span class="input-button-text">Enquire about Locs Retwist</span><span class="input-button-icon" data-slot="right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
       </div>
@@ -63,9 +63,9 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
         <div class="services-card-meta">
           <div class="services-card-meta-duration">60 mins</div>
           <div class="services-card-meta-price">£50</div>
-        </div><a href="/services/colour-treatment" data-testid="input-button" data-theme="default" class="input-button secondary mbs-24 is-link">
+        </div><a href="/services/colour-treatment" data-testid="input-button" data-theme="default" data-variant="secondary" data-link="" class="input-button mbs-24">
           <!--v-if-->
-          <!--v-if--><span class="button-text">Enquire about Colour Treatment</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
+          <!--v-if--><span class="input-button-text">Enquire about Colour Treatment</span><span class="input-button-icon" data-slot="right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
       </div>

package/app/components/05.forms/form-errors/CONSUMER-STYLING.md

@@ -110,3 +110,11 @@ tokens instead of the `--theme-error-*` ones** above).
 `.input-error-message` element. Field wrappers don't forward it, so in practice use the tokens
 above.
 
+---
+
+## Notes
+
+- Message text wraps anywhere, so a long URL or unbroken word stays inside the strip. There is no
+  line-clamp token: error text should stay readable in full.
+- Blank entries in an array `error-message` are dropped rather than rendered as empty list items.
+

package/app/components/05.forms/form-errors/InputError.vue

@@ -16,8 +16,8 @@
           <Icon :name="icon" class="input-error-message-icon" aria-hidden="true" />
         </div>
         <div class="input-error-message-text">
-          <ul v-if="isArray" class="input-error-message-list">
-            <li v-for="(message, index) in errorMessage" :key="index" class="input-error-message-list-item">
+          <ul v-if="isArray" class="input-error-message-list" role="list">
+            <li v-for="(message, index) in messages" :key="index" class="input-error-message-list-item">
               {{ message }}
             </li>
           </ul>
@@ -52,6 +52,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const isArray = computed(() => Array.isArray(props.errorMessage));
+const messages = computed(() =>
+  Array.isArray(props.errorMessage) ? props.errorMessage.filter((message) => String(message).trim() !== "") : []
+);
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
@@ -141,48 +144,51 @@ watch(
         outline-color: transparent;
       }
     }
-  }
 
-  .input-error-message-inner {
-    align-items: center;
-    overflow: hidden;
-  }
+    & .input-error-message-inner {
+      align-items: center;
+      overflow: hidden;
+    }
 
-  .input-error-message-content {
-    display: flex;
-    align-items: center;
-  }
+    & .input-error-message-content {
+      display: flex;
+      align-items: center;
+    }
 
-  .input-error-message-icon-wrapper {
-    display: inline-block;
-    padding-inline-start: var(--_padding-inline);
-  }
+    & .input-error-message-icon-wrapper {
+      display: inline-block;
+      flex-shrink: 0;
+      padding-inline-start: var(--_padding-inline);
+    }
 
-  .input-error-message-icon {
-    color: var(--input-error-icon-color, var(--_text-color));
-    font-size: var(--input-error-icon-size, 1em);
-    transform: translateY(3px);
-  }
+    & .input-error-message-icon {
+      color: var(--input-error-icon-color, var(--_text-color));
+      font-size: var(--input-error-icon-size, 1em);
+      transform: translateY(3px);
+    }
 
-  .input-error-message-text {
-    display: inline-block;
-    flex-grow: 1;
-    font-family: var(--input-error-font-family, var(--font-family));
-    font-size: var(--input-error-font-size, 1.6rem);
-    font-weight: var(--input-error-font-weight, 500);
-    padding-block: var(--input-error-padding-block-start, var(--_padding-block-start))
-      var(--input-error-padding-block-end, 1rem);
-    padding-inline: var(--_padding-inline);
-  }
+    & .input-error-message-text {
+      display: inline-block;
+      flex-grow: 1;
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
+      font-family: var(--input-error-font-family, var(--font-family));
+      font-size: var(--input-error-font-size, 1.6rem);
+      font-weight: var(--input-error-font-weight, 500);
+      padding-block: var(--input-error-padding-block-start, var(--_padding-block-start))
+        var(--input-error-padding-block-end, 1rem);
+      padding-inline: var(--_padding-inline);
+    }
 
-  .input-error-message-list {
-    list-style-type: none;
-    padding-inline-start: 0;
-    margin-block: 0;
-  }
+    & .input-error-message-list {
+      list-style-type: none;
+      padding-inline-start: 0;
+      margin-block: 0;
+    }
 
-  .input-error-message-list-item + .input-error-message-list-item {
-    margin-block-start: var(--input-error-list-gap, 0.6rem);
+    & .input-error-message-list-item + .input-error-message-list-item {
+      margin-block-start: var(--input-error-list-gap, 0.6rem);
+    }
   }
 }
 </style>