@radix-ng/primitives 0.51.0 → 1.0.0-beta.0

package/fesm2022/radix-ng-primitives-number-field.mjs

@@ -1,503 +1,1238 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, DestroyRef, signal, effect, Injectable, computed, ElementRef, input, booleanAttribute, Directive, model, numberAttribute, NgModule } from '@angular/core';
+import { numberAttribute, computed, signal, inject, DestroyRef, input, booleanAttribute, Directive, ElementRef, model, output, effect, untracked, NgModule } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/core';
+import { createContext, clamp, getActiveElement, injectControlValueAccessor, injectId, RdxControlValueAccessor } from '@radix-ng/primitives/core';
 import { NumberFormatter, NumberParser } from '@internationalized/number';
-import { Subject, fromEvent } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { getActiveElement, isNullish, clamp, snapValueToStep, provideToken } from '@radix-ng/primitives/core';
+import * as i1$1 from '@radix-ng/primitives/portal';
+import { RdxPortal } from '@radix-ng/primitives/portal';
 
-const NUMBER_FIELD_ROOT_CONTEXT = new InjectionToken('NUMBER_FIELD_ROOT_CONTEXT');
-function injectNumberFieldRootContext() {
-    return inject(NUMBER_FIELD_ROOT_CONTEXT);
-}
+/**
+ * The Number Field context exposes the root directive instance to every child part.
+ * The root owns all state, parsing/formatting and value-change logic; parts read
+ * signals and call methods off it.
+ *
+ * @see https://base-ui.com/react/components/number-field
+ */
+const [injectNumberFieldRootContext, provideNumberFieldRootContext] = createContext('RdxNumberFieldRootContext');
 
-class PressedHoldService {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-    }
-    create(options) {
-        const timeout = signal(undefined, ...(ngDevMode ? [{ debugName: "timeout" }] : /* istanbul ignore next */ []));
-        const triggerHook = new Subject();
-        const isPressed = signal(false, ...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
-        const resetTimeout = () => {
-            const timer = timeout();
-            if (timer !== undefined) {
-                window.clearTimeout(timer);
-                timeout.set(undefined);
-            }
-        };
-        const onIncrementPressStart = (delay) => {
-            resetTimeout();
-            if (options.disabled())
-                return;
-            triggerHook.next();
-            timeout.set(window.setTimeout(() => {
-                onIncrementPressStart(60);
-            }, delay));
-        };
-        const onPressStart = (event) => {
-            if (event.button !== 0 || isPressed())
-                return;
-            event.preventDefault();
-            isPressed.set(true);
-            onIncrementPressStart(400);
-        };
-        const onPressRelease = () => {
-            isPressed.set(false);
-            resetTimeout();
-        };
-        effect(() => {
-            // Skip SSR environments
-            if (typeof window === 'undefined')
-                return;
-            const targetElement = options.target?.() || window;
-            const destroy$ = new Subject();
-            const pointerDownSub = fromEvent(targetElement, 'pointerdown')
-                .pipe(takeUntil(destroy$))
-                .subscribe((e) => onPressStart(e));
-            const pointerUpSub = fromEvent(window, 'pointerup').pipe(takeUntil(destroy$)).subscribe(onPressRelease);
-            const pointerCancelSub = fromEvent(window, 'pointercancel')
-                .pipe(takeUntil(destroy$))
-                .subscribe(onPressRelease);
-            this.destroyRef.onDestroy(() => {
-                destroy$.next();
-                destroy$.complete();
-                pointerDownSub.unsubscribe();
-                pointerUpSub.unsubscribe();
-                pointerCancelSub.unsubscribe();
-            });
-        });
-        return {
-            isPressed: isPressed.asReadonly(),
-            onTrigger: (fn) => {
-                const sub = triggerHook.subscribe(fn);
-                this.destroyRef.onDestroy(() => sub.unsubscribe());
-            }
-        };
+/**
+ * Coerces an optional numeric input, returning `undefined` for nullish/empty/non-numeric values.
+ * Unlike `numberAttribute`, `numberOrUndefined(undefined)` is `undefined` (not `NaN`), so an unset
+ * `[min]`/`[max]` does not poison clamping.
+ */
+function numberOrUndefined(value) {
+    if (value == null || value === '') {
+        return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PressedHoldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PressedHoldService }); }
+    const parsed = numberAttribute(value);
+    return Number.isNaN(parsed) ? undefined : parsed;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PressedHoldService, decorators: [{
-            type: Injectable
-        }] });
+/** Default step used when no `step` is provided. */
+const DEFAULT_STEP = 1;
+/** Delay between auto-repeat ticks while holding an increment/decrement button. */
+const CHANGE_VALUE_TICK_DELAY = 60;
+/** Delay before auto-repeat starts while holding an increment/decrement button. */
+const START_AUTO_CHANGE_DELAY = 400;
+/** Pointer travel (px) that cancels a hold, treating the gesture as a scroll. */
+const SCROLLING_POINTER_MOVE_DISTANCE = 8;
+const STEP_EPSILON_FACTOR = 1e-10;
+// Matches Intl.NumberFormat's decimal maximumFractionDigits default.
+const DEFAULT_DIGITS = 3;
+/** Reactive `Intl`-backed formatter built from the current locale and format options. */
 function useNumberFormatter(locale, options = signal({})) {
-    return computed(() => new NumberFormatter(locale(), options()));
+    return computed(() => new NumberFormatter(locale(), options() ?? {}));
 }
+/** Reactive `Intl`-backed parser built from the current locale and format options. */
 function useNumberParser(locale, options = signal({})) {
-    return computed(() => new NumberParser(locale(), options()));
+    return computed(() => new NumberParser(locale(), options() ?? {}));
+}
+/** Whether the format options would cause `Intl.NumberFormat` to round the value. */
+function hasNumberFormatRoundingOptions(format) {
+    const opts = format;
+    return !!(opts &&
+        (opts.maximumFractionDigits != null ||
+            opts.minimumFractionDigits != null ||
+            opts.maximumSignificantDigits != null ||
+            opts.minimumSignificantDigits != null ||
+            opts['roundingIncrement'] != null ||
+            opts['roundingMode'] != null ||
+            opts['roundingPriority'] != null));
+}
+/**
+ * Strips floating-point representation errors (e.g. `0.1 + 0.2`) using the format's
+ * rounding options when present, otherwise rounding to {@link DEFAULT_DIGITS} digits.
+ */
+function removeFloatingPointErrors(value, locale, format) {
+    if (!Number.isFinite(value)) {
+        return value;
+    }
+    if (!hasNumberFormatRoundingOptions(format)) {
+        return Number(value.toFixed(DEFAULT_DIGITS));
+    }
+    const formatter = new NumberFormatter('en-US', {
+        ...format,
+        // These options alter only display decoration, not numeric rounding.
+        signDisplay: 'auto',
+        currencySign: 'standard',
+        notation: format.notation === 'compact' ? 'standard' : format.notation,
+        useGrouping: false
+    });
+    const roundedText = formatter.format(value);
+    const roundedValue = new NumberParser('en-US', format ?? {}).parse(roundedText);
+    if (Number.isNaN(roundedValue)) {
+        return value;
+    }
+    return formatter.format(roundedValue) === roundedText ? roundedValue : value;
 }
