srcdev-nuxt-components 9.6.10 → 9.6.12

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/form-field/CONSUMER-STYLING.md

@@ -89,3 +89,10 @@ Or scoped by a page/section wrapper class:
 
 `:style-class-passthrough` (string or string array) adds classes to the root `.form-field` element.
 
+---
+
+## Notes
+
+- FormField sets no `overflow-wrap` or `min-inline-size` on its slot content. The `*Field`
+  components wrap their own long copy; plain text you slot in directly needs its own wrapping rule.
+

package/app/components/05.forms/form-field/stories/FormField.stories.ts

@@ -1,5 +1,9 @@
+import { ref } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import StorybookComponent from "../FormField.vue";
+import InputTextField from "../../input-text/InputTextField.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 interface FormFieldStoryArgs {
   width: "narrow" | "medium" | "wide";
@@ -27,6 +31,32 @@ export default {
     fieldHasError: false,
     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;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Layout-only wrapper for one form control. `width` (`narrow`/`medium`/`wide`) caps its width, `has-gutter` insets it from the container edges, and `field-has-error` adds `data-invalid`, which switches every descendant to the error theme. Put an `*Field` component in the default slot; it renders no label, input or error text itself. `style-class-passthrough` lands on the `.form-field` root.",
+      },
+    },
+  },
 } as Meta<FormFieldStoryArgs>;
 
 const demoStyles = `
@@ -46,9 +76,23 @@ const demoStyles = `
       padding: 1.2rem;
       font-size: 1.4rem;
     }
+    .form-field-story-note {
+      font-size: 1.4rem;
+      margin: 1.6rem;
+    }
   </component>
 `;
 
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const usageNote = `
+  <p class="form-field-story-note">
+    Dashed outline: container. Solid outline and tint: the FormField. For FormField wrapping real
+    fields inside a form, open the
+    <a href="/?path=/story/patterns-contact-form--default" target="_top">Contact Form</a> pattern or the
+    <a href="/?path=/story/components-forms-form-wrapper-formwrapper--default" target="_top">FormWrapper</a> story.
+  </p>
+`;
+
 const Template: StoryFn<FormFieldStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
@@ -57,7 +101,7 @@ const Template: StoryFn<FormFieldStoryArgs> = (args) => ({
   template: `
     <div>
       ${demoStyles}
-      <p style="font-size: 1.4rem; margin: 1.6rem;">Dashed outline: container. Solid outline and tint: the FormField.</p>
+      ${usageNote}
       <div class="form-field-story-frame">
         <StorybookComponent
           :width="args.width"
@@ -73,6 +117,9 @@ const Template: StoryFn<FormFieldStoryArgs> = (args) => ({
 });
 
 export const Default = Template.bind({});
