srcdev-nuxt-components 9.6.7 → 9.6.8

package/.vscode/srcdev-component-input-range.code-snippets

@@ -1,9 +1,9 @@
 {
-  "SRCDEV InputRangeCore Basic": {
-    "description": "Basic InputRangeCore native range input (no label/error wrapper)",
+  "SRCDEV InputRange Basic": {
+    "description": "Basic InputRange native range input (no label/error wrapper)",
     "scope": "vue,html",
     "body": [
-      "<InputRangeCore",
+      "<InputRange",
       "  id=\"$1fieldId\"",
       "  name=\"$2fieldName\"",
       "  v-model=\"$3fieldValue\"",
@@ -13,11 +13,11 @@
       "/>"
     ]
   },
-  "SRCDEV InputRangeCore With Markers": {
-    "description": "InputRangeCore with custom tick-mark markers overlaid on the track",
+  "SRCDEV InputRange With Markers": {
+    "description": "InputRange with custom tick-mark markers overlaid on the track",
     "scope": "vue,html",
     "body": [
-      "<InputRangeCore",
+      "<InputRange",
       "  id=\"$1fieldId\"",
       "  name=\"$2fieldName\"",
       "  v-model=\"$3fieldValue\"",
@@ -27,19 +27,39 @@
       ">",
       "  <template #markers>",
       "    <div class=\"input-range-markers\">",
-      "      <div class=\"marker\"><span class=\"marker-icon\">$7\\ud83d\\ude00</span></div>",
-      "      <div class=\"marker\"><span class=\"marker-icon\">$8\\ud83d\\ude10</span></div>",
-      "      <div class=\"marker\"><span class=\"marker-icon\">$9\\ud83d\\ude1e</span></div>",
+      "      <div class=\"input-range-marker\"><span class=\"input-range-marker-icon\">$7\\ud83d\\ude00</span></div>",
+      "      <div class=\"input-range-marker\"><span class=\"input-range-marker-icon\">$8\\ud83d\\ude10</span></div>",
+      "      <div class=\"input-range-marker\"><span class=\"input-range-marker-icon\">$9\\ud83d\\ude1e</span></div>",
       "    </div>",
       "  </template>",
-      "</InputRangeCore>"
+      "</InputRange>"
     ]
   },
-  "SRCDEV InputRangeDefault Basic": {
-    "description": "InputRangeDefault: labelled range slider with error/description support",
+  "SRCDEV InputRange With Datalist": {
+    "description": "InputRange with a datalist; the slot passes the generated datalistId",
     "scope": "vue,html",
     "body": [
-      "<InputRangeDefault",
+      "<InputRange",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  :min=\"${4:0}\"",
+      "  :max=\"${5:100}\"",
+      ">",
+      "  <template #datalist=\"{ datalistId }\">",
+      "    <datalist :id=\"datalistId\" class=\"input-range-datalist\">",
+      "      <option value=\"${4:0}\" label=\"${6:Low}\"></option>",
+      "      <option value=\"${5:100}\" label=\"${7:High}\"></option>",
+      "    </datalist>",
+      "  </template>",
+      "</InputRange>"
+    ]
+  },
+  "SRCDEV InputRangeField Basic": {
+    "description": "InputRangeField: labelled range slider with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputRangeField",
       "  v-model=\"$1fieldValue\"",
       "  name=\"$2fieldName\"",
       "  label=\"$3Field label\"",
@@ -51,11 +71,11 @@
       "/>"
     ]
   },
-  "SRCDEV InputRangeDefault With Step Buttons": {
-    "description": "InputRangeDefault with step-down/step-up buttons wired into the left/right slots",
+  "SRCDEV InputRangeField With Step Buttons": {
+    "description": "InputRangeField with step-down/step-up buttons wired into the left/right slots",
     "scope": "vue,html",
     "body": [
-      "<InputRangeDefault",
+      "<InputRangeField",
       "  v-model=\"$1fieldValue\"",
       "  name=\"$2fieldName\"",
       "  label=\"$3Field label\"",
@@ -67,11 +87,11 @@
       ">",
       "  <template #left>\\u2212</template>",
       "  <template #right>+</template>",
-      "</InputRangeDefault>"
+      "</InputRangeField>"
     ]
   },
   "SRCDEV InputRange CSS Override": {
-    "description": "CSS override scaffold for InputRangeCore tokens",
+    "description": "CSS override scaffold for InputRange tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",

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

@@ -29,6 +29,16 @@ columns need more room.
 | `--single-checkbox-margin-block-start` | `1.2rem` | Space between the legend/description and the checkbox |
 | `--single-checkbox-column-min-width` | `100px` | Grid column minimum width with `options-layout="equal-widths"` |
 
+> **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-checkboxes-fieldset` and `.single-checkbox-fieldset` set `min-inline-size: 0` and
+`overflow-wrap: anywhere` (added 2026-10-16). The second inherits into the legend, description,
+option labels and error, so long unbroken words and URLs wrap instead of overflowing. Neither is a
+token; override `overflow-wrap` on your passthrough class if you need the old behaviour.
+
 ---
 
 ## State hooks

package/app/components/05.forms/input-checkbox/MultipleCheckboxes.vue

@@ -23,10 +23,10 @@
         </template>
       </InputDescription>
       <div ref="itemsContainer" class="multiple-checkboxes-items" :data-options-layout="optionsLayout">
-        <template v-for="item in fieldData.data" :key="item.id">
+        <template v-for="(item, index) in fieldData.data" :key="item.id">
           <InputCheckboxRadioButton
             v-if="isButton"
-            :id="`${name}-${item.value}`"
+            :id="`${optionIdPrefix}-${index}`"
             v-model="modelValue"
             type="checkbox"
             :name
@@ -119,7 +119,14 @@ const slots = useSlots();
 const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>({ required: true });
 const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
 
-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,
@@ -127,6 +134,8 @@ const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   slots
 );
 
+const optionIdPrefix = useId();
+
 const { maxChildWidth, updateMaxChildWidth } = useMaxChildWidth(
   ".input-checkbox-radio-field-label, .input-checkbox-radio-field",
   "100px"
@@ -146,6 +155,11 @@ watch(
 
 <style lang="css">
 @layer components {
+.multiple-checkboxes-fieldset {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
 .multiple-checkboxes-items {
   display: flex;
   gap: var(--multiple-checkboxes-gap, 1.2rem);
@@ -165,7 +179,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
       )
     );

package/app/components/05.forms/input-checkbox/SingleCheckbox.vue

@@ -84,7 +84,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>({ required: true });
-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,
@@ -95,6 +102,11 @@ const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
 
 <style lang="css">
 @layer components {
+.single-checkbox-fieldset {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
 .single-checkbox-items {
   display: flex;
   gap: var(--single-checkbox-gap, 1.2rem);
@@ -111,7 +123,7 @@ const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
 
   &[data-options-layout="equal-widths"] {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--single-checkbox-column-min-width, 100px), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--single-checkbox-column-min-width, 100px)), 1fr));
   }
 }
 }

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.",
+      },
+    },
+  },
+};