-function handleDecimalOperation(operator, value1, value2) {
-    let result = operator === '+' ? value1 + value2 : value1 - value2;
-    // Check if we have decimals
-    if (value1 % 1 !== 0 || value2 % 1 !== 0) {
-        const value1Decimal = value1.toString().split('.');
-        const value2Decimal = value2.toString().split('.');
-        const value1DecimalLength = (value1Decimal[1] && value1Decimal[1].length) || 0;
-        const value2DecimalLength = (value2Decimal[1] && value2Decimal[1].length) || 0;
-        const multiplier = 10 ** Math.max(value1DecimalLength, value2DecimalLength);
-        // Transform the decimals to integers based on the precision
-        value1 = Math.round(value1 * multiplier);
-        value2 = Math.round(value2 * multiplier);
-        // Perform the operation on integers values to make sure we don't get a fancy decimal value
-        result = operator === '+' ? value1 + value2 : value1 - value2;
-        // Transform the integer result back to decimal
-        result /= multiplier;
-    }
-    return result;
+function snapToStep(value, base, step, mode = 'directional') {
+    const stepSize = Math.abs(step);
+    const direction = Math.sign(step);
+    const tolerance = stepSize * STEP_EPSILON_FACTOR * direction;
+    const rawSteps = value - base + tolerance;
+    if (mode === 'nearest') {
+        return base + Math.round(rawSteps / step) * step;
+    }
+    const snappedSteps = direction > 0 ? Math.floor(rawSteps / stepSize) : Math.ceil(rawSteps / stepSize);
+    return base + snappedSteps * stepSize;
+}
+/**
+ * Snaps (optionally), clamps (optionally) and rounds an unvalidated value, mirroring
+ * Base UI's `toValidatedNumber`. Snapping happens before clamping so non-step-aligned
+ * boundaries stay reachable.
+ */
+function toValidatedNumber(value, options) {
+    if (value === null) {
+        return value;
+    }
+    const { step, minWithDefault, maxWithDefault, minWithZeroDefault, format, locale, snapOnStep, small } = options;
+    let nextValue = value;
+    if (step != null && snapOnStep && step !== 0) {
+        const base = small || minWithDefault === Number.MIN_SAFE_INTEGER ? minWithZeroDefault : minWithDefault;
+        nextValue = snapToStep(nextValue, base, step, small ? 'nearest' : 'directional');
+    }
+    if (options.clamp) {
+        nextValue = clamp(nextValue, minWithDefault, maxWithDefault);
+    }
+    const roundedValue = removeFloatingPointErrors(nextValue, locale, format);
+    return options.clamp ? clamp(roundedValue, minWithDefault, maxWithDefault) : roundedValue;
+}
+/**
+ * Pointer press-and-hold with auto-repeat, modelled on Base UI's `usePressAndHold`.
+ * Must be called in an injection context — it registers cleanup via `DestroyRef`.
+ */
+function createPressAndHold(options) {
+    const destroyRef = inject(DestroyRef);
+    const isPressing = signal(false, ...(ngDevMode ? [{ debugName: "isPressing" }] : /* istanbul ignore next */ []));
+    let startEvent = null;
+    let startX = 0;
+    let startY = 0;
+    let didTick = false;
+    let tickTimer;
+    const clearTick = () => {
+        if (tickTimer !== undefined) {
+            clearTimeout(tickTimer);
+            tickTimer = undefined;
+        }
+    };
+    const scheduleTick = (delay) => {
+        tickTimer = setTimeout(() => {
+            if (options.disabled() || !startEvent) {
+                stop(startEvent);
+                return;
+            }
+            didTick = true;
+            const shouldContinue = options.tick(startEvent);
+            if (shouldContinue === false) {
+                clearTick();
+                return;
+            }
+            scheduleTick(options.tickDelay);
+        }, delay);
+    };
+    const onPointerMove = (event) => {
+        // Treat a moving touch/pen gesture as a scroll and cancel the hold.
+        if (startEvent && startEvent.pointerType !== 'mouse') {
+            const dx = event.clientX - startX;
+            const dy = event.clientY - startY;
+            if (Math.hypot(dx, dy) > options.scrollDistance) {
+                stop(event);
+            }
+        }
+    };
+    const stop = (event) => {
+        if (!isPressing()) {
+            return;
+        }
+        clearTick();
+        window.removeEventListener('pointerup', stop, true);
+        window.removeEventListener('pointercancel', stop, true);
+        window.removeEventListener('pointermove', onPointerMove, true);
+        isPressing.set(false);
+        if (event) {
+            options.onStop?.(event);
+        }
+    };
+    destroyRef.onDestroy(() => stop(null));
+    return {
+        isPressing: isPressing.asReadonly(),
+        shouldSkipClick: () => didTick,
+        onPointerDown(event) {
+            if (options.disabled() || isPressing()) {
+                return;
+            }
+            startEvent = event;
+            startX = event.clientX;
+            startY = event.clientY;
+            didTick = false;
+            isPressing.set(true);
+            window.addEventListener('pointerup', stop, true);
+            window.addEventListener('pointercancel', stop, true);
+            window.addEventListener('pointermove', onPointerMove, true);
+            scheduleTick(options.startDelay);
+        }
+    };
 }
 
-class RdxNumberFieldDecrementDirective {
+// Treat pen as touch-like to avoid forcing the software keyboard on stylus taps.
+function isTouchLikePointerType(pointerType) {
+    return pointerType === 'touch' || pointerType === 'pen';
+}
+/**
+ * Shared behaviour for the increment and decrement stepper buttons: single-press,
+ * press-and-hold auto-repeat, and committing a dirty (typed-but-not-blurred) input
+ * value before stepping.
+ *
+ * @see https://base-ui.com/react/components/number-field
+ */
+class RdxNumberFieldButton {
+    get direction() {
+        return this.isIncrement ? 1 : -1;
+    }
+    get pressReason() {
+        return this.isIncrement ? 'increment-press' : 'decrement-press';
+    }
     constructor() {
-        this.elementRef = inject((ElementRef));
-        this.pressedHold = inject(PressedHoldService);
         this.rootContext = injectNumberFieldRootContext();
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @ignore
+         * When `true`, the button is disabled in addition to inheriting the root's disabled state.
+         * @default false
          */
-        this.isDisabled = computed(() => this.rootContext.disabled() ||
-            this.rootContext.readonly() ||
-            this.disabled() ||
-            this.rootContext.isDecreaseDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-        /**
-         * @ignore
-         */
-        this.useHold = this.pressedHold.create({
-            target: signal(this.elementRef.nativeElement),
-            disabled: this.disabled
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @ignore Disabled for display/focus purposes (own state, root disabled, or bound reached). */
+        this.buttonDisabled = computed(() => this.disabled() ||
+            this.rootContext.isDisabled() ||
+            (this.isIncrement ? this.rootContext.isIncrementDisabled() : this.rootContext.isDecrementDisabled()), ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : /* istanbul ignore next */ []));
+        /** @ignore Disabled for interaction purposes (also blocked while read-only). */
+        this.interactionDisabled = computed(() => this.buttonDisabled() || this.rootContext.readonly(), ...(ngDevMode ? [{ debugName: "interactionDisabled" }] : /* istanbul ignore next */ []));
+        const root = this.rootContext;
+        this.press = createPressAndHold({
+            disabled: () => this.interactionDisabled(),
+            startDelay: START_AUTO_CHANGE_DELAY,
+            tickDelay: CHANGE_VALUE_TICK_DELAY,
+            scrollDistance: SCROLLING_POINTER_MOVE_DISTANCE,
+            tick: (event) => {
+                const amount = root.getStepAmount(event);
+                return root.incrementValue(amount, {
+                    direction: this.direction,
+                    event,
+                    reason: this.pressReason
+                });
+            },
+            onStop: () => root.commitValue(root.lastChangedValue ?? root.currentValue())
+        });
+    }
+    onClick(event) {
+        if (event.defaultPrevented || this.interactionDisabled() || this.press.shouldSkipClick()) {
+            return;
+        }
+        this.commitDirtyValue(event);
+        const amount = this.rootContext.getStepAmount(event);
+        const prev = this.rootContext.currentValue();
+        this.rootContext.incrementValue(amount, {
+            direction: this.direction,
+            event,
+            reason: this.pressReason
         });
+        const committed = this.rootContext.lastChangedValue ?? this.rootContext.currentValue();
+        if (committed !== prev) {
+            this.rootContext.commitValue(committed);
+        }
     }
-    ngOnInit() {
-        this.useHold.onTrigger(() => this.rootContext.handleDecrease());
+    onPointerDown(event) {
+        const isMainButton = !event.button || event.button === 0;
+        if (event.defaultPrevented || this.rootContext.readonly() || !isMainButton || this.buttonDisabled()) {
+            return;
+        }
+        // Sync the dirty input value before starting the hold sequence.
+        this.commitDirtyValue(event);
+        if (!isTouchLikePointerType(event.pointerType)) {
+            // Focus the input so the user can continue with the keyboard.
+            this.rootContext.inputEl()?.focus();
+        }
+        this.press.onPointerDown(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldDecrementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNumberFieldDecrementDirective, isStandalone: true, selector: "button[rdxNumberFieldDecrement]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "-1", "type": "\"button\"" }, listeners: { "contextmenu": "$event.preventDefault()" }, properties: { "attr.aria-label": "\"Decrease\"", "attr.disabled": "isDisabled() ? \"\" : undefined", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-pressed": "useHold.isPressed() ? \"true\" : undefined", "style.user-select": "useHold.isPressed() ? \"none\" : null" } }, providers: [PressedHoldService], ngImport: i0 }); }
+    /** Commits a typed-but-not-yet-blurred input value so stepping starts from it. */
+    commitDirtyValue(event) {
+        const root = this.rootContext;
+        root.allowInputSync = true;
+        const parsed = root.parseNumber(root.inputValue());
+        if (parsed !== null) {
+            root.setValue(parsed, this.pressReason, event, this.direction);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNumberFieldButton, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "tabindex": "-1" }, listeners: { "click": "onClick($event)", "pointerdown": "onPointerDown($event)", "contextmenu": "$event.preventDefault()" }, properties: { "attr.aria-controls": "rootContext.id()", "attr.aria-readonly": "rootContext.readonly() ? \"true\" : undefined", "attr.disabled": "buttonDisabled() ? \"\" : undefined", "attr.data-disabled": "buttonDisabled() ? \"\" : undefined", "attr.data-pressed": "press.isPressing() ? \"\" : undefined", "style.user-select": "\"none\"", "style.-webkit-user-select": "\"none\"" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldDecrementDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldButton, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'button[rdxNumberFieldDecrement]',
-                    providers: [PressedHoldService],
                     host: {
+                        type: 'button',
                         tabindex: '-1',
-                        type: '"button"',
-                        '[attr.aria-label]': '"Decrease"',
-                        '[attr.disabled]': 'isDisabled() ? "" : undefined',
-                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
-                        '[attr.data-pressed]': 'useHold.isPressed() ? "true" : undefined',
-                        '[style.user-select]': 'useHold.isPressed() ? "none" : null',
+                        '[attr.aria-controls]': 'rootContext.id()',
+                        '[attr.aria-readonly]': 'rootContext.readonly() ? "true" : undefined',
+                        '[attr.disabled]': 'buttonDisabled() ? "" : undefined',
+                        '[attr.data-disabled]': 'buttonDisabled() ? "" : undefined',
+                        '[attr.data-pressed]': 'press.isPressing() ? "" : undefined',
+                        '[style.user-select]': '"none"',
+                        '[style.-webkit-user-select]': '"none"',
+                        '(click)': 'onClick($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
                         '(contextmenu)': '$event.preventDefault()'
                     }
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-class RdxNumberFieldIncrementDirective {
+/**
+ * A stepper button that decreases the field value when clicked or held.
+ *
+ * @see https://base-ui.com/react/components/number-field
+ */
+class RdxNumberFieldDecrement extends RdxNumberFieldButton {
+    constructor() {
+        super(...arguments);
+        this.isIncrement = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldDecrement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldDecrement, isStandalone: true, selector: "button[rdxNumberFieldDecrement]", host: { attributes: { "aria-label": "Decrease" } }, exportAs: ["rdxNumberFieldDecrement"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldDecrement, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxNumberFieldDecrement]',
+                    exportAs: 'rdxNumberFieldDecrement',
+                    host: {
+                        'aria-label': 'Decrease'
+                    }
+                }]
+        }] });
+
+/**
+ * Groups the input with the increment and decrement buttons.
+ *
+ * @see https://base-ui.com/react/components/number-field
+ */
+class RdxNumberFieldGroup {
     constructor() {
-        this.elementRef = inject((ElementRef));
-        this.pressedHold = inject(PressedHoldService);
         this.rootContext = injectNumberFieldRootContext();
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * @ignore
-         */
-        this.isDisabled = computed(() => this.rootContext.disabled() ||
-            this.rootContext.readonly() ||
-            this.disabled() ||
-            this.rootContext.isIncreaseDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-        /**
-         * @ignore
-         */
-        this.useHold = this.pressedHold.create({
-            target: signal(this.elementRef.nativeElement),
-            disabled: this.disabled
-        });
     }
-    ngOnInit() {
-        this.useHold.onTrigger(() => this.rootContext.handleIncrease());
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldGroup, isStandalone: true, selector: "div[rdxNumberFieldGroup]", host: { attributes: { "role": "group" }, properties: { "attr.data-disabled": "rootContext.isDisabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-required": "rootContext.required() ? \"\" : undefined", "attr.data-scrubbing": "rootContext.isScrubbing() ? \"\" : undefined" } }, exportAs: ["rdxNumberFieldGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[rdxNumberFieldGroup]',
+                    exportAs: 'rdxNumberFieldGroup',
+                    host: {
+                        role: 'group',
+                        '[attr.data-disabled]': 'rootContext.isDisabled() ? "" : undefined',
+                        '[attr.data-readonly]': 'rootContext.readonly() ? "" : undefined',
+                        '[attr.data-required]': 'rootContext.required() ? "" : undefined',
+                        '[attr.data-scrubbing]': 'rootContext.isScrubbing() ? "" : undefined'
+                    }
+                }]
+        }] });
+
+/**
+ * The hidden native `input[type=number]` that mirrors the field value for native form submission
+ * and browser constraint validation (min/max/step/required). Place it inside the root, alongside
+ * the visible `[rdxNumberFieldInput]`.
+ *
+ * @see https://base-ui.com/react/components/number-field
+ */
+class RdxNumberFieldHiddenInput {
+    constructor() {
+        this.rootContext = injectNumberFieldRootContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldIncrementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNumberFieldIncrementDirective, isStandalone: true, selector: "button[rdxNumberFieldIncrement]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "-1", "type": "\"button\"" }, listeners: { "contextmenu": "$event.preventDefault()" }, properties: { "attr.aria-label": "\"Increase\"", "attr.disabled": "isDisabled() ? \"\" : undefined", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-pressed": "useHold.isPressed() ? \"true\" : undefined", "style.user-select": "useHold.isPressed() ? \"none\" : null" } }, providers: [PressedHoldService], ngImport: i0 }); }
+    /** Move focus to the visible input when the hidden one is focused (e.g. via form validation). */
+    onFocus() {
+        this.rootContext.inputEl()?.focus();
+    }
+    /** Handle browser autofill, which writes directly to the hidden numeric input. */
+    onChange(event) {
+        const root = this.rootContext;
+        if (root.isDisabled() || root.readonly()) {
+            return;
+        }
+        const nextValue = event.target.valueAsNumber;
+        const parsedValue = Number.isNaN(nextValue) ? null : nextValue;
+        root.allowInputSync = true;
+        root.setValue(parsedValue, 'none', event);
+        root.commitValue(root.lastChangedValue ?? root.currentValue());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldHiddenInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldHiddenInput, isStandalone: true, selector: "input[rdxNumberFieldHiddenInput]", host: { attributes: { "type": "number", "tabindex": "-1", "aria-hidden": "true" }, listeners: { "focus": "onFocus()", "change": "onChange($event)" }, properties: { "attr.name": "rootContext.name()", "attr.form": "rootContext.form()", "value": "rootContext.currentValue() ?? \"\"", "attr.min": "rootContext.min()", "attr.max": "rootContext.max()", "attr.step": "rootContext.step()", "disabled": "rootContext.isDisabled()", "attr.required": "rootContext.required() ? \"\" : undefined" }, styleAttribute: "transform: translateX(-100%); position: absolute; overflow: hidden; pointer-events: none; opacity: 0; margin: 0;" }, exportAs: ["rdxNumberFieldHiddenInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldIncrementDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldHiddenInput, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'button[rdxNumberFieldIncrement]',
-                    providers: [PressedHoldService],
+                    selector: 'input[rdxNumberFieldHiddenInput]',
+                    exportAs: 'rdxNumberFieldHiddenInput',
                     host: {
+                        type: 'number',
                         tabindex: '-1',
-                        type: '"button"',
-                        '[attr.aria-label]': '"Increase"',
-                        '[attr.disabled]': 'isDisabled() ? "" : undefined',
-                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
-                        '[attr.data-pressed]': 'useHold.isPressed() ? "true" : undefined',
-                        '[style.user-select]': 'useHold.isPressed() ? "none" : null',
-                        '(contextmenu)': '$event.preventDefault()'
+                        'aria-hidden': 'true',
+                        '[attr.name]': 'rootContext.name()',
+                        '[attr.form]': 'rootContext.form()',
+                        '[value]': 'rootContext.currentValue() ?? ""',
+                        '[attr.min]': 'rootContext.min()',
+                        '[attr.max]': 'rootContext.max()',
+                        '[attr.step]': 'rootContext.step()',
+                        '[disabled]': 'rootContext.isDisabled()',
+                        '[attr.required]': 'rootContext.required() ? "" : undefined',
+                        style: 'transform: translateX(-100%); position: absolute; overflow: hidden; pointer-events: none; opacity: 0; margin: 0;',
+                        '(focus)': 'onFocus()',
+                        '(change)': 'onChange($event)'
                     }
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }] });
 
