srcdev-nuxt-components 9.6.6 → 9.6.8

package/app/components/05.forms/input-checkbox/stories/MultipleCheckboxes.stories.ts

@@ -1,9 +1,11 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
-import StorybookComponent from "../MultipleCheckboxes.vue";
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import MultipleCheckboxes from "../MultipleCheckboxes.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { IFormMultipleOptions, InputUiVariant, OptionsLayout } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
 
-interface MultipleCheckboxesStoryArgs {
+interface StoryArgs {
   name: string;
   legend: string;
   errorMessage: string;
@@ -15,11 +17,21 @@ interface MultipleCheckboxesStoryArgs {
   direction: "row" | "row-reverse";
   displayAsDisc: boolean;
   inputVariant: InputUiVariant;
+  descriptionText: string;
+  options: IFormMultipleOptions["data"];
 }
 
-export default {
+const serviceOptions: IFormMultipleOptions["data"] = [
+  { id: "1", name: "services", value: "cut", label: "Cut" },
+  { id: "2", name: "services", value: "colour", label: "Colour" },
+  { id: "3", name: "services", value: "balayage", label: "Balayage" },
+  { id: "4", name: "services", value: "styling", label: "Styling" },
+  { id: "5", name: "services", value: "treatment", label: "Conditioning treatment" },
+];
+
+const meta: Meta<StoryArgs> = {
   title: "Components/Forms/Input Checkbox/MultipleCheckboxes",
-  component: StorybookComponent,
+  component: MultipleCheckboxes,
   argTypes: {
     name: { control: "text", table: { category: "Basic" } },
     legend: { control: "text", table: { category: "Basic" } },
@@ -45,6 +57,16 @@ export default {
       options: ["normal", "outlined", "underlined"],
       table: { category: "Styling" },
     },
+    descriptionText: {
+      control: "text",
+      description: "Story-only: fills the descriptionText slot",
+      table: { category: "Slots" },
+    },
+    options: {
+      control: "object",
+      description: "Story-only: the `data` array of the `fieldData` model",
+      table: { category: "Model" },
+    },
   },
   args: {
     name: "services",
@@ -58,47 +80,134 @@ export default {
     direction: "row",
     displayAsDisc: false,
     inputVariant: "normal",
+    descriptionText: "Select all that apply.",
+    options: serviceOptions,
+  },
+  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:
+          "A fieldset of checkboxes built from the `fieldData` model, bound to an array `v-model`. `isButton` swaps the labelled checkboxes for button tiles (`isPill` rounds them), `optionsLayout` lays them out as equal-width columns, an inline wrap or a block column, and `errorMessage` with `fieldHasError` shows the error strip. Slots: `descriptionText`, `descriptionHtml`, `checkedIcon`, `itemIcon`.",
+      },
+    },
   },
-} as Meta<MultipleCheckboxesStoryArgs>;
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
 
-const Template: StoryFn<MultipleCheckboxesStoryArgs> = (args) => ({
-  components: { StorybookComponent },
+const render = (args: StoryArgs) => ({
+  components: { MultipleCheckboxes },
   setup() {
-    const modelValue = ref<string[]>([]);
-    const fieldData = ref<IFormMultipleOptions>({
-      data: [
-        { id: "1", name: "services", value: "cut", label: "Cut" },
-        { id: "2", name: "services", value: "colour", label: "Colour" },
-        { id: "3", name: "services", value: "balayage", label: "Balayage" },
-        { id: "4", name: "services", value: "styling", label: "Styling" },
-        { id: "5", name: "services", value: "treatment", label: "Conditioning treatment" },
-      ],
-      total: 5,
-      skip: 0,
-      limit: 10,
+    const componentArgs = computed(() => {
+      const { descriptionText: _descriptionText, options: _options, ...rest } = args;
+      return rest;
     });
-    return { args, modelValue, fieldData };
+    const fieldData = computed<IFormMultipleOptions>(() => ({
+      data: args.options,
+      total: args.options.length,
+      skip: 0,
+      limit: args.options.length,
+    }));
+    const modelValue = ref<string[]>([]);
+    return { args, componentArgs, fieldData, modelValue };
   },
   template: `
-    <div style="margin: 36px; max-width: 560px;">
-      <StorybookComponent v-bind="args" v-model="modelValue" v-model:field-data="fieldData">
-        <template #descriptionText>Select all that apply.</template>
-      </StorybookComponent>
-      <p style="margin-top: 2rem; font-family: monospace;">modelValue: {{ JSON.stringify(modelValue) }}</p>
-    </div>
+    <MultipleCheckboxes v-bind="componentArgs" v-model="modelValue" :field-data="fieldData">
+      <template v-if="args.descriptionText" #descriptionText>{{ args.descriptionText }}</template>
+    </MultipleCheckboxes>
+    <p style="margin-block-start: 2rem; font-family: monospace; overflow-wrap: anywhere;">modelValue: {{ JSON.stringify(modelValue) }}</p>
   `,
 });
 
-export const Default = Template.bind({});
+export const Default: Story = { render };
 
-export const Buttons = Template.bind({});
-Buttons.args = { isButton: true, optionsLayout: "inline" };
+export const Buttons: Story = {
+  args: { isButton: true, optionsLayout: "inline" },
+  render,
+  parameters: { docs: { description: { story: "Button tiles in an inline wrap, each with the `itemIcon` decorator." } } },
+};
 
-export const Pills = Template.bind({});
-Pills.args = { isButton: true, isPill: true, optionsLayout: "inline" };
+export const Pills: Story = {
+  args: { isButton: true, isPill: true, optionsLayout: "inline" },
+  render,
+  parameters: { docs: { description: { story: "Button tiles with `isPill` for fully rounded ends." } } },
+};
 
-export const Block = Template.bind({});
-Block.args = { optionsLayout: "block" };
+export const Block: Story = {
+  args: { optionsLayout: "block" },
+  render,
+  parameters: { docs: { description: { story: "`optionsLayout=\"block\"` stacks the options in one column." } } },
+};
+
+export const ErrorState: Story = {
+  args: { fieldHasError: true },
+  render,
+  parameters: {
+    docs: { description: { story: "`fieldHasError` shows the error message and links it to every checkbox with `aria-describedby`." } },
+  },
+};
 
-export const ErrorState = Template.bind({});
-ErrorState.args = { fieldHasError: true };
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    name: "dienstleistungen auswahl",
+    legend:
+      "🎨 Gewünschte Dienstleistungsauswahlmöglichkeitenbeschreibungsüberschrift https://example.com/a/very/long/unbroken/url/that/should/wrap/somewhere <script>alert(1)</script>",
+    descriptionText:
+      "اختر الخدمات Wählen Sie alle zutreffenden Dienstleistungen aus, die Sie bei Ihrem nächsten Besuch in Anspruch nehmen möchten. <b>not bold</b>",
+    errorMessage: "BittewählenSiemindestenseineDienstleistungausbevorSiedasFormularabsenden",
+    fieldHasError: true,
+    required: true,
+    options: [
+      { id: "1", name: "s", value: "a", label: "A" },
+      { id: "2", name: "s", value: "", label: "" },
+      { id: "3", name: "s", value: "long", label: "Haarverlängerungsberatungstermindienstleistungspaket" },
+      { id: "4", name: "s", value: "url", label: "https://example.com/a/very/long/unbroken/url/that/should/wrap/somewhere" },
+      { id: "5", name: "s", value: "has spaces <b>", label: "<b>Not bold</b> & <i>not italic</i>" },
+      { id: "6", name: "s", value: "emoji", label: "💇‍♀️ Colour + cut 🌈" },
+      { id: "7", name: "s", value: "rtl", label: "قص الشعر وتصفيفه" },
+      {
+        id: "8",
+        name: "s",
+        value: "sentence",
+        label: "A conditioning treatment with a scalp massage, a hot towel and a blow-dry finish, booked as one appointment",
+      },
+      ...Array.from({ length: 22 }, (_, index) => ({
+        id: `extra-${index}`,
+        name: "s",
+        value: `extra-${index}`,
+        label: `Option ${index + 9}`,
+      })),
+    ],
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "900px" },
+      description: {
+        story:
+          "30 options including an empty label, a single character, long unbroken German and URL labels, emoji, right-to-left text, HTML-like text and a value with spaces. Check at every canvas width: the legend, description, labels and error wrap inside the dashed outline, markup renders as text, the equal-width columns never get wider than the container, and clicking any label (including the odd ones) toggles its own checkbox. Switch `optionsLayout` to `inline` and `block`, and turn on `isButton`..",
+      },
+    },
+  },
+};

package/app/components/05.forms/input-checkbox/stories/SingleCheckbox.stories.ts

@@ -1,9 +1,11 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
-import StorybookComponent from "../SingleCheckbox.vue";
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import SingleCheckbox from "../SingleCheckbox.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { InputUiVariant } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
 
-interface SingleCheckboxStoryArgs {
+interface StoryArgs {
   name: string;
   legend: string;
   label: string;
@@ -11,11 +13,12 @@ interface SingleCheckboxStoryArgs {
   required: boolean;
   fieldHasError: boolean;
   inputVariant: InputUiVariant;
+  descriptionText: string;
 }
 
-export default {
+const meta: Meta<StoryArgs> = {
   title: "Components/Forms/Input Checkbox/SingleCheckbox",
-  component: StorybookComponent,
+  component: SingleCheckbox,
   argTypes: {
     name: { control: "text", table: { category: "Basic" } },
     legend: { control: "text", table: { category: "Basic" } },
@@ -28,6 +31,11 @@ export default {
       options: ["normal", "outlined", "underlined"],
       table: { category: "Styling" },
     },
+    descriptionText: {
+      control: "text",
+      description: "Story-only: fills the descriptionText slot",
+      table: { category: "Slots" },
+    },
   },
   args: {
     name: "terms",
@@ -37,39 +45,108 @@ export default {
     required: true,
     fieldHasError: false,
     inputVariant: "normal",
+    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:
+          "A fieldset holding one checkbox, for consent or opt-in fields. `v-model` toggles between `trueValue` and `falseValue` (default `true`/`false`); `required` puts native `required` on the checkbox. Slots: `labelContent` (rich label, e.g. a link), `descriptionText`, `descriptionHtml`, `checkedIcon`.",
+      },
+    },
   },
-} as Meta<SingleCheckboxStoryArgs>;
+};
 
-const Template: StoryFn<SingleCheckboxStoryArgs> = (args) => ({
-  components: { StorybookComponent },
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { SingleCheckbox },
   setup() {
+    const componentArgs = computed(() => {
+      const { descriptionText: _descriptionText, ...rest } = args;
+      return rest;
+    });
     const modelValue = ref(false);
-    return { args, modelValue };
+    return { args, componentArgs, modelValue };
   },
   template: `
-    <div style="margin: 36px; max-width: 480px;">
-      <StorybookComponent v-bind="args" v-model="modelValue" />
-      <p style="margin-top: 2rem; font-family: monospace;">modelValue: {{ modelValue }}</p>
-    </div>
+    <SingleCheckbox v-bind="componentArgs" v-model="modelValue">
+      <template v-if="args.descriptionText" #descriptionText>{{ args.descriptionText }}</template>
+    </SingleCheckbox>
+    <p style="margin-block-start: 2rem; font-family: monospace;">modelValue: {{ modelValue }}</p>
   `,
 });
 
-export const Default = Template.bind({});
-
-export const ErrorState = Template.bind({});
-ErrorState.args = { fieldHasError: true };
+export const Default: Story = { render };
 
-export const RichLabel: StoryFn<SingleCheckboxStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref(false);
-    return { args, modelValue };
+export const ErrorState: Story = {
+  args: { fieldHasError: true },
+  render,
+  parameters: {
+    docs: { description: { story: "`fieldHasError` shows the error message and links it to the checkbox with `aria-describedby`." } },
   },
-  template: `
-    <div style="margin: 36px; max-width: 480px;">
-      <StorybookComponent v-bind="args" v-model="modelValue">
+};
+
+export const RichLabel: Story = {
+  render: (args: StoryArgs) => ({
+    components: { SingleCheckbox },
+    setup() {
+      const componentArgs = computed(() => {
+        const { descriptionText: _descriptionText, ...rest } = args;
+        return rest;
+      });
+      const modelValue = ref(false);
+      return { componentArgs, modelValue };
+    },
+    template: `
+      <SingleCheckbox v-bind="componentArgs" v-model="modelValue">
         <template #labelContent>I agree to the <a href="#">terms and conditions</a></template>
-      </StorybookComponent>
-    </div>
-  `,
-});
+      </SingleCheckbox>
+    `,
+  }),
+  parameters: { docs: { description: { story: "The `labelContent` slot replaces the `label` prop, here with a link." } } },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    name: "marketing einwilligung",
+    legend:
+      "📨 Einwilligungserklärungzurdatenschutzkonformenverarbeitungpersonenbezogenerdaten https://example.com/a/very/long/unbroken/url <script>alert(1)</script>",
+    label:
+      "Ich stimme zu: Datenschutzgrundverordnungseinwilligungsbestätigung https://example.com/privacy/policy/with/a/long/path <b>not bold</b> قص",
+    descriptionText:
+      "سياسة الخصوصية Sie können Ihre Einwilligung jederzeit widerrufen, indem Sie uns eine kurze Nachricht schicken. 🙂",
+    errorMessage: "BitteakzeptierenSiedieDatenschutzbestimmungenbevorSiefortfahren",
+    fieldHasError: true,
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Long unbroken German and URL text in the legend, label and error, emoji, right-to-left text and HTML-like text. Check at every canvas width: everything wraps inside the dashed outline, markup renders as text, and clicking anywhere on the label toggles the checkbox. Also try an empty label and a single character.",
+      },
+    },
+  },
+};

