srcdev-nuxt-components 9.6.7 → 9.6.8

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

@@ -1,9 +1,11 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { computed, ref } from "vue";
-import StorybookComponent from "../InputCheckboxRadioField.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputCheckboxRadioField from "../InputCheckboxRadioField.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
 
-interface InputCheckboxRadioFieldStoryArgs {
+interface StoryArgs {
   type: "checkbox" | "radio";
   name: string;
   label: string;
@@ -15,9 +17,22 @@ interface InputCheckboxRadioFieldStoryArgs {
   useLabelSlot: boolean;
 }
 
-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}">
+    Wrapped in a fieldset with a legend, description and error message, this is the
+    <a href="/?path=/story/components-forms-input-checkbox-singlecheckbox--default" target="_top">SingleCheckbox</a>;
+    a data-driven group of them is
+    <a href="/?path=/story/components-forms-input-checkbox-multiplecheckboxes--default" target="_top">MultipleCheckboxes</a>
+    or
+    <a href="/?path=/story/components-forms-input-radio-multipleradiobuttons--default" target="_top">MultipleRadiobuttons</a>.
+  </p>
+`;
+
+const meta: Meta<StoryArgs> = {
   title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadioField",
-  component: StorybookComponent,
+  component: InputCheckboxRadioField,
   argTypes: {
     type: { control: { type: "select" }, options: ["checkbox", "radio"], table: { category: "Basic" } },
     name: { control: "text", table: { category: "Basic" } },
@@ -25,7 +40,7 @@ export default {
     required: { control: "boolean", table: { category: "Basic" } },
     useLabelSlot: {
       control: "boolean",
-      description: "Use the labelContent slot (rich label with a link) instead of the label prop",
+      description: "Story-only: use the labelContent slot (rich label with a link) instead of the label prop",
       table: { category: "Slots" },
     },
     fieldHasError: { control: "boolean", description: "Rendered as data-invalid", table: { category: "States" } },
@@ -41,8 +56,9 @@ export default {
     },
     labelColor: {
       control: "color",
-      description: "Sets --input-checkbox-label-color on the story wrapper",
-      table: { category: "Tokens" },
+      description:
+        "**Story control, not a prop.** Sets `--input-checkbox-label-color` on the story wrapper. In your CSS: `.my-form { --input-checkbox-label-color: #333; }`",
+      table: { category: "CSS tokens (story only, set in your CSS)" },
     },
   },
   args: {
@@ -56,10 +72,39 @@ export default {
     labelColor: "",
     useLabelSlot: false,
   },
-} as Meta<InputCheckboxRadioFieldStoryArgs>;
+  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 `<label>` holding the checkbox or radio control and its text, so the whole row is clickable. It generates its own id with `useId()`. Props: `type`, `name`, `label`, `trueValue`/`falseValue`, `multipleOptions` (array model for a checkbox group), `required`, `fieldHasError`. Slots: `labelContent` (rich label), `checkedIcon`. Usually used through `SingleCheckbox`, `MultipleCheckboxes` or `MultipleRadiobuttons`: see the [SingleCheckbox](?path=/story/components-forms-input-checkbox-singlecheckbox--default) story.",
+      },
+    },
+  },
+};
 
