@momentum-design/components 0.139.8 → 0.140.0

package/dist/components/input/input.component.d.ts

@@ -2,24 +2,40 @@ import { CSSResult, nothing, PropertyValueMap } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper';
 import type { IconNames } from '../icon/icon.types';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
-import type { AutoCapitalizeType, AutoCompleteType, InputType } from './input.types';
+import type { AutoCapitalizeType, AutoCompleteType, InputModeType, InputType } from './input.types';
 declare const Input_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/CharacterLimitMixin").CharacterLimitMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
- * The input is a single-line text field with a label, optional helper or validation text, and an optional trailing clear button. It supports a leading icon, a static prefix text, character counting, and full HTML form integration (the host is form-associated and submits its `value` under `name`).
+ * The input is a single-line text field with a label, optional helper or
+ * validation text, and an optional trailing clear button. It supports a leading
+ * icon, a static prefix text, character counting, and full HTML form integration
+ * (the host is form-associated and submits its `value` under `name`).
  * 
- * The label, required indicator, and helper text rendering follow the standard form-field layout; an optional info-icon toggletip can be attached next to the label for additional context.
+ * The label, required indicator, and helper text rendering follow the standard
+ * form-field layout; an optional info-icon toggletip can be attached next to the
+ * label for additional context.
  * 
  * **When to use**
  * 
- * - Use `mdc-input` for any short, free-form text entry: names, search terms, single-line addresses, codes, or any value that fits on one line.
- * - Use `mdc-input` when the field needs a label, helper/validation text, and form integration without wiring it by hand.
+ * - Use `mdc-input` for any short, free-form text entry: names, search terms,
+ *   single-line addresses, codes, or any value that fits on one line.
+ * - Use `mdc-input` when the field needs a label, helper/validation text, and form
+ *   integration without wiring it by hand.
  * 
  * **When not to use**
  * 
- * - Do not use `mdc-input` for multi-line entry such as messages or comments. Use `mdc-textarea` instead.
- * - Do not use `mdc-input` for masked credentials that need a show/hide toggle. Use `mdc-password` instead.
- * - Do not use `mdc-input` for search that filters page content. Use `mdc-searchfield` instead.
- * - Do not use `mdc-input` when the value must be chosen from a fixed set. Use `mdc-select` or `mdc-combobox` instead.
+ * - Do not use `mdc-input` for bounded numeric entry that benefits from stepwise
+ *   adjustment, such as quantities, counts, or prices. Use `mdc-numberinput`
+ *   instead. `mdc-input` remains the right choice for numeric-looking values that
+ *   are really strings — phone numbers, PINs, or account codes — where formatting
+ *   must be preserved and arithmetic stepping is meaningless.
+ * - Do not use `mdc-input` for multi-line entry such as messages or comments. Use
+ *   `mdc-textarea` instead.
+ * - Do not use `mdc-input` for masked credentials that need a show/hide toggle.
+ *   Use `mdc-password` instead.
+ * - Do not use `mdc-input` for search that filters page content. Use
+ *   `mdc-searchfield` instead.
+ * - Do not use `mdc-input` when the value must be chosen from a fixed set. Use
+ *   `mdc-select` or `mdc-combobox` instead.
  * 
  * @tagname mdc-input
  * 
