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

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, isServer} 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');\nconst privateDoNotReportInvalid = Symbol('privateDoNotReportInvalid');\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    /**\n     * Used to determine if an invalid event should report validity. Invalid\n     * events from `checkValidity()` do not trigger reporting.\n     */\n    [privateDoNotReportInvalid] = false;\n\n    // Mixins must have a constructor with `...args: any[]`\n    // tslint:disable-next-line:no-any\n    constructor(...args: any[]) {\n      super(...args);\n      if (isServer) {\n        return;\n      }\n\n      this.addEventListener(\n        'invalid',\n        (invalidEvent) => {\n          // Listen for invalid events dispatched by a `<form>` when it tries to\n          // submit and the element is invalid. We ignore events dispatched when\n          // calling `checkValidity()` as well as untrusted events, since the\n          // `reportValidity()` and `<form>`-dispatched events are always\n          // trusted.\n          if (this[privateDoNotReportInvalid] || !invalidEvent.isTrusted) {\n            return;\n          }\n\n          this.addEventListener(\n            'invalid',\n            () => {\n              // A normal bubbling phase event listener. By adding it here, we\n              // ensure it's the last event listener that is called during the\n              // bubbling phase.\n              if (!invalidEvent.defaultPrevented) {\n                this[onReportValidity](invalidEvent);\n              }\n            },\n            {once: true},\n          );\n        },\n        {\n          // Listen during the capture phase, which will happen before the\n          // bubbling phase. That way, we can add a final event listener that\n          // will run after other event listeners, and we can check if it was\n          // default prevented. This works because invalid does not bubble.\n          capture: true,\n        },\n      );\n    }\n\n    override checkValidity() {\n      this[privateDoNotReportInvalid] = true;\n      const valid = super.checkValidity();\n      this[privateDoNotReportInvalid] = false;\n      return valid;\n    }\n\n    override reportValidity() {\n      const valid = super.reportValidity();\n      // Constructor's invalid listener will handle reporting invalid events.\n      if (valid) {\n        this[onReportValidity](null);\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,8 @@ export declare class CheckboxValidator extends Validator<CheckboxState> {
         validationMessage: string;
     };
     protected equals(prev: CheckboxState, next: CheckboxState): boolean;