-const Template: StoryFn<InputCheckboxRadioFieldStoryArgs> = (args) => ({
-  components: { StorybookComponent },
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputCheckboxRadioField },
   setup() {
     const modelValue = ref<boolean | string>(false);
     const componentArgs = computed(() => {
@@ -70,24 +115,52 @@ const Template: StoryFn<InputCheckboxRadioFieldStoryArgs> = (args) => ({
     return { args, componentArgs, tokenStyles, modelValue };
   },
   template: `
-    <div style="margin: 36px; max-width: 480px;" :style="tokenStyles">
-      <StorybookComponent v-bind="componentArgs" v-model="modelValue">
+    <div :style="tokenStyles">
+      ${parentNote}
+      <InputCheckboxRadioField v-bind="componentArgs" v-model="modelValue">
         <template v-if="args.useLabelSlot" #labelContent>
           I agree to the&nbsp;<a href="#terms">terms and conditions</a>
         </template>
-      </StorybookComponent>
+      </InputCheckboxRadioField>
       <p style="margin-top: 2rem; font-family: monospace;">modelValue: {{ JSON.stringify(modelValue) }}</p>
     </div>
   `,
 });
 
-export const Checkbox = Template.bind({});
+export const Checkbox: Story = { render };
+
+export const RichLabel: Story = {
+  args: { useLabelSlot: true },
+  render,
+  parameters: { docs: { description: { story: "The `labelContent` slot replaces the `label` prop, here with a link." } } },
+};
 
-export const RichLabel = Template.bind({});
-RichLabel.args = { useLabelSlot: true };
+export const Underlined: Story = {
+  args: { inputVariant: "underlined" },
+  render,
+  parameters: { docs: { description: { story: "`inputVariant=\"underlined\"` squares off the checkbox." } } },
+};
 
-export const Underlined = Template.bind({});
-Underlined.args = { inputVariant: "underlined" };
+export const ErrorState: Story = {
+  args: { fieldHasError: true, theme: "error" },
+  render,
+  parameters: { docs: { description: { story: "`fieldHasError` sets `data-invalid` on the label and `aria-invalid` on the input." } } },
+};
 
-export const ErrorState = Template.bind({});
-ErrorState.args = { fieldHasError: true, theme: "error" };
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    label:
+      "💇‍♀️ Datenschutzgrundverordnungseinwilligungsbestätigungserklärung https://example.com/privacy/policy/with/a/very/long/unbroken/path <b>not bold</b> قص الشعر",
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "A label with emoji at the start, a long unbroken German word and URL, HTML-like text and right-to-left text. Check at every canvas width: the label wraps inside the dashed outline, the control keeps its size instead of being squashed, markup renders as text, and clicking anywhere on the label toggles the control. Also try an empty label and a single character, and switch `type` to `radio`.",
+      },
+    },
+  },
+};

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

@@ -1,4 +1,5 @@
-import { describe, it, expect } from "vitest";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import InputCheckboxRadio from "../InputCheckboxRadio.vue";
 
@@ -11,12 +12,22 @@ const defaultProps = {
   modelValue: "unchecked",
 };
 
