@vaadin/number-field 24.0.0-alpha9 → 24.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/number-field",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-number-field.d.ts",
+    "!src/vaadin-lit-number-field.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -34,22 +36,24 @@
     "web-component"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha9",
-    "@vaadin/field-base": "24.0.0-alpha9",
-    "@vaadin/input-container": "24.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
+    "@vaadin/component-base": "24.0.0-beta2",
+    "@vaadin/field-base": "24.0.0-beta2",
+    "@vaadin/input-container": "24.0.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta2",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta2",
+    "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
+  "gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
 }

package/src/vaadin-number-field-mixin.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
+import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
+import type { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
+import type { InputFieldMixinClass } from '@vaadin/field-base/src/input-field-mixin.js';
+import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
+import type { SlotStylesMixinClass } from '@vaadin/field-base/src/slot-styles-mixin.js';
+import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
+
+/**
+ * A mixin providing common number field functionality.
+ */
+export declare function NumberFieldMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ControllerMixinClass> &
+  Constructor<DelegateFocusMixinClass> &
+  Constructor<DelegateStateMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FieldMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<InputConstraintsMixinClass> &
+  Constructor<InputControlMixinClass> &
+  Constructor<InputFieldMixinClass> &
+  Constructor<InputMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<LabelMixinClass> &
+  Constructor<NumberFieldMixinClass> &
+  Constructor<SlotStylesMixinClass> &
+  Constructor<ValidateMixinClass> &
+  T;
+
+export declare class NumberFieldMixinClass {
+  /**
+   * The minimum value of the field.
+   */
+  min: number | null | undefined;
+
+  /**
+   * The maximum value of the field.
+   */
+  max: number | null | undefined;
+
+  /**
+   * Specifies the allowed number intervals of the field.
+   */
+  step: number;
+
+  /**
+   * Set to true to show increase/decrease buttons.
+   * @attr {boolean} step-buttons-visible
+   */
+  stepButtonsVisible: boolean;
+}

package/src/vaadin-number-field-mixin.js

@@ -0,0 +1,342 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
+
+/**
+ * A mixin providing common number field functionality.
+ *
+ * @polymerMixin
+ * @mixes InputFieldMixin
+ */
+export const NumberFieldMixin = (superClass) =>
+  class NumberFieldMixinClass extends InputFieldMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * The minimum value of the field.
+         */
+        min: {
+          type: Number,
+        },
+
+        /**
+         * The maximum value of the field.
+         */
+        max: {
+          type: Number,
+        },
+
+        /**
+         * Specifies the allowed number intervals of the field.
+         * @type {number}
+         */
+        step: {
+          type: Number,
+        },
+
+        /**
+         * Set to true to show increase/decrease buttons.
+         * @attr {boolean} step-buttons-visible
+         */
+        stepButtonsVisible: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['_stepChanged(step, inputElement)'];
+    }
+
+    static get delegateProps() {
+      return [...super.delegateProps, 'min', 'max'];
+    }
+
+    static get constraints() {
+      return [...super.constraints, 'min', 'max', 'step'];
+    }
+
+    constructor() {
+      super();
+      this._setType('number');
+    }
+
+    /** @protected */
+    get slotStyles() {
+      const tag = this.localName;
+      return [
+        `
+          ${tag} input[type="number"]::-webkit-outer-spin-button,
+          ${tag} input[type="number"]::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+          }
+
+          ${tag} input[type="number"] {
+            -moz-appearance: textfield;
+          }
+
+          ${tag}[dir='rtl'] input[type="number"]::placeholder {
+            direction: rtl;
+          }
+
+          ${tag}[dir='rtl']:not([step-buttons-visible]) input[type="number"]::placeholder {
+            text-align: left;
+          }
+        `,
+      ];
+    }
+
+    /**
+     * Used by `InputControlMixin` as a reference to the clear button element.
+     * @protected
+     */
+    get clearElement() {
+      return this.$.clearButton;
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addController(
+        new InputController(this, (input) => {
+          this._setInputElement(input);
+          this._setFocusElement(input);
+          this.stateTarget = input;
+          this.ariaTarget = input;
+        }),
+      );
+
+      this.addController(new LabelledInputController(this.inputElement, this._labelController));
+    }
+
+    /**
+     * Override the method from `InputConstraintsMixin`
+     * to enforce HTML constraint validation even if
+     * the user didn't add any constraints explicitly:
+     * the field has to be regardless checked for bad input.
+     *
+     * @override
+     */
+    checkValidity() {
+      if (this.inputElement) {
+        return this.inputElement.checkValidity();
+      }
+
+      return !this.invalid;
+    }
+
+    /** @protected */
+    _onDecreaseButtonTouchend(e) {
+      // Cancel the following click and focus events
+      e.preventDefault();
+      this._decreaseValue();
+    }
+
+    /** @protected */
+    _onIncreaseButtonTouchend(e) {
+      // Cancel the following click and focus events
+      e.preventDefault();
+      this._increaseValue();
+    }
+
+    /** @protected */
+    _onDecreaseButtonClick() {
+      this._decreaseValue();
+    }
+
+    /** @protected */
+    _onIncreaseButtonClick() {
+      this._increaseValue();
+    }
+
+    /** @private */
+    _decreaseValue() {
+      this._incrementValue(-1);
+    }
+
+    /** @private */
+    _increaseValue() {
+      this._incrementValue(1);
+    }
+
+    /** @private */
+    _incrementValue(incr) {
+      if (this.disabled || this.readonly) {
+        return;
+      }
+
+      const step = this.step || 1;
+      let value = parseFloat(this.value);
+
+      if (!this.value) {
+        if ((this.min === 0 && incr < 0) || (this.max === 0 && incr > 0) || (this.max === 0 && this.min === 0)) {
+          incr = 0;
+          value = 0;
+        } else if ((this.max == null || this.max >= 0) && (this.min == null || this.min <= 0)) {
+          value = 0;
+        } else if (this.min > 0) {
+          value = this.min;
+          if (this.max < 0 && incr < 0) {
+            value = this.max;
+          }
+          incr = 0;
+        } else if (this.max < 0) {
+          value = this.max;
+          if (incr < 0) {
+            incr = 0;
+          } else if (this._getIncrement(1, value - step) > this.max) {
+            value -= 2 * step;
+            // FIXME(yuriy): find a proper solution to make correct step back
+          } else {
+            value -= step;
+          }
+        }
+      } else if (value < this.min) {
+        incr = 0;
+        value = this.min;
+      } else if (value > this.max) {
+        incr = 0;
+        value = this.max;
+      }
+
+      const newValue = this._getIncrement(incr, value);
+      if (!this.value || incr === 0 || this._incrementIsInsideTheLimits(incr, value)) {
+        this._setValue(newValue);
+      }
+    }
+
+    /** @private */
+    _setValue(value) {
+      this.value = this.inputElement.value = String(parseFloat(value));
+      this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+    }
+
+    /** @private */
+    _getIncrement(incr, currentValue) {
+      let step = this.step || 1,
+        min = this.min || 0;
+
+      // To avoid problems with decimal math, multiplying to operate with integers.
+      const multiplier = Math.max(
+        this._getMultiplier(currentValue),
+        this._getMultiplier(step),
+        this._getMultiplier(min),
+      );
+
+      step *= multiplier;
+      currentValue = Math.round(currentValue * multiplier);
+      min *= multiplier;
+
+      const margin = (currentValue - min) % step;
+
+      if (incr > 0) {
+        return (currentValue - margin + step) / multiplier;
+      } else if (incr < 0) {
+        return (currentValue - (margin || step)) / multiplier;
+      }
+      return currentValue / multiplier;
+    }
+
+    /** @private */
+    _getDecimalCount(number) {
+      const s = String(number);
+      const i = s.indexOf('.');
+      return i === -1 ? 1 : s.length - i - 1;
+    }
+
+    /** @private */
+    _getMultiplier(number) {
+      if (!isNaN(number)) {
+        return 10 ** this._getDecimalCount(number);
+      }
+    }
+
+    /** @private */
+    _incrementIsInsideTheLimits(incr, value) {
+      if (incr < 0) {
+        return this.min == null || this._getIncrement(incr, value) >= this.min;
+      } else if (incr > 0) {
+        return this.max == null || this._getIncrement(incr, value) <= this.max;
+      }
+      return this._getIncrement(incr, value) <= this.max && this._getIncrement(incr, value) >= this.min;
+    }
+
+    /** @protected */
+    _isButtonEnabled(sign) {
+      const incr = sign * (this.step || 1);
+      const value = parseFloat(this.value);
+      return !this.value || (!this.disabled && this._incrementIsInsideTheLimits(incr, value));
+    }
+
+    /**
+     * @param {number} step
+     * @param {HTMLElement | undefined} inputElement
+     * @protected
+     */
+    _stepChanged(step, inputElement) {
+      if (inputElement) {
+        inputElement.step = step || 'any';
+      }
+    }
+
+    /**
+     * @param {unknown} newVal
+     * @param {unknown} oldVal
+     * @protected
+     * @override
+     */
+    _valueChanged(newVal, oldVal) {
+      // Validate value to be numeric
+      if (newVal && isNaN(parseFloat(newVal))) {
+        this.value = '';
+      } else if (typeof this.value !== 'string') {
+        this.value = String(this.value);
+      }
+
+      super._valueChanged(this.value, oldVal);
+    }
+
+    /**
+     * Override an event listener from `InputControlMixin`
+     * to avoid adding a separate listener.
+     * @param {!KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDown(event) {
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        this._increaseValue();
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        this._decreaseValue();
+      }
+
+      super._onKeyDown(event);
+    }
+
+    /**
+     * Native [type=number] inputs don't update their value
+     * when you are entering input that the browser is unable to parse
+     * e.g. "--5", hence we have to override this method from `InputMixin`
+     * so that, when value is empty, it would additionally check
+     * for bad input based on the native `validity.badInput` property.
+     *
+     * @param {InputEvent} event
+     * @protected
+     * @override
+     */
+    _setHasInputValue(event) {
+      const target = event.composedPath()[0];
+      this._hasInputValue = target.value.length > 0 || target.validity.badInput;
+    }
+  };

