@matter-server/dashboard 0.2.6 → 0.2.7-alpha.0-20260118-45c7af0

package/dist/web/js/validator-MOJiFndw.js

@@ -0,0 +1,1122 @@
+import { _ as __decorate, n as n$1, o as o$1, r, a as e, i as i$1, f as e$1, A, h as b, D, E as EASING, j as i$2, t, s as e$2, v as i$3, w as t$1, x as E, y as internals } from './matter-dashboard-app-DlHSE_Qh.js';
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A field component.
+ */
+class Field extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.error = false;
+    this.focused = false;
+    this.label = '';
+    this.noAsterisk = false;
+    this.populated = false;
+    this.required = false;
+    this.resizable = false;
+    this.supportingText = '';
+    this.errorText = '';
+    this.count = -1;
+    this.max = -1;
+    /**
+     * Whether or not the field has leading content.
+     */
+    this.hasStart = false;
+    /**
+     * Whether or not the field has trailing content.
+     */
+    this.hasEnd = false;
+    this.isAnimating = false;
+    /**
+     * When set to true, the error text's `role="alert"` will be removed, then
+     * re-added after an animation frame. This will re-announce an error message
+     * to screen readers.
+     */
+    this.refreshErrorAlert = false;
+    this.disableTransitions = false;
+  }
+  get counterText() {
+    // Count and max are typed as number, but can be set to null when Lit removes
+    // their attributes. These getters coerce back to a number for calculations.
+    const countAsNumber = this.count ?? -1;
+    const maxAsNumber = this.max ?? -1;
+    // Counter does not show if count is negative, or max is negative or 0.
+    if (countAsNumber < 0 || maxAsNumber <= 0) {
+      return '';
+    }
+    return `${countAsNumber} / ${maxAsNumber}`;
+  }
+  get supportingOrErrorText() {
+    return this.error && this.errorText ? this.errorText : this.supportingText;
+  }
+  /**
+   * Re-announces the field's error supporting text to screen readers.
+   *
+   * Error text announces to screen readers anytime it is visible and changes.
+   * Use the method to re-announce the message when the text has not changed,
+   * but announcement is still needed (such as for `reportValidity()`).
+   */
+  reannounceError() {
+    this.refreshErrorAlert = true;
+  }
+  update(props) {
+    // Client-side property updates
+    const isDisabledChanging = props.has('disabled') && props.get('disabled') !== undefined;
+    if (isDisabledChanging) {
+      this.disableTransitions = true;
+    }
+    // When disabling, remove focus styles if focused.
+    if (this.disabled && this.focused) {
+      props.set('focused', true);
+      this.focused = false;
+    }
+    // Animate if focused or populated change.
+    this.animateLabelIfNeeded({
+      wasFocused: props.get('focused'),
+      wasPopulated: props.get('populated')
+    });
+    super.update(props);
+  }
+  render() {
+    var _this$renderOutline, _this$renderBackgroun, _this$renderStateLaye, _this$renderIndicator;
+    const floatingLabel = this.renderLabel(/*isFloating*/true);
+    const restingLabel = this.renderLabel(/*isFloating*/false);
+    const outline = (_this$renderOutline = this.renderOutline) === null || _this$renderOutline === void 0 ? void 0 : _this$renderOutline.call(this, floatingLabel);
+    const classes = {
+      'disabled': this.disabled,
+      'disable-transitions': this.disableTransitions,
+      'error': this.error && !this.disabled,
+      'focused': this.focused,
+      'with-start': this.hasStart,
+      'with-end': this.hasEnd,
+      'populated': this.populated,
+      'resizable': this.resizable,
+      'required': this.required,
+      'no-label': !this.label
+    };
+    return b`
+      <div class="field ${e$1(classes)}">
+        <div class="container-overflow">
+          ${(_this$renderBackgroun = this.renderBackground) === null || _this$renderBackgroun === void 0 ? void 0 : _this$renderBackgroun.call(this)}
+          <slot name="container"></slot>
+          ${(_this$renderStateLaye = this.renderStateLayer) === null || _this$renderStateLaye === void 0 ? void 0 : _this$renderStateLaye.call(this)} ${(_this$renderIndicator = this.renderIndicator) === null || _this$renderIndicator === void 0 ? void 0 : _this$renderIndicator.call(this)} ${outline}
+          <div class="container">
+            <div class="start">
+              <slot name="start"></slot>
+            </div>
+            <div class="middle">
+              <div class="label-wrapper">
+                ${restingLabel} ${outline ? A : floatingLabel}
+              </div>
+              <div class="content">
+                <slot></slot>
+              </div>
+            </div>
+            <div class="end">
+              <slot name="end"></slot>
+            </div>
+          </div>
+        </div>
+        ${this.renderSupportingText()}
+      </div>
+    `;
+  }
+  updated(changed) {
+    if (changed.has('supportingText') || changed.has('errorText') || changed.has('count') || changed.has('max')) {
+      this.updateSlottedAriaDescribedBy();
+    }
+    if (this.refreshErrorAlert) {
+      // The past render cycle removed the role="alert" from the error message.
+      // Re-add it after an animation frame to re-announce the error.
+      requestAnimationFrame(() => {
+        this.refreshErrorAlert = false;
+      });
+    }
+    if (this.disableTransitions) {
+      requestAnimationFrame(() => {
+        this.disableTransitions = false;
+      });
+    }
+  }
+  renderSupportingText() {
+    const {
+      supportingOrErrorText,
+      counterText
+    } = this;
+    if (!supportingOrErrorText && !counterText) {
+      return A;
+    }
+    // Always render the supporting text span so that our `space-around`
+    // container puts the counter at the end.
+    const start = b`<span>${supportingOrErrorText}</span>`;
+    // Conditionally render counter so we don't render the extra `gap`.
+    // TODO(b/244473435): add aria-label and announcements
+    const end = counterText ? b`<span class="counter">${counterText}</span>` : A;
+    // Announce if there is an error and error text visible.
+    // If refreshErrorAlert is true, do not announce. This will remove the
+    // role="alert" attribute. Another render cycle will happen after an
+    // animation frame to re-add the role.
+    const shouldErrorAnnounce = this.error && this.errorText && !this.refreshErrorAlert;
+    const role = shouldErrorAnnounce ? 'alert' : A;
+    return b`
+      <div class="supporting-text" role=${role}>${start}${end}</div>
+      <slot
+        name="aria-describedby"
+        @slotchange=${this.updateSlottedAriaDescribedBy}></slot>
+    `;
+  }
+  updateSlottedAriaDescribedBy() {
+    for (const element of this.slottedAriaDescribedBy) {
+      D(b`${this.supportingOrErrorText} ${this.counterText}`, element);
+      element.setAttribute('hidden', '');
+    }
+  }
+  renderLabel(isFloating) {
+    if (!this.label) {
+      return A;
+    }
+    let visible;
+    if (isFloating) {
+      // Floating label is visible when focused/populated or when animating.
+      visible = this.focused || this.populated || this.isAnimating;
+    } else {
+      // Resting label is visible when unfocused. It is never visible while
+      // animating.
+      visible = !this.focused && !this.populated && !this.isAnimating;
+    }
+    const classes = {
+      'hidden': !visible,
+      'floating': isFloating,
+      'resting': !isFloating
+    };
+    // Add '*' if a label is present and the field is required
+    const labelText = `${this.label}${this.required && !this.noAsterisk ? '*' : ''}`;
+    return b`
+      <span class="label ${e$1(classes)}" aria-hidden=${!visible}
+        >${labelText}</span
+      >
+    `;
+  }
+  animateLabelIfNeeded({
+    wasFocused,
+    wasPopulated
+  }) {
+    var _this$labelAnimation, _this$floatingLabelEl, _this$labelAnimation2;
+    if (!this.label) {
+      return;
+    }
+    wasFocused ?? (wasFocused = this.focused);
+    wasPopulated ?? (wasPopulated = this.populated);
+    const wasFloating = wasFocused || wasPopulated;
+    const shouldBeFloating = this.focused || this.populated;
+    if (wasFloating === shouldBeFloating) {
+      return;
+    }
+    this.isAnimating = true;
+    (_this$labelAnimation = this.labelAnimation) === null || _this$labelAnimation === void 0 || _this$labelAnimation.cancel();
+    // Only one label is visible at a time for clearer text rendering.
+    // The floating label is visible and used during animation. At the end of
+    // the animation, it will either remain visible (if floating) or hide and
+    // the resting label will be shown.
+    //
+    // We don't use forward filling because if the dimensions of the text field
+    // change (leading icon removed, density changes, etc), then the animation
+    // will be inaccurate.
+    //
+    // Re-calculating the animation each time will prevent any visual glitches
+    // from appearing.
+    // TODO(b/241113345): use animation tokens
+    this.labelAnimation = (_this$floatingLabelEl = this.floatingLabelEl) === null || _this$floatingLabelEl === void 0 ? void 0 : _this$floatingLabelEl.animate(this.getLabelKeyframes(), {
+      duration: 150,
+      easing: EASING.STANDARD
+    });
+    (_this$labelAnimation2 = this.labelAnimation) === null || _this$labelAnimation2 === void 0 || _this$labelAnimation2.addEventListener('finish', () => {
+      // At the end of the animation, update the visible label.
+      this.isAnimating = false;
+    });
+  }
+  getLabelKeyframes() {
+    const {
+      floatingLabelEl,
+      restingLabelEl
+    } = this;
+    if (!floatingLabelEl || !restingLabelEl) {
+      return [];
+    }
+    const {
+      x: floatingX,
+      y: floatingY,
+      height: floatingHeight
+    } = floatingLabelEl.getBoundingClientRect();
+    const {
+      x: restingX,
+      y: restingY,
+      height: restingHeight
+    } = restingLabelEl.getBoundingClientRect();
+    const floatingScrollWidth = floatingLabelEl.scrollWidth;
+    const restingScrollWidth = restingLabelEl.scrollWidth;
+    // Scale by width ratio instead of font size since letter-spacing will scale
+    // incorrectly. Using the width we can better approximate the adjusted
+    // scale and compensate for tracking and overflow.
+    // (use scrollWidth instead of width to account for clipped labels)
+    const scale = restingScrollWidth / floatingScrollWidth;
+    const xDelta = restingX - floatingX;
+    // The line-height of the resting and floating label are different. When
+    // we move the floating label down to the resting label's position, it won't
+    // exactly match because of this. We need to adjust by half of what the
+    // final scaled floating label's height will be.
+    const yDelta = restingY - floatingY + Math.round((restingHeight - floatingHeight * scale) / 2);
+    // Create the two transforms: floating to resting (using the calculations
+    // above), and resting to floating (re-setting the transform to initial
+    // values).
+    const restTransform = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;
+    const floatTransform = `translateX(0) translateY(0) scale(1)`;
+    // Constrain the floating labels width to a scaled percentage of the
+    // resting label's width. This will prevent long clipped labels from
+    // overflowing the container.
+    const restingClientWidth = restingLabelEl.clientWidth;
+    const isRestingClipped = restingScrollWidth > restingClientWidth;
+    const width = isRestingClipped ? `${restingClientWidth / scale}px` : '';
+    if (this.focused || this.populated) {
+      return [{
+        transform: restTransform,
+        width
+      }, {
+        transform: floatTransform,
+        width
+      }];
+    }
+    return [{
+      transform: floatTransform,
+      width
+    }, {
+      transform: restTransform,
+      width
+    }];
+  }
+  getSurfacePositionClientRect() {
+    return this.containerEl.getBoundingClientRect();
+  }
+}
+__decorate([n$1({
+  type: Boolean
+})], Field.prototype, "disabled", void 0);
+__decorate([n$1({
+  type: Boolean
+})], Field.prototype, "error", void 0);
+__decorate([n$1({
+  type: Boolean
+})], Field.prototype, "focused", void 0);
+__decorate([n$1()], Field.prototype, "label", void 0);
+__decorate([n$1({
+  type: Boolean,
+  attribute: 'no-asterisk'
+})], Field.prototype, "noAsterisk", void 0);
+__decorate([n$1({
+  type: Boolean
+})], Field.prototype, "populated", void 0);
+__decorate([n$1({
+  type: Boolean
+})], Field.prototype, "required", void 0);
+__decorate([n$1({
+  type: Boolean
+})], Field.prototype, "resizable", void 0);
+__decorate([n$1({
+  attribute: 'supporting-text'
+})], Field.prototype, "supportingText", void 0);
+__decorate([n$1({
+  attribute: 'error-text'
+})], Field.prototype, "errorText", void 0);
+__decorate([n$1({
+  type: Number
+})], Field.prototype, "count", void 0);
+__decorate([n$1({
+  type: Number
+})], Field.prototype, "max", void 0);
+__decorate([n$1({
+  type: Boolean,
+  attribute: 'has-start'
+})], Field.prototype, "hasStart", void 0);
+__decorate([n$1({
+  type: Boolean,
+  attribute: 'has-end'
+})], Field.prototype, "hasEnd", void 0);
+__decorate([o$1({
+  slot: 'aria-describedby'
+})], Field.prototype, "slottedAriaDescribedBy", void 0);
+__decorate([r()], Field.prototype, "isAnimating", void 0);
+__decorate([r()], Field.prototype, "refreshErrorAlert", void 0);
+__decorate([r()], Field.prototype, "disableTransitions", void 0);
+__decorate([e('.label.floating')], Field.prototype, "floatingLabelEl", void 0);
+__decorate([e('.label.resting')], Field.prototype, "restingLabelEl", void 0);
+__decorate([e('.container')], Field.prototype, "containerEl", void 0);
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An outlined field component.
+ */
+class OutlinedField extends Field {
+  renderOutline(floatingLabel) {
+    return b`
+      <div class="outline">
+        <div class="outline-start"></div>
+        <div class="outline-notch">
+          <div class="outline-panel-inactive"></div>
+          <div class="outline-panel-active"></div>
+          <div class="outline-label">${floatingLabel}</div>
+        </div>
+        <div class="outline-end"></div>
+      </div>
+    `;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./field/internal/outlined-styles.css.
+const styles$1 = i$2`@layer styles{:host{--_bottom-space: var(--md-outlined-field-bottom-space, 16px);--_content-color: var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1d1b20));--_content-font: var(--md-outlined-field-content-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_content-line-height: var(--md-outlined-field-content-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_content-size: var(--md-outlined-field-content-size, var(--md-sys-typescale-body-large-size, 1rem));--_content-space: var(--md-outlined-field-content-space, 16px);--_content-weight: var(--md-outlined-field-content-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_disabled-content-color: var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-content-opacity: var(--md-outlined-field-disabled-content-opacity, 0.38);--_disabled-label-text-color: var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-field-disabled-label-text-opacity, 0.38);--_disabled-leading-content-color: var(--md-outlined-field-disabled-leading-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-content-opacity: var(--md-outlined-field-disabled-leading-content-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-outlined-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-content-color: var(--md-outlined-field-disabled-trailing-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-content-opacity: var(--md-outlined-field-disabled-trailing-content-opacity, 0.38);--_error-content-color: var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-content-color: var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-content-color: var(--md-outlined-field-error-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-content-color: var(--md-outlined-field-error-focus-trailing-content-color, var(--md-sys-color-error, #b3261e));--_error-hover-content-color: var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-content-color: var(--md-outlined-field-error-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-content-color: var(--md-outlined-field-error-hover-trailing-content-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-content-color: var(--md-outlined-field-error-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-content-color: var(--md-outlined-field-error-trailing-content-color, var(--md-sys-color-error, #b3261e));--_focus-content-color: var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-content-color: var(--md-outlined-field-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-field-focus-outline-width, 3px);--_focus-supporting-text-color: var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-content-color: var(--md-outlined-field-focus-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-content-color: var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-content-color: var(--md-outlined-field-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-content-color: var(--md-outlined-field-hover-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-padding-bottom: var(--md-outlined-field-label-text-padding-bottom, 8px);--_label-text-populated-line-height: var(--md-outlined-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-outlined-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-outlined-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-outlined-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-content-color: var(--md-outlined-field-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-space: var(--md-outlined-field-leading-space, 16px);--_outline-color: var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);--_outline-width: var(--md-outlined-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-leading-space: var(--md-outlined-field-supporting-text-leading-space, 16px);--_supporting-text-line-height: var(--md-outlined-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-outlined-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-top-space: var(--md-outlined-field-supporting-text-top-space, 4px);--_supporting-text-trailing-space: var(--md-outlined-field-supporting-text-trailing-space, 16px);--_supporting-text-weight: var(--md-outlined-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_top-space: var(--md-outlined-field-top-space, 16px);--_trailing-content-color: var(--md-outlined-field-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-space: var(--md-outlined-field-trailing-space, 16px);--_with-leading-content-leading-space: var(--md-outlined-field-with-leading-content-leading-space, 12px);--_with-trailing-content-trailing-space: var(--md-outlined-field-with-trailing-content-trailing-space, 12px);--_container-shape-start-start: var(--md-outlined-field-container-shape-start-start, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-outlined-field-container-shape-start-end, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-outlined-field-container-shape-end-end, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-start: var(--md-outlined-field-container-shape-end-start, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)))}.outline{border-color:var(--_outline-color);border-radius:inherit;display:flex;pointer-events:none;height:100%;position:absolute;width:100%;z-index:1}.outline-start::before,.outline-start::after,.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after,.outline-end::before,.outline-end::after{border:inherit;content:"";inset:0;position:absolute}.outline-start,.outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.outline-start::before,.outline-start::after,.outline-end::before,.outline-end::after{border-bottom-style:solid;border-top-style:solid}.outline-start::after,.outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .outline-start::after,.focused .outline-end::after{opacity:1}.outline-start::before,.outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0;margin-inline-end:var(--_outline-label-padding)}.outline-end{flex-grow:1;margin-inline-start:calc(-1*var(--_outline-label-padding))}.outline-end::before,.outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.outline-notch{align-items:flex-start;border:inherit;display:flex;margin-inline-start:calc(-1*var(--_outline-label-padding));margin-inline-end:var(--_outline-label-padding);max-width:calc(100% - var(--_leading-space) - var(--_trailing-space));padding:0 var(--_outline-label-padding);position:relative}.no-label .outline-notch{display:none}.outline-panel-inactive,.outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.2, 0, 0, 1)}.outline-panel-inactive::before,.outline-panel-active::before{right:50%;transform-origin:top left}.outline-panel-inactive::after,.outline-panel-active::after{left:50%;transform-origin:top right}.populated .outline-panel-inactive::before,.populated .outline-panel-inactive::after,.populated .outline-panel-active::before,.populated .outline-panel-active::after,.focused .outline-panel-inactive::before,.focused .outline-panel-inactive::after,.focused .outline-panel-active::before,.focused .outline-panel-active::after{transform:scaleX(0)}.outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .outline-panel-active{opacity:1}.outline-label{display:flex;max-width:100%;transform:translateY(calc(-100% + var(--_label-text-padding-bottom)))}.outline-start,.field:not(.with-start) .content ::slotted(*){padding-inline-start:max(var(--_leading-space),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.field:not(.with-start) .label-wrapper{margin-inline-start:max(var(--_leading-space),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.field:not(.with-end) .content ::slotted(*){padding-inline-end:max(var(--_trailing-space),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.field:not(.with-end) .label-wrapper{margin-inline-end:max(var(--_trailing-space),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.outline-start::before,.outline-end::before,.outline-panel-inactive,.outline-panel-inactive::before,.outline-panel-inactive::after{border-width:var(--_outline-width)}:hover .outline{border-color:var(--_hover-outline-color);color:var(--_hover-outline-color)}:hover .outline-start::before,:hover .outline-end::before,:hover .outline-panel-inactive,:hover .outline-panel-inactive::before,:hover .outline-panel-inactive::after{border-width:var(--_hover-outline-width)}.focused .outline{border-color:var(--_focus-outline-color);color:var(--_focus-outline-color)}.outline-start::after,.outline-end::after,.outline-panel-active,.outline-panel-active::before,.outline-panel-active::after{border-width:var(--_focus-outline-width)}.disabled .outline{border-color:var(--_disabled-outline-color);color:var(--_disabled-outline-color)}.disabled .outline-start,.disabled .outline-end,.disabled .outline-panel-inactive{opacity:var(--_disabled-outline-opacity)}.disabled .outline-start::before,.disabled .outline-end::before,.disabled .outline-panel-inactive,.disabled .outline-panel-inactive::before,.disabled .outline-panel-inactive::after{border-width:var(--_disabled-outline-width)}.error .outline{border-color:var(--_error-outline-color);color:var(--_error-outline-color)}.error:hover .outline{border-color:var(--_error-hover-outline-color);color:var(--_error-hover-outline-color)}.error.focused .outline{border-color:var(--_error-focus-outline-color);color:var(--_error-focus-outline-color)}.resizable .container{bottom:var(--_focus-outline-width);inset-inline-end:var(--_focus-outline-width);clip-path:inset(var(--_focus-outline-width) 0 0 var(--_focus-outline-width))}.resizable .container>*{top:var(--_focus-outline-width);inset-inline-start:var(--_focus-outline-width)}.resizable .container:dir(rtl){clip-path:inset(var(--_focus-outline-width) var(--_focus-outline-width) 0 0)}}@layer hcm{@media(forced-colors: active){.disabled .outline{border-color:GrayText;color:GrayText}.disabled :is(.outline-start,.outline-end,.outline-panel-inactive){opacity:1}}}
+`;
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./field/internal/shared-styles.css.
+const styles = i$2`:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}slot[name=container]{border-radius:inherit}slot[name=container]::slotted(*){border-radius:inherit;inset:0;pointer-events:none;position:absolute}@layer styles{.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start{margin-inline:var(--_with-leading-content-leading-space) var(--_content-space)}.with-end .end{margin-inline:var(--_content-space) var(--_with-trailing-content-trailing-space)}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;overflow-wrap:revert;white-space:revert}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}}@layer hcm{@media(forced-colors: active){.disabled :is(.start,.content,.end){color:GrayText;opacity:1}}}@layer styles{.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .label:not(.hidden){color:GrayText;opacity:1}}}@layer styles{.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .supporting-text{color:GrayText;opacity:1}}}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/228525797): add docs
+ * @final
+ * @suppress {visibility}
+ */
+let MdOutlinedField = class MdOutlinedField extends OutlinedField {};
+MdOutlinedField.styles = [styles, styles$1];
+MdOutlinedField = __decorate([t('md-outlined-field')], MdOutlinedField);
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const n = "important",
+  i = " !" + n,
+  o = e$2(class extends i$3 {
+    constructor(t) {
+      var _t$strings;
+      if (super(t), t.type !== t$1.ATTRIBUTE || "style" !== t.name || ((_t$strings = t.strings) === null || _t$strings === void 0 ? void 0 : _t$strings.length) > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+    }
+    render(t) {
+      return Object.keys(t).reduce((e, r) => {
+        const s = t[r];
+        return null == s ? e : e + `${r = r.includes("-") ? r : r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
+      }, "");
+    }
+    update(e, [r]) {
+      const {
+        style: s
+      } = e.element;
+      if (void 0 === this.ft) return this.ft = new Set(Object.keys(r)), this.render(r);
+      for (const t of this.ft) null == r[t] && (this.ft.delete(t), t.includes("-") ? s.removeProperty(t) : s[t] = null);
+      for (const t in r) {
+        const e = r[t];
+        if (null != e) {
+          this.ft.add(t);
+          const r = "string" == typeof e && e.endsWith(i);
+          t.includes("-") || r ? s.setProperty(t, r ? e.slice(0, -11) : e, r ? n : "") : s[t] = e;
+        }
+      }
+      return E;
+    }
+  });
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A symbol property used to create a constraint validation `Validator`.
+ * Required for all `mixinConstraintValidation()` elements.
+ */
+const createValidator = Symbol('createValidator');
+/**
+ * A symbol property used to return an anchor for constraint validation popups.
+ * Required for all `mixinConstraintValidation()` elements.
+ */
+const getValidityAnchor = Symbol('getValidityAnchor');
+// Private symbol members, used to avoid name clashing.
+const privateValidator = Symbol('privateValidator');
+const privateSyncValidity = Symbol('privateSyncValidity');
+const privateCustomValidationMessage = Symbol('privateCustomValidationMessage');
+/**
+ * Mixes in constraint validation APIs for an element.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
+ * for more details.
+ *
+ * Implementations must provide a validator to cache and compute its validity,
+ * along with a shadow root element to anchor validation popups to.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinConstraintValidation(
+ *   mixinFormAssociated(mixinElementInternals(LitElement))
+ * );
+ *
+ * class MyCheckbox extends baseClass {
+ *   \@property({type: Boolean}) checked = false;
+ *   \@property({type: Boolean}) required = false;
+ *
+ *   [createValidator]() {
+ *     return new CheckboxValidator(() => this);
+ *   }
+ *
+ *   [getValidityAnchor]() {
+ *     return this.renderRoot.querySelector('.root');
+ *   }
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `ConstraintValidation` mixed in.
+ */
+function mixinConstraintValidation(base) {
+  var _a;
+  class ConstraintValidationElement extends base {
+    constructor() {
+      super(...arguments);
+      /**
+       * Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
+       * Replace with this[internals].validity.customError when resolved.
+       */
+      this[_a] = '';
+    }
+    get validity() {
+      this[privateSyncValidity]();
+      return this[internals].validity;
+    }
+    get validationMessage() {
+      this[privateSyncValidity]();
+      return this[internals].validationMessage;
+    }
+    get willValidate() {
+      this[privateSyncValidity]();
+      return this[internals].willValidate;
+    }
+    checkValidity() {
+      this[privateSyncValidity]();
+      return this[internals].checkValidity();
+    }
+    reportValidity() {
+      this[privateSyncValidity]();
+      return this[internals].reportValidity();
+    }
+    setCustomValidity(error) {
+      this[privateCustomValidationMessage] = error;
+      this[privateSyncValidity]();
+    }
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
+      this[privateSyncValidity]();
+    }
+    firstUpdated(changed) {
+      super.firstUpdated(changed);
+      // Sync the validity again when the element first renders, since the
+      // validity anchor is now available.
+      //
+      // Elements that `delegatesFocus: true` to an `<input>` will throw an
+      // error in Chrome and Safari when a form tries to submit or call
+      // `form.reportValidity()`:
+      // "An invalid form control with name='' is not focusable"
+      //
+      // The validity anchor MUST be provided in `internals.setValidity()` and
+      // MUST be the `<input>` element rendered.
+      //
+      // See https://lit.dev/playground/#gist=6c26e418e0010f7a5aac15005cde8bde
+      // for a reproduction.
+      this[privateSyncValidity]();
+    }
+    [(_a = privateCustomValidationMessage, privateSyncValidity)]() {
+      if (!this[privateValidator]) {
+        this[privateValidator] = this[createValidator]();
+      }
+      const {
+        validity,
+        validationMessage: nonCustomValidationMessage
+      } = this[privateValidator].getValidity();
+      const customError = !!this[privateCustomValidationMessage];
+      const validationMessage = this[privateCustomValidationMessage] || nonCustomValidationMessage;
+      this[internals].setValidity({
+        ...validity,
+        customError
+      }, validationMessage, this[getValidityAnchor]() ?? undefined);
+    }
+    [createValidator]() {
+      throw new Error('Implement [createValidator]');
+    }
+    [getValidityAnchor]() {
+      throw new Error('Implement [getValidityAnchor]');
+    }
+  }
+  return ConstraintValidationElement;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A symbol property to retrieve the form value for an element.
+ */
+const getFormValue = Symbol('getFormValue');
+/**
+ * A symbol property to retrieve the form state for an element.
+ */
+const getFormState = Symbol('getFormState');
+/**
+ * Mixes in form-associated behavior for a class. This allows an element to add
+ * values to `<form>` elements.
+ *
+ * Implementing classes should provide a `[formValue]` to return the current
+ * value of the element, as well as reset and restore callbacks.
+ *
+ * @example
+ * ```ts
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ *
+ * class MyControl extends base {
+ *   \@property()
+ *   value = '';
+ *
+ *   override [getFormValue]() {
+ *     return this.value;
+ *   }
+ *
+ *   override formResetCallback() {
+ *     const defaultValue = this.getAttribute('value');
+ *     this.value = defaultValue;
+ *   }
+ *
+ *   override formStateRestoreCallback(state: string) {
+ *     this.value = state;
+ *   }
+ * }
+ * ```
+ *
+ * Elements may optionally provide a `[formState]` if their values do not
+ * represent the state of the component.
+ *
+ * @example
+ * ```ts
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ *
+ * class MyCheckbox extends base {
+ *   \@property()
+ *   value = 'on';
+ *
+ *   \@property({type: Boolean})
+ *   checked = false;
+ *
+ *   override [getFormValue]() {
+ *     return this.checked ? this.value : null;
+ *   }
+ *
+ *   override [getFormState]() {
+ *     return String(this.checked);
+ *   }
+ *
+ *   override formResetCallback() {
+ *     const defaultValue = this.hasAttribute('checked');
+ *     this.checked = defaultValue;
+ *   }
+ *
+ *   override formStateRestoreCallback(state: string) {
+ *     this.checked = Boolean(state);
+ *   }
+ * }
+ * ```
+ *
+ * IMPORTANT: Requires declares for lit-analyzer
+ * @example
+ * ```ts
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ * class MyControl extends base {
+ *   // Writable mixin properties for lit-html binding, needed for lit-analyzer
+ *   declare disabled: boolean;
+ *   declare name: string;
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into. The base class must use
+ *     `mixinElementInternals()`.
+ * @return The provided class with `FormAssociated` mixed in.
+ */
+function mixinFormAssociated(base) {
+  class FormAssociatedElement extends base {
+    get form() {
+      return this[internals].form;
+    }
+    get labels() {
+      return this[internals].labels;
+    }
+    // Use @property for the `name` and `disabled` properties to add them to the
+    // `observedAttributes` array and trigger `attributeChangedCallback()`.
+    //
+    // We don't use Lit's default getter/setter (`noAccessor: true`) because
+    // the attributes need to be updated synchronously to work with synchronous
+    // form APIs, and Lit updates attributes async by default.
+    get name() {
+      return this.getAttribute('name') ?? '';
+    }
+    set name(name) {
+      // Note: setting name to null or empty does not remove the attribute.
+      this.setAttribute('name', name);
+      // We don't need to call `requestUpdate()` since it's called synchronously
+      // in `attributeChangedCallback()`.
+    }
+    get disabled() {
+      return this.hasAttribute('disabled');
+    }
+    set disabled(disabled) {
+      this.toggleAttribute('disabled', disabled);
+      // We don't need to call `requestUpdate()` since it's called synchronously
+      // in `attributeChangedCallback()`.
+    }
+    attributeChangedCallback(name, old, value) {
+      // Manually `requestUpdate()` for `name` and `disabled` when their
+      // attribute or property changes.
+      // The properties update their attributes, so this callback is invoked
+      // immediately when the properties are set. We call `requestUpdate()` here
+      // instead of letting Lit set the properties from the attribute change.
+      // That would cause the properties to re-set the attribute and invoke this
+      // callback again in a loop. This leads to stale state when Lit tries to
+      // determine if a property changed or not.
+      if (name === 'name' || name === 'disabled') {
+        // Disabled's value is only false if the attribute is missing and null.
+        const oldValue = name === 'disabled' ? old !== null : old;
+        // Trigger a lit update when the attribute changes.
+        this.requestUpdate(name, oldValue);
+        return;
+      }
+      super.attributeChangedCallback(name, old, value);
+    }
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
+      // If any properties change, update the form value, which may have changed
+      // as well.
+      // Update the form value synchronously in `requestUpdate()` rather than
+      // `update()` or `updated()`, which are async. This is necessary to ensure
+      // that form data is updated in time for synchronous event listeners.
+      this[internals].setFormValue(this[getFormValue](), this[getFormState]());
+    }
+    [getFormValue]() {
+      // Closure does not allow abstract symbol members, so a default
+      // implementation is needed.
+      throw new Error('Implement [getFormValue]');
+    }
+    [getFormState]() {
+      return this[getFormValue]();
+    }
+    formDisabledCallback(disabled) {
+      this.disabled = disabled;
+    }
+  }
+  /** @nocollapse */
+  FormAssociatedElement.formAssociated = true;
+  __decorate([n$1({
+    noAccessor: true
+  })], FormAssociatedElement.prototype, "name", null);
+  __decorate([n$1({
+    type: Boolean,
+    noAccessor: true
+  })], FormAssociatedElement.prototype, "disabled", null);
+  return FormAssociatedElement;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A symbol property used for a callback when validity has been reported.
+ */
+const onReportValidity = Symbol('onReportValidity');
+// Private symbol members, used to avoid name clashing.
+const privateCleanupFormListeners = Symbol('privateCleanupFormListeners');
+const privateDoNotReportInvalid = Symbol('privateDoNotReportInvalid');
+const privateIsSelfReportingValidity = Symbol('privateIsSelfReportingValidity');
+const privateCallOnReportValidity = Symbol('privateCallOnReportValidity');
+/**
+ * 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.
+ */
+function mixinOnReportValidity(base) {
+  var _a, _b, _c;
+  class OnReportValidityElement extends base {
+    // Mixins must have a constructor with `...args: any[]`
+    // tslint:disable-next-line:no-any
+    constructor(...args) {
+      super(...args);
+      /**
+       * Used to clean up event listeners when a new form is associated.
+       */
+      this[_a] = new AbortController();
+      /**
+       * Used to determine if an invalid event should report validity. Invalid
+       * events from `checkValidity()` do not trigger reporting.
+       */
+      this[_b] = false;
+      /**
+       * Used to determine if the control is reporting validity from itself, or
+       * if a `<form>` is causing the validity report. Forms have different
+       * control focusing behavior.
+       */
+      this[_c] = false;
+      this.addEventListener('invalid', invalidEvent => {
+        // Listen for invalid events dispatched by a `<form>` when it tries to
+        // submit and the element is invalid. We ignore events dispatched when
+        // calling `checkValidity()` as well as untrusted events, since the
+        // `reportValidity()` and `<form>`-dispatched events are always
+        // trusted.
+        if (this[privateDoNotReportInvalid] || !invalidEvent.isTrusted) {
+          return;
+        }
+        this.addEventListener('invalid', () => {
+          // A normal bubbling phase event listener. By adding it here, we
+          // ensure it's the last event listener that is called during the
+          // bubbling phase.
+          this[privateCallOnReportValidity](invalidEvent);
+        }, {
+          once: true
+        });
+      }, {
+        // Listen during the capture phase, which will happen before the
+        // bubbling phase. That way, we can add a final event listener that
+        // will run after other event listeners, and we can check if it was
+        // default prevented. This works because invalid does not bubble.
+        capture: true
+      });
+    }
+    checkValidity() {
+      this[privateDoNotReportInvalid] = true;
+      const valid = super.checkValidity();
+      this[privateDoNotReportInvalid] = false;
+      return valid;
+    }
+    reportValidity() {
+      this[privateIsSelfReportingValidity] = true;
+      const valid = super.reportValidity();
+      // Constructor's invalid listener will handle reporting invalid events.
+      if (valid) {
+        this[privateCallOnReportValidity](null);
+      }
+      this[privateIsSelfReportingValidity] = false;
+      return valid;
+    }
+    [(_a = privateCleanupFormListeners, _b = privateDoNotReportInvalid, _c = privateIsSelfReportingValidity, privateCallOnReportValidity)](invalidEvent) {
+      // Since invalid events do not bubble to parent listeners, and because
+      // our invalid listeners are added lazily after other listeners, we can
+      // reliably read `defaultPrevented` synchronously without worrying
+      // about waiting for another listener that could cancel it.
+      const wasCanceled = invalidEvent === null || invalidEvent === void 0 ? void 0 : invalidEvent.defaultPrevented;
+      if (wasCanceled) {
+        return;
+      }
+      this[onReportValidity](invalidEvent);
+      // If an implementation calls invalidEvent.preventDefault() to stop the
+      // platform popup from displaying, focusing is also prevented, so we need
+      // to manually focus.
+      const implementationCanceledFocus = !wasCanceled && (invalidEvent === null || invalidEvent === void 0 ? void 0 : invalidEvent.defaultPrevented);
+      if (!implementationCanceledFocus) {
+        return;
+      }
+      // The control should be focused when:
+      // - `control.reportValidity()` is called (self-reporting).
+      // - a form is reporting validity for its controls and this is the first
+      //   invalid control.
+      if (this[privateIsSelfReportingValidity] || isFirstInvalidControlInForm(this[internals].form, this)) {
+        this.focus();
+      }
+    }
+    [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 form listeners.
+      this[privateCleanupFormListeners].abort();
+      if (!form) {
+        return;
+      }
+      this[privateCleanupFormListeners] = new AbortController();
+      // Add a listener that fires when the form runs constraint validation and
+      // the control is valid, so that it may remove its error styles.
+      //
+      // This happens on `form.reportValidity()` and `form.requestSubmit()`
+      // (both when the submit fails and passes).
+      addFormReportValidListener(this, form, () => {
+        this[privateCallOnReportValidity](null);
+      }, this[privateCleanupFormListeners].signal);
+    }
+  }
+  return OnReportValidityElement;
+}
+/**
+ * Add a listener that fires when a form runs constraint validation on a control
+ * and it is valid. This is needed to clear previously invalid styles.
+ *
+ * @param control The control of the form to listen for valid events.
+ * @param form The control's form that can run constraint validation.
+ * @param onControlValid A listener that is called when the form runs constraint
+ *     validation and the control is valid.
+ * @param cleanup A cleanup signal to remove the listener.
+ */
+function addFormReportValidListener(control, form, onControlValid, cleanup) {
+  const validateHooks = getFormValidateHooks(form);
+  // When a form validates its controls, check if an invalid event is dispatched
+  // on the control. If it is not, then inform the control to report its valid
+  // state.
+  let controlFiredInvalid = false;
+  let cleanupInvalidListener;
+  let isNextSubmitFromHook = false;
+  validateHooks.addEventListener('before', () => {
+    isNextSubmitFromHook = true;
+    cleanupInvalidListener = new AbortController();
+    controlFiredInvalid = false;
+    control.addEventListener('invalid', () => {
+      controlFiredInvalid = true;
+    }, {
+      signal: cleanupInvalidListener.signal
+    });
+  }, {
+    signal: cleanup
+  });
+  validateHooks.addEventListener('after', () => {
+    var _cleanupInvalidListen;
+    isNextSubmitFromHook = false;
+    (_cleanupInvalidListen = cleanupInvalidListener) === null || _cleanupInvalidListen === void 0 || _cleanupInvalidListen.abort();
+    if (controlFiredInvalid) {
+      return;
+    }
+    onControlValid();
+  }, {
+    signal: cleanup
+  });
+  // The above hooks handle imperatively submitting the form, but not
+  // declaratively submitting the form. This happens when:
+  // 1. A non-custom element `<button type="submit">` is clicked.
+  // 2. Enter is pressed on a non-custom element text editable `<input>`.
+  form.addEventListener('submit', () => {
+    // This submit was from `form.requestSubmit()`, which already calls the
+    // listener.
+    if (isNextSubmitFromHook) {
+      return;
+    }
+    onControlValid();
+  }, {
+    signal: cleanup
+  });
+  // Note: it is a known limitation that we cannot detect if a form tries to
+  // submit declaratively, but fails to do so because an unrelated sibling
+  // control failed its constraint validation.
+  //
+  // Since we cannot detect when that happens, a previously invalid control may
+  // not clear its error styling when it becomes valid again.
+  //
+  // To work around this, call `form.reportValidity()` when submitting a form
+  // declaratively. This can be down on the `<button type="submit">`'s click or
+  // the text editable `<input>`'s 'Enter' keydown.
+}
+const FORM_VALIDATE_HOOKS = new WeakMap();
+/**
+ * Get a hooks `EventTarget` that dispatches 'before' and 'after' events that
+ * fire before a form runs constraint validation and immediately after it
+ * finishes running constraint validation on its controls.
+ *
+ * This happens during `form.reportValidity()` and `form.requestSubmit()`.
+ *
+ * @param form The form to get or set up hooks for.
+ * @return A hooks `EventTarget` to add listeners to.
+ */
+function getFormValidateHooks(form) {
+  if (!FORM_VALIDATE_HOOKS.has(form)) {
+    // Patch form methods to add event listener hooks. These are needed to react
+    // to form behaviors that do not dispatch events, such as a form asking its
+    // controls to report their validity.
+    //
+    // We should only patch the methods once, since multiple controls and other
+    // forces may want to patch this method. We cannot reliably clean it up if
+    // there are multiple patched and re-patched methods referring holding
+    // references to each other.
+    //
+    // Instead, we never clean up the patch but add and clean up event listeners
+    // added to the hooks after the patch.
+    const hooks = new EventTarget();
+    FORM_VALIDATE_HOOKS.set(form, hooks);
+    // Add hooks to support notifying before and after a form has run constraint
+    // validation on its controls.
+    // Note: `form.submit()` does not run constraint validation per spec.
+    for (const methodName of ['reportValidity', 'requestSubmit']) {
+      const superMethod = form[methodName];
+      form[methodName] = function () {
+        hooks.dispatchEvent(new Event('before'));
+        const result = Reflect.apply(superMethod, this, arguments);
+        hooks.dispatchEvent(new Event('after'));
+        return result;
+      };
+    }
+  }
+  return FORM_VALIDATE_HOOKS.get(form);
+}
+/**
+ * Checks if a control is the first invalid control in a form.
+ *
+ * @param form The control's form. When `null`, the control doesn't have a form
+ *     and the method returns true.
+ * @param control The control to check.
+ * @return True if there is no form or if the control is the form's first
+ *     invalid control.
+ */
+function isFirstInvalidControlInForm(form, control) {
+  if (!form) {
+    return true;
+  }
+  let firstInvalidControl;
+  for (const element of form.elements) {
+    if (element.matches(':invalid')) {
+      firstInvalidControl = element;
+      break;
+    }
+  }
+  return firstInvalidControl === control;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A class that computes and caches `ValidityStateFlags` for a component with
+ * a given `State` interface.
+ *
+ * Cached performance before computing validity is important since constraint
+ * validation must be checked frequently and synchronously when properties
+ * change.
+ *
+ * @template State The expected interface of properties relevant to constraint
+ *     validation.
+ */
+class Validator {
+  /**
+   * Creates a new validator.
+   *
+   * @param getCurrentState A callback that returns the current state of
+   *     constraint validation-related properties.
+   */
+  constructor(getCurrentState) {
+    this.getCurrentState = getCurrentState;
+    /**
+     * The current validity state and message. This is cached and returns if
+     * constraint validation state does not change.
+     */
+    this.currentValidity = {
+      validity: {},
+      validationMessage: ''
+    };
+  }
+  /**
+   * Returns the current `ValidityStateFlags` and validation message for the
+   * validator.
+   *
+   * If the constraint validation state has not changed, this will return a
+   * cached result. This is important since `getValidity()` can be called
+   * frequently in response to synchronous property changes.
+   *
+   * @return The current validity and validation message.
+   */
+  getValidity() {
+    const state = this.getCurrentState();
+    const hasStateChanged = !this.prevState || !this.equals(this.prevState, state);
+    if (!hasStateChanged) {
+      return this.currentValidity;
+    }
+    const {
+      validity,
+      validationMessage
+    } = this.computeValidity(state);
+    this.prevState = this.copy(state);
+    this.currentValidity = {
+      validationMessage,
+      validity: {
+        // Change any `ValidityState` instances into `ValidityStateFlags` since
+        // `ValidityState` cannot be easily `{...spread}`.
+        badInput: validity.badInput,
+        customError: validity.customError,
+        patternMismatch: validity.patternMismatch,
+        rangeOverflow: validity.rangeOverflow,
+        rangeUnderflow: validity.rangeUnderflow,
+        stepMismatch: validity.stepMismatch,
+        tooLong: validity.tooLong,
+        tooShort: validity.tooShort,
+        typeMismatch: validity.typeMismatch,
+        valueMissing: validity.valueMissing
+      }
+    };
+    return this.currentValidity;
+  }
+}
+
+export { Validator as V, mixinConstraintValidation as a, mixinFormAssociated as b, onReportValidity as c, createValidator as d, getValidityAnchor as e, getFormValue as g, mixinOnReportValidity as m, o };