@@ -117,6 +133,10 @@ declare class Input extends Input_base implements AssociatedFormControl {
      * @default 'off'
      */
     autocomplete: AutoCompleteType;
+    /**
+     * Hints at the type of data that might be entered by the user and the corresponding virtual keyboard.
+     */
+    inputmode?: InputModeType;
     /**
      * Specifies the name of the directionality of text for submission purposes (e.g., "rtl" for right-to-left).
      */
@@ -163,7 +183,7 @@ declare class Input extends Input_base implements AssociatedFormControl {
      * @param value - new value
      */
     attributeChangedCallback(name: string, old: string | null, value: string | null): void;
-    private setInputValidity;
+    protected setInputValidity(): void;
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**
      * Updates the value of the input field.

package/dist/components/input/input.component.js

@@ -344,6 +344,7 @@ class Input extends CharacterLimitMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
       maxlength=${ifDefined(this.maxlength)}
       autocapitalize=${this.autocapitalize}
       autocomplete=${this.autocomplete}
+      inputmode=${ifDefined(this.inputmode)}
       dirname=${ifDefined(this.dirname)}
       pattern=${ifDefined(this.pattern)}
       list=${ifDefined(this.list)}
@@ -414,6 +415,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], Input.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Input.prototype, "inputmode", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

package/dist/components/input/input.constants.d.ts

@@ -12,10 +12,21 @@ declare const AUTO_COMPLETE: {
     readonly OFF: "off";
     readonly ON: "on";
 };
+declare const INPUT_MODE: {
+    readonly NONE: "none";
+    readonly TEXT: "text";
+    readonly DECIMAL: "decimal";
+    readonly NUMERIC: "numeric";
+    readonly TEL: "tel";
+    readonly SEARCH: "search";
+    readonly EMAIL: "email";
+    readonly URL: "url";
+};
 declare const INPUT_TYPE: {
     readonly PASSWORD: "password";
     readonly TEXT: "text";
     readonly SEARCH: "search";
+    readonly NUMBER: "number";
 };
 declare const PREFIX_TEXT_OPTIONS: {
     MAX_LENGTH: number;
@@ -34,4 +45,4 @@ declare const DEFAULTS: {
     readonly AUTO_COMPLETE: "off";
     readonly INPUT_TYPE: "text";
 };
-export { TAG_NAME, PREFIX_TEXT_OPTIONS, AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_TYPE, DEFAULTS };
+export { TAG_NAME, PREFIX_TEXT_OPTIONS, AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_MODE, INPUT_TYPE, DEFAULTS };

package/dist/components/input/input.constants.js

@@ -15,10 +15,21 @@ const AUTO_COMPLETE = {
     OFF: 'off',
     ON: 'on',
 };
+const INPUT_MODE = {
+    NONE: 'none',
+    TEXT: 'text',
+    DECIMAL: 'decimal',
+    NUMERIC: 'numeric',
+    TEL: 'tel',
+    SEARCH: 'search',
+    EMAIL: 'email',
+    URL: 'url',
+};
 const INPUT_TYPE = {
     PASSWORD: 'password',
     TEXT: 'text',
     SEARCH: 'search',
+    NUMBER: 'number',
 };
 const PREFIX_TEXT_OPTIONS = {
     MAX_LENGTH: 10,
@@ -37,4 +48,4 @@ const DEFAULTS = {
     AUTO_COMPLETE: AUTO_COMPLETE.OFF,
     INPUT_TYPE: INPUT_TYPE.TEXT,
 };
-export { TAG_NAME, PREFIX_TEXT_OPTIONS, AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_TYPE, DEFAULTS };
+export { TAG_NAME, PREFIX_TEXT_OPTIONS, AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_MODE, INPUT_TYPE, DEFAULTS };

package/dist/components/input/input.types.d.ts

@@ -1,8 +1,9 @@
 import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
 import type Input from './input.component';
-import { AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_TYPE } from './input.constants';
+import { AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_MODE, INPUT_TYPE } from './input.constants';
 type AutoCapitalizeType = ValueOf<typeof AUTO_CAPITALIZE>;
 type AutoCompleteType = ValueOf<typeof AUTO_COMPLETE>;
+type InputModeType = ValueOf<typeof INPUT_MODE>;
 type InputType = ValueOf<typeof INPUT_TYPE>;
 type InputInputEvent = OverrideEventTarget<InputEvent, Input>;
 type InputChangeEvent = TypedCustomEvent<Input>;
@@ -18,4 +19,4 @@ interface Events {
     onClearEvent: InputClearEvent;
     onLimitExceededEvent: InputLimitExceededEvent;
 }
-export type { AutoCapitalizeType, AutoCompleteType, InputType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, InputLimitExceededEvent, Events, };
+export type { AutoCapitalizeType, AutoCompleteType, InputModeType, InputType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, InputLimitExceededEvent, Events, };

package/dist/components/numberinput/index.d.ts

@@ -0,0 +1,7 @@
+import NumberInput from './numberinput.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-numberinput']: NumberInput;
+    }
+}
+export default NumberInput;