package/src/vaadin-number-field-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const numberFieldStyles: CSSResult;

package/src/vaadin-number-field-styles.js

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const numberFieldStyles = css`
+  :host([readonly]) [part$='button'] {
+    pointer-events: none;
+  }
+
+  [part='decrease-button']::before {
+    content: '\\2212';
+  }
+
+  [part='increase-button']::before {
+    content: '+';
+  }
+
+  [part='decrease-button'],
+  [part='increase-button'] {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  :host([dir='rtl']) [part='input-field'] {
+    direction: ltr;
+  }
+`;

package/src/vaadin-number-field.d.ts

@@ -6,6 +6,7 @@
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { NumberFieldMixin } from './vaadin-number-field-mixin.js';
 
 /**
  * Fired when the user commits a value change.
@@ -68,28 +69,7 @@ export interface NumberFieldEventMap extends HTMLElementEventMap, NumberFieldCus
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
-declare class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement))) {
-  /**
-   * Set to true to show increase/decrease buttons.
-   * @attr {boolean} step-buttons-visible
-   */
-  stepButtonsVisible: boolean;
-
-  /**
-   * The minimum value of the field.
-   */
-  min: number | null | undefined;
-
-  /**
-   * The maximum value of the field.
-   */
-  max: number | null | undefined;
-
-  /**
-   * Specifies the allowed number intervals of the field.
-   */
-  step: number | null | undefined;
-
+declare class NumberField extends NumberFieldMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   addEventListener<K extends keyof NumberFieldEventMap>(
     type: K,
     listener: (this: NumberField, ev: NumberFieldEventMap[K]) => void,

package/src/vaadin-number-field.js

@@ -7,13 +7,14 @@ import '@vaadin/input-container/src/vaadin-input-container.js';
 import { html, PolymerElement } from '@polymer/polymer';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
-import { InputController } from '@vaadin/field-base/src/input-controller.js';
-import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
-import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { NumberFieldMixin } from './vaadin-number-field-mixin.js';
+import { numberFieldStyles } from './vaadin-number-field-styles.js';
 
-registerStyles('vaadin-number-field', inputFieldShared, { moduleId: 'vaadin-number-field-styles' });
+registerStyles('vaadin-number-field', [inputFieldShared, numberFieldStyles], {
+  moduleId: 'vaadin-number-field-styles',
+});
 
 /**
  * `<vaadin-number-field>` is an input field web component that only accepts numeric input.
@@ -45,43 +46,17 @@ registerStyles('vaadin-number-field', inputFieldShared, { moduleId: 'vaadin-numb
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
- * @mixes InputFieldMixin
- * @mixes SlotStylesMixin
+ * @mixes NumberFieldMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement))) {
+export class NumberField extends NumberFieldMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-number-field';
   }
 
   static get template() {
     return html`
-      <style>
-        :host([readonly]) [part$='button'] {
-          pointer-events: none;
-        }
-
-        [part='decrease-button']::before {
-          content: '−';
-        }
-
-        [part='increase-button']::before {
-          content: '+';
-        }
-
-        [part='decrease-button'],
-        [part='increase-button'] {
-          -webkit-user-select: none;
-          -moz-user-select: none;
-          user-select: none;
-        }
-
-        :host([dir='rtl']) [part='input-field'] {
-          direction: ltr;
-        }
-      </style>
-
       <div class="vaadin-field-container">
         <div part="label">
           <slot name="label"></slot>
@@ -96,10 +71,10 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
           theme$="[[_theme]]"
         >
           <div
-            disabled$="[[!_allowed(-1, value, min, max, step)]]"
+            disabled$="[[!_isButtonEnabled(-1, value, min, max, step)]]"
             part="decrease-button"
-            on-click="_decreaseValue"
-            on-touchend="_decreaseButtonTouchend"
+            on-click="_onDecreaseButtonClick"
+            on-touchend="_onDecreaseButtonTouchend"
             hidden$="[[!stepButtonsVisible]]"
             aria-hidden="true"
             slot="prefix"
@@ -109,10 +84,10 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
           <slot name="suffix" slot="suffix"></slot>
           <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
           <div
-            disabled$="[[!_allowed(1, value, min, max, step)]]"
+            disabled$="[[!_isButtonEnabled(1, value, min, max, step)]]"
             part="increase-button"
-            on-click="_increaseValue"
-            on-touchend="_increaseButtonTouchend"
+            on-click="_onIncreaseButtonClick"
+            on-touchend="_onIncreaseButtonTouchend"
             hidden$="[[!stepButtonsVisible]]"
             aria-hidden="true"
             slot="suffix"
@@ -132,321 +107,14 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
     `;
   }
 
-  static get properties() {
-    return {
-      /**
-       * Set to true to show increase/decrease buttons.
-       * @attr {boolean} step-buttons-visible
-       */
-      stepButtonsVisible: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * The minimum value of the field.
-       */
-      min: {
-        type: Number,
-      },
-
-      /**
-       * The maximum value of the field.
-       */
-      max: {
-        type: Number,
-      },
-
-      /**
-       * Specifies the allowed number intervals of the field.
-       * @type {number}
-       */
-      step: {
-        type: Number,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['_stepChanged(step, inputElement)'];
-  }
-
-  static get delegateProps() {
-    return [...super.delegateProps, 'min', 'max'];
-  }
-
-  static get constraints() {
-    return [...super.constraints, 'min', 'max', 'step'];
-  }
-
-  constructor() {
-    super();
-    this._setType('number');
-  }
-
-  /** @protected */
-  get slotStyles() {
-    const tag = this.localName;
-    return [
-      ...super.slotStyles,
-      `
-        ${tag} input[type="number"]::-webkit-outer-spin-button,
-        ${tag} input[type="number"]::-webkit-inner-spin-button {
-          -webkit-appearance: none;
-          margin: 0;
-        }
-
-        ${tag} input[type="number"] {
-          -moz-appearance: textfield;
-        }
-
-        ${tag}[dir='rtl'] input[type="number"]::placeholder {
-          direction: rtl;
-        }
-
-        ${tag}[dir='rtl']:not([step-buttons-visible]) input[type="number"]::placeholder {
-          text-align: left;
-        }
-      `,
-    ];
-  }
-
-  /**
-   * Used by `InputControlMixin` as a reference to the clear button element.
-   * @protected
-   */
-  get clearElement() {
-    return this.$.clearButton;
-  }
-
   /** @protected */
   ready() {
     super.ready();
 
-    this.addController(
-      new InputController(this, (input) => {
-        this._setInputElement(input);
-        this._setFocusElement(input);
-        this.stateTarget = input;
-        this.ariaTarget = input;
-      }),
-    );
-
-    this.addController(new LabelledInputController(this.inputElement, this._labelController));
-
     this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
     this._tooltipController.setPosition('top');
   }
-
-  /**
-   * Override the method from `InputConstraintsMixin`
-   * to enforce HTML constraint validation even if
-   * the user didn't add any constraints explicitly:
-   * the field has to be regardless checked for bad input.
-   *
-   * @override
-   */
-  checkValidity() {
-    if (this.inputElement) {
-      return this.inputElement.checkValidity();
-    }
-
-    return !this.invalid;
-  }
-
-  /** @private */
-  _decreaseButtonTouchend(e) {
-    // Cancel the following click and focus events
-    e.preventDefault();
-    this._decreaseValue();
-  }
-
-  /** @private */
-  _increaseButtonTouchend(e) {
-    // Cancel the following click and focus events
-    e.preventDefault();
-    this._increaseValue();
-  }
-
-  /** @private */
-  _decreaseValue() {
-    this._incrementValue(-1);
-  }
-
-  /** @private */
-  _increaseValue() {
-    this._incrementValue(1);
-  }
-
-  /** @private */
-  _incrementValue(incr) {
-    if (this.disabled || this.readonly) {
-      return;
-    }
-
-    const step = this.step || 1;
-    let value = parseFloat(this.value);
-
-    if (!this.value) {
-      if ((this.min === 0 && incr < 0) || (this.max === 0 && incr > 0) || (this.max === 0 && this.min === 0)) {
-        incr = 0;
-        value = 0;
-      } else if ((this.max == null || this.max >= 0) && (this.min == null || this.min <= 0)) {
-        value = 0;
-      } else if (this.min > 0) {
-        value = this.min;
-        if (this.max < 0 && incr < 0) {
-          value = this.max;
-        }
-        incr = 0;
-      } else if (this.max < 0) {
-        value = this.max;
-        if (incr < 0) {
-          incr = 0;
-        } else if (this._getIncrement(1, value - step) > this.max) {
-          value -= 2 * step;
-          // FIXME(yuriy): find a proper solution to make correct step back
-        } else {
-          value -= step;
-        }
-      }
-    } else if (value < this.min) {
-      incr = 0;
-      value = this.min;
-    } else if (value > this.max) {
-      incr = 0;
-      value = this.max;
-    }
-
-    const newValue = this._getIncrement(incr, value);
-    if (!this.value || incr === 0 || this._incrementIsInsideTheLimits(incr, value)) {
-      this._setValue(newValue);
-    }
-  }
-
-  /** @private */
-  _setValue(value) {
-    this.value = this.inputElement.value = String(parseFloat(value));
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
-  }
-
-  /** @private */
-  _getIncrement(incr, currentValue) {
-    let step = this.step || 1,
-      min = this.min || 0;
-
-    // To avoid problems with decimal math, multiplying to operate with integers.
-    const multiplier = Math.max(this._getMultiplier(currentValue), this._getMultiplier(step), this._getMultiplier(min));
-
-    step *= multiplier;
-    currentValue = Math.round(currentValue * multiplier);
-    min *= multiplier;
-
-    const margin = (currentValue - min) % step;
-
-    if (incr > 0) {
-      return (currentValue - margin + step) / multiplier;
-    } else if (incr < 0) {
-      return (currentValue - (margin || step)) / multiplier;
-    }
-    return currentValue / multiplier;
-  }
-
-  /** @private */
-  _getDecimalCount(number) {
-    const s = String(number);
-    const i = s.indexOf('.');
-    return i === -1 ? 1 : s.length - i - 1;
-  }
-
-  /** @private */
-  _getMultiplier(number) {
-    if (!isNaN(number)) {
-      return 10 ** this._getDecimalCount(number);
-    }
-  }
-
-  /** @private */
-  _incrementIsInsideTheLimits(incr, value) {
-    if (incr < 0) {
-      return this.min == null || this._getIncrement(incr, value) >= this.min;
-    } else if (incr > 0) {
-      return this.max == null || this._getIncrement(incr, value) <= this.max;
-    }
-    return this._getIncrement(incr, value) <= this.max && this._getIncrement(incr, value) >= this.min;
-  }
-
-  /** @private */
-  _allowed(sign) {
-    const incr = sign * (this.step || 1);
-    const value = parseFloat(this.value);
-    return !this.value || (!this.disabled && this._incrementIsInsideTheLimits(incr, value));
-  }
-
-  /**
-   * @param {number} step
-   * @param {HTMLElement | undefined} inputElement
-   * @protected
-   */
-  _stepChanged(step, inputElement) {
-    if (inputElement) {
-      inputElement.step = step || 'any';
-    }
-  }
-
-  /**
-   * @param {unknown} newVal
-   * @param {unknown} oldVal
-   * @protected
-   * @override
-   */
-  _valueChanged(newVal, oldVal) {
-    // Validate value to be numeric
-    if (newVal && isNaN(parseFloat(newVal))) {
-      this.value = '';
-    } else if (typeof this.value !== 'string') {
-      this.value = String(this.value);
-    }
-
-    super._valueChanged(this.value, oldVal);
-  }
-
-  /**
-   * Override an event listener from `InputControlMixin`
-   * to avoid adding a separate listener.
-   * @param {!KeyboardEvent} event
-   * @protected
-   * @override
-   */
-  _onKeyDown(event) {
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      this._increaseValue();
-    } else if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      this._decreaseValue();
-    }
-
-    super._onKeyDown(event);
-  }
-
-  /**
-   * Native [type=number] inputs don't update their value
-   * when you are entering input that the browser is unable to parse
-   * e.g. "--5", hence we have to override this method from `InputMixin`
-   * so that, when value is empty, it would additionally check
-   * for bad input based on the native `validity.badInput` property.
-   *
-   * @param {InputEvent} event
-   * @protected
-   * @override
-   */
-  _setHasInputValue(event) {
-    const target = event.composedPath()[0];
-    this._hasInputValue = target.value.length > 0 || target.validity.badInput;
-  }
 }
 
 customElements.define(NumberField.is, NumberField);

