srcdev-nuxt-components 9.6.11 → 9.6.12

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");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.11",
+  "version": "9.6.12",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",