@material/web 1.0.2-nightly.6be83b4.0 → 1.0.2-nightly.b5686ea.0

package/labs/behaviors/constraint-validation.d.ts

@@ -13,7 +13,7 @@ import { Validator } from './validators/validator.js';
  *
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
  */
-export interface ConstraintValidation {
+export interface ConstraintValidation extends FormAssociated {
     /**
      * Returns a ValidityState object that represents the validity states of the
      * element.
@@ -99,7 +99,7 @@ export declare const createValidator: unique symbol;
  */
 export declare const getValidityAnchor: unique symbol;
 /**
- * Mixins in constraint validation APIs for an element.
+ * Mixes in constraint validation APIs for an element.
  *
  * See https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
  * for more details.

package/labs/behaviors/constraint-validation.js

@@ -20,7 +20,7 @@ const privateValidator = Symbol('privateValidator');
 const privateSyncValidity = Symbol('privateSyncValidity');
 const privateCustomValidationMessage = Symbol('privateCustomValidationMessage');
 /**
- * Mixins in constraint validation APIs for an element.
+ * Mixes in constraint validation APIs for an element.
  *
  * See https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
  * for more details.

package/labs/behaviors/constraint-validation.js.map

@@ -1 +1 @@
-{"version":3,"file":"constraint-validation.js","sourceRoot":"","sources":["constraint-validation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, LitElement, PropertyDeclaration} from 'lit';\n\nimport {internals, WithElementInternals} from './element-internals.js';\nimport {FormAssociated} from './form-associated.js';\nimport {MixinBase, MixinReturn} from './mixin.js';\nimport {Validator} from './validators/validator.js';\n\n/**\n * A form associated element that provides constraint validation APIs.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n */\nexport interface ConstraintValidation {\n  /**\n   * Returns a ValidityState object that represents the validity states of the\n   * element.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n   */\n  readonly validity: ValidityState;\n\n  /**\n   * Returns a validation error message or an empty string if the element is\n   * valid.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage\n   */\n  readonly validationMessage: string;\n\n  /**\n   * Returns whether an element will successfully validate based on forms\n   * validation rules and constraints.\n   *\n   * Disabled and readonly elements will not validate.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n   */\n  readonly willValidate: boolean;\n\n  /**\n   * Checks the element's constraint validation and returns true if the element\n   * is valid or false if not.\n   *\n   * If invalid, this method will dispatch an `invalid` event.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity\n   *\n   * @return true if the element is valid, or false if not.\n   */\n  checkValidity(): boolean;\n\n  /**\n   * Checks the element's constraint validation and returns true if the element\n   * is valid or false if not.\n   *\n   * If invalid, this method will dispatch a cancelable `invalid` event. If not\n   * canceled, a the current `validationMessage` will be reported to the user.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity\n   *\n   * @return true if the element is valid, or false if not.\n   */\n  reportValidity(): boolean;\n\n  /**\n   * Sets the element's constraint validation error message. When set to a\n   * non-empty string, `validity.customError` will be true and\n   * `validationMessage` will display the provided error.\n   *\n   * Use this method to customize error messages reported.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n   *\n   * @param error The error message to display, or an empty string.\n   */\n  setCustomValidity(error: string): void;\n\n  /**\n   * Creates and returns a `Validator` that is used to compute and cache\n   * validity for the element.\n   *\n   * A validator that caches validity is important since constraint validation\n   * must be computed synchronously and frequently in response to constraint\n   * validation property changes.\n   */\n  [createValidator](): Validator<unknown>;\n\n  /**\n   * Returns shadow DOM child that is used as the anchor for the platform\n   * `reportValidity()` popup. This is often the root element or the inner\n   * focus-delegated element.\n   */\n  [getValidityAnchor](): HTMLElement | null;\n}\n\n/**\n * A symbol property used to create a constraint validation `Validator`.\n * Required for all `mixinConstraintValidation()` elements.\n */\nexport const createValidator = Symbol('createValidator');\n\n/**\n * A symbol property used to return an anchor for constraint validation popups.\n * Required for all `mixinConstraintValidation()` elements.\n */\nexport const getValidityAnchor = Symbol('getValidityAnchor');\n\n// Private symbol members, used to avoid name clashing.\nconst privateValidator = Symbol('privateValidator');\nconst privateSyncValidity = Symbol('privateSyncValidity');\nconst privateCustomValidationMessage = Symbol('privateCustomValidationMessage');\n\n/**\n * Mixins in constraint validation APIs for an element.\n *\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n * for more details.\n *\n * Implementations must provide a validator to cache and compute its validity,\n * along with a shadow root element to anchor validation popups to.\n *\n * @example\n * ```ts\n * const baseClass = mixinConstraintValidation(\n *   mixinFormAssociated(mixinElementInternals(LitElement))\n * );\n *\n * class MyCheckbox extends baseClass {\n *   \\@property({type: Boolean}) checked = false;\n *   \\@property({type: Boolean}) required = false;\n *\n *   [createValidator]() {\n *     return new CheckboxValidator(() => this);\n *   }\n *\n *   [getValidityAnchor]() {\n *     return this.renderRoot.querySelector('.root');\n *   }\n * }\n * ```\n *\n * @param base The class to mix functionality into.\n * @return The provided class with `ConstraintValidation` mixed in.\n */\nexport function mixinConstraintValidation<\n  T extends MixinBase<LitElement & FormAssociated & WithElementInternals>,\n>(base: T): MixinReturn<T, ConstraintValidation> {\n  abstract class ConstraintValidationElement\n    extends base\n    implements ConstraintValidation\n  {\n    get validity() {\n      this[privateSyncValidity]();\n      return this[internals].validity;\n    }\n\n    get validationMessage() {\n      this[privateSyncValidity]();\n      return this[internals].validationMessage;\n    }\n\n    get willValidate() {\n      this[privateSyncValidity]();\n      return this[internals].willValidate;\n    }\n\n    /**\n     * A validator instance created from `[createValidator]()`.\n     */\n    [privateValidator]?: Validator<unknown>;\n\n    /**\n     * Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432\n     * Replace with this[internals].validity.customError when resolved.\n     */\n    [privateCustomValidationMessage] = '';\n\n    checkValidity() {\n      this[privateSyncValidity]();\n      return this[internals].checkValidity();\n    }\n\n    reportValidity() {\n      this[privateSyncValidity]();\n      return this[internals].reportValidity();\n    }\n\n    setCustomValidity(error: string) {\n      this[privateCustomValidationMessage] = error;\n      this[privateSyncValidity]();\n    }\n\n    override requestUpdate(\n      name?: PropertyKey,\n      oldValue?: unknown,\n      options?: PropertyDeclaration,\n    ) {\n      super.requestUpdate(name, oldValue, options);\n      this[privateSyncValidity]();\n    }\n\n    [privateSyncValidity]() {\n      if (isServer) {\n        return;\n      }\n\n      if (!this[privateValidator]) {\n        this[privateValidator] = this[createValidator]();\n      }\n\n      const {validity, validationMessage: nonCustomValidationMessage} =\n        this[privateValidator].getValidity();\n\n      const customError = !!this[privateCustomValidationMessage];\n      const validationMessage =\n        this[privateCustomValidationMessage] || nonCustomValidationMessage;\n\n      this[internals].setValidity(\n        {...validity, customError},\n        validationMessage,\n        this[getValidityAnchor]() ?? undefined,\n      );\n    }\n\n    [createValidator](): Validator<unknown> {\n      throw new Error('Implement [createValidator]');\n    }\n\n    [getValidityAnchor](): HTMLElement | null {\n      throw new Error('Implement [getValidityAnchor]');\n    }\n  }\n\n  return ConstraintValidationElement;\n}\n"]}
+{"version":3,"file":"constraint-validation.js","sourceRoot":"","sources":["constraint-validation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, LitElement, PropertyDeclaration} from 'lit';\n\nimport {internals, WithElementInternals} from './element-internals.js';\nimport {FormAssociated} from './form-associated.js';\nimport {MixinBase, MixinReturn} from './mixin.js';\nimport {Validator} from './validators/validator.js';\n\n/**\n * A form associated element that provides constraint validation APIs.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n */\nexport interface ConstraintValidation extends FormAssociated {\n  /**\n   * Returns a ValidityState object that represents the validity states of the\n   * element.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n   */\n  readonly validity: ValidityState;\n\n  /**\n   * Returns a validation error message or an empty string if the element is\n   * valid.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage\n   */\n  readonly validationMessage: string;\n\n  /**\n   * Returns whether an element will successfully validate based on forms\n   * validation rules and constraints.\n   *\n   * Disabled and readonly elements will not validate.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n   */\n  readonly willValidate: boolean;\n\n  /**\n   * Checks the element's constraint validation and returns true if the element\n   * is valid or false if not.\n   *\n   * If invalid, this method will dispatch an `invalid` event.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity\n   *\n   * @return true if the element is valid, or false if not.\n   */\n  checkValidity(): boolean;\n\n  /**\n   * Checks the element's constraint validation and returns true if the element\n   * is valid or false if not.\n   *\n   * If invalid, this method will dispatch a cancelable `invalid` event. If not\n   * canceled, a the current `validationMessage` will be reported to the user.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity\n   *\n   * @return true if the element is valid, or false if not.\n   */\n  reportValidity(): boolean;\n\n  /**\n   * Sets the element's constraint validation error message. When set to a\n   * non-empty string, `validity.customError` will be true and\n   * `validationMessage` will display the provided error.\n   *\n   * Use this method to customize error messages reported.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n   *\n   * @param error The error message to display, or an empty string.\n   */\n  setCustomValidity(error: string): void;\n\n  /**\n   * Creates and returns a `Validator` that is used to compute and cache\n   * validity for the element.\n   *\n   * A validator that caches validity is important since constraint validation\n   * must be computed synchronously and frequently in response to constraint\n   * validation property changes.\n   */\n  [createValidator](): Validator<unknown>;\n\n  /**\n   * Returns shadow DOM child that is used as the anchor for the platform\n   * `reportValidity()` popup. This is often the root element or the inner\n   * focus-delegated element.\n   */\n  [getValidityAnchor](): HTMLElement | null;\n}\n\n/**\n * A symbol property used to create a constraint validation `Validator`.\n * Required for all `mixinConstraintValidation()` elements.\n */\nexport const createValidator = Symbol('createValidator');\n\n/**\n * A symbol property used to return an anchor for constraint validation popups.\n * Required for all `mixinConstraintValidation()` elements.\n */\nexport const getValidityAnchor = Symbol('getValidityAnchor');\n\n// Private symbol members, used to avoid name clashing.\nconst privateValidator = Symbol('privateValidator');\nconst privateSyncValidity = Symbol('privateSyncValidity');\nconst privateCustomValidationMessage = Symbol('privateCustomValidationMessage');\n\n/**\n * Mixes in constraint validation APIs for an element.\n *\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n * for more details.\n *\n * Implementations must provide a validator to cache and compute its validity,\n * along with a shadow root element to anchor validation popups to.\n *\n * @example\n * ```ts\n * const baseClass = mixinConstraintValidation(\n *   mixinFormAssociated(mixinElementInternals(LitElement))\n * );\n *\n * class MyCheckbox extends baseClass {\n *   \\@property({type: Boolean}) checked = false;\n *   \\@property({type: Boolean}) required = false;\n *\n *   [createValidator]() {\n *     return new CheckboxValidator(() => this);\n *   }\n *\n *   [getValidityAnchor]() {\n *     return this.renderRoot.querySelector('.root');\n *   }\n * }\n * ```\n *\n * @param base The class to mix functionality into.\n * @return The provided class with `ConstraintValidation` mixed in.\n */\nexport function mixinConstraintValidation<\n  T extends MixinBase<LitElement & FormAssociated & WithElementInternals>,\n>(base: T): MixinReturn<T, ConstraintValidation> {\n  abstract class ConstraintValidationElement\n    extends base\n    implements ConstraintValidation\n  {\n    get validity() {\n      this[privateSyncValidity]();\n      return this[internals].validity;\n    }\n\n    get validationMessage() {\n      this[privateSyncValidity]();\n      return this[internals].validationMessage;\n    }\n\n    get willValidate() {\n      this[privateSyncValidity]();\n      return this[internals].willValidate;\n    }\n\n    /**\n     * A validator instance created from `[createValidator]()`.\n     */\n    [privateValidator]?: Validator<unknown>;\n\n    /**\n     * Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432\n     * Replace with this[internals].validity.customError when resolved.\n     */\n    [privateCustomValidationMessage] = '';\n\n    checkValidity() {\n      this[privateSyncValidity]();\n      return this[internals].checkValidity();\n    }\n\n    reportValidity() {\n      this[privateSyncValidity]();\n      return this[internals].reportValidity();\n    }\n\n    setCustomValidity(error: string) {\n      this[privateCustomValidationMessage] = error;\n      this[privateSyncValidity]();\n    }\n\n    override requestUpdate(\n      name?: PropertyKey,\n      oldValue?: unknown,\n      options?: PropertyDeclaration,\n    ) {\n      super.requestUpdate(name, oldValue, options);\n      this[privateSyncValidity]();\n    }\n\n    [privateSyncValidity]() {\n      if (isServer) {\n        return;\n      }\n\n      if (!this[privateValidator]) {\n        this[privateValidator] = this[createValidator]();\n      }\n\n      const {validity, validationMessage: nonCustomValidationMessage} =\n        this[privateValidator].getValidity();\n\n      const customError = !!this[privateCustomValidationMessage];\n      const validationMessage =\n        this[privateCustomValidationMessage] || nonCustomValidationMessage;\n\n      this[internals].setValidity(\n        {...validity, customError},\n        validationMessage,\n        this[getValidityAnchor]() ?? undefined,\n      );\n    }\n\n    [createValidator](): Validator<unknown> {\n      throw new Error('Implement [createValidator]');\n    }\n\n    [getValidityAnchor](): HTMLElement | null {\n      throw new Error('Implement [getValidityAnchor]');\n    }\n  }\n\n  return ConstraintValidationElement;\n}\n"]}

package/labs/behaviors/on-report-validity.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+import { ConstraintValidation } from './constraint-validation.js';
+import { MixinBase, MixinReturn } from './mixin.js';
+/**
+ * A constraint validation element that has a callback for when the element
+ * should report validity styles and error messages to the user.
+ *
+ * This is commonly used in text-field-like controls that display error styles
+ * and error messages.
+ */
+export interface OnReportValidity extends ConstraintValidation {
+    /**
+     * A callback that is invoked when validity should be reported. Components
+     * that can display their own error state can use this and update their
+     * styles.
+     *
+     * If an invalid event is provided, the element is invalid. If `null`, the
+     * element is valid.
+     *
+     * The invalid event's `preventDefault()` may be called to stop the platform
+     * popup from displaying.
+     *
+     * @param invalidEvent The `invalid` event dispatched when an element is
+     *     invalid, or `null` if the element is valid.
+     */
+    [onReportValidity](invalidEvent: Event | null): void;
+    formAssociatedCallback(form: HTMLFormElement | null): void;
+}
+/**
+ * A symbol property used for a callback when validity has been reported.
+ */
+export declare const onReportValidity: unique symbol;
+/**
+ * Mixes in a callback for constraint validation when validity should be
+ * styled and reported to the user.
+ *
+ * This is commonly used in text-field-like controls that display error styles
+ * and error messages.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinOnReportValidity(
+ *   mixinConstraintValidation(
+ *     mixinFormAssociated(mixinElementInternals(LitElement)),
+ *   ),
+ * );
+ *
+ * class MyField extends baseClass {
+ *   \@property({type: Boolean}) error = false;
+ *   \@property() errorMessage = '';
+ *
+ *   [onReportValidity](invalidEvent: Event | null) {
+ *     this.error = !!invalidEvent;
+ *     this.errorMessage = this.validationMessage;
+ *
+ *     // Optionally prevent platform popup from displaying
+ *     invalidEvent?.preventDefault();
+ *   }
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `OnReportValidity` mixed in.
+ */
+export declare function mixinOnReportValidity<T extends MixinBase<LitElement & ConstraintValidation>>(base: T): MixinReturn<T, OnReportValidity>;

package/labs/behaviors/on-report-validity.js

@@ -0,0 +1,150 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A symbol property used for a callback when validity has been reported.
+ */
+export const onReportValidity = Symbol('onReportValidity');
+// Private symbol members, used to avoid name clashing.
+const privateCleanupFormListeners = Symbol('privateCleanupFormListeners');
+/**
+ * Mixes in a callback for constraint validation when validity should be
+ * styled and reported to the user.
+ *
+ * This is commonly used in text-field-like controls that display error styles
+ * and error messages.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinOnReportValidity(
+ *   mixinConstraintValidation(
+ *     mixinFormAssociated(mixinElementInternals(LitElement)),
+ *   ),
+ * );
+ *
+ * class MyField extends baseClass {
+ *   \@property({type: Boolean}) error = false;
+ *   \@property() errorMessage = '';
+ *
+ *   [onReportValidity](invalidEvent: Event | null) {
+ *     this.error = !!invalidEvent;
+ *     this.errorMessage = this.validationMessage;
+ *
+ *     // Optionally prevent platform popup from displaying
+ *     invalidEvent?.preventDefault();
+ *   }
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `OnReportValidity` mixed in.
+ */
+export function mixinOnReportValidity(base) {
+    var _a;
+    class OnReportValidityElement extends base {
+        constructor() {
+            super(...arguments);
+            /**
+             * Used to clean up event listeners when a new form is associated.
+             */
+            this[_a] = new AbortController();
+        }
+        reportValidity() {
+            let invalidEvent = null;
+            const cleanupInvalidListener = new AbortController();
+            this.addEventListener('invalid', (event) => {
+                invalidEvent = event;
+            }, { signal: cleanupInvalidListener.signal });
+            const valid = super.reportValidity();
+            cleanupInvalidListener.abort();
+            // event may be null, so check for strict `true`. If null it should still
+            // be reported.
+            if (invalidEvent?.defaultPrevented !== true) {
+                this[onReportValidity](invalidEvent);
+            }
+            return valid;
+        }
+        [(_a = privateCleanupFormListeners, onReportValidity)](invalidEvent) {
+            throw new Error('Implement [onReportValidity]');
+        }
+        formAssociatedCallback(form) {
+            // can't use super.formAssociatedCallback?.() due to closure
+            if (super.formAssociatedCallback) {
+                super.formAssociatedCallback(form);
+            }
+            // Clean up previous submit listener
+            this[privateCleanupFormListeners].abort();
+            if (!form) {
+                return;
+            }
+            this[privateCleanupFormListeners] = new AbortController();
+            // If the element's form submits, then all controls are valid. This lets
+            // the element remove its error styles that may have been set when
+            // `reportValidity()` was called.
+            form.addEventListener('submit', () => {
+                this[onReportValidity](null);
+            }, {
+                signal: this[privateCleanupFormListeners].signal,
+            });
+            // Inject a callback when `form.reportValidity()` is called and the form
+            // is valid. There isn't an event that is dispatched to alert us (unlike
+            // the 'invalid' event), and we need to remove error styles when
+            // `form.reportValidity()` is called and returns true.
+            let reportedInvalidEventFromForm = false;
+            let formReportValidityCleanup = new AbortController();
+            injectFormReportValidityHooks({
+                form,
+                cleanup: this[privateCleanupFormListeners].signal,
+                beforeReportValidity: () => {
+                    reportedInvalidEventFromForm = false;
+                    this.addEventListener('invalid', (invalidEvent) => {
+                        reportedInvalidEventFromForm = true;
+                        if (!invalidEvent.defaultPrevented) {
+                            this[onReportValidity](invalidEvent);
+                        }
+                    }, { signal: formReportValidityCleanup.signal });
+                },
+                afterReportValidity: () => {
+                    formReportValidityCleanup.abort();
+                    formReportValidityCleanup = new AbortController();
+                    if (reportedInvalidEventFromForm) {
+                        reportedInvalidEventFromForm = false;
+                        return;
+                    }
+                    // Report successful form validation if an invalid event wasn't
+                    // fired.
+                    this[onReportValidity](null);
+                },
+            });
+        }
+    }
+    return OnReportValidityElement;
+}
+const FORM_REPORT_VALIDITY_HOOKS = new WeakMap();
+function injectFormReportValidityHooks({ form, beforeReportValidity, afterReportValidity, cleanup, }) {
+    if (!FORM_REPORT_VALIDITY_HOOKS.has(form)) {
+        // Patch form.reportValidity() to add an event target that can be used to
+        // react when the method is called.
+        // We should only patch this method once, since multiple controls and other
+        // forces may want to patch this method. We cannot reliably clean it up by
+        // resetting the method to "superReportValidity", which may be a patched
+        // function.
+        // Instead, we never clean up the patch but add and clean up event listener
+        // hooks once it's patched.
+        const hooks = new EventTarget();
+        const superReportValidity = form.reportValidity;
+        form.reportValidity = function () {
+            hooks.dispatchEvent(new Event('before'));
+            const valid = superReportValidity.call(this);
+            hooks.dispatchEvent(new Event('after'));
+            return valid;
+        };
+        FORM_REPORT_VALIDITY_HOOKS.set(form, hooks);
+    }
+    const hooks = FORM_REPORT_VALIDITY_HOOKS.get(form);
+    hooks.addEventListener('before', beforeReportValidity, { signal: cleanup });
+    hooks.addEventListener('after', afterReportValidity, { signal: cleanup });
+}
+//# sourceMappingURL=on-report-validity.js.map

package/labs/behaviors/on-report-validity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-report-validity.js","sourceRoot":"","sources":["on-report-validity.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {ConstraintValidation} from './constraint-validation.js';\nimport {MixinBase, MixinReturn} from './mixin.js';\n\n/**\n * A constraint validation element that has a callback for when the element\n * should report validity styles and error messages to the user.\n *\n * This is commonly used in text-field-like controls that display error styles\n * and error messages.\n */\nexport interface OnReportValidity extends ConstraintValidation {\n  /**\n   * A callback that is invoked when validity should be reported. Components\n   * that can display their own error state can use this and update their\n   * styles.\n   *\n   * If an invalid event is provided, the element is invalid. If `null`, the\n   * element is valid.\n   *\n   * The invalid event's `preventDefault()` may be called to stop the platform\n   * popup from displaying.\n   *\n   * @param invalidEvent The `invalid` event dispatched when an element is\n   *     invalid, or `null` if the element is valid.\n   */\n  [onReportValidity](invalidEvent: Event | null): void;\n\n  // `mixinOnReportValidity()` implements this optional method. If overriden,\n  // call `super.formAssociatedCallback(form)`.\n  // (inherit jsdoc from `FormAssociated`)\n  formAssociatedCallback(form: HTMLFormElement | null): void;\n}\n\n/**\n * A symbol property used for a callback when validity has been reported.\n */\nexport const onReportValidity = Symbol('onReportValidity');\n\n// Private symbol members, used to avoid name clashing.\nconst privateCleanupFormListeners = Symbol('privateCleanupFormListeners');\n\n/**\n * Mixes in a callback for constraint validation when validity should be\n * styled and reported to the user.\n *\n * This is commonly used in text-field-like controls that display error styles\n * and error messages.\n *\n * @example\n * ```ts\n * const baseClass = mixinOnReportValidity(\n *   mixinConstraintValidation(\n *     mixinFormAssociated(mixinElementInternals(LitElement)),\n *   ),\n * );\n *\n * class MyField extends baseClass {\n *   \\@property({type: Boolean}) error = false;\n *   \\@property() errorMessage = '';\n *\n *   [onReportValidity](invalidEvent: Event | null) {\n *     this.error = !!invalidEvent;\n *     this.errorMessage = this.validationMessage;\n *\n *     // Optionally prevent platform popup from displaying\n *     invalidEvent?.preventDefault();\n *   }\n * }\n * ```\n *\n * @param base The class to mix functionality into.\n * @return The provided class with `OnReportValidity` mixed in.\n */\nexport function mixinOnReportValidity<\n  T extends MixinBase<LitElement & ConstraintValidation>,\n>(base: T): MixinReturn<T, OnReportValidity> {\n  abstract class OnReportValidityElement\n    extends base\n    implements OnReportValidity\n  {\n    /**\n     * Used to clean up event listeners when a new form is associated.\n     */\n    [privateCleanupFormListeners] = new AbortController();\n\n    override reportValidity() {\n      let invalidEvent = null as Event | null;\n      const cleanupInvalidListener = new AbortController();\n      this.addEventListener(\n        'invalid',\n        (event) => {\n          invalidEvent = event;\n        },\n        {signal: cleanupInvalidListener.signal},\n      );\n\n      const valid = super.reportValidity();\n      cleanupInvalidListener.abort();\n      // event may be null, so check for strict `true`. If null it should still\n      // be reported.\n      if (invalidEvent?.defaultPrevented !== true) {\n        this[onReportValidity](invalidEvent);\n      }\n\n      return valid;\n    }\n\n    [onReportValidity](invalidEvent: Event | null) {\n      throw new Error('Implement [onReportValidity]');\n    }\n\n    override formAssociatedCallback(form: HTMLFormElement | null) {\n      // can't use super.formAssociatedCallback?.() due to closure\n      if (super.formAssociatedCallback) {\n        super.formAssociatedCallback(form);\n      }\n\n      // Clean up previous submit listener\n      this[privateCleanupFormListeners].abort();\n      if (!form) {\n        return;\n      }\n\n      this[privateCleanupFormListeners] = new AbortController();\n      // If the element's form submits, then all controls are valid. This lets\n      // the element remove its error styles that may have been set when\n      // `reportValidity()` was called.\n      form.addEventListener(\n        'submit',\n        () => {\n          this[onReportValidity](null);\n        },\n        {\n          signal: this[privateCleanupFormListeners].signal,\n        },\n      );\n\n      // Inject a callback when `form.reportValidity()` is called and the form\n      // is valid. There isn't an event that is dispatched to alert us (unlike\n      // the 'invalid' event), and we need to remove error styles when\n      // `form.reportValidity()` is called and returns true.\n      let reportedInvalidEventFromForm = false;\n      let formReportValidityCleanup = new AbortController();\n      injectFormReportValidityHooks({\n        form,\n        cleanup: this[privateCleanupFormListeners].signal,\n        beforeReportValidity: () => {\n          reportedInvalidEventFromForm = false;\n          this.addEventListener(\n            'invalid',\n            (invalidEvent) => {\n              reportedInvalidEventFromForm = true;\n              if (!invalidEvent.defaultPrevented) {\n                this[onReportValidity](invalidEvent);\n              }\n            },\n            {signal: formReportValidityCleanup.signal},\n          );\n        },\n        afterReportValidity: () => {\n          formReportValidityCleanup.abort();\n          formReportValidityCleanup = new AbortController();\n          if (reportedInvalidEventFromForm) {\n            reportedInvalidEventFromForm = false;\n            return;\n          }\n\n          // Report successful form validation if an invalid event wasn't\n          // fired.\n          this[onReportValidity](null);\n        },\n      });\n    }\n  }\n\n  return OnReportValidityElement;\n}\n\nconst FORM_REPORT_VALIDITY_HOOKS = new WeakMap<HTMLFormElement, EventTarget>();\n\nfunction injectFormReportValidityHooks({\n  form,\n  beforeReportValidity,\n  afterReportValidity,\n  cleanup,\n}: {\n  form: HTMLFormElement;\n  beforeReportValidity: () => void;\n  afterReportValidity: () => void;\n  cleanup: AbortSignal;\n}) {\n  if (!FORM_REPORT_VALIDITY_HOOKS.has(form)) {\n    // Patch form.reportValidity() to add an event target that can be used to\n    // react when the method is called.\n    // We should only patch this method once, since multiple controls and other\n    // forces may want to patch this method. We cannot reliably clean it up by\n    // resetting the method to \"superReportValidity\", which may be a patched\n    // function.\n    // Instead, we never clean up the patch but add and clean up event listener\n    // hooks once it's patched.\n    const hooks = new EventTarget();\n    const superReportValidity = form.reportValidity;\n    form.reportValidity = function (this: HTMLFormElement) {\n      hooks.dispatchEvent(new Event('before'));\n      const valid = superReportValidity.call(this);\n      hooks.dispatchEvent(new Event('after'));\n      return valid;\n    };\n\n    FORM_REPORT_VALIDITY_HOOKS.set(form, hooks);\n  }\n\n  const hooks = FORM_REPORT_VALIDITY_HOOKS.get(form)!;\n  hooks.addEventListener('before', beforeReportValidity, {signal: cleanup});\n  hooks.addEventListener('after', afterReportValidity, {signal: cleanup});\n}\n"]}

package/labs/behaviors/validators/checkbox-validator.d.ts

@@ -11,11 +11,11 @@ export interface CheckboxState {
     /**
      * Whether the checkbox is checked.
      */
-    checked: boolean;
+    readonly checked: boolean;
     /**
      * Whether the checkbox is required.
      */
-    required: boolean;
+    readonly required: boolean;
 }
 /**
  * A validator that provides constraint validation that emulates
@@ -28,5 +28,4 @@ export declare class CheckboxValidator extends Validator<CheckboxState> {
         validationMessage: string;
     };
     protected equals(prev: CheckboxState, next: CheckboxState): boolean;
-    protected copy({ checked, required }: CheckboxState): CheckboxState;
 }

package/labs/behaviors/validators/checkbox-validator.js

@@ -25,8 +25,5 @@ export class CheckboxValidator extends Validator {
     equals(prev, next) {
         return prev.checked === next.checked && prev.required === next.required;
     }
-    copy({ checked, required }) {
-        return { checked, required };
-    }
 }
 //# sourceMappingURL=checkbox-validator.js.map

package/labs/behaviors/validators/checkbox-validator.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-validator.js","sourceRoot":"","sources":["checkbox-validator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAiBzC;;;GAGG;AACH,MAAM,OAAO,iBAAkB,SAAQ,SAAwB;IAG1C,eAAe,CAAC,KAAoB;QACrD,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,mCAAmC;YACnC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,UAAU,CAAC;SACxC;QAED,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7C,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAC/C,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ;YACvC,iBAAiB,EAAE,IAAI,CAAC,eAAe,CAAC,iBAAiB;SAC1D,CAAC;IACJ,CAAC;IAEkB,MAAM,CAAC,IAAmB,EAAE,IAAmB;QAChE,OAAO,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAAC;IAC1E,CAAC;IAEkB,IAAI,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAgB;QACxD,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAC,CAAC;IAC7B,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Validator} from './validator.js';\n\n/**\n * Constraint validation properties for a checkbox.\n */\nexport interface CheckboxState {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n\n  /**\n   * Whether the checkbox is required.\n   */\n  required: boolean;\n}\n\n/**\n * A validator that provides constraint validation that emulates\n * `<input type=\"checkbox\">` validation.\n */\nexport class CheckboxValidator extends Validator<CheckboxState> {\n  private checkboxControl?: HTMLInputElement;\n\n  protected override computeValidity(state: CheckboxState) {\n    if (!this.checkboxControl) {\n      // Lazily create the platform input\n      this.checkboxControl = document.createElement('input');\n      this.checkboxControl.type = 'checkbox';\n    }\n\n    this.checkboxControl.checked = state.checked;\n    this.checkboxControl.required = state.required;\n    return {\n      validity: this.checkboxControl.validity,\n      validationMessage: this.checkboxControl.validationMessage,\n    };\n  }\n\n  protected override equals(prev: CheckboxState, next: CheckboxState) {\n    return prev.checked === next.checked && prev.required === next.required;\n  }\n\n  protected override copy({checked, required}: CheckboxState): CheckboxState {\n    return {checked, required};\n  }\n}\n"]}
+{"version":3,"file":"checkbox-validator.js","sourceRoot":"","sources":["checkbox-validator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAiBzC;;;GAGG;AACH,MAAM,OAAO,iBAAkB,SAAQ,SAAwB;IAG1C,eAAe,CAAC,KAAoB;QACrD,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,mCAAmC;YACnC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,UAAU,CAAC;SACxC;QAED,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7C,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAC/C,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ;YACvC,iBAAiB,EAAE,IAAI,CAAC,eAAe,CAAC,iBAAiB;SAC1D,CAAC;IACJ,CAAC;IAEkB,MAAM,CAAC,IAAmB,EAAE,IAAmB;QAChE,OAAO,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAAC;IAC1E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Validator} from './validator.js';\n\n/**\n * Constraint validation properties for a checkbox.\n */\nexport interface CheckboxState {\n  /**\n   * Whether the checkbox is checked.\n   */\n  readonly checked: boolean;\n\n  /**\n   * Whether the checkbox is required.\n   */\n  readonly required: boolean;\n}\n\n/**\n * A validator that provides constraint validation that emulates\n * `<input type=\"checkbox\">` validation.\n */\nexport class CheckboxValidator extends Validator<CheckboxState> {\n  private checkboxControl?: HTMLInputElement;\n\n  protected override computeValidity(state: CheckboxState) {\n    if (!this.checkboxControl) {\n      // Lazily create the platform input\n      this.checkboxControl = document.createElement('input');\n      this.checkboxControl.type = 'checkbox';\n    }\n\n    this.checkboxControl.checked = state.checked;\n    this.checkboxControl.required = state.required;\n    return {\n      validity: this.checkboxControl.validity,\n      validationMessage: this.checkboxControl.validationMessage,\n    };\n  }\n\n  protected override equals(prev: CheckboxState, next: CheckboxState) {\n    return prev.checked === next.checked && prev.required === next.required;\n  }\n}\n"]}

package/labs/behaviors/validators/radio-validator.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from './validator.js';
+/**
+ * Constraint validation properties for a radio.
+ */
+export interface RadioState {
+    /**
+     * Whether the radio is checked.
+     */
+    readonly checked: boolean;
+    /**
+     * Whether the radio is required.
+     */
+    readonly required: boolean;
+}
+/**
+ * Radio constraint validation properties for a single radio and its siblings.
+ */
+export type RadioGroupState = readonly [RadioState, ...RadioState[]];
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="radio">` validation.
+ */
+export declare class RadioValidator extends Validator<RadioGroupState> {
+    private radioElement?;
+    protected computeValidity(states: RadioGroupState): {
+        validity: {
+            valueMissing: boolean;
+        };
+        validationMessage: string;
+    };
+    protected equals(prevGroup: RadioGroupState, nextGroup: RadioGroupState): boolean;
+    protected copy(states: RadioGroupState): RadioGroupState;
+}

package/labs/behaviors/validators/radio-validator.js

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from './validator.js';
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="radio">` validation.
+ */
+export class RadioValidator extends Validator {
+    computeValidity(states) {
+        if (!this.radioElement) {
+            // Lazily create the radio element
+            this.radioElement = document.createElement('input');
+            this.radioElement.type = 'radio';
+            // A name is required for validation to run
+            this.radioElement.name = 'group';
+        }
+        let isRequired = false;
+        let isChecked = false;
+        for (const { checked, required } of states) {
+            if (required) {
+                isRequired = true;
+            }
+            if (checked) {
+                isChecked = true;
+            }
+        }
+        // Firefox v119 doesn't compute grouped radio validation correctly while
+        // they are detached from the DOM, which is why we don't render multiple
+        // virtual <input>s. Instead, we can check the required/checked states and
+        // grab the i18n'd validation message if the value is missing.
+        this.radioElement.checked = isChecked;
+        this.radioElement.required = isRequired;
+        return {
+            validity: {
+                valueMissing: isRequired && !isChecked,
+            },
+            validationMessage: this.radioElement.validationMessage,
+        };
+    }
+    equals(prevGroup, nextGroup) {
+        if (prevGroup.length !== nextGroup.length) {
+            return false;
+        }
+        for (let i = 0; i < prevGroup.length; i++) {
+            const prev = prevGroup[i];
+            const next = nextGroup[i];
+            if (prev.checked !== next.checked || prev.required !== next.required) {
+                return false;
+            }
+        }
+        return true;
+    }
+    copy(states) {
+        // Cast as unknown since typescript does not have enough information to
+        // infer that the array always has at least one element.
+        return states.map(({ checked, required }) => ({
+            checked,
+            required,
+        }));
+    }
+}
+//# sourceMappingURL=radio-validator.js.map

package/labs/behaviors/validators/radio-validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-validator.js","sourceRoot":"","sources":["radio-validator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAsBzC;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,SAA0B;IAGzC,eAAe,CAAC,MAAuB;QACxD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,kCAAkC;YAClC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACpD,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,OAAO,CAAC;YACjC,2CAA2C;YAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,OAAO,CAAC;SAClC;QAED,IAAI,UAAU,GAAG,KAAK,CAAC;QACvB,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,KAAK,MAAM,EAAC,OAAO,EAAE,QAAQ,EAAC,IAAI,MAAM,EAAE;YACxC,IAAI,QAAQ,EAAE;gBACZ,UAAU,GAAG,IAAI,CAAC;aACnB;YAED,IAAI,OAAO,EAAE;gBACX,SAAS,GAAG,IAAI,CAAC;aAClB;SACF;QAED,wEAAwE;QACxE,wEAAwE;QACxE,0EAA0E;QAC1E,8DAA8D;QAC9D,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,UAAU,CAAC;QACxC,OAAO;YACL,QAAQ,EAAE;gBACR,YAAY,EAAE,UAAU,IAAI,CAAC,SAAS;aACvC;YACD,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,iBAAiB;SACvD,CAAC;IACJ,CAAC;IAEkB,MAAM,CACvB,SAA0B,EAC1B,SAA0B;QAE1B,IAAI,SAAS,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,EAAE;YACzC,OAAO,KAAK,CAAC;SACd;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACzC,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;YAC1B,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;YAC1B,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,EAAE;gBACpE,OAAO,KAAK,CAAC;aACd;SACF;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,IAAI,CAAC,MAAuB;QAC7C,uEAAuE;QACvE,wDAAwD;QACxD,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,EAAE,EAAE,CAAC,CAAC;YAC1C,OAAO;YACP,QAAQ;SACT,CAAC,CAA+B,CAAC;IACpC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Validator} from './validator.js';\n\n/**\n * Constraint validation properties for a radio.\n */\nexport interface RadioState {\n  /**\n   * Whether the radio is checked.\n   */\n  readonly checked: boolean;\n\n  /**\n   * Whether the radio is required.\n   */\n  readonly required: boolean;\n}\n\n/**\n * Radio constraint validation properties for a single radio and its siblings.\n */\nexport type RadioGroupState = readonly [RadioState, ...RadioState[]];\n\n/**\n * A validator that provides constraint validation that emulates\n * `<input type=\"radio\">` validation.\n */\nexport class RadioValidator extends Validator<RadioGroupState> {\n  private radioElement?: HTMLInputElement;\n\n  protected override computeValidity(states: RadioGroupState) {\n    if (!this.radioElement) {\n      // Lazily create the radio element\n      this.radioElement = document.createElement('input');\n      this.radioElement.type = 'radio';\n      // A name is required for validation to run\n      this.radioElement.name = 'group';\n    }\n\n    let isRequired = false;\n    let isChecked = false;\n    for (const {checked, required} of states) {\n      if (required) {\n        isRequired = true;\n      }\n\n      if (checked) {\n        isChecked = true;\n      }\n    }\n\n    // Firefox v119 doesn't compute grouped radio validation correctly while\n    // they are detached from the DOM, which is why we don't render multiple\n    // virtual <input>s. Instead, we can check the required/checked states and\n    // grab the i18n'd validation message if the value is missing.\n    this.radioElement.checked = isChecked;\n    this.radioElement.required = isRequired;\n    return {\n      validity: {\n        valueMissing: isRequired && !isChecked,\n      },\n      validationMessage: this.radioElement.validationMessage,\n    };\n  }\n\n  protected override equals(\n    prevGroup: RadioGroupState,\n    nextGroup: RadioGroupState,\n  ) {\n    if (prevGroup.length !== nextGroup.length) {\n      return false;\n    }\n\n    for (let i = 0; i < prevGroup.length; i++) {\n      const prev = prevGroup[i];\n      const next = nextGroup[i];\n      if (prev.checked !== next.checked || prev.required !== next.required) {\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  protected override copy(states: RadioGroupState): RadioGroupState {\n    // Cast as unknown since typescript does not have enough information to\n    // infer that the array always has at least one element.\n    return states.map(({checked, required}) => ({\n      checked,\n      required,\n    })) as unknown as RadioGroupState;\n  }\n}\n"]}

package/labs/behaviors/validators/select-validator.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from './validator.js';
+/**
+ * Constraint validation properties for a select dropdown.
+ */
+export interface SelectState {
+    /**
+     * The current selected value.
+     */
+    readonly value: string;
+    /**
+     * Whether the select is required.
+     */
+    readonly required: boolean;
+}
+/**
+ * A validator that provides constraint validation that emulates `<select>`
+ * validation.
+ */
+export declare class SelectValidator extends Validator<SelectState> {
+    private selectControl?;
+    protected computeValidity(state: SelectState): {
+        validity: ValidityState;
+        validationMessage: string;
+    };
+    protected equals(prev: SelectState, next: SelectState): boolean;
+}

package/labs/behaviors/validators/select-validator.js

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { html, render } from 'lit';
+import { Validator } from './validator.js';
+/**
+ * A validator that provides constraint validation that emulates `<select>`
+ * validation.
+ */
+export class SelectValidator extends Validator {
+    computeValidity(state) {
+        if (!this.selectControl) {
+            // Lazily create the platform select
+            this.selectControl = document.createElement('select');
+        }
+        render(html `<option value=${state.value}></option>`, this.selectControl);
+        this.selectControl.value = state.value;
+        this.selectControl.required = state.required;
+        return {
+            validity: this.selectControl.validity,
+            validationMessage: this.selectControl.validationMessage,
+        };
+    }
+    equals(prev, next) {
+        return prev.value === next.value && prev.required === next.required;
+    }
+}
+//# sourceMappingURL=select-validator.js.map

package/labs/behaviors/validators/select-validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-validator.js","sourceRoot":"","sources":["select-validator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAE,MAAM,EAAC,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAiBzC;;;GAGG;AACH,MAAM,OAAO,eAAgB,SAAQ,SAAsB;IAGtC,eAAe,CAAC,KAAkB;QACnD,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,oCAAoC;YACpC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;SACvD;QAED,MAAM,CAAC,IAAI,CAAA,iBAAiB,KAAK,CAAC,KAAK,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAEzE,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACvC,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAC7C,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ;YACrC,iBAAiB,EAAE,IAAI,CAAC,aAAa,CAAC,iBAAiB;SACxD,CAAC;IACJ,CAAC;IAEkB,MAAM,CAAC,IAAiB,EAAE,IAAiB;QAC5D,OAAO,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAAC;IACtE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, render} from 'lit';\n\nimport {Validator} from './validator.js';\n\n/**\n * Constraint validation properties for a select dropdown.\n */\nexport interface SelectState {\n  /**\n   * The current selected value.\n   */\n  readonly value: string;\n\n  /**\n   * Whether the select is required.\n   */\n  readonly required: boolean;\n}\n\n/**\n * A validator that provides constraint validation that emulates `<select>`\n * validation.\n */\nexport class SelectValidator extends Validator<SelectState> {\n  private selectControl?: HTMLSelectElement;\n\n  protected override computeValidity(state: SelectState) {\n    if (!this.selectControl) {\n      // Lazily create the platform select\n      this.selectControl = document.createElement('select');\n    }\n\n    render(html`<option value=${state.value}></option>`, this.selectControl);\n\n    this.selectControl.value = state.value;\n    this.selectControl.required = state.required;\n    return {\n      validity: this.selectControl.validity,\n      validationMessage: this.selectControl.validationMessage,\n    };\n  }\n\n  protected override equals(prev: SelectState, next: SelectState) {\n    return prev.value === next.value && prev.required === next.required;\n  }\n}\n"]}

package/labs/behaviors/validators/validator.d.ts

@@ -73,7 +73,7 @@ export declare abstract class Validator<State> {
      * @param state The state to copy.
      * @return A copy of the state.
      */
-    protected abstract copy(state: State): State;
+    protected copy(state: State): State;
 }
 /**
  * An object containing `ValidityStateFlags` and a corresponding validation

package/labs/behaviors/validators/validator.js

@@ -69,5 +69,15 @@ export class Validator {
         };
         return this.currentValidity;
     }
+    /**
+     * Creates a copy of a state. This is used to cache state and check if it
+     * changes.
+     *
+     * @param state The state to copy.
+     * @return A copy of the state.
+     */
+    copy(state) {
+        return { ...state };
+    }
 }
 //# sourceMappingURL=validator.js.map

package/labs/behaviors/validators/validator.js.map

@@ -1 +1 @@
-{"version":3,"file":"validator.js","sourceRoot":"","sources":["validator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,OAAgB,SAAS;IAgB7B;;;;;OAKG;IACH,YAA6B,eAA4B;QAA5B,oBAAe,GAAf,eAAe,CAAa;QAfzD;;;WAGG;QACK,oBAAe,GAAuB;YAC5C,QAAQ,EAAE,EAAE;YACZ,iBAAiB,EAAE,EAAE;SACtB,CAAC;IAQ0D,CAAC;IAE7D;;;;;;;;;OASG;IACH,WAAW;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACrC,MAAM,eAAe,GACnB,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACzD,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO,IAAI,CAAC,eAAe,CAAC;SAC7B;QAED,MAAM,EAAC,QAAQ,EAAE,iBAAiB,EAAC,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,CAAC,eAAe,GAAG;YACrB,iBAAiB;YACjB,QAAQ,EAAE;gBACR,uEAAuE;gBACvE,kDAAkD;gBAClD,QAAQ,EAAE,QAAQ,CAAC,QAAQ;gBAC3B,WAAW,EAAE,QAAQ,CAAC,WAAW;gBACjC,eAAe,EAAE,QAAQ,CAAC,eAAe;gBACzC,aAAa,EAAE,QAAQ,CAAC,aAAa;gBACrC,cAAc,EAAE,QAAQ,CAAC,cAAc;gBACvC,YAAY,EAAE,QAAQ,CAAC,YAAY;gBACnC,OAAO,EAAE,QAAQ,CAAC,OAAO;gBACzB,QAAQ,EAAE,QAAQ,CAAC,QAAQ;gBAC3B,YAAY,EAAE,QAAQ,CAAC,YAAY;gBACnC,YAAY,EAAE,QAAQ,CAAC,YAAY;aACpC;SACF,CAAC;QAEF,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;CAkCF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A class that computes and caches `ValidityStateFlags` for a component with\n * a given `State` interface.\n *\n * Cached performance before computing validity is important since constraint\n * validation must be checked frequently and synchronously when properties\n * change.\n *\n * @template State The expected interface of properties relevant to constraint\n *     validation.\n */\nexport abstract class Validator<State> {\n  /**\n   * The previous state, used to determine if state changed and validation needs\n   * to be re-computed.\n   */\n  private prevState?: State;\n\n  /**\n   * The current validity state and message. This is cached and returns if\n   * constraint validation state does not change.\n   */\n  private currentValidity: ValidityAndMessage = {\n    validity: {},\n    validationMessage: '',\n  };\n\n  /**\n   * Creates a new validator.\n   *\n   * @param getCurrentState A callback that returns the current state of\n   *     constraint validation-related properties.\n   */\n  constructor(private readonly getCurrentState: () => State) {}\n\n  /**\n   * Returns the current `ValidityStateFlags` and validation message for the\n   * validator.\n   *\n   * If the constraint validation state has not changed, this will return a\n   * cached result. This is important since `getValidity()` can be called\n   * frequently in response to synchronous property changes.\n   *\n   * @return The current validity and validation message.\n   */\n  getValidity(): ValidityAndMessage {\n    const state = this.getCurrentState();\n    const hasStateChanged =\n      !this.prevState || !this.equals(this.prevState, state);\n    if (!hasStateChanged) {\n      return this.currentValidity;\n    }\n\n    const {validity, validationMessage} = this.computeValidity(state);\n    this.prevState = this.copy(state);\n    this.currentValidity = {\n      validationMessage,\n      validity: {\n        // Change any `ValidityState` instances into `ValidityStateFlags` since\n        // `ValidityState` cannot be easily `{...spread}`.\n        badInput: validity.badInput,\n        customError: validity.customError,\n        patternMismatch: validity.patternMismatch,\n        rangeOverflow: validity.rangeOverflow,\n        rangeUnderflow: validity.rangeUnderflow,\n        stepMismatch: validity.stepMismatch,\n        tooLong: validity.tooLong,\n        tooShort: validity.tooShort,\n        typeMismatch: validity.typeMismatch,\n        valueMissing: validity.valueMissing,\n      },\n    };\n\n    return this.currentValidity;\n  }\n\n  /**\n   * Computes the `ValidityStateFlags` and validation message for a given set\n   * of constraint validation properties.\n   *\n   * Implementations can use platform elements like `<input>` and `<select>` to\n   * sync state and compute validation along with i18n'd messages. This function\n   * may be expensive, and is only called when state changes.\n   *\n   * @param state The new state of constraint validation properties.\n   * @return An object containing a `validity` property with\n   *     `ValidityStateFlags` and a `validationMessage` property.\n   */\n  protected abstract computeValidity(state: State): ValidityAndMessage;\n\n  /**\n   * Checks if two states are equal. This is used to check against cached state\n   * to see if validity needs to be re-computed.\n   *\n   * @param prev The previous state.\n   * @param next The next state.\n   * @return True if the states are equal, or false if not.\n   */\n  protected abstract equals(prev: State, next: State): boolean;\n\n  /**\n   * Creates a copy of a state. This is used to cache state and check if it\n   * changes.\n   *\n   * @param state The state to copy.\n   * @return A copy of the state.\n   */\n  protected abstract copy(state: State): State;\n}\n\n/**\n * An object containing `ValidityStateFlags` and a corresponding validation\n * message.\n */\nexport interface ValidityAndMessage {\n  /**\n   * Validity flags.\n   */\n  validity: ValidityStateFlags;\n\n  /**\n   * The validation message for the associated flags. It may not be an empty\n   * string if any of the validity flags are `true`.\n   */\n  validationMessage: string;\n}\n"]}
+{"version":3,"file":"validator.js","sourceRoot":"","sources":["validator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,OAAgB,SAAS;IAgB7B;;;;;OAKG;IACH,YAA6B,eAA4B;QAA5B,oBAAe,GAAf,eAAe,CAAa;QAfzD;;;WAGG;QACK,oBAAe,GAAuB;YAC5C,QAAQ,EAAE,EAAE;YACZ,iBAAiB,EAAE,EAAE;SACtB,CAAC;IAQ0D,CAAC;IAE7D;;;;;;;;;OASG;IACH,WAAW;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACrC,MAAM,eAAe,GACnB,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACzD,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO,IAAI,CAAC,eAAe,CAAC;SAC7B;QAED,MAAM,EAAC,QAAQ,EAAE,iBAAiB,EAAC,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,CAAC,eAAe,GAAG;YACrB,iBAAiB;YACjB,QAAQ,EAAE;gBACR,uEAAuE;gBACvE,kDAAkD;gBAClD,QAAQ,EAAE,QAAQ,CAAC,QAAQ;gBAC3B,WAAW,EAAE,QAAQ,CAAC,WAAW;gBACjC,eAAe,EAAE,QAAQ,CAAC,eAAe;gBACzC,aAAa,EAAE,QAAQ,CAAC,aAAa;gBACrC,cAAc,EAAE,QAAQ,CAAC,cAAc;gBACvC,YAAY,EAAE,QAAQ,CAAC,YAAY;gBACnC,OAAO,EAAE,QAAQ,CAAC,OAAO;gBACzB,QAAQ,EAAE,QAAQ,CAAC,QAAQ;gBAC3B,YAAY,EAAE,QAAQ,CAAC,YAAY;gBACnC,YAAY,EAAE,QAAQ,CAAC,YAAY;aACpC;SACF,CAAC;QAEF,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IA0BD;;;;;;OAMG;IACO,IAAI,CAAC,KAAY;QACzB,OAAO,EAAC,GAAG,KAAK,EAAC,CAAC;IACpB,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A class that computes and caches `ValidityStateFlags` for a component with\n * a given `State` interface.\n *\n * Cached performance before computing validity is important since constraint\n * validation must be checked frequently and synchronously when properties\n * change.\n *\n * @template State The expected interface of properties relevant to constraint\n *     validation.\n */\nexport abstract class Validator<State> {\n  /**\n   * The previous state, used to determine if state changed and validation needs\n   * to be re-computed.\n   */\n  private prevState?: State;\n\n  /**\n   * The current validity state and message. This is cached and returns if\n   * constraint validation state does not change.\n   */\n  private currentValidity: ValidityAndMessage = {\n    validity: {},\n    validationMessage: '',\n  };\n\n  /**\n   * Creates a new validator.\n   *\n   * @param getCurrentState A callback that returns the current state of\n   *     constraint validation-related properties.\n   */\n  constructor(private readonly getCurrentState: () => State) {}\n\n  /**\n   * Returns the current `ValidityStateFlags` and validation message for the\n   * validator.\n   *\n   * If the constraint validation state has not changed, this will return a\n   * cached result. This is important since `getValidity()` can be called\n   * frequently in response to synchronous property changes.\n   *\n   * @return The current validity and validation message.\n   */\n  getValidity(): ValidityAndMessage {\n    const state = this.getCurrentState();\n    const hasStateChanged =\n      !this.prevState || !this.equals(this.prevState, state);\n    if (!hasStateChanged) {\n      return this.currentValidity;\n    }\n\n    const {validity, validationMessage} = this.computeValidity(state);\n    this.prevState = this.copy(state);\n    this.currentValidity = {\n      validationMessage,\n      validity: {\n        // Change any `ValidityState` instances into `ValidityStateFlags` since\n        // `ValidityState` cannot be easily `{...spread}`.\n        badInput: validity.badInput,\n        customError: validity.customError,\n        patternMismatch: validity.patternMismatch,\n        rangeOverflow: validity.rangeOverflow,\n        rangeUnderflow: validity.rangeUnderflow,\n        stepMismatch: validity.stepMismatch,\n        tooLong: validity.tooLong,\n        tooShort: validity.tooShort,\n        typeMismatch: validity.typeMismatch,\n        valueMissing: validity.valueMissing,\n      },\n    };\n\n    return this.currentValidity;\n  }\n\n  /**\n   * Computes the `ValidityStateFlags` and validation message for a given set\n   * of constraint validation properties.\n   *\n   * Implementations can use platform elements like `<input>` and `<select>` to\n   * sync state and compute validation along with i18n'd messages. This function\n   * may be expensive, and is only called when state changes.\n   *\n   * @param state The new state of constraint validation properties.\n   * @return An object containing a `validity` property with\n   *     `ValidityStateFlags` and a `validationMessage` property.\n   */\n  protected abstract computeValidity(state: State): ValidityAndMessage;\n\n  /**\n   * Checks if two states are equal. This is used to check against cached state\n   * to see if validity needs to be re-computed.\n   *\n   * @param prev The previous state.\n   * @param next The next state.\n   * @return True if the states are equal, or false if not.\n   */\n  protected abstract equals(prev: State, next: State): boolean;\n\n  /**\n   * Creates a copy of a state. This is used to cache state and check if it\n   * changes.\n   *\n   * @param state The state to copy.\n   * @return A copy of the state.\n   */\n  protected copy(state: State): State {\n    return {...state};\n  }\n}\n\n/**\n * An object containing `ValidityStateFlags` and a corresponding validation\n * message.\n */\nexport interface ValidityAndMessage {\n  /**\n   * Validity flags.\n   */\n  validity: ValidityStateFlags;\n\n  /**\n   * The validation message for the associated flags. It may not be an empty\n   * string if any of the validity flags are `true`.\n   */\n  validationMessage: string;\n}\n"]}

package/list/internal/listitem/_list-item.scss

@@ -37,6 +37,7 @@
   :host {
     border-radius: map.get($tokens, 'container-shape');
     display: flex;
+    -webkit-tap-highlight-color: transparent;
 
     @include ripple.theme(
       (