@material/web 1.0.1 → 1.0.2-nightly.33c1afe.0

package/select/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,YAAY,EAAC,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,mBAAmB,EAAC,MAAM,oCAAoC,CAAC;AAEvE;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IACtC,QAAQ;QAChB,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAU,CAAC;IAClE,CAAC;IACD;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;IACzB,CAAC;IAEQ,KAAK,CAAC,UAAU;QACvB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACpC,MAAM,OAAO,GACT,MAAM,CAAC,IAAI,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;QACnE,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IAED,uDAAuD;IACvD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAC3B,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,mBAAmB,CAAC,IAA8B,CAAC,CAAC,CAAC;IACzE,CAAC;IAED,KAAK,CAAC,KAAK;QACT,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACpC,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,KAAa;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAE,CAAC;QAC/D,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,CAAC,IAAI,CACR,wEAAwE,CAAC,CAAC;SAC/E;QACD,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,qBAAqB,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;IACjE,CAAC;CACF;AAED,+BAA+B;AAC/B,MAAM,mBAAoB,SAAQ,YAAY;IAC5C,4EAA4E;IACnE,qBAAqB;QAC5B,OAAO,KAAK,CAAC,qBAAqB,EAAE,CAAC;IACvC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {FieldHarness} from '../field/harness.js';\nimport {Field} from '../field/internal/field.js';\nimport {Harness} from '../testing/harness.js';\n\nimport {Select} from './internal/select.js';\nimport {SelectOptionHarness} from './internal/selectoption/harness.js';\n\n/**\n * Test harness for menu.\n */\nexport class SelectHarness extends Harness<Select> {\n  protected getField() {\n    return this.element.renderRoot.querySelector('.field') as Field;\n  }\n  /**\n   * Shows the menu and returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.getField();\n  }\n\n  override async startHover() {\n    const field = await this.getField();\n    const element =\n        await (new SelectFieldHardness(field)).getInteractiveElement();\n    this.simulateStartHover(element);\n  }\n\n  /** @return ListItem harnesses for the menu's items. */\n  getItems() {\n    return this.element.options.map(\n        (item) => new SelectOptionHarness(item as typeof item&LitElement));\n  }\n\n  async click() {\n    const field = await this.getField();\n    field.click();\n  }\n\n  async clickOption(index: number) {\n    const menu = this.element.renderRoot.querySelector('md-menu')!;\n    if (!menu.open) {\n      console.warn(\n          'Internal menu is not open. Try calling SelectHarness.prototype.click()');\n    }\n    (await this.getItems()[index].getInteractiveElement()).click();\n  }\n}\n\n// Private class (not exported)\nclass SelectFieldHardness extends FieldHarness {\n  /* Expose so that we can call it from our internal code in SelectHarness. */\n  override getInteractiveElement() {\n    return super.getInteractiveElement();\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,YAAY,EAAC,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,mBAAmB,EAAC,MAAM,oCAAoC,CAAC;AAEvE;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IACtC,QAAQ;QAChB,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAU,CAAC;IAClE,CAAC;IACD;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;IACzB,CAAC;IAEQ,KAAK,CAAC,UAAU;QACvB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACpC,MAAM,OAAO,GAAG,MAAM,IAAI,mBAAmB,CAC3C,KAAK,CACN,CAAC,qBAAqB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IAED,uDAAuD;IACvD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAC7B,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,mBAAmB,CAAC,IAAgC,CAAC,CACpE,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,KAAK;QACT,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACpC,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,KAAa;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAE,CAAC;QAC/D,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,CAAC,IAAI,CACV,wEAAwE,CACzE,CAAC;SACH;QACD,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,qBAAqB,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;IACjE,CAAC;CACF;AAED,+BAA+B;AAC/B,MAAM,mBAAoB,SAAQ,YAAY;IAC5C,4EAA4E;IACnE,qBAAqB;QAC5B,OAAO,KAAK,CAAC,qBAAqB,EAAE,CAAC;IACvC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {FieldHarness} from '../field/harness.js';\nimport {Field} from '../field/internal/field.js';\nimport {Harness} from '../testing/harness.js';\n\nimport {Select} from './internal/select.js';\nimport {SelectOptionHarness} from './internal/selectoption/harness.js';\n\n/**\n * Test harness for menu.\n */\nexport class SelectHarness extends Harness<Select> {\n  protected getField() {\n    return this.element.renderRoot.querySelector('.field') as Field;\n  }\n  /**\n   * Shows the menu and returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.getField();\n  }\n\n  override async startHover() {\n    const field = await this.getField();\n    const element = await new SelectFieldHardness(\n      field,\n    ).getInteractiveElement();\n    this.simulateStartHover(element);\n  }\n\n  /** @return ListItem harnesses for the menu's items. */\n  getItems() {\n    return this.element.options.map(\n      (item) => new SelectOptionHarness(item as typeof item & LitElement),\n    );\n  }\n\n  async click() {\n    const field = await this.getField();\n    field.click();\n  }\n\n  async clickOption(index: number) {\n    const menu = this.element.renderRoot.querySelector('md-menu')!;\n    if (!menu.open) {\n      console.warn(\n        'Internal menu is not open. Try calling SelectHarness.prototype.click()',\n      );\n    }\n    (await this.getItems()[index].getInteractiveElement()).click();\n  }\n}\n\n// Private class (not exported)\nclass SelectFieldHardness extends FieldHarness {\n  /* Expose so that we can call it from our internal code in SelectHarness. */\n  override getInteractiveElement() {\n    return super.getInteractiveElement();\n  }\n}\n"]}

