@material/web 1.0.2-nightly.f7a66a8.0 → 1.1.0

package/textfield/internal/text-field.js

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { html, LitElement, nothing } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { live } from 'lit/directives/live.js';
@@ -13,10 +13,13 @@ import { html as staticHtml } from 'lit/static-html.js';
 import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
 import { redispatchEvent } from '../../internal/controller/events.js';
 import { stringConverter } from '../../internal/controller/string-converter.js';
-import { internals, mixinElementInternals, } from '../../labs/behaviors/element-internals.js';
+import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../labs/behaviors/constraint-validation.js';
+import { mixinElementInternals } from '../../labs/behaviors/element-internals.js';
 import { getFormValue, mixinFormAssociated, } from '../../labs/behaviors/form-associated.js';
+import { mixinOnReportValidity, onReportValidity, } from '../../labs/behaviors/on-report-validity.js';
+import { TextFieldValidator } from '../../labs/behaviors/validators/text-field-validator.js';
 // Separate variable needed for closure.
-const textFieldBaseClass = mixinFormAssociated(mixinElementInternals(LitElement));
+const textFieldBaseClass = mixinOnReportValidity(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(LitElement))));
 /**
  * A text field component.
  *
@@ -189,17 +192,6 @@ export class TextField extends textFieldBaseClass {
          * `reportValidity()`.
          */
         this.nativeErrorText = '';
-        this.isCheckingValidity = false;
-        this.isReportingValidity = false;
-        // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
-        // Replace with this[internals].validity.customError when resolved.
-        this.hasCustomValidityError = false;
-        this.onInvalid = (invalidEvent) => {
-            if (this.isCheckingValidity || this.isReportingValidity) {
-                return;
-            }
-            this.showErrorMessage(false, invalidEvent);
-        };
     }
     /**
      * Gets or sets the direction in which selection occurred.
@@ -228,25 +220,6 @@ export class TextField extends textFieldBaseClass {
     set selectionStart(value) {
         this.getInputOrTextarea().selectionStart = value;
     }
-    /**
-     * Returns the text field's validation error message.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
-     */
-    get validationMessage() {
-        this.syncValidity();
-        return this[internals].validationMessage;
-    }
-    /**
-     * Returns a `ValidityState` object that represents the validity states of the
-     * text field.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
-     */
-    get validity() {
-        this.syncValidity();
-        return this[internals].validity;
-    }
     /**
      * The text field's value as a number.
      */
@@ -283,77 +256,9 @@ export class TextField extends textFieldBaseClass {
         input.valueAsDate = value;
         this.value = input.value;
     }
-    /**
-     * Returns whether an element will successfully validate based on forms
-     * validation rules and constraints.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate
-     */
-    get willValidate() {
-        this.syncValidity();
-        return this[internals].willValidate;
-    }
     get hasError() {
         return this.error || this.nativeError;
     }
