From a8e95107e5e3ecb62c71e8deb85d4fc680624cac Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 2 Sep 2026 23:55:54 +0200
Subject: [PATCH] Add locale-aware NumberInput

---
 .../CommandForm/number-input-field.md         |  31 +
 Documentation/CommandForm/toc.yml             |   2 +
 Documentation/Common/basic-controls.md        |   5 +
 Documentation/Common/index.md                 |   2 +
 Documentation/Common/number-input.md          | 120 ++++
 Documentation/Common/toc.yml                  |   2 +
 Documentation/Migration/3-to-4.md             |  40 +-
 Documentation/Styling/pass-through.md         |   4 +-
 Source/CommandForm/fields/Fields.stories.tsx  |  32 ++
 .../CommandForm/fields/NumberInputField.tsx   |  71 +++
 Source/CommandForm/fields/index.ts            |   1 +
 .../when_reusing_number_input.tsx             | 133 +++++
 Source/Common/NumberInput.css                 | 153 +++++
 Source/Common/NumberInput.stories.tsx         | 260 +++++++++
 Source/Common/NumberInput.tsx                 | 530 ++++++++++++++++++
 Source/Common/NumberInputCommitReason.ts      |  14 +
 Source/Common/NumberInputPartAttributes.ts    |  14 +
 .../for_NumberInput/given/a_number_input.tsx  | 126 +++++
 .../when_committing_values.tsx                | 272 +++++++++
 .../when_editing_locale_values.tsx            | 244 ++++++++
 .../when_guarding_parts_and_tokens.ts         |  44 ++
 .../when_rendering_semantics.tsx              | 284 ++++++++++
 Source/Common/index.ts                        |   3 +
 .../when_scanning_foundation_surfaces.tsx     |  10 +
 Source/scripts/generate-parts.mjs             |  25 +
 Source/scripts/verify-parts-manifest.mjs      |   6 +-
 Source/styles.css                             |   1 +
 Source/tokens.css                             |   3 +
 Source/types/parts.ts                         |  20 +
 Storybook/README.md                           |   2 +-
 Storybook/scripts/run-story-matrix.mjs        |   4 +-
 .../scripts/verify-storybook-indexes.mjs      |  12 +-
 yarn.lock                                     |   7 +
 33 files changed, 2453 insertions(+), 24 deletions(-)
 create mode 100644 Documentation/CommandForm/number-input-field.md
 create mode 100644 Documentation/Common/number-input.md
 create mode 100644 Source/CommandForm/fields/NumberInputField.tsx
 create mode 100644 Source/CommandForm/for_NumberInputField/when_reusing_number_input.tsx
 create mode 100644 Source/Common/NumberInput.css
 create mode 100644 Source/Common/NumberInput.stories.tsx
 create mode 100644 Source/Common/NumberInput.tsx
 create mode 100644 Source/Common/NumberInputCommitReason.ts
 create mode 100644 Source/Common/NumberInputPartAttributes.ts
 create mode 100644 Source/Common/for_NumberInput/given/a_number_input.tsx
 create mode 100644 Source/Common/for_NumberInput/when_committing_values.tsx
 create mode 100644 Source/Common/for_NumberInput/when_editing_locale_values.tsx
 create mode 100644 Source/Common/for_NumberInput/when_guarding_parts_and_tokens.ts
 create mode 100644 Source/Common/for_NumberInput/when_rendering_semantics.tsx

diff --git a/Documentation/CommandForm/number-input-field.md b/Documentation/CommandForm/number-input-field.md
new file mode 100644
index 00000000..4c3a3674
--- /dev/null
+++ b/Documentation/CommandForm/number-input-field.md
@@ -0,0 +1,31 @@
+# NumberInputField
+
+`NumberInputField` binds the standalone locale-aware [`NumberInput`](../Common/number-input.md) to a non-null number property in an Arc `CommandForm`.
+
+```tsx
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { NumberInputField } from '@cratis/components/CommandForm';
+import { UpdateSample } from './UpdateSample';
+
+<CommandDialog command={UpdateSample} title='Update sample'>
+    <NumberInputField<UpdateSample>
+        value={(command) => command.amount}
+        title='Amount'
+        required
+        min={0}
+        step={0.01}
+        minimumFractionDigits={2}
+        maximumFractionDigits={2}
+        suffix='kg'
+    />
+</CommandDialog>;
+```
+
+The adapter does not parse or format a second time. It reuses `NumberInput` and adds only CommandForm binding, title/error association, required-state propagation, blur validation, and the non-null command policy:
+
+- the command default is `0`;
+- clearing the nullable edit state writes `0` to the command property;
+- extracted `null`, `undefined`, or non-finite values become `0`;
+- all locale, grouping, fraction, range, step, adornment, callback, part, and token behavior belongs to `NumberInput`.
+
+Use [`NumberField`](number-field.md) instead when the native `input[type=number]` behavior and its clear-to-zero contract are sufficient. The existing native field remains the smaller surface and does not add locale grouping, adornments, or a separate commit callback.
diff --git a/Documentation/CommandForm/toc.yml b/Documentation/CommandForm/toc.yml
index e192c4a4..bd3697fc 100644
--- a/Documentation/CommandForm/toc.yml
+++ b/Documentation/CommandForm/toc.yml
@@ -18,6 +18,8 @@
   href: multi-select-field.md
 - name: NumberField
   href: number-field.md
+- name: NumberInputField
+  href: number-input-field.md
 - name: PasswordField
   href: password-field.md
 - name: RadioButtonField