-class RdxNumberFieldInputDirective {
+/**
+ * A stepper button that increases the field value when clicked or held.
+ *
+ * @see https://base-ui.com/react/components/number-field
+ */
+class RdxNumberFieldIncrement extends RdxNumberFieldButton {
     constructor() {
-        this.elementRef = inject((ElementRef));
+        super(...arguments);
+        this.isIncrement = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldIncrement, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldIncrement, isStandalone: true, selector: "button[rdxNumberFieldIncrement]", host: { attributes: { "aria-label": "Increase" } }, exportAs: ["rdxNumberFieldIncrement"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldIncrement, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxNumberFieldIncrement]',
+                    exportAs: 'rdxNumberFieldIncrement',
+                    host: {
+                        'aria-label': 'Increase'
+                    }
+                }]
+        }] });
+
+/**
+ * The native text input that displays the formatted value and accepts typed input.
+ *
+ * @see https://base-ui.com/react/components/number-field
+ */
+class RdxNumberFieldInput {
+    constructor() {
+        this.elementRef = inject(ElementRef);
         this.rootContext = injectNumberFieldRootContext();
-        this.inputValue = signal(this.rootContext.textValue(), ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            this.inputValue.set(this.rootContext.textValue());
-            this.rootContext.setInputValue(this.inputValue());
-        });
+        /** Browsers place the caret at the start; we move it to the end on the first focus. */
+        this.hasTouchedInput = false;
+        this.rootContext.registerInput(this.elementRef.nativeElement);
     }
