srcdev-nuxt-components 9.6.7 → 9.6.9

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

@@ -1,8 +1,8 @@
 # InputDescription — Consumer Styling Guide
 
 `InputDescription` is the help text rendered between the label and the control by every `*Field`
-wrapper (`InputTextWithLabel`, `InputNumberField`, `InputSelectWithLabel`,
-`InputTextareaWithLabel`, `InputRangeDefault`, `InputTextAsNumberWithLabel`, `SingleCheckbox`,
+wrapper (`InputTextField`, `InputNumberField`, `InputSelectField`,
+`InputTextareaField`, `InputRangeField`, `InputTextAsNumberField`, `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).
@@ -84,9 +84,9 @@ description. Keep these blocks **unlayered** (no `@layer ...` wrapper) so they b
 ```vue
 <template>
   <div class="contact-page-content">
-    <InputTextWithLabel v-model="email" name="email" label="Email">
+    <InputTextField v-model="email" name="email" label="Email">
       <template #descriptionText>We'll only use this for your booking confirmation</template>
-    </InputTextWithLabel>
+    </InputTextField>
   </div>
 </template>
 
@@ -108,9 +108,9 @@ The wrappers don't forward `style-class-passthrough` to the description, but a p
 the wrapper itself lands on its root element, which is an ancestor of the description:
 
 ```vue
-<InputTextWithLabel class="email-field" v-model="email" name="email" label="Email">
+<InputTextField class="email-field" v-model="email" name="email" label="Email">
   <template #descriptionText>We'll only use this for your booking confirmation</template>
-</InputTextWithLabel>
+</InputTextField>
 
 <style>
 .email-field {

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

@@ -1,9 +1,9 @@
 # InputLabel — Consumer Styling Guide
 
-`InputLabel` is the `<label>` rendered by every labelled field wrapper (`InputTextWithLabel`,
-`InputTextAsNumberWithLabel`, `InputNumberField`, `InputSelectWithLabel`,
-`InputTextareaWithLabel`, `InputRangeDefault`, `ToggleSwitchWithLabel`,
-`ToggleSwitchWithLabelInline`).
+`InputLabel` is the `<label>` rendered by every labelled field wrapper (`InputTextField`,
+`InputTextAsNumberField`, `InputNumberField`, `InputSelectField`,
+`InputTextareaField`, `InputRangeField`,
+`ToggleSwitchField`).
 
 ## Public token API
 
@@ -50,8 +50,8 @@ 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-invalid` | The field has an error (not passed by `ToggleSwitchWithLabelInline`) |
+| `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 (passed by every Field) |
 
 | Attribute on `.input-label-indicator` | When |
 |---|---|

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

@@ -7,11 +7,11 @@ to override just this component; leave it unset and it inherits the shared `--th
 `--theme-*` token every other themed component also falls back to. See
 `theming-component-token-pattern.md` for why this two-tier shape exists.
 
-This shape mirrors `InputTextCore`'s token set (see its own CONSUMER-STYLING.md) — `InputNumber`
-is a native `<input type="number">` sibling to the text-based `InputTextAsNumberWithLabel` variant,
+This shape mirrors `InputText`'s token set (see its own CONSUMER-STYLING.md) — `InputNumber`
+is a native `<input type="number">` sibling to the text-based `InputTextAsNumberField` variant,
 and both are meant to look and behave the same way. Border colour also doubles as the divider
 colour between the input and an embedded left/right `InputButton` — there's no separate divider
-token, same as `InputTextCore`.
+token, same as `InputText`.
 
 | Token | Falls back to | Controls |
 |---|---|---|
@@ -27,14 +27,47 @@ Geometry (`--input-padding-block`, `--input-padding-inline`, `--input-min-height
 `--form-input-border-radius`, `--input-font-size`, etc.) is shared across every `05.forms`
 component and untouched by this — see `theming-form-geometry-tokens.md`.
 
+Private (not public API): `--_surface`, `--_border` and `--_border-focus` (each resolved once and
+read in several places) and `--_min-width` (the input's minimum width, worked out from `min`, `max`
+and `step` and capped at `12em`).
+
+---
+
+## 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
+`InputText`. Only `normal` (bordered box, with hover/focus outline) and `underlined`
+(bottom-border only) have CSS today; `outlined` has no styling in `InputText` 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 +101,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">
@@ -81,8 +100,8 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
 
     /* Public --input-number-* tokens, inline-fallback to the shared --theme-* tokens (see
      theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
-     input/control that also reads --theme-input-surface/--theme-border. Mirrors InputTextCore's
-     token shape so a native number input and the text-based InputTextAsNumberWithLabel variant
+     input/control that also reads --theme-input-surface/--theme-border. Mirrors InputText's
+     token shape so a native number input and the text-based InputTextAsNumberField variant
      look and behave the same way (see input-number.md's "Fixed 2026-09-22" note). */
     --_surface: var(--input-number-surface, var(--theme-input-surface));
     --_border: var(--input-number-border, var(--theme-border));
@@ -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>

package/app/components/05.forms/input-number/stories/InputNumber.stories.ts

@@ -1,8 +1,10 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref } from "vue";
-import StorybookComponent from "../InputNumber.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputNumber from "../InputNumber.vue";
+import InputButton from "../../input-button/InputButton.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
-interface InputNumberStoryArgs {
+interface StoryArgs {
   id: string;
   name: string;
   min: number;
@@ -11,13 +13,23 @@ interface InputNumberStoryArgs {
   placeholder: string;
   required: boolean;
   fieldHasError: boolean;
+  theme: FormUiTheme;
   weight: string;
-  inputVariant: string;
+  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}">
+    With a label, description, error message and clamped step buttons wired up, this is the
+    <a href="/?path=/story/components-forms-input-number-inputnumberfield--with-step-buttons" target="_top">InputNumberField</a>.
+  </p>
+`;
+
+const meta: Meta<StoryArgs> = {
   title: "Components/Forms/Input Number/InputNumber",
-  component: StorybookComponent,
+  component: InputNumber,
   argTypes: {
     id: { control: "text", table: { category: "Basic" } },
     name: { control: "text", table: { category: "Basic" } },
@@ -27,7 +39,12 @@ export default {
     placeholder: { control: "text", table: { category: "Basic" } },
     required: { control: "boolean", table: { category: "Basic" } },
     fieldHasError: { control: "boolean", table: { category: "States" } },
-    weight: { control: "text", table: { category: "Styling" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    weight: { control: "text", description: "Adds an `input-number--{weight}` class; nothing styles it yet", table: { category: "Styling" } },
     inputVariant: {
       control: { type: "select" },
       options: ["normal", "outlined", "underlined"],
@@ -43,50 +60,84 @@ export default {
     placeholder: "",
     required: false,
     fieldHasError: false,
+    theme: "default",
     weight: "normal",
     inputVariant: "normal",
   },
-} as Meta<InputNumberStoryArgs>;
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The bare native `<input type=\"number\">` with `left`/`right` slots for embedded step buttons. No label, description or error: that's `InputNumberField`. `inputmode` follows `min` and `step` (`numeric`, `decimal`, or none when negatives are allowed). Hooks: `data-input-variant`, `data-theme`, `data-invalid`, `data-has-left-slot`, `data-has-right-slot`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
 
-const Template: StoryFn<InputNumberStoryArgs> = (args) => ({
-  components: { StorybookComponent },
+const render = (args: StoryArgs) => ({
+  components: { InputNumber },
   setup() {
     const modelValue = ref(50);
     return { args, modelValue };
   },
   template: `
     <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue" />
+      ${parentNote}
+      <InputNumber v-bind="args" v-model="modelValue" />
     </div>
   `,
 });
 
-export const Default = Template.bind({});
-
-export const ErrorState = Template.bind({});
-ErrorState.args = { fieldHasError: true };
-
-const WithStepButtonsTemplate: StoryFn<InputNumberStoryArgs> = (args) => ({
-  components: { StorybookComponent },
+const renderWithSlots = (args: StoryArgs) => ({
+  components: { InputNumber, InputButton },
   setup() {
     const modelValue = ref(50);
     return { args, modelValue };
   },
   template: `
     <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue">
+      ${parentNote}
+      <InputNumber v-bind="args" v-model="modelValue">
         <template #left>
-          <button type="button" @click="modelValue = Math.max(args.min, modelValue - args.step)">−</button>
+          <InputButton type="button" button-text="Step down" variant="inline" @click="modelValue = Math.max(args.min, modelValue - args.step)">
+            <template #iconOnly><Icon name="mdi:minus" /></template>
+          </InputButton>
         </template>
         <template #right>
-          <button type="button" @click="modelValue = Math.min(args.max, modelValue + args.step)">+</button>
+          <InputButton type="button" button-text="Step up" variant="inline" @click="modelValue = Math.min(args.max, modelValue + args.step)">
+            <template #iconOnly><Icon name="mdi:plus" /></template>
+          </InputButton>
         </template>
-      </StorybookComponent>
+      </InputNumber>
     </div>
   `,
 });
 
-export const WithStepButtons = WithStepButtonsTemplate.bind({});
+export const Default: Story = { render };
+
+export const ErrorState: Story = {
+  args: { fieldHasError: true },
+  render,
+  parameters: { docs: { description: { story: "`fieldHasError` sets `data-invalid` on the wrapper." } } },
+};
+
+export const WithStepButtons: Story = {
+  render: renderWithSlots,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Inline `InputButton`s in the `left`/`right` slots become flush segments of the control. The wiring here is deliberately minimal; `InputNumberField` does it properly (clamping, rounding, empty field).",
+      },
+    },
+  },
+};
 
-export const Underlined = WithStepButtonsTemplate.bind({});
-Underlined.args = { inputVariant: "underlined" };
+export const Underlined: Story = {
+  args: { inputVariant: "underlined" },
+  render: renderWithSlots,
+  parameters: { docs: { description: { story: "`inputVariant=\"underlined\"` keeps only a bottom border." } } },
+};