srcdev-nuxt-components 9.6.7 → 9.6.9

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

@@ -1,22 +1,22 @@
 {
-  "SRCDEV InputSelectCore Basic": {
-    "description": "Basic InputSelectCore native select (no label/error wrapper)",
+  "SRCDEV InputSelect Basic": {
+    "description": "Basic InputSelect native select (no label/error wrapper)",
     "scope": "vue,html",
     "body": [
-      "<InputSelectCore",
+      "<InputSelect",
       "  id=\"$1fieldId\"",
-      "  name=\"$2fieldName\"",
-      "  v-model=\"$3fieldValue\"",
-      "  v-model:field-data=\"$4fieldOptions\"",
+      "  v-model=\"$2fieldValue\"",
+      "  v-model:field-data=\"$3fieldOptions\"",
+      "  name=\"$4fieldName\"",
       "  placeholder=\"$5Choose an option\"",
       "/>"
     ]
   },
-  "SRCDEV InputSelectWithLabel Basic": {
-    "description": "InputSelectWithLabel: labelled select with error/description support",
+  "SRCDEV InputSelectField Basic": {
+    "description": "InputSelectField: labelled select with description and error support",
     "scope": "vue,html",
     "body": [
-      "<InputSelectWithLabel",
+      "<InputSelectField",
       "  v-model=\"$1fieldValue\"",
       "  v-model:field-data=\"$2fieldOptions\"",
       "  name=\"$3fieldName\"",
@@ -24,17 +24,23 @@
       "  placeholder=\"$5Choose an option\"",
       "  :error-message=\"$6errors.fieldName\"",
       "  :field-has-error=\"!!$6errors.fieldName\"",
-      "/>"
+      ">",
+      "  <template #descriptionText>$7</template>",
+      "</InputSelectField>"
     ]
   },
   "SRCDEV InputSelect CSS Override": {
-    "description": "CSS override scaffold for InputSelectCore tokens",
+    "description": "CSS override scaffold for InputSelect tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",
-      "  .input-select-wrapper {",
-      "    --input-select-surface: $2;",
-      "    --input-select-border: $3;",
+      "  --input-select-surface: $2;",
+      "  --input-select-text-color: $3;",
+      "  --input-select-border: $4;",
+      "  --input-select-border-focus: $5;",
+      "",
+      "  .input-select-field[data-invalid] {",
+      "    $0",
       "  }",
       "}"
     ]

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

@@ -1,53 +1,54 @@
 {
-  "SRCDEV InputTextCore Basic": {
-    "description": "Basic InputTextCore native input (no label/error wrapper)",
+  "SRCDEV InputText Basic": {
+    "description": "Basic InputText native input (no label/error wrapper)",
     "scope": "vue,html",
     "body": [
-      "<InputTextCore",
+      "<InputText",
       "  id=\"$1fieldId\"",
-      "  name=\"$2fieldName\"",
-      "  v-model=\"$3fieldValue\"",
+      "  v-model=\"$2fieldValue\"",
+      "  name=\"$3fieldName\"",
       "  type=\"$4text\"",
-      "  placeholder=\"$5Enter value...\"",
+      "  placeholder=\"$5Enter value\"",
       "/>"
     ]
   },
-  "SRCDEV InputTextCore Date with min/max": {
-    "description": "InputTextCore date input constrained to a min/max range (e.g. no dates in the past)",
+  "SRCDEV InputText Date with min/max": {
+    "description": "InputText date input constrained to a min/max range (e.g. no dates in the past)",
     "scope": "vue,html",
     "body": [
-      "<InputTextCore",
+      "<InputText",
       "  id=\"$1appointment-date\"",
-      "  name=\"$2appointmentDate\"",
-      "  v-model=\"$3appointmentDate\"",
+      "  v-model=\"$2appointmentDate\"",
+      "  name=\"$3appointmentDate\"",
       "  type=\"date\"",
       "  :min=\"new Date().toISOString().split('T')[0]\"",
       "  max=\"$42027-12-31\"",
       "/>"
     ]
   },
-  "SRCDEV InputTextWithLabel Basic": {
-    "description": "InputTextWithLabel: labelled text field with error/description support",
+  "SRCDEV InputTextField Basic": {
+    "description": "InputTextField: labelled text field with description and error support",
     "scope": "vue,html",
     "body": [
-      "<InputTextWithLabel",
+      "<InputTextField",
       "  v-model=\"$1fieldValue\"",
-      "  id=\"$2fieldId\"",
-      "  name=\"$3fieldName\"",
-      "  type=\"$4text\"",
-      "  label=\"$5Field label\"",
+      "  name=\"$2fieldName\"",
+      "  type=\"${3|text,email,tel,url,date,number|}\"",
+      "  label=\"$4Field label\"",
+      "  autocomplete=\"$5\"",
       "  :error-message=\"$6errors.fieldName\"",
       "  :field-has-error=\"!!$6errors.fieldName\"",
-      "/>"
+      ">",
+      "  <template #descriptionText>$7</template>",
+      "</InputTextField>"
     ]
   },
-  "SRCDEV InputTextWithLabel Date with min/max": {
-    "description": "InputTextWithLabel date field constrained to a min/max range",
+  "SRCDEV InputTextField Date with min/max": {
+    "description": "InputTextField date field constrained to a min/max range",
     "scope": "vue,html",
     "body": [
-      "<InputTextWithLabel",
+      "<InputTextField",
       "  v-model=\"$1appointmentDate\"",
-      "  id=\"$2appointment-date\"",
       "  name=\"$2appointmentDate\"",
       "  type=\"date\"",
       "  label=\"$3Appointment date\"",
@@ -58,24 +59,27 @@
       "/>"
     ]
   },
-  "SRCDEV InputPasswordWithLabel": {
-    "description": "InputPasswordWithLabel with show/hide toggle",
+  "SRCDEV InputPasswordField": {
+    "description": "InputPasswordField with show/hide toggle",
     "scope": "vue,html",
     "body": [
-      "<InputPasswordWithLabel",
+      "<InputPasswordField",
       "  v-model=\"$1password\"",
       "  name=\"$2password\"",
       "  label=\"$3Password\"",
-      "  :error-message=\"$4errors.password\"",
-      "  :field-has-error=\"!!$4errors.password\"",
+      "  autocomplete=\"${4|current-password,new-password|}\"",
+      "  :error-message=\"$5errors.password\"",
+      "  :field-has-error=\"!!$5errors.password\"",
+      "  show-password-text=\"$6Show password\"",
+      "  hide-password-text=\"$7Hide password\"",
       "/>"
     ]
   },
-  "SRCDEV InputTextAsNumberWithLabel": {
-    "description": "InputTextAsNumberWithLabel numeric stepper with min/max/step",
+  "SRCDEV InputTextAsNumberField": {
+    "description": "InputTextAsNumberField numeric stepper with min/max/step",
     "scope": "vue,html",
     "body": [
-      "<InputTextAsNumberWithLabel",
+      "<InputTextAsNumberField",
       "  v-model=\"$1quantity\"",
       "  name=\"$2quantity\"",
       "  label=\"$3Quantity\"",
@@ -85,21 +89,23 @@
       "  :error-message=\"$7errors.quantity\"",
       "  :field-has-error=\"!!$7errors.quantity\"",
       ">",
-      "  <template #left>−</template>",
-      "  <template #right>+</template>",
-      "</InputTextAsNumberWithLabel>"
+      "  <template #left><Icon name=\"mdi:minus\" /></template>",
+      "  <template #right><Icon name=\"mdi:plus\" /></template>",
+      "</InputTextAsNumberField>"
     ]
   },
   "SRCDEV InputText CSS Override": {
-    "description": "CSS override scaffold for InputTextCore tokens",
+    "description": "CSS override scaffold for InputText tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",
-      "  .input-text-wrapper {",
-      "    --input-text-surface: $2;",
-      "    --input-text-border: $3;",
-      "    --input-text-border-focus: $4;",
-      "    --input-text-color: $5;",
+      "  --input-text-surface: $2;",
+      "  --input-text-border: $3;",
+      "  --input-text-border-focus: $4;",
+      "  --input-text-color: $5;",
+      "",
+      "  .input-text-field[data-invalid] {",
+      "    $0",
       "  }",
       "}"
     ]

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

@@ -1,38 +1,43 @@
 {
-  "SRCDEV InputTextareaCore Basic": {
-    "description": "Basic InputTextareaCore native textarea (no label/error wrapper)",
+  "SRCDEV InputTextarea Basic": {
+    "description": "Basic InputTextarea native textarea (no label/error wrapper)",
     "scope": "vue,html",
     "body": [
-      "<InputTextareaCore",
+      "<InputTextarea",
       "  id=\"$1fieldId\"",
-      "  name=\"$2fieldName\"",
-      "  v-model=\"$3fieldValue\"",
+      "  v-model=\"$2fieldValue\"",
+      "  name=\"$3fieldName\"",
       "  placeholder=\"$4Placeholder text\"",
       "/>"
     ]
   },
-  "SRCDEV InputTextareaWithLabel Basic": {
-    "description": "InputTextareaWithLabel: labelled textarea with error/description support",
+  "SRCDEV InputTextareaField Basic": {
+    "description": "InputTextareaField: labelled textarea with description and error support",
     "scope": "vue,html",
     "body": [
-      "<InputTextareaWithLabel",
+      "<InputTextareaField",
       "  v-model=\"$1fieldValue\"",
       "  name=\"$2fieldName\"",
       "  label=\"$3Field label\"",
-      "  placeholder=\"$4Placeholder text\"",
+      "  :maxlength=\"${4:1000}\"",
       "  :error-message=\"$5errors.fieldName\"",
       "  :field-has-error=\"!!$5errors.fieldName\"",
-      "/>"
+      ">",
+      "  <template #descriptionText>$6</template>",
+      "</InputTextareaField>"
     ]
   },
   "SRCDEV InputTextarea CSS Override": {
-    "description": "CSS override scaffold for InputTextareaCore tokens",
+    "description": "CSS override scaffold for InputTextarea tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",
-      "  .input-textarea-wrapper {",
-      "    --input-textarea-surface: $2;",
-      "    --input-textarea-border: $3;",
+      "  --input-textarea-surface: $2;",
+      "  --input-textarea-border: $3;",
+      "  --input-textarea-max-height: ${4:20lh};",
+      "",
+      "  .input-textarea-field[data-invalid] {",
+      "    $0",
       "  }",
       "}"
     ]

package/.vscode/srcdev-component-toggle-switch.code-snippets

@@ -1,50 +1,40 @@
 {
-  "SRCDEV ToggleSwitchCore": {
-    "description": "ToggleSwitchCore — bare toggle switch (no label, use ToggleSwitchWithLabel for that)",
+  "SRCDEV ToggleSwitch": {
+    "description": "ToggleSwitch: bare switch (pair with a label for=\"toggle-switch-{id}\", or use ToggleSwitchField)",
     "scope": "vue,html",
     "body": [
-      "<ToggleSwitchCore",
-      "  v-model=\"$1modelValue\"",
-      "  id=\"$2toggle-id\"",
-      "  name=\"$3toggleName\"",
+      "<label for=\"toggle-switch-$1toggle-id\">$2Label</label>",
+      "<ToggleSwitch",
+      "  id=\"$1toggle-id\"",
+      "  v-model=\"$3modelValue\"",
+      "  name=\"$4toggleName\"",
       "/>"
     ]
   },
-  "SRCDEV ToggleSwitchWithLabel": {
-    "description": "ToggleSwitchWithLabel: labelled toggle switch with description/error support",
+  "SRCDEV ToggleSwitchField": {
+    "description": "ToggleSwitchField: labelled switch with description and error support",
     "scope": "vue,html",
     "body": [
-      "<ToggleSwitchWithLabel",
+      "<ToggleSwitchField",
       "  v-model=\"$1fieldValue\"",
       "  name=\"$2fieldName\"",
       "  label=\"$3Field label\"",
-      "  :error-message=\"$4errors.fieldName\"",
-      "  :field-has-error=\"!!$4errors.fieldName\"",
+      "  layout=\"${4|stacked,inline|}\"",
+      "  :error-message=\"$5errors.fieldName\"",
+      "  :field-has-error=\"!!$5errors.fieldName\"",
       ">",
-      "  <template #descriptionText>$5Help text</template>",
-      "</ToggleSwitchWithLabel>"
-    ]
-  },
-  "SRCDEV ToggleSwitchWithLabelInline": {
-    "description": "ToggleSwitchWithLabelInline: compact label + toggle switch side by side, no error support",
-    "scope": "vue,html",
-    "body": [
-      "<ToggleSwitchWithLabelInline",
-      "  v-model=\"$1fieldValue\"",
-      "  name=\"$2fieldName\"",
-      "  label=\"$3Field label\"",
-      "/>"
+      "  <template #descriptionText>$6Help text</template>",
+      "</ToggleSwitchField>"
     ]
   },
   "SRCDEV ToggleSwitch CSS Override": {
-    "description": "CSS override scaffold for ToggleSwitchCore tokens",
+    "description": "CSS override scaffold for ToggleSwitch tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",
-      "  .toggle-switch-wrapper {",
-      "    --toggle-switch-surface: $2;",
-      "    --toggle-switch-symbol-surface-on: $3;",
-      "  }",
+      "  --toggle-switch-surface: $2;",
+      "  --toggle-switch-symbol-surface-on: $3;",
+      "  --input-toggle-symbol-size: ${4:2.4rem};",
       "}"
     ]
   }

package/app/assets/styles/setup/04.elements/forms/00.element-defaults.css

@@ -11,9 +11,9 @@
   input:-webkit-autofill-and-obscured {
     background-color: var(--theme-surface) !important;
     background-image: none !important;
-    color: var(--_input-text-core-color) !important;
+    color: var(--input-text-color, var(--theme-input-text-color-normal)) !important;
     -webkit-box-shadow: 0 0 0rem 1000px var(--theme-surface) inset;
-    -webkit-text-fill-color: var(--_input-text-core-color);
+    -webkit-text-fill-color: var(--input-text-color, var(--theme-input-text-color-normal));
     transition: background-color 5000s ease-in-out 0s;
   }
 }

package/app/assets/styles/setup/04.elements/forms/06.button-geometry.css

@@ -17,7 +17,7 @@
      box alone — .input-button keeps box-sizing: content-box (changing that risks shifting
      icon-only's aspect-ratio: 1 sizing), so its own padding-block and border have to be
      subtracted back out here, unlike --input-min-height itself which happens to need no such
-     adjustment (InputTextCore has zero padding-block and no full border in its resting state).
+     adjustment (InputText has zero padding-block and no full border in its resting state).
      This is a floor, not a fixed height — icon-only/pill buttons or longer button-text can
      still grow past it. Textareas are the deliberate exception to this alignment entirely. */
   --button-min-height: calc(

package/app/components/01.atoms/animations/glowing-border/CONSUMER-STYLING.md

@@ -86,7 +86,7 @@ For a single "special" button or input, wrap just the control so the glow become
 No changes to the control are needed:
 
 - `InputButton`'s border already defaults to its own surface colour, so it shows no edge of its own.
-- `InputTextCore` needs `--input-text-border: transparent`.
+- `InputText` needs `--input-text-border: transparent`.
 - On the `GlowingBorder`: radius is the control's radius plus the glow width, surface
   `transparent`, overflow `visible` (so the control's hover and focus outlines aren't clipped),
   and an inline or shrink-to-fit display so it hugs the control.
@@ -97,7 +97,7 @@ No changes to the control are needed:
 </GlowingBorder>
 
 <GlowingBorder variant="vivid" style-class-passthrough="special-input">
-  <InputTextCore id="email" v-model="email" type="email" name="email"></InputTextCore>
+  <InputText id="email" v-model="email" type="email" name="email"></InputText>
 </GlowingBorder>
 ```
 

package/app/components/01.atoms/animations/glowing-border/stories/GlowingBorder.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { computed, ref } from "vue";
 import StorybookComponent from "../GlowingBorder.vue";
-import InputTextCore from "../../../../05.forms/input-text/InputTextCore.vue";
+import InputText from "../../../../05.forms/input-text/InputText.vue";
 import InputButton from "../../../../05.forms/input-button/InputButton.vue";
 import CanvasSwitcher from "../../../canvas-switcher/CanvasSwitcher.vue";
 import type { MediaCanvas } from "~/types/components";
@@ -194,7 +194,7 @@ CustomTokens.args = {
 };
 
 export const HighlightedControls: StoryFn<StoryArgs> = (args) => ({
-  components: { StorybookComponent, InputTextCore, InputButton },
+  components: { StorybookComponent, InputText, InputButton },
   setup() {
     const { args: storyArgs, stageStyle } = useStorySetup(args);
     const glowStyle = (controlRadius: string) =>
@@ -224,13 +224,13 @@ export const HighlightedControls: StoryFn<StoryArgs> = (args) => ({
       <div style="display: grid; gap: 8px; inline-size: min(100%, 40rem);">
         <label for="highlighted-email">Early-access email</label>
         <StorybookComponent :variant="args.variant" :style="inputGlowStyle">
-          <InputTextCore
+          <InputText
             id="highlighted-email"
             v-model="email"
             type="email"
             name="highlighted-email"
             placeholder="eg. jane@example.com"
-          ></InputTextCore>
+          ></InputText>
         </StorybookComponent>
       </div>
     </div>

package/app/components/02.molecules/progress-tracker/stories/ProgressTracker.stories.ts

@@ -2,7 +2,7 @@ import { computed, reactive, ref } from "vue";
 import ProgressTracker from "../ProgressTracker.vue";
 import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import InputButton from "../../../05.forms/input-button/InputButton.vue";
-import InputTextWithLabel from "../../../05.forms/input-text/InputTextWithLabel.vue";
+import InputTextField from "../../../05.forms/input-text/InputTextField.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { MediaCanvas, ProgressTrackerStep } from "~/types/components";
 
@@ -217,7 +217,7 @@ export const Wizard: Story = {
   name: "Wizard (parent-owned forms)",
   args: { modelValue: 0, steps: wizardSteps },
   render: (args) => ({
-    components: { ProgressTracker, InputButton, InputTextWithLabel },
+    components: { ProgressTracker, InputButton, InputTextField },
     setup() {
       const story = useStorySetup(args);
       const form = reactive({ name: "", email: "" });
@@ -254,7 +254,7 @@ export const Wizard: Story = {
         <ProgressTracker v-bind="componentArgs" v-model="args.modelValue" :steps="steps">
           <template #step-0="{ headingId }">
             <form :aria-labelledby="headingId" style="display: grid; gap: 1.6rem;" @submit.prevent="next('name')">
-              <InputTextWithLabel
+              <InputTextField
                 v-model="form.name"
                 type="text"
                 name="wizard-name"
@@ -270,7 +270,7 @@ export const Wizard: Story = {
           </template>
           <template #step-1="{ headingId }">
             <form :aria-labelledby="headingId" style="display: grid; gap: 1.6rem;" @submit.prevent="next('email')">
-              <InputTextWithLabel
+              <InputTextField
                 v-model="form.email"
                 type="email"
                 name="wizard-email"

package/app/components/05.forms/form-errors/CONSUMER-STYLING.md

@@ -1,7 +1,7 @@
 # InputError — Consumer Styling Guide
 
 `InputError` is the red error message strip rendered under a form control by every `*Field`
-wrapper (`InputTextWithLabel`, `InputNumberField`, `InputSelectWithLabel`, `SingleCheckbox`, ...).
+wrapper (`InputTextField`, `InputNumberField`, `InputSelectField`, `SingleCheckbox`, ...).
 It animates open (`grid-template-rows: 0fr → 1fr` plus opacity) when the field is in error.
 
 ## Public token API

package/app/components/05.forms/form-field/CONSUMER-STYLING.md

@@ -1,7 +1,7 @@
 # FormField — Consumer Styling Guide
 
 `FormField` is a layout wrapper for one form control (typically an `*Field` component such as
-`InputTextWithLabel` or `InputNumberField`). It caps the field's width, centres it, optionally
+`InputTextField` or `InputNumberField`). It caps the field's width, centres it, optionally
 insets it from its container's edges with a gutter, and applies vertical spacing between fields.
 
 ## Public token API
@@ -65,7 +65,7 @@ Set the tokens above on an element you own (a page or section class, or a class
 
 ```vue
 <FormField width="wide" style="--form-field-background-color: var(--slate-01);">
-  <InputTextWithLabel ... />
+  <InputTextField ... />
 </FormField>
 ```
 

package/app/components/05.forms/input-button/stories/InputButton.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref } from "vue";
 import StorybookComponent from "../InputButton.vue";
-import InputTextCore from "../../input-text/InputTextCore.vue";
+import InputText from "../../input-text/InputText.vue";
 
 interface InputButtonStoryArgs {
   type: "submit" | "button" | "reset";
@@ -314,11 +314,11 @@ NuxtIconOnlyComponent.args = {
 // most common "usual suspect" pairing (e.g. newsletter signup, search bar). Textareas are the
 // deliberate exception to this alignment and aren't part of this story.
 const InlineTemplate: StoryFn = () => ({
-  components: { StorybookComponent, InputTextCore },
+  components: { StorybookComponent, InputText },
   template: `
     <div style="margin: 36px; max-width: 480px;">
       <div style="display: flex; align-items: flex-start; gap: 0.8rem;">
-        <InputTextCore
+        <InputText
           id="inline-email"
           name="email"
           type="email"

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