package/select/internal/select.d.ts

@@ -6,23 +6,29 @@
 import '../../menu/menu.js';
 import { LitElement, PropertyValues } from 'lit';
 import { StaticValue } from 'lit/static-html.js';
+import { Field } from '../../field/internal/field.js';
+import { createValidator, getValidityAnchor } from '../../labs/behaviors/constraint-validation.js';
+import { getFormValue } from '../../labs/behaviors/form-associated.js';
+import { onReportValidity } from '../../labs/behaviors/on-report-validity.js';
+import { SelectValidator } from '../../labs/behaviors/validators/select-validator.js';
 import { SelectOption } from './selectoption/selectOptionController.js';
 declare const VALUE: unique symbol;
+declare const selectBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<import("../../labs/behaviors/mixin.js").MixinReturn<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>, import("../../labs/behaviors/constraint-validation.js").ConstraintValidation>, import("../../labs/behaviors/on-report-validity.js").OnReportValidity>;
 /**
- * @fires input Fired when a selection is made by the user via mouse or keyboard
- * interaction.
- * @fires change Fired when a selection is made by the user via mouse or
- * keyboard interaction.
- * @fires opening Fired when the select's menu is about to open.
- * @fires opened Fired when the select's menu has finished animations and
- * opened.
- * @fires closing Fired when the select's menu is about to close.
- * @fires closed Fired when the select's menu has finished animations and
- * closed.
+ * @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
+ * @fires opening {Event} Fired when the select's menu is about to open.
+ * @fires opened {Event} Fired when the select's menu has finished animations
+ * and opened.
+ * @fires closing {Event} Fired when the select's menu is about to close.
+ * @fires closed {Event} Fired when the select's menu has finished animations
+ * and closed.
  */