package/dist/components/numberinput/index.js

@@ -0,0 +1,4 @@
+import NumberInput from './numberinput.component';
+import { TAG_NAME } from './numberinput.constants';
+NumberInput.register(TAG_NAME);
+export default NumberInput;

package/dist/components/numberinput/numberinput.component.d.ts

@@ -0,0 +1,193 @@
+import { CSSResult, PropertyValueMap } from 'lit';
+import Input from '../input/input.component';
+import type { InputModeType, InputType } from '../input/input.types';
+import type { ClampType } from './numberinput.types';
+/**
+ * The `mdc-numberinput` lets users enter and adjust a single numeric value,
+ * pairing a numeric text field with increment and decrement spinner buttons and
+ * native range and step validation. It exists for bounded or precise numeric entry
+ * — quantities, prices, durations — where users benefit from both direct typing
+ * and small stepwise adjustments.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-numberinput` to collect a single numeric value that users may want to
+ *   fine-tune in small increments, such as a quantity, count, or price.
+ * - Use `mdc-numberinput` with `min` and `max` to constrain input to a valid
+ *   range, and `step` to set the amount each spinner button click or arrow-key
+ *   press changes the value.
+ * - Use `mdc-numberinput` `step="any"` to accept decimal values without
+ *   step-mismatch validation. For values that must follow a fixed increment, such
+ *   as currency, set a numeric step like `step="0.01"` instead.
+ * - Use `mdc-numberinput` `hide-spinner-buttons` when the field should behave as a
+ *   plain numeric input without visible spinner controls.
+ * 
+ * **When not to use**
+ * 
+ * - Do not use `mdc-numberinput` for identifiers or formatted values such as phone
+ *   numbers, PINs, or account codes. Use `mdc-input` — these values are strings
+ *   rather than quantities, and number-field operations can alter their
+ *   formatting.
+ * - Do not use `mdc-numberinput` to choose from a small fixed set of numeric
+ *   options. Use `mdc-select` or a group of `mdc-radio` controls.
+ * - Do not use `mdc-numberinput` for coarse selection across a large range where
+ *   an exact value is not important. Use `mdc-slider`.
+ * - Do not use `mdc-numberinput` for time entry. Use `mdc-timepicker`.
+ * 
+ * @tagname mdc-numberinput
+ * 
+ * @event input - (React: onInput) This event is dispatched when the value of the number field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the number field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the number field receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the number field loses focus.
+ * @event clear - (React: onClear) This event is dispatched when the number field is cleared.
+ * 
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-toggletip
+ * 
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
+ * @slot trailing-button - Slot for the trailing content. If not provided, the increment/decrement spinner buttons are rendered by default; set `hideSpinnerButtons` to true to render the clear button instead (when `trailingButton` is set to true).
+ * 
+ * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing content.
+ * @csspart input-section - The container that wraps the input field and prefix text.
+ * @csspart input-text - The input field element.
+ * @csspart spinner-buttons - The container that wraps the increment and decrement spinner buttons.
+ * @csspart spinner-button - Each of the increment/decrement spinner button elements.
+ * @csspart label - The label element.
+ * @csspart helper-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element.
+ * 
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
+ * @cssproperty --mdc-label-color - Color for the label text.
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
+ * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.
+ * @cssproperty --mdc-input-text-color - Text color for the input field
+ * @cssproperty --mdc-input-border-color - Border color for the input container
+ * @cssproperty --mdc-input-background-color - Background color for the input field
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ */
+declare class NumberInput extends Input {
+    /**
+     * Hints that a numeric virtual keyboard should be displayed.
+     * @default 'numeric'
+     */
+    inputmode: InputModeType;
+    /**
+     * The minimum value that the number field will accept.
+     */
+    min?: number;
+    /**
+     * The maximum value that the number field will accept.
+     */
+    max?: number;
+    /**
+     * The amount that the value changes for each increment/decrement, whether from the
+     * spinner buttons or the up/down arrow keys. Set to `'any'` to allow any decimal value with no
+     * step-mismatch validation.
+     * @default 1
+     */
+    step: number | 'any';
+    /**
+     * Increment and decrement spinner buttons are shown alongside the input field by default.
+     * Set this to true to hide them.
+     * @default false
+     */
+    hideSpinnerButtons: boolean;
+    /**
+     * Aria label for the increment spinner button.
+     * @default ''
+     */
+    incrementAriaLabel: string;
+    /**
+     * Aria label for the decrement spinner button.
+     * @default ''
+     */
+    decrementAriaLabel: string;
+    /**
+     * Controls whether a value typed into the field is clamped to the min/max range. The spinner
+     * buttons and arrow keys always clamp; this only affects manual keyboard entry.
+     * - `none`: a typed value is left as entered and reported through range validity.
+     * - `auto`: a typed value is clamped to the min/max range when the field is committed (on change).
+     * @default 'none'
+     */
+    clamp: ClampType;
+    protected firstUpdated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /**
+     * Blocks insertion of non-numeric characters, including the `e`/`E`/`+` that native
+     * `type="number"` still accepts (and the arbitrary letters Firefox allows). Typed text arrives
+     * in `data`; pasted/dropped text arrives in `dataTransfer`. Deletions, caret navigation and IME
+     * composition carry neither, so they pass through. The sign (`-`) and decimal point (`.`) are
+     * numeric structural characters, so they are allowed and left to native range/step validation.
+     */
+    private handleBeforeInput;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /**
+     * Applies the min/max/step constraints to the native input element.
+     * These are not part of the Input template, so they are synced imperatively.
+     */
+    private syncNumberConstraints;
+    private handleIncrement;
+    private handleDecrement;
+    /**
+     * Native arrow-key stepping with step="any" is browser-inconsistent: Firefox rounds to a whole
+     * number (dropping the decimal part) while Chrome/Safari add or subtract 1. Route the arrow keys
+     * through the same stepBy() path as the spinner buttons so the decimal part is preserved in every
+     * browser. Numeric steps keep native handling, which is already consistent across browsers.
+     */
+    protected handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * With clamp="auto", a committed value typed outside the range is pulled back in before the base
+     * change handler syncs and re-dispatches it, so consumers and validity observe the clamped value.
+     * When the value is actually clamped an input event is emitted first, mirroring the native
+     * input-before-change order, so consumers that collect the value on input see the corrected value.
+     * Stepping already clamps, so this only covers manual keyboard entry.
+     */
+    protected onChange(event: Event): void;
+    /**
+     * Clamps the native input's committed value into the min/max range in place, returning whether the
+     * value changed. An empty or non-numeric field is left untouched so a cleared input is not forced
+     * to min/max.
+     */
+    private clampInputToRange;
+    /**
+     * stepUp()/stepDown() throw for step="any", so in that case the spinner buttons add/subtract 1 and
+     * clamp (matching native spin buttons); any value is already step-valid, so no alignment is
+     * needed. Otherwise the native step algorithm handles stepping and step-base alignment.
+     */
+    private stepBy;
+    /**
+     * stepUp()/stepDown() and valueAsNumber update the input element's value without dispatching
+     * input/change events. Replaying them on the input replays the native flow so the base Input
+     * handlers sync the value, form value and validity, then re-dispatch to consumers.
+     */
+    private syncValueFromInputElement;
+    /**
+     * Renders a single increment or decrement spinner button.
+     *
+     * The buttons are given `tabindex="-1"` so they are not in the tab order, matching native
+     * spin buttons: they are redundant pointer affordances for the `ArrowUp`/`ArrowDown` stepping
+     * already available from the focused input, so keyboard users reach the same behaviour without
+     * two extra tab stops per field.
+     */
+    protected renderSpinnerButton(direction: 'increment' | 'decrement'): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders the decrement/increment spinner buttons in place of the default trailing (clear) button
+     */
+    protected renderTrailingButton(show?: boolean): import("lit-html").TemplateResult<1> | typeof import("lit-html").nothing;
+    protected renderInputElement(_: InputType, hidePlaceholder?: boolean): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default NumberInput;