@material/web 1.0.1 → 1.0.2-nightly.8eb1f30.0

package/textfield/filled-text-field.js

@@ -7,7 +7,6 @@ import { __decorate } from "tslib";
 import '../field/filled-field.js';
 import { customElement } from 'lit/decorators.js';
 import { literal } from 'lit/static-html.js';
-import { styles as filledForcedColorsStyles } from './internal/filled-forced-colors-styles.css.js';
 import { styles as filledStyles } from './internal/filled-styles.css.js';
 import { FilledTextField } from './internal/filled-text-field.js';
 import { styles as sharedStyles } from './internal/shared-styles.css.js';
@@ -22,7 +21,7 @@ export let MdFilledTextField = class MdFilledTextField extends FilledTextField {
         this.fieldTag = literal `md-filled-field`;
     }
 };
-MdFilledTextField.styles = [sharedStyles, filledStyles, filledForcedColorsStyles];
+MdFilledTextField.styles = [sharedStyles, filledStyles];
 MdFilledTextField = __decorate([
     customElement('md-filled-text-field')
 ], MdFilledTextField);

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

@@ -1 +1 @@
-{"version":3,"file":"filled-text-field.js","sourceRoot":"","sources":["filled-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,+CAA+C,CAAC;AACjG,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,eAAe,EAAC,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAUvE;;;;GAIG;AAEI,WAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,eAAe;IAA/C;;QAIuB,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IAClE,CAAC;;AAJiB,wBAAM,GAClB,CAAC,YAAY,EAAE,YAAY,EAAE,wBAAwB,CAAC,AADpC,CACqC;AAFhD,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAK7B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/filled-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as filledForcedColorsStyles} from './internal/filled-forced-colors-styles.css.js';\nimport {styles as filledStyles} from './internal/filled-styles.css.js';\nimport {FilledTextField} from './internal/filled-text-field.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\nexport {TextFieldType} from './internal/text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-text-field': MdFilledTextField;\n  }\n}\n\n/**\n * TODO(b/228525797): Add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-text-field')\nexport class MdFilledTextField extends FilledTextField {\n  static override styles =\n      [sharedStyles, filledStyles, filledForcedColorsStyles];\n\n  protected override readonly fieldTag = literal`md-filled-field`;\n}\n"]}
+{"version":3,"file":"filled-text-field.js","sourceRoot":"","sources":["filled-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,eAAe,EAAC,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAUvE;;;;GAIG;AAEI,WAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,eAAe;IAA/C;;QAGuB,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IAClE,CAAC;;AAHiB,wBAAM,GAAG,CAAC,YAAY,EAAE,YAAY,CAAC,AAA/B,CAAgC;AAD3C,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAI7B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/filled-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as filledStyles} from './internal/filled-styles.css.js';\nimport {FilledTextField} from './internal/filled-text-field.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\nexport {TextFieldType} from './internal/text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-text-field': MdFilledTextField;\n  }\n}\n\n/**\n * TODO(b/228525797): Add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-text-field')\nexport class MdFilledTextField extends FilledTextField {\n  static override styles = [sharedStyles, filledStyles];\n\n  protected override readonly fieldTag = literal`md-filled-field`;\n}\n"]}

package/textfield/harness.js