-    protected copy({ checked, required }: CheckboxState): CheckboxState;
+    protected copy({ checked, required }: CheckboxState): {
+        checked: boolean;
+        required: boolean;
+    };
 }

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;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  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  protected override copy({checked, required}: CheckboxState) {\n    return {checked, 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,35 @@
+/**
+ * @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;
+    protected copy({ value, required }: SelectState): {
+        value: string;
+        required: boolean;
+    };
+}

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

@@ -0,0 +1,33 @@
+/**
+ * @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;
+    }
+    copy({ value, required }) {
+        return { value, 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;IAEkB,IAAI,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAc;QACpD,OAAO,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC;IAC3B,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  protected override copy({value, required}: SelectState) {\n    return {value, required};\n  }\n}\n"]}

package/labs/behaviors/validators/text-field-validator.d.ts

@@ -0,0 +1,110 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from './validator.js';
+/**
+ * Constraint validation for a text field.
+ */
+export interface TextFieldState {
+    /**
+     * The input or textarea state to validate.
+     */
+    state: InputState | TextAreaState;
+    /**
+     * The `<input>` or `<textarea>` that is rendered on the page.
+     *
+     * `minlength` and `maxlength` validation do not apply until a user has
+     * interacted with the control and the element is internally marked as dirty.
+     * This is a spec quirk, the two properties behave differently from other
+     * constraint validation.
+     *
+     * This means we need an actual rendered element instead of a virtual one,
+     * since the virtual element will never be marked as dirty.
+     *
+     * This can be `null` if the element has not yet rendered, and the validator
+     * will fall back to virtual elements for other constraint validation
+     * properties, which do apply even if the control is not dirty.
+     */
+    renderedControl: HTMLInputElement | HTMLTextAreaElement | null;
+}
+/**
+ * Constraint validation properties for an `<input>`.
+ */
+export interface InputState extends SharedInputAndTextAreaState {
+    /**
+     * The `<input>` type.
+     *
+     * Not all constraint validation properties apply to every type. See
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#validation-related_attributes
+     * for which properties will apply to which types.
+     */
+    readonly type: string;
+    /**
+     * The regex pattern a value must match.
+     */
+    readonly pattern: string;
+    /**
+     * The minimum value.
+     */
+    readonly min: string;
+    /**
+     * The maximum value.
+     */
+    readonly max: string;
+    /**
+     * The step interval of the value.
+     */
+    readonly step: string;
+}
+/**
+ * Constraint validation properties for a `<textarea>`.
+ */
+export interface TextAreaState extends SharedInputAndTextAreaState {
+    /**
+     * The type, must be "textarea" to inform the validator to use `<textarea>`
+     * instead of `<input>`.
+     */
+    readonly type: 'textarea';
+}
+/**
+ * Constraint validation properties shared between an `<input>` and
+ * `<textarea>`.
+ */
+interface SharedInputAndTextAreaState {
+    /**
+     * The current value.
+     */
+    readonly value: string;
+    /**
+     * Whether the textarea is required.
+     */
+    readonly required: boolean;
+    /**
+     * The minimum length of the value.
+     */
+    readonly minLength: number;
+    /**
+     * The maximum length of the value.
+     */
+    readonly maxLength: number;
+}
+/**
+ * A validator that provides constraint validation that emulates `<input>` and
+ * `<textarea>` validation.
+ */
+export declare class TextFieldValidator extends Validator<TextFieldState> {
+    private inputControl?;
+    private textAreaControl?;
+    protected computeValidity({ state, renderedControl }: TextFieldState): {
+        validity: ValidityState;
+        validationMessage: string;
+    };
+    protected equals({ state: prev }: TextFieldState, { state: next }: TextFieldState): boolean;
+    protected copy({ state }: TextFieldState): TextFieldState;
+    private copyInput;
+    private copyTextArea;
+    private copySharedState;
+}
+export {};

package/labs/behaviors/validators/text-field-validator.js

@@ -0,0 +1,146 @@
+/**
+ * @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>` and
+ * `<textarea>` validation.
+ */
+export class TextFieldValidator extends Validator {
+    computeValidity({ state, renderedControl }) {
+        let inputOrTextArea = renderedControl;
+        if (isInputState(state) && !inputOrTextArea) {
+            // Get cached <input> or create it.
+            inputOrTextArea = this.inputControl || document.createElement('input');
+            // Cache the <input> to re-use it next time.
+            this.inputControl = inputOrTextArea;
+        }
+        else if (!inputOrTextArea) {
+            // Get cached <textarea> or create it.
+            inputOrTextArea =
+                this.textAreaControl || document.createElement('textarea');
+            // Cache the <textarea> to re-use it next time.
+            this.textAreaControl = inputOrTextArea;
+        }
+        // Set this variable so we can check it for input-specific properties.
+        const input = isInputState(state)
+            ? inputOrTextArea
+            : null;
+        // Set input's "type" first, since this can change the other properties
+        if (input) {
+            input.type = state.type;
+        }
+        if (inputOrTextArea.value !== state.value) {
+            // Only programmatically set the value if there's a difference. When using
+            // the rendered control, the value will always be up to date. Setting the
+            // property (even if it's the same string) will reset the internal <input>
+            // dirty flag, making minlength and maxlength validation reset.
+            inputOrTextArea.value = state.value;
+        }
+        inputOrTextArea.required = state.required;
+        // The following IDLAttribute properties will always hydrate an attribute,
+        // even if set to a the default value ('' or -1). The presence of the
+        // attribute triggers constraint validation, so we must remove the attribute
+        // when empty.
+        if (input) {
+            const inputState = state;
+            if (inputState.pattern) {
+                input.pattern = inputState.pattern;
+            }
+            else {
+                input.removeAttribute('pattern');
+            }
+            if (inputState.min) {
+                input.min = inputState.min;
+            }
+            else {
+                input.removeAttribute('min');
+            }
+            if (inputState.max) {
+                input.max = inputState.max;
+            }
+            else {
+                input.removeAttribute('max');
+            }
+            if (inputState.step) {
+                input.step = inputState.step;
+            }
+            else {
+                input.removeAttribute('step');
+            }
+        }
+        // Use -1 to represent no minlength and maxlength, which is what the
+        // platform input returns. However, it will throw an error if you try to
+        // manually set it to -1.
+        if (state.minLength > -1) {
+            inputOrTextArea.minLength = state.minLength;
+        }
+        else {
+            inputOrTextArea.removeAttribute('minlength');
+        }
+        if (state.maxLength > -1) {
+            inputOrTextArea.maxLength = state.maxLength;
+        }
+        else {
+            inputOrTextArea.removeAttribute('maxlength');
+        }
+        return {
+            validity: inputOrTextArea.validity,
+            validationMessage: inputOrTextArea.validationMessage,
+        };
+    }
+    equals({ state: prev }, { state: next }) {
+        // Check shared input and textarea properties
+        const inputOrTextAreaEqual = prev.type === next.type &&
+            prev.value === next.value &&
+            prev.required === next.required &&
+            prev.minLength === next.minLength &&
+            prev.maxLength === next.maxLength;
+        if (!isInputState(prev) || !isInputState(next)) {
+            // Both are textareas, all relevant properties are equal.
+            return inputOrTextAreaEqual;
+        }
+        // Check additional input-specific properties.
+        return (inputOrTextAreaEqual &&
+            prev.pattern === next.pattern &&
+            prev.min === next.min &&
+            prev.max === next.max &&
+            prev.step === next.step);
+    }
+    copy({ state }) {
+        // Don't hold a reference to the rendered control when copying since we
+        // don't use it when checking if the state changed.
+        return {
+            state: isInputState(state)
+                ? this.copyInput(state)
+                : this.copyTextArea(state),
+            renderedControl: null,
+        };
+    }
+    copyInput(state) {
+        const { type, pattern, min, max, step } = state;
+        return {
+            ...this.copySharedState(state),
+            type,
+            pattern,
+            min,
+            max,
+            step,
+        };
+    }
+    copyTextArea(state) {
+        return {
+            ...this.copySharedState(state),
+            type: state.type,
+        };
+    }
+    copySharedState({ value, required, minLength, maxLength, }) {
+        return { value, required, minLength, maxLength };
+    }
+}
+function isInputState(state) {
+    return state.type !== 'textarea';
+}
+//# sourceMappingURL=text-field-validator.js.map

package/labs/behaviors/validators/text-field-validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-validator.js","sourceRoot":"","sources":["text-field-validator.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 {Validator} from './validator.js';\n\n/**\n * Constraint validation for a text field.\n */\nexport interface TextFieldState {\n  /**\n   * The input or textarea state to validate.\n   */\n  state: InputState | TextAreaState;\n\n  /**\n   * The `<input>` or `<textarea>` that is rendered on the page.\n   *\n   * `minlength` and `maxlength` validation do not apply until a user has\n   * interacted with the control and the element is internally marked as dirty.\n   * This is a spec quirk, the two properties behave differently from other\n   * constraint validation.\n   *\n   * This means we need an actual rendered element instead of a virtual one,\n   * since the virtual element will never be marked as dirty.\n   *\n   * This can be `null` if the element has not yet rendered, and the validator\n   * will fall back to virtual elements for other constraint validation\n   * properties, which do apply even if the control is not dirty.\n   */\n  renderedControl: HTMLInputElement | HTMLTextAreaElement | null;\n}\n\n/**\n * Constraint validation properties for an `<input>`.\n */\nexport interface InputState extends SharedInputAndTextAreaState {\n  /**\n   * The `<input>` type.\n   *\n   * Not all constraint validation properties apply to every type. See\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#validation-related_attributes\n   * for which properties will apply to which types.\n   */\n  readonly type: string;\n\n  /**\n   * The regex pattern a value must match.\n   */\n  readonly pattern: string;\n\n  /**\n   * The minimum value.\n   */\n  readonly min: string;\n\n  /**\n   * The maximum value.\n   */\n  readonly max: string;\n\n  /**\n   * The step interval of the value.\n   */\n  readonly step: string;\n}\n\n/**\n * Constraint validation properties for a `<textarea>`.\n */\nexport interface TextAreaState extends SharedInputAndTextAreaState {\n  /**\n   * The type, must be \"textarea\" to inform the validator to use `<textarea>`\n   * instead of `<input>`.\n   */\n  readonly type: 'textarea';\n}\n\n/**\n * Constraint validation properties shared between an `<input>` and\n * `<textarea>`.\n */\ninterface SharedInputAndTextAreaState {\n  /**\n   * The current value.\n   */\n  readonly value: string;\n\n  /**\n   * Whether the textarea is required.\n   */\n  readonly required: boolean;\n\n  /**\n   * The minimum length of the value.\n   */\n  readonly minLength: number;\n\n  /**\n   * The maximum length of the value.\n   */\n  readonly maxLength: number;\n}\n\n/**\n * A validator that provides constraint validation that emulates `<input>` and\n * `<textarea>` validation.\n */\nexport class TextFieldValidator extends Validator<TextFieldState> {\n  private inputControl?: HTMLInputElement;\n  private textAreaControl?: HTMLTextAreaElement;\n\n  protected override computeValidity({state, renderedControl}: TextFieldState) {\n    let inputOrTextArea = renderedControl;\n    if (isInputState(state) && !inputOrTextArea) {\n      // Get cached <input> or create it.\n      inputOrTextArea = this.inputControl || document.createElement('input');\n      // Cache the <input> to re-use it next time.\n      this.inputControl = inputOrTextArea;\n    } else if (!inputOrTextArea) {\n      // Get cached <textarea> or create it.\n      inputOrTextArea =\n        this.textAreaControl || document.createElement('textarea');\n      // Cache the <textarea> to re-use it next time.\n      this.textAreaControl = inputOrTextArea;\n    }\n\n    // Set this variable so we can check it for input-specific properties.\n    const input = isInputState(state)\n      ? (inputOrTextArea as HTMLInputElement)\n      : null;\n\n    // Set input's \"type\" first, since this can change the other properties\n    if (input) {\n      input.type = state.type;\n    }\n\n    if (inputOrTextArea.value !== state.value) {\n      // Only programmatically set the value if there's a difference. When using\n      // the rendered control, the value will always be up to date. Setting the\n      // property (even if it's the same string) will reset the internal <input>\n      // dirty flag, making minlength and maxlength validation reset.\n      inputOrTextArea.value = state.value;\n    }\n\n    inputOrTextArea.required = state.required;\n\n    // The following IDLAttribute properties will always hydrate an attribute,\n    // even if set to a the default value ('' or -1). The presence of the\n    // attribute triggers constraint validation, so we must remove the attribute\n    // when empty.\n    if (input) {\n      const inputState = state as InputState;\n      if (inputState.pattern) {\n        input.pattern = inputState.pattern;\n      } else {\n        input.removeAttribute('pattern');\n      }\n\n      if (inputState.min) {\n        input.min = inputState.min;\n      } else {\n        input.removeAttribute('min');\n      }\n\n      if (inputState.max) {\n        input.max = inputState.max;\n      } else {\n        input.removeAttribute('max');\n      }\n\n      if (inputState.step) {\n        input.step = inputState.step;\n      } else {\n        input.removeAttribute('step');\n      }\n    }\n\n    // Use -1 to represent no minlength and maxlength, which is what the\n    // platform input returns. However, it will throw an error if you try to\n    // manually set it to -1.\n    if (state.minLength > -1) {\n      inputOrTextArea.minLength = state.minLength;\n    } else {\n      inputOrTextArea.removeAttribute('minlength');\n    }\n\n    if (state.maxLength > -1) {\n      inputOrTextArea.maxLength = state.maxLength;\n    } else {\n      inputOrTextArea.removeAttribute('maxlength');\n    }\n\n    return {\n      validity: inputOrTextArea.validity,\n      validationMessage: inputOrTextArea.validationMessage,\n    };\n  }\n\n  protected override equals(\n    {state: prev}: TextFieldState,\n    {state: next}: TextFieldState,\n  ) {\n    // Check shared input and textarea properties\n    const inputOrTextAreaEqual =\n      prev.type === next.type &&\n      prev.value === next.value &&\n      prev.required === next.required &&\n      prev.minLength === next.minLength &&\n      prev.maxLength === next.maxLength;\n\n    if (!isInputState(prev) || !isInputState(next)) {\n      // Both are textareas, all relevant properties are equal.\n      return inputOrTextAreaEqual;\n    }\n\n    // Check additional input-specific properties.\n    return (\n      inputOrTextAreaEqual &&\n      prev.pattern === next.pattern &&\n      prev.min === next.min &&\n      prev.max === next.max &&\n      prev.step === next.step\n    );\n  }\n\n  protected override copy({state}: TextFieldState): TextFieldState {\n    // Don't hold a reference to the rendered control when copying since we\n    // don't use it when checking if the state changed.\n    return {\n      state: isInputState(state)\n        ? this.copyInput(state)\n        : this.copyTextArea(state),\n      renderedControl: null,\n    };\n  }\n\n  private copyInput(state: InputState): InputState {\n    const {type, pattern, min, max, step} = state;\n    return {\n      ...this.copySharedState(state),\n      type,\n      pattern,\n      min,\n      max,\n      step,\n    };\n  }\n\n  private copyTextArea(state: TextAreaState): TextAreaState {\n    return {\n      ...this.copySharedState(state),\n      type: state.type,\n    };\n  }\n\n  private copySharedState({\n    value,\n    required,\n    minLength,\n    maxLength,\n  }: SharedInputAndTextAreaState): SharedInputAndTextAreaState {\n    return {value, required, minLength, maxLength};\n  }\n}\n\nfunction isInputState(state: InputState | TextAreaState): state is InputState {\n  return state.type !== 'textarea';\n}\n"]}

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

@@ -70,6 +70,10 @@ export declare abstract class Validator<State> {
      * Creates a copy of a state. This is used to cache state and check if it
      * changes.
      *
+     * Note: do NOT spread the {...state} to copy it. The actual state object is
+     * a web component, and trying to spread its getter/setter properties won't
+     * work.
+     *
      * @param state The state to copy.
      * @return A copy of the state.
      */

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;CAsCF","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   * Note: do NOT spread the {...state} to copy it. The actual state object is\n   * a web component, and trying to spread its getter/setter properties won't\n   * work.\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"]}

package/labs/card/internal/_outlined-card.scss

@@ -34,6 +34,6 @@
   }
 
   .container {
-    outline: var(--_outline-width) solid var(--_outline-color);
+    border: var(--_outline-width) solid var(--_outline-color);
   }
 }

package/labs/card/internal/_shared.scss

@@ -10,9 +10,12 @@
 @mixin styles() {
   :host {
     border-radius: var(--_container-shape);
+    box-sizing: border-box;
     display: flex;
-    padding: 16px;
+    flex-direction: column;
     position: relative;
+    // Reset z-index for background elements.
+    z-index: 0;
   }
 
   // Separate element will be needed for disabled opacities (b/307361748)
@@ -21,10 +24,14 @@
     border-radius: inherit;
     inset: 0;
     position: absolute;
+    // Place behind content.
+    z-index: -1;
   }
 
   md-elevation {
     border-radius: inherit;
+    // Place behind content.
+    z-index: -1;
 
     @include elevation.theme(
       (
@@ -35,6 +42,7 @@
   }
 
   slot {
-    z-index: 0; // Place content above background elements
+    // Allow content to inherit card's border radius
+    border-radius: inherit;
   }
 }

package/labs/card/internal/outlined-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-color: var(--md-outlined-card-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-outlined-card-container-elevation, 0);--_container-shadow-color: var(--md-outlined-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-outlined-card-container-shape, 12px);--_outline-color: var(--md-outlined-card-outline-color, var(--md-sys-color-outline-variant, #cac4d0));--_outline-width: var(--md-outlined-card-outline-width, 1px)}.container{outline:var(--_outline-width) solid var(--_outline-color)}/*# sourceMappingURL=outlined-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-outlined-card-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-outlined-card-container-elevation, 0);--_container-shadow-color: var(--md-outlined-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-outlined-card-container-shape, 12px);--_outline-color: var(--md-outlined-card-outline-color, var(--md-sys-color-outline-variant, #cac4d0));--_outline-width: var(--md-outlined-card-outline-width, 1px)}.container{border:var(--_outline-width) solid var(--_outline-color)}/*# sourceMappingURL=outlined-styles.css.map */
 `;
 //# sourceMappingURL=outlined-styles.css.js.map