srcdev-nuxt-components 9.6.9 → 9.6.11

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>

package/app/components/05.forms/form-errors/stories/InputError.stories.ts

@@ -1,5 +1,8 @@
+import { ref } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import StorybookComponent from "../InputError.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 interface InputErrorStoryArgs {
   id: string;
@@ -44,15 +47,52 @@ export default {
     icon: "radix-icons:circle-backslash",
     styleClassPassthrough: "",
   },
+  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",
+    docs: {
+      description: {
+        component:
+          "The error strip every `*Field` wrapper renders under its control, in grid row 2. `error-message` takes a string or an array (rendered as a list), `show-error` opens it, `is-detached` chooses between tucked under the control and sitting below it with a gap, and `input-variant` matches the control's variant. The control in these stories is a stand-in; see [InputTextField](?path=/story/components-forms-input-text-inputtextfield--with-error) (attached) and [MultipleCheckboxes](?path=/story/components-forms-input-checkbox-multiplecheckboxes--error-state) (detached) for it in real use.",
+      },
+    },
+  },
 } as Meta<InputErrorStoryArgs>;
 
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const fieldNote = `
+  <p style="${storyNoteStyle}">
+    Every field wrapper renders this strip for you. See it attached under a real control in the
+    <a href="/?path=/story/components-forms-input-text-inputtextfield--with-error" target="_top">InputTextField</a>
+    story, and detached under a group in the
+    <a href="/?path=/story/components-forms-input-checkbox-multiplecheckboxes--error-state" target="_top">MultipleCheckboxes</a>
+    story.
+  </p>
+`;
+
 const demoStyles = `
   <component is="style">
     .input-error-story-field {
       display: grid;
       grid-template-rows: auto auto;
       max-width: 48rem;
-      margin: 3.6rem;
     }
     .input-error-story-control {
       grid-row: 1;
@@ -84,6 +124,7 @@ const Template: StoryFn<InputErrorStoryArgs> = (args) => ({
   template: `
     <div>
       ${demoStyles}
+      ${fieldNote}
       <div
         class="input-error-story-field"
         :data-invalid="args.showError ? '' : undefined"
@@ -105,21 +146,58 @@ const Template: StoryFn<InputErrorStoryArgs> = (args) => ({
 });
 
 export const Attached = Template.bind({});
+Attached.parameters = {
+  docs: { description: { story: "The default: tucked under the control's bottom edge, sharing its border." } },
+};
 
 export const Detached = Template.bind({});
 Detached.args = { isDetached: true };
+Detached.parameters = {
+  docs: { description: { story: "Sits below the control with a gap (`--input-error-detached-offset`) and fully rounded corners, as used under checkbox and radio groups." } },
+};
 
 export const MultipleMessages = Template.bind({});
 MultipleMessages.args = {
   isDetached: true,
   errorMessage: ["Password must be at least 12 characters", "Password must contain a number"],
 };
+MultipleMessages.parameters = {
+  docs: { description: { story: "An array `error-message` renders as a list, spaced by `--input-error-list-gap`." } },
+};
 
 export const Underlined = Template.bind({});
 Underlined.args = { inputVariant: "underlined" };
+Underlined.parameters = {
+  docs: { description: { story: "Square corners, and no outline while attached, to match an underlined control." } },
+};
 
 export const Hidden = Template.bind({});
 Hidden.args = { showError: false };
 Hidden.parameters = {
   docs: { description: { story: "Toggle `showError` to see the open/close animation." } },
 };
+
+export const StressTest = Template.bind({});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = {
+  isDetached: true,
+  errorMessage: [
+    "DieseEingabeistleiderungültigbitteüberprüfenSiedieSchreibweiseundversuchenSieeserneut",
+    "https://example.com/a/very/long/unbroken/url/that/should/wrap/inside/the/strip?with=query&and=more",
+    "<b>not bold</b> <script>alert(1)</script>",
+    "⚠️ Bitte geben Sie eine gültige E-Mail-Adresse ein. Wir verwenden Ihre Adresse ausschließlich für Rückfragen zu Ihrer Bestellung bei Alex Morgan in Northtown.",
+    "يرجى إدخال عنوان بريد إلكتروني صالح",
+    "x",
+    "",
+  ],
+};
+StressTest.parameters = {
+  initialCanvas: "mobileCanvas",
+  docs: {
+    story: { inline: false, height: "720px" },
+    description: {
+      story:
+        "Long unbroken German, a long URL, HTML-like text, emoji, right-to-left text, a single character and an empty string in one array. Check at every canvas width: every message wraps inside the strip (no horizontal overflow past the dashed outline), the icon keeps its size, markup renders as text, and the empty item takes no visible space. Switch `errorMessage` to a single long string to check the non-list path too. Error text is never line-clamped: a truncated validation message can't be acted on.",
+    },
+  },
+};