-export declare abstract class Select extends LitElement {
-    /** @nocollapse  */
-    static readonly formAssociated = true;
+export declare abstract class Select extends selectBaseClass {
     /**
      * Opens the menu synchronously with no animation.
      */
@@ -31,10 +37,6 @@ export declare abstract class Select extends LitElement {
      * Whether or not the select is required.
      */
     required: boolean;
-    /**
-     * Disables the select.
-     */
-    disabled: boolean;
     /**
      * The error message that replaces supporting text when `error` is true. If
      * `errorText` is an empty string, then the supporting text will continue to
@@ -67,7 +69,7 @@ export declare abstract class Select extends LitElement {
      * position:fixed is useful for cases where select is inside of another
      * element with stacking context and hidden overflows such as `md-dialog`.
      */
-    menuPositioning: 'absolute' | 'fixed';
+    menuPositioning: 'absolute' | 'fixed' | 'popover';
     /**
      * The max time between the keystrokes of the typeahead select / menu behavior
      * before it clears the typeahead buffer.
@@ -106,40 +108,6 @@ export declare abstract class Select extends LitElement {
      * NOTE: md-select only suppoprts single selection.
      */
     get selectedOptions(): SelectOption[];
-    /**
-     * The HTML name to use in form submission.
-     */
-    get name(): string;
-    set name(name: string);
-    /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form(): HTMLFormElement;
-    /**
-     * The labels this element is associated with.
-     */
-    get labels(): NodeList;
-    /**
-     * Returns a ValidityState object that represents the validity states of the
-     * checkbox.
-     *
-     * Note that selects will only set `valueMissing` if unselected and
-     * `required`.
-     */
-    get validity(): ValidityState;
-    /**
-     * Returns the native validation error message.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process
-     */
-    get validationMessage(): string;
-    /**
-     * Returns whether an element will successfully validate based on forms
-     * validation rules and constraints.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process
-     */
-    get willValidate(): boolean;
     protected abstract readonly fieldTag: StaticValue;
     /**
      * Used for initializing select when the user sets the `value` directly.
@@ -171,8 +139,6 @@ export declare abstract class Select extends LitElement {
     private readonly menu;
     private readonly labelEl;
     private readonly leadingIcons;
-    private customValidationMessage;
-    private readonly internals;
     /**
      * Selects an option given the value of the option, and updates MdSelect's
      * value.
@@ -187,49 +153,9 @@ export declare abstract class Select extends LitElement {
      * Reset the select to its default value.
      */
     reset(): void;
-    /**
-     * Checks the select'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/HTMLSelectElement/checkValidity
-     *
-     * @return true if the select is valid, or false if not.
-     */
-    checkValidity(): boolean;
-    /**
-     * Checks the select'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
-     * select'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.
-     *
-     * @return true if the select is valid, or false if not.
-     */
-    reportValidity(): boolean;
-    /**
-     * Sets the select's native validation error message. This is used to
-     * customize `validationMessage`.
-     *
-     * When the error is not an empty string, the select is considered invalid
-     * and `validity.customError` will be true.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity
-     *
-     * @param error The error message to display.
-     */
-    setCustomValidity(error: string): void;
+    [onReportValidity](invalidEvent: Event | null): void;
     protected update(changed: PropertyValues<Select>): void;
     protected render(): import("lit-html").TemplateResult<1>;
-    protected updated(changed: PropertyValues<Select>): void;
     protected firstUpdated(changed: PropertyValues<Select>): Promise<void>;
     private getRenderClasses;
     private renderField;
@@ -303,11 +229,12 @@ export declare abstract class Select extends LitElement {
      */
     private dispatchInteractionEvents;
     private getErrorText;
-    private syncValidity;
-    private getRequiredValidationMessage;
-    /** @private */
+    disabled: boolean;
+    name: string;
+    [getFormValue](): string;
     formResetCallback(): void;
-    /** @private */
     formStateRestoreCallback(state: string): void;
+    [createValidator](): SelectValidator;
+    [getValidityAnchor](): Field;
 }
 export {};

package/select/internal/select.js

@@ -12,25 +12,34 @@ import { classMap } from 'lit/directives/class-map.js';
 import { html as staticHtml } from 'lit/static-html.js';
 import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
 import { redispatchEvent } from '../../internal/controller/events.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 { SelectValidator } from '../../labs/behaviors/validators/select-validator.js';
 import { getActiveItem } from '../../list/internal/list-navigation-helpers.js';
-import { isElementInSubtree, isSelectableKey } from '../../menu/internal/controllers/shared.js';
+import { isElementInSubtree, isSelectableKey, } from '../../menu/internal/controllers/shared.js';
 import { TYPEAHEAD_RECORD } from '../../menu/internal/controllers/typeaheadController.js';
 import { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '../../menu/internal/menu.js';
 import { getSelectedItems } from './shared.js';
 const VALUE = Symbol('value');
+// Separate variable needed for closure.
+const selectBaseClass = mixinOnReportValidity(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(LitElement))));
 /**
- * @fires input Fired when a selection is made by the user via mouse or keyboard
- * interaction.
- * @fires change Fired when a selection is made by the user via mouse or
- * keyboard interaction.
- * @fires opening Fired when the select's menu is about to open.
- * @fires opened Fired when the select's menu has finished animations and
- * opened.
- * @fires closing Fired when the select's menu is about to close.
- * @fires closed Fired when the select's menu has finished animations and
- * closed.
+ * @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
+ * @fires opening {Event} Fired when the select's menu is about to open.
+ * @fires opened {Event} Fired when the select's menu has finished animations
+ * and opened.
+ * @fires closing {Event} Fired when the select's menu is about to close.
+ * @fires closed {Event} Fired when the select's menu has finished animations
+ * and closed.
  */
-export class Select extends LitElement {
+export class Select extends selectBaseClass {
     constructor() {
         super(...arguments);
         /**
@@ -41,10 +50,6 @@ export class Select extends LitElement {
          * Whether or not the select is required.
          */
         this.required = false;
-        /**
-         * Disables the select.
-         */
-        this.disabled = false;
         /**
          * The error message that replaces supporting text when `error` is true. If
          * `errorText` is an empty string, then the supporting text will continue to
@@ -77,7 +82,7 @@ export class Select extends LitElement {
          * position:fixed is useful for cases where select is inside of another
          * element with stacking context and hidden overflows such as `md-dialog`.
          */
-        this.menuPositioning = 'absolute';
+        this.menuPositioning = 'popover';
         /**
          * The max time between the keystrokes of the typeahead select / menu behavior
          * before it clears the typeahead buffer.
@@ -118,8 +123,6 @@ export class Select extends LitElement {
         this.nativeErrorText = '';
         this.focused = false;
         this.open = false;
-        this.customValidationMessage = '';
-        this.internals = this /* needed for closure */.attachInternals();
     }
     /**
      * The value of the currently selected option.
@@ -164,57 +167,6 @@ export class Select extends LitElement {
     get selectedOptions() {
         return (this.getSelectedOptions() ?? []).map(([option]) => option);
     }
-    /**
-     * The HTML name to use in form submission.
-     */
-    get name() {
-        return this.getAttribute('name') ?? '';
-    }
-    set name(name) {
-        this.setAttribute('name', name);
-    }
-    /**
-     * 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;
-    }
-    /**
-     * Returns a ValidityState object that represents the validity states of the
-     * checkbox.
-     *
-     * Note that selects will only set `valueMissing` if unselected and
-     * `required`.
-     */
-    get validity() {
-        this.syncValidity();
-        return this.internals.validity;
-    }
-    /**
-     * Returns the native validation error message.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process
-     */
-    get validationMessage() {
-        this.syncValidity();
-        return this.internals.validationMessage;
-    }
-    /**
-     * Returns whether an element will successfully validate based on forms
-     * validation rules and constraints.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process
-     */
-    get willValidate() {
-        this.syncValidity();
-        return this.internals.willValidate;
-    }
     get hasError() {
         return this.error || this.nativeError;
     }
@@ -223,7 +175,7 @@ export class Select extends LitElement {
      * value.
      */
     select(value) {
-        const optionToSelect = this.options.find(option => option.value === value);
+        const optionToSelect = this.options.find((option) => option.value === value);
         if (optionToSelect) {
             this.selectItem(optionToSelect);
         }
@@ -249,67 +201,17 @@ export class Select extends LitElement {
         this.nativeError = false;
         this.nativeErrorText = '';
     }
-    /**
-     * Checks the select'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/HTMLSelectElement/checkValidity
-     *
-     * @return true if the select is valid, or false if not.
-     */
-    checkValidity() {
-        this.syncValidity();
-        return this.internals.checkValidity();
-    }
-    /**
-     * Checks the select'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
-     * select'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.
-     *
-     * @return true if the select is valid, or false if not.
-     */
-    reportValidity() {
-        let invalidEvent;
-        this.addEventListener('invalid', event => {
-            invalidEvent = event;
-        }, { once: true });
-        const valid = this.checkValidity();
+    [(_a = VALUE, onReportValidity)](invalidEvent) {
         if (invalidEvent?.defaultPrevented) {
-            return valid;
+            return;
         }
+        invalidEvent?.preventDefault();
         const prevMessage = this.getErrorText();
-        this.nativeError = !valid;
+        this.nativeError = !!invalidEvent;
         this.nativeErrorText = this.validationMessage;
         if (prevMessage === this.getErrorText()) {
             this.field?.reannounceError();
         }
-        return valid;
-    }
-    /**
-     * Sets the select's native validation error message. This is used to
-     * customize `validationMessage`.
-     *
-     * When the error is not an empty string, the select is considered invalid
-     * and `validity.customError` will be true.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity
-     *
-     * @param error The error message to display.
-     */
-    setCustomValidity(error) {
-        this.customValidationMessage = error;
-        this.syncValidity();
     }
     update(changed) {
         // In SSR the options will be ready to query, so try to figure out what
@@ -322,18 +224,12 @@ export class Select extends LitElement {
     render() {
         return html `
       <span
-          class="select ${classMap(this.getRenderClasses())}"
-          @focusout=${this.handleFocusout}>
-        ${this.renderField()}
-        ${this.renderMenu()}
+        class="select ${classMap(this.getRenderClasses())}"
+        @focusout=${this.handleFocusout}>
+        ${this.renderField()} ${this.renderMenu()}
       </span>
     `;
     }
-    updated(changed) {
-        if (changed.has('required')) {
-            this.syncValidity();
-        }
-    }
     async firstUpdated(changed) {
         await this.menu?.updateComplete;
         // If this has been handled on update already due to SSR, try again.
@@ -342,7 +238,8 @@ export class Select extends LitElement {
         }
         // Case for when the DOM is streaming, there are no children, and a child
         // has [selected] set on it, we need to wait for DOM to render something.
-        if (!this.lastSelectedOptionRecords.length && !isServer &&
+        if (!this.lastSelectedOptionRecords.length &&
+            !isServer &&
             !this.options.length) {
             setTimeout(() => {
                 this.updateValueAndDisplayText();
@@ -399,21 +296,29 @@ export class Select extends LitElement {
     renderLeadingIcon() {
         return html `
       <span class="icon leading" slot="start">
-         <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
+        <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}>
           <svg height="5" viewBox="7 10 10 5" focusable="false">
-            <polygon class="down" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
-            <polygon class="up" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15"></polygon>
+            <polygon
+              class="down"
+              stroke="none"
+              fill-rule="evenodd"
+              points="7 10 12 15 17 10"></polygon>
+            <polygon
+              class="up"
+              stroke="none"
+              fill-rule="evenodd"
+              points="7 15 12 10 17 15"></polygon>
           </svg>
         </slot>
       </span>
-     `;
+    `;
     }
     renderLabel() {
         // need to render &nbsp; so that line-height can apply and give it a
@@ -422,30 +327,29 @@ export class Select extends LitElement {
     }
     renderMenu() {
         const ariaLabel = this.label || this.ariaLabel;
-        return html `
-      <md-menu
-          id="listbox"
-          default-focus="none"
-          role="listbox"
-          tabindex="-1"
-          aria-label=${ariaLabel || nothing}
-          stay-open-on-focusout
-          part="menu"
-          exportparts="focus-ring: menu-focus-ring"
-          anchor="field"
-          .open=${this.open}
-          .quick=${this.quick}
-          .positioning=${this.menuPositioning}
-          .typeaheadDelay=${this.typeaheadDelay}
-          @opening=${this.handleOpening}
-          @opened=${this.redispatchEvent}
-          @closing=${this.redispatchEvent}
-          @closed=${this.handleClosed}
-          @close-menu=${this.handleCloseMenu}
-          @request-selection=${this.handleRequestSelection}
-          @request-deselection=${this.handleRequestDeselection}>
-        ${this.renderMenuContent()}
-      </md-menu>`;
+        return html ` <md-menu
+      id="listbox"
+      default-focus="none"
+      role="listbox"
+      tabindex="-1"
+      aria-label=${ariaLabel || nothing}
+      stay-open-on-focusout
+      part="menu"
+      exportparts="focus-ring: menu-focus-ring"
+      anchor="field"
+      .open=${this.open}
+      .quick=${this.quick}
+      .positioning=${this.menuPositioning}
+      .typeaheadDelay=${this.typeaheadDelay}
+      @opening=${this.handleOpening}
+      @opened=${this.redispatchEvent}
+      @closing=${this.redispatchEvent}
+      @closed=${this.handleClosed}
+      @close-menu=${this.handleCloseMenu}
+      @request-selection=${this.handleRequestSelection}
+      @request-deselection=${this.handleRequestDeselection}>
+      ${this.renderMenuContent()}
+    </md-menu>`;
     }
     renderMenuContent() {
         return html `<slot></slot>`;
@@ -459,7 +363,8 @@ export class Select extends LitElement {
             return;
         }
         const typeaheadController = this.menu.typeaheadController;
-        const isOpenKey = event.code === 'Space' || event.code === 'ArrowDown' ||
+        const isOpenKey = event.code === 'Space' ||
+            event.code === 'ArrowDown' ||
             event.code === 'Enter';
         // Do not open if currently typing ahead because the user may be typing the
         // spacebar to match a word with a space
@@ -549,8 +454,6 @@ export class Select extends LitElement {
             this[VALUE] = '';
             this.displayText = '';
         }
-        this.internals.setFormValue(this.value);
-        this.syncValidity();
         return hasSelectedOptionChanged;
     }
     /**
@@ -679,43 +582,31 @@ export class Select extends LitElement {
     getErrorText() {
         return this.error ? this.errorText : this.nativeErrorText;
     }
-    syncValidity() {
-        const valueMissing = this.required && !this.value;
-        const customError = !!this.customValidationMessage;
-        const validationMessage = this.customValidationMessage ||
-            valueMissing && this.getRequiredValidationMessage() || '';
-        this.internals.setValidity({ valueMissing, customError }, validationMessage);
-    }
-    // Returns the platform `<select>` validation message for i18n.
-    getRequiredValidationMessage() {
-        const select = document.createElement('select');
-        select.required = true;
-        return select.validationMessage;
+    [getFormValue]() {
+        return this.value;
     }
-    /** @private */
     formResetCallback() {
         this.reset();
     }
-    /** @private */
     formStateRestoreCallback(state) {
         this.value = state;
     }
+    [createValidator]() {
+        return new SelectValidator(() => this);
+    }
+    [getValidityAnchor]() {
+        return this.field;
+    }
 }
-_a = VALUE;
 (() => {
     requestUpdateOnAriaChange(Select);
 })();
-/** @nocollapse  */
-Select.formAssociated = true;
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "quick", void 0);
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Select.prototype, "disabled", void 0);
 __decorate([
     property({ type: String, attribute: 'error-text' })
 ], Select.prototype, "errorText", void 0);