srcdev-nuxt-components 9.6.7 → 9.6.8

package/app/components/05.forms/input-number/stories/InputNumber.stories.ts

@@ -1,8 +1,10 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref } from "vue";
-import StorybookComponent from "../InputNumber.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputNumber from "../InputNumber.vue";
+import InputButton from "../../input-button/InputButton.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
-interface InputNumberStoryArgs {
+interface StoryArgs {
   id: string;
   name: string;
   min: number;
@@ -11,13 +13,23 @@ interface InputNumberStoryArgs {
   placeholder: string;
   required: boolean;
   fieldHasError: boolean;
+  theme: FormUiTheme;
   weight: string;
-  inputVariant: string;
+  inputVariant: InputUiVariant;
 }
 
-export default {
+// 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 parentNote = `
+  <p style="${storyNoteStyle}">
+    With a label, description, error message and clamped step buttons wired up, this is the
+    <a href="/?path=/story/components-forms-input-number-inputnumberfield--with-step-buttons" target="_top">InputNumberField</a>.
+  </p>
+`;
+
+const meta: Meta<StoryArgs> = {
   title: "Components/Forms/Input Number/InputNumber",
-  component: StorybookComponent,
+  component: InputNumber,
   argTypes: {
     id: { control: "text", table: { category: "Basic" } },
     name: { control: "text", table: { category: "Basic" } },
@@ -27,7 +39,12 @@ export default {
     placeholder: { control: "text", table: { category: "Basic" } },
     required: { control: "boolean", table: { category: "Basic" } },
     fieldHasError: { control: "boolean", table: { category: "States" } },
-    weight: { control: "text", table: { category: "Styling" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    weight: { control: "text", description: "Adds an `input-number--{weight}` class; nothing styles it yet", table: { category: "Styling" } },
     inputVariant: {
       control: { type: "select" },
       options: ["normal", "outlined", "underlined"],
@@ -43,50 +60,84 @@ export default {
     placeholder: "",
     required: false,
     fieldHasError: false,
+    theme: "default",
     weight: "normal",
     inputVariant: "normal",
   },
-} as Meta<InputNumberStoryArgs>;
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The bare native `<input type=\"number\">` with `left`/`right` slots for embedded step buttons. No label, description or error: that's `InputNumberField`. `inputmode` follows `min` and `step` (`numeric`, `decimal`, or none when negatives are allowed). Hooks: `data-input-variant`, `data-theme`, `data-invalid`, `data-has-left-slot`, `data-has-right-slot`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
 
-const Template: StoryFn<InputNumberStoryArgs> = (args) => ({
-  components: { StorybookComponent },
+const render = (args: StoryArgs) => ({
+  components: { InputNumber },
   setup() {
     const modelValue = ref(50);
     return { args, modelValue };
   },
   template: `
     <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue" />
+      ${parentNote}
+      <InputNumber v-bind="args" v-model="modelValue" />
     </div>
   `,
 });
 
-export const Default = Template.bind({});
-
-export const ErrorState = Template.bind({});
-ErrorState.args = { fieldHasError: true };
-
-const WithStepButtonsTemplate: StoryFn<InputNumberStoryArgs> = (args) => ({
-  components: { StorybookComponent },
+const renderWithSlots = (args: StoryArgs) => ({
+  components: { InputNumber, InputButton },
   setup() {
     const modelValue = ref(50);
     return { args, modelValue };
   },
   template: `
     <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue">
+      ${parentNote}
+      <InputNumber v-bind="args" v-model="modelValue">
         <template #left>
-          <button type="button" @click="modelValue = Math.max(args.min, modelValue - args.step)">−</button>
+          <InputButton type="button" button-text="Step down" variant="inline" @click="modelValue = Math.max(args.min, modelValue - args.step)">
+            <template #iconOnly><Icon name="mdi:minus" /></template>
+          </InputButton>
         </template>
         <template #right>
-          <button type="button" @click="modelValue = Math.min(args.max, modelValue + args.step)">+</button>
+          <InputButton type="button" button-text="Step up" variant="inline" @click="modelValue = Math.min(args.max, modelValue + args.step)">
+            <template #iconOnly><Icon name="mdi:plus" /></template>
+          </InputButton>
         </template>
-      </StorybookComponent>
+      </InputNumber>
     </div>
   `,
 });
 
-export const WithStepButtons = WithStepButtonsTemplate.bind({});
+export const Default: Story = { render };
+
+export const ErrorState: Story = {
+  args: { fieldHasError: true },
+  render,
+  parameters: { docs: { description: { story: "`fieldHasError` sets `data-invalid` on the wrapper." } } },
+};
+
+export const WithStepButtons: Story = {
+  render: renderWithSlots,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Inline `InputButton`s in the `left`/`right` slots become flush segments of the control. The wiring here is deliberately minimal; `InputNumberField` does it properly (clamping, rounding, empty field).",
+      },
+    },
+  },
+};
 
-export const Underlined = WithStepButtonsTemplate.bind({});
-Underlined.args = { inputVariant: "underlined" };
+export const Underlined: Story = {
+  args: { inputVariant: "underlined" },
+  render: renderWithSlots,
+  parameters: { docs: { description: { story: "`inputVariant=\"underlined\"` keeps only a bottom border." } } },
+};

package/app/components/05.forms/input-number/stories/InputNumberField.stories.ts

@@ -1,8 +1,11 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import StorybookComponent from "../InputNumberField.vue";
-import type { FormUiTheme } from "~/types/forms/types.forms.d";
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputNumberField from "../InputNumberField.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
 
-interface InputNumberFieldStoryArgs {
+interface StoryArgs {
   modelValue: number;
   name: string;
   label: string;
@@ -14,15 +17,16 @@ interface InputNumberFieldStoryArgs {
   fieldHasError: boolean;
   required: boolean;
   theme: FormUiTheme;
-  inputVariant: string;
+  inputVariant: InputUiVariant;
   stepDownLabel: string;
   stepUpLabel: string;
   useStepButtons: boolean;
+  descriptionText: string;
 }
 
-export default {
+const meta: Meta<StoryArgs> = {
   title: "Components/Forms/Input Number/InputNumberField",
-  component: StorybookComponent,
+  component: InputNumberField,
   argTypes: {
     modelValue: { control: "number", table: { category: "Model" } },
     name: { control: "text", table: { category: "Basic" } },
@@ -46,7 +50,16 @@ export default {
     },
     stepDownLabel: { control: "text", description: "Localisation override for the step-down button", table: { category: "Accessibility" } },
     stepUpLabel: { control: "text", description: "Localisation override for the step-up button", table: { category: "Accessibility" } },
-    useStepButtons: { control: "boolean", description: "Render +/- step buttons via left/right slots", table: { category: "Slots" } },
+    useStepButtons: {
+      control: "boolean",
+      description: "Story-only: render the +/- step buttons by filling the left/right slots",
+      table: { category: "Slots" },
+    },
+    descriptionText: {
+      control: "text",
+      description: "Story-only: fills the descriptionText slot",
+      table: { category: "Slots" },
+    },
   },
   args: {
     modelValue: 5,
@@ -64,60 +77,113 @@ export default {
     stepDownLabel: "Step down",
     stepUpLabel: "Step up",
     useStepButtons: false,
+    descriptionText: "",
+  },
+  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:
+          "Labelled number field: `InputLabel`, an optional description, `InputNumber` and an error strip. Filling the `left`/`right` slots with an icon adds step buttons: they step by `step`, round away floating-point drift, clamp to `min`/`max` (pulling a typed out-of-range value back in) and start from 0, clamped, when the field is empty. `stepDownLabel`/`stepUpLabel` localise their accessible names.",
+      },
+    },
   },
-} as Meta<InputNumberFieldStoryArgs>;
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
 
-const Template: StoryFn<InputNumberFieldStoryArgs> = (args) => ({
-  components: { StorybookComponent },
+const render = (args: StoryArgs) => ({
+  components: { InputNumberField },
   setup() {
-    return { args };
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, useStepButtons: _useStepButtons, descriptionText: _descriptionText, ...rest } = args;
+      return rest;
+    });
+    return { args, componentArgs };
   },
   template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent
-        v-model="args.modelValue"
-        :name="args.name"
-        :label="args.label"
-        :min="args.min"
-        :max="args.max"
-        :step="args.step"
-        :placeholder="args.placeholder"
-        :error-message="args.errorMessage"
-        :field-has-error="args.fieldHasError"
-        :required="args.required"
-        :theme="args.theme"
-        :input-variant="args.inputVariant"
-        :step-down-label="args.stepDownLabel"
-        :step-up-label="args.stepUpLabel"
-      >
-        <template v-if="args.useStepButtons" #left><span>−</span></template>
-        <template v-if="args.useStepButtons" #right><span>+</span></template>
-      </StorybookComponent>
-    </div>
+    <InputNumberField v-model="args.modelValue" v-bind="componentArgs">
+      <template v-if="args.descriptionText" #descriptionText>{{ args.descriptionText }}</template>
+      <template v-if="args.useStepButtons" #left><Icon name="mdi:minus" /></template>
+      <template v-if="args.useStepButtons" #right><Icon name="mdi:plus" /></template>
+    </InputNumberField>
+    <p style="margin-block-start: 1.6rem; font-family: monospace;">modelValue: {{ JSON.stringify(args.modelValue) }}</p>
   `,
 });
 
-export const Default = Template.bind({});
+export const Default: Story = { render };
+
+export const WithStepButtons: Story = {
+  args: { useStepButtons: true },
+  render,
+  parameters: { docs: { description: { story: "Step buttons from the `left`/`right` slots. Step-down goes read-only at `min`, step-up at `max`." } } },
+};
 
-export const WithStepButtons = Template.bind({});
-WithStepButtons.args = { useStepButtons: true };
+export const DecimalSteps: Story = {
+  args: { useStepButtons: true, label: "Weight (kg)", modelValue: 0.2, min: 0, max: 2, step: 0.1 },
+  render,
+  parameters: {
+    docs: { description: { story: "A fractional `step`: stepping up from 0.2 gives 0.3, not 0.30000000000000004, and the mobile keyboard is `decimal`." } },
+  },
+};
 
-export const WithError = Template.bind({});
-WithError.args = {
-  fieldHasError: true,
-  errorMessage: "Please enter a valid quantity",
-  theme: "error",
+export const WithError: Story = {
+  args: { fieldHasError: true, errorMessage: "Please enter a valid quantity", theme: "error" },
+  render,
 };
 
-export const Required = Template.bind({});
-Required.args = { required: true };
+export const Required: Story = { args: { required: true }, render };
 
-export const LocalisedLabels = Template.bind({});
-LocalisedLabels.args = {
-  useStepButtons: true,
-  stepDownLabel: "Diminuer",
-  stepUpLabel: "Augmenter",
+export const LocalisedLabels: Story = {
+  args: { useStepButtons: true, stepDownLabel: "Diminuer", stepUpLabel: "Augmenter" },
+  render,
 };
 
-export const Underlined = Template.bind({});
-Underlined.args = { inputVariant: "underlined", useStepButtons: true };
+export const Underlined: Story = { args: { inputVariant: "underlined", useStepButtons: true }, render };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    useStepButtons: true,
+    modelValue: 123456789012,
+    min: -999999999999,
+    max: 999999999999999,
+    step: 0.0001,
+    label:
+      "🔢 Gewünschteanzahlderteilnehmendenpersonenfürdiegruppenbuchung https://example.com/a/very/long/unbroken/url <b>not bold</b> عدد",
+    descriptionText: "يرجى إدخال رقم Geben Sie eine Zahl zwischen minus einer Billion und einer Billiarde ein.",
+    placeholder: "Bitte eine sehr lange Platzhalterzahl eingeben",
+    errorMessage: "DiesezahlliegtleideraußerhalbdeszulässigenBereichsbitteversuchenSieeserneut",
+    fieldHasError: true,
+    stepDownLabel: "Verringern 🔽",
+    stepUpLabel: "Erhöhen 🔼",
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "A 12-digit value, a min of minus a trillion, a 15-digit max and a 0.0001 step, with long unbroken German/URL/emoji/RTL/HTML-like copy. Check at every canvas width: the label, description and error wrap inside the dashed outline, the control's minimum width is capped (12em) so it fits a phone, the step buttons keep their size, and markup renders as text. Clear the field and press step-up (starts from 0), type 9999999999999999 and press step-down (clamps to max), and set `step` to 0 or a negative number.",
+      },
+    },
+  },
+};

package/app/components/05.forms/input-number/tests/InputNumber.spec.ts

@@ -12,6 +12,11 @@ const initialPropsData = {
 };
 
 let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+
+afterEach(() => {
+  wrapper?.unmount();
+  vi.restoreAllMocks();
+});
 const wrapperFactory = (propsData = {}, slots = {}) => {
   const mockPropsData = { ...initialPropsData, ...propsData };
 
@@ -70,10 +75,10 @@ describe("InputNumber", () => {
 
   it("does not render the left/right slot wrappers when the slots are not used", async () => {
     wrapper = await wrapperFactory();
-    expect(wrapper.find(".slot.left-slot").exists()).toBe(false);
-    expect(wrapper.find(".slot.right-slot").exists()).toBe(false);
-    expect(wrapper.find(".input-number-wrapper").classes()).not.toContain("has-left-slot");
-    expect(wrapper.find(".input-number-wrapper").classes()).not.toContain("has-right-slot");
+    expect(wrapper.find(".input-number-slot-left").exists()).toBe(false);
+    expect(wrapper.find(".input-number-slot-right").exists()).toBe(false);
+    expect(wrapper.find(".input-number-wrapper").attributes("data-has-left-slot")).toBeUndefined();
+    expect(wrapper.find(".input-number-wrapper").attributes("data-has-right-slot")).toBeUndefined();
   });
 
   it("renders the left/right slots when provided", async () => {
@@ -85,10 +90,10 @@ describe("InputNumber", () => {
       }
     );
 
-    expect(wrapper.find(".slot.left-slot [data-testid='left-slot']").exists()).toBe(true);
-    expect(wrapper.find(".slot.right-slot [data-testid='right-slot']").exists()).toBe(true);
-    expect(wrapper.find(".input-number-wrapper").classes()).toContain("has-left-slot");
-    expect(wrapper.find(".input-number-wrapper").classes()).toContain("has-right-slot");
+    expect(wrapper.find(".input-number-slot-left [data-testid='left-slot']").exists()).toBe(true);
+    expect(wrapper.find(".input-number-slot-right [data-testid='right-slot']").exists()).toBe(true);
+    expect(wrapper.find(".input-number-wrapper").attributes("data-has-left-slot")).toBe("");
+    expect(wrapper.find(".input-number-wrapper").attributes("data-has-right-slot")).toBe("");
   });
 
   it("applies the weight class from the weight prop", async () => {
@@ -106,14 +111,45 @@ describe("InputNumber", () => {
     expect(wrapper.find("input").attributes("required")).toBeDefined();
   });
 
-  it("defaults inputVariant to normal", async () => {
+  it("defaults data-input-variant to normal", async () => {
     wrapper = await wrapperFactory();
-    expect(wrapper.find(".input-number-wrapper").classes()).toContain("normal");
+    expect(wrapper.find(".input-number-wrapper").attributes("data-input-variant")).toBe("normal");
   });
 
-  it("applies inputVariant as a class on the wrapper", async () => {
+  it("renders inputVariant as data-input-variant, not a bare class", async () => {
     wrapper = await wrapperFactory({ inputVariant: "underlined" });
-    expect(wrapper.find(".input-number-wrapper").classes()).toContain("underlined");
-    expect(wrapper.find(".input-number-wrapper").classes()).not.toContain("normal");
+    const root = wrapper.find(".input-number-wrapper");
+    expect(root.attributes("data-input-variant")).toBe("underlined");
+    expect(root.classes()).not.toContain("underlined");
+  });
+
+  it("doesn't set a pattern, which number inputs ignore", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("input").attributes("pattern")).toBeUndefined();
+  });
+
+  it("picks inputmode from min and step", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("input").attributes("inputmode")).toBe("numeric");
+
+    await wrapper.setProps({ step: 0.5 });
+    expect(wrapper.find("input").attributes("inputmode")).toBe("decimal");
+
+    await wrapper.setProps({ min: -10 });
+    expect(wrapper.find("input").attributes("inputmode")).toBeUndefined();
+  });
+
+  it("caps the minimum width for very long min and max values", async () => {
+    wrapper = await wrapperFactory({ min: -999999999999, max: 999999999999999, step: 0.0001 });
+    const vm = wrapper.vm as unknown as { minLength: string };
+    expect(vm.minLength).toBe("12em");
+  });
+
+  it("updates passthrough classes when the prop changes", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["first"] });
+    await wrapper.setProps({ styleClassPassthrough: ["second"] });
+    const classes = wrapper.find("input").classes();
+    expect(classes).toContain("second");
+    expect(classes).not.toContain("first");
   });
 });

package/app/components/05.forms/input-number/tests/InputNumberField.spec.ts

@@ -13,6 +13,11 @@ const initialPropsData = {
 };
 
 let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+
+afterEach(() => {
+  wrapper?.unmount();
+  vi.restoreAllMocks();
+});
 const wrapperFactory = (propsData = {}, slots = {}) => {
   const mockPropsData = { ...initialPropsData, ...propsData };
 
@@ -44,10 +49,10 @@ describe("InputNumberField", () => {
     expect(wrapper.find("input").attributes("placeholder")).toBe("Enter a quantity");
   });
 
-  it("sets data-invalid and the error class when fieldHasError is true", async () => {
+  it("sets data-invalid, not a bare error class, when fieldHasError is true", async () => {
     wrapper = await wrapperFactory({ fieldHasError: true });
     expect(wrapper.find(".input-number-field").attributes("data-invalid")).toBe("");
-    expect(wrapper.find(".input-number-field").classes()).toContain("error");
+    expect(wrapper.find(".input-number-field").classes()).not.toContain("error");
   });
 
   it("does not render step buttons when the left/right slots are not used", async () => {
@@ -130,14 +135,63 @@ describe("InputNumberField", () => {
     expect(wrapper.text()).toContain("This field is required");
   });
 
-  it("applies styleClassPassthrough", async () => {
+  it("applies styleClassPassthrough to the root only, not the inner input", async () => {
     wrapper = await wrapperFactory({ styleClassPassthrough: "custom-number" });
     expect(wrapper.find(".input-number-field").classes()).toContain("custom-number");
+    expect(wrapper.find("input").classes()).not.toContain("custom-number");
   });
 
   it("forwards inputVariant to the wrapper, InputLabel, and InputNumber", async () => {
     wrapper = await wrapperFactory({ inputVariant: "underlined" });
-    expect(wrapper.find(".input-number-field").classes()).toContain("underlined");
-    expect(wrapper.find(".input-number-wrapper").classes()).toContain("underlined");
+    expect(wrapper.find(".input-number-field").attributes("data-input-variant")).toBe("underlined");
+    expect(wrapper.find(".input-number-wrapper").attributes("data-input-variant")).toBe("underlined");
+    expect(wrapper.find(".input-error-message").attributes("data-input-variant")).toBe("underlined");
+  });
+
+  describe("step buttons", () => {
+    const stepSlots = { left: "<span>-</span>", right: "<span>+</span>" };
+    const stepDown = () => wrapper.findAll("button").find((button) => button.text().includes("-"))!;
+    const stepUp = () => wrapper.findAll("button").find((button) => button.text().includes("+"))!;
+
+    it("rounds away floating-point drift on fractional steps", async () => {
+      wrapper = await wrapperFactory({ modelValue: 0.2, min: 0, max: 1, step: 0.1 }, stepSlots);
+      await stepUp().trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([0.3]);
+    });
+
+    it("clamps to max when a step would overshoot it", async () => {
+      wrapper = await wrapperFactory({ modelValue: 8, min: 0, max: 10, step: 5 }, stepSlots);
+      await stepUp().trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([10]);
+    });
+
+    it("clamps to min when a step would undershoot it", async () => {
+      wrapper = await wrapperFactory({ modelValue: 2, min: 0, max: 10, step: 5 }, stepSlots);
+      await stepDown().trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([0]);
+    });
+
+    it("brings a typed out-of-range value back into range", async () => {
+      wrapper = await wrapperFactory({ modelValue: 500, min: 0, max: 100 }, stepSlots);
+      await stepDown().trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([100]);
+    });
+
+    it("starts from 0, clamped into range, when the field is empty", async () => {
+      wrapper = await wrapperFactory({ modelValue: "", min: 5, max: 10 }, stepSlots);
+      await stepUp().trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([5]);
+    });
+
+    it("treats a negative or zero step as its size, or 1", async () => {
+      wrapper = await wrapperFactory({ modelValue: 5, min: 0, max: 10, step: -2 }, stepSlots);
+      await stepUp().trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([7]);
+
+      wrapper.unmount();
+      wrapper = await wrapperFactory({ modelValue: 5, min: 0, max: 10, step: 0 }, stepSlots);
+      await stepUp().trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([6]);
+    });
   });
 });

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

@@ -26,6 +26,17 @@ No private tokens.
 
 > **Changed 2026-09-27**: the gap and top margin were hardcoded; they're now tokens with the same
 > defaults, matching `MultipleCheckboxes`.
+>
+> **Changed 2026-10-16**: the equal-width column minimum is capped at `min(100%, ...)` so one long
+> label can no longer push the grid wider than its container.
+
+### Root fieldset
+
+`.multiple-radiobuttons-fieldset` sets `min-inline-size: 0` and `overflow-wrap: anywhere` (added
+2026-10-16). A native `<fieldset>` otherwise grows to its min-content width and overflows a narrow
+column; the wrap setting inherits into the legend, description, option labels and error, so long
+unbroken words and URLs wrap. Neither is a token; override `overflow-wrap` on your passthrough
+class if you need the old behaviour.
 
 ---
 

package/app/components/05.forms/input-radio/MultipleRadiobuttons.vue

@@ -28,7 +28,6 @@
         <template v-for="item in fieldData.data" :key="item.id">
           <InputCheckboxRadioButton
             v-if="isButton"
-            :id="`${name}-${item.value}`"
             v-model="modelValue"
             type="radio"
             :name
@@ -110,7 +109,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 
 const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   props.name,
@@ -140,6 +146,11 @@ watch(
 
 <style lang="css">
 @layer components {
+.multiple-radiobuttons-fieldset {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
 .multiple-radiobuttons-items {
   display: flex;
   gap: var(--multiple-radiobuttons-gap, 1.2rem);
@@ -159,7 +170,7 @@ watch(
     grid-template-columns: repeat(
       auto-fit,
       minmax(
-        calc(var(--input-checked-icon-gap) + (2 * var(--input-checkbox-label-padding-inline)) + v-bind(maxChildWidth)),
+        min(100%, calc(var(--input-checked-icon-gap) + (2 * var(--input-checkbox-label-padding-inline)) + v-bind(maxChildWidth))),
         1fr
       )
     );