package/app/components/05.forms/form-errors/tests/InputError.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, afterEach, vi } from "vitest";
 import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { nextTick } from "vue";
@@ -22,6 +22,11 @@ const wrapperFactory = (propsData = {}) => {
 };
 
 describe("InputError", () => {
+  afterEach(() => {
+    wrapper?.unmount();
+    vi.restoreAllMocks();
+  });
+
   it("renders the root with id, testid, error theme and passthrough classes", async () => {
     wrapper = await wrapperFactory();
     const root = wrapper.find(".input-error-message");
@@ -92,6 +97,29 @@ describe("InputError", () => {
     expect(items[1]!.text()).toBe("Hello World 2");
   });
 
+  it("keeps list semantics on the unstyled list", async () => {
+    wrapper = await wrapperFactory({ errorMessage: ["Hello World", "Hello World 2"] });
+
+    expect(wrapper.find(".input-error-message-list").attributes("role")).toBe("list");
+  });
+
+  it("drops blank entries from an array of messages", async () => {
+    wrapper = await wrapperFactory({ errorMessage: ["First", "", "   ", "Second"] });
+    const items = wrapper.findAll(".input-error-message-list-item");
+
+    expect(items).toHaveLength(2);
+    expect(items[0]!.text()).toBe("First");
+    expect(items[1]!.text()).toBe("Second");
+  });
+
+  it("renders HTML-like message text as text", async () => {
+    wrapper = await wrapperFactory({ errorMessage: "<b>not bold</b>" });
+    const message = wrapper.find(".input-error-message-single");
+
+    expect(message.find("b").exists()).toBe(false);
+    expect(message.text()).toBe("<b>not bold</b>");
+  });
+
   it("renders a decorative icon that can be overridden", async () => {
     wrapper = await wrapperFactory();
     const icon = wrapper.find(".input-error-message-icon");

package/app/components/05.forms/input-button/CONSUMER-STYLING.md

@@ -7,14 +7,21 @@ Every colour token below is `var(--input-button-{variant}-{property}, {default})
 the shared `--theme-*` slot every other themed component (inputs, alerts, ...) also falls back to.
 See `theming-component-token-pattern.md` for why this two-tier shape exists.
 
-**Resting state is flat by design**: `border` defaults to the variant's own surface colour, so
-there's no visible edge until you hover, focus, or override it. **`outline` defaults to fully
-transparent** in both resting and hover state — outline is reserved for the focus-visible ring,
-not used to reinforce the flat look. **Hover always darkens the resting surface** via `color-mix()`
-rather than jumping to a different `--theme-*` step — it's reliably darker in both light and dark
-mode. **`:focus-visible` is a separate token set**, not grouped with hover, since it's the one
-state that gets a real, independently-themeable indicator (its `outline-width`/`-offset` come from
-`--button-focus-ring-width`/`-offset`, not from here — see `theming-form-geometry-tokens.md`).
+The variants follow the usual hierarchy: **primary** is filled, **secondary** is outlined
+(transparent background, border and text in the theme colour), **tertiary** is text-only
+(no background or border until hover), and **inline** has no colours at all, for wrapper
+components that style the button themselves. Primary and secondary also carry a light **shadow ring** (`box-shadow`, 2px of theme step 2)
+outside the border, and on **hover** their 1px outline (no offset) takes the hover border colour,
+so it draws over the inner edge of that ring. Tertiary has neither. The `outline` is transparent
+at rest. **`:focus-visible` is a separate token set**
+(its `outline-width`/`-offset` come from `--button-focus-ring-width`/`-offset`, see
+`theming-form-geometry-tokens.md`).
+
+> **Changed 2026-10-17**: secondary was filled with `--theme-surface-inverted`, which read as a
+> darker primary; tertiary was a grey `--slate-01` fill with an underlined label. To bring back
+> the old look for one site, set the secondary or tertiary tokens below (e.g.
+> `--input-button-secondary-surface: var(--theme-surface-inverted)` and
+> `--input-button-secondary-text: var(--theme-text-inverted)`).
 
 Geometry and typography (`--button-*`) are separate, already-global tokens with real defaults —
 see `theming-form-geometry-tokens.md`. Not duplicated here. One geometry token worth calling out:
@@ -32,60 +39,78 @@ the `InlineWithTextInput` story). `box-sizing: content-box` means it's a floor,
 | `--input-button-primary-ring` | `transparent` | Outline colour (resting) |
 | `--input-button-primary-surface-hover` | `color-mix(in oklab, surface 85%, black)` | Background on hover |
 | `--input-button-primary-border-hover` | the resolved hover surface above | Border colour on hover |
-| `--input-button-primary-ring-hover` | `transparent` | Outline colour on hover |
+| `--input-button-primary-ring-hover` | the resolved hover border above | Outline colour on hover (1px, no offset) |
+| `--input-button-primary-shadow` | `var(--form-element-shadow-colour, var(--colour-theme-2))` | Shadow ring colour (all states) |
 | `--input-button-primary-border-focus` | `var(--theme-border-focus)` | Border colour on `:focus-visible` |
 | `--input-button-primary-ring-focus` | `var(--theme-ring)` | Outline colour on `:focus-visible` |
 
-### Secondary
+### Secondary (outlined)
 
-Same shape, falls back to the inverted-surface slots instead:
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-button-secondary-surface` | `transparent` | Background (resting) |
+| `--input-button-secondary-text` | `var(--theme-surface)` | Text colour (all states) |
+| `--input-button-secondary-border` | `var(--theme-surface)` | Border colour (resting) |
+| `--input-button-secondary-ring` | `transparent` | Outline colour (resting) |
+| `--input-button-secondary-ring-hover` | the resolved hover border | Outline colour on hover (1px, no offset) |
+| `--input-button-secondary-shadow` | `var(--form-element-shadow-colour, var(--colour-theme-2))` | Shadow ring colour (all states) |
+| `--input-button-secondary-surface-hover` | `var(--theme-surface-subtle)` | Background on hover |
+| `--input-button-secondary-border-hover` | the resolved border above | Border colour on hover |
+| `--input-button-secondary-border-focus` | `var(--theme-border-focus)` | Border colour on `:focus-visible` |
+| `--input-button-secondary-ring-focus` | `var(--theme-ring)` | Outline colour on `:focus-visible` |
+
+### Tertiary (text-only)
 
-| Token | Falls back to |
-|---|---|
-| `--input-button-secondary-surface` | `var(--theme-surface-inverted)` |
-| `--input-button-secondary-text` | `var(--theme-text-inverted)` |
-| `--input-button-secondary-border` | the resolved surface above (flat) |
-| `--input-button-secondary-ring` / `-ring-hover` | `transparent` |
-| `--input-button-secondary-surface-hover` | `color-mix(in oklab, surface 85%, black)` |
-| `--input-button-secondary-border-hover` | the resolved hover surface above |
-| `--input-button-secondary-border-focus` | `var(--theme-border-focus)` |
-| `--input-button-secondary-ring-focus` | `var(--theme-ring)` |
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-button-tertiary-surface` | `transparent` | Background (resting) |
+| `--input-button-tertiary-text` | `var(--theme-surface)` | Text colour (all states) |
+| `--input-button-tertiary-border` | `transparent` | Border colour (resting) |
+| `--input-button-tertiary-ring` / `-ring-hover` | `transparent` | Outline colour |
+| `--input-button-tertiary-surface-hover` | `var(--theme-surface-subtle)` | Background on hover |
+| `--input-button-tertiary-border-hover` | `transparent` | Border colour on hover |
+| `--input-button-tertiary-border-focus` | `var(--theme-border-focus)` | Border colour on `:focus-visible` |
+| `--input-button-tertiary-ring-focus` | `var(--theme-ring)` | Outline colour on `:focus-visible` |
+
+| Token | Default | Controls |
+|---|---|---|
+| `--input-button-shadow-width` | `var(--form-element-shadow-width)` (`0.2rem`) | Width of the primary and secondary shadow ring. Set `0` to remove it from buttons only; set the global token to `0` to remove it from every form control |
 
-### Tertiary
+The focus ring's offset (`--button-focus-ring-offset`, `0.2rem`) puts it just outside the shadow
+ring; if you widen the ring, raise the offset to match or the focus ring will draw over it. An
+ancestor with `overflow: hidden` and no spare room clips the ring.
 
-Same shape again:
+Secondary and tertiary text sits on the page background, so on a dark section set their `-text`
+and `-border` tokens to a light colour.
 
-| Token | Falls back to |
-|---|---|
-| `--input-button-tertiary-surface` | `var(--slate-01)` |
-| `--input-button-tertiary-text` | `var(--theme-text)` |
-| `--input-button-tertiary-border` | the resolved surface above (flat) |
-| `--input-button-tertiary-ring` / `-ring-hover` | `transparent` |
-| `--input-button-tertiary-surface-hover` | `color-mix(in oklab, surface 85%, black)` |
-| `--input-button-tertiary-border-hover` | the resolved hover surface above |
-| `--input-button-tertiary-border-focus` | `var(--theme-border-focus)` |
-| `--input-button-tertiary-ring-focus` | `var(--theme-ring)` |
-
-`.is-pending` always dims the *primary* surface regardless of variant — a pre-existing quirk, not
-something this token set changes. The animated border added by `has-pending-effect` has its own
-`--pending-effect-*` tokens, see `../pending-effect/CONSUMER-STYLING.md`.
+`[data-pending]` dims a primary button's surface to 50%; secondary and tertiary keep their own
+background. The animated border added by `has-pending-effect` has its own `--pending-effect-*`
+tokens, see `../pending-effect/CONSUMER-STYLING.md`.
 
 ### Text wrapping
 
 | Token | Default | Controls |
 |---|---|---|
-| `--input-button-text-white-space` | `nowrap` | Set `normal` to let a long label wrap onto several lines instead of overflowing the button. Unbroken strings break anywhere once wrapping is on |
+| `--input-button-text-white-space` | `normal` | Long labels wrap onto several lines inside the button, and unbroken strings break anywhere. Set `nowrap` to keep a label on one line; the button then grows to fit it and can overflow a narrow container |
 
-> Added 2026-10-06. `ServicesCardGrid` sets it to `normal` on its CTA buttons so a long service title stays inside the card.
+> Added 2026-10-06. **Changed 2026-10-17**: the default was `nowrap`, which pushed a long label
+> past a narrow column. If you relied on one-line labels in a tight row, set
+> `--input-button-text-white-space: nowrap` on that row.
+
+Button text has no line-clamp token on purpose: a cut-off action label can't be trusted.
+
+Private tokens (not public API): `--_surface` and `--_surface-hover` (primary's resolved
+surfaces, which its border, hover and contrast colours derive from) and `--_primary-border-hover`, `--_secondary-border` and `--_secondary-border-hover`.
 
 `InputCopy` and `PricingCard` fall back through `--input-button-primary-*` for their own copy/CTA
 buttons (see their own `CONSUMER-STYLING.md`) rather than duplicating this chain.
 
 > **Trial, 2026-09-27: automatic text contrast.** In browsers that support CSS `contrast-color()`
-> (Safari/iOS 26, Firefox 146, Chrome/Edge 147), an unset `--input-button-{variant}-text` resolves
+> (Safari/iOS 26, Firefox 146, Chrome/Edge 147), an unset `--input-button-primary-text` resolves
 > to `contrast-color()` of that state's own surface: pure black or pure white, whichever has more
 > contrast, re-evaluated on hover. Older browsers keep the defaults in the tables above. Setting
-> the `-text` token explicitly always wins, so you can opt a variant out. The whole behaviour is
+> the `-text` token explicitly always wins, so you can opt out. Secondary and tertiary aren't part of the trial since
+> 2026-10-17: their surface is transparent. The whole behaviour is
 > one `@supports` block in `InputButton.vue` and may be removed if the trial doesn't hold up.
 
 ---
@@ -101,15 +126,23 @@ buttons (see their own `CONSUMER-STYLING.md`) rather than duplicating this chain
 
 | Hook | When |
 |---|---|
-| `.primary`, `.secondary`, `.tertiary`, `.inline` | The `variant` prop |
+| `[data-variant="primary" \| "secondary" \| "tertiary" \| "inline"]` | The `variant` prop |
 | `[data-theme]` | The `theme` prop (re-declares the `--theme-*` palette on the button) |
-| `.icon-only` | The `#iconOnly` slot is used (square, text becomes `sr-only`) |
-| `.pill` | `is-pill` |
-| `.is-pending`, `.pending-effect` | `is-pending` / `has-pending-effect` |
-| `.is-link` | `href` is set (renders `NuxtLink` or `<a>`) |
+| `[data-icon-only]` | The `#iconOnly` slot is used (square, text becomes `sr-only`) |
+| `[data-pill]` | `is-pill` |
+| `[data-pending]`, `[data-pending-effect]` | `is-pending` / `has-pending-effect` |
+| `[data-link]` | `href` is set (renders `NuxtLink` or `<a>`) |
 | `[readonly]` + `aria-disabled="true"` | `readonly` (dimmed, not operable by mouse or keyboard) |
 
-Inner classes: `.button-text`, `.btn-icon` with `.left` / `.right` / `.icon-only`.
+Inner elements: `.input-button-text`, and `.input-button-icon` with `data-slot="left"`,
+`"right"` or `"icon-only"`.
+
+> **Changed 2026-10-17**: these were bare classes, which collided with consumer CSS. Update
+> selectors: `.input-button.primary` → `.input-button[data-variant="primary"]`, `.pill` →
+> `[data-pill]`, `.is-pending` → `[data-pending]`, `.pending-effect` → `[data-pending-effect]`,
+> `.is-link` → `[data-link]`, `.icon-only` → `[data-icon-only]`, `.button-text` →
+> `.input-button-text`, `.btn-icon.left` → `.input-button-icon[data-slot="left"]`. Same
+> specificity, so overrides keep winning where they did.
 
 
 ## Global theming