srcdev-nuxt-components 9.6.7 → 9.6.8

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

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

@@ -1,9 +1,9 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref } from "vue";
-import StorybookComponent from "../InputCheckboxRadio.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputCheckboxRadio from "../InputCheckboxRadio.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
-interface InputCheckboxRadioStoryArgs {
+interface StoryArgs {
   type: "checkbox" | "radio";
   id: string;
   name: string;
@@ -15,9 +15,20 @@ interface InputCheckboxRadioStoryArgs {
   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}">
+    This is the bare control with no label. With a text label it's the
+    <a href="/?path=/story/components-forms-input-checkbox-radio-inputcheckboxradiofield--checkbox" target="_top">InputCheckboxRadioField</a>;
+    drawn as a button or pill it's the
+    <a href="/?path=/story/components-forms-input-checkbox-radio-inputcheckboxradiobutton--option-group" target="_top">InputCheckboxRadioButton</a>.
+  </p>
+`;
+
+const meta: Meta<StoryArgs> = {
   title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadio",
-  component: StorybookComponent,
+  component: InputCheckboxRadio,
   argTypes: {
     type: {
       control: { type: "select" },
@@ -62,29 +73,45 @@ export default {
     isButton: false,
     inputVariant: "normal",
   },
-} as Meta<InputCheckboxRadioStoryArgs>;
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The checkbox or radio control every form checkbox and radio is built from: a styled square or circle stacked over a hidden native input. It has no label, so pair its `id` with your own `label[for]`, or use `InputCheckboxRadioField` / `InputCheckboxRadioButton`. Slot: `checkedIcon`. No stress story here: the control renders no text, and long-label behaviour is covered by the Field and Button stress stories.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
 
-const Template: StoryFn<InputCheckboxRadioStoryArgs> = (args) => ({
-  components: { StorybookComponent },
+const render = (args: StoryArgs) => ({
+  components: { InputCheckboxRadio },
   setup() {
     const modelValue = ref(false);
     return { args, modelValue };
   },
   template: `
     <div style="margin: 36px;">
-      <StorybookComponent v-bind="args" v-model="modelValue" />
+      ${parentNote}
+      <InputCheckboxRadio v-bind="args" v-model="modelValue" />
     </div>
   `,
 });
 
-export const Checkbox = Template.bind({});
-Checkbox.args = { type: "checkbox" };
+export const Checkbox: Story = { args: { type: "checkbox" }, render };
 
-export const Radio = Template.bind({});
-Radio.args = { type: "radio" };
+export const Radio: Story = { args: { type: "radio" }, render };
 
-export const CheckboxAsDisc = Template.bind({});
-CheckboxAsDisc.args = { type: "checkbox", isButton: true, displayAsDisc: true };
+export const CheckboxAsDisc: Story = {
+  args: { type: "checkbox", isButton: true, displayAsDisc: true },
+  render,
+  parameters: { docs: { description: { story: "`displayAsDisc` rounds a checkbox, but only in button mode (`isButton`)." } } },
+};
 
-export const ErrorState = Template.bind({});
-ErrorState.args = { type: "checkbox", fieldHasError: true, theme: "error" };
+export const ErrorState: Story = {
+  args: { type: "checkbox", fieldHasError: true, theme: "error" },
+  render,
+  parameters: { docs: { description: { story: "`fieldHasError` sets `aria-invalid` on the input and `data-invalid` on the root." } } },
+};

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

@@ -1,26 +1,53 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { defineComponent, ref } from "vue";
-import StorybookComponent from "../InputCheckboxRadioButton.vue";
+import type { PropType } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputCheckboxRadioButton from "../InputCheckboxRadioButton.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { OptionsLayout } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
 
-interface InputCheckboxRadioButtonStoryArgs {
+interface StoryArgs {
   type: "checkbox" | "radio";
   label: string;
   isPill: boolean;
   fieldHasError: boolean;
   displayAsDisc: boolean;
   direction: "row" | "row-reverse";
+  optionsLayout: OptionsLayout;
+  options: string[];
 }
 
-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}">
+    The group components draw each option with this when <code>isButton</code> is on, and add the
+    fieldset, legend, description and error: see the
+    <a href="/?path=/story/components-forms-input-checkbox-multiplecheckboxes--buttons" target="_top">MultipleCheckboxes</a>
+    and
+    <a href="/?path=/story/components-forms-input-radio-multipleradiobuttons--buttons" target="_top">MultipleRadiobuttons</a>
+    Buttons stories.
+  </p>
+`;
+
+const serviceOptions = ["Balayage", "Highlights", "Half Head Highlights", "Full Colour", "Lowlights", "Toner & Gloss"];
+
+const layoutStyles: Record<OptionsLayout, string> = {
+  "equal-widths": "display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.8rem;",
+  inline: "display: flex; flex-wrap: wrap; gap: 0.8rem;",
+  block: "display: flex; flex-direction: column; gap: 0.8rem;",
+};
+
+const meta: Meta<StoryArgs> = {
   title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadioButton",
-  component: StorybookComponent,
+  component: InputCheckboxRadioButton,
   argTypes: {
     type: {
       control: { type: "select" },
       options: ["checkbox", "radio"],
       table: { category: "Basic" },
     },
-    label: { control: "text", table: { category: "Basic" } },
+    label: { control: "text", description: "Single-option stories only", table: { category: "Basic" } },
     isPill: { control: "boolean", table: { category: "Styling" } },
     fieldHasError: { control: "boolean", table: { category: "States" } },
     displayAsDisc: { control: "boolean", table: { category: "Styling" } },
@@ -30,6 +57,18 @@ export default {
       description: "row-reverse puts the control on the right",
       table: { category: "Styling" },
     },
+    optionsLayout: {
+      control: { type: "select" },
+      options: ["equal-widths", "inline", "block"],
+      description:
+        "Rendered as `data-options-layout`. In the group stories it also lays out the story's wrapper the way `MultipleCheckboxes` does",
+      table: { category: "Styling" },
+    },
+    options: {
+      control: "object",
+      description: "Story-only: the option labels in the group stories",
+      table: { category: "Story data" },
+    },
   },
   args: {
     type: "checkbox",
@@ -38,93 +77,121 @@ export default {
     fieldHasError: false,
     displayAsDisc: false,
     direction: "row",
+    optionsLayout: "equal-widths",
+    options: serviceOptions,
   },
-} as Meta<InputCheckboxRadioButtonStoryArgs>;
-
-const Template: StoryFn<InputCheckboxRadioButtonStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref(false);
-    return { args, modelValue };
+  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:
+          "One checkbox or radio option drawn as a button or pill: a `<label>` holding the control, a centred label and a decorator icon. `id` is optional and generated with `useId()` when omitted. Props: `type`, `name`, `label`, `trueValue`, `multipleOptions`, `isPill`, `direction`, `displayAsDisc`, `optionsLayout`, `itemIcon`. Slots: `labelContent`, `checkedIcon`, `itemIcon`. Usually used through the `isButton` mode of `MultipleCheckboxes` and `MultipleRadiobuttons`: see the [MultipleCheckboxes Buttons](?path=/story/components-forms-input-checkbox-multiplecheckboxes--buttons) story.",
+      },
+    },
   },