diff --git a/Documentation/Common/basic-controls.md b/Documentation/Common/basic-controls.md
index 07e7941d..90e8620c 100644
--- a/Documentation/Common/basic-controls.md
+++ b/Documentation/Common/basic-controls.md
@@ -10,6 +10,7 @@ import {
     Button,
     Checkbox,
     IconButton,
+    NumberInput,
     Radio,
     Surface,
     Switch,
@@ -25,6 +26,7 @@ import {
         onChange={(value) => console.log(value)}
     />
     <TextArea name='notes' aria-label='Notes' />
+    <NumberInput value={12.5} onChange={(value) => console.log(value)} aria-label='Amount' />
     <Checkbox name='updates' value='email' label='Email updates' />
     <Radio name='frequency' value='daily' label='Daily' />
     <Switch name='notifications' value='enabled' label='Enable notifications' />
@@ -40,6 +42,7 @@ import {
 | `Button` | `button` / `HTMLButtonElement` | Native click and form action | `root`, `spinner`, `icon`, `label` | `disabled`, `loading`, `variant`, `tone`, `shape`, `size` on `root` |
 | `IconButton` | `button` / `HTMLButtonElement` | Uses `Button` click semantics | `root`, `spinner`, `icon`, `label` | `disabled`, `loading` on `root` |
 | `TextInput` | `input` / `HTMLInputElement` | `string` | `root` | `disabled`, `invalid`, `readonly` |
+| `NumberInput` | owned spinbutton composition | `number \| null` | `root`, `input`, `prefix`, `suffix`, `step`, `description`, `error` | `disabled`, `invalid`, `readonly`, `focused` where documented |
 | `TextArea` | `textarea` / `HTMLTextAreaElement` | `string` | `root` | `disabled`, `invalid`, `readonly` |
 | `Checkbox` | `input[type=checkbox]` / `HTMLInputElement` | `boolean` | `root`, `input`, `box`, `indicator`, `label` | `selected`, `disabled`, `invalid`, `readonly` |
 | `Radio` | one `input[type=radio]` / `HTMLInputElement` | `boolean` when checked | `root`, `input`, `box`, `indicator`, `label` | `selected`, `disabled`, `invalid`, `readonly` |
@@ -48,6 +51,8 @@ import {
 
 `IconButton` requires `aria-label` and delegates to `Button`; it does not add another button or interaction layer. It accepts the same semantic `variant`, `tone`, `shape`, `size`, `loading`, and `disabled` props as `Button`.
 
+[`NumberInput`](number-input.md) keeps locale-aware numeric edit text behind a controlled `number | null` boundary. Its public contract does not expose a formatter, renderer, or native event type.
+
 `TextInput` accepts the native text-like types `text`, `email`, `password`, `search`, `tel`, and `url`. `TextInput` and `TextArea` preserve native controlled (`value`) and uncontrolled (`defaultValue`) behavior.
 
 `Radio` represents exactly one native option. Give related options the same `name`; the browser owns grouping. Components does not add radio-group state or keyboard orchestration.
diff --git a/Documentation/Common/index.md b/Documentation/Common/index.md
index 0926ffef..cf3833e5 100644
--- a/Documentation/Common/index.md
+++ b/Documentation/Common/index.md
@@ -6,6 +6,7 @@ The Common module provides reusable UI components and the styling setup primitiv
 
 - **CratisComponentsProvider**: Locale, Components-owned labels, and optional app-wide toaster.
 - **TextInput / TextArea**: Native text controls with semantic string changes and real element refs.
+- **NumberInput**: Controlled locale-aware numeric entry with nullable values, fractions, bounds, adornments, and explicit commits.
 - **Checkbox / Radio / Switch**: Native form choices with semantic boolean changes and browser-owned submission and reset behavior.
 - **Button / IconButton**: Native actions with semantic variants, tones, loading, and disabled behavior.
 - **Surface**: A bounded `div`, `section`, or `article` container with no invented interaction state.
@@ -17,6 +18,7 @@ The Common module provides reusable UI components and the styling setup primitiv
 ## See Also
 
 - [Basic controls](basic-controls.md) — native form, ref, change, part, and state contracts
+- [Locale-aware number input](number-input.md) — locale, nullable edit, commit, adornment, range, part, and token contracts
 - [CratisComponentsProvider](cratis-components-provider.md) — locale, labels, and toaster configuration
 - [Icon](icon.md) - Icon type and IconDisplay component
 - [Page](page.md) - Page layout component
diff --git a/Documentation/Common/number-input.md b/Documentation/Common/number-input.md
new file mode 100644
index 00000000..eee4f327
--- /dev/null
+++ b/Documentation/Common/number-input.md
@@ -0,0 +1,120 @@
+---
+title: Locale-aware number input
+description: Enter controlled nullable numbers with locale formatting, explicit commits, adornments, bounds, and stable parts.
+---
+
+`NumberInput` is the standalone locale-aware numeric control. It keeps transient text separate from the controlled `number | null` value, so clearing or typing an incomplete number never fabricates `0` or exposes `NaN`.
+
+Use the native command [`NumberField`](../CommandForm/number-field.md) when browser-native formatting and a non-null `0` default are sufficient. Use `NumberInput` or [`NumberInputField`](../CommandForm/number-input-field.md) when the interaction needs locale grouping and decimal separators, fraction policy, adornments, nullable edit state, or explicit commit timing.
+
+## Controlled usage
+
+```tsx
+import { useState } from 'react';
+import { NumberInput } from '@cratis/components/Common';
+
+export const SampleQuantity = () => {
+    const [quantity, setQuantity] = useState<number | null>(null);
+
+    return (
+        <>
+            <label id='sample-quantity-label' htmlFor='sample-quantity'>
+                Quantity
+            </label>
+            <NumberInput
+                id='sample-quantity'
+                aria-labelledby='sample-quantity-label'
+                name='quantity'
+                value={quantity}
+                onChange={setQuantity}
+                min={0}
+                max={100}
+                step={0.5}
+                suffix='kg'
+                minimumFractionDigits={1}
+                maximumFractionDigits={2}
+                description='Enter a value from zero to one hundred.'
+            />
+        </>
+    );
+};
+```
+
+The nearest `CratisComponentsProvider` supplies the BCP 47 locale. The optional `locale` prop overrides it for one control. An invalid override falls back to the provider locale.
+
+```tsx
+<CratisComponentsProvider value={{ locale: 'nb-NO' }}>
+    <NumberInput value={1234.5} onChange={setValue} aria-label='Amount' />
+    <NumberInput
+        value={1234.5}
+        onChange={setValue}
+        aria-label='American amount'
+        locale='en-US'
+    />
+</CratisComponentsProvider>
+```
+
+`useGrouping` defaults to `true`. When fraction props are omitted, decimal formatting uses the locale defaults: zero minimum fraction digits and up to three maximum fraction digits. Set both to the same number for fixed precision.
+
+## Change and commit contract
+
+`NumberInput` deliberately separates editable text from semantic callbacks.
+
+| Interaction                                 | `onChange`                                                 | `onCommit`                                     |
+| ------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------- |
+| Type or clear without leaving the input     | No callback while text is being edited                     | No callback                                    |
+| Press Enter                                 | New finite number or `null`, when it changed               | Then `Enter`                                   |
+| Press Tab or otherwise blur                 | New finite number or `null`, when it changed               | Then `Blur`                                    |
+| Replace the complete input through paste    | New finite number or `null`, when it changed               | Then `Paste`                                   |
+| ArrowUp, ArrowDown, decrement, or increment | Stepped finite number                                      | Then `Step`                                    |
+| Commit text that cannot yet form a number   | No fabricated change; text returns to the controlled value | Current controlled value and the commit reason |
+
+A commit clamps to `min`/`max`, snaps to `step`, and rounds through the configured fraction policy. The same policy applies when a controlled prop arrives outside those boundaries: `onChange` receives the normalized value once. Until the owner accepts it, the control keeps the original value visible and withholds the named hidden input, so React state, announced content, and native form data cannot silently disagree. When both callbacks run, `onChange` always runs first. The component remains controlled: accept the value in `onChange` to display and submit it as the new value.
+
+## Adornments and semantics
+
+`prefix` and `suffix` render beside the editable text. They never enter the parse buffer, semantic number, or hidden form value. Each rendered adornment receives a stable id and is appended to the input's `aria-describedby` relationship, together with consumer descriptions and an active error message.
+
+Provide an accessible name through `aria-label` or `aria-labelledby`. When a visible external label is used, give it an id, keep `htmlFor` pointed at the input id, and pass that label id through `aria-labelledby`; this also ties the localized increment and decrement action names to the field. `description` and an invalid `errorMessage` are rendered and associated automatically. The editable text control retains React Aria's number-field role description rather than reinstating the spinbutton attributes that its accessibility implementation intentionally removes for focus compatibility. Step buttons are excluded from sequential tab order; ArrowUp and ArrowDown provide the same operation from the input.
+
+`disabled` removes the control from editing and form submission. `readOnly` keeps the value focusable and submittable while disabling edits and steps.
+
+## Props
+
+| Prop                                | Type                              | Default         | Behavior                                                                     |
+| ----------------------------------- | --------------------------------- | --------------- | ---------------------------------------------------------------------------- |
+| `value`                             | `number \| null`                  | Required        | Controlled finite value; non-finite runtime values render empty.             |
+| `onChange`                          | `(value: number \| null) => void` | Required        | Receives accepted semantic changes only.                                     |
+| `onCommit`                          | `(value, reason) => void`         | —               | Receives `Blur`, `Enter`, `Paste`, or `Step` after the change callback.      |
+| `locale`                            | `string`                          | Provider locale | BCP 47 locale override.                                                      |
+| `useGrouping`                       | `boolean`                         | `true`          | Enables the locale grouping separator.                                       |
+| `minimumFractionDigits`             | `number`                          | Locale default  | Minimum displayed fraction digits.                                           |
+| `maximumFractionDigits`             | `number`                          | Locale default  | Maximum fraction digits retained on commit and shown in the formatted value. |
+| `required`                          | `boolean`                         | `false`         | Requires a non-empty value using native form and accessibility semantics.    |
+| `min` / `max`                       | `number`                          | Unbounded       | Commit boundaries and number-field range.                                    |
+| `step`                              | `number`                          | `1`             | Step and commit-snap interval.                                               |
+| `prefix` / `suffix`                 | `ReactNode`                       | —               | Associated presentation outside the numeric value.                           |
+| `placeholder`                       | `string`                          | —               | Empty edit hint.                                                             |
+| `disabled` / `readOnly` / `invalid` | `boolean`                         | `false`         | Semantic and visual state.                                                   |
+| `id` / `name`                       | `string`                          | Generated / —   | Label association and native form field name.                                |
+| `description` / `errorMessage`      | `ReactNode`                       | —               | Associated help and invalid-state content.                                   |
+| `pt`                                | `NumberInputParts`                | —               | Renderer-independent part classes, styles, titles, and data attributes.      |
+
+## Stable parts and tokens
+
+| Typed `pt` key / DOM part | Meaning                                                             | Canonical states                             |
+| ------------------------- | ------------------------------------------------------------------- | -------------------------------------------- |
+| `root`                    | Complete field                                                      | `disabled`, `invalid`, `readonly`            |
+| `input`                   | Editable localized text                                             | `disabled`, `invalid`, `readonly`, `focused` |
+| `prefix` / `suffix`       | Present adornment                                                   | `disabled`, `invalid`, `readonly`            |
+| `step`                    | Both step buttons; inspect `data-step='decrement'` or `'increment'` | `disabled`, `invalid`, `readonly`            |
+| `description`             | Supporting text                                                     | none                                         |
+| `error`                   | Active validation message                                           | `invalid`                                    |
+
+The component uses the shared control, surface, text, focus, disabled, and error tokens plus these aliases:
+
+- `--cratis-number-input-adornment-color`
+- `--cratis-number-input-step-background`
+- `--cratis-number-input-step-background-hover`
+
+Use parts and tokens rather than internal element order or implementation-library selectors.
diff --git a/Documentation/Common/toc.yml b/Documentation/Common/toc.yml
index c99986f1..74343869 100644
--- a/Documentation/Common/toc.yml
+++ b/Documentation/Common/toc.yml
@@ -4,6 +4,8 @@
   href: cratis-components-provider.md
 - name: Basic controls
   href: basic-controls.md
+- name: Locale-aware number input
+  href: number-input.md
 - name: Icon
   href: icon.md
 - name: Page
diff --git a/Documentation/Migration/3-to-4.md b/Documentation/Migration/3-to-4.md
index 987a942b..d590c9ac 100644
--- a/Documentation/Migration/3-to-4.md
+++ b/Documentation/Migration/3-to-4.md
@@ -528,23 +528,41 @@ import './product-components.css';
 
 Because these assignments reference product tokens, existing dark, enhanced-contrast, control-size, status, and accessibility selectors flow through without duplicating the mapping. The product continues to own typography, spacing, motion, elevation, and component-specific treatments.
 
-If one product area still uses Prime's locale-aware `InputNumber`, keep it as an explicitly bounded Prime island. Mount the Prime provider independently around that remaining surface and retain its installed-version theme/license requirements; do not put renderer keys back into `CratisComponentsProvider`:
+Replace a retained Prime locale-aware `InputNumber` with the Components-owned standalone control after accepting the product's exact locale, nullable, fraction, range, adornment, and commit behavior:
 
 ```tsx
-import { PrimeReactProvider } from '@primereact/core';
-
-<CratisComponentsProvider value={{ locale, messages }}>
-    <PrimeReactProvider license={primeUiLicense}>
-        <LocaleAwareNumberInput />
-    </PrimeReactProvider>
-</CratisComponentsProvider>;
+import { NumberInput } from '@cratis/components/Common';
+
+<NumberInput
+    value={amount}
+    onChange={setAmount}
+    min={0}
+    step={0.01}
+    minimumFractionDigits={2}
+    maximumFractionDigits={2}
+    suffix='kg'
+    aria-label='Amount'
+/>;
 ```
 
-PrimeReact 11 receives `license` directly as a provider prop; it does **not** use the `value={{ license }}` shape of `CratisComponentsProvider`. Add the installed Prime theme/provider options beside `license` when that island needs them.
+`NumberInput` reads the `CratisComponentsProvider` locale and keeps `prefix`/`suffix` outside the parsed and submitted value. It emits `number | null`; typing stays local until Enter or blur, while full-field paste, arrow keys, and step buttons commit immediately. Use `onCommit` when product behavior depends on that boundary.
+
+For a non-null numeric command property, replace the custom Prime adapter with `NumberInputField`:
+
+```tsx
+import { NumberInputField } from '@cratis/components/CommandForm';
+
+<NumberInputField<UpdateSample>
+    value={(command) => command.amount}
+    title='Amount'
+    minimumFractionDigits={2}
+    maximumFractionDigits={2}
+/>;
+```
 
-The provider boundary scopes Prime runtime configuration and context, but a JavaScript-imported Prime theme stylesheet is still a **document-global side effect**. Put the import in the smallest host entry point that contains the island and inventory any `.p-*` selectors that intentionally depend on it; wrapping a subtree does not isolate that CSS. Every retained island should have an owner, a reason it remains, its licensing/theme dependencies, and an explicit removal condition or tracking issue.
+The CommandForm adapter reuses the standalone control and maps an empty or non-finite edit to the explicit command default `0`. The existing native `NumberField` remains available for simple browser-native numeric entry.
 
-Other areas can remove Prime as soon as they have no direct Prime imports. Remove the separate Prime provider only when number grouping, decimal handling, fraction digits, prefix/suffix, min/max, and command binding have an accepted renderer-independent replacement.
+Remove the separate Prime provider, theme, license configuration, and packages only after every direct Prime component use has moved or has an explicit retained owner. A JavaScript-imported Prime theme stylesheet is a document-global side effect; wrapping the old component in a provider never isolated that CSS.
 
 This preserves product token and theme ownership while removing the circular product → Prime preset → Prime variables → Cratis translation.
 
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index f33f8b01..d670ecda 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -29,6 +29,7 @@ They are documented separately because not every DOM part needs a `pt` key, and
 | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
 | `ButtonParts` / `IconButtonParts`           | `root`, `icon`, `label`, `spinner`                                                                                                                                                     | button, spans                                                 |
 | `TextInputParts` / `TextAreaParts`           | `root`                                                                                                                                                                                 | native input or textarea                                      |
+| `NumberInputParts`                            | `root`, `input`, `prefix`, `suffix`, `step`, `description`, `error`                                                                                                                  | owned number-field composition                                |
 | `CheckboxParts` / `RadioParts`               | `root`, `input`, `box`, `indicator`, `label`                                                                                                                                           | label, native input, spans                                    |
 | `SwitchParts`                                | `root`, `input`, `control`, `handle`, `label`                                                                                                                                          | label, native input, spans                                    |
 | `SurfaceParts`                               | `root`                                                                                                                                                                                 | div, section, or article                                     |
@@ -56,6 +57,7 @@ Command field part keys:
 | ---------------------- | --------------------------------------------------- |
 | InputText / TextArea   | `root` (the native control; see the DOM note below) |
 | Number                 | `root`, `input`                                     |
+| NumberInput            | `root`, `input`, `prefix`, `suffix`, `step`, `description`, `error` |
 | Checkbox               | `root`, `input`, `box`, `indicator`                 |
 | ToggleSwitch           | `root`, `input`, `control`, `handle`                |
 | Password               | `root`, `input`, `toggle`                           |
@@ -79,7 +81,7 @@ Use the exact kebab-case value in CSS or tests:
 | Surface        | `data-cratis-part` values                                                                                                                                                                                                                                                                                              |
 | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Button         | `root`, `icon`, `label`, `spinner`                                                                                                                                                                                                                                                                                     |
-| Basic controls | text inputs and surfaces use `root`; choices use `root`, `input`, `label`, plus `box`/`indicator` or `control`/`handle`                                                                                                                              |
+| Basic controls | text inputs and surfaces use `root`; NumberInput uses `root`, `input`, `prefix`, `suffix`, `step`, `description`, `error`; choices use `root`, `input`, `label`, plus `box`/`indicator` or `control`/`handle`                                                                                                                              |
 | Dialog         | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                                                                                                                                                                 |
 | Dropdown       | `root`, `trigger`, `value`, `clear`, `indicator`, `filter`, `popover`, `listbox`, `option`, `multiple`                                                                                                                                                                                                                 |
 | DatePicker     | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `button-bar`, `today`, `clear`                                                                                                                                |
diff --git a/Source/CommandForm/fields/Fields.stories.tsx b/Source/CommandForm/fields/Fields.stories.tsx
index c1a93b77..3b961e4a 100644
--- a/Source/CommandForm/fields/Fields.stories.tsx
+++ b/Source/CommandForm/fields/Fields.stories.tsx
@@ -12,6 +12,7 @@ import { Button } from '../../Common/Button';
 import {
     InputTextField,
     NumberField,
+    NumberInputField,
     TextAreaField,
     CheckboxField,
     SliderField,
@@ -775,6 +776,37 @@ export const RadioButtonFieldExample: Story = {
     },
 };
 
+export const NativeAndLocaleAwareNumberFields: Story = {
+    render: () => (
+        <StoryContainer size='sm' asCard>
+            <h2>Native and locale-aware number fields</h2>
+            <p>
+                Use NumberField for simple native entry and NumberInputField when locale
+                formatting, nullable edit state, adornments, or explicit commits matter.
+            </p>
+            <CommandForm<FormFieldsCommand>
+                command={FormFieldsCommand}
+                initialValues={{ numberInput: 1234.5 }}
+            >
+                <NumberField<FormFieldsCommand>
+                    value={(command) => command.numberInput}
+                    title='Native amount'
+                    step={0.5}
+                />
+                <NumberInputField<FormFieldsCommand>
+                    value={(command) => command.numberInput}
+                    title='Locale-aware amount'
+                    required
+                    suffix='kg'
+                    step={0.5}
+                    minimumFractionDigits={1}
+                    maximumFractionDigits={1}
+                />
+            </CommandForm>
+        </StoryContainer>
+    ),
+};
+
 export const RadioGroupFieldExample: Story = {
     render: () => {
         const options = [
diff --git a/Source/CommandForm/fields/NumberInputField.tsx b/Source/CommandForm/fields/NumberInputField.tsx
new file mode 100644
index 00000000..4450d3d1
--- /dev/null
+++ b/Source/CommandForm/fields/NumberInputField.tsx
@@ -0,0 +1,71 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import { NumberInput, type NumberInputProps } from '../../Common/NumberInput';
+import { NumberInputCommitReason } from '../../Common/NumberInputCommitReason';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
+
+type NumberInputFieldComponentProps = WrappedFieldProps<number> &
+    FieldAccessibilityProps &
+    Omit<
+        NumberInputProps,
+        'value' | 'onChange' | 'onCommit' | 'invalid' | 'errorMessage'
+    >;
+
+const NumberInputControl = (props: NumberInputFieldComponentProps) => {
+    const accessibility = useFieldAccessibility(props, {
+        id: props.id,
+        ariaLabel: props['aria-label'],
+        ariaDescribedBy: props['aria-describedby'],
+    });
+    const {
+        value,
+        onChange,
+        onBlur,
+        invalid,
+        required,
+        errors: _errors,
+        title: _title,
+        ...numberInputProps
+    } = props;
+
+    return (
+        <>
+            <NumberInput
+                {...numberInputProps}
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
+                value={Number.isFinite(value) ? value : 0}
+                onChange={(nextValue) => onChange(nextValue ?? 0)}
+                required={required}
+                onCommit={(_nextValue, reason) => {
+                    if (reason === NumberInputCommitReason.Blur) onBlur?.();
+                }}
+                invalid={invalid}
+            />
+            {accessibility.hiddenError}
+        </>
+    );
+};
+
+/**
+ * A locale-aware {@link NumberInput} bound to a non-null number property on an Arc command.
+ * Empty or non-finite values map to the explicit command default `0`; the standalone control
+ * remains nullable.
+ */
+export const NumberInputField = asCommandFormField<NumberInputFieldComponentProps>(
+    NumberInputControl,
+    {
+        defaultValue: 0,
+        extractValue: (value: unknown) => {
+            if (value === null || value === undefined) return 0;
+            const numericValue = typeof value === 'number' ? value : Number(value);
+            return Number.isFinite(numericValue) ? numericValue : 0;
+        },
+    },
+);
diff --git a/Source/CommandForm/fields/index.ts b/Source/CommandForm/fields/index.ts
index 55b6e9c1..76f53c14 100644
--- a/Source/CommandForm/fields/index.ts
+++ b/Source/CommandForm/fields/index.ts
@@ -3,6 +3,7 @@
 
 export * from './InputTextField';
 export * from './NumberField';
+export * from './NumberInputField';
 export * from './CheckboxField';
 export * from './TextAreaField';
 export * from './DropdownField';
diff --git a/Source/CommandForm/for_NumberInputField/when_reusing_number_input.tsx b/Source/CommandForm/for_NumberInputField/when_reusing_number_input.tsx
new file mode 100644
index 00000000..5b85e317
--- /dev/null
+++ b/Source/CommandForm/for_NumberInputField/when_reusing_number_input.tsx
@@ -0,0 +1,133 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act, type ComponentType } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, describe, it, vi } from 'vitest';
+
+vi.mock('@cratis/arc.react/commands', () => ({
+    asCommandFormField: (component: ComponentType<Record<string, unknown>>) => component,
+}));
+
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { NumberInputField } from '../fields/NumberInputField';
+
+interface InjectedNumberInputFieldProps {
+    value: number;
+    onChange: (value: unknown) => void;
+    onBlur?: () => void;
+    invalid: boolean;
+    required: boolean;
+    errors: string[];
+    title?: string;
+    locale?: string;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+}
+
+// SAFETY: The mocked asCommandFormField returns the injected component unchanged in this spec.
+const Field = NumberInputField as unknown as ComponentType<InjectedNumberInputFieldProps>;
+
+describe('when NumberInputField reuses NumberInput', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    afterEach(async () => {
+        if (root) await act(async () => root.unmount());
+        container?.remove();
+    });
+
+    const render = async (props: Partial<InjectedNumberInputFieldProps> = {}) => {
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        const onChange = vi.fn();
+        const onBlur = vi.fn();
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider value={{ locale: 'nb-NO' }}>
+                    <Field
+                        value={1234.5}
+                        onChange={onChange}
+                        onBlur={onBlur}
+                        invalid={false}
+                        required={false}
+                        errors={[]}
+                        title='Sample amount'
+                        minimumFractionDigits={2}
+                        maximumFractionDigits={2}
+                        {...props}
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+        return { onChange, onBlur };
+    };
+
+    it('should render the standalone owner parts and provider locale formatting', async () => {
+        await render();
+        const input = container.querySelector<HTMLInputElement>(
+            'input[data-cratis-part="input"]',
+        )!;
+
+        expect(input.value.replace(/[\u00a0\u202f]/gu, ' ')).to.equal('1 234,50');
+        expect(container.querySelectorAll('[data-cratis-part="step"]')).to.have.lengthOf(
+            2,
+        );
+        expect(input.getAttribute('aria-label')).to.equal('Sample amount');
+    });
+
+    it('should map nullable clear to the explicit non-null command default', async () => {
+        const { onChange, onBlur } = await render();
+        const input = container.querySelector<HTMLInputElement>(
+            'input[data-cratis-part="input"]',
+        )!;
+        Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(
+            input,
+            '',
+        );
+        await act(async () => {
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            input.focus();
+            input.blur();
+            await Promise.resolve();
+        });
+
+        expect(onChange.mock.calls[0][0]).to.equal(0);
+        expect(onBlur.mock.calls).to.have.lengthOf(1);
+    });
+
+    it('should carry Arc required state to the editable control', async () => {
+        await render({ required: true });
+        const input = container.querySelector<HTMLInputElement>(
+            'input[data-cratis-part="input"]',
+        )!;
+
+        expect(input.required).to.equal(true);
+        expect(
+            container
+                .querySelector('[data-cratis-part="root"]')
+                ?.getAttribute('data-required'),
+        ).to.equal('true');
+    });
+
+    it('should associate Arc validation messages without a second field state machine', async () => {
+        await render({
+            invalid: true,
+            required: true,
+            errors: ['The sample amount must be at least zero.'],
+        });
+        const input = container.querySelector<HTMLInputElement>(
+            'input[data-cratis-part="input"]',
+        )!;
+        const describedBy = input.getAttribute('aria-describedby')!;
+        const error = document.getElementById(describedBy);
+
+        expect(input.required).to.equal(true);
+        expect(input.getAttribute('aria-invalid')).to.equal('true');
+        expect(error?.textContent).to.equal('The sample amount must be at least zero.');
+    });
+});
diff --git a/Source/Common/NumberInput.css b/Source/Common/NumberInput.css
new file mode 100644
index 00000000..ddc6c825
--- /dev/null
+++ b/Source/Common/NumberInput.css
@@ -0,0 +1,153 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-number-input {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    color: var(--cratis-text-color);
+}
+.cratis-number-input__group {
+    display: flex;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: var(--cratis-control-height);
+    align-items: stretch;
+    overflow: hidden;
+    border: 1px solid var(--cratis-control-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-control-background);
+    box-shadow: var(--cratis-shadow-subtle);
+}
+.cratis-number-input__control,
+.cratis-number-input__steps {
+    display: flex;
+    min-width: 0;
+    align-items: stretch;
+}
+.cratis-number-input__control {
+    flex: 1 1 auto;
+}
+.cratis-number-input__steps {
+    flex: 0 0 auto;
+}
+.cratis-number-input__group:focus-within {
+    border-color: var(--cratis-primary-color);
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-number-input[data-invalid='true'] .cratis-number-input__group {
+    border-color: var(--cratis-red-500);
+}
+.cratis-number-input[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--cratis-disabled-opacity);
+}
+.cratis-number-input:is([data-disabled='true'], [data-readonly='true'])
+    .cratis-number-input__group {
+    background: var(--cratis-surface-100);
+}
+.cratis-number-input__input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--cratis-control-height);
+    padding: 0.625rem 0.75rem;
+    flex: 1 1 auto;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--cratis-text-color);
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+}
+.cratis-number-input__input::placeholder {
+    color: var(--cratis-text-color-secondary);
+}
+.cratis-number-input__adornment {
+    display: inline-flex;
+    min-width: 0;
+    padding-inline: 0.75rem;
+    align-items: center;
+    color: var(--cratis-number-input-adornment-color);
+    white-space: nowrap;
+}
+.cratis-number-input__prefix {
+    padding-inline-end: 0;
+}
+.cratis-number-input__suffix {
+    padding-inline-start: 0;
+}
+.cratis-number-input__step {
+    display: inline-flex;
+    box-sizing: border-box;
+    width: var(--cratis-control-height);
+    min-width: 2.75rem;
+    min-height: var(--cratis-control-height);
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-inline-start: 1px solid var(--cratis-control-border);
+    background: var(--cratis-number-input-step-background);
+    color: var(--cratis-text-color);
+    font: inherit;
+    cursor: pointer;
+}
+.cratis-number-input__step:hover:not(:disabled) {
+    background: var(--cratis-number-input-step-background-hover);
+}
+.cratis-number-input__step:focus-visible {
+    outline: 2px solid var(--cratis-primary-color);
+    outline-offset: -3px;
+}
+.cratis-number-input__step:disabled {
+    cursor: not-allowed;
+    opacity: var(--cratis-disabled-opacity);
+}
+.cratis-number-input__description,
+.cratis-number-input__error {
+    display: block;
+    margin-block-start: 0.35rem;
+    line-height: 1.4;
+}
+.cratis-number-input__description {
+    color: var(--cratis-text-color-secondary);
+}
+.cratis-number-input__error {
+    color: var(--cratis-red-500);
+}
+
+@media (max-width: 24rem) {
+    .cratis-number-input__group {
+        flex-wrap: wrap;
+    }
+    .cratis-number-input__control,
+    .cratis-number-input__steps {
+        width: 100%;
+        flex-basis: 100%;
+    }
+    .cratis-number-input__steps {
+        border-block-start: 1px solid var(--cratis-control-border);
+    }
+    .cratis-number-input__step {
+        width: 50%;
+        min-width: 0;
+        flex: 1 1 50%;
+    }
+    .cratis-number-input__step:first-child {
+        border-inline-start: 0;
+    }
+}
+
+@media (forced-colors: active) {
+    .cratis-number-input__group,
+    .cratis-number-input__step {
+        border-color: CanvasText;
+    }
+    .cratis-number-input__group:focus-within,
+    .cratis-number-input__step:focus-visible {
+        outline: 2px solid Highlight;
+        outline-offset: 2px;
+        box-shadow: none;
+    }
+}
diff --git a/Source/Common/NumberInput.stories.tsx b/Source/Common/NumberInput.stories.tsx
new file mode 100644
index 00000000..1d9dc38e
--- /dev/null
+++ b/Source/Common/NumberInput.stories.tsx
@@ -0,0 +1,260 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState, type ReactNode } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { NumberInput } from './NumberInput';
+import { NumberInputCommitReason } from './NumberInputCommitReason';
+
+const StoryContainer = ({
+    children,
+}: {
+    children: ReactNode;
+    size?: string;
+    asCard?: boolean;
+}) => <div className='cratis:flex cratis:flex-col cratis:gap-4'>{children}</div>;
+const StorySection = ({ children }: { children: ReactNode }) => (
+    <section>{children}</section>
+);
+
+const meta = {
+    title: 'Common/NumberInput',
+    component: NumberInput,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component:
+                    'Controlled locale-aware numeric entry with nullable semantics, explicit commits, stable parts, and provider-owned locale.',
+            },
+        },
+    },
+    args: {
+        value: 1234.5,
+        onChange: fn(),
+        onCommit: fn(),
+        'aria-label': 'Sample amount',
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    },
+} satisfies Meta<typeof NumberInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A controllable representative number input. */
+export const Playground: Story = {};
+
+/** Provider and per-control locales format the same semantic number differently. */
+export const Locales: Story = {
+    render: () => (
+        <StoryContainer size='sm' asCard>
+            <StorySection>
+                <h3>Locale formatting</h3>
+                <div className='cratis:flex cratis:flex-col cratis:gap-3 cratis:w-80'>
+                    <NumberInput
+                        value={1234.5}
+                        onChange={fn()}
+                        aria-label='American amount'
+                        locale='en-US'
+                        minimumFractionDigits={2}
+                        maximumFractionDigits={2}
+                    />
+                    <NumberInput
+                        value={1234.5}
+                        onChange={fn()}
+                        aria-label='Norwegian amount'
+                        locale='nb-NO'
+                        minimumFractionDigits={2}
+                        maximumFractionDigits={2}
+                    />
+                </div>
+            </StorySection>
+        </StoryContainer>
+    ),
+};
+
+/** Fixed and ranged fraction policies remain explicit. */
+export const FractionPolicies: Story = {
+    render: () => (
+        <StoryContainer size='sm' asCard>
+            <StorySection>
+                <h3>Fraction digits</h3>
+                <div className='cratis:flex cratis:flex-col cratis:gap-3 cratis:w-80'>
+                    <NumberInput
+                        value={12.345}
+                        onChange={fn()}
+                        aria-label='Integer amount'
+                        minimumFractionDigits={0}
+                        maximumFractionDigits={0}
+                    />
+                    <NumberInput
+                        value={12.345}
+                        onChange={fn()}
+                        aria-label='One decimal amount'
+                        minimumFractionDigits={1}
+                        maximumFractionDigits={1}
+                    />
+                    <NumberInput
+                        value={12.345}
+                        onChange={fn()}
+                        aria-label='Two decimal amount'
+                        minimumFractionDigits={2}
+                        maximumFractionDigits={2}
+                    />
+                    <NumberInput
+                        value={12.3}
+                        onChange={fn()}
+                        aria-label='Up to two decimals'
+                        minimumFractionDigits={0}
+                        maximumFractionDigits={2}
+                    />
+                </div>
+            </StorySection>
+        </StoryContainer>
+    ),
+};
+
+/** Prefixes, suffixes, range boundaries, and visible step controls compose without entering the value text. */
+export const AdornmentsAndSteps: Story = {
+    render: () => (
+        <StoryContainer size='sm' asCard>
+            <StorySection>
+                <h3>Adornments and steps</h3>
+                <div className='cratis:flex cratis:flex-col cratis:gap-3 cratis:w-80'>
+                    <NumberInput
+                        value={25}
+                        onChange={fn()}
+                        aria-label='Prefixed amount'
+                        prefix='$'
+                        min={0}
+                        step={5}
+                    />
+                    <NumberInput
+                        value={2.5}
+                        onChange={fn()}
+                        aria-label='Weight'
+                        suffix='kg'
+                        min={0}
+                        step={0.1}
+                        maximumFractionDigits={1}
+                    />
+                </div>
+            </StorySection>
+        </StoryContainer>
+    ),
+};
+
+/** Empty, invalid, read-only, and disabled states use the same semantic surface. */
+export const States: Story = {
+    render: () => (
+        <StoryContainer size='sm' asCard>
+            <StorySection>
+                <h3>States</h3>
+                <div className='cratis:flex cratis:flex-col cratis:gap-3 cratis:w-80'>
+                    <NumberInput
+                        value={null}
+                        onChange={fn()}
+                        aria-label='Required quantity'
+                        placeholder='Enter a quantity'
+                        required
+                    />
+                    <NumberInput
+                        value={150}
+                        onChange={fn()}
+                        aria-label='Invalid quantity'
+                        min={0}
+                        max={100}
+                        invalid
+                        errorMessage='Use a value from zero to one hundred.'
+                    />
+                    <NumberInput
+                        value={24}
+                        onChange={fn()}
+                        aria-label='Read-only quantity'
+                        readOnly
+                    />
+                    <NumberInput
+                        value={24}
+                        onChange={fn()}
+                        aria-label='Disabled quantity'
+                        disabled
+                    />
+                </div>
+            </StorySection>
+        </StoryContainer>
+    ),
+};
+
+/** The control composes with an external label and supporting description. */
+export const InContext: Story = {
+    render: () => (
+        <StoryContainer size='sm' asCard>
+            <StorySection>
+                <label id='demo-quantity-label' htmlFor='demo-quantity'>
+                    Demo quantity
+                </label>
+                <NumberInput
+                    id='demo-quantity'
+                    aria-labelledby='demo-quantity-label'
+                    name='demoQuantity'
+                    value={8}
+                    onChange={fn()}
+                    min={0}
+                    max={20}
+                    description='Choose a value from zero to twenty.'
+                />
+            </StorySection>
+        </StoryContainer>
+    ),
+};
+
+const InteractiveNumberInput = () => {
+    const [value, setValue] = useState<number | null>(null);
+    const [events, setEvents] = useState<string[]>([]);
+    return (
+        <div className='cratis:flex cratis:w-80 cratis:flex-col cratis:gap-3'>
+            <label id='interactive-number-label' htmlFor='interactive-number'>
+                Interactive amount
+            </label>
+            <NumberInput
+                id='interactive-number'
+                aria-labelledby='interactive-number-label'
+                value={value}
+                onChange={(nextValue) => {
+                    setValue(nextValue);
+                    setEvents((current) => [...current, `change:${nextValue}`]);
+                }}
+                onCommit={(nextValue, reason) =>
+                    setEvents((current) => [...current, `commit:${reason}:${nextValue}`])
+                }
+                minimumFractionDigits={2}
+                maximumFractionDigits={2}
+            />
+            <output data-testid='semantic-value'>{value ?? 'empty'}</output>
+            <ol data-testid='event-order'>
+                {events.map((event, index) => (
+                    <li key={`${event}-${index}`}>{event}</li>
+                ))}
+            </ol>
+        </div>
+    );
+};
+
+/** Typing remains local until Enter commits change before commit. */
+export const Interactive: Story = {
+    render: () => <InteractiveNumberInput />,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const input = canvas.getByRole('textbox', { name: 'Interactive amount' });
+        await userEvent.type(input, '1234.50');
+        await expect(canvas.getByTestId('semantic-value')).toHaveTextContent('empty');
+        await userEvent.type(input, '{Enter}');
+        await expect(canvas.getByTestId('semantic-value')).toHaveTextContent('1234.5');
+        await expect(canvas.getByTestId('event-order').textContent).toContain(
+            `change:1234.5commit:${NumberInputCommitReason.Enter}:1234.5`,
+        );
+    },
+};
diff --git a/Source/Common/NumberInput.tsx b/Source/Common/NumberInput.tsx
new file mode 100644
index 00000000..ca98f3b6
--- /dev/null
+++ b/Source/Common/NumberInput.tsx
@@ -0,0 +1,530 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    useId,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    type CSSProperties,
+    type ReactNode,
+} from 'react';
+import {
+    Button,
+    Group,
+    Input,
+    NumberField as AriaNumberField,
+} from 'react-aria-components/NumberField';
+import { I18nProvider, useLocale } from 'react-aria-components/I18nProvider';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
+import { NumberInputCommitReason } from './NumberInputCommitReason';
+import type { NumberInputPartAttributes } from './NumberInputPartAttributes';
+
+/** Stable Cratis-owned parts for styling a {@link NumberInput}. */
+export interface NumberInputParts {
+    /** Complete number-field wrapper. */
+    root?: NumberInputPartAttributes;
+    /** Editable localized input. */
+    input?: NumberInputPartAttributes;
+    /** Prefix adornment, when supplied. */
+    prefix?: NumberInputPartAttributes;
+    /** Suffix adornment, when supplied. */
+    suffix?: NumberInputPartAttributes;
+    /** Both decrement and increment buttons, distinguished by `data-step`. */
+    step?: NumberInputPartAttributes;
+    /** Supporting description, when supplied. */
+    description?: NumberInputPartAttributes;
+    /** Validation message, when supplied while invalid. */
+    error?: NumberInputPartAttributes;
+}
+
+const numberInputPartsMatchManifest: ExactPartKeys<
+    NumberInputParts,
+    PartsOf<'NumberInput'>
+> = true;
+void numberInputPartsMatchManifest;
+
+/** Props for {@link NumberInput}. */
+export interface NumberInputProps {
+    /** Controlled finite number, or `null` for an empty input. */
+    value: number | null;
+    /** Receives accepted semantic values. Incomplete text never emits `0` or `NaN`. */
+    onChange: (value: number | null) => void;
+    /**
+     * Runs after a blur, Enter, full-field paste, arrow key, or step-button commit.
+     * When the semantic value changes, `onChange` runs before `onCommit`.
+     */
+    onCommit?: (value: number | null, reason: NumberInputCommitReason) => void;
+    /** BCP 47 locale override. Defaults to the nearest {@link CratisComponentsProvider}. */
+    locale?: string;
+    /** Enables locale grouping separators. Defaults to `true`. */
+    useGrouping?: boolean;
+    /** Minimum displayed fraction digits. */
+    minimumFractionDigits?: number;
+    /** Maximum fraction digits retained on commit and shown in the formatted value. */
+    maximumFractionDigits?: number;
+    /** Requires a non-empty value and exposes native required-field semantics. */
+    required?: boolean;
+    /** Minimum value; committed edits below it snap to this boundary. */
+    min?: number;
+    /** Maximum value; committed edits above it snap to this boundary. */
+    max?: number;
+    /** Increment, decrement, and commit snapping interval. Defaults to `1`. */
+    step?: number;
+    /** Visible content before the editable number; excluded from parsing. */
+    prefix?: ReactNode;
+    /** Visible content after the editable number; excluded from parsing. */
+    suffix?: ReactNode;
+    /** Placeholder shown while empty. */
+    placeholder?: string;
+    /** Disables editing, focus, step controls, and form submission. */
+    disabled?: boolean;
+    /** Prevents editing while retaining the value and focus semantics. */
+    readOnly?: boolean;
+    /** Marks the control invalid. */
+    invalid?: boolean;
+    /** Stable id for the editable input and external label association. */
+    id?: string;
+    /** Native form field name; an associated hidden input submits the semantic value. */
+    name?: string;
+    /** Accessible name when no external label identifies the input. */
+    'aria-label'?: string;
+    /** Id of an external element that labels the input and its step actions. */
+    'aria-labelledby'?: string;
+    /** Additional external description ids. */
+    'aria-describedby'?: string;
+    /** Supporting description associated with the editable input. */
+    description?: ReactNode;
+    /** Error message rendered and associated while `invalid` is true. */
+    errorMessage?: ReactNode;
+    /** Additional CSS class for the root part. */
+    className?: string;
+    /** Cratis-owned per-part attributes. */
+    pt?: NumberInputParts;
+}
+
+const classNames = (...values: Array<string | undefined>) =>
+    values.filter(Boolean).join(' ');
+
+const semanticValue = (value: number | null): number | null =>
+    value !== null && Number.isFinite(value) ? value : null;
+
+const finiteBound = (value: number | undefined): number | undefined =>
+    value !== undefined && Number.isFinite(value) ? value : undefined;
+
+const stepPrecision = (step: number): number => {
+    const text = String(step).toLowerCase();
+    const [coefficient, exponentText] = text.split('e');
+    const decimals = coefficient.split('.')[1]?.length ?? 0;
+    const exponent = Number(exponentText ?? 0);
+    return Math.max(0, Math.min(20, decimals - exponent));
+};
+
+const normalizeValue = (
+    value: number | null,
+    min: number | undefined,
+    max: number | undefined,
+    step: number | undefined,
+    maximumFractionDigits: number,
+): number | null => {
+    if (value === null) return null;
+    const minimum = finiteBound(min);
+    const maximum = finiteBound(max);
+    let normalized = Math.min(
+        maximum ?? Number.POSITIVE_INFINITY,
+        Math.max(minimum ?? Number.NEGATIVE_INFINITY, value),
+    );
+    if (step !== undefined && Number.isFinite(step) && step > 0) {
+        const base = minimum ?? 0;
+        normalized = base + Math.round((normalized - base) / step) * step;
+        if (maximum !== undefined && normalized > maximum)
+            normalized = base + Math.floor((maximum - base) / step) * step;
+        normalized = Math.min(
+            maximum ?? Number.POSITIVE_INFINITY,
+            Math.max(minimum ?? Number.NEGATIVE_INFINITY, normalized),
+        );
+        normalized = Number(normalized.toFixed(stepPrecision(step)));
+    }
+    return Number(
+        new Intl.NumberFormat('en-US-u-nu-latn', {
+            useGrouping: false,
+            maximumFractionDigits,
+        }).format(normalized),
+    );
+};
+
+const validLocale = (candidate: string | undefined, fallback: string): string => {
+    if (!candidate) return fallback;
+    try {
+        return new Intl.Locale(candidate).toString();
+    } catch {
+        return fallback;
+    }
+};
+
+const partAttributes = (part: NumberInputPartAttributes | undefined) => ({
+    ...part,
+    style: part?.style as CSSProperties | undefined,
+});
+
+/**
+ * A controlled, locale-aware number input with a Components-owned public contract.
+ * Parsing, incomplete edit text, range and step normalization, keyboard behavior, mobile input
+ * mode, and localized formatting remain internal to this boundary.
+ */
+export const NumberInput = ({
+    value,
+    onChange,
+    onCommit,
+    locale,
+    useGrouping = true,
+    minimumFractionDigits,
+    maximumFractionDigits,
+    required = false,
+    min,
+    max,
+    step,
+    prefix,
+    suffix,
+    placeholder,
+    disabled = false,
+    readOnly = false,
+    invalid = false,
+    id,
+    name,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    description,
+    errorMessage,
+    className,
+    pt,
+}: NumberInputProps) => {
+    const generatedId = useId();
+    const { locale: providerLocale } = useLocale();
+    const resolvedLocale = validLocale(locale, providerLocale);
+    const inputId = id ?? `cratis-number-input-${generatedId}`;
+    const prefixId =
+        prefix !== null && prefix !== undefined ? `${inputId}-prefix` : undefined;
+    const suffixId =
+        suffix !== null && suffix !== undefined ? `${inputId}-suffix` : undefined;
+    const descriptionId =
+        description !== null && description !== undefined
+            ? `${inputId}-description`
+            : undefined;
+    const errorId =
+        invalid && errorMessage !== null && errorMessage !== undefined
+            ? `${inputId}-error`
+            : undefined;
+    const describedBy =
+        [ariaDescribedBy, prefixId, suffixId, descriptionId, errorId]
+            .filter(Boolean)
+            .join(' ') || undefined;
+    const controlledValue = semanticValue(value);
+    const latestValue = useRef<number | null>(controlledValue);
+    latestValue.current = controlledValue;
+    const formatOptions = useMemo(
+        () => ({
+            useGrouping,
+            minimumFractionDigits,
+            maximumFractionDigits,
+        }),
+        [useGrouping, minimumFractionDigits, maximumFractionDigits],
+    );
+    const resolvedMaximumFractionDigits = useMemo(
+        () =>
+            new Intl.NumberFormat(resolvedLocale, formatOptions).resolvedOptions()
+                .maximumFractionDigits ?? 3,
+        [resolvedLocale, formatOptions],
+    );
+    const normalizedControlledValue = normalizeValue(
+        controlledValue,
+        min,
+        max,
+        step,
+        resolvedMaximumFractionDigits,
+    );
+    const normalizationPending =
+        controlledValue !== null && normalizedControlledValue !== controlledValue;
+    const normalizationRequest = useRef<{
+        value: number;
+        normalized: number;
+    } | null>(null);
+    useLayoutEffect(() => {
+        if (
+            controlledValue === null ||
+            normalizedControlledValue === null ||
+            normalizedControlledValue === controlledValue
+        ) {
+            normalizationRequest.current = null;
+            return;
+        }
+        const previous = normalizationRequest.current;
+        if (
+            previous?.value === controlledValue &&
+            previous.normalized === normalizedControlledValue
+        )
+            return;
+        normalizationRequest.current = {
+            value: controlledValue,
+            normalized: normalizedControlledValue,
+        };
+        latestValue.current = normalizedControlledValue;
+        onChange(normalizedControlledValue);
+    }, [controlledValue, normalizedControlledValue, onChange]);
+    const displayedFormatOptions = normalizationPending
+        ? {
+              useGrouping,
+              minimumFractionDigits: 0,
+              maximumFractionDigits: 20,
+          }
+        : formatOptions;
+
+    const emitChange = (nextValue: number) => {
+        const nextSemanticValue = normalizeValue(
+            semanticValue(nextValue),
+            min,
+            max,
+            step,
+            resolvedMaximumFractionDigits,
+        );
+        latestValue.current = nextSemanticValue;
+        onChange(nextSemanticValue);
+    };
+    const scheduleCommit = (reason: NumberInputCommitReason) => {
+        queueMicrotask(() => onCommit?.(latestValue.current, reason));
+    };
+
+    const field = (
+        <AriaNumberField
+            {...partAttributes(pt?.root)}
+            id={inputId}
+            name={normalizationPending ? undefined : name}
+            value={controlledValue ?? Number.NaN}
+            onChange={emitChange}
+            minValue={min}
+            maxValue={max}
+            step={step}
+            formatOptions={displayedFormatOptions}
+            commitBehavior='validate'
+            validationBehavior='aria'
+            isDisabled={disabled}
+            isReadOnly={readOnly}
+            isRequired={required}
+            isInvalid={invalid}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-describedby={describedBy}
+            onBlur={() => scheduleCommit(NumberInputCommitReason.Blur)}
+            onKeyDown={(event) => {
+                if (event.key === 'Enter') scheduleCommit(NumberInputCommitReason.Enter);
+                else if (event.key === 'ArrowUp' || event.key === 'ArrowDown')
+                    scheduleCommit(NumberInputCommitReason.Step);
+            }}
+            className={classNames('cratis-number-input', pt?.root?.className, className)}
+            style={pt?.root?.style as CSSProperties | undefined}
+            data-cratis-part='root'
+            data-disabled={disabled || undefined}
+            data-invalid={invalid || undefined}
+            data-readonly={readOnly || undefined}
+            data-empty={controlledValue === null || undefined}
+        >
+            {({ state }) => {
+                const parsedValue = semanticValue(state.numberValue);
+                latestValue.current = parsedValue;
+                return (
+                    <>
+                        <Group className='cratis-number-input__group'>
+                            <div className='cratis-number-input__control'>
+                                {prefixId && (
+                                    <span
+                                        {...partAttributes(pt?.prefix)}
+                                        id={prefixId}
+                                        className={classNames(
+                                            'cratis-number-input__adornment',
+                                            'cratis-number-input__prefix',
+                                            pt?.prefix?.className,
+                                        )}
+                                        style={
+                                            pt?.prefix?.style as CSSProperties | undefined
+                                        }
+                                        data-cratis-part='prefix'
+                                        data-disabled={disabled || undefined}
+                                        data-invalid={invalid || undefined}
+                                        data-readonly={readOnly || undefined}
+                                    >
+                                        {prefix}
+                                    </span>
+                                )}
+                                <Input
+                                    {...partAttributes(pt?.input)}
+                                    placeholder={placeholder}
+                                    aria-errormessage={errorId}
+                                    className={classNames(
+                                        'cratis-number-input__input',
+                                        pt?.input?.className,
+                                    )}
+                                    style={pt?.input?.style as CSSProperties | undefined}
+                                    render={(inputProps) => (
+                                        <input
+                                            {...inputProps}
+                                            required={required}
+                                            onPaste={(event) => {
+                                                const input = event.currentTarget;
+                                                const isFullFieldPaste =
+                                                    (input.selectionStart ?? -1) === 0 &&
+                                                    input.selectionEnd ===
+                                                        input.value.length;
+                                                inputProps.onPaste?.(event);
+                                                // React Aria commits full-field paste text in its input handler. Emit
+                                                // after that handler so change and commit remain one browser event
+                                                // transaction instead of depending on queued controlled-render timing.
+                                                if (isFullFieldPaste)
+                                                    onCommit?.(
+                                                        latestValue.current,
+                                                        NumberInputCommitReason.Paste,
+                                                    );
+                                            }}
+                                            aria-describedby={describedBy}
+                                            aria-errormessage={errorId}
+                                            data-cratis-part='input'
+                                            data-disabled={disabled || undefined}
+                                            data-invalid={invalid || undefined}
+                                            data-readonly={readOnly || undefined}
+                                        />
+                                    )}
+                                />
+                                {suffixId && (
+                                    <span
+                                        {...partAttributes(pt?.suffix)}
+                                        id={suffixId}
+                                        className={classNames(
+                                            'cratis-number-input__adornment',
+                                            'cratis-number-input__suffix',
+                                            pt?.suffix?.className,
+                                        )}
+                                        style={
+                                            pt?.suffix?.style as CSSProperties | undefined
+                                        }
+                                        data-cratis-part='suffix'
+                                        data-disabled={disabled || undefined}
+                                        data-invalid={invalid || undefined}
+                                        data-readonly={readOnly || undefined}
+                                    >
+                                        {suffix}
+                                    </span>
+                                )}
+                            </div>
+                            <div className='cratis-number-input__steps'>
+                                <Button
+                                    {...partAttributes(pt?.step)}
+                                    slot='decrement'
+                                    className={classNames(
+                                        'cratis-number-input__step',
+                                        pt?.step?.className,
+                                    )}
+                                    style={pt?.step?.style as CSSProperties | undefined}
+                                    onPress={() =>
+                                        scheduleCommit(NumberInputCommitReason.Step)
+                                    }
+                                    render={(buttonProps) => (
+                                        <button
+                                            {...buttonProps}
+                                            aria-labelledby={
+                                                ariaLabelledBy
+                                                    ? [buttonProps.id, ariaLabelledBy]
+                                                          .filter(Boolean)
+                                                          .join(' ')
+                                                    : buttonProps['aria-labelledby']
+                                            }
+                                            data-cratis-part='step'
+                                            data-step='decrement'
+                                            data-disabled={
+                                                buttonProps.disabled || undefined
+                                            }
+                                            data-invalid={invalid || undefined}
+                                            data-readonly={readOnly || undefined}
+                                        />
+                                    )}
+                                >
+                                    <span aria-hidden='true'>−</span>
+                                </Button>
+                                <Button
+                                    {...partAttributes(pt?.step)}
+                                    slot='increment'
+                                    className={classNames(
+                                        'cratis-number-input__step',
+                                        pt?.step?.className,
+                                    )}
+                                    style={pt?.step?.style as CSSProperties | undefined}
+                                    onPress={() =>
+                                        scheduleCommit(NumberInputCommitReason.Step)
+                                    }
+                                    render={(buttonProps) => (
+                                        <button
+                                            {...buttonProps}
+                                            aria-labelledby={
+                                                ariaLabelledBy
+                                                    ? [buttonProps.id, ariaLabelledBy]
+                                                          .filter(Boolean)
+                                                          .join(' ')
+                                                    : buttonProps['aria-labelledby']
+                                            }
+                                            data-cratis-part='step'
+                                            data-step='increment'
+                                            data-disabled={
+                                                buttonProps.disabled || undefined
+                                            }
+                                            data-invalid={invalid || undefined}
+                                            data-readonly={readOnly || undefined}
+                                        />
+                                    )}
+                                >
+                                    <span aria-hidden='true'>+</span>
+                                </Button>
+                            </div>
+                        </Group>
+                        {descriptionId && (
+                            <span
+                                {...partAttributes(pt?.description)}
+                                id={descriptionId}
+                                className={classNames(
+                                    'cratis-number-input__description',
+                                    pt?.description?.className,
+                                )}
+                                style={
+                                    pt?.description?.style as CSSProperties | undefined
+                                }
+                                data-cratis-part='description'
+                            >
+                                {description}
+                            </span>
+                        )}
+                        {errorId && (
+                            <span
+                                {...partAttributes(pt?.error)}
+                                id={errorId}
+                                className={classNames(
+                                    'cratis-number-input__error',
+                                    pt?.error?.className,
+                                )}
+                                style={pt?.error?.style as CSSProperties | undefined}
+                                data-cratis-part='error'
+                                data-invalid
+                            >
+                                {errorMessage}
+                            </span>
+                        )}
+                    </>
+                );
+            }}
+        </AriaNumberField>
+    );
+
+    return resolvedLocale === providerLocale ? (
+        field
+    ) : (
+        <I18nProvider locale={resolvedLocale}>{field}</I18nProvider>
+    );
+};
diff --git a/Source/Common/NumberInputCommitReason.ts b/Source/Common/NumberInputCommitReason.ts
new file mode 100644
index 00000000..af8a2b12
--- /dev/null
+++ b/Source/Common/NumberInputCommitReason.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Interaction that committed a {@link NumberInput} edit. */
+export enum NumberInputCommitReason {
+    /** Focus left the editable input. */
+    Blur = 'blur',
+    /** The Enter key committed the editable text. */
+    Enter = 'enter',
+    /** A full-field paste committed immediately. */
+    Paste = 'paste',
+    /** An arrow key or step button changed and committed the value. */
+    Step = 'step',
+}
diff --git a/Source/Common/NumberInputPartAttributes.ts b/Source/Common/NumberInputPartAttributes.ts
new file mode 100644
index 00000000..ea781ed1
--- /dev/null
+++ b/Source/Common/NumberInputPartAttributes.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Renderer-independent attributes accepted by a stable {@link NumberInput} part. */
+export interface NumberInputPartAttributes {
+    /** Additional CSS class for the part. */
+    className?: string;
+    /** Inline style values for the part, including consumer-owned custom properties. */
+    style?: Readonly<Record<string, string | number | undefined>>;
+    /** Advisory text for the part. */
+    title?: string;
+    /** Consumer-owned data attributes. */
+    [attribute: `data-${string}`]: string | number | boolean | undefined;
+}
diff --git a/Source/Common/for_NumberInput/given/a_number_input.tsx b/Source/Common/for_NumberInput/given/a_number_input.tsx
new file mode 100644
index 00000000..82b07282
--- /dev/null
+++ b/Source/Common/for_NumberInput/given/a_number_input.tsx
@@ -0,0 +1,126 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { act, useState } from 'react';
+import { CratisComponentsProvider } from '../../CratisComponentsProvider';
+import { NumberInput, type NumberInputProps } from '../../NumberInput';
+import { NumberInputCommitReason } from '../../NumberInputCommitReason';
+import {
+    mountPrimitive,
+    setNativeValue,
+    type MountedPrimitive,
+} from '../../for_Primitives/given/a_primitive_dom';
+
+export interface RecordedNumberInputEvent {
+    kind: 'change' | 'commit';
+    value: number | null;
+    reason?: NumberInputCommitReason;
+}
+
+interface NumberInputFixtureOptions extends Omit<
+    NumberInputProps,
+    'value' | 'onChange' | 'onCommit'
+> {
+    initialValue: number | null;
+    providerLocale?: string;
+    acceptChanges?: boolean;
+    insideForm?: boolean;
+}
+
+export interface MountedNumberInput extends MountedPrimitive {
+    events: RecordedNumberInputEvent[];
+    input: HTMLInputElement;
+    field: HTMLElement;
+    stepButtons: HTMLButtonElement[];
+    form?: HTMLFormElement;
+}
+
+export const mountNumberInput = async (
+    options: NumberInputFixtureOptions,
+): Promise<MountedNumberInput> => {
+    const {
+        initialValue,
+        providerLocale = 'en-US',
+        acceptChanges = true,
+        insideForm = false,
+        ...props
+    } = options;
+    const events: RecordedNumberInputEvent[] = [];
+
+    const ControlledNumberInput = () => {
+        const [value, setValue] = useState<number | null>(initialValue);
+        const control = (
+            <NumberInput
+                {...props}
+                value={value}
+                onChange={(nextValue) => {
+                    events.push({ kind: 'change', value: nextValue });
+                    if (acceptChanges) setValue(nextValue);
+                }}
+                onCommit={(nextValue, reason) =>
+                    events.push({ kind: 'commit', value: nextValue, reason })
+                }
+            />
+        );
+        return (
+            <CratisComponentsProvider value={{ locale: providerLocale }}>
+                {insideForm ? <form>{control}</form> : control}
+            </CratisComponentsProvider>
+        );
+    };
+
+    const mounted = await mountPrimitive(<ControlledNumberInput />);
+    const input = mounted.container.querySelector<HTMLInputElement>(
+        'input[data-cratis-part="input"]',
+    );
+    const field = mounted.container.querySelector<HTMLElement>(
+        '[data-cratis-part="root"]',
+    );
+    if (!input || !field) throw new Error('NumberInput fixture did not render.');
+
+    return {
+        ...mounted,
+        events,
+        input,
+        field,
+        form: mounted.container.querySelector<HTMLFormElement>('form') ?? undefined,
+        stepButtons: Array.from(
+            mounted.container.querySelectorAll<HTMLButtonElement>(
+                '[data-cratis-part="step"]',
+            ),
+        ),
+    };
+};
+
+export const editNumberInput = async (mounted: MountedNumberInput, text: string) =>
+    setNativeValue(mounted.input, text);
+
+export const pressNumberInputKey = async (mounted: MountedNumberInput, key: string) => {
+    await act(async () => {
+        mounted.input.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
+        await Promise.resolve();
+    });
+};
+
+export const blurNumberInput = async (mounted: MountedNumberInput) => {
+    await act(async () => {
+        mounted.input.focus();
+        mounted.input.blur();
+        await Promise.resolve();
+    });
+};
+
+export const pasteNumberInput = async (mounted: MountedNumberInput, text: string) => {
+    mounted.input.setSelectionRange(0, mounted.input.value.length);
+    const event = new Event('paste', { bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'clipboardData', {
+        value: { getData: () => text },
+    });
+    let eventsBeforeYield: RecordedNumberInputEvent[] = [];
+    await act(async () => {
+        mounted.input.dispatchEvent(event);
+        eventsBeforeYield = [...mounted.events];
+        await Promise.resolve();
+    });
+    return eventsBeforeYield;
+};
diff --git a/Source/Common/for_NumberInput/when_committing_values.tsx b/Source/Common/for_NumberInput/when_committing_values.tsx
new file mode 100644
index 00000000..fe7afe72
--- /dev/null
+++ b/Source/Common/for_NumberInput/when_committing_values.tsx
@@ -0,0 +1,272 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { expect } from 'chai';
+import { afterEach, describe, it } from 'vitest';
+import { NumberInputCommitReason } from '../NumberInputCommitReason';
+import { unmountPrimitive } from '../for_Primitives/given/a_primitive_dom';
+import {
+    blurNumberInput,
+    editNumberInput,
+    mountNumberInput,
+    pasteNumberInput,
+    pressNumberInputKey,
+    type MountedNumberInput,
+} from './given/a_number_input';
+
+const formatted = async (
+    minimumFractionDigits: number,
+    maximumFractionDigits: number,
+    value = 12.345,
+) => {
+    const mounted = await mountNumberInput({
+        initialValue: value,
+        'aria-label': 'Amount',
+        minimumFractionDigits,
+        maximumFractionDigits,
+    });
+    const result = mounted.input.value;
+    await unmountPrimitive(mounted);
+    return result;
+};
+
+describe('when committing number values', () => {
+    let mounted: MountedNumberInput | undefined;
+
+    afterEach(async () => {
+        if (mounted) await unmountPrimitive(mounted);
+        mounted = undefined;
+    });
+
+    it('should format zero, one, two, and ranged fraction policies', async () => {
+        expect(await formatted(0, 0)).to.equal('12');
+        expect(await formatted(1, 1)).to.equal('12.3');
+        expect(await formatted(2, 2)).to.equal('12.35');
+        expect(await formatted(0, 2, 12.3)).to.equal('12.3');
+    });
+
+    it('should clamp and snap committed text to min, max, and step', async () => {
+        const numberInput = await mountNumberInput({
+            initialValue: 50,
+            'aria-label': 'Percentage',
+            min: 10,
+            max: 100,
+            step: 10,
+        });
+        mounted = numberInput;
+
+        await editNumberInput(numberInput, '107');
+        await pressNumberInputKey(numberInput, 'Enter');
+        await editNumberInput(numberInput, '3');
+        await pressNumberInputKey(numberInput, 'Enter');
+
+        expect(numberInput.events).to.deep.equal([
+            { kind: 'change', value: 100 },
+            {
+                kind: 'commit',
+                value: 100,
+                reason: NumberInputCommitReason.Enter,
+            },
+            { kind: 'change', value: 10 },
+            {
+                kind: 'commit',
+                value: 10,
+                reason: NumberInputCommitReason.Enter,
+            },
+        ]);
+        expect(numberInput.input.value).to.equal('10');
+    });
+
+    it('should reconcile an out-of-range controlled value before form submission', async () => {
+        const numberInput = await mountNumberInput({
+            initialValue: 101,
+            'aria-label': 'Percentage',
+            name: 'percentage',
+            max: 100,
+            insideForm: true,
+        });
+        mounted = numberInput;
+
+        expect(numberInput.events).to.deep.equal([{ kind: 'change', value: 100 }]);
+        expect(numberInput.input.value).to.equal('100');
+        expect(new FormData(numberInput.form).get('percentage')).to.equal('100');
+    });
+
+    it('should withhold a normalized form value until the controlled owner accepts it', async () => {
+        const numberInput = await mountNumberInput({
+            initialValue: 101,
+            'aria-label': 'Percentage',
+            name: 'percentage',
+            max: 100,
+            acceptChanges: false,
+            insideForm: true,
+        });
+        mounted = numberInput;
+
+        expect(numberInput.events).to.deep.equal([{ kind: 'change', value: 100 }]);
+        expect(numberInput.input.value).to.equal('101');
+        expect(new FormData(numberInput.form).has('percentage')).to.equal(false);
+    });
+
+    it('should reconcile controlled fraction precision with display and form values', async () => {
+        const numberInput = await mountNumberInput({
+            initialValue: 12.345,
+            'aria-label': 'Amount',
+            name: 'amount',
+            maximumFractionDigits: 2,
+            insideForm: true,
+        });
+        mounted = numberInput;
+
+        expect(numberInput.events).to.deep.equal([{ kind: 'change', value: 12.35 }]);
+        expect(numberInput.input.value).to.equal('12.35');
+        expect(new FormData(numberInput.form).get('amount')).to.equal('12.35');
+    });
+
+    it('should keep a committed locale fraction valid for native form submission', async () => {
+        const numberInput = await mountNumberInput({
+            initialValue: null,
+            'aria-label': 'Amount',
+            name: 'amount',
+            maximumFractionDigits: 2,
+            insideForm: true,
+        });
+        mounted = numberInput;
+
+        await editNumberInput(numberInput, '12.5');
+        await pressNumberInputKey(numberInput, 'Enter');
+
+        expect(numberInput.form?.checkValidity()).to.equal(true);
+        expect(new FormData(numberInput.form).get('amount')).to.equal('12.5');
+    });
+
+    it('should increment and decrement by integer and fractional steps', async () => {
+        for (const step of [1, 0.1, 0.01]) {
+            const numberInput = await mountNumberInput({
+                initialValue: 1,
+                'aria-label': `Step ${step}`,
+                step,
+                maximumFractionDigits: 2,
+            });
+            await pressNumberInputKey(numberInput, 'ArrowUp');
+            await pressNumberInputKey(numberInput, 'ArrowDown');
+            expect(numberInput.events.map((entry) => entry.value)).to.deep.equal([
+                1 + step,
+                1 + step,
+                1,
+                1,
+            ]);
+            await unmountPrimitive(numberInput);
+        }
+    });
+
+    it('should let Tab move focus and commit once through blur', async () => {
+        const numberInput = await mountNumberInput({
+            initialValue: 2,
+            'aria-label': 'Quantity',
+        });
+        mounted = numberInput;
+
+        await editNumberInput(numberInput, '3');
+        await pressNumberInputKey(numberInput, 'Tab');
+        expect(numberInput.events).to.deep.equal([]);
+        await blurNumberInput(numberInput);
+
+        expect(numberInput.events).to.deep.equal([
+            { kind: 'change', value: 3 },
+            {
+                kind: 'commit',
+                value: 3,
+                reason: NumberInputCommitReason.Blur,
+            },
+        ]);
+    });
+
+    it('should order change before commit for paste, arrows, Enter, and blur', async () => {
+        const numberInput = await mountNumberInput({
+            initialValue: null,
+            'aria-label': 'Quantity',
+            min: 0,
+            max: 20,
+        });
+        mounted = numberInput;
+
+        const pasteTransaction = await pasteNumberInput(numberInput, '4');
+        expect(pasteTransaction).to.deep.equal([
+            { kind: 'change', value: 4 },
+            {
+                kind: 'commit',
+                value: 4,
+                reason: NumberInputCommitReason.Paste,
+            },
+        ]);
+        await pressNumberInputKey(numberInput, 'ArrowUp');
+        await editNumberInput(numberInput, '8');
+        await pressNumberInputKey(numberInput, 'Enter');
+        await editNumberInput(numberInput, '9');
+        await blurNumberInput(numberInput);
+
+        expect(numberInput.events).to.deep.equal([
+            { kind: 'change', value: 4 },
+            {
+                kind: 'commit',
+                value: 4,
+                reason: NumberInputCommitReason.Paste,
+            },
+            { kind: 'change', value: 5 },
+            {
+                kind: 'commit',
+                value: 5,
+                reason: NumberInputCommitReason.Step,
+            },
+            { kind: 'change', value: 8 },
+            {
+                kind: 'commit',
+                value: 8,
+                reason: NumberInputCommitReason.Enter,
+            },
+            { kind: 'change', value: 9 },
+            {
+                kind: 'commit',
+                value: 9,
+                reason: NumberInputCommitReason.Blur,
+            },
+        ]);
+    });
+
+    it('should apply the same step order from the visible buttons', async () => {
+        const numberInput = await mountNumberInput({
+            initialValue: 2,
+            'aria-label': 'Quantity',
+            step: 2,
+        });
+        mounted = numberInput;
+
+        await act(async () => {
+            numberInput.stepButtons[1].click();
+            await Promise.resolve();
+        });
+        await act(async () => {
+            numberInput.stepButtons[0].click();
+            await Promise.resolve();
+        });
+
+        expect(numberInput.events).to.deep.equal([
+            { kind: 'change', value: 4 },
+            {
+                kind: 'commit',
+                value: 4,
+                reason: NumberInputCommitReason.Step,
+            },
+            { kind: 'change', value: 2 },
+            {
+                kind: 'commit',
+                value: 2,
+                reason: NumberInputCommitReason.Step,
+            },
+        ]);
+    });
+});
diff --git a/Source/Common/for_NumberInput/when_editing_locale_values.tsx b/Source/Common/for_NumberInput/when_editing_locale_values.tsx
new file mode 100644
index 00000000..9975cbb5
--- /dev/null
+++ b/Source/Common/for_NumberInput/when_editing_locale_values.tsx
@@ -0,0 +1,244 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act, useState } from 'react';
+import { expect } from 'chai';
+import { afterEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../CratisComponentsProvider';
+import { NumberInput } from '../NumberInput';
+import { NumberInputCommitReason } from '../NumberInputCommitReason';
+import {
+    mountPrimitive,
+    unmountPrimitive,
+    type MountedPrimitive,
+} from '../for_Primitives/given/a_primitive_dom';
+import {
+    blurNumberInput,
+    editNumberInput,
+    mountNumberInput,
+    pasteNumberInput,
+    pressNumberInputKey,
+    type MountedNumberInput,
+} from './given/a_number_input';
+
+const normalizedSpaces = (value: string) => value.replace(/[\u00a0\u202f]/gu, ' ');
+
+const localizedFixture = (locale: string) =>
+    mountNumberInput({
+        initialValue: null,
+        providerLocale: locale,
+        'aria-label': 'Amount',
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+
+describe('when editing locale-aware number values', () => {
+    let mounted: MountedNumberInput | MountedPrimitive | undefined;
+
+    afterEach(async () => {
+        if (mounted) await unmountPrimitive(mounted);
+        mounted = undefined;
+    });
+
+    it('should parse and group typed nb-NO decimal text without emitting during the edit', async () => {
+        const numberInput = await localizedFixture('nb-NO');
+        mounted = numberInput;
+
+        await editNumberInput(numberInput, '1234,50');
+        expect(numberInput.events).to.deep.equal([]);
+        await pressNumberInputKey(numberInput, 'Enter');
+
+        expect(numberInput.events).to.deep.equal([
+            { kind: 'change', value: 1234.5 },
+            {
+                kind: 'commit',
+                value: 1234.5,
+                reason: NumberInputCommitReason.Enter,
+            },
+        ]);
+        expect(normalizedSpaces(numberInput.input.value)).to.equal('1 234,50');
+    });
+
+    it('should parse grouped and ungrouped nb-NO full-field paste', async () => {
+        const numberInput = await localizedFixture('nb-NO');
+        mounted = numberInput;
+
+        await pasteNumberInput(numberInput, '1\u00a0234,50');
+        await pasteNumberInput(numberInput, '1234,50');
+
+        expect(numberInput.events).to.deep.equal([
+            { kind: 'change', value: 1234.5 },
+            {
+                kind: 'commit',
+                value: 1234.5,
+                reason: NumberInputCommitReason.Paste,
+            },
+            {
+                kind: 'commit',
+                value: 1234.5,
+                reason: NumberInputCommitReason.Paste,
+            },
+        ]);
+        expect(normalizedSpaces(numberInput.input.value)).to.equal('1 234,50');
+    });
+
+    it('should parse grouped nb-NO and ungrouped en-US typed text', async () => {
+        const norwegian = await localizedFixture('nb-NO');
+        await editNumberInput(norwegian, '1\u00a0234,50');
+        await pressNumberInputKey(norwegian, 'Enter');
+        expect(norwegian.events[0]).to.deep.equal({
+            kind: 'change',
+            value: 1234.5,
+        });
+        await unmountPrimitive(norwegian);
+
+        const american = await localizedFixture('en-US');
+        mounted = american;
+        await editNumberInput(american, '1234.50');
+        await pressNumberInputKey(american, 'Enter');
+        expect(american.events[0]).to.deep.equal({
+            kind: 'change',
+            value: 1234.5,
+        });
+    });
+
+    it('should parse and group typed en-US decimal text', async () => {
+        const numberInput = await localizedFixture('en-US');
+        mounted = numberInput;
+
+        await editNumberInput(numberInput, '1,234.50');
+        await blurNumberInput(numberInput);
+
+        expect(numberInput.events).to.deep.equal([
+            { kind: 'change', value: 1234.5 },
+            {
+                kind: 'commit',
+                value: 1234.5,
+                reason: NumberInputCommitReason.Blur,
+            },
+        ]);
+        expect(numberInput.input.value).to.equal('1,234.50');
+    });
+
+    it('should parse grouped and ungrouped en-US full-field paste', async () => {
+        const numberInput = await localizedFixture('en-US');
+        mounted = numberInput;
+
+        await pasteNumberInput(numberInput, '1,234.50');
+        await pasteNumberInput(numberInput, '1234.50');
+
+        expect(numberInput.events).to.deep.equal([
+            { kind: 'change', value: 1234.5 },
+            {
+                kind: 'commit',
+                value: 1234.5,
+                reason: NumberInputCommitReason.Paste,
+            },
+            {
+                kind: 'commit',
+                value: 1234.5,
+                reason: NumberInputCommitReason.Paste,
+            },
+        ]);
+        expect(numberInput.input.value).to.equal('1,234.50');
+    });
+
+    it('should retain null through incomplete minus and decimal edits', async () => {
+        const numberInput = await localizedFixture('nb-NO');
+        mounted = numberInput;
+
+        for (const text of ['-', ',']) {
+            await editNumberInput(numberInput, text);
+            expect(numberInput.events).to.deep.equal([]);
+            await pressNumberInputKey(numberInput, 'Enter');
+            expect(numberInput.events.at(-1)).to.deep.equal({
+                kind: 'commit',
+                value: null,
+                reason: NumberInputCommitReason.Enter,
+            });
+            expect(numberInput.input.value).to.equal('');
+            numberInput.events.length = 0;
+        }
+    });
+
+    it('should emit null rather than zero or NaN when cleared', async () => {
+        const numberInput = await mountNumberInput({
+            initialValue: 42,
+            providerLocale: 'en-US',
+            'aria-label': 'Quantity',
+        });
+        mounted = numberInput;
+
+        await editNumberInput(numberInput, '');
+        expect(numberInput.events).to.deep.equal([]);
+        await blurNumberInput(numberInput);
+
+        expect(numberInput.events).to.deep.equal([
+            { kind: 'change', value: null },
+            {
+                kind: 'commit',
+                value: null,
+                reason: NumberInputCommitReason.Blur,
+            },
+        ]);
+        expect(numberInput.events.some((entry) => Number.isNaN(entry.value))).to.equal(
+            false,
+        );
+    });
+
+    it('should reformat an unchanged controlled number when the locale changes', async () => {
+        let setLocale: ((locale: string) => void) | undefined;
+        const changes: Array<number | null> = [];
+        const LocaleHarness = () => {
+            const [locale, updateLocale] = useState('en-US');
+            setLocale = updateLocale;
+            return (
+                <CratisComponentsProvider value={{ locale }}>
+                    <NumberInput
+                        value={1234.5}
+                        onChange={(value) => changes.push(value)}
+                        aria-label='Amount'
+                        minimumFractionDigits={2}
+                        maximumFractionDigits={2}
+                    />
+                </CratisComponentsProvider>
+            );
+        };
+        mounted = await mountPrimitive(<LocaleHarness />);
+        const input = mounted.container.querySelector<HTMLInputElement>(
+            'input[data-cratis-part="input"]',
+        )!;
+        expect(input.value).to.equal('1,234.50');
+
+        await act(async () => setLocale?.('nb-NO'));
+
+        expect(normalizedSpaces(input.value)).to.equal('1 234,50');
+        expect(changes).to.deep.equal([]);
+    });
+
+    it('should prefer a valid locale override and fall back from an invalid override', async () => {
+        const overridden = await mountNumberInput({
+            initialValue: 1234.5,
+            providerLocale: 'nb-NO',
+            locale: 'en-US',
+            'aria-label': 'Amount',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        });
+        expect(overridden.input.value).to.equal('1,234.50');
+        await unmountPrimitive(overridden);
+
+        const fallback = await mountNumberInput({
+            initialValue: 1234.5,
+            providerLocale: 'nb-NO',
+            locale: 'not_a_locale',
+            'aria-label': 'Amount',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        });
+        mounted = fallback;
+        expect(normalizedSpaces(fallback.input.value)).to.equal('1 234,50');
+    });
+});
diff --git a/Source/Common/for_NumberInput/when_guarding_parts_and_tokens.ts b/Source/Common/for_NumberInput/when_guarding_parts_and_tokens.ts
new file mode 100644
index 00000000..a06f6c31
--- /dev/null
+++ b/Source/Common/for_NumberInput/when_guarding_parts_and_tokens.ts
@@ -0,0 +1,44 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import { expect } from 'chai';
+import { describe, it } from 'vitest';
+import { cratisPartStates, cratisParts } from '../../types/parts';
+
+const commonDirectory = path.dirname(fileURLToPath(new URL('../NumberInput.tsx', import.meta.url)));
+const sourceDirectory = path.dirname(commonDirectory);
+const styles = readFileSync(path.join(commonDirectory, 'NumberInput.css'), 'utf8');
+const tokens = readFileSync(path.join(sourceDirectory, 'tokens.css'), 'utf8');
+
+describe('when guarding NumberInput parts and tokens', () => {
+    it('should keep the exact public part inventory for standalone and command surfaces', () => {
+        expect(cratisParts.NumberInput).to.deep.equal([
+            'root',
+            'input',
+            'prefix',
+            'suffix',
+            'step',
+            'description',
+            'error',
+        ]);
+        expect(cratisParts.NumberInputField).to.deep.equal(cratisParts.NumberInput);
+        expect(cratisPartStates.NumberInput.input).to.deep.equal([
+            'disabled',
+            'invalid',
+            'readonly',
+            'focused',
+        ]);
+    });
+
+    it('should keep the component stylesheet reachable and token-owned', () => {
+        expect(styles).to.contain('var(--cratis-number-input-adornment-color)');
+        expect(styles).to.contain('var(--cratis-number-input-step-background)');
+        expect(styles).to.contain('var(--cratis-number-input-step-background-hover)');
+        expect(tokens).to.contain('--cratis-number-input-adornment-color:');
+        expect(tokens).to.contain('--cratis-number-input-step-background:');
+        expect(tokens).to.contain('--cratis-number-input-step-background-hover:');
+    });
+});
diff --git a/Source/Common/for_NumberInput/when_rendering_semantics.tsx b/Source/Common/for_NumberInput/when_rendering_semantics.tsx
new file mode 100644
index 00000000..fccf44c3
--- /dev/null
+++ b/Source/Common/for_NumberInput/when_rendering_semantics.tsx
@@ -0,0 +1,284 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { hydrateRoot, type Root } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import { expect } from 'chai';
+import { afterEach, describe, it, vi } from 'vitest';
+import { CratisComponentsProvider } from '../CratisComponentsProvider';
+import { NumberInput } from '../NumberInput';
+import { NumberInputCommitReason } from '../NumberInputCommitReason';
+import {
+    editNumberInput,
+    mountNumberInput,
+    pressNumberInputKey,
+    type MountedNumberInput,
+} from './given/a_number_input';
+import { unmountPrimitive } from '../for_Primitives/given/a_primitive_dom';
+
+const numberInput = (
+    <CratisComponentsProvider value={{ locale: 'en-US' }}>
+        <label id='sample-amount-label' htmlFor='sample-amount'>
+            Sample amount
+        </label>
+        <p id='external-sample-hint'>Use the documented sample unit.</p>
+        <NumberInput
+            id='sample-amount'
+            name='sampleAmount'
+            value={12.5}
+            onChange={() => undefined}
+            prefix='$'
+            suffix='kg'
+            min={0}
+            max={100}
+            step={0.5}
+            minimumFractionDigits={1}
+            maximumFractionDigits={1}
+            aria-labelledby='sample-amount-label'
+            aria-describedby='external-sample-hint'
+            description='Enter a sample amount.'
+            errorMessage='The sample amount is invalid.'
+            invalid
+            pt={{
+                root: { 'data-contract': 'root' },
+                input: { 'data-contract': 'input' },
+                prefix: { 'data-contract': 'prefix' },
+                suffix: { 'data-contract': 'suffix' },
+                step: { 'data-contract': 'step' },
+                description: { 'data-contract': 'description' },
+                error: { 'data-contract': 'error' },
+            }}
+        />
+    </CratisComponentsProvider>
+);
+
+const renderStaticNumberInput = () => {
+    const serverDocument = new DOMParser().parseFromString(
+        renderToString(numberInput),
+        'text/html',
+    );
+    const container = document.createElement('div');
+    container.replaceChildren(
+        ...Array.from(serverDocument.body.childNodes).map((node) =>
+            document.importNode(node, true),
+        ),
+    );
+    return container;
+};
+
+describe('when rendering number input semantics', () => {
+    let mounted: MountedNumberInput | undefined;
+
+    afterEach(async () => {
+        if (mounted) await unmountPrimitive(mounted);
+        mounted = undefined;
+    });
+
+    it('should retain React Aria number-field semantics and tie step actions to its external label', async () => {
+        const container = renderStaticNumberInput();
+        const input = container.querySelector<HTMLInputElement>(
+            'input[data-cratis-part="input"]',
+        )!;
+        const label = container.querySelector<HTMLLabelElement>('label')!;
+        const stepButtons = Array.from(
+            container.querySelectorAll<HTMLButtonElement>('[data-cratis-part="step"]'),
+        );
+
+        expect(input.id).to.equal('sample-amount');
+        expect(label.htmlFor).to.equal('sample-amount');
+        expect(input.getAttribute('role')).to.equal(null);
+        expect(input.getAttribute('aria-roledescription')).to.equal('Number field');
+        expect(input.getAttribute('aria-labelledby')).to.equal('sample-amount-label');
+        expect(input.value).to.equal('12.5');
+        expect(
+            stepButtons.map((button) => button.getAttribute('aria-label')),
+        ).to.deep.equal(['Decrease', 'Increase']);
+        expect(
+            stepButtons.every((button) =>
+                button
+                    .getAttribute('aria-labelledby')
+                    ?.split(' ')
+                    .includes('sample-amount-label'),
+            ),
+        ).to.equal(true);
+        expect(input.getAttribute('aria-invalid')).to.equal('true');
+        expect(input.getAttribute('aria-errormessage')).to.equal('sample-amount-error');
+        expect(input.getAttribute('aria-describedby')?.split(' ')).to.deep.equal([
+            'external-sample-hint',
+            'sample-amount-prefix',
+            'sample-amount-suffix',
+            'sample-amount-description',
+            'sample-amount-error',
+        ]);
+    });
+
+    it('should keep adornments outside semantic changes while editing', async () => {
+        mounted = await mountNumberInput({
+            initialValue: null,
+            'aria-label': 'Weight',
+            prefix: '$',
+            suffix: 'kg',
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1,
+        });
+
+        await editNumberInput(mounted, '12.5');
+        await pressNumberInputKey(mounted, 'Enter');
+
+        expect(mounted.events).to.deep.equal([
+            { kind: 'change', value: 12.5 },
+            {
+                kind: 'commit',
+                value: 12.5,
+                reason: NumberInputCommitReason.Enter,
+            },
+        ]);
+        expect(mounted.input.value).to.equal('12.5');
+    });
+
+    it('should keep adornments outside the semantic and submitted number values', () => {
+        const container = renderStaticNumberInput();
+        const visibleInput = container.querySelector<HTMLInputElement>(
+            'input[data-cratis-part="input"]',
+        )!;
+        const hiddenInput =
+            container.querySelector<HTMLInputElement>('input[type="hidden"]')!;
+
+        expect(visibleInput.value).to.equal('12.5');
+        expect(hiddenInput.value).to.equal('12.5');
+        expect(hiddenInput.name).to.equal('sampleAmount');
+        expect(visibleInput.value).not.to.contain('$');
+        expect(visibleInput.value).not.to.contain('kg');
+    });
+
+    it('should expose exact stable parts, directions, and canonical states', () => {
+        const container = renderStaticNumberInput();
+        const parts = Array.from(
+            container.querySelectorAll<HTMLElement>('[data-cratis-part]'),
+        );
+
+        expect(parts.map((part) => part.dataset.cratisPart)).to.deep.equal([
+            'root',
+            'prefix',
+            'input',
+            'suffix',
+            'step',
+            'step',
+            'description',
+            'error',
+        ]);
+        expect(
+            parts
+                .filter((part) => part.dataset.cratisPart === 'step')
+                .map((part) => part.dataset.step),
+        ).to.deep.equal(['decrement', 'increment']);
+        expect(parts[0].getAttribute('data-invalid')).to.equal('true');
+        expect(parts.at(-1)?.getAttribute('data-invalid')).to.equal('true');
+        expect(parts.every((part) => part.dataset.contract)).to.equal(true);
+    });
+
+    it('should block native form submission while a required value is empty', async () => {
+        mounted = await mountNumberInput({
+            initialValue: null,
+            'aria-label': 'Quantity',
+            name: 'quantity',
+            required: true,
+            insideForm: true,
+        });
+        let submitCount = 0;
+        mounted.form?.addEventListener('submit', (event) => {
+            event.preventDefault();
+            submitCount += 1;
+        });
+
+        expect(mounted.input.required).to.equal(true);
+        expect(mounted.field.getAttribute('data-required')).to.equal('true');
+        expect(mounted.form?.checkValidity()).to.equal(false);
+        await act(async () => mounted?.form?.requestSubmit());
+        expect(submitCount).to.equal(0);
+
+        await editNumberInput(mounted, '5');
+        await pressNumberInputKey(mounted, 'Enter');
+
+        expect(mounted.form?.checkValidity()).to.equal(true);
+        expect(new FormData(mounted.form).get('quantity')).to.equal('5');
+        await act(async () => mounted?.form?.requestSubmit());
+        expect(submitCount).to.equal(1);
+    });
+
+    it('should disable editing, steps, and hidden form submission', async () => {
+        mounted = await mountNumberInput({
+            initialValue: 5,
+            'aria-label': 'Quantity',
+            name: 'quantity',
+            disabled: true,
+        });
+        const hiddenInput =
+            mounted.container.querySelector<HTMLInputElement>('input[type="hidden"]')!;
+
+        expect(mounted.input.disabled).to.equal(true);
+        expect(hiddenInput.disabled).to.equal(true);
+        expect(mounted.stepButtons.every((button) => button.disabled)).to.equal(true);
+        expect(mounted.field.getAttribute('data-disabled')).to.equal('true');
+    });
+
+    it('should retain focus semantics while preventing read-only edits and steps', async () => {
+        mounted = await mountNumberInput({
+            initialValue: 5,
+            'aria-label': 'Quantity',
+            readOnly: true,
+        });
+
+        expect(mounted.input.readOnly).to.equal(true);
+        expect(mounted.input.disabled).to.equal(false);
+        expect(mounted.input.getAttribute('aria-readonly')).to.equal('true');
+        expect(mounted.stepButtons.every((button) => button.disabled)).to.equal(true);
+        expect(mounted.field.getAttribute('data-readonly')).to.equal('true');
+    });
+
+    it('should render non-finite controlled values as empty without NaN semantics', async () => {
+        mounted = await mountNumberInput({
+            initialValue: Number.NaN,
+            'aria-label': 'Quantity',
+        });
+
+        expect(mounted.input.value).to.equal('');
+        expect(mounted.input.hasAttribute('aria-valuenow')).to.equal(false);
+        expect(mounted.field.getAttribute('data-empty')).to.equal('true');
+    });
+
+    it('should hydrate the server markup without changing ids or reporting mismatches', async () => {
+        const container = renderStaticNumberInput();
+        document.body.append(container);
+        const serverInputId = container.querySelector<HTMLInputElement>(
+            'input[data-cratis-part="input"]',
+        )!.id;
+        const consoleError = vi
+            .spyOn(console, 'error')
+            .mockImplementation(() => undefined);
+        let root: Root | undefined;
+        try {
+            await act(async () => {
+                root = hydrateRoot(container, numberInput);
+                await Promise.resolve();
+            });
+            expect(
+                container.querySelector<HTMLInputElement>(
+                    'input[data-cratis-part="input"]',
+                )!.id,
+            ).to.equal(serverInputId);
+            expect(
+                consoleError.mock.calls.some((call) =>
+                    String(call[0]).toLowerCase().includes('hydration'),
+                ),
+            ).to.equal(false);
+        } finally {
+            if (root) await act(async () => root?.unmount());
+            consoleError.mockRestore();
+            container.remove();
+        }
+    });
+});
diff --git a/Source/Common/index.ts b/Source/Common/index.ts
index 77f1511f..1bb61cbe 100644
--- a/Source/Common/index.ts
+++ b/Source/Common/index.ts
@@ -7,6 +7,9 @@ export * from './DatePickerInput';
 export * from './ErrorBoundary';
 export * from './Icon';
 export * from './normalizeIconClass';
+export * from './NumberInput';
+export * from './NumberInputCommitReason';
+export * from './NumberInputPartAttributes';
 export * from './Page';
 export * from './FormElement';
 export * from './Tooltip';
diff --git a/Source/for_accessibility/when_scanning_foundation_surfaces.tsx b/Source/for_accessibility/when_scanning_foundation_surfaces.tsx
index 6b88c84c..41b7c721 100644
--- a/Source/for_accessibility/when_scanning_foundation_surfaces.tsx
+++ b/Source/for_accessibility/when_scanning_foundation_surfaces.tsx
@@ -13,6 +13,7 @@ import { Checkbox } from '../Common/Checkbox';
 import { CratisComponentsProvider } from '../Common/CratisComponentsProvider';
 import { DatePickerInput } from '../Common/DatePickerInput';
 import { IconButton } from '../Common/IconButton';
+import { NumberInput } from '../Common/NumberInput';
 import { Radio } from '../Common/Radio';
 import { Surface } from '../Common/Surface';
 import { Switch } from '../Common/Switch';
@@ -29,6 +30,7 @@ describe('when scanning representative foundation surfaces', () => {
     let root: Root;
 
     beforeEach(async () => {
+        // SAFETY: React's test flag is an intentional test-runtime global absent from lib.dom types.
         (
             globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
         ).IS_REACT_ACT_ENVIRONMENT = true;
@@ -42,6 +44,14 @@ describe('when scanning representative foundation surfaces', () => {
                         <Surface as='section' aria-label='Basic controls'>
                             <TextInput aria-label='Display name' />
                             <TextArea aria-label='Notes' />
+                            <NumberInput
+                                aria-label='Quantity'
+                                value={2}
+                                onChange={() => undefined}
+                                min={0}
+                                max={10}
+                                description='Choose a quantity from zero to ten.'
+                            />
                             <Checkbox label='Include archived items' />
                             <Radio label='Daily' name='frequency' value='daily' />
                             <Switch label='Enable notifications' />
diff --git a/Source/scripts/generate-parts.mjs b/Source/scripts/generate-parts.mjs
index f7b99f66..03a8acee 100644
--- a/Source/scripts/generate-parts.mjs
+++ b/Source/scripts/generate-parts.mjs
@@ -54,6 +54,15 @@ export const partDefinitions = {
         sources: ['CommandForm/fields/NumberField.tsx'],
         ptKeys: ['root', 'input'],
     },
+    NumberInput: {
+        parts: ['root', 'input', 'prefix', 'suffix', 'step', 'description', 'error'],
+        sources: ['Common/NumberInput.tsx'],
+        ptKeys: ['root', 'input', 'prefix', 'suffix', 'step', 'description', 'error'],
+    },
+    NumberInputField: {
+        aliasOf: 'NumberInput',
+        sources: ['CommandForm/fields/NumberInputField.tsx'],
+    },
     ColorPickerField: {
         parts: ['root', 'input', 'value'],
         sources: ['CommandForm/fields/ColorPickerField.tsx'],
@@ -519,6 +528,15 @@ export const partStateDefinitions = {
         root: ['disabled', 'invalid', 'readonly'],
         input: ['disabled', 'invalid', 'readonly'],
     },
+    NumberInput: {
+        root: ['disabled', 'invalid', 'readonly'],
+        input: ['disabled', 'invalid', 'readonly', 'focused'],
+        prefix: ['disabled', 'invalid', 'readonly'],
+        suffix: ['disabled', 'invalid', 'readonly'],
+        step: ['disabled', 'invalid', 'readonly'],
+        description: [],
+        error: ['invalid'],
+    },
     ColorPickerField: {
         root: ['disabled', 'invalid'],
         input: ['disabled', 'invalid'],
@@ -806,6 +824,13 @@ export const splitPartStateAllowlist = [
  * authored as literal JSX attributes. Focused behavior specs prove these exact contracts.
  */
 export const implicitPartStateAllowlist = [
+    {
+        component: 'NumberInput',
+        file: 'Common/NumberInput.tsx',
+        part: 'input',
+        states: ['focused'],
+        reason: 'React Aria Input emits data-focused while the editable input owns focus.',
+    },
     {
         component: 'DatePickerInput',
         file: 'Common/DatePickerInputImplementation.tsx',
diff --git a/Source/scripts/verify-parts-manifest.mjs b/Source/scripts/verify-parts-manifest.mjs
index 25eca046..8a9d8a41 100644
--- a/Source/scripts/verify-parts-manifest.mjs
+++ b/Source/scripts/verify-parts-manifest.mjs
@@ -638,9 +638,9 @@ function verifyPublicPtContracts() {
             `Public pt file inventory differs: source=[${actualFiles.join(', ')}], manifest=[${expectedFiles.join(', ')}].`,
         );
     }
-    if (actualFiles.length !== 45 || declarationCount !== 48) {
+    if (actualFiles.length !== 46 || declarationCount !== 49) {
         problems.push(
-            `Expected the authoritative 45 pt files / 48 declarations, found ${actualFiles.length} files / ${declarationCount} declarations.`,
+            `Expected the authoritative 46 pt files / 49 declarations, found ${actualFiles.length} files / ${declarationCount} declarations.`,
         );
     }
     return problems;
@@ -874,7 +874,7 @@ function main() {
         0,
     );
     console.log(
-        `Parts manifest verified: ${componentCount} components, ${partCount} component parts, ${stateCount} component/part states, 45 pt files, and 48 pt declarations.`,
+        `Parts manifest verified: ${componentCount} components, ${partCount} component parts, ${stateCount} component/part states, 46 pt files, and 49 pt declarations.`,
     );
 }
 
diff --git a/Source/styles.css b/Source/styles.css
index dbcede06..20f942e3 100644
--- a/Source/styles.css
+++ b/Source/styles.css
@@ -52,6 +52,7 @@
 @import './Common/Button.css';
 @import './Common/DatePickerInput.css';
 @import './Common/FormElement.css';
+@import './Common/NumberInput.css';
 @import './Common/Primitives.css';
 @import './Common/Tooltip.css';
 @import './DataTables/ColumnFilterMenu.css';
diff --git a/Source/tokens.css b/Source/tokens.css
index 95d82df5..afdecaf5 100644
--- a/Source/tokens.css
+++ b/Source/tokens.css
@@ -17,6 +17,9 @@
     --cratis-surface-border: #dfe7ef;
     --cratis-control-background: #ffffff;
     --cratis-control-border: #8492a6;
+    --cratis-number-input-adornment-color: var(--cratis-text-color-secondary);
+    --cratis-number-input-step-background: var(--cratis-surface-100);
+    --cratis-number-input-step-background-hover: var(--cratis-surface-hover);
 
     --cratis-text-color: #4b5563;
     --cratis-text-color-secondary: #6b7280;
diff --git a/Source/types/parts.ts b/Source/types/parts.ts
index db73e8e0..4f708729 100644
--- a/Source/types/parts.ts
+++ b/Source/types/parts.ts
@@ -13,6 +13,8 @@ export const cratisParts = {
     ToggleSwitchField: ['root', 'input', 'control', 'handle'],
     SliderField: ['root', 'input', 'value'],
     NumberField: ['root', 'input'],
+    NumberInput: ['root', 'input', 'prefix', 'suffix', 'step', 'description', 'error'],
+    NumberInputField: ['root', 'input', 'prefix', 'suffix', 'step', 'description', 'error'],
     ColorPickerField: ['root', 'input', 'value'],
     PasswordField: ['root', 'input', 'toggle'],
     InputTextField: ['input'],
@@ -124,6 +126,24 @@ export const cratisPartStates = {
         'root': ['disabled', 'invalid', 'readonly'],
         'input': ['disabled', 'invalid', 'readonly'],
     },
+    NumberInput: {
+        'root': ['disabled', 'invalid', 'readonly'],
+        'input': ['disabled', 'invalid', 'readonly', 'focused'],
+        'prefix': ['disabled', 'invalid', 'readonly'],
+        'suffix': ['disabled', 'invalid', 'readonly'],
+        'step': ['disabled', 'invalid', 'readonly'],
+        'description': [],
+        'error': ['invalid'],
+    },
+    NumberInputField: {
+        'root': ['disabled', 'invalid', 'readonly'],
+        'input': ['disabled', 'invalid', 'readonly', 'focused'],
+        'prefix': ['disabled', 'invalid', 'readonly'],
+        'suffix': ['disabled', 'invalid', 'readonly'],
+        'step': ['disabled', 'invalid', 'readonly'],
+        'description': [],
+        'error': ['invalid'],
+    },
     ColorPickerField: {
         'root': ['disabled', 'invalid'],
         'input': ['disabled', 'invalid'],
diff --git a/Storybook/README.md b/Storybook/README.md
index c1a14aeb..31e6032a 100644
--- a/Storybook/README.md
+++ b/Storybook/README.md
@@ -29,4 +29,4 @@ yarn workspace @cratis/components.storybook test-storybook
 yarn workspace @cratis/components.storybook dev
 ```
 
-`test-storybook` runs every discovered stable story in each isolated preview and both maintained appearance modes. The current V4 inventory is four previews × 277 stories × two appearances: **2,216 story/appearance/axe cases**. There is no story sampling or tag exclusion; generated preview indexes identify every executed story, while issue #217 tracks replacing release-snapshot count constants with generated reviewable inventories. The composed renderer control preserves a stable story id when available, but switching previews remounts the iframe and loses component-local state.
+`test-storybook` runs every discovered stable story in each isolated preview and both maintained appearance modes. The current V4 inventory is four previews × 285 stories × two appearances: **2,280 story/appearance/axe cases**. There is no story sampling or tag exclusion; generated preview indexes identify every executed story, while issue #217 tracks replacing release-snapshot count constants with generated reviewable inventories. The composed renderer control preserves a stable story id when available, but switching previews remounts the iframe and loses component-local state.
diff --git a/Storybook/scripts/run-story-matrix.mjs b/Storybook/scripts/run-story-matrix.mjs
index 40df1105..43323e5d 100644
--- a/Storybook/scripts/run-story-matrix.mjs
+++ b/Storybook/scripts/run-story-matrix.mjs
@@ -73,9 +73,9 @@ for (const adapter of inventory.adapters) {
     }
 }
 
-const matrixCount = inventory.adapters.length * 277 * appearances.length;
+const matrixCount = inventory.adapters.length * 285 * appearances.length;
 console.log(
-    `\nCompleted ${inventory.adapters.length} isolated previews × 277 stories × ${appearances.length} appearance mode(s) = ${matrixCount} story/appearance/axe cases.`,
+    `\nCompleted ${inventory.adapters.length} isolated previews × 285 stories × ${appearances.length} appearance mode(s) = ${matrixCount} story/appearance/axe cases.`,
 );
 console.log('Story exclusions: none. No sampling or tag exclusion was applied.');
 console.log(
diff --git a/Storybook/scripts/verify-storybook-indexes.mjs b/Storybook/scripts/verify-storybook-indexes.mjs
index 7d42defd..37f22b3a 100644
--- a/Storybook/scripts/verify-storybook-indexes.mjs
+++ b/Storybook/scripts/verify-storybook-indexes.mjs
@@ -24,7 +24,7 @@ const collectTextFiles = directory => readdirSync(directory, { withFileTypes: tr
     return entry.isFile() && /\.(?:html|js|json)$/u.test(entry.name) ? [entryPath] : [];
 });
 const storyFiles = collectStoryFiles(sourceRoot);
-if (storyFiles.length !== 67) throw new Error(`Expected the existing 67 story modules, found ${storyFiles.length}.`);
+if (storyFiles.length !== 68) throw new Error(`Expected the existing 68 story modules, found ${storyFiles.length}.`);
 
 let canonicalStoryIds;
 let canonicalDocsIds;
@@ -39,8 +39,8 @@ for (const adapter of inventory.adapters) {
     const entries = Object.values(index.entries ?? {});
     const storyIds = entries.filter(entry => entry.type === 'story').map(entry => entry.id).sort();
     const docsIds = entries.filter(entry => entry.type === 'docs').map(entry => entry.id).sort();
-    if (storyIds.length !== 277 || docsIds.length !== 67) {
-        throw new Error(`${adapter.metadata.id} indexed ${storyIds.length} stories and ${docsIds.length} autodocs pages; expected 277 and 67.`);
+    if (storyIds.length !== 285 || docsIds.length !== 68) {
+        throw new Error(`${adapter.metadata.id} indexed ${storyIds.length} stories and ${docsIds.length} autodocs pages; expected 285 and 68.`);
     }
     canonicalStoryIds ??= storyIds;
     canonicalDocsIds ??= docsIds;
@@ -65,11 +65,11 @@ for (const adapter of inventory.adapters) {
             throw new Error(`PrimeReact 11 preview exposed a license-key environment contract in ${exposedEnvironmentContract}.`);
         }
     }
-    console.log(`${adapter.metadata.id}: 277 stories, 67 autodocs pages, primereact [${expectedVersions.join(', ') || 'none'}].`);
+    console.log(`${adapter.metadata.id}: 285 stories, 68 autodocs pages, primereact [${expectedVersions.join(', ') || 'none'}].`);
 }
 
 const appearances = 2;
-const matrixCount = inventory.adapters.length * 277 * appearances;
-console.log(`Storybook indexes verified: ${inventory.adapters.length} previews × 277 stable stories × ${appearances} appearances = ${matrixCount} story/appearance cases.`);
+const matrixCount = inventory.adapters.length * 285 * appearances;
+console.log(`Storybook indexes verified: ${inventory.adapters.length} previews × 285 stable stories × ${appearances} appearances = ${matrixCount} story/appearance cases.`);
 console.log('Story exclusions: none. Every indexed story is included in light, dark, and axe execution.');
 console.log(`Renderer exclusions: ${inventory.exclusions.map(item => `${item.id} (${item.reason})`).join(', ') || 'none'}; private adapters such as Plain are never composed.`);
diff --git a/yarn.lock b/yarn.lock
index f9a495b5..365c19be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7241,6 +7241,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"supports-color@npm:*":
+  version: 11.0.0
+  resolution: "supports-color@npm:11.0.0"
+  checksum: 10/6480981c00359da2cd22a25543e8bee3cea248a32194e98fade18ac5ada178bcb950fa225d262ff4dbf23c81caaed65660eb4093302bbdd0d1f1d93a18768854
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^7.1.0":
   version: 7.2.0
   resolution: "supports-color@npm:7.2.0"