@matter-server/dashboard 0.2.0-alpha.0-00000000-000000000 → 0.2.0

package/dist/web/js/outlined-text-field-Sqd4JHxo.js

@@ -1,2086 +0,0 @@
-import { _ as __decorate, n as n$1, o as o$1, r as r$1, e, i as i$1, f as e$1, A, b, D, E as EASING, a as i$2, t, g as e$2, h as i$3, j as t$1, k as E, l as internals, m as mixinDelegatesAria, p as mixinElementInternals, u, q as i$4 } from './matter-dashboard-app-BazvuIIi.js';
-import { r as redispatchEvent } from './prevent_default-D4GG_QeD.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$1()], Field.prototype, "isAnimating", void 0);
-__decorate([r$1()], Field.prototype, "refreshErrorAlert", void 0);
-__decorate([r$1()], 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$3 = 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$2 = 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$2, styles$3];
-MdOutlinedField = __decorate([t('md-outlined-field')], MdOutlinedField);
-
-/**
- * @license
- * Copyright 2024 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// Generated stylesheet for ./textfield/internal/outlined-styles.css.
-const styles$1 = i$2`:host{--_caret-color: var(--md-outlined-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_disabled-input-text-color: var(--md-outlined-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-input-text-opacity: var(--md-outlined-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-outlined-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-outlined-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-outlined-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-text-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-text-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-text-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-outlined-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-outlined-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-outlined-text-field-disabled-trailing-icon-opacity, 0.38);--_error-focus-caret-color: var(--md-outlined-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-outlined-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-outlined-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-outlined-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-text-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-outlined-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-input-text-color: var(--md-outlined-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-outlined-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-outlined-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-text-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-outlined-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-outlined-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-label-text-color: var(--md-outlined-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-outlined-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-text-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-outlined-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-input-text-color: var(--md-outlined-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-outlined-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-outlined-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-text-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-text-field-focus-outline-width, 3px);--_focus-supporting-text-color: var(--md-outlined-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-outlined-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-input-text-color: var(--md-outlined-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-outlined-text-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-icon-color: var(--md-outlined-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-text-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-outlined-text-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-outlined-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-outlined-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_input-text-font: var(--md-outlined-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_input-text-line-height: var(--md-outlined-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_input-text-placeholder-color: var(--md-outlined-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-outlined-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-outlined-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_input-text-suffix-color: var(--md-outlined-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-weight: var(--md-outlined-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_label-text-color: var(--md-outlined-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-populated-line-height: var(--md-outlined-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-outlined-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-outlined-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-outlined-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-icon-color: var(--md-outlined-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-outlined-text-field-leading-icon-size, 24px);--_outline-color: var(--md-outlined-text-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-text-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-outlined-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-outlined-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-weight: var(--md-outlined-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_trailing-icon-color: var(--md-outlined-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-outlined-text-field-trailing-icon-size, 24px);--_container-shape-start-start: var(--md-outlined-text-field-container-shape-start-start, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-outlined-text-field-container-shape-start-end, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-outlined-text-field-container-shape-end-end, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-start: var(--md-outlined-text-field-container-shape-end-start, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_icon-input-space: var(--md-outlined-text-field-icon-input-space, 16px);--_leading-space: var(--md-outlined-text-field-leading-space, 16px);--_trailing-space: var(--md-outlined-text-field-trailing-space, 16px);--_top-space: var(--md-outlined-text-field-top-space, 16px);--_bottom-space: var(--md-outlined-text-field-bottom-space, 16px);--_input-text-prefix-trailing-space: var(--md-outlined-text-field-input-text-prefix-trailing-space, 2px);--_input-text-suffix-leading-space: var(--md-outlined-text-field-input-text-suffix-leading-space, 2px);--_focus-caret-color: var(--md-outlined-text-field-focus-caret-color, var(--md-sys-color-primary, #6750a4));--_with-leading-icon-leading-space: var(--md-outlined-text-field-with-leading-icon-leading-space, 12px);--_with-trailing-icon-trailing-space: var(--md-outlined-text-field-with-trailing-icon-trailing-space, 12px);--md-outlined-field-bottom-space: var(--_bottom-space);--md-outlined-field-container-shape-end-end: var(--_container-shape-end-end);--md-outlined-field-container-shape-end-start: var(--_container-shape-end-start);--md-outlined-field-container-shape-start-end: var(--_container-shape-start-end);--md-outlined-field-container-shape-start-start: var(--_container-shape-start-start);--md-outlined-field-content-color: var(--_input-text-color);--md-outlined-field-content-font: var(--_input-text-font);--md-outlined-field-content-line-height: var(--_input-text-line-height);--md-outlined-field-content-size: var(--_input-text-size);--md-outlined-field-content-space: var(--_icon-input-space);--md-outlined-field-content-weight: var(--_input-text-weight);--md-outlined-field-disabled-content-color: var(--_disabled-input-text-color);--md-outlined-field-disabled-content-opacity: var(--_disabled-input-text-opacity);--md-outlined-field-disabled-label-text-color: var(--_disabled-label-text-color);--md-outlined-field-disabled-label-text-opacity: var(--_disabled-label-text-opacity);--md-outlined-field-disabled-leading-content-color: var(--_disabled-leading-icon-color);--md-outlined-field-disabled-leading-content-opacity: var(--_disabled-leading-icon-opacity);--md-outlined-field-disabled-outline-color: var(--_disabled-outline-color);--md-outlined-field-disabled-outline-opacity: var(--_disabled-outline-opacity);--md-outlined-field-disabled-outline-width: var(--_disabled-outline-width);--md-outlined-field-disabled-supporting-text-color: var(--_disabled-supporting-text-color);--md-outlined-field-disabled-supporting-text-opacity: var(--_disabled-supporting-text-opacity);--md-outlined-field-disabled-trailing-content-color: var(--_disabled-trailing-icon-color);--md-outlined-field-disabled-trailing-content-opacity: var(--_disabled-trailing-icon-opacity);--md-outlined-field-error-content-color: var(--_error-input-text-color);--md-outlined-field-error-focus-content-color: var(--_error-focus-input-text-color);--md-outlined-field-error-focus-label-text-color: var(--_error-focus-label-text-color);--md-outlined-field-error-focus-leading-content-color: var(--_error-focus-leading-icon-color);--md-outlined-field-error-focus-outline-color: var(--_error-focus-outline-color);--md-outlined-field-error-focus-supporting-text-color: var(--_error-focus-supporting-text-color);--md-outlined-field-error-focus-trailing-content-color: var(--_error-focus-trailing-icon-color);--md-outlined-field-error-hover-content-color: var(--_error-hover-input-text-color);--md-outlined-field-error-hover-label-text-color: var(--_error-hover-label-text-color);--md-outlined-field-error-hover-leading-content-color: var(--_error-hover-leading-icon-color);--md-outlined-field-error-hover-outline-color: var(--_error-hover-outline-color);--md-outlined-field-error-hover-supporting-text-color: var(--_error-hover-supporting-text-color);--md-outlined-field-error-hover-trailing-content-color: var(--_error-hover-trailing-icon-color);--md-outlined-field-error-label-text-color: var(--_error-label-text-color);--md-outlined-field-error-leading-content-color: var(--_error-leading-icon-color);--md-outlined-field-error-outline-color: var(--_error-outline-color);--md-outlined-field-error-supporting-text-color: var(--_error-supporting-text-color);--md-outlined-field-error-trailing-content-color: var(--_error-trailing-icon-color);--md-outlined-field-focus-content-color: var(--_focus-input-text-color);--md-outlined-field-focus-label-text-color: var(--_focus-label-text-color);--md-outlined-field-focus-leading-content-color: var(--_focus-leading-icon-color);--md-outlined-field-focus-outline-color: var(--_focus-outline-color);--md-outlined-field-focus-outline-width: var(--_focus-outline-width);--md-outlined-field-focus-supporting-text-color: var(--_focus-supporting-text-color);--md-outlined-field-focus-trailing-content-color: var(--_focus-trailing-icon-color);--md-outlined-field-hover-content-color: var(--_hover-input-text-color);--md-outlined-field-hover-label-text-color: var(--_hover-label-text-color);--md-outlined-field-hover-leading-content-color: var(--_hover-leading-icon-color);--md-outlined-field-hover-outline-color: var(--_hover-outline-color);--md-outlined-field-hover-outline-width: var(--_hover-outline-width);--md-outlined-field-hover-supporting-text-color: var(--_hover-supporting-text-color);--md-outlined-field-hover-trailing-content-color: var(--_hover-trailing-icon-color);--md-outlined-field-label-text-color: var(--_label-text-color);--md-outlined-field-label-text-font: var(--_label-text-font);--md-outlined-field-label-text-line-height: var(--_label-text-line-height);--md-outlined-field-label-text-populated-line-height: var(--_label-text-populated-line-height);--md-outlined-field-label-text-populated-size: var(--_label-text-populated-size);--md-outlined-field-label-text-size: var(--_label-text-size);--md-outlined-field-label-text-weight: var(--_label-text-weight);--md-outlined-field-leading-content-color: var(--_leading-icon-color);--md-outlined-field-leading-space: var(--_leading-space);--md-outlined-field-outline-color: var(--_outline-color);--md-outlined-field-outline-width: var(--_outline-width);--md-outlined-field-supporting-text-color: var(--_supporting-text-color);--md-outlined-field-supporting-text-font: var(--_supporting-text-font);--md-outlined-field-supporting-text-line-height: var(--_supporting-text-line-height);--md-outlined-field-supporting-text-size: var(--_supporting-text-size);--md-outlined-field-supporting-text-weight: var(--_supporting-text-weight);--md-outlined-field-top-space: var(--_top-space);--md-outlined-field-trailing-content-color: var(--_trailing-icon-color);--md-outlined-field-trailing-space: var(--_trailing-space);--md-outlined-field-with-leading-content-leading-space: var(--_with-leading-icon-leading-space);--md-outlined-field-with-trailing-content-trailing-space: var(--_with-trailing-icon-trailing-space)}
-`;
-
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const r = o => void 0 === o.strings,
-  m = {},
-  p = (o, t = m) => o._$AH = t;
-
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const l = e$2(class extends i$3 {
-  constructor(r$1) {
-    if (super(r$1), r$1.type !== t$1.PROPERTY && r$1.type !== t$1.ATTRIBUTE && r$1.type !== t$1.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
-    if (!r(r$1)) throw Error("`live` bindings can only contain a single expression");
-  }
-  render(r) {
-    return r;
-  }
-  update(i, [t]) {
-    if (t === E || t === A) return t;
-    const o = i.element,
-      l = i.name;
-    if (i.type === t$1.PROPERTY) {
-      if (t === o[l]) return E;
-    } else if (i.type === t$1.BOOLEAN_ATTRIBUTE) {
-      if (!!t === o.hasAttribute(l)) return E;
-    } else if (i.type === t$1.ATTRIBUTE && o.getAttribute(l) === t + "") return E;
-    return p(i), t;
-  }
-});
-
-/**
- * @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 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-const stringConverter = {
-  fromAttribute(value) {
-    return value ?? '';
-  },
-  toAttribute(value) {
-    return value || null;
-  }
-};
-
-/**
- * @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;
-  }
-}
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * A validator that provides constraint validation that emulates `<input>` and
- * `<textarea>` validation.
- */
-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.
-    //
-    // While the type is `number`, it may actually be `null` at runtime.
-    // `null > -1` is true since `null` coerces to `0`, so we default null and
-    // undefined to -1.
-    //
-    // We set attributes instead of properties since setting a property may
-    // throw an out of bounds error in relation to the other property.
-    // Attributes will not throw errors while the state is updating.
-    if ((state.minLength ?? -1) > -1) {
-      inputOrTextArea.setAttribute('minlength', String(state.minLength));
-    } else {
-      inputOrTextArea.removeAttribute('minlength');
-    }
-    if ((state.maxLength ?? -1) > -1) {
-      inputOrTextArea.setAttribute('maxlength', String(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';
-}
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// Separate variable needed for closure.
-const textFieldBaseClass = mixinDelegatesAria(mixinOnReportValidity(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(i$1)))));
-/**
- * A text field component.
- *
- * @fires select {Event} The native `select` event on
- * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event)
- * --bubbles
- * @fires change {Event} The native `change` event on
- * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
- * --bubbles
- * @fires input {InputEvent} The native `input` event on
- * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
- * --bubbles --composed
- */
-class TextField extends textFieldBaseClass {
-  constructor() {
-    super(...arguments);
-    /**
-     * Gets or sets whether or not the text field is in a visually invalid state.
-     *
-     * This error state overrides the error state controlled by
-     * `reportValidity()`.
-     */
-    this.error = false;
-    /**
-     * The error message that replaces supporting text when `error` is true. If
-     * `errorText` is an empty string, then the supporting text will continue to
-     * show.
-     *
-     * This error message overrides the error message displayed by
-     * `reportValidity()`.
-     */
-    this.errorText = '';
-    /**
-     * The floating Material label of the textfield component. It informs the user
-     * about what information is requested for a text field. It is aligned with
-     * the input text, is always visible, and it floats when focused or when text
-     * is entered into the textfield. This label also sets accessibilty labels,
-     * but the accessible label is overriden by `aria-label`.
-     *
-     * Learn more about floating labels from the Material Design guidelines:
-     * https://m3.material.io/components/text-fields/guidelines
-     */
-    this.label = '';
-    /**
-     * Disables the asterisk on the floating label, when the text field is
-     * required.
-     */
-    this.noAsterisk = false;
-    /**
-     * Indicates that the user must specify a value for the input before the
-     * owning form can be submitted and will render an error state when
-     * `reportValidity()` is invoked when value is empty. Additionally the
-     * floating label will render an asterisk `"*"` when true.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
-     */
-    this.required = false;
-    /**
-     * The current value of the text field. It is always a string.
-     */
-    this.value = '';
-    /**
-     * An optional prefix to display before the input value.
-     */
-    this.prefixText = '';
-    /**
-     * An optional suffix to display after the input value.
-     */
-    this.suffixText = '';
-    /**
-     * Whether or not the text field has a leading icon. Used for SSR.
-     */
-    this.hasLeadingIcon = false;
-    /**
-     * Whether or not the text field has a trailing icon. Used for SSR.
-     */
-    this.hasTrailingIcon = false;
-    /**
-     * Conveys additional information below the text field, such as how it should
-     * be used.
-     */
-    this.supportingText = '';
-    /**
-     * Override the input text CSS `direction`. Useful for RTL languages that use
-     * LTR notation for fractions.
-     */
-    this.textDirection = '';
-    /**
-     * The number of rows to display for a `type="textarea"` text field.
-     * Defaults to 2.
-     */
-    this.rows = 2;
-    /**
-     * The number of cols to display for a `type="textarea"` text field.
-     * Defaults to 20.
-     */
-    this.cols = 20;
-    // <input> properties
-    this.inputMode = '';
-    /**
-     * Defines the greatest value in the range of permitted values.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
-     */
-    this.max = '';
-    /**
-     * The maximum number of characters a user can enter into the text field. Set
-     * to -1 for none.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
-     */
-    this.maxLength = -1;
-    /**
-     * Defines the most negative value in the range of permitted values.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
-     */
-    this.min = '';
-    /**
-     * The minimum number of characters a user can enter into the text field. Set
-     * to -1 for none.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
-     */
-    this.minLength = -1;
-    /**
-     * When true, hide the spinner for `type="number"` text fields.
-     */
-    this.noSpinner = false;
-    /**
-     * A regular expression that the text field's value must match to pass
-     * constraint validation.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
-     */
-    this.pattern = '';
-    /**
-     * Defines the text displayed in the textfield when it has no value. Provides
-     * a brief hint to the user as to the expected type of data that should be
-     * entered into the control. Unlike `label`, the placeholder is not visible
-     * and does not float when the textfield has a value.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder
-     */
-    this.placeholder = '';
-    /**
-     * Indicates whether or not a user should be able to edit the text field's
-     * value.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
-     */
-    this.readOnly = false;
-    /**
-     * Indicates that input accepts multiple email addresses.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple
-     */
-    this.multiple = false;
-    /**
-     * Returns or sets the element's step attribute, which works with min and max
-     * to limit the increments at which a numeric or date-time value can be set.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
-     */
-    this.step = '';
-    /**
-     * The `<input>` type to use, defaults to "text". The type greatly changes how
-     * the text field behaves.
-     *
-     * Text fields support a limited number of `<input>` types:
-     *
-     * - text
-     * - textarea
-     * - email
-     * - number
-     * - password
-     * - search
-     * - tel
-     * - url
-     *
-     * See
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
-     * for more details on each input type.
-     */
-    this.type = 'text';
-    /**
-     * Describes what, if any, type of autocomplete functionality the input
-     * should provide.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-     */
-    this.autocomplete = '';
-    /**
-     * Returns true when the text field has been interacted with. Native
-     * validation errors only display in response to user interactions.
-     */
-    this.dirty = false;
-    this.focused = false;
-    /**
-     * Whether or not a native error has been reported via `reportValidity()`.
-     */
-    this.nativeError = false;
-    /**
-     * The validation message displayed from a native error via
-     * `reportValidity()`.
-     */
-    this.nativeErrorText = '';
-  }
-  /**
-   * Gets or sets the direction in which selection occurred.
-   */
-  get selectionDirection() {
-    return this.getInputOrTextarea().selectionDirection;
-  }
-  set selectionDirection(value) {
-    this.getInputOrTextarea().selectionDirection = value;
-  }
-  /**
-   * Gets or sets the end position or offset of a text selection.
-   */
-  get selectionEnd() {
-    return this.getInputOrTextarea().selectionEnd;
-  }
-  set selectionEnd(value) {
-    this.getInputOrTextarea().selectionEnd = value;
-  }
-  /**
-   * Gets or sets the starting position or offset of a text selection.
-   */
-  get selectionStart() {
-    return this.getInputOrTextarea().selectionStart;
-  }
-  set selectionStart(value) {
-    this.getInputOrTextarea().selectionStart = value;
-  }
-  /**
-   * The text field's value as a number.
-   */
-  get valueAsNumber() {
-    const input = this.getInput();
-    if (!input) {
-      return NaN;
-    }
-    return input.valueAsNumber;
-  }
-  set valueAsNumber(value) {
-    const input = this.getInput();
-    if (!input) {
-      return;
-    }
-    input.valueAsNumber = value;
-    this.value = input.value;
-  }
-  /**
-   * The text field's value as a Date.
-   */
-  get valueAsDate() {
-    const input = this.getInput();
-    if (!input) {
-      return null;
-    }
-    return input.valueAsDate;
-  }
-  set valueAsDate(value) {
-    const input = this.getInput();
-    if (!input) {
-      return;
-    }
-    input.valueAsDate = value;
-    this.value = input.value;
-  }
-  get hasError() {
-    return this.error || this.nativeError;
-  }
-  /**
-   * Selects all the text in the text field.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
-   */
-  select() {
-    this.getInputOrTextarea().select();
-  }
-  setRangeText(...args) {
-    // Calling setRangeText with 1 vs 3-4 arguments has different behavior.
-    // Use spread syntax and type casting to ensure correct usage.
-    this.getInputOrTextarea().setRangeText(...args);
-    this.value = this.getInputOrTextarea().value;
-  }
-  /**
-   * Sets the start and end positions of a selection in the text field.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
-   *
-   * @param start The offset into the text field for the start of the selection.
-   * @param end The offset into the text field for the end of the selection.
-   * @param direction The direction in which the selection is performed.
-   */
-  setSelectionRange(start, end, direction) {
-    this.getInputOrTextarea().setSelectionRange(start, end, direction);
-  }
-  /**
-   * Shows the browser picker for an input element of type "date", "time", etc.
-   *
-   * For a full list of supported types, see:
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#browser_compatibility
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker
-   */
-  showPicker() {
-    const input = this.getInput();
-    if (!input) {
-      return;
-    }
-    input.showPicker();
-  }
-  /**
-   * Decrements the value of a numeric type text field by `step` or `n` `step`
-   * number of times.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown
-   *
-   * @param stepDecrement The number of steps to decrement, defaults to 1.
-   */
-  stepDown(stepDecrement) {
-    const input = this.getInput();
-    if (!input) {
-      return;
-    }
-    input.stepDown(stepDecrement);
-    this.value = input.value;
-  }
-  /**
-   * Increments the value of a numeric type text field by `step` or `n` `step`
-   * number of times.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp
-   *
-   * @param stepIncrement The number of steps to increment, defaults to 1.
-   */
-  stepUp(stepIncrement) {
-    const input = this.getInput();
-    if (!input) {
-      return;
-    }
-    input.stepUp(stepIncrement);
-    this.value = input.value;
-  }
-  /**
-   * Reset the text field to its default value.
-   */
-  reset() {
-    this.dirty = false;
-    this.value = this.getAttribute('value') ?? '';
-    this.nativeError = false;
-    this.nativeErrorText = '';
-  }
-  attributeChangedCallback(attribute, newValue, oldValue) {
-    if (attribute === 'value' && this.dirty) {
-      // After user input, changing the value attribute no longer updates the
-      // text field's value (until reset). This matches native <input> behavior.
-      return;
-    }
-    super.attributeChangedCallback(attribute, newValue, oldValue);
-  }
-  render() {
-    const classes = {
-      'disabled': this.disabled,
-      'error': !this.disabled && this.hasError,
-      'textarea': this.type === 'textarea',
-      'no-spinner': this.noSpinner
-    };
-    return b`
-      <span class="text-field ${e$1(classes)}">
-        ${this.renderField()}
-      </span>
-    `;
-  }
-  updated(changedProperties) {
-    // Keep changedProperties arg so that subclasses may call it
-    // If a property such as `type` changes and causes the internal <input>
-    // value to change without dispatching an event, re-sync it.
-    const value = this.getInputOrTextarea().value;
-    if (this.value !== value) {
-      // Note this is typically inefficient in updated() since it schedules
-      // another update. However, it is needed for the <input> to fully render
-      // before checking its value.
-      this.value = value;
-    }
-  }
-  renderField() {
-    return u`<${this.fieldTag}
-      class="field"
-      count=${this.value.length}
-      ?disabled=${this.disabled}
-      ?error=${this.hasError}
-      error-text=${this.getErrorText()}
-      ?focused=${this.focused}
-      ?has-end=${this.hasTrailingIcon}
-      ?has-start=${this.hasLeadingIcon}
-      label=${this.label}
-      ?no-asterisk=${this.noAsterisk}
-      max=${this.maxLength}
-      ?populated=${!!this.value}
-      ?required=${this.required}
-      ?resizable=${this.type === 'textarea'}
-      supporting-text=${this.supportingText}
-    >
-      ${this.renderLeadingIcon()}
-      ${this.renderInputOrTextarea()}
-      ${this.renderTrailingIcon()}
-      <div id="description" slot="aria-describedby"></div>
-      <slot name="container" slot="container"></slot>
-    </${this.fieldTag}>`;
-  }
-  renderLeadingIcon() {
-    return b`
-      <span class="icon leading" slot="start">
-        <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
-      </span>
-    `;
-  }
-  renderTrailingIcon() {
-    return b`
-      <span class="icon trailing" slot="end">
-        <slot name="trailing-icon" @slotchange=${this.handleIconChange}></slot>
-      </span>
-    `;
-  }
-  renderInputOrTextarea() {
-    const style = {
-      'direction': this.textDirection
-    };
-    const ariaLabel = this.ariaLabel || this.label || A;
-    // lit-anaylzer `autocomplete` types are too strict
-    // tslint:disable-next-line:no-any
-    const autocomplete = this.autocomplete;
-    // These properties may be set to null if the attribute is removed, and
-    // `null > -1` is incorrectly `true`.
-    const hasMaxLength = (this.maxLength ?? -1) > -1;
-    const hasMinLength = (this.minLength ?? -1) > -1;
-    if (this.type === 'textarea') {
-      return b`
-        <textarea
-          class="input"
-          style=${o(style)}
-          aria-describedby="description"
-          aria-invalid=${this.hasError}
-          aria-label=${ariaLabel}
-          autocomplete=${autocomplete || A}
-          name=${this.name || A}
-          ?disabled=${this.disabled}
-          maxlength=${hasMaxLength ? this.maxLength : A}
-          minlength=${hasMinLength ? this.minLength : A}
-          placeholder=${this.placeholder || A}
-          ?readonly=${this.readOnly}
-          ?required=${this.required}
-          rows=${this.rows}
-          cols=${this.cols}
-          .value=${l(this.value)}
-          @change=${this.redispatchEvent}
-          @focus=${this.handleFocusChange}
-          @blur=${this.handleFocusChange}
-          @input=${this.handleInput}
-          @select=${this.redispatchEvent}></textarea>
-      `;
-    }
-    const prefix = this.renderPrefix();
-    const suffix = this.renderSuffix();
-    // TODO(b/243805848): remove `as unknown as number` and `as any` once lit
-    // analyzer is fixed
-    // tslint:disable-next-line:no-any
-    const inputMode = this.inputMode;
-    return b`
-      <div class="input-wrapper">
-        ${prefix}
-        <input
-          class="input"
-          style=${o(style)}
-          aria-describedby="description"
-          aria-invalid=${this.hasError}
-          aria-label=${ariaLabel}
-          autocomplete=${autocomplete || A}
-          name=${this.name || A}
-          ?disabled=${this.disabled}
-          inputmode=${inputMode || A}
-          max=${this.max || A}
-          maxlength=${hasMaxLength ? this.maxLength : A}
-          min=${this.min || A}
-          minlength=${hasMinLength ? this.minLength : A}
-          pattern=${this.pattern || A}
-          placeholder=${this.placeholder || A}
-          ?readonly=${this.readOnly}
-          ?required=${this.required}
-          ?multiple=${this.multiple}
-          step=${this.step || A}
-          type=${this.type}
-          .value=${l(this.value)}
-          @change=${this.redispatchEvent}
-          @focus=${this.handleFocusChange}
-          @blur=${this.handleFocusChange}
-          @input=${this.handleInput}
-          @select=${this.redispatchEvent} />
-        ${suffix}
-      </div>
-    `;
-  }
-  renderPrefix() {
-    return this.renderAffix(this.prefixText, /* isSuffix */false);
-  }
-  renderSuffix() {
-    return this.renderAffix(this.suffixText, /* isSuffix */true);
-  }
-  renderAffix(text, isSuffix) {
-    if (!text) {
-      return A;
-    }
-    const classes = {
-      'suffix': isSuffix,
-      'prefix': !isSuffix
-    };
-    return b`<span class="${e$1(classes)}">${text}</span>`;
-  }
-  getErrorText() {
-    return this.error ? this.errorText : this.nativeErrorText;
-  }
-  handleFocusChange() {
-    var _this$inputOrTextarea;
-    // When calling focus() or reportValidity() during change, it's possible
-    // for blur to be called after the new focus event. Rather than set
-    // `this.focused` to true/false on focus/blur, we always set it to whether
-    // or not the input itself is focused.
-    this.focused = ((_this$inputOrTextarea = this.inputOrTextarea) === null || _this$inputOrTextarea === void 0 ? void 0 : _this$inputOrTextarea.matches(':focus')) ?? false;
-  }
-  handleInput(event) {
-    this.dirty = true;
-    this.value = event.target.value;
-  }
-  redispatchEvent(event) {
-    redispatchEvent(this, event);
-  }
-  getInputOrTextarea() {
-    if (!this.inputOrTextarea) {
-      // If the input is not yet defined, synchronously render.
-      // e.g.
-      // const textField = document.createElement('md-outlined-text-field');
-      // document.body.appendChild(textField);
-      // textField.focus(); // synchronously render
-      this.connectedCallback();
-      this.scheduleUpdate();
-    }
-    if (this.isUpdatePending) {
-      // If there are pending updates, synchronously perform them. This ensures
-      // that constraint validation properties (like `required`) are synced
-      // before interacting with input APIs that depend on them.
-      this.scheduleUpdate();
-    }
-    return this.inputOrTextarea;
-  }
-  getInput() {
-    if (this.type === 'textarea') {
-      return null;
-    }
-    return this.getInputOrTextarea();
-  }
-  handleIconChange() {
-    this.hasLeadingIcon = this.leadingIcons.length > 0;
-    this.hasTrailingIcon = this.trailingIcons.length > 0;
-  }
-  [getFormValue]() {
-    return this.value;
-  }
-  formResetCallback() {
-    this.reset();
-  }
-  formStateRestoreCallback(state) {
-    this.value = state;
-  }
-  focus() {
-    // Required for the case that the user slots a focusable element into the
-    // leading icon slot such as an iconbutton due to how delegatesFocus works.
-    this.getInputOrTextarea().focus();
-  }
-  [createValidator]() {
-    return new TextFieldValidator(() => ({
-      state: this,
-      renderedControl: this.inputOrTextarea
-    }));
-  }
-  [getValidityAnchor]() {
-    return this.inputOrTextarea;
-  }
-  [onReportValidity](invalidEvent) {
-    // Prevent default pop-up behavior.
-    invalidEvent === null || invalidEvent === void 0 || invalidEvent.preventDefault();
-    const prevMessage = this.getErrorText();
-    this.nativeError = !!invalidEvent;
-    this.nativeErrorText = this.validationMessage;
-    if (prevMessage === this.getErrorText()) {
-      var _this$field;
-      (_this$field = this.field) === null || _this$field === void 0 || _this$field.reannounceError();
-    }
-  }
-}
-/** @nocollapse */
-TextField.shadowRootOptions = {
-  ...i$1.shadowRootOptions,
-  delegatesFocus: true
-};
-__decorate([n$1({
-  type: Boolean,
-  reflect: true
-})], TextField.prototype, "error", void 0);
-__decorate([n$1({
-  attribute: 'error-text'
-})], TextField.prototype, "errorText", void 0);
-__decorate([n$1()], TextField.prototype, "label", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'no-asterisk'
-})], TextField.prototype, "noAsterisk", void 0);
-__decorate([n$1({
-  type: Boolean,
-  reflect: true
-})], TextField.prototype, "required", void 0);
-__decorate([n$1()], TextField.prototype, "value", void 0);
-__decorate([n$1({
-  attribute: 'prefix-text'
-})], TextField.prototype, "prefixText", void 0);
-__decorate([n$1({
-  attribute: 'suffix-text'
-})], TextField.prototype, "suffixText", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'has-leading-icon'
-})], TextField.prototype, "hasLeadingIcon", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'has-trailing-icon'
-})], TextField.prototype, "hasTrailingIcon", void 0);
-__decorate([n$1({
-  attribute: 'supporting-text'
-})], TextField.prototype, "supportingText", void 0);
-__decorate([n$1({
-  attribute: 'text-direction'
-})], TextField.prototype, "textDirection", void 0);
-__decorate([n$1({
-  type: Number
-})], TextField.prototype, "rows", void 0);
-__decorate([n$1({
-  type: Number
-})], TextField.prototype, "cols", void 0);
-__decorate([n$1({
-  reflect: true
-})], TextField.prototype, "inputMode", void 0);
-__decorate([n$1()], TextField.prototype, "max", void 0);
-__decorate([n$1({
-  type: Number
-})], TextField.prototype, "maxLength", void 0);
-__decorate([n$1()], TextField.prototype, "min", void 0);
-__decorate([n$1({
-  type: Number
-})], TextField.prototype, "minLength", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'no-spinner'
-})], TextField.prototype, "noSpinner", void 0);
-__decorate([n$1()], TextField.prototype, "pattern", void 0);
-__decorate([n$1({
-  reflect: true,
-  converter: stringConverter
-})], TextField.prototype, "placeholder", void 0);
-__decorate([n$1({
-  type: Boolean,
-  reflect: true
-})], TextField.prototype, "readOnly", void 0);
-__decorate([n$1({
-  type: Boolean,
-  reflect: true
-})], TextField.prototype, "multiple", void 0);
-__decorate([n$1()], TextField.prototype, "step", void 0);
-__decorate([n$1({
-  reflect: true
-})], TextField.prototype, "type", void 0);
-__decorate([n$1({
-  reflect: true
-})], TextField.prototype, "autocomplete", void 0);
-__decorate([r$1()], TextField.prototype, "dirty", void 0);
-__decorate([r$1()], TextField.prototype, "focused", void 0);
-__decorate([r$1()], TextField.prototype, "nativeError", void 0);
-__decorate([r$1()], TextField.prototype, "nativeErrorText", void 0);
-__decorate([e('.input')], TextField.prototype, "inputOrTextarea", void 0);
-__decorate([e('.field')], TextField.prototype, "field", void 0);
-__decorate([o$1({
-  slot: 'leading-icon'
-})], TextField.prototype, "leadingIcons", void 0);
-__decorate([o$1({
-  slot: 'trailing-icon'
-})], TextField.prototype, "trailingIcons", void 0);
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * An outlined text field component
- */
-class OutlinedTextField extends TextField {
-  constructor() {
-    super(...arguments);
-    this.fieldTag = i$4`md-outlined-field`;
-  }
-}
-
-/**
- * @license
- * Copyright 2024 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// Generated stylesheet for ./textfield/internal/shared-styles.css.
-const styles = i$2`:host{display:inline-flex;outline:none;resize:both;text-align:start;-webkit-tap-highlight-color:rgba(0,0,0,0)}.text-field,.field{width:100%}.text-field{display:inline-flex}.field{cursor:text}.disabled .field{cursor:default}.text-field,.textarea .field{resize:inherit}slot[name=container]{border-radius:inherit}.icon{color:currentColor;display:flex;align-items:center;justify-content:center;fill:currentColor;position:relative}.icon ::slotted(*){display:flex;position:absolute}[has-start] .icon.leading{font-size:var(--_leading-icon-size);height:var(--_leading-icon-size);width:var(--_leading-icon-size)}[has-end] .icon.trailing{font-size:var(--_trailing-icon-size);height:var(--_trailing-icon-size);width:var(--_trailing-icon-size)}.input-wrapper{display:flex}.input-wrapper>*{all:inherit;padding:0}.input{caret-color:var(--_caret-color);overflow-x:hidden;text-align:inherit}.input::placeholder{color:currentColor;opacity:1}.input::-webkit-calendar-picker-indicator{display:none}.input::-webkit-search-decoration,.input::-webkit-search-cancel-button{display:none}@media(forced-colors: active){.input{background:none}}.no-spinner .input::-webkit-inner-spin-button,.no-spinner .input::-webkit-outer-spin-button{display:none}.no-spinner .input[type=number]{-moz-appearance:textfield}:focus-within .input{caret-color:var(--_focus-caret-color)}.error:focus-within .input{caret-color:var(--_error-focus-caret-color)}.text-field:not(.disabled) .prefix{color:var(--_input-text-prefix-color)}.text-field:not(.disabled) .suffix{color:var(--_input-text-suffix-color)}.text-field:not(.disabled) .input::placeholder{color:var(--_input-text-placeholder-color)}.prefix,.suffix{text-wrap:nowrap;width:min-content}.prefix{padding-inline-end:var(--_input-text-prefix-trailing-space)}.suffix{padding-inline-start:var(--_input-text-suffix-leading-space)}
-`;
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * TODO(b/228525797): Add docs
- * @final
- * @suppress {visibility}
- */
-let MdOutlinedTextField = class MdOutlinedTextField extends OutlinedTextField {
-  constructor() {
-    super(...arguments);
-    this.fieldTag = i$4`md-outlined-field`;
-  }
-};
-MdOutlinedTextField.styles = [styles, styles$1];
-MdOutlinedTextField = __decorate([t('md-outlined-text-field')], MdOutlinedTextField);