-    ngOnInit() {
-        this.rootContext.onInputElement(this.elementRef.nativeElement);
+    onFocus(event) {
+        const root = this.rootContext;
+        if (root.readonly() || root.isDisabled() || this.hasTouchedInput) {
+            return;
+        }
+        this.hasTouchedInput = true;
+        const target = event.target;
+        const length = target.value.length;
+        target.setSelectionRange(length, length);
     }
     onBeforeInput(event) {
-        const inputEvent = event;
-        const target = inputEvent.target;
+        // Only validate insertions; deletions and composition have `data === null`.
+        if (event.data == null) {
+            return;
+        }
+        const target = event.target;
         const nextValue = target.value.slice(0, target.selectionStart ?? undefined) +
-            (inputEvent.data ?? '') +
+            event.data +
             target.value.slice(target.selectionEnd ?? undefined);
-        if (!this.rootContext.validate(nextValue)) {
-            inputEvent.preventDefault();
+        if (!this.rootContext.isValidPartial(nextValue)) {
+            event.preventDefault();
         }
     }
-    onWheelEvent(event) {
-        if (this.rootContext.disableWheelChange()) {
+    onInput(event) {
+        const root = this.rootContext;
+        const targetValue = event.target.value;
+        root.allowInputSync = false;
+        if (targetValue.trim() === '') {
+            root.setInputValue(targetValue);
+            root.setValue(null, 'input-clear', event);
             return;
         }
-        // only handle when in focus
-        if (event.target !== getActiveElement())
-            return;
-        // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change
-        // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec
-        // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication
-        // especially if the user is scrolling near 45deg
-        if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
+        const parsedValue = root.parseNumber(targetValue);
+        root.setInputValue(targetValue);
+        if (parsedValue !== null) {
+            root.setValue(parsedValue, 'input-change', event);
+        }
+    }
+    onKeydown(event) {
+        const root = this.rootContext;
+        if (root.readonly() || root.isDisabled()) {
             return;
         }
-        event.preventDefault();
-        if (event.deltaY > 0) {
-            this.rootContext.handleIncrease();
+        root.allowInputSync = true;
+        const key = event.key;
+        if (key === 'ArrowUp' || key === 'ArrowDown') {
+            event.preventDefault();
+            const parsed = root.parseNumber(root.inputValue());
+            const amount = root.getStepAmount(event);
+            root.incrementValue(amount, {
+                direction: key === 'ArrowUp' ? 1 : -1,
+                currentValue: parsed,
+                event,
+                reason: 'keyboard'
+            });
+            root.commitValue(root.lastChangedValue ?? root.currentValue());
         }
-        else if (event.deltaY < 0) {
-            this.rootContext.handleDecrease();
+        else if (key === 'Home' && root.min() != null) {
+            event.preventDefault();
+            root.setValue(root.min(), 'keyboard', event);
+            root.commitValue(root.lastChangedValue ?? root.currentValue());
+        }
+        else if (key === 'End' && root.max() != null) {
+            event.preventDefault();
+            root.setValue(root.max(), 'keyboard', event);
+            root.commitValue(root.lastChangedValue ?? root.currentValue());
         }
     }
-    onKeydownPageUp(event) {
-        event.preventDefault();
-        this.rootContext.handleIncrease(10);
-    }
-    onKeydownPageDown(event) {
-        event.preventDefault();
-        this.rootContext.handleDecrease(10);
-    }
-    onKeydownHome(event) {
-        event.preventDefault();
-        this.rootContext.handleMinMaxValue('min');
-    }
-    onKeydownEnd(event) {
+    onPaste(event) {
+        const root = this.rootContext;
+        if (root.readonly() || root.isDisabled()) {
+            return;
+        }
+        const pastedData = event.clipboardData?.getData('text/plain') ?? '';
+        // Prevent the subsequent `input` event from also handling the paste.
         event.preventDefault();
-        this.rootContext.handleMinMaxValue('max');
-    }
-    onInput(event) {
-        const target = event.target;
-        this.rootContext.applyInputValue(target.value);
-    }
-    onChange() {
-        this.inputValue.set(this.rootContext.textValue());
-    }
-    onKeydownEnter(event) {
-        const target = event.target;
-        this.rootContext.applyInputValue(target.value);
+        const parsedValue = root.parseNumber(pastedData);
+        if (parsedValue !== null) {
+            root.allowInputSync = false;
+            root.setValue(parsedValue, 'input-paste', event);
+            root.setInputValue(pastedData);
+        }
     }
-    onKeydownUp(event) {
-        event.preventDefault();
-        this.rootContext.handleIncrease();
+    onBlur(event) {
+        const root = this.rootContext;
+        if (root.readonly() || root.isDisabled()) {
+            return;
+        }
+        root.markAsTouched();
+        const hadManualInput = !root.allowInputSync;
+        const hadPendingCommit = root.hasPendingCommit;
+        root.allowInputSync = true;
+        const text = root.inputValue();
+        if (text.trim() === '') {
+            root.setValue(null, 'input-clear', event);
+            root.commitValue(null);
+            return;
+        }
+        const parsedValue = root.parseNumber(text);
+        if (parsedValue === null) {
+            return;
+        }
+        const value = root.currentValue();
+        const shouldUpdate = value !== parsedValue;
+        const shouldCommit = hadManualInput || shouldUpdate || hadPendingCommit;
+        let committedValue = parsedValue;
+        if (shouldUpdate) {
+            root.setValue(parsedValue, 'input-blur', event);
+            committedValue = root.lastChangedValue ?? parsedValue;
+        }
+        if (shouldCommit) {
+            root.commitValue(committedValue);
+        }
+        const canonicalText = root.formatNumber(committedValue);
+        if (root.inputValue() !== canonicalText) {
+            root.setInputValue(canonicalText);
+        }
     }
-    onKeydownDown(event) {
+    onWheel(event) {
+        const root = this.rootContext;
+        if (!root.allowWheelScrub() || root.isDisabled() || root.readonly()) {
+            return;
+        }
+        // Allow pinch-zoom and only scrub while focused.
+        if (event.ctrlKey || getActiveElement() !== this.elementRef.nativeElement) {
+            return;
+        }
         event.preventDefault();
-        this.rootContext.handleDecrease();
+        root.allowInputSync = true;
+        const amount = root.getStepAmount(event);
+        root.incrementValue(amount, {
+            direction: event.deltaY > 0 ? -1 : 1,
+            event,
+            reason: 'wheel'
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldInputDirective, isStandalone: true, selector: "input[rdxNumberFieldInput]", host: { attributes: { "role": "spinbutton", "type": "text", "tabindex": "0", "autocomplete": "off", "autocorrect": "off", "spellcheck": "false", "aria-roledescription": "Number field" }, listeners: { "change": "onChange()", "input": "onInput($event)", "blur": "onKeydownEnter($event)", "beforeinput": "onBeforeInput($event)", "keydown.enter": "onKeydownEnter($event)", "keydown.arrowUp": "onKeydownUp($event)", "keydown.arrowDown": "onKeydownDown($event)", "keydown.home": "onKeydownHome($event)", "keydown.end": "onKeydownEnd($event)", "keydown.pageUp": "onKeydownPageUp($event)", "keydown.pageDown": "onKeydownPageDown($event)", "wheel": "onWheelEvent($event)" }, properties: { "attr.aria-valuenow": "rootContext.value()", "attr.aria-valuemin": "rootContext.min()", "attr.aria-valuemax": "rootContext.max()", "attr.inputmode": "rootContext.inputMode()", "attr.disabled": "rootContext.disabled() ? \"\" : undefined", "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "attr.readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.value": "inputValue()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldInput, isStandalone: true, selector: "input[rdxNumberFieldInput]", host: { attributes: { "type": "text", "autocomplete": "off", "autocorrect": "off", "spellcheck": "false", "aria-roledescription": "Number field" }, listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "input": "onInput($event)", "beforeinput": "onBeforeInput($event)", "keydown": "onKeydown($event)", "paste": "onPaste($event)", "wheel": "onWheel($event)" }, properties: { "id": "rootContext.id()", "value": "rootContext.inputValue()", "attr.inputmode": "rootContext.inputMode()", "attr.aria-invalid": "rootContext.required() && rootContext.currentValue() === null ? \"true\" : undefined", "disabled": "rootContext.isDisabled()", "attr.readonly": "rootContext.readonly() ? \"\" : undefined", "required": "rootContext.required()", "attr.data-disabled": "rootContext.isDisabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-required": "rootContext.required() ? \"\" : undefined" } }, exportAs: ["rdxNumberFieldInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[rdxNumberFieldInput]',
+                    exportAs: 'rdxNumberFieldInput',
                     host: {
-                        role: 'spinbutton',
                         type: 'text',
-                        tabindex: '0',
                         autocomplete: 'off',
                         autocorrect: 'off',
                         spellcheck: 'false',
                         'aria-roledescription': 'Number field',
-                        '[attr.aria-valuenow]': 'rootContext.value()',
-                        '[attr.aria-valuemin]': 'rootContext.min()',
-                        '[attr.aria-valuemax]': 'rootContext.max()',
+                        '[id]': 'rootContext.id()',
+                        '[value]': 'rootContext.inputValue()',
                         '[attr.inputmode]': 'rootContext.inputMode()',
-                        '[attr.disabled]': 'rootContext.disabled() ? "" : undefined',
-                        '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
+                        '[attr.aria-invalid]': 'rootContext.required() && rootContext.currentValue() === null ? "true" : undefined',
+                        '[disabled]': 'rootContext.isDisabled()',
                         '[attr.readonly]': 'rootContext.readonly() ? "" : undefined',
+                        '[required]': 'rootContext.required()',
+                        '[attr.data-disabled]': 'rootContext.isDisabled() ? "" : undefined',
                         '[attr.data-readonly]': 'rootContext.readonly() ? "" : undefined',
-                        '[attr.value]': 'inputValue()',
-                        '(change)': 'onChange()',
+                        '[attr.data-required]': 'rootContext.required() ? "" : undefined',
+                        '(focus)': 'onFocus($event)',
+                        '(blur)': 'onBlur($event)',
                         '(input)': 'onInput($event)',
-                        '(blur)': 'onKeydownEnter($event)',
                         '(beforeinput)': 'onBeforeInput($event)',
-                        '(keydown.enter)': 'onKeydownEnter($event)',
-                        '(keydown.arrowUp)': 'onKeydownUp($event)',
-                        '(keydown.arrowDown)': 'onKeydownDown($event)',
-                        '(keydown.home)': 'onKeydownHome($event)',
-                        '(keydown.end)': 'onKeydownEnd($event)',
-                        '(keydown.pageUp)': 'onKeydownPageUp($event)',
-                        '(keydown.pageDown)': 'onKeydownPageDown($event)',
-                        '(wheel)': 'onWheelEvent($event)'
+                        '(keydown)': 'onKeydown($event)',
+                        '(paste)': 'onPaste($event)',
+                        '(wheel)': 'onWheel($event)'
                     }
                 }]
         }], ctorParameters: () => [] });
 
-class RdxNumberFieldRootDirective {
+const REASONS = {
+    inputChange: 'input-change',
+    inputClear: 'input-clear',
+    inputBlur: 'input-blur',
+    inputPaste: 'input-paste',
+    keyboard: 'keyboard',
+    incrementPress: 'increment-press',
+    decrementPress: 'decrement-press',
+    wheel: 'wheel',
+    scrub: 'scrub',
+    none: 'none'
+};
+
+const INPUT_REASONS = [
+    REASONS.inputChange,
+    REASONS.inputClear,
+    REASONS.inputBlur,
+    REASONS.inputPaste,
+    REASONS.none
+];
+/**
+ * Groups all parts of the number field and manages its state, parsing/formatting
+ * and value-change logic. A single directive drives the whole family — parts read
+ * signals and call methods off it through the root context.
+ *
+ * @see https://base-ui.com/react/components/number-field
+ */
+class RdxNumberFieldRoot {
     constructor() {
-        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** @ignore */
+        this.cva = injectControlValueAccessor();
+        /** The id of the input element. */
+        this.id = input(injectId('rdx-number-field-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** The minimum value of the field. */
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
+        /** The maximum value of the field. */
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
+        /**
+         * Amount to increment and decrement with the buttons, arrow keys and scrub area.
+         * @default 1
+         */
         this.step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.stepSnapping = input(false, { ...(ngDevMode ? { debugName: "stepSnapping" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.disableWheelChange = input(false, { ...(ngDevMode ? { debugName: "disableWheelChange" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.locale = input('en', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.formatOptions = input(...(ngDevMode ? [undefined, { debugName: "formatOptions" }] : /* istanbul ignore next */ []));
         /**
-         * When <code>true</code>, the Number Field is read-only.
+         * The step used when incrementing while the Alt key is held. Snaps to multiples of this value.
+         * @default 0.1
          */
-        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.smallStep = input(0.1, { ...(ngDevMode ? { debugName: "smallStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * @ignore
+         * The step used when incrementing while the Shift key is held. Snaps to multiples of this value.
+         * @default 10
          */
-        this.inputEl = signal(undefined, ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+        this.largeStep = input(10, { ...(ngDevMode ? { debugName: "largeStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * @ignore
+         * Whether the value should snap to the nearest step when incrementing or decrementing.
+         * @default false
          */
-        this.isDecreaseDisabled = computed(() => !isNullish(this.value()) &&
-            (this.clampInputValue(this.value()) === this.min() || (this.min() && !isNaN(this.value()))
-                ? handleDecimalOperation('-', this.value(), this.step()) < this.min()
-                : false), ...(ngDevMode ? [{ debugName: "isDecreaseDisabled" }] : /* istanbul ignore next */ []));
+        this.snapOnStep = input(false, { ...(ngDevMode ? { debugName: "snapOnStep" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @ignore
+         * When `true`, direct text entry may go outside the `min`/`max` range without clamping.
+         * Step interactions (arrow keys, buttons, wheel, scrub) still clamp.
+         * @default false
          */
-        this.isIncreaseDisabled = computed(() => !isNullish(this.value()) &&
-            (this.clampInputValue(this.value()) === this.max() || (this.min() && !isNaN(this.value()))
-                ? handleDecimalOperation('+', this.value(), this.step()) > this.max()
-                : false), ...(ngDevMode ? [{ debugName: "isIncreaseDisabled" }] : /* istanbul ignore next */ []));
+        this.allowOutOfRange = input(false, { ...(ngDevMode ? { debugName: "allowOutOfRange" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @ignore
+         * Whether the value can be changed with the mouse wheel while the input is focused.
+         * @default false
          */
-        this.inputMode = computed(() => {
-            // The inputMode attribute influences the software keyboard that is shown on touch devices.
-            // Browsers and operating systems are quite inconsistent about what keys are available, however.
-            // We choose between numeric and decimal based on whether we allow negative and fractional numbers,
-            // and based on testing on various devices to determine what keys are available in each inputMode.
-            const hasDecimals = this.numberFormatter().resolvedOptions().maximumFractionDigits > 0;
-            return hasDecimals ? 'decimal' : 'numeric';
-        }, ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
+        this.allowWheelScrub = input(false, { ...(ngDevMode ? { debugName: "allowWheelScrub" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Options used to format the input value (forwarded to `Intl.NumberFormat`). */
+        this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
+        /** The locale used to parse and format the value. */
+        this.locale = input('en', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
         /**
-         * Replace negative textValue formatted using currencySign: 'accounting'
-         * with a textValue that can be announced using a minus sign.
-         * @ignore
+         * When `true`, the user cannot interact with the field.
+         * @default false
          */
-        this.textValue = computed(() => isNullish(this.value()) || isNaN(this.value()) ? '' : this.textValueFormatter().format(this.value()), ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * When `true`, the field is focusable but its value cannot be changed.
+         * @default false
+         */
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * When `true`, the user must enter a value before the owning form can be submitted.
+         * @default false
+         */
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Name of the hidden input rendered by `[rdxNumberFieldHiddenInput]`, for form submission. */
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        /** Id of the form the hidden input belongs to. Useful when it is rendered outside the form. */
+        this.form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
+        /** The uncontrolled value of the field when it is initially rendered. */
+        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        /** The controlled value of the field. Use with `(onValueChange)` or two-way `[(value)]`. */
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Emitted when the value changes (during interaction or programmatically). */
+        this.onValueChange = output();
         /**
-         * @ignore
+         * Emitted when the value is committed: on blur after typing, or when a pointer is released
+         * after scrubbing or pressing a button. Fires together with `onValueChange` for keyboard input.
          */
-        this.onInputElement = (el) => this.inputEl.set(el);
+        this.onValueCommitted = output();
+        /** @ignore The formatted text shown in the input element. */
+        this.inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
+        /** @ignore Whether a scrub gesture is in progress. */
+        this.isScrubbing = signal(false, ...(ngDevMode ? [{ debugName: "isScrubbing" }] : /* istanbul ignore next */ []));
+        /** @ignore The native input element, registered by `[rdxNumberFieldInput]`. */
+        this.inputEl = signal(undefined, ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+        /**
+         * @ignore Gate that prevents the formatted value from overwriting in-progress typing.
+         * Plain field (not a signal): it is toggled imperatively inside event handlers.
+         */
+        this.allowInputSync = true;
+        /** @ignore Last value produced by `setValue`, used to report the committed value. */
+        this.lastChangedValue = null;
+        /** @ignore Whether a programmatic change is awaiting a commit. */
+        this.hasPendingCommit = false;
+        /** @ignore */
+        this.isDisabled = computed(() => !!this.cva.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.formatter = useNumberFormatter(this.locale, this.format);
+        this.parser = useNumberParser(this.locale, this.format);
+        /** @ignore The current numeric value (`null` when empty). */
+        this.currentValue = computed(() => this.cva.value() ?? null, ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.minWithDefault = computed(() => this.min() ?? Number.MIN_SAFE_INTEGER, ...(ngDevMode ? [{ debugName: "minWithDefault" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.maxWithDefault = computed(() => this.max() ?? Number.MAX_SAFE_INTEGER, ...(ngDevMode ? [{ debugName: "maxWithDefault" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.minWithZeroDefault = computed(() => this.min() ?? 0, ...(ngDevMode ? [{ debugName: "minWithZeroDefault" }] : /* istanbul ignore next */ []));
+        /** @ignore Whether incrementing further is a no-op (value already at max). */
+        this.isIncrementDisabled = computed(() => {
+            const value = this.currentValue();
+            return value != null && value >= this.maxWithDefault();
+        }, ...(ngDevMode ? [{ debugName: "isIncrementDisabled" }] : /* istanbul ignore next */ []));
+        /** @ignore Whether decrementing further is a no-op (value already at min). */
+        this.isDecrementDisabled = computed(() => {
+            const value = this.currentValue();
+            return value != null && value <= this.minWithDefault();
+        }, ...(ngDevMode ? [{ debugName: "isDecrementDisabled" }] : /* istanbul ignore next */ []));
+        /** @ignore Software-keyboard hint based on whether the format allows fractional digits. */
+        this.inputMode = computed(() => {
+            const hasDecimals = (this.formatter().resolvedOptions().maximumFractionDigits ?? 0) > 0;
+            return hasDecimals ? 'decimal' : 'numeric';
+        }, ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
+        // Apply the uncontrolled initial value once it is provided.
+        effect(() => {
+            const dv = this.defaultValue();
+            if (dv !== undefined) {
+                untracked(() => {
+                    this.value.set(dv);
+                    this.cva.setValue(dv);
+                });
+            }
+        });
+        // Keep the visible input in sync with the value whenever it changes externally or the
+        // formatting options change. Skipped while the user is typing (`allowInputSync === false`).
+        effect(() => {
+            const formatted = this.formatNumber(this.currentValue());
+            untracked(() => {
+                if (this.allowInputSync && this.inputValue() !== formatted) {
+                    this.inputValue.set(formatted);
+                }
+            });
+        });
     }
-    /**
-     * @ignore
-     */
-    clampInputValue(val) {
-        // Clamp to min and max, round to the nearest step, and round to the specified number of digits
-        let clampedValue;
-        if (this.step() === undefined || isNaN(this.step()) || !this.stepSnapping()) {
-            clampedValue = clamp(val, this.min(), this.max());
-        }
-        else {
-            clampedValue = snapValueToStep(val, this.min(), this.max(), this.step());
+    /** @ignore Formats a numeric value to its display string (empty for `null`/`NaN`). */
+    formatNumber(value) {
+        if (value === null || Number.isNaN(value)) {
+            return '';
         }
-        clampedValue = this.numberParser().parse(this.numberFormatter().format(clampedValue));
-        return clampedValue;
+        return this.formatter().format(value);
     }
-    ngOnInit() {
-        this.numberParser = useNumberParser(this.locale, this.formatOptions);
-        this.numberFormatter = useNumberFormatter(this.locale, this.formatOptions);
-        this.textValueFormatter = useNumberFormatter(this.locale, this.formatOptions);
+    /** @ignore Parses a display string to a number, returning `null` when not parseable. */
+    parseNumber(text) {
+        const parsed = this.parser().parse(text);
+        return Number.isNaN(parsed) ? null : parsed;
     }
-    /**
-     * @ignore
-     */
-    handleMinMaxValue(type) {
-        if (type === 'min' && this.min() !== undefined) {
-            this.value.set(this.clampInputValue(this.min()));
+    /** @ignore Whether `text` is a valid partial number for the current locale and bounds. */
+    isValidPartial(text) {
+        return this.parser().isValidPartialNumber(text, this.min(), this.max());
+    }
+    /** @ignore The step magnitude for an interaction, honouring Alt (small) and Shift (large). */
+    getStepAmount(event) {
+        if (event?.altKey) {
+            return this.smallStep();
         }
-        else if (type === 'max' && this.max() !== undefined) {
-            this.value.set(this.clampInputValue(this.max()));
+        if (event?.shiftKey) {
+            return this.largeStep();
         }
+        return this.step();
     }
-    /**
-     * @ignore
-     */
-    handleDecrease(multiplier = 1) {
-        this.handleChangingValue('decrease', multiplier);
+    /** @ignore Registers the native input element. */
+    registerInput(el) {
+        this.inputEl.set(el);
     }
-    /**
-     * @ignore
-     */
-    handleIncrease(multiplier = 1) {
-        this.handleChangingValue('increase', multiplier);
+    /** @ignore Sets the displayed text without changing the numeric value. */
+    setInputValue(text) {
+        this.inputValue.set(text);
+    }
+    /** @ignore */
+    markAsTouched() {
+        this.cva.markAsTouched();
     }
     /**
      * @ignore
+     * Validates and applies a candidate value, emitting `onValueChange` when it changes.
+     * Returns whether a change was fired.
      */
-    applyInputValue(val) {
-        const parsedValue = this.numberParser().parse(val);
-        this.value.set(isNaN(parsedValue) ? undefined : this.clampInputValue(parsedValue));
-        // Set to empty state if input value is empty
-        if (!val.length) {
-            return this.setInputValue(val);
+    setValue(unvalidatedValue, reason, event, direction) {
+        const keyState = event;
+        // Step interactions always clamp; direct text entry may go out of range when allowed.
+        const shouldClamp = !this.allowOutOfRange() || !INPUT_REASONS.includes(reason);
+        const validatedValue = toValidatedNumber(unvalidatedValue, {
+            step: direction ? this.getStepAmount(keyState) * direction : undefined,
+            minWithDefault: this.minWithDefault(),
+            maxWithDefault: this.maxWithDefault(),
+            minWithZeroDefault: this.minWithZeroDefault(),
+            format: this.format(),
+            locale: this.locale(),
+            snapOnStep: this.snapOnStep(),
+            small: keyState?.altKey ?? false,
+            clamp: shouldClamp
+        });
+        const value = this.currentValue();
+        const isInputReason = INPUT_REASONS.includes(reason);
+        const shouldFireChange = validatedValue !== value ||
+            (isInputReason && (unvalidatedValue !== value || this.allowInputSync === false));
+        if (shouldFireChange) {
+            this.applyValue(validatedValue);
+            this.onValueChange.emit(validatedValue);
+            this.hasPendingCommit = true;
         }
-        // if it failed to parse, then reset input to formatted version of current number
-        if (isNaN(parsedValue)) {
-            return this.setInputValue(this.textValue());
+        this.lastChangedValue = validatedValue;
+        if (this.allowInputSync) {
+            this.setInputValue(this.formatNumber(validatedValue));
         }
-        return this.setInputValue(this.textValue());
+        return shouldFireChange;
     }
     /**
      * @ignore
+     * Increments (or decrements) the value by `amount * direction`, starting from `currentValue`
+     * when supplied (the live, possibly-dirty input value) or the committed value otherwise.
      */
-    setInputValue(val) {
-        if (this.inputEl()) {
-            this.inputEl.update((el) => {
-                if (el)
-                    el.value = val;
-                return el;
-            });
-        }
+    incrementValue(amount, params) {
+        const prev = params.currentValue == null ? this.currentValue() : params.currentValue;
+        const nextValue = typeof prev === 'number' ? prev + amount * params.direction : Math.max(0, this.min() ?? 0);
+        return this.setValue(nextValue, params.reason, params.event, params.direction);
     }
-    /**
-     * @ignore
-     */
-    validate(val) {
-        return this.numberParser().isValidPartialNumber(val, this.min(), this.max());
+    /** @ignore Emits the committed value at the end of an interaction. */
+    commitValue(value) {
+        this.hasPendingCommit = false;
+        this.onValueCommitted.emit(value);
     }
-    handleChangingValue(type, multiplier = 1) {
-        this.inputEl()?.focus();
-        if (this.disabled() || this.readonly()) {
+    applyValue(value) {
+        this.value.set(value);
+        this.cva.setValue(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNumberFieldRoot, isStandalone: true, selector: "div[rdxNumberFieldRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, smallStep: { classPropertyName: "smallStep", publicName: "smallStep", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, snapOnStep: { classPropertyName: "snapOnStep", publicName: "snapOnStep", isSignal: true, isRequired: false, transformFunction: null }, allowOutOfRange: { classPropertyName: "allowOutOfRange", publicName: "allowOutOfRange", isSignal: true, isRequired: false, transformFunction: null }, allowWheelScrub: { classPropertyName: "allowWheelScrub", publicName: "allowWheelScrub", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onValueCommitted: "onValueCommitted" }, host: { attributes: { "role": "group" }, properties: { "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-readonly": "readonly() ? \"\" : undefined", "attr.data-required": "required() ? \"\" : undefined", "attr.data-scrubbing": "isScrubbing() ? \"\" : undefined" } }, providers: [provideNumberFieldRootContext(() => inject(RdxNumberFieldRoot))], exportAs: ["rdxNumberFieldRoot"], hostDirectives: [{ directive: i1.RdxControlValueAccessor, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[rdxNumberFieldRoot]',
+                    exportAs: 'rdxNumberFieldRoot',
+                    providers: [provideNumberFieldRootContext(() => inject(RdxNumberFieldRoot))],
+                    hostDirectives: [
+                        {
+                            directive: RdxControlValueAccessor,
+                            inputs: ['value: value', 'disabled']
+                        }
+                    ],
+                    host: {
+                        role: 'group',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
+                        '[attr.data-readonly]': 'readonly() ? "" : undefined',
+                        '[attr.data-required]': 'required() ? "" : undefined',
+                        '[attr.data-scrubbing]': 'isScrubbing() ? "" : undefined'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], smallStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "smallStep", required: false }] }], largeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeStep", required: false }] }], snapOnStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapOnStep", required: false }] }], allowOutOfRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOutOfRange", required: false }] }], allowWheelScrub: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowWheelScrub", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onValueCommitted: [{ type: i0.Output, args: ["onValueCommitted"] }] } });
+
+/**
+ * Context shared from the scrub area to its virtual cursor child.
+ *
+ * @see https://base-ui.com/react/components/number-field
+ */
+const [injectNumberFieldScrubAreaContext, provideNumberFieldScrubAreaContext] = createContext('RdxNumberFieldScrubAreaContext');
+
+function isWebKitBrowser$1() {
+    return (typeof navigator !== 'undefined' &&
+        /AppleWebKit/.test(navigator.userAgent) &&
+        !/Chrome/.test(navigator.userAgent));
+}
+function isFirefoxBrowser() {
+    return typeof navigator !== 'undefined' && /firefox/i.test(navigator.userAgent);
+}
+/** Calculates the viewport rect the virtual cursor loops within. */
+function getViewportRect(teleportDistance, scrubAreaEl) {
+    const win = scrubAreaEl.ownerDocument.defaultView ?? window;
+    const rect = scrubAreaEl.getBoundingClientRect();
+    if (rect && teleportDistance != null) {
+        return {
+            x: rect.left - teleportDistance / 2,
+            y: rect.top - teleportDistance / 2,
+            width: rect.right + teleportDistance / 2,
+            height: rect.bottom + teleportDistance / 2
+        };
+    }
+    const vV = win.visualViewport;
+    if (vV) {
+        return { x: vV.offsetLeft, y: vV.offsetTop, width: vV.offsetLeft + vV.width, height: vV.offsetTop + vV.height };
+    }
+    return {
+        x: 0,
+        y: 0,
+        width: win.document.documentElement.clientWidth,
+        height: win.document.documentElement.clientHeight
+    };
+}
+/**
+ * An interactive area where the user can click and drag to change the field value.
+ * Uses the Pointer Lock API for continuous dragging (disabled in Safari to avoid layout shift).
+ *
+ * @see https://base-ui.com/react/components/number-field
+ */
+class RdxNumberFieldScrubArea {
+    constructor() {
+        this.rootContext = injectNumberFieldRootContext();
+        /**
+         * The direction the cursor must move to change the value.
+         * @default 'horizontal'
+         */
+        this.direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        /**
+         * How many pixels the cursor must move before the value changes. Higher is less sensitive.
+         * @default 2
+         */
+        this.pixelSensitivity = input(2, { ...(ngDevMode ? { debugName: "pixelSensitivity" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * If set, the distance the cursor may move from the scrub area center before it loops back.
+         */
+        this.teleportDistance = input(undefined, { ...(ngDevMode ? { debugName: "teleportDistance" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
+        this.isScrubbing = signal(false, ...(ngDevMode ? [{ debugName: "isScrubbing" }] : /* istanbul ignore next */ []));
+        this.isTouchInput = signal(false, ...(ngDevMode ? [{ debugName: "isTouchInput" }] : /* istanbul ignore next */ []));
+        this.isPointerLockDenied = signal(false, ...(ngDevMode ? [{ debugName: "isPointerLockDenied" }] : /* istanbul ignore next */ []));
+        this.cursorEl = signal(null, ...(ngDevMode ? [{ debugName: "cursorEl" }] : /* istanbul ignore next */ []));
+        this.scrubAreaEl = inject(ElementRef).nativeElement;
+        this.isScrubbingRef = false;
+        this.didMove = false;
+        this.pointerDownTarget = null;
+        this.virtualCursorCoords = { x: 0, y: 0 };
+        this.visualScale = 1;
+        /** @ignore Exposed to the scrub-area context provider. */
+        this.context = {
+            isScrubbing: this.isScrubbing.asReadonly(),
+            isTouchInput: this.isTouchInput.asReadonly(),
+            isPointerLockDenied: this.isPointerLockDenied.asReadonly(),
+            registerCursor: (el) => this.cursorEl.set(el)
+        };
+        this.canScrub = computed(() => !this.rootContext.isDisabled() && !this.rootContext.readonly(), ...(ngDevMode ? [{ debugName: "canScrub" }] : /* istanbul ignore next */ []));
+        const root = this.rootContext;
+        // Register global listeners only while actively scrubbing.
+        effect((onCleanup) => {
+            if (!root.inputEl() || !this.canScrub() || !this.isScrubbing()) {
+                return;
+            }
+            let cumulativeDelta = 0;
+            const handlePointerMove = (event) => {
+                if (!this.isScrubbingRef) {
+                    return;
+                }
+                event.preventDefault();
+                this.onScrub(event);
+                const { movementX, movementY } = event;
+                cumulativeDelta += this.direction() === 'vertical' ? movementY : movementX;
+                if (Math.abs(cumulativeDelta) >= this.pixelSensitivity()) {
+                    cumulativeDelta = 0;
+                    this.didMove = true;
+                    const dValue = this.direction() === 'vertical' ? -movementY : movementX;
+                    const stepAmount = root.getStepAmount(event);
+                    const rawAmount = dValue * stepAmount;
+                    if (rawAmount !== 0) {
+                        root.allowInputSync = true;
+                        root.incrementValue(Math.abs(rawAmount), {
+                            direction: rawAmount >= 0 ? 1 : -1,
+                            event,
+                            reason: 'scrub'
+                        });
+                    }
+                }
+            };
+            const handlePointerUp = (event) => {
+                const finish = () => {
+                    try {
+                        this.scrubAreaEl.ownerDocument.exitPointerLock();
+                    }
+                    catch {
+                        // Ignore — pointer lock may not be active.
+                    }
+                    this.isScrubbingRef = false;
+                    this.onScrubbingChange(false, event);
+                    root.commitValue(root.lastChangedValue ?? root.currentValue());
+                    // Manually dispatch a click when no movement happened, since preventDefault on
+                    // pointerdown suppresses the browser's synthetic click.
+                    if (!this.didMove && this.pointerDownTarget && root.inputEl()) {
+                        this.pointerDownTarget.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+                    }
+                    this.didMove = false;
+                    this.pointerDownTarget = null;
+                };
+                if (isFirefoxBrowser()) {
+                    // Firefox needs a small delay or pointer lock won't release on a soft click.
+                    setTimeout(finish, 20);
+                }
+                else {
+                    finish();
+                }
+            };
+            const win = this.scrubAreaEl.ownerDocument.defaultView ?? window;
+            const vV = win.visualViewport;
+            const handleVisualResize = () => {
+                if (vV) {
+                    this.visualScale = vV.scale;
+                }
+            };
+            handleVisualResize();
+            win.addEventListener('pointermove', handlePointerMove, true);
+            win.addEventListener('pointerup', handlePointerUp, true);
+            win.addEventListener('pointercancel', handlePointerUp, true);
+            vV?.addEventListener('resize', handleVisualResize);
+            onCleanup(() => {
+                win.removeEventListener('pointermove', handlePointerMove, true);
+                win.removeEventListener('pointerup', handlePointerUp, true);
+                win.removeEventListener('pointercancel', handlePointerUp, true);
+                vV?.removeEventListener('resize', handleVisualResize);
+            });
+        });
+    }
+    async onPointerDown(event) {
+        const isMainButton = !event.button || event.button === 0;
+        if (event.defaultPrevented || !isMainButton || !this.canScrub()) {
             return;
         }
-        const currentInputValue = this.numberParser().parse(this.inputEl()?.value ?? '');
-        if (isNaN(currentInputValue)) {
-            this.value.set(this.min() ?? 0);
+        const isTouch = event.pointerType === 'touch';
+        this.isTouchInput.set(isTouch);
+        if (event.pointerType === 'mouse') {
+            event.preventDefault();
+            this.rootContext.inputEl()?.focus();
         }
-        else {
-            if (type === 'increase') {
-                this.value.set(this.clampInputValue(currentInputValue + (this.step() ?? 1) * multiplier));
+        this.isScrubbingRef = true;
+        this.didMove = false;
+        this.pointerDownTarget = event.target;
+        this.onScrubbingChange(true, event);
+        // WebKit causes significant layout shift with the native pointer-lock message.
+        if (!isTouch && !isWebKitBrowser$1()) {
+            try {
+                await this.scrubAreaEl.ownerDocument.body.requestPointerLock();
+                this.isPointerLockDenied.set(false);
             }
-            else {
-                this.value.set(this.clampInputValue(currentInputValue - (this.step() ?? 1) * multiplier));
+            catch {
+                this.isPointerLockDenied.set(true);
             }
+            finally {
+                if (this.isScrubbingRef) {
+                    this.onScrubbingChange(true, event);
+                }
+            }
+        }
+    }
+    onTouchStart(event) {
+        if (!this.canScrub()) {
+            return;
+        }
+        // Prevent scrolling using touch input when scrubbing.
+        if (event.touches.length === 1) {
+            event.preventDefault();
+        }
+    }
+    onScrub(event) {
+        const cursor = this.cursorEl();
+        if (!cursor) {
+            return;
+        }
+        const rect = getViewportRect(this.teleportDistance(), this.scrubAreaEl);
+        const coords = this.virtualCursorCoords;
+        const newCoords = { x: Math.round(coords.x + event.movementX), y: Math.round(coords.y + event.movementY) };
+        const cursorWidth = cursor.offsetWidth;
+        const cursorHeight = cursor.offsetHeight;
+        if (newCoords.x + cursorWidth / 2 < rect.x) {
+            newCoords.x = rect.width - cursorWidth / 2;
+        }
+        else if (newCoords.x + cursorWidth / 2 > rect.width) {
+            newCoords.x = rect.x - cursorWidth / 2;
+        }
+        if (newCoords.y + cursorHeight / 2 < rect.y) {
+            newCoords.y = rect.height - cursorHeight / 2;
+        }
+        else if (newCoords.y + cursorHeight / 2 > rect.height) {
+            newCoords.y = rect.y - cursorHeight / 2;
+        }
+        this.virtualCursorCoords = newCoords;
+        this.updateCursorTransform(newCoords.x, newCoords.y);
+    }
+    onScrubbingChange(scrubbing, event) {
+        this.isScrubbing.set(scrubbing);
+        this.rootContext.isScrubbing.set(scrubbing);
+        const cursor = this.cursorEl();
+        if (!cursor || !scrubbing) {
+            return;
+        }
+        const initialCoords = {
+            x: event.clientX - cursor.offsetWidth / 2,
+            y: event.clientY - cursor.offsetHeight / 2
+        };
+        this.virtualCursorCoords = initialCoords;
+        this.updateCursorTransform(initialCoords.x, initialCoords.y);
+    }
+    updateCursorTransform(x, y) {
+        const cursor = this.cursorEl();
+        if (cursor) {
+            cursor.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / this.visualScale})`;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNumberFieldRootDirective, isStandalone: true, selector: "[rdxNumberFieldRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, stepSnapping: { classPropertyName: "stepSnapping", publicName: "stepSnapping", isSignal: true, isRequired: false, transformFunction: null }, disableWheelChange: { classPropertyName: "disableWheelChange", publicName: "disableWheelChange", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formatOptions: { classPropertyName: "formatOptions", publicName: "formatOptions", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-readonly": "readonly() ? \"\" : undefined" } }, providers: [provideToken(NUMBER_FIELD_ROOT_CONTEXT, RdxNumberFieldRootDirective)], exportAs: ["rdxNumberFieldRoot"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldScrubArea, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNumberFieldScrubArea, isStandalone: true, selector: "[rdxNumberFieldScrubArea]", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, pixelSensitivity: { classPropertyName: "pixelSensitivity", publicName: "pixelSensitivity", isSignal: true, isRequired: false, transformFunction: null }, teleportDistance: { classPropertyName: "teleportDistance", publicName: "teleportDistance", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, listeners: { "pointerdown": "onPointerDown($event)", "touchstart": "onTouchStart($event)" }, properties: { "style.touch-action": "\"none\"", "style.user-select": "\"none\"", "style.-webkit-user-select": "\"none\"", "attr.data-disabled": "rootContext.isDisabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-scrubbing": "isScrubbing() ? \"\" : undefined" } }, providers: [provideNumberFieldScrubAreaContext(() => inject(RdxNumberFieldScrubArea).context)], exportAs: ["rdxNumberFieldScrubArea"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldScrubArea, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxNumberFieldRoot]',
-                    exportAs: 'rdxNumberFieldRoot',
-                    providers: [provideToken(NUMBER_FIELD_ROOT_CONTEXT, RdxNumberFieldRootDirective)],
+                    selector: '[rdxNumberFieldScrubArea]',
+                    exportAs: 'rdxNumberFieldScrubArea',
+                    providers: [provideNumberFieldScrubAreaContext(() => inject(RdxNumberFieldScrubArea).context)],
                     host: {
-                        role: 'group',
-                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
-                        '[attr.data-readonly]': 'readonly() ? "" : undefined'
+                        role: 'presentation',
+                        '[style.touch-action]': '"none"',
+                        '[style.user-select]': '"none"',
+                        '[style.-webkit-user-select]': '"none"',
+                        '[attr.data-disabled]': 'rootContext.isDisabled() ? "" : undefined',
+                        '[attr.data-readonly]': 'rootContext.readonly() ? "" : undefined',
+                        '[attr.data-scrubbing]': 'isScrubbing() ? "" : undefined',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(touchstart)': 'onTouchStart($event)'
                     }
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], stepSnapping: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepSnapping", required: false }] }], disableWheelChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableWheelChange", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], formatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOptions", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], pixelSensitivity: [{ type: i0.Input, args: [{ isSignal: true, alias: "pixelSensitivity", required: false }] }], teleportDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "teleportDistance", required: false }] }] } });
+
+function isWebKitBrowser() {
+    return (typeof navigator !== 'undefined' &&
+        /AppleWebKit/.test(navigator.userAgent) &&
+        !/Chrome/.test(navigator.userAgent));
+}
+/**
+ * A custom element shown instead of the native cursor while scrubbing. It is portaled to the
+ * document body and positioned with the Pointer Lock API. Hidden in Safari (which would shift
+ * layout with the native pointer-lock notification) and for touch input.
+ *
+ * @see https://base-ui.com/react/components/number-field
+ */
+class RdxNumberFieldScrubAreaCursor {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.scrubContext = injectNumberFieldScrubAreaContext();
+        this.shouldRender = computed(() => this.scrubContext.isScrubbing() &&
+            !isWebKitBrowser() &&
+            !this.scrubContext.isTouchInput() &&
+            !this.scrubContext.isPointerLockDenied(), ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
+        this.scrubContext.registerCursor(this.elementRef.nativeElement);
+        inject(DestroyRef).onDestroy(() => this.scrubContext.registerCursor(null));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldScrubAreaCursor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNumberFieldScrubAreaCursor, isStandalone: true, selector: "[rdxNumberFieldScrubAreaCursor]", host: { attributes: { "role": "presentation" }, properties: { "style.position": "\"fixed\"", "style.top.px": "0", "style.left.px": "0", "style.pointer-events": "\"none\"", "style.opacity": "shouldRender() ? \"1\" : \"0\"" } }, exportAs: ["rdxNumberFieldScrubAreaCursor"], hostDirectives: [{ directive: i1$1.RdxPortal }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldScrubAreaCursor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxNumberFieldScrubAreaCursor]',
+                    exportAs: 'rdxNumberFieldScrubAreaCursor',
+                    hostDirectives: [RdxPortal],
+                    host: {
+                        role: 'presentation',
+                        '[style.position]': '"fixed"',
+                        '[style.top.px]': '0',
+                        '[style.left.px]': '0',
+                        '[style.pointer-events]': '"none"',
+                        '[style.opacity]': 'shouldRender() ? "1" : "0"'
+                    }
+                }]
+        }], ctorParameters: () => [] });
 
 const _imports = [
-    RdxNumberFieldRootDirective,
-    RdxNumberFieldInputDirective,
-    RdxNumberFieldIncrementDirective,
-    RdxNumberFieldDecrementDirective
+    RdxNumberFieldRoot,
+    RdxNumberFieldGroup,
+    RdxNumberFieldInput,
+    RdxNumberFieldHiddenInput,
+    RdxNumberFieldIncrement,
+    RdxNumberFieldDecrement,
+    RdxNumberFieldScrubArea,
+    RdxNumberFieldScrubAreaCursor
 ];
 class RdxNumberFieldModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldModule, imports: [RdxNumberFieldRootDirective,
-            RdxNumberFieldInputDirective,
-            RdxNumberFieldIncrementDirective,
-            RdxNumberFieldDecrementDirective], exports: [RdxNumberFieldRootDirective,
-            RdxNumberFieldInputDirective,
-            RdxNumberFieldIncrementDirective,
-            RdxNumberFieldDecrementDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldModule, imports: [RdxNumberFieldRoot,
+            RdxNumberFieldGroup,
+            RdxNumberFieldInput,
+            RdxNumberFieldHiddenInput,
+            RdxNumberFieldIncrement,
+            RdxNumberFieldDecrement,
+            RdxNumberFieldScrubArea,
+            RdxNumberFieldScrubAreaCursor], exports: [RdxNumberFieldRoot,
+            RdxNumberFieldGroup,
+            RdxNumberFieldInput,
+            RdxNumberFieldHiddenInput,
+            RdxNumberFieldIncrement,
+            RdxNumberFieldDecrement,
+            RdxNumberFieldScrubArea,
+            RdxNumberFieldScrubAreaCursor] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNumberFieldModule, decorators: [{
@@ -512,5 +1247,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NUMBER_FIELD_ROOT_CONTEXT, PressedHoldService, RdxNumberFieldDecrementDirective, RdxNumberFieldIncrementDirective, RdxNumberFieldInputDirective, RdxNumberFieldModule, RdxNumberFieldRootDirective, handleDecimalOperation, injectNumberFieldRootContext, useNumberFormatter, useNumberParser };
+export { CHANGE_VALUE_TICK_DELAY, DEFAULT_STEP, REASONS, RdxNumberFieldButton, RdxNumberFieldDecrement, RdxNumberFieldGroup, RdxNumberFieldHiddenInput, RdxNumberFieldIncrement, RdxNumberFieldInput, RdxNumberFieldModule, RdxNumberFieldRoot, RdxNumberFieldScrubArea, RdxNumberFieldScrubAreaCursor, SCROLLING_POINTER_MOVE_DISTANCE, START_AUTO_CHANGE_DELAY, createPressAndHold, hasNumberFormatRoundingOptions, injectNumberFieldRootContext, injectNumberFieldScrubAreaContext, numberOrUndefined, provideNumberFieldRootContext, provideNumberFieldScrubAreaContext, removeFloatingPointErrors, toValidatedNumber, useNumberFormatter, useNumberParser };
 //# sourceMappingURL=radix-ng-primitives-number-field.mjs.map