+Default.parameters = {
+  docs: { description: { story: "One FormField around a placeholder control. Use the Controls panel to try each width, the gutter and the error state." } },
+};
 
 const WidthsTemplate: StoryFn<FormFieldStoryArgs> = (args) => ({
   components: { StorybookComponent },
@@ -82,6 +129,7 @@ const WidthsTemplate: StoryFn<FormFieldStoryArgs> = (args) => ({
   template: `
     <div>
       ${demoStyles}
+      ${usageNote}
       <div class="form-field-story-frame">
         <StorybookComponent
           v-for="w in widths"
@@ -98,7 +146,73 @@ const WidthsTemplate: StoryFn<FormFieldStoryArgs> = (args) => ({
 });
 
 export const AllWidths = WidthsTemplate.bind({});
-AllWidths.parameters = { controls: { include: ["hasGutter", "fieldHasError"] } };
+AllWidths.parameters = {
+  controls: { include: ["hasGutter", "fieldHasError"] },
+  docs: {
+    description: {
+      story: "The three widths stacked. Each caps at its `--form-field-max-width-*` token and shrinks to the container (minus the gutter) below that.",
+    },
+  },
+};
 
 export const NoGutter = Template.bind({});
 NoGutter.args = { width: "wide", hasGutter: false };
+NoGutter.parameters = {
+  docs: { description: { story: "`has-gutter` off: the field runs edge to edge of its container. Use this when the parent already pads its content." } },
+};
+
+const stressLabel =
+  "📧 Elektronischepostadressefürdiebenachrichtigungüberbestellungen https://example.com/a/very/long/unbroken/url <b>not bold</b> البريد";
+const stressValue = "alex.morgan.with.a.very.long.unbroken.address@subdomain.northtown-example.co.uk";
+const stressError = "DieseadresseistleiderungültigbitteüberprüfenSiedieSchreibweise";
+
+const StressTemplate: StoryFn<FormFieldStoryArgs> = (args) => ({
+  components: { StorybookComponent, InputTextField },
+  setup() {
+    const fields = ref([
+      { width: "narrow", hasGutter: true, hasError: true, value: stressValue },
+      { width: "medium", hasGutter: true, hasError: false, value: "" },
+      { width: "wide", hasGutter: false, hasError: true, value: "x" },
+    ]);
+    return { args, fields, stressLabel, stressError };
+  },
+  template: `
+    <div>
+      ${demoStyles}
+      ${usageNote}
+      <div class="form-field-story-frame">
+        <StorybookComponent
+          v-for="(field, index) in fields"
+          :key="index"
+          :width="field.width"
+          :has-gutter="field.hasGutter"
+          :field-has-error="field.hasError"
+          :style-class-passthrough="args.styleClassPassthrough"
+        >
+          <InputTextField
+            v-model="field.value"
+            :name="'stress-' + index"
+            type="email"
+            :label="stressLabel"
+            :error-message="field.hasError ? stressError : ''"
+            :field-has-error="field.hasError"
+            required
+          ></InputTextField>
+        </StorybookComponent>
+      </div>
+    </div>
+  `,
+});
+
+export const StressTest = StressTemplate.bind({});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.parameters = {
+  initialCanvas: "mobileCanvas",
+  controls: { include: ["styleClassPassthrough"] },
+  docs: {
+    description: {
+      story:
+        "Each width, with and without the gutter and error state, around an `InputTextField` carrying long unbroken German, a URL, emoji, HTML-like and right-to-left label copy, a long unbroken value and an unbroken error. Check at every canvas width: every FormField stays inside the dashed container, the gutter stays visible on both sides, and the error theme reaches the field inside. Wrapping the slot content is the slotted control's job (FormField doesn't change `overflow-wrap`), so plain text you slot in needs its own.",
+    },
+  },
+};

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

@@ -35,11 +35,14 @@ behaviour; setting the token now works as expected.
 
 | Selector | When |
 |---|---|
-| `.form-fieldset[aria-invalid="true"]` | `field-has-error` is `true` |
+| `.form-fieldset[aria-invalid="true"]` | `field-has-error` is `true` (the attribute is absent otherwise) |
 | `.form-fieldset[role="radiogroup"]` | Rendered by `MultipleRadiobuttons` (`group-role="radiogroup"`) |
 
 > **Changed 2026-09-26**: the fieldset no longer adds a bare `.error` class in the error state.
 > Target `[aria-invalid="true"]` instead.
+>
+> **Changed 2026-10-17**: a valid fieldset no longer renders `aria-invalid="false"`. Replace any
+> `[aria-invalid="false"]` selector with `:not([aria-invalid])`.
 
 The wrapping components add their own class too (`.single-checkbox-fieldset`,
 `.multiple-checkboxes-fieldset`, `.multiple-radiobuttons-fieldset`), so you can scope overrides
@@ -86,3 +89,10 @@ Set the tokens above on an element you own (a page or section class, or a class
 
 `:style-class-passthrough` (string or string array) adds classes to the `<fieldset>`.
 
+---
+
+## Notes
+
+- The fieldset sets `min-inline-size: 0`, so a native fieldset's min-content width can't push it
+  past a narrow column, and the legend wraps long unbroken copy (`overflow-wrap: anywhere`).
+  Wrapping the slotted controls is the slot content's job.

package/app/components/05.forms/form-fieldset/FormFieldset.vue

@@ -3,11 +3,11 @@
     :id="id"
     :role="groupRole === 'radiogroup' ? 'radiogroup' : undefined"
     :aria-required="groupRole === 'radiogroup' && required ? 'true' : undefined"
-    :aria-invalid="fieldHasError"
+    :aria-invalid="fieldHasError ? 'true' : undefined"
     :name="name"
     class="form-fieldset"
     :class="elementClasses"
-    :data-testid="dataTestid"
+    :data-testid="dataTestid || undefined"
   >
     <legend v-if="legend || slots.legend" class="form-fieldset-legend">
       <slot name="legend">{{ legend }}</slot>
@@ -54,6 +54,7 @@ watch(
 <style lang="css">
 @layer components {
   .form-fieldset {
+    min-inline-size: 0;
     margin-block: var(--form-fieldset-margin-block, 0);
     margin-inline: var(--form-fieldset-margin-inline, 0);
     padding-block: var(--form-fieldset-padding-block, 0);
@@ -65,6 +66,7 @@ watch(
 
     .form-fieldset-legend {
       color: var(--form-fieldset-legend-color, inherit);
+      overflow-wrap: anywhere;
       margin-block: var(--form-fieldset-legend-margin-block, 0.8rem);
       margin-inline: var(--form-fieldset-legend-margin-inline, 0);
       font-size: var(--form-fieldset-legend-font-size, var(--step-5));

package/app/components/05.forms/form-fieldset/stories/FormFieldset.stories.ts

@@ -1,5 +1,8 @@
+import { ref } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import StorybookComponent from "../FormFieldset.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 interface FormFieldsetStoryArgs {
   id: string;
@@ -41,15 +44,53 @@ export default {
     fieldHasError: false,
     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:
+          "Shared `<fieldset>` + `<legend>` wrapper for a group of controls. `legend` (or the `legend` slot) names the group, the `content` slot holds the controls, `group-role` switches between the native `group` and `radiogroup`, and `required`/`field-has-error` set `aria-required` (radiogroup only) and `aria-invalid`. Mostly a building block: `SingleCheckbox`, `MultipleCheckboxes` and `MultipleRadiobuttons` render it.",
+      },
+    },
+  },
 } as Meta<FormFieldsetStoryArgs>;
 
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const parentNote = `
+  <p style="font-size: 1.3rem; margin: 0 0 1.6rem;">
+    Rendered by
+    <a href="/?path=/story/components-forms-input-checkbox-singlecheckbox--default" target="_top">SingleCheckbox</a>,
+    <a href="/?path=/story/components-forms-input-checkbox-multiplecheckboxes--default" target="_top">MultipleCheckboxes</a> and
+    <a href="/?path=/story/components-forms-input-radio-multipleradiobuttons--default" target="_top">MultipleRadiobuttons</a>,
+    which add styled options, a description and an error message. Inspect the fieldset to see role and aria-* output.
+  </p>
+`;
+
 const Template: StoryFn<FormFieldsetStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
     return { args };
   },
   template: `
-    <div style="margin: 3.6rem; max-width: 48rem;">
+    <div>
+      ${parentNote}
       <StorybookComponent
         :id="args.id"
         :name="args.name"
@@ -68,17 +109,40 @@ const Template: StoryFn<FormFieldsetStoryArgs> = (args) => ({
           </label>
         </template>
       </StorybookComponent>
-      <p style="font-size: 1.3rem; margin-top: 1.6rem;">
-        Rendered by SingleCheckbox, MultipleCheckboxes and MultipleRadiobuttons. Inspect the fieldset to see role and aria-* output.
-      </p>
     </div>
   `,
 });
 
 export const Default = Template.bind({});
+Default.parameters = {
+  docs: { description: { story: "A required radio group: `role=\"radiogroup\"` and `aria-required=\"true\"` on the fieldset." } },
+};
 
 export const CheckboxGroup = Template.bind({});
 CheckboxGroup.args = { groupRole: "group", legend: "Interests", required: false };
+CheckboxGroup.parameters = {
+  docs: { description: { story: "`group-role=\"group\"`: no `role` attribute (a fieldset is already a group) and never `aria-required`." } },
+};
 
 export const WithError = Template.bind({});
 WithError.args = { fieldHasError: true };
+WithError.parameters = {
+  docs: { description: { story: "`field-has-error` sets `aria-invalid=\"true\"`. With it off, the attribute is left out entirely." } },
+};
+
+export const StressTest = Template.bind({});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = {
+  legend:
+    "📞 Bevorzugtekontaktmethodefürrückfragenzuihrerbestellung https://example.com/a/very/long/unbroken/url <b>not bold</b> طريقة الاتصال",
+  fieldHasError: true,
+};
+StressTest.parameters = {
+  initialCanvas: "mobileCanvas",
+  docs: {
+    description: {
+      story:
+        "Long unbroken German, a URL, emoji, HTML-like and right-to-left copy in the legend, with the error state on. Check at every canvas width: the legend wraps inside the dashed outline, the fieldset never grows past its column (it sets `min-inline-size: 0`, so a native fieldset's min-content width can't push it out), and markup renders as text. Wrapping the slotted controls is the slot content's job.",
+    },
+  },
+};

package/app/components/05.forms/form-fieldset/tests/FormFieldset.spec.ts

@@ -22,6 +22,11 @@ describe("FormFieldset", () => {
     expect(fieldset.attributes("data-testid")).toBe("fieldset-test");
   });
 
+  it("omits data-testid when none is given", async () => {
+    const wrapper = await mountSuspended(FormFieldset, { props: baseProps });
+    expect(wrapper.find("fieldset").attributes("data-testid")).toBeUndefined();
+  });
+
   it("renders the content slot", async () => {
     const wrapper = await mountSuspended(FormFieldset, {
       props: baseProps,
@@ -79,6 +84,11 @@ describe("FormFieldset", () => {
       expect(wrapper.find("fieldset").attributes("aria-invalid")).toBe("true");
     });
 
+    it("omits aria-invalid when fieldHasError is false", async () => {
+      const wrapper = await mountSuspended(FormFieldset, { props: baseProps });
+      expect(wrapper.find("fieldset").attributes("aria-invalid")).toBeUndefined();
+    });
+
     it("does not add a bare error class", async () => {
       const wrapper = await mountSuspended(FormFieldset, { props: { ...baseProps, fieldHasError: true } });
       expect(wrapper.find("fieldset").classes()).not.toContain("error");