-const createWrapper = (props = {}, slots = {}) =>
-  mountSuspended(InputCheckboxRadio, {
+const mounted: VueWrapper[] = [];
+
+const createWrapper = async (props = {}, slots = {}) => {
+  const wrapper = await mountSuspended(InputCheckboxRadio, {
     attachTo: document.body,
     props: { ...defaultProps, ...props },
     slots,
   });
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
 
 const inputOf = (wrapper: Awaited<ReturnType<typeof createWrapper>>) => wrapper.find("input").element as HTMLInputElement;
 

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

@@ -1,4 +1,6 @@
-import { describe, it, expect } from "vitest";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { defineComponent } from "vue";
+import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import InputCheckboxRadioButton from "../InputCheckboxRadioButton.vue";
 
@@ -12,12 +14,22 @@ const defaultProps = {
   multipleOptions: true,
 };
 
-const createWrapper = (props = {}, slots = {}) =>
-  mountSuspended(InputCheckboxRadioButton, {
+const mounted: VueWrapper[] = [];
+
+const createWrapper = async (props = {}, slots = {}) => {
+  const wrapper = await mountSuspended(InputCheckboxRadioButton, {
     attachTo: document.body,
     props: { ...defaultProps, ...props },
     slots,
   });
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
 
 describe("InputCheckboxRadioButton", () => {
   it("renders a label linked to the inner control by id", async () => {
@@ -27,6 +39,29 @@ describe("InputCheckboxRadioButton", () => {
     expect(wrapper.find("input").attributes("id")).toBe("service-balayage");
   });
 
+  it("generates a space-free id linking label and control when no id is passed", async () => {
+    const wrapper = await createWrapper({ id: undefined });
+    const id = wrapper.find("input").attributes("id");
+
+    expect(id).toBeTruthy();
+    expect(id).not.toMatch(/\s/);
+    expect(wrapper.find("label.input-checkbox-radio-button").attributes("for")).toBe(id);
+  });
+
+  it("generates a different id for each instance", async () => {
+    const Host = defineComponent({
+      components: { InputCheckboxRadioButton },
+      setup: () => ({ props: { ...defaultProps, id: undefined } }),
+      template: `<div><InputCheckboxRadioButton v-bind="props" /><InputCheckboxRadioButton v-bind="props" /></div>`,
+    });
+    const host = await mountSuspended(Host);
+    mounted.push(host);
+    const ids = host.findAll("input").map((input) => input.attributes("id"));
+
+    expect(ids).toHaveLength(2);
+    expect(ids[0]).not.toBe(ids[1]);
+  });
+
   it("renders the label prop, or the labelContent slot in its place", async () => {
     const plain = await createWrapper();
     expect(plain.find(".input-checkbox-radio-button-label").text()).toBe("Balayage");

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

@@ -1,4 +1,5 @@
-import { describe, it, expect } from "vitest";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import InputCheckboxRadioField from "../InputCheckboxRadioField.vue";
 
@@ -9,12 +10,22 @@ const defaultProps = {
   modelValue: false,
 };
 
-const createWrapper = (props = {}, slots = {}) =>
-  mountSuspended(InputCheckboxRadioField, {
+const mounted: VueWrapper[] = [];
+
+const createWrapper = async (props = {}, slots = {}) => {
+  const wrapper = await mountSuspended(InputCheckboxRadioField, {
     attachTo: document.body,
     props: { ...defaultProps, ...props },
     slots,
   });
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
 
 describe("InputCheckboxRadioField", () => {
   it("renders a label linked to the inner control", async () => {

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

@@ -2,7 +2,7 @@
 
 `InputDescription` is the help text rendered between the label and the control by every `*Field`
 wrapper (`InputTextWithLabel`, `InputNumberField`, `InputSelectWithLabel`,
-`InputTextareaWithLabel`, `InputRangeDefault`, `InputTextAsNumberWithLabel`, `SingleCheckbox`,
+`InputTextareaWithLabel`, `InputRangeField`, `InputTextAsNumberWithLabel`, `SingleCheckbox`,
 `MultipleCheckboxes`, `MultipleRadiobuttons`) when you pass it a `descriptionText` or
 `descriptionHtml` slot. With neither slot it renders nothing.
 
@@ -53,7 +53,7 @@ No private tokens.
 
 | Attribute on `.input-description` | When |
 |---|---|
-| `data-input-variant="normal" \| "outlined" \| "underlined"` | Always, mirrors the field's `input-variant` (not passed by `InputRangeDefault`, which has no variants, so it stays `normal` there) |
+| `data-input-variant="normal" \| "outlined" \| "underlined"` | Always, mirrors the field's `input-variant` (not passed by `InputRangeField`, which has no variants, so it stays `normal` there) |
 | `data-invalid` | The field has an error |
 
 Inner elements: `.input-description-html` (div), `.input-description-text` (p).

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

@@ -2,7 +2,7 @@
 
 `InputLabel` is the `<label>` rendered by every labelled field wrapper (`InputTextWithLabel`,
 `InputTextAsNumberWithLabel`, `InputNumberField`, `InputSelectWithLabel`,
-`InputTextareaWithLabel`, `InputRangeDefault`, `ToggleSwitchWithLabel`,
+`InputTextareaWithLabel`, `InputRangeField`, `ToggleSwitchWithLabel`,
 `ToggleSwitchWithLabelInline`).
 
 ## Public token API
@@ -50,7 +50,7 @@ shared fallback so the per-state tokens don't repeat it.
 
 | Attribute on `.input-label` | When |
 |---|---|
-| `data-input-variant="normal" \| "outlined" \| "underlined"` | Always, mirrors the field's `input-variant` (`InputRangeDefault` and the toggle switches always pass `normal`) |
+| `data-input-variant="normal" \| "outlined" \| "underlined"` | Always, mirrors the field's `input-variant` (`InputRangeField` and the toggle switches always pass `normal`) |
 | `data-invalid` | The field has an error (not passed by `ToggleSwitchWithLabelInline`) |
 
 | Attribute on `.input-label-indicator` | When |

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

@@ -29,12 +29,41 @@ component and untouched by this — see `theming-form-geometry-tokens.md`.
 
 ---
 
+## State hooks
+
+| Attribute | On | When |
+|---|---|---|
+| `data-input-variant="normal" \| "outlined" \| "underlined"` | `.input-number-wrapper`, `.input-number-field` | Always, mirrors `input-variant` |
+| `data-theme` | `.input-number-wrapper`, `.input-number-field` | Always, mirrors `theme` |
+| `data-invalid` | `.input-number-wrapper`, `.input-number-field` | `field-has-error` |
+| `data-has-left-slot` / `data-has-right-slot` | `.input-number-wrapper` | The `left` / `right` slot is filled |
+
+Inner elements: `.input-number-slot` (both slot holders), `.input-number-slot-left`,
+`.input-number-slot-right`, `.input-number-container`, `.input-number` (the native input),
+`.input-number-label` (the Field's `InputLabel`).
+
+> **Changed 2026-10-16**: state used to be bare classes, which collide with common consumer CSS
+> (an unlayered `.error` or `.normal` rule would restyle the field). Select on the attributes
+> above instead:
+>
+> - `.input-number-wrapper.normal` / `.underlined` → `[data-input-variant="…"]`
+> - `.input-number-wrapper.has-left-slot` / `.has-right-slot` → `[data-has-left-slot]` /
+>   `[data-has-right-slot]`
+> - `.slot.left-slot` / `.slot.right-slot` → `.input-number-slot-left` / `.input-number-slot-right`
+> - `.input-number-field.error` → `[data-invalid]`; its `.normal`/`.underlined` and `theme-*`
+>   classes → `[data-input-variant]` / `[data-theme]`
+>
+> Also: long label, description and error copy now wraps (`overflow-wrap: anywhere` on
+> `.input-number-field`), and the control's minimum width is capped at `12em` so a long `min`/`max`
+> can't push it past a phone screen.
+
+---
+
 ## Input variant
 
 `:input-variant="'normal' | 'outlined' | 'underlined'"` (default `"normal"`) — same prop as
 `InputTextCore`. Only `normal` (bordered box, with hover/focus outline) and `underlined`
-(bottom-border only) have CSS today; `outlined` has no styling in `InputTextCore` either (no
-`&.outlined` rule exists there), so passing it renders with no border/outline at all — a
+(bottom-border only) have CSS today; `outlined` has no styling in `InputTextCore` either, so passing it renders with no border/outline at all — a
 pre-existing gap in the type, not something specific to `InputNumber`. Declared for prop-shape
 consistency with the rest of `05.forms`.
 
@@ -68,3 +97,14 @@ Set the tokens above on an element you own (a page or section class, or a class
 <InputNumber id="quantity" name="quantity" :min="1" :max="10" style="--input-number-border: var(--gold-04);" />
 ```
 
+
+---
+
+## Class passthrough
+
+`InputNumber`'s `:style-class-passthrough` lands on the native `<input class="input-number">`.
+`InputNumberField`'s lands on its root `.input-number-field` only.
+
+> **Changed 2026-10-16**: `InputNumberField` also forwarded its passthrough classes to the inner
+> input, so a class meant for the field matched two elements. If you styled the input through the
+> Field's passthrough, select `.your-class .input-number` instead.

package/app/components/05.forms/input-number/InputNumber.vue

@@ -3,9 +3,11 @@
     class="input-number-wrapper"
     :data-theme="theme"
     :data-invalid="fieldHasError ? '' : null"
-    :class="[inputVariant, { 'has-left-slot': slots.left, 'has-right-slot': slots.right }]"
+    :data-input-variant="inputVariant"
+    :data-has-left-slot="slots.left ? '' : undefined"
+    :data-has-right-slot="slots.right ? '' : undefined"
   >
-    <div v-if="slots.left" class="slot left-slot">
+    <div v-if="slots.left" class="input-number-slot input-number-slot-left">
       <slot name="left"></slot>
     </div>
 
@@ -22,12 +24,11 @@
         :step
         :placeholder
         :class="['input-number', `input-number--${weight}`, elementClasses]"
-        inputmode="numeric"
-        pattern="[0-9]+"
+        :inputmode
         :aria-describedby
       />
     </div>
-    <div v-if="slots.right" class="slot right-slot">
+    <div v-if="slots.right" class="input-number-slot input-number-slot-right">
       <slot name="right"></slot>
     </div>
   </div>
@@ -70,8 +71,26 @@ const modelValue = defineModel<number | readonly number[]>({
   required: true,
 });
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-const minLength = computed(() => `${props.max.toString().length + 1}em`);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+const decimalPlaces = (value: number) => (String(value).split(".")[1] ?? "").length;
+
+const minLength = computed(() => {
+  const longest = Math.max(String(props.min).length, String(props.max).length) + decimalPlaces(props.step);
+  return `${Math.min(longest + 1, 12)}em`;
+});
+
+const inputmode = computed(() => {
+  if (props.min < 0) return undefined;
+  return Number.isInteger(props.step) ? "numeric" : "decimal";
+});
 </script>
 
 <style lang="css">
@@ -92,6 +111,7 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
     align-items: center;
 
     width: fit-content;
+    max-inline-size: 100%;
 
     background-color: var(--_surface);
     overflow: hidden;
@@ -99,7 +119,7 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
     position: relative;
     z-index: 2;
 
-    &.normal {
+    &[data-input-variant="normal"] {
       border: var(--form-element-border-width) solid var(--_border);
       border-radius: var(--form-input-border-radius);
       outline: var(--form-element-outline-width) solid transparent;
@@ -116,12 +136,14 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
       }
     }
 
-    &.underlined {
+    &[data-input-variant="underlined"] {
       border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
     }
 
-    .slot {
-      display: inline-block;
+    .input-number-slot {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
 
       .icon {
         font-weight: 900;
@@ -153,25 +175,15 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
       }
     }
 
-    &.has-left-slot {
-      .left-slot {
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    &.has-right-slot {
-      .right-slot {
-        display: flex;
-        align-items: center;
-      }
+    .input-number-container {
+      min-inline-size: 0;
     }
 
-    &.has-left-slot .left-slot .input-button {
+    .input-number-slot-left .input-button {
       border-right: var(--form-element-border-width) solid var(--_border);
     }
 
-    &.has-right-slot .right-slot .input-button {
+    .input-number-slot-right .input-button {
       border-left: var(--form-element-border-width) solid var(--_border);
     }
 

package/app/components/05.forms/input-number/InputNumberField.vue

@@ -3,14 +3,15 @@
     class="input-number-field"
     :data-theme="theme"
     :data-invalid="fieldHasError ? '' : null"
-    :class="[elementClasses, inputVariant, `theme-${theme}`, { error: fieldHasError }]"
+    :data-input-variant="inputVariant"
+    :class="elementClasses"
   >
     <InputLabel
       :id
       :required
       :input-variant
       :field-has-error
-      :style-class-passthrough="['input-number-label', 'body-normal-bold']"
+      :style-class-passthrough="['input-number-label']"
     >
       <template #textLabel>{{ label }}</template>
     </InputLabel>
@@ -42,7 +43,6 @@
       :weight
       :input-variant
       :field-has-error
-      :style-class-passthrough
       :aria-describedby="ariaDescribedby()"
     >
       <template v-if="slots.left" #left>
@@ -53,7 +53,7 @@
           :button-text="stepDownLabel"
           :theme="theme"
           variant="inline"
-          @click.stop.prevent="updateValue(-step, Number(modelValue) > min)"
+          @click.stop.prevent="stepBy(-1)"
         >
           <template #iconOnly>
             <slot name="left"></slot>
@@ -68,7 +68,7 @@
           :button-text="stepUpLabel"
           :theme="theme"
           variant="inline"
-          @click.stop.prevent="updateValue(step, Number(modelValue) < max)"
+          @click.stop.prevent="stepBy(1)"
         >
           <template #iconOnly>
             <slot name="right"></slot>
@@ -76,7 +76,7 @@
         </InputButton>
       </template>
     </InputNumber>
-    <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="true" />
+    <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="true" :input-variant />
   </div>
 </template>
 
@@ -115,7 +115,14 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const slots = useSlots();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 
 const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   props.name,
@@ -126,16 +133,28 @@ const modelValue = defineModel<number | readonly number[]>({
   required: true,
 });
 
-const updateValue = (step: number, withinRangeLimit: boolean) => {
-  if (withinRangeLimit) {
-    modelValue.value = (Number(modelValue.value) + step) as number;
+const decimalPlaces = (value: number) => (String(value).split(".")[1] ?? "").length;
+const clamp = (value: number) => Math.min(Math.max(value, props.min), props.max);
+
+const stepBy = (direction: 1 | -1) => {
+  const current = modelValue.value;
+  if (typeof current !== "number" || !Number.isFinite(current)) {
+    modelValue.value = clamp(0);
+    return;
   }
+  const stepSize = Math.abs(props.step) || 1;
+  const precision = Math.max(decimalPlaces(stepSize), decimalPlaces(current), decimalPlaces(props.min));
+  const next = clamp(Number((current + direction * stepSize).toFixed(precision)));
+  if (next !== current) modelValue.value = next;
 };
 </script>
 
 <style lang="css">
 @layer components {
   .input-number-field {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+
     .input-number-label {
       display: block;
       margin-block: 0.8rem;
@@ -144,12 +163,6 @@ const updateValue = (step: number, withinRangeLimit: boolean) => {
         cursor: pointer;
       }
     }
-
-    .label-description {
-      font-family: var(--font-family);
-      font-size: 1.6rem;
-      margin-top: 1.2rem;
-    }
   }
 }
 </style>