package/theme/lumo/vaadin-number-field-styles.js

@@ -9,10 +9,6 @@ import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const numberField = css`
-  :host {
-    width: 8em;
-  }
-
   :host([step-buttons-visible]:not([theme~='align-right'])) ::slotted(input) {
     text-align: center;
   }

package/theme/material/vaadin-number-field-styles.js

@@ -8,10 +8,6 @@ import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-fi
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const numberField = css`
-  :host {
-    width: 8em;
-  }
-
   :host([step-buttons-visible]) ::slotted(input) {
     text-align: center;
   }

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/number-field",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-number-field",
-          "description": "`<vaadin-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-field>\n```\n\n### Styling\n\n`<vaadin-number-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name         | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-field>\n```\n\n### Styling\n\n`<vaadin-number-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name         | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "disabled",
@@ -99,30 +99,30 @@
               }
             },
             {
-              "name": "allowed-char-pattern",
-              "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
+              "name": "clear-button-visible",
+              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
               "value": {
                 "type": [
-                  "string",
+                  "boolean",
                   "null",
                   "undefined"
                 ]
               }
             },
             {
-              "name": "autoselect",
-              "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
+              "name": "allowed-char-pattern",
+              "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
               "value": {
                 "type": [
-                  "boolean",
+                  "string",
                   "null",
                   "undefined"
                 ]
               }
             },
             {
-              "name": "clear-button-visible",
-              "description": "Set to true to display the clear icon which clears the input.",
+              "name": "autoselect",
+              "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
               "value": {
                 "type": [
                   "boolean",
@@ -208,17 +208,6 @@
                 ]
               }
             },
