@deepfuture/dui-components 0.0.14 → 0.0.16

package/number-field/number-field.js

@@ -44,6 +44,7 @@ import { base } from "@deepfuture/dui-core/base";
 import { customEvent } from "@deepfuture/dui-core/event";
 import { fieldContext } from "@deepfuture/dui-components/field";
 export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
+export const valueCommittedEvent = customEvent("value-committed", { bubbles: true, composed: true });
 /** Structural styles only — layout CSS. */
 const styles = css `
   :host {
@@ -51,8 +52,40 @@ const styles = css `
   }
 
   [part="root"] {
-    display: inline-flex;
+    display: flex;
     align-items: center;
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition-property: background, box-shadow, border-color, color, opacity;
+  }
+
+  [part="root"][data-scrub] {
+    cursor: ew-resize;
+  }
+
+  [part="root"][data-disabled] {
+    pointer-events: none;
+  }
+
+  [part="label"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  [part="label"][data-scrub] {
+    cursor: ew-resize;
+  }
+
+  [part="icon"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
   }
 
   [part="input"] {
@@ -62,32 +95,21 @@ const styles = css `
     background: none;
     font: inherit;
     color: inherit;
-    text-align: center;
     min-width: 0;
+    flex: 1;
+  }
+
+  [part="input"][data-scrub] {
+    cursor: ew-resize;
   }
 
   [part="input"]:disabled {
     cursor: not-allowed;
   }
 
-  [part="decrement"],
-  [part="increment"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border: none;
-    background: none;
-    padding: 0;
-    margin: 0;
-    font: inherit;
-    color: inherit;
+  [part="unit"] {
     flex-shrink: 0;
-  }
-
-  [part="decrement"]:disabled,
-  [part="increment"]:disabled {
-    cursor: not-allowed;
+    pointer-events: none;
   }
 
   .HiddenInput {
@@ -99,14 +121,21 @@ const styles = css `
     height: 0;
   }
 `;
+/** Drag threshold in px before scrub starts. */
+const DRAG_THRESHOLD = 3;
 /**
- * `<dui-number-field>` — A numeric input with increment/decrement buttons.
+ * `<dui-number-field>` — A numeric input with optional label, icon,
+ * unit suffix, drag-to-scrub behavior, and precision formatting.
+ *
+ * For simple step-up/step-down with buttons, use `<dui-stepper>` instead.
  *
  * @csspart root - The outer container.
+ * @csspart label - Label text element.
+ * @csspart icon - Icon slot wrapper.
  * @csspart input - The text input element.
- * @csspart decrement - The decrement button.
- * @csspart increment - The increment button.
+ * @csspart unit - Unit suffix element.
  * @fires value-change - Fired when value changes. Detail: { value: number }
+ * @fires value-committed - Fired on pointerup (end of drag), blur, or Enter. Detail: { value: number }
  */
 let DuiNumberField = (() => {
     let _classSuper = LitElement;
@@ -140,6 +169,39 @@ let DuiNumberField = (() => {
     let _name_decorators;
     let _name_initializers = [];
     let _name_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _labelPosition_decorators;
+    let _labelPosition_initializers = [];
+    let _labelPosition_extraInitializers = [];
+    let _iconPosition_decorators;
+    let _iconPosition_initializers = [];
+    let _iconPosition_extraInitializers = [];
+    let _unit_decorators;
+    let _unit_initializers = [];
+    let _unit_extraInitializers = [];
+    let _precision_decorators;
+    let _precision_initializers = [];
+    let _precision_extraInitializers = [];
+    let _scrubLabel_decorators;
+    let _scrubLabel_initializers = [];
+    let _scrubLabel_extraInitializers = [];
+    let _scrubValue_decorators;
+    let _scrubValue_initializers = [];
+    let _scrubValue_extraInitializers = [];
+    let _scrubField_decorators;
+    let _scrubField_initializers = [];
+    let _scrubField_extraInitializers = [];
+    let _clickLabel_decorators;
+    let _clickLabel_initializers = [];
+    let _clickLabel_extraInitializers = [];
+    let _clickValue_decorators;
+    let _clickValue_initializers = [];
+    let _clickValue_extraInitializers = [];
+    let _clickField_decorators;
+    let _clickField_initializers = [];
+    let _clickField_extraInitializers = [];
     let _private_internalValue_decorators;
     let _private_internalValue_initializers = [];
     let _private_internalValue_extraInitializers = [];
@@ -148,6 +210,14 @@ let DuiNumberField = (() => {
     let _private_inputText_initializers = [];
     let _private_inputText_extraInitializers = [];
     let _private_inputText_descriptor;
+    let _private_dragging_decorators;
+    let _private_dragging_initializers = [];
+    let _private_dragging_extraInitializers = [];
+    let _private_dragging_descriptor;
+    let _private_editing_decorators;
+    let _private_editing_initializers = [];
+    let _private_editing_extraInitializers = [];
+    let _private_editing_descriptor;
     let __fieldCtx_decorators;
     let __fieldCtx_initializers = [];
     let __fieldCtx_extraInitializers = [];
@@ -164,8 +234,21 @@ let DuiNumberField = (() => {
             _readOnly_decorators = [property({ type: Boolean, reflect: true, attribute: "read-only" })];
             _required_decorators = [property({ type: Boolean })];
             _name_decorators = [property()];
+            _label_decorators = [property({ reflect: true })];
+            _labelPosition_decorators = [property({ reflect: true, attribute: "label-position" })];
+            _iconPosition_decorators = [property({ reflect: true, attribute: "icon-position" })];
+            _unit_decorators = [property({ reflect: true })];
+            _precision_decorators = [property({ type: Number })];
+            _scrubLabel_decorators = [property({ type: Boolean, reflect: true, attribute: "scrub-label" })];
+            _scrubValue_decorators = [property({ type: Boolean, reflect: true, attribute: "scrub-value" })];
+            _scrubField_decorators = [property({ type: Boolean, reflect: true, attribute: "scrub-field" })];
+            _clickLabel_decorators = [property({ type: Boolean, reflect: true, attribute: "click-label" })];
+            _clickValue_decorators = [property({ type: Boolean, reflect: true, attribute: "click-value" })];
+            _clickField_decorators = [property({ type: Boolean, reflect: true, attribute: "click-field" })];
             _private_internalValue_decorators = [state()];
             _private_inputText_decorators = [state()];
+            _private_dragging_decorators = [state()];
+            _private_editing_decorators = [state()];
             __fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(this, null, _defaultValue_decorators, { kind: "accessor", name: "defaultValue", static: false, private: false, access: { has: obj => "defaultValue" in obj, get: obj => obj.defaultValue, set: (obj, value) => { obj.defaultValue = value; } }, metadata: _metadata }, _defaultValue_initializers, _defaultValue_extraInitializers);
@@ -177,8 +260,21 @@ let DuiNumberField = (() => {
             __esDecorate(this, null, _readOnly_decorators, { kind: "accessor", name: "readOnly", static: false, private: false, access: { has: obj => "readOnly" in obj, get: obj => obj.readOnly, set: (obj, value) => { obj.readOnly = value; } }, metadata: _metadata }, _readOnly_initializers, _readOnly_extraInitializers);
             __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
             __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _labelPosition_decorators, { kind: "accessor", name: "labelPosition", static: false, private: false, access: { has: obj => "labelPosition" in obj, get: obj => obj.labelPosition, set: (obj, value) => { obj.labelPosition = value; } }, metadata: _metadata }, _labelPosition_initializers, _labelPosition_extraInitializers);
+            __esDecorate(this, null, _iconPosition_decorators, { kind: "accessor", name: "iconPosition", static: false, private: false, access: { has: obj => "iconPosition" in obj, get: obj => obj.iconPosition, set: (obj, value) => { obj.iconPosition = value; } }, metadata: _metadata }, _iconPosition_initializers, _iconPosition_extraInitializers);
+            __esDecorate(this, null, _unit_decorators, { kind: "accessor", name: "unit", static: false, private: false, access: { has: obj => "unit" in obj, get: obj => obj.unit, set: (obj, value) => { obj.unit = value; } }, metadata: _metadata }, _unit_initializers, _unit_extraInitializers);
+            __esDecorate(this, null, _precision_decorators, { kind: "accessor", name: "precision", static: false, private: false, access: { has: obj => "precision" in obj, get: obj => obj.precision, set: (obj, value) => { obj.precision = value; } }, metadata: _metadata }, _precision_initializers, _precision_extraInitializers);
+            __esDecorate(this, null, _scrubLabel_decorators, { kind: "accessor", name: "scrubLabel", static: false, private: false, access: { has: obj => "scrubLabel" in obj, get: obj => obj.scrubLabel, set: (obj, value) => { obj.scrubLabel = value; } }, metadata: _metadata }, _scrubLabel_initializers, _scrubLabel_extraInitializers);
+            __esDecorate(this, null, _scrubValue_decorators, { kind: "accessor", name: "scrubValue", static: false, private: false, access: { has: obj => "scrubValue" in obj, get: obj => obj.scrubValue, set: (obj, value) => { obj.scrubValue = value; } }, metadata: _metadata }, _scrubValue_initializers, _scrubValue_extraInitializers);
+            __esDecorate(this, null, _scrubField_decorators, { kind: "accessor", name: "scrubField", static: false, private: false, access: { has: obj => "scrubField" in obj, get: obj => obj.scrubField, set: (obj, value) => { obj.scrubField = value; } }, metadata: _metadata }, _scrubField_initializers, _scrubField_extraInitializers);
+            __esDecorate(this, null, _clickLabel_decorators, { kind: "accessor", name: "clickLabel", static: false, private: false, access: { has: obj => "clickLabel" in obj, get: obj => obj.clickLabel, set: (obj, value) => { obj.clickLabel = value; } }, metadata: _metadata }, _clickLabel_initializers, _clickLabel_extraInitializers);
+            __esDecorate(this, null, _clickValue_decorators, { kind: "accessor", name: "clickValue", static: false, private: false, access: { has: obj => "clickValue" in obj, get: obj => obj.clickValue, set: (obj, value) => { obj.clickValue = value; } }, metadata: _metadata }, _clickValue_initializers, _clickValue_extraInitializers);
+            __esDecorate(this, null, _clickField_decorators, { kind: "accessor", name: "clickField", static: false, private: false, access: { has: obj => "clickField" in obj, get: obj => obj.clickField, set: (obj, value) => { obj.clickField = value; } }, metadata: _metadata }, _clickField_initializers, _clickField_extraInitializers);
             __esDecorate(this, _private_internalValue_descriptor = { get: __setFunctionName(function () { return this.#internalValue_accessor_storage; }, "#internalValue", "get"), set: __setFunctionName(function (value) { this.#internalValue_accessor_storage = value; }, "#internalValue", "set") }, _private_internalValue_decorators, { kind: "accessor", name: "#internalValue", static: false, private: true, access: { has: obj => #internalValue in obj, get: obj => obj.#internalValue, set: (obj, value) => { obj.#internalValue = value; } }, metadata: _metadata }, _private_internalValue_initializers, _private_internalValue_extraInitializers);
             __esDecorate(this, _private_inputText_descriptor = { get: __setFunctionName(function () { return this.#inputText_accessor_storage; }, "#inputText", "get"), set: __setFunctionName(function (value) { this.#inputText_accessor_storage = value; }, "#inputText", "set") }, _private_inputText_decorators, { kind: "accessor", name: "#inputText", static: false, private: true, access: { has: obj => #inputText in obj, get: obj => obj.#inputText, set: (obj, value) => { obj.#inputText = value; } }, metadata: _metadata }, _private_inputText_initializers, _private_inputText_extraInitializers);
+            __esDecorate(this, _private_dragging_descriptor = { get: __setFunctionName(function () { return this.#dragging_accessor_storage; }, "#dragging", "get"), set: __setFunctionName(function (value) { this.#dragging_accessor_storage = value; }, "#dragging", "set") }, _private_dragging_decorators, { kind: "accessor", name: "#dragging", static: false, private: true, access: { has: obj => #dragging in obj, get: obj => obj.#dragging, set: (obj, value) => { obj.#dragging = value; } }, metadata: _metadata }, _private_dragging_initializers, _private_dragging_extraInitializers);
+            __esDecorate(this, _private_editing_descriptor = { get: __setFunctionName(function () { return this.#editing_accessor_storage; }, "#editing", "get"), set: __setFunctionName(function (value) { this.#editing_accessor_storage = value; }, "#editing", "set") }, _private_editing_decorators, { kind: "accessor", name: "#editing", static: false, private: true, access: { has: obj => #editing in obj, get: obj => obj.#editing, set: (obj, value) => { obj.#editing = value; } }, metadata: _metadata }, _private_editing_initializers, _private_editing_extraInitializers);
             __esDecorate(this, null, __fieldCtx_decorators, { kind: "accessor", name: "_fieldCtx", static: false, private: false, access: { has: obj => "_fieldCtx" in obj, get: obj => obj._fieldCtx, set: (obj, value) => { obj._fieldCtx = value; } }, metadata: _metadata }, __fieldCtx_initializers, __fieldCtx_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -189,6 +285,7 @@ let DuiNumberField = (() => {
         };
         static styles = [base, styles];
         #value_accessor_storage = __runInitializers(this, _value_initializers, undefined);
+        // ── Core properties ────────────────────────────────────────────────
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
         #defaultValue_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _defaultValue_initializers, undefined));
@@ -218,15 +315,64 @@ let DuiNumberField = (() => {
         #name_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _name_initializers, undefined));
         get name() { return this.#name_accessor_storage; }
         set name(value) { this.#name_accessor_storage = value; }
-        #internalValue_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _private_internalValue_initializers, undefined));
+        #label_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _label_initializers, ""));
+        // ── Display properties ─────────────────────────────────────────────
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #labelPosition_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _labelPosition_initializers, ""));
+        get labelPosition() { return this.#labelPosition_accessor_storage; }
+        set labelPosition(value) { this.#labelPosition_accessor_storage = value; }
+        #iconPosition_accessor_storage = (__runInitializers(this, _labelPosition_extraInitializers), __runInitializers(this, _iconPosition_initializers, ""));
+        get iconPosition() { return this.#iconPosition_accessor_storage; }
+        set iconPosition(value) { this.#iconPosition_accessor_storage = value; }
+        #unit_accessor_storage = (__runInitializers(this, _iconPosition_extraInitializers), __runInitializers(this, _unit_initializers, ""));
+        get unit() { return this.#unit_accessor_storage; }
+        set unit(value) { this.#unit_accessor_storage = value; }
+        #precision_accessor_storage = (__runInitializers(this, _unit_extraInitializers), __runInitializers(this, _precision_initializers, undefined));
+        get precision() { return this.#precision_accessor_storage; }
+        set precision(value) { this.#precision_accessor_storage = value; }
+        #scrubLabel_accessor_storage = (__runInitializers(this, _precision_extraInitializers), __runInitializers(this, _scrubLabel_initializers, false));
+        // ── Interaction zone booleans ──────────────────────────────────────
+        get scrubLabel() { return this.#scrubLabel_accessor_storage; }
+        set scrubLabel(value) { this.#scrubLabel_accessor_storage = value; }
+        #scrubValue_accessor_storage = (__runInitializers(this, _scrubLabel_extraInitializers), __runInitializers(this, _scrubValue_initializers, false));
+        get scrubValue() { return this.#scrubValue_accessor_storage; }
+        set scrubValue(value) { this.#scrubValue_accessor_storage = value; }
+        #scrubField_accessor_storage = (__runInitializers(this, _scrubValue_extraInitializers), __runInitializers(this, _scrubField_initializers, false));
+        get scrubField() { return this.#scrubField_accessor_storage; }
+        set scrubField(value) { this.#scrubField_accessor_storage = value; }
+        #clickLabel_accessor_storage = (__runInitializers(this, _scrubField_extraInitializers), __runInitializers(this, _clickLabel_initializers, false));
+        get clickLabel() { return this.#clickLabel_accessor_storage; }
+        set clickLabel(value) { this.#clickLabel_accessor_storage = value; }
+        #clickValue_accessor_storage = (__runInitializers(this, _clickLabel_extraInitializers), __runInitializers(this, _clickValue_initializers, false));
+        get clickValue() { return this.#clickValue_accessor_storage; }
+        set clickValue(value) { this.#clickValue_accessor_storage = value; }
+        #clickField_accessor_storage = (__runInitializers(this, _clickValue_extraInitializers), __runInitializers(this, _clickField_initializers, false));
+        get clickField() { return this.#clickField_accessor_storage; }
+        set clickField(value) { this.#clickField_accessor_storage = value; }
+        #internalValue_accessor_storage = (__runInitializers(this, _clickField_extraInitializers), __runInitializers(this, _private_internalValue_initializers, undefined));
+        // ── Internal state ─────────────────────────────────────────────────
         get #internalValue() { return _private_internalValue_descriptor.get.call(this); }
         set #internalValue(value) { return _private_internalValue_descriptor.set.call(this, value); }
         #inputText_accessor_storage = (__runInitializers(this, _private_internalValue_extraInitializers), __runInitializers(this, _private_inputText_initializers, ""));
         get #inputText() { return _private_inputText_descriptor.get.call(this); }
         set #inputText(value) { return _private_inputText_descriptor.set.call(this, value); }
-        #_fieldCtx_accessor_storage = (__runInitializers(this, _private_inputText_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
+        #dragging_accessor_storage = (__runInitializers(this, _private_inputText_extraInitializers), __runInitializers(this, _private_dragging_initializers, false));
+        get #dragging() { return _private_dragging_descriptor.get.call(this); }
+        set #dragging(value) { return _private_dragging_descriptor.set.call(this, value); }
+        #editing_accessor_storage = (__runInitializers(this, _private_dragging_extraInitializers), __runInitializers(this, _private_editing_initializers, false));
+        get #editing() { return _private_editing_descriptor.get.call(this); }
+        set #editing(value) { return _private_editing_descriptor.set.call(this, value); }
+        #_fieldCtx_accessor_storage = (__runInitializers(this, _private_editing_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
         get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
         set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
+        // ── Drag state (not reactive) ──────────────────────────────────────
+        #dragStartX = (__runInitializers(this, __fieldCtx_extraInitializers), 0);
+        #dragStartValue = 0;
+        #dragStarted = false;
+        #dragPointerId = null;
+        #dragZoneAllowsClick = false;
+        // ── Computed getters ───────────────────────────────────────────────
         get #currentValue() {
             return this.value ?? this.#internalValue;
         }
@@ -236,18 +382,68 @@ let DuiNumberField = (() => {
         get #isInvalid() {
             return this._fieldCtx?.invalid ?? false;
         }
-        get #canDecrement() {
-            const v = this.#currentValue;
-            if (v === undefined)
-                return true;
-            return this.min === undefined || v > this.min;
+        get #inferredPrecision() {
+            const stepStr = String(this.step);
+            const dotIndex = stepStr.indexOf(".");
+            if (dotIndex === -1)
+                return 0;
+            return stepStr.length - dotIndex - 1;
         }
-        get #canIncrement() {
+        get #displayValue() {
             const v = this.#currentValue;
             if (v === undefined)
-                return true;
-            return this.max === undefined || v < this.max;
+                return "";
+            const p = this.precision ?? this.#inferredPrecision;
+            return v.toFixed(p);
+        }
+        /** Whether any interaction boolean is explicitly set by the consumer. */
+        get #hasExplicitInteraction() {
+            return (this.scrubLabel ||
+                this.scrubValue ||
+                this.scrubField ||
+                this.clickLabel ||
+                this.clickValue ||
+                this.clickField);
+        }
+        /** Effective scrub-label: explicit or default. */
+        get #effectiveScrubLabel() {
+            if (this.#hasExplicitInteraction)
+                return this.scrubLabel;
+            // Default: scrub on label when a label is present
+            return this.label !== "";
         }
+        /** Effective scrub-value: explicit or default. */
+        get #effectiveScrubValue() {
+            if (this.#hasExplicitInteraction)
+                return this.scrubValue;
+            return false;
+        }
+        /** Effective scrub-field: explicit or default. */
+        get #effectiveScrubField() {
+            if (this.#hasExplicitInteraction)
+                return this.scrubField;
+            // Default: scrub on field when no label
+            return this.label === "";
+        }
+        /** Effective click-label: explicit or default. */
+        get #effectiveClickLabel() {
+            if (this.#hasExplicitInteraction)
+                return this.clickLabel;
+            return false;
+        }
+        /** Effective click-value: explicit or default. */
+        get #effectiveClickValue() {
+            if (this.#hasExplicitInteraction)
+                return this.clickValue;
+            return true;
+        }
+        /** Effective click-field: explicit or default. */
+        get #effectiveClickField() {
+            if (this.#hasExplicitInteraction)
+                return this.clickField;
+            return false;
+        }
+        // ── Lifecycle ──────────────────────────────────────────────────────
         connectedCallback() {
             super.connectedCallback();
             if (this.value === undefined && this.defaultValue !== undefined) {
@@ -256,11 +452,13 @@ let DuiNumberField = (() => {
             this.#syncInputText();
         }
         willUpdate() {
-            this.#syncInputText();
+            if (!this.#editing) {
+                this.#syncInputText();
+            }
         }
+        // ── Value helpers ──────────────────────────────────────────────────
         #syncInputText() {
-            const v = this.#currentValue;
-            this.#inputText = v !== undefined ? String(v) : "";
+            this.#inputText = this.#displayValue;
         }
         #clamp(val) {
             if (this.min !== undefined)
@@ -278,12 +476,12 @@ let DuiNumberField = (() => {
             this._fieldCtx?.setFilled(true);
             this.dispatchEvent(valueChangeEvent({ value: clamped }));
         }
-        #increment = (__runInitializers(this, __fieldCtx_extraInitializers), (amount) => {
+        #increment = (amount) => {
             if (this.#isDisabled || this.readOnly)
                 return;
             const current = this.#currentValue ?? this.min ?? 0;
             this.#setValue(current + amount);
-        });
+        };
         #decrement = (amount) => {
             if (this.#isDisabled || this.readOnly)
                 return;
@@ -298,27 +496,179 @@ let DuiNumberField = (() => {
             else {
                 this.#setValue(parsed);
             }
+            this.#editing = false;
+            const v = this.#currentValue;
+            if (v !== undefined) {
+                this.dispatchEvent(valueCommittedEvent({ value: v }));
+            }
+        }
+        #focusInputAndSelectAll() {
+            const input = this.shadowRoot?.querySelector('[part="input"]');
+            if (input) {
+                this.#editing = true;
+                input.focus();
+                input.select();
+            }
+        }
+        // ── Drag-to-scrub ─────────────────────────────────────────────────
+        #startDrag(e, allowsClick) {
+            if (this.#isDisabled || this.readOnly)
+                return;
+            this.#dragPointerId = e.pointerId;
+            this.#dragStartX = e.clientX;
+            this.#dragStartValue = this.#currentValue ?? 0;
+            this.#dragStarted = false;
+            this.#dragZoneAllowsClick = allowsClick;
+            this.setPointerCapture(e.pointerId);
+            this.addEventListener("pointermove", this.#onPointerMove);
+            this.addEventListener("pointerup", this.#onPointerUp);
+            this.addEventListener("pointercancel", this.#onPointerUp);
         }
+        #onPointerMove = (e) => {
+            if (e.pointerId !== this.#dragPointerId)
+                return;
+            const deltaX = e.clientX - this.#dragStartX;
+            if (!this.#dragStarted) {
+                if (Math.abs(deltaX) < DRAG_THRESHOLD)
+                    return;
+                this.#dragStarted = true;
+                this.#dragging = true;
+            }
+            let sensitivity = this.step;
+            if (e.shiftKey) {
+                sensitivity = this.step * 0.1;
+            }
+            else if (e.ctrlKey || e.metaKey) {
+                sensitivity = this.largeStep;
+            }
+            const newValue = this.#dragStartValue + deltaX * sensitivity;
+            this.#setValue(newValue);
+        };
+        #onPointerUp = (e) => {
+            if (e.pointerId !== this.#dragPointerId)
+                return;
+            this.releasePointerCapture(e.pointerId);
+            this.removeEventListener("pointermove", this.#onPointerMove);
+            this.removeEventListener("pointerup", this.#onPointerUp);
+            this.removeEventListener("pointercancel", this.#onPointerUp);
+            if (this.#dragStarted) {
+                this.#dragging = false;
+                const v = this.#currentValue;
+                if (v !== undefined) {
+                    this.dispatchEvent(valueCommittedEvent({ value: v }));
+                }
+            }
+            else if (this.#dragZoneAllowsClick) {
+                this.#focusInputAndSelectAll();
+            }
+            this.#dragPointerId = null;
+        };
+        // ── Zone pointer handlers ──────────────────────────────────────────
+        #onLabelPointerDown = (e) => {
+            if (e.button !== 0)
+                return;
+            // Field-wide flags apply to all zones
+            const allowsScrub = this.#effectiveScrubLabel || this.#effectiveScrubField;
+            const allowsClick = this.#effectiveClickLabel || this.#effectiveClickField;
+            if (allowsScrub && allowsClick) {
+                e.preventDefault();
+                this.#startDrag(e, true);
+            }
+            else if (allowsScrub) {
+                e.preventDefault();
+                this.#startDrag(e, false);
+            }
+            else if (allowsClick) {
+                e.preventDefault();
+                this.#focusInputAndSelectAll();
+            }
+        };
+        #onInputPointerDown = (e) => {
+            if (e.button !== 0)
+                return;
+            // Field-wide flags apply to all zones
+            const allowsScrub = this.#effectiveScrubValue || this.#effectiveScrubField;
+            const allowsClick = this.#effectiveClickValue || this.#effectiveClickField;
+            if (allowsScrub && allowsClick) {
+                e.preventDefault();
+                this.#startDrag(e, true);
+            }
+            else if (allowsScrub) {
+                e.preventDefault();
+                this.#startDrag(e, false);
+            }
+            else if (allowsClick) {
+                this.#editing = true;
+            }
+        };
+        #onRootPointerDown = (e) => {
+            if (e.button !== 0)
+                return;
+            // Root handler only fires for clicks on the root background itself
+            const rootEl = this.shadowRoot?.querySelector('[part="root"]');
+            if (e.target !== rootEl)
+                return;
+            const allowsScrub = this.#effectiveScrubField;
+            const allowsClick = this.#effectiveClickField;
+            if (allowsScrub && allowsClick) {
+                e.preventDefault();
+                this.#startDrag(e, true);
+            }
+            else if (allowsScrub) {
+                e.preventDefault();
+                this.#startDrag(e, false);
+            }
+            else if (allowsClick) {
+                e.preventDefault();
+                this.#focusInputAndSelectAll();
+            }
+        };
+        // ── Input event handlers ───────────────────────────────────────────
         #onInput = (e) => {
             this.#inputText = e.target.value;
         };
         #onBlur = () => {
-            this.#commitInput();
+            if (this.#editing) {
+                this.#commitInput();
+            }
             this._fieldCtx?.setFocused(false);
             this._fieldCtx?.markTouched();
         };
         #onFocus = () => {
+            this.#editing = true;
             this._fieldCtx?.setFocused(true);
+            const input = this.shadowRoot?.querySelector('[part="input"]');
+            if (input) {
+                requestAnimationFrame(() => input.select());
+            }
         };
         #onKeyDown = (e) => {
             switch (e.key) {
                 case "ArrowUp":
                     e.preventDefault();
-                    this.#increment(e.shiftKey ? this.largeStep : this.step);
+                    if (e.shiftKey) {
+                        this.#increment(this.step * 0.1);
+                    }
+                    else if (e.ctrlKey || e.metaKey) {
+                        this.#increment(this.largeStep);
+                    }
+                    else {
+                        this.#increment(this.step);
+                    }
+                    this.#syncInputText();
                     break;
                 case "ArrowDown":
                     e.preventDefault();
-                    this.#decrement(e.shiftKey ? this.largeStep : this.step);
+                    if (e.shiftKey) {
+                        this.#decrement(this.step * 0.1);
+                    }
+                    else if (e.ctrlKey || e.metaKey) {
+                        this.#decrement(this.largeStep);
+                    }
+                    else {
+                        this.#decrement(this.step);
+                    }
+                    this.#syncInputText();
                     break;
                 case "Home":
                     if (this.min !== undefined) {
@@ -335,61 +685,71 @@ let DuiNumberField = (() => {
                 case "Enter":
                     this.#commitInput();
                     break;
+                case "Escape": {
+                    this.#editing = false;
+                    this.#syncInputText();
+                    const input = this.shadowRoot?.querySelector('[part="input"]');
+                    if (input)
+                        input.blur();
+                    break;
+                }
             }
         };
-        #onDecrementClick = () => {
-            this.#decrement(this.step);
-        };
-        #onIncrementClick = () => {
-            this.#increment(this.step);
-        };
+        // ── Render ─────────────────────────────────────────────────────────
         render() {
             const isDisabled = this.#isDisabled;
             const isInvalid = this.#isInvalid;
             const controlId = this._fieldCtx?.controlId ?? "";
             const currentValue = this.#currentValue;
+            // Compute which zones are scrubbable for cursor styling
+            const labelScrub = this.#effectiveScrubLabel || this.#effectiveScrubField;
+            const inputScrub = this.#effectiveScrubValue || this.#effectiveScrubField;
+            const rootScrub = this.#effectiveScrubField;
             return html `
+      <span
+        part="label"
+        ?data-scrub="${labelScrub}"
+        @pointerdown="${this.#onLabelPointerDown}"
+      >${this.label}</span>
+
       <div
         part="root"
+        ?data-scrub="${rootScrub}"
+        ?data-dragging="${this.#dragging}"
         ?data-disabled="${isDisabled}"
+        ?data-readonly="${this.readOnly}"
         ?data-invalid="${isInvalid}"
+        @pointerdown="${this.#onRootPointerDown}"
       >
-        <button
-          part="decrement"
-          type="button"
-          tabindex="-1"
-          aria-label="Decrease"
-          ?disabled="${isDisabled || this.readOnly || !this.#canDecrement}"
-          @click="${this.#onDecrementClick}"
-        >
-          <slot name="decrement">&minus;</slot>
-        </button>
+        <span part="icon">
+          <slot name="icon"></slot>
+        </span>
+
         <input
           part="input"
           id="${controlId || nothing}"
           type="text"
           inputmode="decimal"
+          ?data-scrub="${inputScrub}"
           .value="${live(this.#inputText)}"
           ?disabled="${isDisabled}"
           ?readonly="${this.readOnly}"
           ?required="${this.required}"
+          aria-label="${this.label || nothing}"
+          aria-valuenow="${currentValue ?? nothing}"
+          aria-valuemin="${this.min ?? nothing}"
+          aria-valuemax="${this.max ?? nothing}"
           aria-invalid="${isInvalid ? "true" : nothing}"
           ?data-disabled="${isDisabled}"
+          @pointerdown="${this.#onInputPointerDown}"
           @input="${this.#onInput}"
           @keydown="${this.#onKeyDown}"
           @focus="${this.#onFocus}"
           @blur="${this.#onBlur}"
         />
-        <button
-          part="increment"
-          type="button"
-          tabindex="-1"
-          aria-label="Increase"
-          ?disabled="${isDisabled || this.readOnly || !this.#canIncrement}"
-          @click="${this.#onIncrementClick}"
-        >
-          <slot name="increment">+</slot>
-        </button>
+
+        <span part="unit">${this.unit}</span>
+
         ${this.name
                 ? html `<input
               type="hidden"