-  template: `
-    <div style="margin: 36px; max-width: 260px;">
-      <StorybookComponent
-        id="single-option"
-        name="single"
-        :type="args.type"
-        :label="args.label"
-        :is-pill="args.isPill"
-        :field-has-error="args.fieldHasError"
-        :display-as-disc="args.displayAsDisc"
-        :direction="args.direction"
-        v-model="modelValue"
-      />
-    </div>
-  `,
-});
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
 
-export const Default = Template.bind({});
+export const Default: Story = {
+  render: (args: StoryArgs) => ({
+    components: { InputCheckboxRadioButton },
+    setup() {
+      const modelValue = ref(false);
+      return { args, modelValue };
+    },
+    template: `
+      ${parentNote}
+      <div style="max-width: 260px;">
+        <InputCheckboxRadioButton
+          name="single"
+          :type="args.type"
+          :label="args.label"
+          :is-pill="args.isPill"
+          :field-has-error="args.fieldHasError"
+          :display-as-disc="args.displayAsDisc"
+          :direction="args.direction"
+          :options-layout="args.optionsLayout"
+          v-model="modelValue"
+        />
+      </div>
+    `,
+  }),
+  argTypes: { options: { table: { disable: true } } },
+};
 
-// "Services of interest" pattern — the actual multi-option checkbox-pill layout this component
-// is normally used in (as opposed to Default's single isolated control).
 // Selection state lives in a child keyed on type, so switching checkbox/radio remounts it with
 // the right empty value (an array for checkboxes, a string for radios). A watch on args.type
 // isn't reliable here: the template sees the new arg, but the watcher doesn't fire.