package/app/components/05.forms/input-checkbox/tests/MultipleCheckboxes.spec.ts

@@ -1,4 +1,5 @@
 // https://nuxt.com/docs/getting-started/testing#unit-testing
+import { defineComponent } from "vue";
 import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import type { FormUiTheme, OptionsLayout } from "~/types/forms/types.forms";
@@ -25,6 +26,11 @@ const initialSlots = {
 };
 
 let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+
+afterEach(() => {
+  wrapper?.unmount();
+  vi.restoreAllMocks();
+});
 const wrapperFactory = (propsData = {}, slotsData = {}) => {
   const mockPropsData = { ...initialPropsData, ...propsData };
   const mockSlotsData = { ...initialSlots, ...slotsData };
@@ -84,10 +90,38 @@ describe("MultipleCheckboxes Component", () => {
     });
   });
 
-  it("gives each checkbox an id derived from name and value", async () => {
-    wrapper = await wrapperFactory();
-    const first = wrapper.find('input[type="checkbox"]');
-    expect(first.attributes("id")).toBe(`tags-${tagsData.data[0]!.value}`);
+  it("gives each button checkbox a unique, space-free id linked to its label", async () => {
+    wrapper = await wrapperFactory({ isButton: true });
+    const ids = wrapper.findAll('input[type="checkbox"]').map((checkbox) => checkbox.attributes("id")!);
+    expect(new Set(ids).size).toBe(tagsData.data.length);
+    ids.forEach((id) => expect(id).not.toMatch(/\s/));
+    ids.forEach((id) => expect(wrapper.find(`label[for="${id}"]`).exists()).toBe(true));
+  });
+
+  it("keeps option ids unique across two groups sharing a name and values", async () => {
+    const Host = defineComponent({
+      components: { ComponentUnderTest },
+      setup: () => ({ props: initialPropsData }),
+      template: `
+        <div>
+          <ComponentUnderTest v-bind="props" :model-value="[]" />
+          <ComponentUnderTest v-bind="props" :model-value="[]" />
+        </div>
+      `,
+    });
+    const host = await mountSuspended(Host);
+    const ids = host.findAll('input[type="checkbox"]').map((checkbox) => checkbox.attributes("id"));
+    expect(ids.length).toBe(tagsData.data.length * 2);
+    expect(new Set(ids).size).toBe(ids.length);
+    host.unmount();
+  });
+
+  it("builds ids that don't depend on option values containing spaces", async () => {
+    wrapper = await wrapperFactory({
+      isButton: true,
+      fieldData: { ...tagsData, data: [{ id: "x", name: "tags", value: "has spaces <b>", label: "Spaces" }] },
+    });
+    expect(wrapper.find('input[type="checkbox"]').attributes("id")).not.toMatch(/\s/);
   });
 
   it("adds each clicked value to the model", async () => {

package/app/components/05.forms/input-checkbox/tests/SingleCheckbox.spec.ts

@@ -12,6 +12,11 @@ const initialPropsData = {
 };
 
 let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+
+afterEach(() => {
+  wrapper?.unmount();
+  vi.restoreAllMocks();
+});
 const wrapperFactory = (propsData = {}, slotsData = {}) =>
   mountSuspended(ComponentUnderTest, {
     attachTo: document.body,

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

@@ -67,8 +67,7 @@ Also reads `--input-checkbox-decorator-icon-size` (decorator icon `font-size`, `
 `--input-font-size` (label).
 
 Private (not public API): `--_transition-duration` (the control's resolved duration, shared by two
-transitions), `--_icon-size` (the button shrinks the inner control's checked icon through it) and
-`--_white-space` (the button label's wrapping, swapped by `data-options-layout="inline"`).
+transitions) and `--_icon-size` (the button shrinks the inner control's checked icon through it).
 
 > **Changed 2026-09-27**:
 >
@@ -80,6 +79,14 @@ transitions), `--_icon-size` (the button shrinks the inner control's checked ico
 >   so both tokens take effect for the first time: the `+` renders at `2rem` and the checked icon
 >   inside a button at `--input-checked-icon-size` minus `0.8rem`.
 > - `--input-checkbox-label-color` is new (was unstyled, so `inherit`).
+>
+> **Changed 2026-10-16**: long labels wrap instead of overflowing. Both labels
+> (`.input-checkbox-radio-field-label`, `.input-checkbox-radio-button-label`) and their roots set
+> `min-inline-size: 0`, the labels set `overflow-wrap: anywhere`, and the control and decorator
+> icon no longer shrink (`flex-shrink: 0`). The button label used to be `nowrap` under
+> `data-options-layout="inline"` (private `--_white-space`, now removed), so an unbroken label
+> overflowed the row. In a wrapping row a short label still sits on one line; if you relied on
+> `nowrap`, set `white-space: nowrap` on `.input-checkbox-radio-button-label` yourself.
 
 ---
 
@@ -95,7 +102,7 @@ transitions), `--_icon-size` (the button shrinks the inner control's checked ico
 | `data-invalid` | all three roots | The field has an error |
 | `data-pill` | `.input-checkbox-radio-button` | `is-pill` |
 | `data-direction="row" \| "row-reverse"` | `.input-checkbox-radio-button` | Always, mirrors `direction` |
-| `data-options-layout` | `.input-checkbox-radio-button` | Always, mirrors `options-layout` (`inline` stops the label wrapping) |
+| `data-options-layout` | `.input-checkbox-radio-button` | Always, mirrors `options-layout` (a hook only: it no longer changes wrapping) |
 
 Inner elements: `.input-checkbox-radio-icon-slot` (holds the `checkedIcon` slot or the default
 `.input-checkbox-radio-icon`), `.input-checkbox-radio-input` (the hidden native input),

package/app/components/05.forms/input-checkbox-radio/InputCheckboxRadio.vue

@@ -99,6 +99,7 @@ watch(
 
     height: var(--input-checked-element-size);
     width: var(--input-checked-element-size);
+    flex-shrink: 0;
 
     transition: all var(--_transition-duration) ease-in-out;
 

package/app/components/05.forms/input-checkbox-radio/InputCheckboxRadioButton.vue

@@ -1,6 +1,6 @@
 <template>
   <label
-    :for="id"
+    :for="inputId"
     class="input-checkbox-radio-button"
     :class="elementClasses"
     :data-theme="theme"
@@ -10,7 +10,7 @@
     :data-pill="isPill ? '' : undefined"
   >
     <InputCheckboxRadio
-      :id
+      :id="inputId"
       v-model="modelValue"
       :is-button="true"
       :type
@@ -44,7 +44,7 @@
 import type { FormUiTheme, InputUiVariant, OptionsLayout } from "~/types/forms/types.forms";
 
 interface Props {
-  id: string;
+  id?: string;
   type: "checkbox" | "radio";
   name: string;
   label?: string;
@@ -65,6 +65,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  id: undefined,
   label: "",
   required: false,
   theme: "default",
@@ -84,6 +85,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>({ required: true });
 
+const generatedId = useId();
+const inputId = computed(() => props.id || generatedId);
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -97,9 +101,8 @@ watch(
 <style lang="css">
 @layer components {
   .input-checkbox-radio-button {
-    --_white-space: wrap;
-
     display: flex;
+    min-inline-size: 0;
     align-items: center;
     justify-content: space-between;
     gap: var(--input-checkbox-button-gap, 1rem);
@@ -122,10 +125,6 @@ watch(
       border-radius: var(--input-checkbox-button-border-radius-pill, 100vw);
     }
 
-    &[data-options-layout="inline"] {
-      --_white-space: nowrap;
-    }
-
     &:hover {
       background-color: var(--input-checkbox-button-surface-hover, var(--theme-input-surface-hover));
       outline-color: var(--input-checkbox-button-ring-hover, var(--theme-ring));
@@ -155,12 +154,14 @@ watch(
       text-align: center;
       padding-block: var(--input-checkbox-button-label-padding-block, 0.8rem);
       padding-inline: var(--input-checkbox-button-label-padding-inline, 0.8rem);
-      white-space: var(--_white-space);
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
       cursor: pointer;
     }
 
     .input-checkbox-radio-button-icon {
       display: flex;
+      flex-shrink: 0;
       align-items: center;
       justify-content: center;
       color: var(--input-checkbox-button-icon-color, var(--theme-text));

package/app/components/05.forms/input-checkbox-radio/InputCheckboxRadioField.vue

@@ -85,11 +85,14 @@ watch(
     gap: var(--input-checked-icon-gap);
     min-height: var(--input-min-height);
     user-select: none;
+    min-inline-size: 0;
 
     .input-checkbox-radio-field-label {
       display: flex;
       flex: 1;
       align-items: center;
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
       color: var(--input-checkbox-label-color, inherit);
       padding-block: var(--input-checkbox-label-padding-block);
       padding-inline: var(--input-checkbox-label-padding-inline);