-    /**
-     * Checks the text field's native validation and returns whether or not the
-     * element is valid.
-     *
-     * If invalid, this method will dispatch the `invalid` event.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
-     *
-     * @return true if the text field is valid, or false if not.
-     */
-    checkValidity() {
-        this.isCheckingValidity = true;
-        this.syncValidity();
-        const isValid = this[internals].checkValidity();
-        this.isCheckingValidity = false;
-        return isValid;
-    }
-    /**
-     * Checks the text field's native validation and returns whether or not the
-     * element is valid.
-     *
-     * If invalid, this method will dispatch the `invalid` event.
-     *
-     * This method will display or clear an error text message equal to the text
-     * field's `validationMessage`, unless the invalid event is canceled.
-     *
-     * Use `setCustomValidity()` to customize the `validationMessage`.
-     *
-     * This method can also be used to re-announce error messages to screen
-     * readers.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity
-     *
-     * @return true if the text field is valid, or false if not.
-     */
-    reportValidity() {
-        this.isReportingValidity = true;
-        let invalidEvent;
-        this.addEventListener('invalid', (event) => {
-            invalidEvent = event;
-        }, { once: true });
-        const valid = this.checkValidity();
-        this.showErrorMessage(valid, invalidEvent);
-        this.isReportingValidity = false;
-        return valid;
-    }
-    showErrorMessage(valid, invalidEvent) {
-        if (invalidEvent?.defaultPrevented) {
-            return valid;
-        }
-        const prevMessage = this.getErrorText();
-        this.nativeError = !valid;
-        this.nativeErrorText = this.validationMessage;
-        if (prevMessage === this.getErrorText()) {
-            this.field?.reannounceError();
-        }
-        return valid;
-    }
     /**
      * Selects all the text in the text field.
      *
@@ -362,21 +267,6 @@ export class TextField extends textFieldBaseClass {
     select() {
         this.getInputOrTextarea().select();
     }
-    /**
-     * Sets a custom validation error message for the text field. Use this for
-     * custom error message.
-     *
-     * When the error is not an empty string, the text field is considered invalid
-     * and `validity.customError` will be true.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
-     *
-     * @param error The error message to display.
-     */
-    setCustomValidity(error) {
-        this.hasCustomValidityError = !!error;
-        this[internals].setValidity({ customError: !!error }, error, this.getInputOrTextarea());
-    }
     setRangeText(...args) {
         // Calling setRangeText with 1 vs 3-4 arguments has different behavior.
         // Use spread syntax and type casting to ensure correct usage.
@@ -467,9 +357,6 @@ export class TextField extends textFieldBaseClass {
             // before checking its value.
             this.value = value;
         }
-        // Sync validity when properties change, since validation properties may
-        // have changed.
-        this.syncValidity();
     }
     renderField() {
         return staticHtml `<${this.fieldTag}
@@ -509,7 +396,7 @@ export class TextField extends textFieldBaseClass {
     `;
     }
     renderInputOrTextarea() {
-        const style = { direction: this.textDirection };
+        const style = { 'direction': this.textDirection };
         const ariaLabel = this.ariaLabel || this.label || nothing;
         // lit-anaylzer `autocomplete` types are too strict
         // tslint:disable-next-line:no-any
@@ -532,7 +419,7 @@ export class TextField extends textFieldBaseClass {
           rows=${this.rows}
           cols=${this.cols}
           .value=${live(this.value)}
-          @change=${this.handleChange}
+          @change=${this.redispatchEvent}
           @focusin=${this.handleFocusin}
           @focusout=${this.handleFocusout}
           @input=${this.handleInput}
@@ -606,13 +493,6 @@ export class TextField extends textFieldBaseClass {
     handleInput(event) {
         this.dirty = true;
         this.value = event.target.value;
-        // Sync validity so that clients can check validity on input.
-        this.syncValidity();
-    }
-    handleChange(event) {
-        // Sync validity so that clients can check validity on change.
-        this.syncValidity();
-        this.redispatchEvent(event);
     }
     redispatchEvent(event) {
         redispatchEvent(this, event);
@@ -641,32 +521,10 @@ export class TextField extends textFieldBaseClass {
         }
         return this.getInputOrTextarea();
     }
-    syncValidity() {
-        // Sync the internal <input>'s validity and the host's ElementInternals
-        // validity. We do this to re-use native `<input>` validation messages.
-        const input = this.getInputOrTextarea();
-        if (this.hasCustomValidityError) {
-            input.setCustomValidity(this[internals].validationMessage);
-        }
-        else {
-            input.setCustomValidity('');
-        }
-        this[internals].setValidity(input.validity, input.validationMessage, this.getInputOrTextarea());
-    }
     handleIconChange() {
         this.hasLeadingIcon = this.leadingIcons.length > 0;
         this.hasTrailingIcon = this.trailingIcons.length > 0;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        // Handles the case where the user submits the form and native validation
-        // error pops up. We want the error styles to show.
-        this.addEventListener('invalid', this.onInvalid);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('invalid', this.onInvalid);
-    }
     [getFormValue]() {
         return this.value;
     }
@@ -681,6 +539,32 @@ export class TextField extends textFieldBaseClass {
         // leading icon slot such as an iconbutton due to how delegatesFocus works.
         this.getInputOrTextarea().focus();
     }
+    [createValidator]() {
+        return new TextFieldValidator(() => ({
+            state: this,
+            renderedControl: this.inputOrTextarea,
+        }));
+    }
+    [getValidityAnchor]() {
+        return this.inputOrTextarea;
+    }
+    [onReportValidity](invalidEvent) {
+        if (invalidEvent?.defaultPrevented) {
+            return;
+        }
+        if (invalidEvent) {
+            // Prevent default pop-up behavior. This also prevents focusing, so we
+            // manually focus.
+            invalidEvent.preventDefault();
+            this.focus();
+        }
+        const prevMessage = this.getErrorText();
+        this.nativeError = !!invalidEvent;
+        this.nativeErrorText = this.validationMessage;
+        if (prevMessage === this.getErrorText()) {
+            this.field?.reannounceError();
+        }
+    }
 }
 (() => {
     requestUpdateOnAriaChange(TextField);

package/textfield/internal/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sourceRoot":"","sources":["text-field.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {live} from 'lit/directives/live.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {Field} from '../../field/internal/field.js';\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../internal/controller/events.js';\nimport {stringConverter} from '../../internal/controller/string-converter.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../labs/behaviors/element-internals.js';\nimport {\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\n\n/**\n * Input types that are compatible with the text field.\n */\nexport type TextFieldType =\n  | 'email'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'url'\n  | 'textarea';\n\n/**\n * Input types that are not fully supported for the text field.\n */\nexport type UnsupportedTextFieldType =\n  | 'color'\n  | 'date'\n  | 'datetime-local'\n  | 'file'\n  | 'month'\n  | 'time'\n  | 'week';\n\n/**\n * Input types that are incompatible with the text field.\n */\nexport type InvalidTextFieldType =\n  | 'button'\n  | 'checkbox'\n  | 'hidden'\n  | 'image'\n  | 'radio'\n  | 'range'\n  | 'reset'\n  | 'submit';\n\n// Separate variable needed for closure.\nconst textFieldBaseClass = mixinFormAssociated(\n  mixinElementInternals(LitElement),\n);\n\n/**\n * A text field component.\n *\n * @fires select {Event} The native `select` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event)\n * --bubbles\n * @fires change {Event} The native `change` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n * --bubbles\n * @fires input {InputEvent} The native `input` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)\n * --bubbles --composed\n */\nexport abstract class TextField extends textFieldBaseClass {\n  static {\n    requestUpdateOnAriaChange(TextField);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Gets or sets whether or not the text field is in a visually invalid state.\n   *\n   * This error state overrides the error state controlled by\n   * `reportValidity()`.\n   */\n  @property({type: Boolean, reflect: true}) error = false;\n\n  /**\n   * The error message that replaces supporting text when `error` is true. If\n   * `errorText` is an empty string, then the supporting text will continue to\n   * show.\n   *\n   * This error message overrides the error message displayed by\n   * `reportValidity()`.\n   */\n  @property({attribute: 'error-text'}) errorText = '';\n\n  @property() label = '';\n\n  @property({type: Boolean, reflect: true}) required = false;\n\n  /**\n   * The current value of the text field. It is always a string.\n   */\n  @property() value = '';\n\n  /**\n   * An optional prefix to display before the input value.\n   */\n  @property({attribute: 'prefix-text'}) prefixText = '';\n\n  /**\n   * An optional suffix to display after the input value.\n   */\n  @property({attribute: 'suffix-text'}) suffixText = '';\n\n  /**\n   * Whether or not the text field has a leading icon. Used for SSR.\n   */\n  @property({type: Boolean, attribute: 'has-leading-icon'})\n  hasLeadingIcon = false;\n\n  /**\n   * Whether or not the text field has a trailing icon. Used for SSR.\n   */\n  @property({type: Boolean, attribute: 'has-trailing-icon'})\n  hasTrailingIcon = false;\n\n  /**\n   * Conveys additional information below the text field, such as how it should\n   * be used.\n   */\n  @property({attribute: 'supporting-text'}) supportingText = '';\n\n  /**\n   * Override the input text CSS `direction`. Useful for RTL languages that use\n   * LTR notation for fractions.\n   */\n  @property({attribute: 'text-direction'}) textDirection = '';\n\n  /**\n   * The number of rows to display for a `type=\"textarea\"` text field.\n   * Defaults to 2.\n   */\n  @property({type: Number}) rows = 2;\n\n  /**\n   * The number of cols to display for a `type=\"textarea\"` text field.\n   * Defaults to 20.\n   */\n  @property({type: Number}) cols = 20;\n\n  // <input> properties\n  @property({reflect: true}) override inputMode = '';\n\n  /**\n   * Defines the greatest value in the range of permitted values.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max\n   */\n  @property() max = '';\n\n  /**\n   * The maximum number of characters a user can enter into the text field. Set\n   * to -1 for none.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength\n   */\n  @property({type: Number}) maxLength = -1;\n\n  /**\n   * Defines the most negative value in the range of permitted values.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min\n   */\n  @property() min = '';\n\n  /**\n   * The minimum number of characters a user can enter into the text field. Set\n   * to -1 for none.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength\n   */\n  @property({type: Number}) minLength = -1;\n\n  /**\n   * A regular expression that the text field's value must match to pass\n   * constraint validation.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern\n   */\n  @property() pattern = '';\n\n  @property({reflect: true, converter: stringConverter}) placeholder = '';\n\n  /**\n   * Indicates whether or not a user should be able to edit the text field's\n   * value.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly\n   */\n  @property({type: Boolean, reflect: true}) readOnly = false;\n\n  /**\n   * Indicates that input accepts multiple email addresses.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple\n   */\n  @property({type: Boolean, reflect: true}) multiple = false;\n\n  /**\n   * Gets or sets the direction in which selection occurred.\n   */\n  get selectionDirection() {\n    return this.getInputOrTextarea().selectionDirection;\n  }\n  set selectionDirection(value: 'forward' | 'backward' | 'none' | null) {\n    this.getInputOrTextarea().selectionDirection = value;\n  }\n\n  /**\n   * Gets or sets the end position or offset of a text selection.\n   */\n  get selectionEnd() {\n    return this.getInputOrTextarea().selectionEnd;\n  }\n  set selectionEnd(value: number | null) {\n    this.getInputOrTextarea().selectionEnd = value;\n  }\n\n  /**\n   * Gets or sets the starting position or offset of a text selection.\n   */\n  get selectionStart() {\n    return this.getInputOrTextarea().selectionStart;\n  }\n  set selectionStart(value: number | null) {\n    this.getInputOrTextarea().selectionStart = value;\n  }\n\n  /**\n   * Returns or sets the element's step attribute, which works with min and max\n   * to limit the increments at which a numeric or date-time value can be set.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n   */\n  @property() step = '';\n\n  /**\n   * The `<input>` type to use, defaults to \"text\". The type greatly changes how\n   * the text field behaves.\n   *\n   * Text fields support a limited number of `<input>` types:\n   *\n   * - text\n   * - textarea\n   * - email\n   * - number\n   * - password\n   * - search\n   * - tel\n   * - url\n   *\n   * See\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n   * for more details on each input type.\n   */\n  @property({reflect: true})\n  type: TextFieldType | UnsupportedTextFieldType = 'text';\n\n  /**\n   * Describes what, if any, type of autocomplete functionality the input\n   * should provide.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  @property({reflect: true}) autocomplete = '';\n\n  /**\n   * Returns the text field's validation error message.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n   */\n  get validationMessage() {\n    this.syncValidity();\n    return this[internals].validationMessage;\n  }\n\n  /**\n   * Returns a `ValidityState` object that represents the validity states of the\n   * text field.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n   */\n  get validity() {\n    this.syncValidity();\n    return this[internals].validity;\n  }\n\n  /**\n   * The text field's value as a number.\n   */\n  get valueAsNumber() {\n    const input = this.getInput();\n    if (!input) {\n      return NaN;\n    }\n\n    return input.valueAsNumber;\n  }\n  set valueAsNumber(value: number) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.valueAsNumber = value;\n    this.value = input.value;\n  }\n\n  /**\n   * The text field's value as a Date.\n   */\n  get valueAsDate() {\n    const input = this.getInput();\n    if (!input) {\n      return null;\n    }\n\n    return input.valueAsDate;\n  }\n  set valueAsDate(value: Date | null) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.valueAsDate = value;\n    this.value = input.value;\n  }\n\n  /**\n   * Returns whether an element will successfully validate based on forms\n   * validation rules and constraints.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n   */\n  get willValidate() {\n    this.syncValidity();\n    return this[internals].willValidate;\n  }\n\n  protected abstract readonly fieldTag: StaticValue;\n\n  /**\n   * Returns true when the text field has been interacted with. Native\n   * validation errors only display in response to user interactions.\n   */\n  @state() private dirty = false;\n  @state() private focused = false;\n  /**\n   * Whether or not a native error has been reported via `reportValidity()`.\n   */\n  @state() private nativeError = false;\n  /**\n   * The validation message displayed from a native error via\n   * `reportValidity()`.\n   */\n  @state() private nativeErrorText = '';\n\n  private get hasError() {\n    return this.error || this.nativeError;\n  }\n\n  @query('.input')\n  private readonly inputOrTextarea?:\n    | HTMLInputElement\n    | HTMLTextAreaElement\n    | null;\n  @query('.field') private readonly field?: Field | null;\n  @queryAssignedElements({slot: 'leading-icon'})\n  private readonly leadingIcons!: Element[];\n  @queryAssignedElements({slot: 'trailing-icon'})\n  private readonly trailingIcons!: Element[];\n  private isCheckingValidity = false;\n  private isReportingValidity = false;\n  // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432\n  // Replace with this[internals].validity.customError when resolved.\n  private hasCustomValidityError = false;\n\n  /**\n   * Checks the text field's native validation and returns whether or not the\n   * element is valid.\n   *\n   * If invalid, this method will dispatch the `invalid` event.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n   *\n   * @return true if the text field is valid, or false if not.\n   */\n  checkValidity() {\n    this.isCheckingValidity = true;\n    this.syncValidity();\n    const isValid = this[internals].checkValidity();\n    this.isCheckingValidity = false;\n    return isValid;\n  }\n\n  /**\n   * Checks the text field's native validation and returns whether or not the\n   * element is valid.\n   *\n   * If invalid, this method will dispatch the `invalid` event.\n   *\n   * This method will display or clear an error text message equal to the text\n   * field's `validationMessage`, unless the invalid event is canceled.\n   *\n   * Use `setCustomValidity()` to customize the `validationMessage`.\n   *\n   * This method can also be used to re-announce error messages to screen\n   * readers.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n   *\n   * @return true if the text field is valid, or false if not.\n   */\n  reportValidity() {\n    this.isReportingValidity = true;\n    let invalidEvent: Event | undefined;\n    this.addEventListener(\n      'invalid',\n      (event) => {\n        invalidEvent = event;\n      },\n      {once: true},\n    );\n\n    const valid = this.checkValidity();\n    this.showErrorMessage(valid, invalidEvent);\n\n    this.isReportingValidity = false;\n\n    return valid;\n  }\n\n  private showErrorMessage(valid: boolean, invalidEvent: Event | undefined) {\n    if (invalidEvent?.defaultPrevented) {\n      return valid;\n    }\n\n    const prevMessage = this.getErrorText();\n    this.nativeError = !valid;\n    this.nativeErrorText = this.validationMessage;\n\n    if (prevMessage === this.getErrorText()) {\n      this.field?.reannounceError();\n    }\n\n    return valid;\n  }\n\n  /**\n   * Selects all the text in the text field.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select\n   */\n  select() {\n    this.getInputOrTextarea().select();\n  }\n\n  /**\n   * Sets a custom validation error message for the text field. Use this for\n   * custom error message.\n   *\n   * When the error is not an empty string, the text field is considered invalid\n   * and `validity.customError` will be true.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n   *\n   * @param error The error message to display.\n   */\n  setCustomValidity(error: string) {\n    this.hasCustomValidityError = !!error;\n    this[internals].setValidity(\n      {customError: !!error},\n      error,\n      this.getInputOrTextarea(),\n    );\n  }\n\n  /**\n   * Replaces a range of text with a new string.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText\n   */\n  setRangeText(replacement: string): void;\n  setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectionMode?: SelectionMode,\n  ): void;\n  setRangeText(...args: unknown[]) {\n    // Calling setRangeText with 1 vs 3-4 arguments has different behavior.\n    // Use spread syntax and type casting to ensure correct usage.\n    this.getInputOrTextarea().setRangeText(\n      ...(args as Parameters<HTMLInputElement['setRangeText']>),\n    );\n    this.value = this.getInputOrTextarea().value;\n  }\n\n  /**\n   * Sets the start and end positions of a selection in the text field.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange\n   *\n   * @param start The offset into the text field for the start of the selection.\n   * @param end The offset into the text field for the end of the selection.\n   * @param direction The direction in which the selection is performed.\n   */\n  setSelectionRange(\n    start: number | null,\n    end: number | null,\n    direction?: 'forward' | 'backward' | 'none',\n  ) {\n    this.getInputOrTextarea().setSelectionRange(start, end, direction);\n  }\n\n  /**\n   * Decrements the value of a numeric type text field by `step` or `n` `step`\n   * number of times.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown\n   *\n   * @param stepDecrement The number of steps to decrement, defaults to 1.\n   */\n  stepDown(stepDecrement?: number) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.stepDown(stepDecrement);\n    this.value = input.value;\n  }\n\n  /**\n   * Increments the value of a numeric type text field by `step` or `n` `step`\n   * number of times.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp\n   *\n   * @param stepIncrement The number of steps to increment, defaults to 1.\n   */\n  stepUp(stepIncrement?: number) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.stepUp(stepIncrement);\n    this.value = input.value;\n  }\n\n  /**\n   * Reset the text field to its default value.\n   */\n  reset() {\n    this.dirty = false;\n    this.value = this.getAttribute('value') ?? '';\n    this.nativeError = false;\n    this.nativeErrorText = '';\n  }\n\n  override attributeChangedCallback(\n    attribute: string,\n    newValue: string | null,\n    oldValue: string | null,\n  ) {\n    if (attribute === 'value' && this.dirty) {\n      // After user input, changing the value attribute no longer updates the\n      // text field's value (until reset). This matches native <input> behavior.\n      return;\n    }\n\n    super.attributeChangedCallback(attribute, newValue, oldValue);\n  }\n\n  protected override render() {\n    const classes = {\n      'disabled': this.disabled,\n      'error': !this.disabled && this.hasError,\n      'textarea': this.type === 'textarea',\n    };\n\n    return html`\n      <span class=\"text-field ${classMap(classes)}\">\n        ${this.renderField()}\n      </span>\n    `;\n  }\n\n  protected override updated(changedProperties: PropertyValues) {\n    // Keep changedProperties arg so that subclasses may call it\n\n    // If a property such as `type` changes and causes the internal <input>\n    // value to change without dispatching an event, re-sync it.\n    const value = this.getInputOrTextarea().value;\n    if (this.value !== value) {\n      // Note this is typically inefficient in updated() since it schedules\n      // another update. However, it is needed for the <input> to fully render\n      // before checking its value.\n      this.value = value;\n    }\n\n    // Sync validity when properties change, since validation properties may\n    // have changed.\n    this.syncValidity();\n  }\n\n  private renderField() {\n    return staticHtml`<${this.fieldTag}\n      class=\"field\"\n      count=${this.value.length}\n      ?disabled=${this.disabled}\n      ?error=${this.hasError}\n      error-text=${this.getErrorText()}\n      ?focused=${this.focused}\n      ?has-end=${this.hasTrailingIcon}\n      ?has-start=${this.hasLeadingIcon}\n      label=${this.label}\n      max=${this.maxLength}\n      ?populated=${!!this.value}\n      ?required=${this.required}\n      ?resizable=${this.type === 'textarea'}\n      supporting-text=${this.supportingText}\n    >\n      ${this.renderLeadingIcon()}\n      ${this.renderInputOrTextarea()}\n      ${this.renderTrailingIcon()}\n      <div id=\"description\" slot=\"aria-describedby\"></div>\n    </${this.fieldTag}>`;\n  }\n\n  private renderLeadingIcon() {\n    return html`\n      <span class=\"icon leading\" slot=\"start\">\n        <slot name=\"leading-icon\" @slotchange=${this.handleIconChange}></slot>\n      </span>\n    `;\n  }\n\n  private renderTrailingIcon() {\n    return html`\n      <span class=\"icon trailing\" slot=\"end\">\n        <slot name=\"trailing-icon\" @slotchange=${this.handleIconChange}></slot>\n      </span>\n    `;\n  }\n\n  private renderInputOrTextarea() {\n    const style = {direction: this.textDirection};\n    const ariaLabel =\n      (this as ARIAMixinStrict).ariaLabel || this.label || nothing;\n    // lit-anaylzer `autocomplete` types are too strict\n    // tslint:disable-next-line:no-any\n    const autocomplete = this.autocomplete as any;\n\n    if (this.type === 'textarea') {\n      return html`\n        <textarea\n          class=\"input\"\n          style=${styleMap(style)}\n          aria-describedby=\"description\"\n          aria-invalid=${this.hasError}\n          aria-label=${ariaLabel}\n          autocomplete=${autocomplete || nothing}\n          ?disabled=${this.disabled}\n          maxlength=${this.maxLength > -1 ? this.maxLength : nothing}\n          minlength=${this.minLength > -1 ? this.minLength : nothing}\n          placeholder=${this.placeholder || nothing}\n          ?readonly=${this.readOnly}\n          ?required=${this.required}\n          rows=${this.rows}\n          cols=${this.cols}\n          .value=${live(this.value)}\n          @change=${this.handleChange}\n          @focusin=${this.handleFocusin}\n          @focusout=${this.handleFocusout}\n          @input=${this.handleInput}\n          @select=${this.redispatchEvent}></textarea>\n      `;\n    }\n\n    const prefix = this.renderPrefix();\n    const suffix = this.renderSuffix();\n\n    // TODO(b/243805848): remove `as unknown as number` and `as any` once lit\n    // analyzer is fixed\n    // tslint:disable-next-line:no-any\n    const inputMode = this.inputMode as any;\n    return html`\n      <div class=\"input-wrapper\">\n        ${prefix}\n        <input\n          class=\"input\"\n          style=${styleMap(style)}\n          aria-describedby=\"description\"\n          aria-invalid=${this.hasError}\n          aria-label=${ariaLabel}\n          autocomplete=${autocomplete || nothing}\n          ?disabled=${this.disabled}\n          inputmode=${inputMode || nothing}\n          max=${(this.max || nothing) as unknown as number}\n          maxlength=${this.maxLength > -1 ? this.maxLength : nothing}\n          min=${(this.min || nothing) as unknown as number}\n          minlength=${this.minLength > -1 ? this.minLength : nothing}\n          pattern=${this.pattern || nothing}\n          placeholder=${this.placeholder || nothing}\n          ?readonly=${this.readOnly}\n          ?required=${this.required}\n          ?multiple=${this.multiple}\n          step=${(this.step || nothing) as unknown as number}\n          type=${this.type}\n          .value=${live(this.value)}\n          @change=${this.redispatchEvent}\n          @focusin=${this.handleFocusin}\n          @focusout=${this.handleFocusout}\n          @input=${this.handleInput}\n          @select=${this.redispatchEvent} />\n        ${suffix}\n      </div>\n    `;\n  }\n\n  private renderPrefix() {\n    return this.renderAffix(this.prefixText, /* isSuffix */ false);\n  }\n\n  private renderSuffix() {\n    return this.renderAffix(this.suffixText, /* isSuffix */ true);\n  }\n\n  private renderAffix(text: string, isSuffix: boolean) {\n    if (!text) {\n      return nothing;\n    }\n\n    const classes = {\n      'suffix': isSuffix,\n      'prefix': !isSuffix,\n    };\n\n    return html`<span class=\"${classMap(classes)}\">${text}</span>`;\n  }\n\n  private getErrorText() {\n    return this.error ? this.errorText : this.nativeErrorText;\n  }\n\n  private handleFocusin() {\n    this.focused = true;\n  }\n\n  private handleFocusout() {\n    this.focused = false;\n  }\n\n  private handleInput(event: InputEvent) {\n    this.dirty = true;\n    this.value = (event.target as HTMLInputElement).value;\n    // Sync validity so that clients can check validity on input.\n    this.syncValidity();\n  }\n\n  private handleChange(event: Event) {\n    // Sync validity so that clients can check validity on change.\n    this.syncValidity();\n    this.redispatchEvent(event);\n  }\n\n  private redispatchEvent(event: Event) {\n    redispatchEvent(this, event);\n  }\n\n  private getInputOrTextarea() {\n    if (!this.inputOrTextarea) {\n      // If the input is not yet defined, synchronously render.\n      // e.g.\n      // const textField = document.createElement('md-outlined-text-field');\n      // document.body.appendChild(textField);\n      // textField.focus(); // synchronously render\n      this.connectedCallback();\n      this.scheduleUpdate();\n    }\n\n    if (this.isUpdatePending) {\n      // If there are pending updates, synchronously perform them. This ensures\n      // that constraint validation properties (like `required`) are synced\n      // before interacting with input APIs that depend on them.\n      this.scheduleUpdate();\n    }\n\n    return this.inputOrTextarea!;\n  }\n\n  private getInput() {\n    if (this.type === 'textarea') {\n      return null;\n    }\n\n    return this.getInputOrTextarea() as HTMLInputElement;\n  }\n\n  private syncValidity() {\n    // Sync the internal <input>'s validity and the host's ElementInternals\n    // validity. We do this to re-use native `<input>` validation messages.\n    const input = this.getInputOrTextarea();\n    if (this.hasCustomValidityError) {\n      input.setCustomValidity(this[internals].validationMessage);\n    } else {\n      input.setCustomValidity('');\n    }\n\n    this[internals].setValidity(\n      input.validity,\n      input.validationMessage,\n      this.getInputOrTextarea(),\n    );\n  }\n\n  private handleIconChange() {\n    this.hasLeadingIcon = this.leadingIcons.length > 0;\n    this.hasTrailingIcon = this.trailingIcons.length > 0;\n  }\n\n  private readonly onInvalid = (invalidEvent: Event) => {\n    if (this.isCheckingValidity || this.isReportingValidity) {\n      return;\n    }\n\n    this.showErrorMessage(false, invalidEvent);\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // Handles the case where the user submits the form and native validation\n    // error pops up. We want the error styles to show.\n    this.addEventListener('invalid', this.onInvalid);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('invalid', this.onInvalid);\n  }\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    return this.value;\n  }\n\n  override formResetCallback() {\n    this.reset();\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.value = state;\n  }\n\n  override focus() {\n    // Required for the case that the user slots a focusable element into the\n    // leading icon slot such as an iconbutton due to how delegatesFocus works.\n    this.getInputOrTextarea().focus();\n  }\n}\n"]}
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["text-field.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement, PropertyValues, html, nothing} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {live} from 'lit/directives/live.js';\nimport {StyleInfo, styleMap} from 'lit/directives/style-map.js';\nimport {StaticValue, html as staticHtml} from 'lit/static-html.js';\n\nimport {Field} from '../../field/internal/field.js';\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../internal/controller/events.js';\nimport {stringConverter} from '../../internal/controller/string-converter.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {\n  mixinOnReportValidity,\n  onReportValidity,\n} from '../../labs/behaviors/on-report-validity.js';\nimport {TextFieldValidator} from '../../labs/behaviors/validators/text-field-validator.js';\nimport {Validator} from '../../labs/behaviors/validators/validator.js';\n\n/**\n * Input types that are compatible with the text field.\n */\nexport type TextFieldType =\n  | 'email'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'url'\n  | 'textarea';\n\n/**\n * Input types that are not fully supported for the text field.\n */\nexport type UnsupportedTextFieldType =\n  | 'color'\n  | 'date'\n  | 'datetime-local'\n  | 'file'\n  | 'month'\n  | 'time'\n  | 'week';\n\n/**\n * Input types that are incompatible with the text field.\n */\nexport type InvalidTextFieldType =\n  | 'button'\n  | 'checkbox'\n  | 'hidden'\n  | 'image'\n  | 'radio'\n  | 'range'\n  | 'reset'\n  | 'submit';\n\n// Separate variable needed for closure.\nconst textFieldBaseClass = mixinOnReportValidity(\n  mixinConstraintValidation(\n    mixinFormAssociated(mixinElementInternals(LitElement)),\n  ),\n);\n\n/**\n * A text field component.\n *\n * @fires select {Event} The native `select` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event)\n * --bubbles\n * @fires change {Event} The native `change` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n * --bubbles\n * @fires input {InputEvent} The native `input` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)\n * --bubbles --composed\n */\nexport abstract class TextField extends textFieldBaseClass {\n  static {\n    requestUpdateOnAriaChange(TextField);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Gets or sets whether or not the text field is in a visually invalid state.\n   *\n   * This error state overrides the error state controlled by\n   * `reportValidity()`.\n   */\n  @property({type: Boolean, reflect: true}) error = false;\n\n  /**\n   * The error message that replaces supporting text when `error` is true. If\n   * `errorText` is an empty string, then the supporting text will continue to\n   * show.\n   *\n   * This error message overrides the error message displayed by\n   * `reportValidity()`.\n   */\n  @property({attribute: 'error-text'}) errorText = '';\n\n  @property() label = '';\n\n  @property({type: Boolean, reflect: true}) required = false;\n\n  /**\n   * The current value of the text field. It is always a string.\n   */\n  @property() value = '';\n\n  /**\n   * An optional prefix to display before the input value.\n   */\n  @property({attribute: 'prefix-text'}) prefixText = '';\n\n  /**\n   * An optional suffix to display after the input value.\n   */\n  @property({attribute: 'suffix-text'}) suffixText = '';\n\n  /**\n   * Whether or not the text field has a leading icon. Used for SSR.\n   */\n  @property({type: Boolean, attribute: 'has-leading-icon'})\n  hasLeadingIcon = false;\n\n  /**\n   * Whether or not the text field has a trailing icon. Used for SSR.\n   */\n  @property({type: Boolean, attribute: 'has-trailing-icon'})\n  hasTrailingIcon = false;\n\n  /**\n   * Conveys additional information below the text field, such as how it should\n   * be used.\n   */\n  @property({attribute: 'supporting-text'}) supportingText = '';\n\n  /**\n   * Override the input text CSS `direction`. Useful for RTL languages that use\n   * LTR notation for fractions.\n   */\n  @property({attribute: 'text-direction'}) textDirection = '';\n\n  /**\n   * The number of rows to display for a `type=\"textarea\"` text field.\n   * Defaults to 2.\n   */\n  @property({type: Number}) rows = 2;\n\n  /**\n   * The number of cols to display for a `type=\"textarea\"` text field.\n   * Defaults to 20.\n   */\n  @property({type: Number}) cols = 20;\n\n  // <input> properties\n  @property({reflect: true}) override inputMode = '';\n\n  /**\n   * Defines the greatest value in the range of permitted values.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max\n   */\n  @property() max = '';\n\n  /**\n   * The maximum number of characters a user can enter into the text field. Set\n   * to -1 for none.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength\n   */\n  @property({type: Number}) maxLength = -1;\n\n  /**\n   * Defines the most negative value in the range of permitted values.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min\n   */\n  @property() min = '';\n\n  /**\n   * The minimum number of characters a user can enter into the text field. Set\n   * to -1 for none.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength\n   */\n  @property({type: Number}) minLength = -1;\n\n  /**\n   * A regular expression that the text field's value must match to pass\n   * constraint validation.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern\n   */\n  @property() pattern = '';\n\n  @property({reflect: true, converter: stringConverter}) placeholder = '';\n\n  /**\n   * Indicates whether or not a user should be able to edit the text field's\n   * value.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly\n   */\n  @property({type: Boolean, reflect: true}) readOnly = false;\n\n  /**\n   * Indicates that input accepts multiple email addresses.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple\n   */\n  @property({type: Boolean, reflect: true}) multiple = false;\n\n  /**\n   * Gets or sets the direction in which selection occurred.\n   */\n  get selectionDirection() {\n    return this.getInputOrTextarea().selectionDirection;\n  }\n  set selectionDirection(value: 'forward' | 'backward' | 'none' | null) {\n    this.getInputOrTextarea().selectionDirection = value;\n  }\n\n  /**\n   * Gets or sets the end position or offset of a text selection.\n   */\n  get selectionEnd() {\n    return this.getInputOrTextarea().selectionEnd;\n  }\n  set selectionEnd(value: number | null) {\n    this.getInputOrTextarea().selectionEnd = value;\n  }\n\n  /**\n   * Gets or sets the starting position or offset of a text selection.\n   */\n  get selectionStart() {\n    return this.getInputOrTextarea().selectionStart;\n  }\n  set selectionStart(value: number | null) {\n    this.getInputOrTextarea().selectionStart = value;\n  }\n\n  /**\n   * Returns or sets the element's step attribute, which works with min and max\n   * to limit the increments at which a numeric or date-time value can be set.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n   */\n  @property() step = '';\n\n  /**\n   * The `<input>` type to use, defaults to \"text\". The type greatly changes how\n   * the text field behaves.\n   *\n   * Text fields support a limited number of `<input>` types:\n   *\n   * - text\n   * - textarea\n   * - email\n   * - number\n   * - password\n   * - search\n   * - tel\n   * - url\n   *\n   * See\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n   * for more details on each input type.\n   */\n  @property({reflect: true})\n  type: TextFieldType | UnsupportedTextFieldType = 'text';\n\n  /**\n   * Describes what, if any, type of autocomplete functionality the input\n   * should provide.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  @property({reflect: true}) autocomplete = '';\n\n  /**\n   * The text field's value as a number.\n   */\n  get valueAsNumber() {\n    const input = this.getInput();\n    if (!input) {\n      return NaN;\n    }\n\n    return input.valueAsNumber;\n  }\n  set valueAsNumber(value: number) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.valueAsNumber = value;\n    this.value = input.value;\n  }\n\n  /**\n   * The text field's value as a Date.\n   */\n  get valueAsDate() {\n    const input = this.getInput();\n    if (!input) {\n      return null;\n    }\n\n    return input.valueAsDate;\n  }\n  set valueAsDate(value: Date | null) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.valueAsDate = value;\n    this.value = input.value;\n  }\n\n  protected abstract readonly fieldTag: StaticValue;\n\n  /**\n   * Returns true when the text field has been interacted with. Native\n   * validation errors only display in response to user interactions.\n   */\n  @state() private dirty = false;\n  @state() private focused = false;\n  /**\n   * Whether or not a native error has been reported via `reportValidity()`.\n   */\n  @state() private nativeError = false;\n  /**\n   * The validation message displayed from a native error via\n   * `reportValidity()`.\n   */\n  @state() private nativeErrorText = '';\n\n  private get hasError() {\n    return this.error || this.nativeError;\n  }\n\n  @query('.input')\n  private readonly inputOrTextarea!:\n    | HTMLInputElement\n    | HTMLTextAreaElement\n    | null;\n  @query('.field') private readonly field!: Field | null;\n  @queryAssignedElements({slot: 'leading-icon'})\n  private readonly leadingIcons!: Element[];\n  @queryAssignedElements({slot: 'trailing-icon'})\n  private readonly trailingIcons!: Element[];\n\n  /**\n   * Selects all the text in the text field.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select\n   */\n  select() {\n    this.getInputOrTextarea().select();\n  }\n\n  /**\n   * Replaces a range of text with a new string.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText\n   */\n  setRangeText(replacement: string): void;\n  setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectionMode?: SelectionMode,\n  ): void;\n  setRangeText(...args: unknown[]) {\n    // Calling setRangeText with 1 vs 3-4 arguments has different behavior.\n    // Use spread syntax and type casting to ensure correct usage.\n    this.getInputOrTextarea().setRangeText(\n      ...(args as Parameters<HTMLInputElement['setRangeText']>),\n    );\n    this.value = this.getInputOrTextarea().value;\n  }\n\n  /**\n   * Sets the start and end positions of a selection in the text field.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange\n   *\n   * @param start The offset into the text field for the start of the selection.\n   * @param end The offset into the text field for the end of the selection.\n   * @param direction The direction in which the selection is performed.\n   */\n  setSelectionRange(\n    start: number | null,\n    end: number | null,\n    direction?: 'forward' | 'backward' | 'none',\n  ) {\n    this.getInputOrTextarea().setSelectionRange(start, end, direction);\n  }\n\n  /**\n   * Decrements the value of a numeric type text field by `step` or `n` `step`\n   * number of times.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown\n   *\n   * @param stepDecrement The number of steps to decrement, defaults to 1.\n   */\n  stepDown(stepDecrement?: number) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.stepDown(stepDecrement);\n    this.value = input.value;\n  }\n\n  /**\n   * Increments the value of a numeric type text field by `step` or `n` `step`\n   * number of times.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp\n   *\n   * @param stepIncrement The number of steps to increment, defaults to 1.\n   */\n  stepUp(stepIncrement?: number) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.stepUp(stepIncrement);\n    this.value = input.value;\n  }\n\n  /**\n   * Reset the text field to its default value.\n   */\n  reset() {\n    this.dirty = false;\n    this.value = this.getAttribute('value') ?? '';\n    this.nativeError = false;\n    this.nativeErrorText = '';\n  }\n\n  override attributeChangedCallback(\n    attribute: string,\n    newValue: string | null,\n    oldValue: string | null,\n  ) {\n    if (attribute === 'value' && this.dirty) {\n      // After user input, changing the value attribute no longer updates the\n      // text field's value (until reset). This matches native <input> behavior.\n      return;\n    }\n\n    super.attributeChangedCallback(attribute, newValue, oldValue);\n  }\n\n  protected override render() {\n    const classes = {\n      'disabled': this.disabled,\n      'error': !this.disabled && this.hasError,\n      'textarea': this.type === 'textarea',\n    };\n\n    return html`\n      <span class=\"text-field ${classMap(classes)}\">\n        ${this.renderField()}\n      </span>\n    `;\n  }\n\n  protected override updated(changedProperties: PropertyValues) {\n    // Keep changedProperties arg so that subclasses may call it\n\n    // If a property such as `type` changes and causes the internal <input>\n    // value to change without dispatching an event, re-sync it.\n    const value = this.getInputOrTextarea().value;\n    if (this.value !== value) {\n      // Note this is typically inefficient in updated() since it schedules\n      // another update. However, it is needed for the <input> to fully render\n      // before checking its value.\n      this.value = value;\n    }\n  }\n\n  private renderField() {\n    return staticHtml`<${this.fieldTag}\n      class=\"field\"\n      count=${this.value.length}\n      ?disabled=${this.disabled}\n      ?error=${this.hasError}\n      error-text=${this.getErrorText()}\n      ?focused=${this.focused}\n      ?has-end=${this.hasTrailingIcon}\n      ?has-start=${this.hasLeadingIcon}\n      label=${this.label}\n      max=${this.maxLength}\n      ?populated=${!!this.value}\n      ?required=${this.required}\n      ?resizable=${this.type === 'textarea'}\n      supporting-text=${this.supportingText}\n    >\n      ${this.renderLeadingIcon()}\n      ${this.renderInputOrTextarea()}\n      ${this.renderTrailingIcon()}\n      <div id=\"description\" slot=\"aria-describedby\"></div>\n    </${this.fieldTag}>`;\n  }\n\n  private renderLeadingIcon() {\n    return html`\n      <span class=\"icon leading\" slot=\"start\">\n        <slot name=\"leading-icon\" @slotchange=${this.handleIconChange}></slot>\n      </span>\n    `;\n  }\n\n  private renderTrailingIcon() {\n    return html`\n      <span class=\"icon trailing\" slot=\"end\">\n        <slot name=\"trailing-icon\" @slotchange=${this.handleIconChange}></slot>\n      </span>\n    `;\n  }\n\n  private renderInputOrTextarea() {\n    const style: StyleInfo = {'direction': this.textDirection};\n    const ariaLabel =\n      (this as ARIAMixinStrict).ariaLabel || this.label || nothing;\n    // lit-anaylzer `autocomplete` types are too strict\n    // tslint:disable-next-line:no-any\n    const autocomplete = this.autocomplete as any;\n\n    if (this.type === 'textarea') {\n      return html`\n        <textarea\n          class=\"input\"\n          style=${styleMap(style)}\n          aria-describedby=\"description\"\n          aria-invalid=${this.hasError}\n          aria-label=${ariaLabel}\n          autocomplete=${autocomplete || nothing}\n          ?disabled=${this.disabled}\n          maxlength=${this.maxLength > -1 ? this.maxLength : nothing}\n          minlength=${this.minLength > -1 ? this.minLength : nothing}\n          placeholder=${this.placeholder || nothing}\n          ?readonly=${this.readOnly}\n          ?required=${this.required}\n          rows=${this.rows}\n          cols=${this.cols}\n          .value=${live(this.value)}\n          @change=${this.redispatchEvent}\n          @focusin=${this.handleFocusin}\n          @focusout=${this.handleFocusout}\n          @input=${this.handleInput}\n          @select=${this.redispatchEvent}></textarea>\n      `;\n    }\n\n    const prefix = this.renderPrefix();\n    const suffix = this.renderSuffix();\n\n    // TODO(b/243805848): remove `as unknown as number` and `as any` once lit\n    // analyzer is fixed\n    // tslint:disable-next-line:no-any\n    const inputMode = this.inputMode as any;\n    return html`\n      <div class=\"input-wrapper\">\n        ${prefix}\n        <input\n          class=\"input\"\n          style=${styleMap(style)}\n          aria-describedby=\"description\"\n          aria-invalid=${this.hasError}\n          aria-label=${ariaLabel}\n          autocomplete=${autocomplete || nothing}\n          ?disabled=${this.disabled}\n          inputmode=${inputMode || nothing}\n          max=${(this.max || nothing) as unknown as number}\n          maxlength=${this.maxLength > -1 ? this.maxLength : nothing}\n          min=${(this.min || nothing) as unknown as number}\n          minlength=${this.minLength > -1 ? this.minLength : nothing}\n          pattern=${this.pattern || nothing}\n          placeholder=${this.placeholder || nothing}\n          ?readonly=${this.readOnly}\n          ?required=${this.required}\n          ?multiple=${this.multiple}\n          step=${(this.step || nothing) as unknown as number}\n          type=${this.type}\n          .value=${live(this.value)}\n          @change=${this.redispatchEvent}\n          @focusin=${this.handleFocusin}\n          @focusout=${this.handleFocusout}\n          @input=${this.handleInput}\n          @select=${this.redispatchEvent} />\n        ${suffix}\n      </div>\n    `;\n  }\n\n  private renderPrefix() {\n    return this.renderAffix(this.prefixText, /* isSuffix */ false);\n  }\n\n  private renderSuffix() {\n    return this.renderAffix(this.suffixText, /* isSuffix */ true);\n  }\n\n  private renderAffix(text: string, isSuffix: boolean) {\n    if (!text) {\n      return nothing;\n    }\n\n    const classes = {\n      'suffix': isSuffix,\n      'prefix': !isSuffix,\n    };\n\n    return html`<span class=\"${classMap(classes)}\">${text}</span>`;\n  }\n\n  private getErrorText() {\n    return this.error ? this.errorText : this.nativeErrorText;\n  }\n\n  private handleFocusin() {\n    this.focused = true;\n  }\n\n  private handleFocusout() {\n    this.focused = false;\n  }\n\n  private handleInput(event: InputEvent) {\n    this.dirty = true;\n    this.value = (event.target as HTMLInputElement).value;\n  }\n\n  private redispatchEvent(event: Event) {\n    redispatchEvent(this, event);\n  }\n\n  private getInputOrTextarea() {\n    if (!this.inputOrTextarea) {\n      // If the input is not yet defined, synchronously render.\n      // e.g.\n      // const textField = document.createElement('md-outlined-text-field');\n      // document.body.appendChild(textField);\n      // textField.focus(); // synchronously render\n      this.connectedCallback();\n      this.scheduleUpdate();\n    }\n\n    if (this.isUpdatePending) {\n      // If there are pending updates, synchronously perform them. This ensures\n      // that constraint validation properties (like `required`) are synced\n      // before interacting with input APIs that depend on them.\n      this.scheduleUpdate();\n    }\n\n    return this.inputOrTextarea!;\n  }\n\n  private getInput() {\n    if (this.type === 'textarea') {\n      return null;\n    }\n\n    return this.getInputOrTextarea() as HTMLInputElement;\n  }\n\n  private handleIconChange() {\n    this.hasLeadingIcon = this.leadingIcons.length > 0;\n    this.hasTrailingIcon = this.trailingIcons.length > 0;\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    return this.value;\n  }\n\n  override formResetCallback() {\n    this.reset();\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.value = state;\n  }\n\n  override focus() {\n    // Required for the case that the user slots a focusable element into the\n    // leading icon slot such as an iconbutton due to how delegatesFocus works.\n    this.getInputOrTextarea().focus();\n  }\n\n  [createValidator](): Validator<unknown> {\n    return new TextFieldValidator(() => ({\n      state: this,\n      renderedControl: this.inputOrTextarea,\n    }));\n  }\n\n  [getValidityAnchor](): HTMLElement | null {\n    return this.inputOrTextarea;\n  }\n\n  [onReportValidity](invalidEvent: Event | null) {\n    if (invalidEvent?.defaultPrevented) {\n      return;\n    }\n\n    if (invalidEvent) {\n      // Prevent default pop-up behavior. This also prevents focusing, so we\n      // manually focus.\n      invalidEvent.preventDefault();\n      this.focus();\n    }\n\n    const prevMessage = this.getErrorText();\n    this.nativeError = !!invalidEvent;\n    this.nativeErrorText = this.validationMessage;\n\n    if (prevMessage === this.getErrorText()) {\n      this.field?.reannounceError();\n    }\n  }\n}\n"]}

package/tokens/_md-comp-assist-chip.scss

@@ -42,6 +42,7 @@ $supported-tokens: (
   'hover-leading-icon-color',
   'hover-state-layer-color',
   'hover-state-layer-opacity',
+  'icon-label-space',
   'icon-size',
   'label-text-color',
   'label-text-font',
@@ -49,12 +50,15 @@ $supported-tokens: (
   'label-text-size',
   'label-text-weight',
   'leading-icon-color',
+  'leading-space',
   'outline-color',
   'outline-width',
   'pressed-label-text-color',
   'pressed-leading-icon-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
+  'trailing-space',
+  'with-leading-icon-leading-space',
   // go/keep-sorted end
 );
 
@@ -86,6 +90,13 @@ $_default: (
     md-comp-assist-chip.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
+      'leading-space': if($exclude-hardcoded-values, null, 16px),
+      'trailing-space': if($exclude-hardcoded-values, null, 16px),
+      'icon-label-space': if($exclude-hardcoded-values, null, 8px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 8px),
+    ),
     $renamed-tokens: (
       // Remove "flat-*" prefix (b/275577569)
       'flat-container-elevation': 'container-elevation',

package/tokens/_md-comp-filter-chip.scss

@@ -49,6 +49,7 @@ $supported-tokens: (
   'hover-state-layer-color',
   'hover-state-layer-opacity',
   'hover-trailing-icon-color',
+  'icon-label-space',
   'icon-size',
   'label-text-color',
   'label-text-font',
@@ -56,6 +57,7 @@ $supported-tokens: (
   'label-text-size',
   'label-text-weight',
   'leading-icon-color',
+  'leading-space',
   'outline-color',
   'outline-width',
   'pressed-label-text-color',
@@ -82,6 +84,9 @@ $supported-tokens: (
   'selected-pressed-trailing-icon-color',
   'selected-trailing-icon-color',
   'trailing-icon-color',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -127,6 +132,15 @@ $_default: (
     md-comp-filter-chip.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
+      'leading-space': if($exclude-hardcoded-values, null, 16px),
+      'trailing-space': if($exclude-hardcoded-values, null, 16px),
+      'icon-label-space': if($exclude-hardcoded-values, null, 8px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 8px),
+      'with-trailing-icon-trailing-space':
+        if($exclude-hardcoded-values, null, 8px),
+    ),
     $renamed-tokens: (
       // Remove "unselected-*" and "flat-*" prefix (b/275577569)
       'elevated-unselected-container-color': 'elevated-container-color',

package/tokens/_md-comp-input-chip.scss

@@ -42,6 +42,7 @@ $supported-tokens: (
   'hover-state-layer-color',
   'hover-state-layer-opacity',
   'hover-trailing-icon-color',
+  'icon-label-space',
   'icon-size',
   'label-text-color',
   'label-text-font',
@@ -49,6 +50,7 @@ $supported-tokens: (
   'label-text-size',
   'label-text-weight',
   'leading-icon-color',
+  'leading-space',
   'outline-color',
   'outline-width',
   'pressed-label-text-color',
@@ -75,6 +77,9 @@ $supported-tokens: (
   'selected-pressed-trailing-icon-color',
   'selected-trailing-icon-color',
   'trailing-icon-color',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -115,6 +120,15 @@ $_default: (
     md-comp-input-chip.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
+      'leading-space': if($exclude-hardcoded-values, null, 16px),
+      'trailing-space': if($exclude-hardcoded-values, null, 16px),
+      'icon-label-space': if($exclude-hardcoded-values, null, 8px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 8px),
+      'with-trailing-icon-trailing-space':
+        if($exclude-hardcoded-values, null, 8px),
+    ),
     $renamed-tokens: (
       // Remove "unselected-*" prefix (b/275577569)
       'disabled-unselected-outline-color': 'disabled-outline-color',

package/tokens/_md-comp-suggestion-chip.scss

@@ -42,6 +42,7 @@ $supported-tokens: (
   'hover-leading-icon-color',
   'hover-state-layer-color',
   'hover-state-layer-opacity',
+  'icon-label-space',
   'icon-size',
   'label-text-color',
   'label-text-font',
@@ -49,12 +50,15 @@ $supported-tokens: (
   'label-text-size',
   'label-text-weight',
   'leading-icon-color',
+  'leading-space',
   'outline-color',
   'outline-width',
   'pressed-label-text-color',
   'pressed-leading-icon-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
+  'trailing-space',
+  'with-leading-icon-leading-space',
   // go/keep-sorted end
 );
 
@@ -86,6 +90,13 @@ $_default: (
     md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
+      'leading-space': if($exclude-hardcoded-values, null, 16px),
+      'trailing-space': if($exclude-hardcoded-values, null, 16px),
+      'icon-label-space': if($exclude-hardcoded-values, null, 8px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 8px),
+    ),
     $renamed-tokens: (
       // Remove "flat-*" prefix (b/275577569)
       'flat-container-elevation': 'container-elevation',