-const ServiceOptionGroup = defineComponent({
-  components: { StorybookComponent },
+const OptionGroupDemo = defineComponent({
+  components: { InputCheckboxRadioButton },
   props: {
-    type: { type: String as () => "checkbox" | "radio", required: true },
+    type: { type: String as PropType<"checkbox" | "radio">, required: true },
+    options: { type: Array as PropType<string[]>, required: true },
+    optionsLayout: { type: String as PropType<OptionsLayout>, required: true },
     isPill: Boolean,
     fieldHasError: Boolean,
     displayAsDisc: Boolean,
-    direction: { type: String as () => "row" | "row-reverse", default: "row" },
+    direction: { type: String as PropType<"row" | "row-reverse">, default: "row" },
   },
   setup(props) {
-    const services = [
-      "Balayage",
-      "Highlights",
-      "Half Head Highlights",
-      "Full Colour",
-      "Lowlights",
-      "Toner & Gloss",
-    ];
     const selected = ref<string[] | string>(props.type === "checkbox" ? [] : "");
-    return { services, selected };
+    return { selected, layoutStyles };
   },
   template: `
     <div>
-      <div style="margin: 36px; max-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;">
-        <StorybookComponent
-          v-for="service in services"
-          :key="service"
-          :id="'service-' + service"
+      <div :style="layoutStyles[optionsLayout]">
+        <InputCheckboxRadioButton
+          v-for="(option, index) in options"
+          :key="index"
           name="services"
           :type="type"
-          :label="service"
-          :true-value="service"
+          :label="option"
+          :true-value="option"
           :multiple-options="type === 'checkbox'"
           :is-pill="isPill"
           :field-has-error="fieldHasError"
           :display-as-disc="displayAsDisc"
           :direction="direction"
+          :options-layout="optionsLayout"
           v-model="selected"
         />
       </div>
-      <p style="margin: 0 36px; font-family: monospace;">selected: {{ JSON.stringify(selected) }}</p>
+      <p style="margin-block-start: 1.6rem; font-family: monospace; overflow-wrap: anywhere;">selected: {{ JSON.stringify(selected) }}</p>
     </div>
   `,
 });
 
-const OptionGroupTemplate: StoryFn<InputCheckboxRadioButtonStoryArgs> = (args) => ({
-  components: { ServiceOptionGroup },
+const renderGroup = (args: StoryArgs) => ({
+  components: { OptionGroupDemo },
   setup() {
     return { args };
   },
   template: `
-    <ServiceOptionGroup
+    ${parentNote}
+    <OptionGroupDemo
       :key="args.type"
       :type="args.type"
+      :options="args.options"
+      :options-layout="args.optionsLayout"
       :is-pill="args.isPill"
       :field-has-error="args.fieldHasError"
       :display-as-disc="args.displayAsDisc"
@@ -133,5 +200,44 @@ const OptionGroupTemplate: StoryFn<InputCheckboxRadioButtonStoryArgs> = (args) =
   `,
 });
 
-export const OptionGroup = OptionGroupTemplate.bind({});
-OptionGroup.argTypes = { label: { table: { disable: true } } };
+export const OptionGroup: Story = {
+  render: renderGroup,
+  argTypes: { label: { table: { disable: true } } },
+  parameters: {
+    docs: {
+      description: {
+        story: "A group of options sharing one `name` and model, the way the group components render them. Switch `type` and `optionsLayout`.",
+      },
+    },
+  },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    optionsLayout: "inline",
+    isPill: true,
+    options: [
+      "A",
+      "",
+      "Haarverlängerungsberatungstermindienstleistungspaket",
+      "https://example.com/a/very/long/unbroken/url/that/should/wrap/somewhere",
+      "<b>Not bold</b> & <i>not italic</i>",
+      "💇‍♀️ Colour + cut 🌈",
+      "قص الشعر وتصفيفه",
+      "A conditioning treatment with a scalp massage, a hot towel and a blow-dry finish",
+      ...Array.from({ length: 16 }, (_, index) => `Option ${index + 9}`),
+    ],
+  },
+  render: renderGroup,
+  argTypes: { label: { table: { disable: true } } },
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "24 pill options with an empty label, a single character, a long unbroken German word and URL, HTML-like text, emoji, right-to-left text and a long sentence, laid out inline. Check at every canvas width: no option pokes out of the dashed outline (long labels wrap inside their pill instead), the control and decorator icon keep their size, short labels stay on one line, and markup renders as text. Switch `optionsLayout`, `direction` and `type`.",
+      },
+    },
+  },
+};