@@ -83,8 +83,9 @@ export class TextFieldHarness extends Harness {
     }
     simulateDeletion(element, beginIndex, endIndex, init) {
         const deletedCharacters = element.value.slice(beginIndex, endIndex);
-        element.value = element.value.substring(0, beginIndex ?? 0) +
-            element.value.substring(endIndex ?? element.value.length);
+        element.value =
+            element.value.substring(0, beginIndex ?? 0) +
+                element.value.substring(endIndex ?? element.value.length);
         if (!init) {
             init = {
                 inputType: 'deleteContentBackward',

package/textfield/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,OAAkB;IAAxD;;QACE,wEAAwE;QAChE,sBAAiB,GAAG,EAAE,CAAC;IAmHjC,CAAC;IAjHC;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,UAAU,CAAC,KAAa;QAC5B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,IAAI,CAAC,gBAAgB,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,IAAI,CAAC,CAAC;YAChE,IAAI,CAAC,aAAa,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,IAAI,CAAC,CAAC;SAC9D;IACH,CAAC;IAED;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,WAAW,CAAC,UAAmB,EAAE,QAAiB;QACtD,IAAI,CAAC,gBAAgB,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,WAAW,CAAC,CAAC;QACvE,IAAI,CAAC,gBAAgB,CACjB,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAChE,CAAC;IAEQ,KAAK,CAAC,KAAK;QAClB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAC5C,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IAEQ,KAAK,CAAC,IAAI;QACjB,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;QACnB,IAAI,CAAC,sBAAsB,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;IAClE,CAAC;IAEkB,oBAAoB,CAAC,KAAkB;QACxD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,IAAI,SAAS,CAAC,QAAQ,EAAE;YACtB,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC,KAAK,CAAC;QACzC,KAAK,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAES,aAAa,CACnB,OAA6C,EAAE,kBAA0B,EACzE,IAAqB;QACvB,OAAO,CAAC,KAAK,IAAI,kBAAkB,CAAC;QACpC,IAAI,CAAC,IAAI,EAAE;YACT,IAAI,GAAG;gBACL,SAAS,EAAE,YAAY;gBACvB,QAAQ,EAAE,IAAI;gBACd,OAAO,EAAE,IAAI;gBACb,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,kBAAkB;aACzB,CAAC;SACH;QAED,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IACvD,CAAC;IAES,gBAAgB,CACtB,OAA6C,EAAE,UAAmB,EAClE,QAAiB,EAAE,IAAqB;QAC1C,MAAM,iBAAiB,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACpE,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,IAAI,CAAC,CAAC;YACvD,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,EAAE;YACT,IAAI,GAAG;gBACL,SAAS,EAAE,uBAAuB;gBAClC,QAAQ,EAAE,IAAI;gBACd,OAAO,EAAE,IAAI;gBACb,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,iBAAiB;aACxB,CAAC;SACH;QAED,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IACvD,CAAC;IAES,sBAAsB,CAAC,OACmB;QAClD,IAAI,IAAI,CAAC,iBAAiB,KAAK,OAAO,CAAC,KAAK,EAAE;YAC5C,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAAK,CAAC;QACvC,OAAO,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC7C,CAAC;IAEkB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAC9B,CAAC;IAC1B,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {TextField} from './internal/text-field.js';\n\n/**\n * Test harness for text field elements.\n */\nexport class TextFieldHarness extends Harness<TextField> {\n  /** Used to track whether or not a change event should be dispatched. */\n  private valueBeforeChange = '';\n\n  /**\n   * Simulates a user typing a value one character at a time. This will fire\n   * multiple input events.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.inputValue('value'); // input events\n   * await harness.blur(); // change event\n   *\n   * @param value The value to simulating typing.\n   */\n  async inputValue(value: string) {\n    for (const char of value) {\n      this.simulateKeypress(await this.getInteractiveElement(), char);\n      this.simulateInput(await this.getInteractiveElement(), char);\n    }\n  }\n\n  /**\n   * Simulates a user deleting part of a value with the backspace key.\n   * By default, the entire value is deleted. This will fire a single input\n   * event.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.deleteValue(); // input event\n   * await harness.blur(); // change event\n   *\n   * @param beginIndex The starting index of the value to delete.\n   * @param endIndex The ending index of the value to delete.\n   */\n  async deleteValue(beginIndex?: number, endIndex?: number) {\n    this.simulateKeypress(await this.getInteractiveElement(), 'Backspace');\n    this.simulateDeletion(\n        await this.getInteractiveElement(), beginIndex, endIndex);\n  }\n\n  override async reset() {\n    this.element.reset();\n    this.valueBeforeChange = this.element.value;\n    await super.reset();\n  }\n\n  override async blur() {\n    await super.blur();\n    this.simulateChangeIfNeeded(await this.getInteractiveElement());\n  }\n\n  protected override simulatePointerFocus(input: HTMLElement) {\n    const textField = this.element;\n    if (textField.disabled) {\n      return;\n    }\n\n    this.valueBeforeChange = textField.value;\n    super.simulatePointerFocus(input);\n  }\n\n  protected simulateInput(\n      element: HTMLInputElement|HTMLTextAreaElement, charactersToAppend: string,\n      init?: InputEventInit) {\n    element.value += charactersToAppend;\n    if (!init) {\n      init = {\n        inputType: 'insertText',\n        composed: true,\n        bubbles: true,\n        isComposing: false,\n        data: charactersToAppend,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateDeletion(\n      element: HTMLInputElement|HTMLTextAreaElement, beginIndex?: number,\n      endIndex?: number, init?: InputEventInit) {\n    const deletedCharacters = element.value.slice(beginIndex, endIndex);\n    element.value = element.value.substring(0, beginIndex ?? 0) +\n        element.value.substring(endIndex ?? element.value.length);\n    if (!init) {\n      init = {\n        inputType: 'deleteContentBackward',\n        composed: true,\n        bubbles: true,\n        isComposing: false,\n        data: deletedCharacters,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateChangeIfNeeded(element: HTMLInputElement|\n                                   HTMLTextAreaElement) {\n    if (this.valueBeforeChange === element.value) {\n      return;\n    }\n\n    this.valueBeforeChange = element.value;\n    element.dispatchEvent(new Event('change'));\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.input') as HTMLInputElement |\n        HTMLTextAreaElement;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.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 {Harness} from '../testing/harness.js';\n\nimport {TextField} from './internal/text-field.js';\n\n/**\n * Test harness for text field elements.\n */\nexport class TextFieldHarness extends Harness<TextField> {\n  /** Used to track whether or not a change event should be dispatched. */\n  private valueBeforeChange = '';\n\n  /**\n   * Simulates a user typing a value one character at a time. This will fire\n   * multiple input events.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.inputValue('value'); // input events\n   * await harness.blur(); // change event\n   *\n   * @param value The value to simulating typing.\n   */\n  async inputValue(value: string) {\n    for (const char of value) {\n      this.simulateKeypress(await this.getInteractiveElement(), char);\n      this.simulateInput(await this.getInteractiveElement(), char);\n    }\n  }\n\n  /**\n   * Simulates a user deleting part of a value with the backspace key.\n   * By default, the entire value is deleted. This will fire a single input\n   * event.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.deleteValue(); // input event\n   * await harness.blur(); // change event\n   *\n   * @param beginIndex The starting index of the value to delete.\n   * @param endIndex The ending index of the value to delete.\n   */\n  async deleteValue(beginIndex?: number, endIndex?: number) {\n    this.simulateKeypress(await this.getInteractiveElement(), 'Backspace');\n    this.simulateDeletion(\n      await this.getInteractiveElement(),\n      beginIndex,\n      endIndex,\n    );\n  }\n\n  override async reset() {\n    this.element.reset();\n    this.valueBeforeChange = this.element.value;\n    await super.reset();\n  }\n\n  override async blur() {\n    await super.blur();\n    this.simulateChangeIfNeeded(await this.getInteractiveElement());\n  }\n\n  protected override simulatePointerFocus(input: HTMLElement) {\n    const textField = this.element;\n    if (textField.disabled) {\n      return;\n    }\n\n    this.valueBeforeChange = textField.value;\n    super.simulatePointerFocus(input);\n  }\n\n  protected simulateInput(\n    element: HTMLInputElement | HTMLTextAreaElement,\n    charactersToAppend: string,\n    init?: InputEventInit,\n  ) {\n    element.value += charactersToAppend;\n    if (!init) {\n      init = {\n        inputType: 'insertText',\n        composed: true,\n        bubbles: true,\n        isComposing: false,\n        data: charactersToAppend,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateDeletion(\n    element: HTMLInputElement | HTMLTextAreaElement,\n    beginIndex?: number,\n    endIndex?: number,\n    init?: InputEventInit,\n  ) {\n    const deletedCharacters = element.value.slice(beginIndex, endIndex);\n    element.value =\n      element.value.substring(0, beginIndex ?? 0) +\n      element.value.substring(endIndex ?? element.value.length);\n    if (!init) {\n      init = {\n        inputType: 'deleteContentBackward',\n        composed: true,\n        bubbles: true,\n        isComposing: false,\n        data: deletedCharacters,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateChangeIfNeeded(\n    element: HTMLInputElement | HTMLTextAreaElement,\n  ) {\n    if (this.valueBeforeChange === element.value) {\n      return;\n    }\n\n    this.valueBeforeChange = element.value;\n    element.dispatchEvent(new Event('change'));\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.input') as\n      | HTMLInputElement\n      | HTMLTextAreaElement;\n  }\n}\n"]}

package/textfield/internal/text-field.d.ts

@@ -5,6 +5,7 @@
  */
 import { LitElement, PropertyValues } from 'lit';
 import { StaticValue } from 'lit/static-html.js';
+import { getFormValue } from '../../labs/behaviors/form-associated.js';
 /**
  * Input types that are compatible with the text field.
  */
@@ -17,15 +18,23 @@ export type UnsupportedTextFieldType = 'color' | 'date' | 'datetime-local' | 'fi
  * Input types that are incompatible with the text field.
  */
 export type InvalidTextFieldType = 'button' | 'checkbox' | 'hidden' | 'image' | 'radio' | 'range' | 'reset' | 'submit';
+declare const textFieldBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../labs/behaviors/form-associated.js").FormAssociatedConstructor, import("../../labs/behaviors/form-associated.js").FormAssociated>;
 /**
  * A text field component.
+ *
+ * @fires select {Event} The native `select` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event)
+ * --bubbles
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
  */
-export declare abstract class TextField extends LitElement {
+export declare abstract class TextField extends textFieldBaseClass {
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
-    /** @nocollapse  */
-    static readonly formAssociated = true;
-    disabled: boolean;
     /**
      * Gets or sets whether or not the text field is in a visually invalid state.
      *
@@ -80,18 +89,10 @@ export declare abstract class TextField extends LitElement {
      */
     rows: number;
     /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form(): HTMLFormElement;
-    /**
-     * The labels this element is associated with.
+     * The number of cols to display for a `type="textarea"` text field.
+     * Defaults to 20.
      */
-    get labels(): NodeList;
-    /**
-     * The HTML name to use in form submission.
-     */
-    get name(): string;
-    set name(name: string);
+    cols: number;
     inputMode: string;
     /**
      * Defines the greatest value in the range of permitted values.
@@ -240,8 +241,9 @@ export declare abstract class TextField extends LitElement {
     private readonly field?;
     private readonly leadingIcons;
     private readonly trailingIcons;
+    private isCheckingValidity;
+    private isReportingValidity;
     private hasCustomValidityError;
-    private readonly internals;
     /**
      * Checks the text field's native validation and returns whether or not the
      * element is valid.
@@ -272,6 +274,7 @@ export declare abstract class TextField extends LitElement {
      * @return true if the text field is valid, or false if not.
      */
     reportValidity(): boolean;
+    private showErrorMessage;
     /**
      * Selects all the text in the text field.
      *
@@ -349,9 +352,14 @@ export declare abstract class TextField extends LitElement {
     private getInput;
     private syncValidity;
     private handleIconChange;
-    /** @private */
+    private readonly onInvalid;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    disabled: boolean;
+    name: string;
+    [getFormValue](): string;
     formResetCallback(): void;
-    /** @private */
     formStateRestoreCallback(state: string): void;
     focus(): void;
 }
+export {};

package/textfield/internal/text-field.js

@@ -13,13 +13,26 @@ 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 { getFormValue, mixinFormAssociated, } from '../../labs/behaviors/form-associated.js';
+// Separate variable needed for closure.
+const textFieldBaseClass = mixinFormAssociated(mixinElementInternals(LitElement));
 /**
  * A text field component.
+ *
+ * @fires select {Event} The native `select` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event)
+ * --bubbles
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
  */
-export class TextField extends LitElement {
+export class TextField extends textFieldBaseClass {
     constructor() {
         super(...arguments);
-        this.disabled = false;
         /**
          * Gets or sets whether or not the text field is in a visually invalid state.
          *
@@ -73,6 +86,11 @@ export class TextField extends LitElement {
          * Defaults to 2.
          */
         this.rows = 2;
+        /**
+         * The number of cols to display for a `type="textarea"` text field.
+         * Defaults to 20.
+         */
+        this.cols = 20;
         // <input> properties
         this.inputMode = '';
         /**
@@ -171,31 +189,17 @@ export class TextField extends LitElement {
          * `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.
+        // Replace with this[internals].validity.customError when resolved.
         this.hasCustomValidityError = false;
-        this.internals = this /* needed for closure */.attachInternals();
-    }
-    /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form() {
-        return this.internals.form;
-    }
-    /**
-     * The labels this element is associated with.
-     */
-    get labels() {
-        return this.internals.labels;
-    }
-    /**
-     * The HTML name to use in form submission.
-     */
-    get name() {
-        return this.getAttribute('name') ?? '';
-    }
-    set name(name) {
-        this.setAttribute('name', name);
+        this.onInvalid = (invalidEvent) => {
+            if (this.isCheckingValidity || this.isReportingValidity) {
+                return;
+            }
+            this.showErrorMessage(false, invalidEvent);
+        };
     }
     /**
      * Gets or sets the direction in which selection occurred.
@@ -231,7 +235,7 @@ export class TextField extends LitElement {
      */
     get validationMessage() {
         this.syncValidity();
-        return this.internals.validationMessage;
+        return this[internals].validationMessage;
     }
     /**
      * Returns a `ValidityState` object that represents the validity states of the
@@ -241,7 +245,7 @@ export class TextField extends LitElement {
      */
     get validity() {
         this.syncValidity();
-        return this.internals.validity;
+        return this[internals].validity;
     }
     /**
      * The text field's value as a number.
@@ -287,7 +291,7 @@ export class TextField extends LitElement {
      */
     get willValidate() {
         this.syncValidity();
-        return this.internals.willValidate;
+        return this[internals].willValidate;
     }
     get hasError() {
         return this.error || this.nativeError;
@@ -303,8 +307,11 @@ export class TextField extends LitElement {
      * @return true if the text field is valid, or false if not.
      */
     checkValidity() {
+        this.isCheckingValidity = true;
         this.syncValidity();
-        return this.internals.checkValidity();
+        const isValid = this[internals].checkValidity();
+        this.isCheckingValidity = false;
+        return isValid;
     }
     /**
      * Checks the text field's native validation and returns whether or not the
@@ -325,11 +332,17 @@ export class TextField extends LitElement {
      * @return true if the text field is valid, or false if not.
      */
     reportValidity() {
+        this.isReportingValidity = true;
         let invalidEvent;
-        this.addEventListener('invalid', event => {
+        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;
         }
@@ -362,7 +375,7 @@ export class TextField extends LitElement {
      */
     setCustomValidity(error) {
         this.hasCustomValidityError = !!error;
-        this.internals.setValidity({ customError: !!error }, error, this.getInputOrTextarea());
+        this[internals].setValidity({ customError: !!error }, error, this.getInputOrTextarea());
     }
     setRangeText(...args) {
         // Calling setRangeText with 1 vs 3-4 arguments has different behavior.
@@ -438,10 +451,10 @@ export class TextField extends LitElement {
             'textarea': this.type === 'textarea',
         };
         return html `
-       <span class="text-field ${classMap(classes)}">
-         ${this.renderField()}
-       </span>
-     `;
+      <span class="text-field ${classMap(classes)}">
+        ${this.renderField()}
+      </span>
+    `;
     }
     updated(changedProperties) {
         // Keep changedProperties arg so that subclasses may call it
@@ -454,7 +467,6 @@ export class TextField extends LitElement {
             // before checking its value.
             this.value = value;
         }
-        this.internals.setFormValue(value);
         // Sync validity when properties change, since validation properties may
         // have changed.
         this.syncValidity();
@@ -484,17 +496,17 @@ export class TextField extends LitElement {
     }
     renderLeadingIcon() {
         return html `
-       <span class="icon leading" slot="start">
-         <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
-       </span>
-     `;
+      <span class="icon leading" slot="start">
+        <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+    `;
     }
     renderTrailingIcon() {
         return html `
-       <span class="icon trailing" slot="end">
-         <slot name="trailing-icon" @slotchange=${this.handleIconChange}></slot>
-       </span>
-     `;
+      <span class="icon trailing" slot="end">
+        <slot name="trailing-icon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+    `;
     }
     renderInputOrTextarea() {
         const style = { direction: this.textDirection };
@@ -518,13 +530,13 @@ export class TextField extends LitElement {
           ?readonly=${this.readOnly}
           ?required=${this.required}
           rows=${this.rows}
+          cols=${this.cols}
           .value=${live(this.value)}
           @change=${this.handleChange}
           @focusin=${this.handleFocusin}
           @focusout=${this.handleFocusout}
           @input=${this.handleInput}
-          @select=${this.redispatchEvent}
-        ></textarea>
+          @select=${this.redispatchEvent}></textarea>
       `;
         }
         const prefix = this.renderPrefix();
@@ -561,8 +573,7 @@ export class TextField extends LitElement {
           @focusin=${this.handleFocusin}
           @focusout=${this.handleFocusout}
           @input=${this.handleInput}
-          @select=${this.redispatchEvent}
-        >
+          @select=${this.redispatchEvent} />
         ${suffix}
       </div>
     `;
@@ -635,22 +646,33 @@ export class TextField extends LitElement {
         // validity. We do this to re-use native `<input>` validation messages.
         const input = this.getInputOrTextarea();
         if (this.hasCustomValidityError) {
-            input.setCustomValidity(this.internals.validationMessage);
+            input.setCustomValidity(this[internals].validationMessage);
         }
         else {
             input.setCustomValidity('');
         }
-        this.internals.setValidity(input.validity, input.validationMessage, this.getInputOrTextarea());
+        this[internals].setValidity(input.validity, input.validationMessage, this.getInputOrTextarea());
     }
     handleIconChange() {
         this.hasLeadingIcon = this.leadingIcons.length > 0;
         this.hasTrailingIcon = this.trailingIcons.length > 0;
     }
-    /** @private */
+    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;
+    }
     formResetCallback() {
         this.reset();
     }
-    /** @private */
     formStateRestoreCallback(state) {
         this.value = state;
     }
@@ -664,12 +686,10 @@ export class TextField extends LitElement {
     requestUpdateOnAriaChange(TextField);
 })();
 /** @nocollapse */
-TextField.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
-/** @nocollapse  */
-TextField.formAssociated = true;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextField.prototype, "disabled", void 0);
+TextField.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TextField.prototype, "error", void 0);
@@ -706,6 +726,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], TextField.prototype, "rows", void 0);
+__decorate([
+    property({ type: Number })
+], TextField.prototype, "cols", void 0);
 __decorate([
     property({ reflect: true })
 ], TextField.prototype, "inputMode", void 0);