-            {
-              "name": "step-buttons-visible",
-              "description": "Set to true to show increase/decrease buttons.",
-              "value": {
-                "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "min",
               "description": "The minimum value of the field.",
@@ -250,6 +239,17 @@
                 ]
               }
             },
+            {
+              "name": "step-buttons-visible",
+              "description": "Set to true to show increase/decrease buttons.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -353,30 +353,30 @@
                 }
               },
               {
-                "name": "allowedCharPattern",
-                "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
+                "name": "clearButtonVisible",
+                "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
                 "value": {
                   "type": [
-                    "string",
+                    "boolean",
                     "null",
                     "undefined"
                   ]
                 }
               },
               {
-                "name": "autoselect",
-                "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
+                "name": "allowedCharPattern",
+                "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
                 "value": {
                   "type": [
-                    "boolean",
+                    "string",
                     "null",
                     "undefined"
                   ]
                 }
               },
               {
-                "name": "clearButtonVisible",
-                "description": "Set to true to display the clear icon which clears the input.",
+                "name": "autoselect",
+                "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
                 "value": {
                   "type": [
                     "boolean",
@@ -462,17 +462,6 @@
                   ]
                 }
               },
-              {
-                "name": "stepButtonsVisible",
-                "description": "Set to true to show increase/decrease buttons.",
-                "value": {
-                  "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
               {
                 "name": "min",
                 "description": "The minimum value of the field.",
@@ -503,6 +492,17 @@
                     "number"
                   ]
                 }
+              },
+              {
+                "name": "stepButtonsVisible",
+                "description": "Set to true to show increase/decrease buttons.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/number-field",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-number-field",
-          "description": "`<vaadin-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-field>\n```\n\n### Styling\n\n`<vaadin-number-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name         | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-field>\n```\n\n### Styling\n\n`<vaadin-number-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name         | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -48,15 +48,15 @@
               }
             },
             {
-              "name": "?autoselect",
-              "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
+              "name": "?clearButtonVisible",
+              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?clearButtonVisible",
-              "description": "Set to true to display the clear icon which clears the input.",
+              "name": "?autoselect",
+              "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
               "value": {
                 "kind": "expression"
               }