@matter-server/dashboard 0.7.0-alpha.0-20260512-b404bea → 0.7.0

package/dist/web/js/settings-dialog-D75IAPKe.js

@@ -1,4039 +0,0 @@
-import { e, m as mixinDelegatesAria, a as mixinConstraintValidation, b as mixinFormAssociated, c as mixinElementInternals, i, _ as __decorate, n as n$1, d as e$1, f as isActivationClick, g as dispatchActivationClick, A, h as e$2, j as b, r as redispatchEvent, k as getFormValue, l as getFormState, o as createValidator, C as CheckboxValidator, p as getValidityAnchor, q as i$1, t, N as NavigableKeys, s as o, u as r, v as createAnimationSignal, L as ListController, w as getActiveItem, x as getLastActivatableItem, y as getFirstActivatableItem, z as o$1, E as EASING, V as Validator, D, B as mixinOnReportValidity, F as onReportValidity, G as u, H as i$2, I as fireAndForget, J as showAlertDialog, K as handleAsync, M as DevModeService, O as mdiWifi, P as mdiAccessPoint, Q as mdiEyeOff, R as mdiEye } from './matter-dashboard-app-BZOhBELR.js';
-import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
-import './main.js';
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function n(n) {
-  return (o, r) => {
-    const {
-        slot: e$1
-      } = n ?? {},
-      s = "slot" + (e$1 ? `[name=${e$1}]` : ":not([name])");
-    return e(o, r, {
-      get() {
-        var _this$renderRoot;
-        const t = (_this$renderRoot = this.renderRoot) === null || _this$renderRoot === void 0 ? void 0 : _this$renderRoot.querySelector(s);
-        return (t === null || t === void 0 ? void 0 : t.assignedNodes(n)) ?? [];
-      }
-    });
-  };
-}
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * A symbol used to access dispatch hooks on an event.
- */
-const dispatchHooks = Symbol('dispatchHooks');
-/**
- * Add a hook for an event that is called after the event is dispatched and
- * propagates to other event listeners.
- *
- * This is useful for behaviors that need to check if an event is canceled.
- *
- * The callback is invoked synchronously, which allows for better integration
- * with synchronous platform APIs (like `<form>` or `<label>` clicking).
- *
- * Note: `setupDispatchHooks()` must be called on the element before adding any
- * other event listeners. Call it in the constructor of an element or
- * controller.
- *
- * @example
- * ```ts
- * class MyControl extends LitElement {
- *   constructor() {
- *     super();
- *     setupDispatchHooks(this, 'click');
- *     this.addEventListener('click', event => {
- *       afterDispatch(event, () => {
- *         if (event.defaultPrevented) {
- *           return
- *         }
- *
- *         // ... perform logic
- *       });
- *     });
- *   }
- * }
- * ```
- *
- * @example
- * ```ts
- * class MyController implements ReactiveController {
- *   constructor(host: ReactiveElement) {
- *     // setupDispatchHooks() may be called multiple times for the same
- *     // element and events, making it safe for multiple controllers to use it.
- *     setupDispatchHooks(host, 'click');
- *     host.addEventListener('click', event => {
- *       afterDispatch(event, () => {
- *         if (event.defaultPrevented) {
- *           return;
- *         }
- *
- *         // ... perform logic
- *       });
- *     });
- *   }
- * }
- * ```
- *
- * @param event The event to add a hook to.
- * @param callback A hook that is called after the event finishes dispatching.
- */
-function afterDispatch(event, callback) {
-  const hooks = event[dispatchHooks];
-  if (!hooks) {
-    throw new Error(`'${event.type}' event needs setupDispatchHooks().`);
-  }
-  hooks.addEventListener('after', callback);
-}
-/**
- * A lookup map of elements and event types that have a dispatch hook listener
- * set up. Used to ensure we don't set up multiple hook listeners on the same
- * element for the same event.
- */
-const ELEMENT_DISPATCH_HOOK_TYPES = new WeakMap();
-/**
- * Sets up an element to add dispatch hooks to given event types. This must be
- * called before adding any event listeners that need to use dispatch hooks
- * like `afterDispatch()`.
- *
- * This function is safe to call multiple times with the same element or event
- * types. Call it in the constructor of elements, mixins, and controllers to
- * ensure it is set up before external listeners.
- *
- * @example
- * ```ts
- * class MyControl extends LitElement {
- *   constructor() {
- *     super();
- *     setupDispatchHooks(this, 'click');
- *     this.addEventListener('click', this.listenerUsingAfterDispatch);
- *   }
- * }
- * ```
- *
- * @param element The element to set up event dispatch hooks for.
- * @param eventTypes The event types to add dispatch hooks to.
- */
-function setupDispatchHooks(element, ...eventTypes) {
-  let typesAlreadySetUp = ELEMENT_DISPATCH_HOOK_TYPES.get(element);
-  if (!typesAlreadySetUp) {
-    typesAlreadySetUp = new Set();
-    ELEMENT_DISPATCH_HOOK_TYPES.set(element, typesAlreadySetUp);
-  }
-  for (const eventType of eventTypes) {
-    // Don't register multiple dispatch hook listeners. A second registration
-    // would lead to the second listener re-dispatching a re-dispatched event,
-    // which can cause an infinite loop inside the other one.
-    if (typesAlreadySetUp.has(eventType)) {
-      continue;
-    }
-    // When we re-dispatch the event, it's going to immediately trigger this
-    // listener again. Use a flag to ignore it.
-    let isRedispatching = false;
-    element.addEventListener(eventType, event => {
-      if (isRedispatching) {
-        return;
-      }
-      // Do not let the event propagate to any other listener (not just
-      // bubbling listeners with `stopPropagation()`).
-      event.stopImmediatePropagation();
-      // Make a copy.
-      const eventCopy = Reflect.construct(event.constructor, [event.type, event]);
-      // Add hooks onto the event.
-      const hooks = new EventTarget();
-      eventCopy[dispatchHooks] = hooks;
-      // Re-dispatch the event. We can't reuse `redispatchEvent()` since we
-      // need to add the hooks to the copy before it's dispatched.
-      isRedispatching = true;
-      const dispatched = element.dispatchEvent(eventCopy);
-      isRedispatching = false;
-      if (!dispatched) {
-        event.preventDefault();
-      }
-      // Synchronously call afterDispatch() hooks.
-      hooks.dispatchEvent(new Event('after'));
-    }, {
-      // Ensure this listener runs before other listeners.
-      // `setupDispatchHooks()` should be called in constructors to also
-      // ensure they run before any other externally-added capture listeners.
-      capture: true
-    });
-    typesAlreadySetUp.add(eventType);
-  }
-}
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// Separate variable needed for closure.
-const switchBaseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(i))));
-/**
- * @fires input {InputEvent} Fired whenever `selected` changes due to user
- * interaction (bubbles and composed).
- * @fires change {Event} Fired whenever `selected` changes due to user
- * interaction (bubbles).
- */
-class Switch extends switchBaseClass {
-  constructor() {
-    super();
-    /**
-     * Puts the switch in the selected state and sets the form submission value to
-     * the `value` property.
-     */
-    this.selected = false;
-    /**
-     * Shows both the selected and deselected icons.
-     */
-    this.icons = false;
-    /**
-     * Shows only the selected icon, and not the deselected icon. If `true`,
-     * overrides the behavior of the `icons` property.
-     */
-    this.showOnlySelectedIcon = false;
-    /**
-     * When true, require the switch to be selected when participating in
-     * form submission.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
-     */
-    this.required = false;
-    /**
-     * The value associated with this switch on form submission. `null` is
-     * submitted when `selected` is `false`.
-     */
-    this.value = 'on';
-    // This click listener does not currently need dispatch hooks since it does
-    // not check `event.defaultPrevented`.
-    this.addEventListener('click', event => {
-      if (!isActivationClick(event) || !this.input) {
-        return;
-      }
-      this.focus();
-      dispatchActivationClick(this.input);
-    });
-    // Add the aria keyboard interaction pattern for switch and the Enter key.
-    // See https://www.w3.org/WAI/ARIA/apg/patterns/switch/.
-    setupDispatchHooks(this, 'keydown');
-    this.addEventListener('keydown', event => {
-      afterDispatch(event, () => {
-        const ignoreEvent = event.defaultPrevented || event.key !== 'Enter';
-        if (ignoreEvent || this.disabled || !this.input) {
-          return;
-        }
-        this.input.click();
-      });
-    });
-  }
-  render() {
-    return b`
-      <div class="switch ${e$2(this.getRenderClasses())}">
-        <input
-          id="switch"
-          class="touch"
-          type="checkbox"
-          role="switch"
-          aria-label=${this.ariaLabel || A}
-          ?checked=${this.selected}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          @input=${this.handleInput}
-          @change=${this.handleChange} />
-
-        <md-focus-ring part="focus-ring" for="switch"></md-focus-ring>
-        <span class="track"> ${this.renderHandle()} </span>
-      </div>
-    `;
-  }
-  getRenderClasses() {
-    return {
-      'selected': this.selected,
-      'unselected': !this.selected,
-      'disabled': this.disabled
-    };
-  }
-  renderHandle() {
-    const classes = {
-      'with-icon': this.showOnlySelectedIcon ? this.selected : this.icons
-    };
-    return b`
-      ${this.renderTouchTarget()}
-      <span class="handle-container">
-        <md-ripple for="switch" ?disabled="${this.disabled}"></md-ripple>
-        <span class="handle ${e$2(classes)}">
-          ${this.shouldShowIcons() ? this.renderIcons() : b``}
-        </span>
-      </span>
-    `;
-  }
-  renderIcons() {
-    return b`
-      <div class="icons">
-        ${this.renderOnIcon()}
-        ${this.showOnlySelectedIcon ? b`` : this.renderOffIcon()}
-      </div>
-    `;
-  }
-  /**
-   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
-   */
-  renderOnIcon() {
-    return b`
-      <slot class="icon icon--on" name="on-icon">
-        <svg viewBox="0 0 24 24">
-          <path
-            d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z" />
-        </svg>
-      </slot>
-    `;
-  }
-  /**
-   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
-   */
-  renderOffIcon() {
-    return b`
-      <slot class="icon icon--off" name="off-icon">
-        <svg viewBox="0 0 24 24">
-          <path
-            d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z" />
-        </svg>
-      </slot>
-    `;
-  }
-  renderTouchTarget() {
-    return b`<span class="touch"></span>`;
-  }
-  shouldShowIcons() {
-    return this.icons || this.showOnlySelectedIcon;
-  }
-  handleInput(event) {
-    const target = event.target;
-    this.selected = target.checked;
-    // <input> 'input' event bubbles and is composed, don't re-dispatch it.
-  }
-  handleChange(event) {
-    // <input> 'change' event is not composed, re-dispatch it.
-    redispatchEvent(this, event);
-  }
-  [getFormValue]() {
-    return this.selected ? this.value : null;
-  }
-  [getFormState]() {
-    return String(this.selected);
-  }
-  formResetCallback() {
-    // The selected property does not reflect, so the original attribute set by
-    // the user is used to determine the default value.
-    this.selected = this.hasAttribute('selected');
-  }
-  formStateRestoreCallback(state) {
-    this.selected = state === 'true';
-  }
-  [createValidator]() {
-    return new CheckboxValidator(() => ({
-      checked: this.selected,
-      required: this.required
-    }));
-  }
-  [getValidityAnchor]() {
-    return this.input;
-  }
-}
-/** @nocollapse */
-Switch.shadowRootOptions = {
-  mode: 'open',
-  delegatesFocus: true
-};
-__decorate([n$1({
-  type: Boolean
-})], Switch.prototype, "selected", void 0);
-__decorate([n$1({
-  type: Boolean
-})], Switch.prototype, "icons", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'show-only-selected-icon'
-})], Switch.prototype, "showOnlySelectedIcon", void 0);
-__decorate([n$1({
-  type: Boolean
-})], Switch.prototype, "required", void 0);
-__decorate([n$1()], Switch.prototype, "value", void 0);
-__decorate([e$1('input')], Switch.prototype, "input", void 0);
-
-/**
- * @license
- * Copyright 2024 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// Generated stylesheet for ./switch/internal/switch-styles.css.
-const styles$4 = i$1`@layer styles, hcm;@layer styles{:host{display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-switch-track-height, 32px))/2) 0px}md-focus-ring{--md-focus-ring-shape-start-start: var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-start-end: var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-end-end: var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-end-start: var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)))}.switch{align-items:center;display:inline-flex;flex-shrink:0;position:relative;width:var(--md-switch-track-width, 52px);height:var(--md-switch-track-height, 32px);border-start-start-radius:var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-start-end-radius:var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-end-radius:var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-start-radius:var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)))}input{appearance:none;height:max(100%,var(--md-switch-touch-target-size, 48px));outline:none;margin:0;position:absolute;width:max(100%,var(--md-switch-touch-target-size, 48px));z-index:1;cursor:inherit;top:50%;left:50%;transform:translate(-50%, -50%)}:host([touch-target=none]) input{display:none}}@layer styles{.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.disabled .track::before,.disabled .track::after{transition:none;opacity:var(--md-switch-disabled-track-opacity, 0.12)}.disabled .track::before{background-clip:content-box}.selected .track::before{background-color:var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4))}.selected:hover .track::before{background-color:var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4))}.selected:focus-within .track::before{background-color:var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4))}.selected:active .track::before{background-color:var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4))}.selected.disabled .track{background-clip:border-box}.selected.disabled .track::before{background-color:var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20))}.unselected .track::before{background-color:var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));border-style:solid;border-width:var(--md-switch-track-outline-width, 2px)}.unselected:hover .track::before{background-color:var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected:focus-visible .track::before{background-color:var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected:active .track::before{background-color:var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected.disabled .track::before{background-color:var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20))}}@layer hcm{@media(forced-colors: active){.selected .track::before{background:ButtonText;border-color:ButtonText}.disabled .track::before{border-color:GrayText;opacity:1}.disabled.selected .track::before{background:GrayText}}}@layer styles{.handle-container{display:flex;place-content:center;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.selected .handle-container{margin-inline-start:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.unselected .handle-container{margin-inline-end:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.disabled .handle-container{transition:none}.handle{border-start-start-radius:var(--md-switch-handle-shape-start-start, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-start-end-radius:var(--md-switch-handle-shape-start-end, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-end-radius:var(--md-switch-handle-shape-end-end, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-start-radius:var(--md-switch-handle-shape-end-start, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));height:var(--md-switch-handle-height, 16px);width:var(--md-switch-handle-width, 16px);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:"";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.disabled .handle,.disabled .handle::before{transition:none}.selected .handle{height:var(--md-switch-selected-handle-height, 24px);width:var(--md-switch-selected-handle-width, 24px)}.handle.with-icon{height:var(--md-switch-with-icon-handle-height, 24px);width:var(--md-switch-with-icon-handle-width, 24px)}.selected:not(.disabled):active .handle,.unselected:not(.disabled):active .handle{height:var(--md-switch-pressed-handle-height, 28px);width:var(--md-switch-pressed-handle-width, 28px);transition-timing-function:linear;transition-duration:100ms}.selected .handle::before{background-color:var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff))}.selected:hover .handle::before{background-color:var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected:focus-within .handle::before{background-color:var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected:active .handle::before{background-color:var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected.disabled .handle::before{background-color:var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));opacity:var(--md-switch-disabled-selected-handle-opacity, 1)}.unselected .handle::before{background-color:var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e))}.unselected:hover .handle::before{background-color:var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected:focus-within .handle::before{background-color:var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected:active .handle::before{background-color:var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected.disabled .handle::before{background-color:var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-handle-opacity, 0.38)}md-ripple{border-radius:var(--md-switch-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-switch-state-layer-size, 40px);inset:unset;width:var(--md-switch-state-layer-size, 40px)}.selected md-ripple{--md-ripple-hover-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12)}.unselected md-ripple{--md-ripple-hover-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);--md-ripple-pressed-opacity: var(--md-switch-pressed-state-layer-opacity, 0.12)}}@layer hcm{@media(forced-colors: active){.unselected .handle::before{background:ButtonText}.disabled .handle::before{opacity:1}.disabled.unselected .handle::before{background:GrayText}}}@layer styles{.icons{position:relative;height:100%;width:100%}.icon{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;fill:currentColor;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.disabled .icon{transition:none}.selected .icon--on,.unselected .icon--off{opacity:1}.unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--md-switch-icon-size, 16px);height:var(--md-switch-icon-size, 16px);color:var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:hover .icon--off{color:var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:focus-within .icon--off{color:var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:active .icon--off{color:var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected.disabled .icon--off{color:var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));opacity:var(--md-switch-disabled-icon-opacity, 0.38)}.icon--on{width:var(--md-switch-selected-icon-size, 16px);height:var(--md-switch-selected-icon-size, 16px);color:var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:hover .icon--on{color:var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:focus-within .icon--on{color:var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:active .icon--on{color:var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected.disabled .icon--on{color:var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon--off{fill:Canvas}.icon--on{fill:ButtonText}.disabled.unselected .icon--off,.disabled.selected .icon--on{opacity:1}.disabled .icon--on{fill:GrayText}}}
-`;
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * @summary Switches toggle the state of a single item on or off.
- *
- * @description
- * There's one type of switch in Material. Use this selection control when the
- * user needs to toggle a single item on or off.
- *
- * @final
- * @suppress {visibility}
- */
-let MdSwitch = class MdSwitch extends Switch {};
-MdSwitch.styles = [styles$4];
-MdSwitch = __decorate([t('md-switch')], MdSwitch);
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * Creates an event that closes any parent menus.
- */
-function createCloseMenuEvent(initiator, reason) {
-  return new CustomEvent('close-menu', {
-    bubbles: true,
-    composed: true,
-    detail: {
-      initiator,
-      reason,
-      itemPath: [initiator]
-    }
-  });
-}
-/**
- * Creates a default close menu event used by md-menu.
- */
-const createDefaultCloseMenuEvent = createCloseMenuEvent;
-/**
- * Keys that are used for selection in menus.
- */
-// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
-const SelectionKey = {
-  SPACE: 'Space',
-  ENTER: 'Enter'
-};
-/**
- * Default close `Reason` kind values.
- */
-// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
-const CloseReason = {
-  CLICK_SELECTION: 'click-selection',
-  KEYDOWN: 'keydown'
-};
-/**
- * Keys that can close menus.
- */
-// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
-const KeydownCloseKey = {
-  ESCAPE: 'Escape',
-  SPACE: SelectionKey.SPACE,
-  ENTER: SelectionKey.ENTER
-};
-/**
- * Determines whether the given key code is a key code that should close the
- * menu.
- *
- * @param code The KeyboardEvent code to check.
- * @return Whether or not the key code is in the predetermined list to close the
- * menu.
- */
-function isClosableKey(code) {
-  return Object.values(KeydownCloseKey).some(value => value === code);
-}
-/**
- * Determines whether the given key code is a key code that should select a menu
- * item.
- *
- * @param code They KeyboardEvent code to check.
- * @return Whether or not the key code is in the predetermined list to select a
- * menu item.
- */
-function isSelectableKey(code) {
-  return Object.values(SelectionKey).some(value => value === code);
-}
-/**
- * Determines whether a target element is contained inside another element's
- * composed tree.
- *
- * @param target The potential contained element.
- * @param container The potential containing element of the target.
- * @returns Whether the target element is contained inside the container's
- * composed subtree
- */
-function isElementInSubtree(target, container) {
-  // Dispatch a composed, bubbling event to check its path to see if the
-  // newly-focused element is contained in container's subtree
-  const focusEv = new Event('md-contains', {
-    bubbles: true,
-    composed: true
-  });
-  let composedPath = [];
-  const listener = ev => {
-    composedPath = ev.composedPath();
-  };
-  container.addEventListener('md-contains', listener);
-  target.dispatchEvent(focusEv);
-  container.removeEventListener('md-contains', listener);
-  const isContained = composedPath.length > 0;
-  return isContained;
-}
-/**
- * Element to focus on when menu is first opened.
- */
-// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
-const FocusState = {
-  NONE: 'none',
-  LIST_ROOT: 'list-root',
-  FIRST_ITEM: 'first-item',
-  LAST_ITEM: 'last-item'
-};
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * An enum of supported Menu corners
- */
-// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
-const Corner = {
-  END_START: 'end-start',
-  START_START: 'start-start'};
-/**
- * Given a surface, an anchor, corners, and some options, this surface will
- * calculate the position of a surface to align the two given corners and keep
- * the surface inside the window viewport. It also provides a StyleInfo map that
- * can be applied to the surface to handle visiblility and position.
- */
-class SurfacePositionController {
-  /**
-   * @param host The host to connect the controller to.
-   * @param getProperties A function that returns the properties for the
-   * controller.
-   */
-  constructor(host, getProperties) {
-    this.host = host;
-    this.getProperties = getProperties;
-    // The current styles to apply to the surface.
-    this.surfaceStylesInternal = {
-      'display': 'none'
-    };
-    // Previous values stored for change detection. Open change detection is
-    // calculated separately so initialize it here.
-    this.lastValues = {
-      isOpen: false
-    };
-    this.host.addController(this);
-  }
-  /**
-   * The StyleInfo map to apply to the surface via Lit's stylemap
-   */
-  get surfaceStyles() {
-    return this.surfaceStylesInternal;
-  }
-  /**
-   * Calculates the surface's new position required so that the surface's
-   * `surfaceCorner` aligns to the anchor's `anchorCorner` while keeping the
-   * surface inside the window viewport. This positioning also respects RTL by
-   * checking `getComputedStyle()` on the surface element.
-   */
-  async position() {
-    const {
-      surfaceEl,
-      anchorEl,
-      anchorCorner: anchorCornerRaw,
-      surfaceCorner: surfaceCornerRaw,
-      positioning,
-      xOffset,
-      yOffset,
-      disableBlockFlip,
-      disableInlineFlip,
-      repositionStrategy
-    } = this.getProperties();
-    const anchorCorner = anchorCornerRaw.toLowerCase().trim();
-    const surfaceCorner = surfaceCornerRaw.toLowerCase().trim();
-    if (!surfaceEl || !anchorEl) {
-      return;
-    }
-    // Store these before we potentially resize the window with the next set of
-    // lines
-    const windowInnerWidth = window.innerWidth;
-    const windowInnerHeight = window.innerHeight;
-    const div = document.createElement('div');
-    div.style.opacity = '0';
-    div.style.position = 'fixed';
-    div.style.display = 'block';
-    div.style.inset = '0';
-    document.body.appendChild(div);
-    const scrollbarTestRect = div.getBoundingClientRect();
-    div.remove();
-    // Calculate the widths of the scrollbars in the inline and block directions
-    // to account for window-relative calculations.
-    const blockScrollbarHeight = window.innerHeight - scrollbarTestRect.bottom;
-    const inlineScrollbarWidth = window.innerWidth - scrollbarTestRect.right;
-    // Paint the surface transparently so that we can get the position and the
-    // rect info of the surface.
-    this.surfaceStylesInternal = {
-      'display': 'block',
-      'opacity': '0'
-    };
-    // Wait for it to be visible.
-    this.host.requestUpdate();
-    await this.host.updateComplete;
-    // Safari has a bug that makes popovers render incorrectly if the node is
-    // made visible + Animation Frame before calling showPopover().
-    // https://bugs.webkit.org/show_bug.cgi?id=264069
-    // also the cast is required due to differing TS types in Google and OSS.
-    if (surfaceEl.popover && surfaceEl.isConnected) {
-      surfaceEl.showPopover();
-    }
-    const surfaceRect = surfaceEl.getSurfacePositionClientRect ? surfaceEl.getSurfacePositionClientRect() : surfaceEl.getBoundingClientRect();
-    const anchorRect = anchorEl.getSurfacePositionClientRect ? anchorEl.getSurfacePositionClientRect() : anchorEl.getBoundingClientRect();
-    const [surfaceBlock, surfaceInline] = surfaceCorner.split('-');
-    const [anchorBlock, anchorInline] = anchorCorner.split('-');
-    // LTR depends on the direction of the SURFACE not the anchor.
-    const isLTR = getComputedStyle(surfaceEl).direction === 'ltr';
-    /*
-     * For more on inline and block dimensions, see MDN article:
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
-     *
-     * ┌───── inline/blockDocumentOffset  inlineScrollbarWidth
-     * │       │                                    │
-     * │     ┌─▼─────┐                              │Document
-     * │    ┌┼───────┴──────────────────────────────┼────────┐
-     * │    ││                                      │        │
-     * └──► ││ ┌───── inline/blockWindowOffset      │        │
-     *      ││ │       │                            ▼        │
-     *      ││ │     ┌─▼───┐                 Window┌┐        │
-     *      └┤ │    ┌┼─────┴───────────────────────┼│        │
-     *       │ │    ││                             ││        │
-     *       │ └──► ││  ┌──inline/blockAnchorOffset││        │
-     *       │      ││  │     │                    ││        │
-     *       │      └┤  │  ┌──▼───┐                ││        │
-     *       │       │  │ ┌┼──────┤                ││        │
-     *       │       │  └─►│Anchor│                ││        │
-     *       │       │    └┴──────┘                ││        │
-     *       │       │                             ││        │
-     *       │       │     ┌───────────────────────┼┼────┐   │
-     *       │       │     │ Surface               ││    │   │
-     *       │       │     │                       ││    │   │
-     *       │       │     │                       ││    │   │
-     *       │       │     │                       ││    │   │
-     *       │       │     │                       ││    │   │
-     *       │      ┌┼─────┼───────────────────────┼│    │   │
-     *       │   ┌─►┴──────┼────────────────────────┘    ├┐  │
-     *       │   │         │ inline/blockOOBCorrection   ││  │
-     *       │   │         │                         │   ││  │
-     *       │   │         │                         ├──►├│  │
-     *       │   │         │                         │   ││  │
-     *       │   │         └────────────────────────┐▼───┼┘  │
-     *       │  blockScrollbarHeight                └────┘   │
-     *       │                                               │
-     *       └───────────────────────────────────────────────┘
-     */
-    // Calculate the block positioning properties
-    let {
-      blockInset,
-      blockOutOfBoundsCorrection,
-      surfaceBlockProperty
-    } = this.calculateBlock({
-      surfaceRect,
-      anchorRect,
-      anchorBlock,
-      surfaceBlock,
-      yOffset,
-      positioning,
-      windowInnerHeight,
-      blockScrollbarHeight
-    });
-    // If the surface should be out of bounds in the block direction, flip the
-    // surface and anchor corner block values and recalculate
-    if (blockOutOfBoundsCorrection && !disableBlockFlip) {
-      const flippedSurfaceBlock = surfaceBlock === 'start' ? 'end' : 'start';
-      const flippedAnchorBlock = anchorBlock === 'start' ? 'end' : 'start';
-      const flippedBlock = this.calculateBlock({
-        surfaceRect,
-        anchorRect,
-        anchorBlock: flippedAnchorBlock,
-        surfaceBlock: flippedSurfaceBlock,
-        yOffset,
-        positioning,
-        windowInnerHeight,
-        blockScrollbarHeight
-      });
-      // In the case that the flipped verion would require less out of bounds
-      // correcting, use the flipped corner block values
-      if (blockOutOfBoundsCorrection > flippedBlock.blockOutOfBoundsCorrection) {
-        blockInset = flippedBlock.blockInset;
-        blockOutOfBoundsCorrection = flippedBlock.blockOutOfBoundsCorrection;
-        surfaceBlockProperty = flippedBlock.surfaceBlockProperty;
-      }
-    }
-    // Calculate the inline positioning properties
-    let {
-      inlineInset,
-      inlineOutOfBoundsCorrection,
-      surfaceInlineProperty
-    } = this.calculateInline({
-      surfaceRect,
-      anchorRect,
-      anchorInline,
-      surfaceInline,
-      xOffset,
-      positioning,
-      isLTR,
-      windowInnerWidth,
-      inlineScrollbarWidth
-    });
-    // If the surface should be out of bounds in the inline direction, flip the
-    // surface and anchor corner inline values and recalculate
-    if (inlineOutOfBoundsCorrection && !disableInlineFlip) {
-      const flippedSurfaceInline = surfaceInline === 'start' ? 'end' : 'start';
-      const flippedAnchorInline = anchorInline === 'start' ? 'end' : 'start';
-      const flippedInline = this.calculateInline({
-        surfaceRect,
-        anchorRect,
-        anchorInline: flippedAnchorInline,
-        surfaceInline: flippedSurfaceInline,
-        xOffset,
-        positioning,
-        isLTR,
-        windowInnerWidth,
-        inlineScrollbarWidth
-      });
-      // In the case that the flipped verion would require less out of bounds
-      // correcting, use the flipped corner inline values
-      if (Math.abs(inlineOutOfBoundsCorrection) > Math.abs(flippedInline.inlineOutOfBoundsCorrection)) {
-        inlineInset = flippedInline.inlineInset;
-        inlineOutOfBoundsCorrection = flippedInline.inlineOutOfBoundsCorrection;
-        surfaceInlineProperty = flippedInline.surfaceInlineProperty;
-      }
-    }
-    // If we are simply repositioning the surface back inside the viewport,
-    // subtract the out of bounds correction values from the positioning.
-    if (repositionStrategy === 'move') {
-      blockInset = blockInset - blockOutOfBoundsCorrection;
-      inlineInset = inlineInset - inlineOutOfBoundsCorrection;
-    }
-    this.surfaceStylesInternal = {
-      'display': 'block',
-      'opacity': '1',
-      [surfaceBlockProperty]: `${blockInset}px`,
-      [surfaceInlineProperty]: `${inlineInset}px`
-    };
-    // In the case that we are resizing the surface to stay inside the viewport
-    // we need to set height and width on the surface.
-    if (repositionStrategy === 'resize') {
-      // Add a height property to the styles if there is block height correction
-      if (blockOutOfBoundsCorrection) {
-        this.surfaceStylesInternal['height'] = `${surfaceRect.height - blockOutOfBoundsCorrection}px`;
-      }
-      // Add a width property to the styles if there is block height correction
-      if (inlineOutOfBoundsCorrection) {
-        this.surfaceStylesInternal['width'] = `${surfaceRect.width - inlineOutOfBoundsCorrection}px`;
-      }
-    }
-    this.host.requestUpdate();
-  }
-  /**
-   * Calculates the css property, the inset, and the out of bounds correction
-   * for the surface in the block direction.
-   */
-  calculateBlock(config) {
-    const {
-      surfaceRect,
-      anchorRect,
-      anchorBlock,
-      surfaceBlock,
-      yOffset,
-      positioning,
-      windowInnerHeight,
-      blockScrollbarHeight
-    } = config;
-    // We use number booleans to multiply values rather than `if` / ternary
-    // statements because it _heavily_ cuts down on nesting and readability
-    const relativeToWindow = positioning === 'fixed' || positioning === 'document' ? 1 : 0;
-    const relativeToDocument = positioning === 'document' ? 1 : 0;
-    const isSurfaceBlockStart = surfaceBlock === 'start' ? 1 : 0;
-    const isSurfaceBlockEnd = surfaceBlock === 'end' ? 1 : 0;
-    const isOneBlockEnd = anchorBlock !== surfaceBlock ? 1 : 0;
-    // Whether or not to apply the height of the anchor
-    const blockAnchorOffset = isOneBlockEnd * anchorRect.height + yOffset;
-    // The absolute block position of the anchor relative to window
-    const blockTopLayerOffset = isSurfaceBlockStart * anchorRect.top + isSurfaceBlockEnd * (windowInnerHeight - anchorRect.bottom - blockScrollbarHeight);
-    const blockDocumentOffset = isSurfaceBlockStart * window.scrollY - isSurfaceBlockEnd * window.scrollY;
-    // If the surface's block would be out of bounds of the window, move it back
-    // in
-    const blockOutOfBoundsCorrection = Math.abs(Math.min(0, windowInnerHeight - blockTopLayerOffset - blockAnchorOffset - surfaceRect.height));
-    // The block logical value of the surface
-    const blockInset = relativeToWindow * blockTopLayerOffset + relativeToDocument * blockDocumentOffset + blockAnchorOffset;
-    const surfaceBlockProperty = surfaceBlock === 'start' ? 'inset-block-start' : 'inset-block-end';
-    return {
-      blockInset,
-      blockOutOfBoundsCorrection,
-      surfaceBlockProperty
-    };
-  }
-  /**
-   * Calculates the css property, the inset, and the out of bounds correction
-   * for the surface in the inline direction.
-   */
-  calculateInline(config) {
-    const {
-      isLTR: isLTRBool,
-      surfaceInline,
-      anchorInline,
-      anchorRect,
-      surfaceRect,
-      xOffset,
-      positioning,
-      windowInnerWidth,
-      inlineScrollbarWidth
-    } = config;
-    // We use number booleans to multiply values rather than `if` / ternary
-    // statements because it _heavily_ cuts down on nesting and readability
-    const relativeToWindow = positioning === 'fixed' || positioning === 'document' ? 1 : 0;
-    const relativeToDocument = positioning === 'document' ? 1 : 0;
-    const isLTR = isLTRBool ? 1 : 0;
-    const isRTL = isLTRBool ? 0 : 1;
-    const isSurfaceInlineStart = surfaceInline === 'start' ? 1 : 0;
-    const isSurfaceInlineEnd = surfaceInline === 'end' ? 1 : 0;
-    const isOneInlineEnd = anchorInline !== surfaceInline ? 1 : 0;
-    // Whether or not to apply the width of the anchor
-    const inlineAnchorOffset = isOneInlineEnd * anchorRect.width + xOffset;
-    // The inline position of the anchor relative to window in LTR
-    const inlineTopLayerOffsetLTR = isSurfaceInlineStart * anchorRect.left + isSurfaceInlineEnd * (windowInnerWidth - anchorRect.right - inlineScrollbarWidth);
-    // The inline position of the anchor relative to window in RTL
-    const inlineTopLayerOffsetRTL = isSurfaceInlineStart * (windowInnerWidth - anchorRect.right - inlineScrollbarWidth) + isSurfaceInlineEnd * anchorRect.left;
-    // The inline position of the anchor relative to window
-    const inlineTopLayerOffset = isLTR * inlineTopLayerOffsetLTR + isRTL * inlineTopLayerOffsetRTL;
-    // The inline position of the anchor relative to window in LTR
-    const inlineDocumentOffsetLTR = isSurfaceInlineStart * window.scrollX - isSurfaceInlineEnd * window.scrollX;
-    // The inline position of the anchor relative to window in RTL
-    const inlineDocumentOffsetRTL = isSurfaceInlineEnd * window.scrollX - isSurfaceInlineStart * window.scrollX;
-    // The inline position of the anchor relative to window
-    const inlineDocumentOffset = isLTR * inlineDocumentOffsetLTR + isRTL * inlineDocumentOffsetRTL;
-    // If the surface's inline would be out of bounds of the window, move it
-    // back in
-    const inlineOutOfBoundsCorrection = Math.abs(Math.min(0, windowInnerWidth - inlineTopLayerOffset - inlineAnchorOffset - surfaceRect.width));
-    // The inline logical value of the surface
-    const inlineInset = relativeToWindow * inlineTopLayerOffset + inlineAnchorOffset + relativeToDocument * inlineDocumentOffset;
-    let surfaceInlineProperty = surfaceInline === 'start' ? 'inset-inline-start' : 'inset-inline-end';
-    // There are cases where the element is RTL but the root of the page is not.
-    // In these cases we want to not use logical properties.
-    if (positioning === 'document' || positioning === 'fixed') {
-      if (surfaceInline === 'start' && isLTRBool || surfaceInline === 'end' && !isLTRBool) {
-        surfaceInlineProperty = 'left';
-      } else {
-        surfaceInlineProperty = 'right';
-      }
-    }
-    return {
-      inlineInset,
-      inlineOutOfBoundsCorrection,
-      surfaceInlineProperty
-    };
-  }
-  hostUpdate() {
-    this.onUpdate();
-  }
-  hostUpdated() {
-    this.onUpdate();
-  }
-  /**
-   * Checks whether the properties passed into the controller have changed since
-   * the last positioning. If so, it will reposition if the surface is open or
-   * close it if the surface should close.
-   */
-  async onUpdate() {
-    const props = this.getProperties();
-    let hasChanged = false;
-    for (const [key, value] of Object.entries(props)) {
-      // tslint:disable-next-line
-      hasChanged = hasChanged || value !== this.lastValues[key];
-      if (hasChanged) break;
-    }
-    const openChanged = this.lastValues.isOpen !== props.isOpen;
-    const hasAnchor = !!props.anchorEl;
-    const hasSurface = !!props.surfaceEl;
-    if (hasChanged && hasAnchor && hasSurface) {
-      // Only update isOpen, because if it's closed, we do not want to waste
-      // time on a useless reposition calculation. So save the other "dirty"
-      // values until next time it opens.
-      this.lastValues.isOpen = props.isOpen;
-      if (props.isOpen) {
-        // We are going to do a reposition, so save the prop values for future
-        // dirty checking.
-        this.lastValues = props;
-        await this.position();
-        props.onOpen();
-      } else if (openChanged) {
-        await props.beforeClose();
-        this.close();
-        props.onClose();
-      }
-    }
-  }
-  /**
-   * Hides the surface.
-   */
-  close() {
-    this.surfaceStylesInternal = {
-      'display': 'none'
-    };
-    this.host.requestUpdate();
-    const surfaceEl = this.getProperties().surfaceEl;
-    // The following type casts are required due to differing TS types in Google
-    // and open source.
-    if (surfaceEl !== null && surfaceEl !== void 0 && surfaceEl.popover && surfaceEl !== null && surfaceEl !== void 0 && surfaceEl.isConnected) {
-      surfaceEl.hidePopover();
-    }
-  }
-}
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * Indicies to access the TypeaheadRecord tuple type.
- */
-const TYPEAHEAD_RECORD = {
-  INDEX: 0,
-  ITEM: 1,
-  TEXT: 2
-};
-/**
- * This controller listens to `keydown` events and searches the header text of
- * an array of `MenuItem`s with the corresponding entered keys within the buffer
- * time and activates the item.
- *
- * @example
- * ```ts
- * const typeaheadController = new TypeaheadController(() => ({
- *   typeaheadBufferTime: 50,
- *   getItems: () => Array.from(document.querySelectorAll('md-menu-item'))
- * }));
- * html`
- *   <div
- *       @keydown=${typeaheadController.onKeydown}
- *       tabindex="0"
- *       class="activeItemText">
- *     <!-- focusable element that will receive keydown events -->
- *     Apple
- *   </div>
- *   <div>
- *     <md-menu-item active header="Apple"></md-menu-item>
- *     <md-menu-item header="Apricot"></md-menu-item>
- *     <md-menu-item header="Banana"></md-menu-item>
- *     <md-menu-item header="Olive"></md-menu-item>
- *     <md-menu-item header="Orange"></md-menu-item>
- *   </div>
- * `;
- * ```
- */
-class TypeaheadController {
-  /**
-   * @param getProperties A function that returns the options of the typeahead
-   * controller:
-   *
-   * {
-   *   getItems: A function that returns an array of menu items to be searched.
-   *   typeaheadBufferTime: The maximum time between each keystroke to keep the
-   *       current type buffer alive.
-   * }
-   */
-  constructor(getProperties) {
-    this.getProperties = getProperties;
-    /**
-     * Array of tuples that helps with indexing.
-     */
-    this.typeaheadRecords = [];
-    /**
-     * Currently-typed text since last buffer timeout
-     */
-    this.typaheadBuffer = '';
-    /**
-     * The timeout id from the current buffer's setTimeout
-     */
-    this.cancelTypeaheadTimeout = 0;
-    /**
-     * If we are currently "typing"
-     */
-    this.isTypingAhead = false;
-    /**
-     * The record of the last active item.
-     */
-    this.lastActiveRecord = null;
-    /**
-     * Apply this listener to the element that will receive `keydown` events that
-     * should trigger this controller.
-     *
-     * @param event The native browser `KeyboardEvent` from the `keydown` event.
-     */
-    this.onKeydown = event => {
-      if (this.isTypingAhead) {
-        this.typeahead(event);
-      } else {
-        this.beginTypeahead(event);
-      }
-    };
-    /**
-     * Ends the current typeahead and clears the buffer.
-     */
-    this.endTypeahead = () => {
-      this.isTypingAhead = false;
-      this.typaheadBuffer = '';
-      this.typeaheadRecords = [];
-    };
-  }
-  get items() {
-    return this.getProperties().getItems();
-  }
-  get active() {
-    return this.getProperties().active;
-  }
-  /**
-   * Sets up typingahead
-   */
-  beginTypeahead(event) {
-    if (!this.active) {
-      return;
-    }
-    // We don't want to typeahead if the _beginning_ of the typeahead is a menu
-    // navigation, or a selection. We will handle "Space" only if it's in the
-    // middle of a typeahead
-    if (event.code === 'Space' || event.code === 'Enter' || event.code.startsWith('Arrow') || event.code === 'Escape') {
-      return;
-    }
-    this.isTypingAhead = true;
-    // Generates the record array data structure which is the index, the element
-    // and a normalized header.
-    this.typeaheadRecords = this.items.map((el, index) => [index, el, el.typeaheadText.trim().toLowerCase()]);
-    this.lastActiveRecord = this.typeaheadRecords.find(record => record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0) ?? null;
-    if (this.lastActiveRecord) {
-      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;
-    }
-    this.typeahead(event);
-  }
-  /**
-   * Performs the typeahead. Based on the normalized items and the current text
-   * buffer, finds the _next_ item with matching text and activates it.
-   *
-   * @example
-   *
-   * items: Apple, Banana, Olive, Orange, Cucumber
-   * buffer: ''
-   * user types: o
-   *
-   * activates Olive
-   *
-   * @example
-   *
-   * items: Apple, Banana, Olive (active), Orange, Cucumber
-   * buffer: 'o'
-   * user types: l
-   *
-   * activates Olive
-   *
-   * @example
-   *
-   * items: Apple, Banana, Olive (active), Orange, Cucumber
-   * buffer: ''
-   * user types: o
-   *
-   * activates Orange
-   *
-   * @example
-   *
-   * items: Apple, Banana, Olive, Orange (active), Cucumber
-   * buffer: ''
-   * user types: o
-   *
-   * activates Olive
-   */
-  typeahead(event) {
-    if (event.defaultPrevented) return;
-    clearTimeout(this.cancelTypeaheadTimeout);
-    // Stop typingahead if one of the navigation or selection keys (except for
-    // Space) are pressed
-    if (event.code === 'Enter' || event.code.startsWith('Arrow') || event.code === 'Escape') {
-      this.endTypeahead();
-      if (this.lastActiveRecord) {
-        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;
-      }
-      return;
-    }
-    // If Space is pressed, prevent it from selecting and closing the menu
-    if (event.code === 'Space') {
-      event.preventDefault();
-    }
-    // Start up a new keystroke buffer timeout
-    this.cancelTypeaheadTimeout = setTimeout(this.endTypeahead, this.getProperties().typeaheadBufferTime);
-    this.typaheadBuffer += event.key.toLowerCase();
-    const lastActiveIndex = this.lastActiveRecord ? this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX] : -1;
-    const numRecords = this.typeaheadRecords.length;
-    /**
-     * Sorting function that will resort the items starting with the given index
-     *
-     * @example
-     *
-     * this.typeaheadRecords =
-     * 0: [0, <reference>, 'apple']
-     * 1: [1, <reference>, 'apricot']
-     * 2: [2, <reference>, 'banana']
-     * 3: [3, <reference>, 'olive'] <-- lastActiveIndex
-     * 4: [4, <reference>, 'orange']
-     * 5: [5, <reference>, 'strawberry']
-     *
-     * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a)
-     *                                       - rebaseIndexOnActive(b)) ===
-     * 0: [3, <reference>, 'olive'] <-- lastActiveIndex
-     * 1: [4, <reference>, 'orange']
-     * 2: [5, <reference>, 'strawberry']
-     * 3: [0, <reference>, 'apple']
-     * 4: [1, <reference>, 'apricot']
-     * 5: [2, <reference>, 'banana']
-     */
-    const rebaseIndexOnActive = record => {
-      return (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) % numRecords;
-    };
-    // records filtered and sorted / rebased around the last active index
-    const matchingRecords = this.typeaheadRecords.filter(record => !record[TYPEAHEAD_RECORD.ITEM].disabled && record[TYPEAHEAD_RECORD.TEXT].startsWith(this.typaheadBuffer)).sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));
-    // Just leave if there's nothing that matches. Native select will just
-    // choose the first thing that starts with the next letter in the alphabet
-    // but that's out of scope and hard to localize
-    if (matchingRecords.length === 0) {
-      clearTimeout(this.cancelTypeaheadTimeout);
-      if (this.lastActiveRecord) {
-        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;
-      }
-      this.endTypeahead();
-      return;
-    }
-    const isNewQuery = this.typaheadBuffer.length === 1;
-    let nextRecord;
-    // This is likely the case that someone is trying to "tab" through different
-    // entries that start with the same letter
-    if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) {
-      nextRecord = matchingRecords[1] ?? matchingRecords[0];
-    } else {
-      nextRecord = matchingRecords[0];
-    }
-    if (this.lastActiveRecord) {
-      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;
-    }
-    this.lastActiveRecord = nextRecord;
-    nextRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = 0;
-    nextRecord[TYPEAHEAD_RECORD.ITEM].focus();
-    return;
-  }
-}
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * The default value for the typeahead buffer time in Milliseconds.
- */
-const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;
-const submenuNavKeys = new Set([NavigableKeys.ArrowDown, NavigableKeys.ArrowUp, NavigableKeys.Home, NavigableKeys.End]);
-const menuNavKeys = new Set([NavigableKeys.ArrowLeft, NavigableKeys.ArrowRight, ...submenuNavKeys]);
-/**
- * Gets the currently focused element on the page.
- *
- * @param activeDoc The document or shadowroot from which to start the search.
- *    Defaults to `window.document`
- * @return Returns the currently deeply focused element or `null` if none.
- */
-function getFocusedElement(activeDoc = document) {
-  let activeEl = activeDoc.activeElement;
-  // Check for activeElement in the case that an element with a shadow root host
-  // is currently focused.
-  while (activeEl && (_activeEl = activeEl) !== null && _activeEl !== void 0 && (_activeEl = _activeEl.shadowRoot) !== null && _activeEl !== void 0 && _activeEl.activeElement) {
-    var _activeEl;
-    activeEl = activeEl.shadowRoot.activeElement;
-  }
-  return activeEl;
-}
-/**
- * @fires opening {Event} Fired before the opening animation begins
- * @fires opened {Event} Fired once the menu is open, after any animations
- * @fires closing {Event} Fired before the closing animation begins
- * @fires closed {Event} Fired once the menu is closed, after any animations
- */
-class Menu extends i {
-  /**
-   * Whether the menu is animating upwards or downwards when opening. This is
-   * helpful for calculating some animation calculations.
-   */
-  get openDirection() {
-    const menuCornerBlock = this.menuCorner.split('-')[0];
-    return menuCornerBlock === 'start' ? 'DOWN' : 'UP';
-  }
-  /**
-   * The element which the menu should align to. If `anchor` is set to a
-   * non-empty idref string, then `anchorEl` will resolve to the element with
-   * the given id in the same root node. Otherwise, `null`.
-   */
-  get anchorElement() {
-    if (this.anchor) {
-      return this.getRootNode().querySelector(`#${this.anchor}`);
-    }
-    return this.currentAnchorElement;
-  }
-  set anchorElement(element) {
-    this.currentAnchorElement = element;
-    this.requestUpdate('anchorElement');
-  }
-  constructor() {
-    super();
-    /**
-     * The ID of the element in the same root node in which the menu should align
-     * to. Overrides setting `anchorElement = elementReference`.
-     *
-     * __NOTE__: anchor or anchorElement must either be an HTMLElement or resolve
-     * to an HTMLElement in order for menu to open.
-     */
-    this.anchor = '';
-    /**
-     * Whether the positioning algorithm should calculate relative to the parent
-     * of the anchor element (`absolute`), relative to the window (`fixed`), or
-     * relative to the document (`document`). `popover` will use the popover API
-     * to render the menu in the top-layer. If your browser does not support the
-     * popover API, it will fall back to `fixed`.
-     *
-     * __Examples for `position = 'fixed'`:__
-     *
-     * - If there is no `position:relative` in the given parent tree and the
-     *   surface is `position:absolute`
-     * - If the surface is `position:fixed`
-     * - If the surface is in the "top layer"
-     * - The anchor and the surface do not share a common `position:relative`
-     *   ancestor
-     *
-     * When using `positioning=fixed`, in most cases, the menu should position
-     * itself above most other `position:absolute` or `position:fixed` elements
-     * when placed inside of them. e.g. using a menu inside of an `md-dialog`.
-     *
-     * __NOTE__: Fixed menus will not scroll with the page and will be fixed to
-     * the window instead.
-     *
-     * __Examples for `position = 'document'`:__
-     *
-     * - There is no parent that creates a relative positioning context e.g.
-     *   `position: relative`, `position: absolute`, `transform: translate(x, y)`,
-     *   etc.
-     * - You put the effort into hoisting the menu to the top of the DOM like the
-     *   end of the `<body>` to render over everything or in a top-layer.
-     * - You are reusing a single `md-menu` element that dynamically renders
-     *   content.
-     *
-     * __Examples for `position = 'popover'`:__
-     *
-     * - Your browser supports `popover`.
-     * - Most cases. Once popover is in browsers, this will become the default.
-     */
-    this.positioning = 'absolute';
-    /**
-     * Skips the opening and closing animations.
-     */
-    this.quick = false;
-    /**
-     * Displays overflow content like a submenu. Not required in most cases when
-     * using `positioning="popover"`.
-     *
-     * __NOTE__: This may cause adverse effects if you set
-     * `md-menu {max-height:...}`
-     * and have items overflowing items in the "y" direction.
-     */
-    this.hasOverflow = false;
-    /**
-     * Opens the menu and makes it visible. Alternative to the `.show()` and
-     * `.close()` methods
-     */
-    this.open = false;
-    /**
-     * Offsets the menu's inline alignment from the anchor by the given number in
-     * pixels. This value is direction aware and will follow the LTR / RTL
-     * direction.
-     *
-     * e.g. LTR: positive -> right, negative -> left
-     *      RTL: positive -> left, negative -> right
-     */
-    this.xOffset = 0;
-    /**
-     * Offsets the menu's block alignment from the anchor by the given number in
-     * pixels.
-     *
-     * e.g. positive -> down, negative -> up
-     */
-    this.yOffset = 0;
-    /**
-     * Disable the `flip` behavior that usually happens on the horizontal axis
-     * when the surface would render outside the viewport.
-     */
-    this.noHorizontalFlip = false;
-    /**
-     * Disable the `flip` behavior that usually happens on the vertical axis when
-     * the surface would render outside the viewport.
-     */
-    this.noVerticalFlip = false;
-    /**
-     * The max time between the keystrokes of the typeahead menu behavior before
-     * it clears the typeahead buffer.
-     */
-    this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;
-    /**
-     * The corner of the anchor which to align the menu in the standard logical
-     * property style of <block>-<inline> e.g. `'end-start'`.
-     *
-     * NOTE: This value may not be respected by the menu positioning algorithm
-     * if the menu would render outisde the viewport.
-     * Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value
-     */
-    this.anchorCorner = Corner.END_START;
-    /**
-     * The corner of the menu which to align the anchor in the standard logical
-     * property style of <block>-<inline> e.g. `'start-start'`.
-     *
-     * NOTE: This value may not be respected by the menu positioning algorithm
-     * if the menu would render outisde the viewport.
-     * Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value
-     */
-    this.menuCorner = Corner.START_START;
-    /**
-     * Keeps the user clicks outside the menu.
-     *
-     * NOTE: clicking outside may still cause focusout to close the menu so see
-     * `stayOpenOnFocusout`.
-     */
-    this.stayOpenOnOutsideClick = false;
-    /**
-     * Keeps the menu open when focus leaves the menu's composed subtree.
-     *
-     * NOTE: Focusout behavior will stop propagation of the focusout event. Set
-     * this property to true to opt-out of menu's focusout handling altogether.
-     */
-    this.stayOpenOnFocusout = false;
-    /**
-     * After closing, does not restore focus to the last focused element before
-     * the menu was opened.
-     */
-    this.skipRestoreFocus = false;
-    /**
-     * The element that should be focused by default once opened.
-     *
-     * NOTE: When setting default focus to 'LIST_ROOT', remember to change
-     * `tabindex` to `0` and change md-menu's display to something other than
-     * `display: contents` when necessary.
-     */
-    this.defaultFocus = FocusState.FIRST_ITEM;
-    /**
-     * Turns off navigation wrapping. By default, navigating past the end of the
-     * menu items will wrap focus back to the beginning and vice versa. Use this
-     * for ARIA patterns that do not wrap focus, like combobox.
-     */
-    this.noNavigationWrap = false;
-    this.typeaheadActive = true;
-    /**
-     * Whether or not the current menu is a submenu and should not handle specific
-     * navigation keys.
-     *
-     * @export
-     */
-    this.isSubmenu = false;
-    /**
-     * The event path of the last window pointerdown event.
-     */
-    this.pointerPath = [];
-    /**
-     * Whether or not the menu is repositoining due to window / document resize
-     */
-    this.isRepositioning = false;
-    this.openCloseAnimationSignal = createAnimationSignal();
-    this.listController = new ListController({
-      isItem: maybeItem => {
-        return maybeItem.hasAttribute('md-menu-item');
-      },
-      getPossibleItems: () => this.slotItems,
-      isRtl: () => getComputedStyle(this).direction === 'rtl',
-      deactivateItem: item => {
-        item.selected = false;
-        item.tabIndex = -1;
-      },
-      activateItem: item => {
-        item.selected = true;
-        item.tabIndex = 0;
-      },
-      isNavigableKey: key => {
-        if (!this.isSubmenu) {
-          return menuNavKeys.has(key);
-        }
-        const isRtl = getComputedStyle(this).direction === 'rtl';
-        // we want md-submenu to handle the submenu's left/right arrow exit
-        // key so it can close the menu instead of navigate the list.
-        // Therefore we need to include all keys but left/right arrow close
-        // key
-        const arrowOpen = isRtl ? NavigableKeys.ArrowLeft : NavigableKeys.ArrowRight;
-        if (key === arrowOpen) {
-          return true;
-        }
-        return submenuNavKeys.has(key);
-      },
-      wrapNavigation: () => !this.noNavigationWrap
-    });
-    /**
-     * The element that was focused before the menu opened.
-     */
-    this.lastFocusedElement = null;
-    /**
-     * Handles typeahead navigation through the menu.
-     */
-    this.typeaheadController = new TypeaheadController(() => {
-      return {
-        getItems: () => this.items,
-        typeaheadBufferTime: this.typeaheadDelay,
-        active: this.typeaheadActive
-      };
-    });
-    this.currentAnchorElement = null;
-    this.internals =
-    // Cast needed for closure
-    this.attachInternals();
-    /**
-     * Handles positioning the surface and aligning it to the anchor as well as
-     * keeping it in the viewport.
-     */
-    this.menuPositionController = new SurfacePositionController(this, () => {
-      return {
-        anchorCorner: this.anchorCorner,
-        surfaceCorner: this.menuCorner,
-        surfaceEl: this.surfaceEl,
-        anchorEl: this.anchorElement,
-        positioning: this.positioning === 'popover' ? 'document' : this.positioning,
-        isOpen: this.open,
-        xOffset: this.xOffset,
-        yOffset: this.yOffset,
-        disableBlockFlip: this.noVerticalFlip,
-        disableInlineFlip: this.noHorizontalFlip,
-        onOpen: this.onOpened,
-        beforeClose: this.beforeClose,
-        onClose: this.onClosed,
-        // We can't resize components that have overflow like menus with
-        // submenus because the overflow-y will show menu items / content
-        // outside the bounds of the menu. Popover API fixes this because each
-        // submenu is hoisted to the top-layer and are not considered overflow
-        // content.
-        repositionStrategy: this.hasOverflow && this.positioning !== 'popover' ? 'move' : 'resize'
-      };
-    });
-    this.onWindowResize = () => {
-      if (this.isRepositioning || this.positioning !== 'document' && this.positioning !== 'fixed' && this.positioning !== 'popover') {
-        return;
-      }
-      this.isRepositioning = true;
-      this.reposition();
-      this.isRepositioning = false;
-    };
-    this.handleFocusout = async event => {
-      const anchorEl = this.anchorElement;
-      // Do not close if we focused out by clicking on the anchor element. We
-      // can't assume anchor buttons can be the related target because of iOS does
-      // not focus buttons.
-      if (this.stayOpenOnFocusout || !this.open || this.pointerPath.includes(anchorEl)) {
-        return;
-      }
-      if (event.relatedTarget) {
-        // Don't close the menu if we are switching focus between menu,
-        // md-menu-item, and md-list or if the anchor was click focused, but check
-        // if length of pointerPath is 0 because that means something was at least
-        // clicked (shift+tab case).
-        if (isElementInSubtree(event.relatedTarget, this) || this.pointerPath.length !== 0 && isElementInSubtree(event.relatedTarget, anchorEl)) {
-          return;
-        }
-      } else if (this.pointerPath.includes(this)) {
-        // If menu tabindex == -1 and the user clicks on the menu or a divider, we
-        // want to keep the menu open.
-        return;
-      }
-      const oldRestoreFocus = this.skipRestoreFocus;
-      // allow focus to continue to the next focused object rather than returning
-      this.skipRestoreFocus = true;
-      this.close();
-      // await for close
-      await this.updateComplete;
-      // return to previous behavior
-      this.skipRestoreFocus = oldRestoreFocus;
-    };
-    /**
-     * Saves the last focused element focuses the new element based on
-     * `defaultFocus`, and animates open.
-     */
-    this.onOpened = async () => {
-      this.lastFocusedElement = getFocusedElement();
-      const items = this.items;
-      const activeItemRecord = getActiveItem(items);
-      if (activeItemRecord && this.defaultFocus !== FocusState.NONE) {
-        activeItemRecord.item.tabIndex = -1;
-      }
-      let animationAborted = !this.quick;
-      if (this.quick) {
-        this.dispatchEvent(new Event('opening'));
-      } else {
-        animationAborted = !!(await this.animateOpen());
-      }
-      // This must come after the opening animation or else it may focus one of
-      // the items before the animation has begun and causes the list to slide
-      // (block-padding-of-the-menu)px at the end of the animation
-      switch (this.defaultFocus) {
-        case FocusState.FIRST_ITEM:
-          const first = getFirstActivatableItem(items);
-          if (first) {
-            first.tabIndex = 0;
-            first.focus();
-            await first.updateComplete;
-          }
-          break;
-        case FocusState.LAST_ITEM:
-          const last = getLastActivatableItem(items);
-          if (last) {
-            last.tabIndex = 0;
-            last.focus();
-            await last.updateComplete;
-          }
-          break;
-        case FocusState.LIST_ROOT:
-          this.focus();
-          break;
-        default:
-        case FocusState.NONE:
-          // Do nothing.
-          break;
-      }
-      if (!animationAborted) {
-        this.dispatchEvent(new Event('opened'));
-      }
-    };
-    /**
-     * Animates closed.
-     */
-    this.beforeClose = async () => {
-      this.open = false;
-      if (!this.skipRestoreFocus) {
-        var _this$lastFocusedElem, _this$lastFocusedElem2;
-        (_this$lastFocusedElem = this.lastFocusedElement) === null || _this$lastFocusedElem === void 0 || (_this$lastFocusedElem2 = _this$lastFocusedElem.focus) === null || _this$lastFocusedElem2 === void 0 || _this$lastFocusedElem2.call(_this$lastFocusedElem);
-      }
-      if (!this.quick) {
-        await this.animateClose();
-      }
-    };
-    /**
-     * Focuses the last focused element.
-     */
-    this.onClosed = () => {
-      if (this.quick) {
-        this.dispatchEvent(new Event('closing'));
-        this.dispatchEvent(new Event('closed'));
-      }
-    };
-    this.onWindowPointerdown = event => {
-      this.pointerPath = event.composedPath();
-    };
-    /**
-     * We cannot listen to window click because Safari on iOS will not bubble a
-     * click event on window if the item clicked is not a "clickable" item such as
-     * <body>
-     */
-    this.onDocumentClick = event => {
-      if (!this.open) {
-        return;
-      }
-      const path = event.composedPath();
-      if (!this.stayOpenOnOutsideClick && !path.includes(this) && !path.includes(this.anchorElement)) {
-        this.open = false;
-      }
-    };
-    {
-      this.internals.role = 'menu';
-      this.addEventListener('keydown', this.handleKeydown);
-      // Capture so that we can grab the event before it reaches the menu item
-      // istelf. Specifically useful for the case where typeahead encounters a
-      // space and we don't want the menu item to close the menu.
-      this.addEventListener('keydown', this.captureKeydown, {
-        capture: true
-      });
-      this.addEventListener('focusout', this.handleFocusout);
-    }
-  }
-  /**
-   * The menu items associated with this menu. The items must be `MenuItem`s and
-   * have both the `md-menu-item` and `md-list-item` attributes.
-   */
-  get items() {
-    return this.listController.items;
-  }
-  willUpdate(changed) {
-    if (!changed.has('open')) {
-      return;
-    }
-    if (this.open) {
-      this.removeAttribute('aria-hidden');
-      return;
-    }
-    this.setAttribute('aria-hidden', 'true');
-  }
-  update(changed) {
-    if (changed.has('open')) {
-      if (this.open) {
-        this.setUpGlobalEventListeners();
-      } else {
-        this.cleanUpGlobalEventListeners();
-      }
-    }
-    // Firefox does not support popover. Fall-back to using fixed.
-    if (changed.has('positioning') && this.positioning === 'popover' &&
-    // type required for Google JS conformance
-    !this.showPopover) {
-      this.positioning = 'fixed';
-    }
-    super.update(changed);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.open) {
-      this.setUpGlobalEventListeners();
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.cleanUpGlobalEventListeners();
-  }
-  getBoundingClientRect() {
-    if (!this.surfaceEl) {
-      return super.getBoundingClientRect();
-    }
-    return this.surfaceEl.getBoundingClientRect();
-  }
-  getClientRects() {
-    if (!this.surfaceEl) {
-      return super.getClientRects();
-    }
-    return this.surfaceEl.getClientRects();
-  }
-  render() {
-    return this.renderSurface();
-  }
-  /**
-   * Renders the positionable surface element and its contents.
-   */
-  renderSurface() {
-    return b`
-      <div
-        class="menu ${e$2(this.getSurfaceClasses())}"
-        style=${o$1(this.menuPositionController.surfaceStyles)}
-        popover=${this.positioning === 'popover' ? 'manual' : A}>
-        ${this.renderElevation()}
-        <div class="items">
-          <div class="item-padding"> ${this.renderMenuItems()} </div>
-        </div>
-      </div>
-    `;
-  }
-  /**
-   * Renders the menu items' slot
-   */
-  renderMenuItems() {
-    return b`<slot
-      @close-menu=${this.onCloseMenu}
-      @deactivate-items=${this.onDeactivateItems}
-      @request-activation=${this.onRequestActivation}
-      @deactivate-typeahead=${this.handleDeactivateTypeahead}
-      @activate-typeahead=${this.handleActivateTypeahead}
-      @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
-      @close-on-focusout=${this.handleCloseOnFocusout}
-      @slotchange=${this.listController.onSlotchange}></slot>`;
-  }
-  /**
-   * Renders the elevation component.
-   */
-  renderElevation() {
-    return b`<md-elevation part="elevation"></md-elevation>`;
-  }
-  getSurfaceClasses() {
-    return {
-      open: this.open,
-      fixed: this.positioning === 'fixed',
-      'has-overflow': this.hasOverflow
-    };
-  }
-  captureKeydown(event) {
-    if (event.target === this && !event.defaultPrevented && isClosableKey(event.code)) {
-      event.preventDefault();
-      this.close();
-    }
-    this.typeaheadController.onKeydown(event);
-  }
-  /**
-   * Performs the opening animation:
-   *
-   * https://direct.googleplex.com/#/spec/295000003+271060003
-   *
-   * @return A promise that resolve to `true` if the animation was aborted,
-   *     `false` if it was not aborted.
-   */
-  async animateOpen() {
-    const surfaceEl = this.surfaceEl;
-    const slotEl = this.slotEl;
-    if (!surfaceEl || !slotEl) return true;
-    const openDirection = this.openDirection;
-    this.dispatchEvent(new Event('opening'));
-    // needs to be imperative because we don't want to mix animation and Lit
-    // render timing
-    surfaceEl.classList.toggle('animating', true);
-    const signal = this.openCloseAnimationSignal.start();
-    const height = surfaceEl.offsetHeight;
-    const openingUpwards = openDirection === 'UP';
-    const children = this.items;
-    const FULL_DURATION = 500;
-    const SURFACE_OPACITY_DURATION = 50;
-    const ITEM_OPACITY_DURATION = 250;
-    // We want to fit every child fade-in animation within the full duration of
-    // the animation.
-    const DELAY_BETWEEN_ITEMS = (FULL_DURATION - ITEM_OPACITY_DURATION) / children.length;
-    const surfaceHeightAnimation = surfaceEl.animate([{
-      height: '0px'
-    }, {
-      height: `${height}px`
-    }], {
-      duration: FULL_DURATION,
-      easing: EASING.EMPHASIZED
-    });
-    // When we are opening upwards, we want to make sure the last item is always
-    // in view, so we need to translate it upwards the opposite direction of the
-    // height animation
-    const upPositionCorrectionAnimation = slotEl.animate([{
-      transform: openingUpwards ? `translateY(-${height}px)` : ''
-    }, {
-      transform: ''
-    }], {
-      duration: FULL_DURATION,
-      easing: EASING.EMPHASIZED
-    });
-    const surfaceOpacityAnimation = surfaceEl.animate([{
-      opacity: 0
-    }, {
-      opacity: 1
-    }], SURFACE_OPACITY_DURATION);
-    const childrenAnimations = [];
-    for (let i = 0; i < children.length; i++) {
-      // If we are animating upwards, then reverse the children list.
-      const directionalIndex = openingUpwards ? children.length - 1 - i : i;
-      const child = children[directionalIndex];
-      const animation = child.animate([{
-        opacity: 0
-      }, {
-        opacity: 1
-      }], {
-        duration: ITEM_OPACITY_DURATION,
-        delay: DELAY_BETWEEN_ITEMS * i
-      });
-      // Make them all initially hidden and then clean up at the end of each
-      // animation.
-      child.classList.toggle('md-menu-hidden', true);
-      animation.addEventListener('finish', () => {
-        child.classList.toggle('md-menu-hidden', false);
-      });
-      childrenAnimations.push([child, animation]);
-    }
-    let resolveAnimation = value => {};
-    const animationFinished = new Promise(resolve => {
-      resolveAnimation = resolve;
-    });
-    signal.addEventListener('abort', () => {
-      surfaceHeightAnimation.cancel();
-      upPositionCorrectionAnimation.cancel();
-      surfaceOpacityAnimation.cancel();
-      childrenAnimations.forEach(([child, animation]) => {
-        child.classList.toggle('md-menu-hidden', false);
-        animation.cancel();
-      });
-      resolveAnimation(true);
-    });
-    surfaceHeightAnimation.addEventListener('finish', () => {
-      surfaceEl.classList.toggle('animating', false);
-      this.openCloseAnimationSignal.finish();
-      resolveAnimation(false);
-    });
-    return await animationFinished;
-  }
-  /**
-   * Performs the closing animation:
-   *
-   * https://direct.googleplex.com/#/spec/295000003+271060003
-   */
-  animateClose() {
-    let resolve;
-    // This promise blocks the surface position controller from setting
-    // display: none on the surface which will interfere with this animation.
-    const animationEnded = new Promise(res => {
-      resolve = res;
-    });
-    const surfaceEl = this.surfaceEl;
-    const slotEl = this.slotEl;
-    if (!surfaceEl || !slotEl) {
-      resolve(false);
-      return animationEnded;
-    }
-    const openDirection = this.openDirection;
-    const closingDownwards = openDirection === 'UP';
-    this.dispatchEvent(new Event('closing'));
-    // needs to be imperative because we don't want to mix animation and Lit
-    // render timing
-    surfaceEl.classList.toggle('animating', true);
-    const signal = this.openCloseAnimationSignal.start();
-    const height = surfaceEl.offsetHeight;
-    const children = this.items;
-    const FULL_DURATION = 150;
-    const SURFACE_OPACITY_DURATION = 50;
-    // The surface fades away at the very end
-    const SURFACE_OPACITY_DELAY = FULL_DURATION - SURFACE_OPACITY_DURATION;
-    const ITEM_OPACITY_DURATION = 50;
-    const ITEM_OPACITY_INITIAL_DELAY = 50;
-    const END_HEIGHT_PERCENTAGE = 0.35;
-    // We want to fit every child fade-out animation within the full duration of
-    // the animation.
-    const DELAY_BETWEEN_ITEMS = (FULL_DURATION - ITEM_OPACITY_INITIAL_DELAY - ITEM_OPACITY_DURATION) / children.length;
-    // The mock has the animation shrink to 35%
-    const surfaceHeightAnimation = surfaceEl.animate([{
-      height: `${height}px`
-    }, {
-      height: `${height * END_HEIGHT_PERCENTAGE}px`
-    }], {
-      duration: FULL_DURATION,
-      easing: EASING.EMPHASIZED_ACCELERATE
-    });
-    // When we are closing downwards, we want to make sure the last item is
-    // always in view, so we need to translate it upwards the opposite direction
-    // of the height animation
-    const downPositionCorrectionAnimation = slotEl.animate([{
-      transform: ''
-    }, {
-      transform: closingDownwards ? `translateY(-${height * (1 - END_HEIGHT_PERCENTAGE)}px)` : ''
-    }], {
-      duration: FULL_DURATION,
-      easing: EASING.EMPHASIZED_ACCELERATE
-    });
-    const surfaceOpacityAnimation = surfaceEl.animate([{
-      opacity: 1
-    }, {
-      opacity: 0
-    }], {
-      duration: SURFACE_OPACITY_DURATION,
-      delay: SURFACE_OPACITY_DELAY
-    });
-    const childrenAnimations = [];
-    for (let i = 0; i < children.length; i++) {
-      // If the animation is closing upwards, then reverse the list of
-      // children so that we animate in the opposite direction.
-      const directionalIndex = closingDownwards ? i : children.length - 1 - i;
-      const child = children[directionalIndex];
-      const animation = child.animate([{
-        opacity: 1
-      }, {
-        opacity: 0
-      }], {
-        duration: ITEM_OPACITY_DURATION,
-        delay: ITEM_OPACITY_INITIAL_DELAY + DELAY_BETWEEN_ITEMS * i
-      });
-      // Make sure the items stay hidden at the end of each child animation.
-      // We clean this up at the end of the overall animation.
-      animation.addEventListener('finish', () => {
-        child.classList.toggle('md-menu-hidden', true);
-      });
-      childrenAnimations.push([child, animation]);
-    }
-    signal.addEventListener('abort', () => {
-      surfaceHeightAnimation.cancel();
-      downPositionCorrectionAnimation.cancel();
-      surfaceOpacityAnimation.cancel();
-      childrenAnimations.forEach(([child, animation]) => {
-        animation.cancel();
-        child.classList.toggle('md-menu-hidden', false);
-      });
-      resolve(false);
-    });
-    surfaceHeightAnimation.addEventListener('finish', () => {
-      surfaceEl.classList.toggle('animating', false);
-      childrenAnimations.forEach(([child]) => {
-        child.classList.toggle('md-menu-hidden', false);
-      });
-      this.openCloseAnimationSignal.finish();
-      this.dispatchEvent(new Event('closed'));
-      resolve(true);
-    });
-    return animationEnded;
-  }
-  handleKeydown(event) {
-    // At any key event, the pointer interaction is done so we need to clear our
-    // cached pointerpath. This handles the case where the user clicks on the
-    // anchor, and then hits shift+tab
-    this.pointerPath = [];
-    this.listController.handleKeydown(event);
-  }
-  setUpGlobalEventListeners() {
-    document.addEventListener('click', this.onDocumentClick, {
-      capture: true
-    });
-    window.addEventListener('pointerdown', this.onWindowPointerdown);
-    document.addEventListener('resize', this.onWindowResize, {
-      passive: true
-    });
-    window.addEventListener('resize', this.onWindowResize, {
-      passive: true
-    });
-  }
-  cleanUpGlobalEventListeners() {
-    document.removeEventListener('click', this.onDocumentClick, {
-      capture: true
-    });
-    window.removeEventListener('pointerdown', this.onWindowPointerdown);
-    document.removeEventListener('resize', this.onWindowResize);
-    window.removeEventListener('resize', this.onWindowResize);
-  }
-  onCloseMenu() {
-    this.close();
-  }
-  onDeactivateItems(event) {
-    event.stopPropagation();
-    this.listController.onDeactivateItems();
-  }
-  onRequestActivation(event) {
-    event.stopPropagation();
-    this.listController.onRequestActivation(event);
-  }
-  handleDeactivateTypeahead(event) {
-    // stopPropagation so that this does not deactivate any typeaheads in menus
-    // nested above it e.g. md-sub-menu
-    event.stopPropagation();
-    this.typeaheadActive = false;
-  }
-  handleActivateTypeahead(event) {
-    // stopPropagation so that this does not activate any typeaheads in menus
-    // nested above it e.g. md-sub-menu
-    event.stopPropagation();
-    this.typeaheadActive = true;
-  }
-  handleStayOpenOnFocusout(event) {
-    event.stopPropagation();
-    this.stayOpenOnFocusout = true;
-  }
-  handleCloseOnFocusout(event) {
-    event.stopPropagation();
-    this.stayOpenOnFocusout = false;
-  }
-  close() {
-    this.open = false;
-    const maybeSubmenu = this.slotItems;
-    maybeSubmenu.forEach(item => {
-      var _item$close;
-      (_item$close = item.close) === null || _item$close === void 0 || _item$close.call(item);
-    });
-  }
-  show() {
-    this.open = true;
-  }
-  /**
-   * Activates the next item in the menu. If at the end of the menu, the first
-   * item will be activated.
-   *
-   * @return The activated menu item or `null` if there are no items.
-   */
-  activateNextItem() {
-    return this.listController.activateNextItem() ?? null;
-  }
-  /**
-   * Activates the previous item in the menu. If at the start of the menu, the
-   * last item will be activated.
-   *
-   * @return The activated menu item or `null` if there are no items.
-   */
-  activatePreviousItem() {
-    return this.listController.activatePreviousItem() ?? null;
-  }
-  /**
-   * Repositions the menu if it is open.
-   *
-   * Useful for the case where document or window-positioned menus have their
-   * anchors moved while open.
-   */
-  reposition() {
-    if (this.open) {
-      this.menuPositionController.position();
-    }
-  }
-}
-__decorate([e$1('.menu')], Menu.prototype, "surfaceEl", void 0);
-__decorate([e$1('slot')], Menu.prototype, "slotEl", void 0);
-__decorate([n$1()], Menu.prototype, "anchor", void 0);
-__decorate([n$1()], Menu.prototype, "positioning", void 0);
-__decorate([n$1({
-  type: Boolean
-})], Menu.prototype, "quick", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'has-overflow'
-})], Menu.prototype, "hasOverflow", void 0);
-__decorate([n$1({
-  type: Boolean,
-  reflect: true
-})], Menu.prototype, "open", void 0);
-__decorate([n$1({
-  type: Number,
-  attribute: 'x-offset'
-})], Menu.prototype, "xOffset", void 0);
-__decorate([n$1({
-  type: Number,
-  attribute: 'y-offset'
-})], Menu.prototype, "yOffset", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'no-horizontal-flip'
-})], Menu.prototype, "noHorizontalFlip", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'no-vertical-flip'
-})], Menu.prototype, "noVerticalFlip", void 0);
-__decorate([n$1({
-  type: Number,
-  attribute: 'typeahead-delay'
-})], Menu.prototype, "typeaheadDelay", void 0);
-__decorate([n$1({
-  attribute: 'anchor-corner'
-})], Menu.prototype, "anchorCorner", void 0);
-__decorate([n$1({
-  attribute: 'menu-corner'
-})], Menu.prototype, "menuCorner", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'stay-open-on-outside-click'
-})], Menu.prototype, "stayOpenOnOutsideClick", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'stay-open-on-focusout'
-})], Menu.prototype, "stayOpenOnFocusout", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'skip-restore-focus'
-})], Menu.prototype, "skipRestoreFocus", void 0);
-__decorate([n$1({
-  attribute: 'default-focus'
-})], Menu.prototype, "defaultFocus", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'no-navigation-wrap'
-})], Menu.prototype, "noNavigationWrap", void 0);
-__decorate([o({
-  flatten: true
-})], Menu.prototype, "slotItems", void 0);
-__decorate([r()], Menu.prototype, "typeaheadActive", void 0);
-
-/**
- * @license
- * Copyright 2024 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// Generated stylesheet for ./menu/internal/menu-styles.css.
-const styles$3 = i$1`:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px))}.menu{border-radius:var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px));display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);color:inherit;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit;scrollbar-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit;scrollbar-width:inherit}.item-padding{padding-block:var(--md-menu-top-space, 8px) var(--md-menu-bottom-space, 8px)}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}
-`;
-
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * @summary Menus display a list of choices on a temporary surface.
- *
- * @description
- * Menus appear when users interact with a button, action, or other control.
- *
- * They can be opened from a variety of elements, most commonly icon buttons,
- * buttons, and text fields.
- *
- * md-menu listens for the `close-menu` and `deselect-items` events.
- *
- * - `close-menu` closes the menu when dispatched from a child element.
- * - `deselect-items` deselects all of its immediate menu-item children.
- *
- * @example
- * ```html
- * <div style="position:relative;">
- *   <button
- *       id="anchor"
- *       @click=${() => this.menuRef.value.show()}>
- *     Click to open menu
- *   </button>
- *   <!--
- *     `has-overflow` is required when using a submenu which overflows the
- *     menu's contents.
- *
- *     Additionally, `anchor` ingests an idref which do not pass through shadow
- *     roots. You can also set `.anchorElement` to an element reference if
- *     necessary.
- *   -->
- *   <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
- *     <md-menu-item headline="This is a headline"></md-menu-item>
- *     <md-sub-menu>
- *       <md-menu-item
- *           slot="item"
- *           headline="this is a submenu item">
- *       </md-menu-item>
- *       <md-menu slot="menu">
- *         <md-menu-item headline="This is an item inside a submenu">
- *         </md-menu-item>
- *       </md-menu>
- *     </md-sub-menu>
- *   </md-menu>
- * </div>
- * ```
- *
- * @final
- * @suppress {visibility}
- */
-let MdMenu = class MdMenu extends Menu {};
-MdMenu.styles = [styles$3];
-MdMenu = __decorate([t('md-menu')], MdMenu);
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * A validator that provides constraint validation that emulates `<select>`
- * validation.
- */
-class SelectValidator extends Validator {
-  computeValidity(state) {
-    if (!this.selectControl) {
-      // Lazily create the platform select
-      this.selectControl = document.createElement('select');
-    }
-    D(b`<option value=${state.value}></option>`, this.selectControl);
-    this.selectControl.value = state.value;
-    this.selectControl.required = state.required;
-    return {
-      validity: this.selectControl.validity,
-      validationMessage: this.selectControl.validationMessage
-    };
-  }
-  equals(prev, next) {
-    return prev.value === next.value && prev.required === next.required;
-  }
-  copy({
-    value,
-    required
-  }) {
-    return {
-      value,
-      required
-    };
-  }
-}
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * Given a list of select options, this function will return an array of
- * SelectOptionRecords that are selected.
- *
- * @return An array of SelectOptionRecords describing the options that are
- * selected.
- */
-function getSelectedItems(items) {
-  const selectedItemRecords = [];
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i];
-    if (item.selected) {
-      selectedItemRecords.push([item, i]);
-    }
-  }
-  return selectedItemRecords;
-}
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-var _a;
-const VALUE = Symbol('value');
-// Separate variable needed for closure.
-const selectBaseClass = mixinDelegatesAria(mixinOnReportValidity(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(i)))));
-/**
- * @fires change {Event} The native `change` event on
- * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
- * --bubbles
- * @fires input {InputEvent} The native `input` event on
- * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
- * --bubbles --composed
- * @fires opening {Event} Fired when the select's menu is about to open.
- * @fires opened {Event} Fired when the select's menu has finished animations
- * and opened.
- * @fires closing {Event} Fired when the select's menu is about to close.
- * @fires closed {Event} Fired when the select's menu has finished animations
- * and closed.
- */
-class Select extends selectBaseClass {
-  /**
-   * The value of the currently selected option.
-   *
-   * Note: For SSR, set `[selected]` on the requested option and `displayText`
-   * rather than setting `value` setting `value` will incur a DOM query.
-   */
-  get value() {
-    return this[VALUE];
-  }
-  set value(value) {
-    this.lastUserSetValue = value;
-    this.select(value);
-  }
-  get options() {
-    var _this$menu;
-    // NOTE: this does a DOM query.
-    return ((_this$menu = this.menu) === null || _this$menu === void 0 ? void 0 : _this$menu.items) ?? [];
-  }
-  /**
-   * The index of the currently selected option.
-   *
-   * Note: For SSR, set `[selected]` on the requested option and `displayText`
-   * rather than setting `selectedIndex` setting `selectedIndex` will incur a
-   * DOM query.
-   */
-  get selectedIndex() {
-    // tslint:disable-next-line:enforce-name-casing
-    const [_option, index] = (this.getSelectedOptions() ?? [])[0] ?? [];
-    return index ?? -1;
-  }
-  set selectedIndex(index) {
-    this.lastUserSetSelectedIndex = index;
-    this.selectIndex(index);
-  }
-  /**
-   * Returns an array of selected options.
-   *
-   * NOTE: md-select only supports single selection.
-   */
-  get selectedOptions() {
-    return (this.getSelectedOptions() ?? []).map(([option]) => option);
-  }
-  get hasError() {
-    return this.error || this.nativeError;
-  }
-  constructor() {
-    super();
-    /**
-     * Opens the menu synchronously with no animation.
-     */
-    this.quick = false;
-    /**
-     * Whether or not the select is required.
-     */
-    this.required = 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 label for the field.
-     */
-    this.label = '';
-    /**
-     * Disables the asterisk on the floating label, when the select is
-     * required.
-     */
-    this.noAsterisk = false;
-    /**
-     * Conveys additional information below the select, such as how it should
-     * be used.
-     */
-    this.supportingText = '';
-    /**
-     * Gets or sets whether or not the select is in a visually invalid state.
-     *
-     * This error state overrides the error state controlled by
-     * `reportValidity()`.
-     */
-    this.error = false;
-    /**
-     * Whether or not the underlying md-menu should be position: fixed to display
-     * in a top-level manner, or position: absolute.
-     *
-     * position:fixed is useful for cases where select is inside of another
-     * element with stacking context and hidden overflows such as `md-dialog`.
-     */
-    this.menuPositioning = 'popover';
-    /**
-     * Clamps the menu-width to the width of the select.
-     */
-    this.clampMenuWidth = false;
-    /**
-     * The max time between the keystrokes of the typeahead select / menu behavior
-     * before it clears the typeahead buffer.
-     */
-    this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;
-    /**
-     * Whether or not the text field has a leading icon. Used for SSR.
-     */
-    this.hasLeadingIcon = false;
-    /**
-     * Text to display in the field. Only set for SSR.
-     */
-    this.displayText = '';
-    /**
-     * Whether the menu should be aligned to the start or the end of the select's
-     * textbox.
-     */
-    this.menuAlign = 'start';
-    this[_a] = '';
-    /**
-     * Used for initializing select when the user sets the `value` directly.
-     */
-    this.lastUserSetValue = null;
-    /**
-     * Used for initializing select when the user sets the `selectedIndex`
-     * directly.
-     */
-    this.lastUserSetSelectedIndex = null;
-    /**
-     * Used for `input` and `change` event change detection.
-     */
-    this.lastSelectedOption = null;
-    // tslint:disable-next-line:enforce-name-casing
-    this.lastSelectedOptionRecords = [];
-    /**
-     * 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 = '';
-    this.focused = false;
-    this.open = false;
-    this.defaultFocus = FocusState.NONE;
-    // Have to keep track of previous open because it's state and private and thus
-    // cannot be tracked in PropertyValues<this> map.
-    this.prevOpen = this.open;
-    this.selectWidth = 0;
-    this.addEventListener('focus', this.handleFocus.bind(this));
-    this.addEventListener('blur', this.handleBlur.bind(this));
-  }
-  /**
-   * Selects an option given the value of the option, and updates MdSelect's
-   * value.
-   */
-  select(value) {
-    const optionToSelect = this.options.find(option => option.value === value);
-    if (optionToSelect) {
-      this.selectItem(optionToSelect);
-    }
-  }
-  /**
-   * Selects an option given the index of the option, and updates MdSelect's
-   * value.
-   */
-  selectIndex(index) {
-    const optionToSelect = this.options[index];
-    if (optionToSelect) {
-      this.selectItem(optionToSelect);
-    }
-  }
-  /**
-   * Reset the select to its default value.
-   */
-  reset() {
-    for (const option of this.options) {
-      option.selected = option.hasAttribute('selected');
-    }
-    this.updateValueAndDisplayText();
-    this.nativeError = false;
-    this.nativeErrorText = '';
-  }
-  /** Shows the picker. If it's already open, this is a no-op. */
-  showPicker() {
-    this.open = true;
-  }
-  [(_a = VALUE, 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();
-    }
-  }
-  update(changed) {
-    // In SSR the options will be ready to query, so try to figure out what
-    // the value and display text should be.
-    if (!this.hasUpdated) {
-      this.initUserSelection();
-    }
-    // We have just opened the menu.
-    // We are only able to check for the select's rect in `update()` instead of
-    // having to wait for `updated()` because the menu can never be open on
-    // first render since it is not settable and Lit SSR does not support click
-    // events which would open the menu.
-    if (this.prevOpen !== this.open && this.open) {
-      const selectRect = this.getBoundingClientRect();
-      this.selectWidth = selectRect.width;
-    }
-    this.prevOpen = this.open;
-    super.update(changed);
-  }
-  render() {
-    return b`
-      <span
-        class="select ${e$2(this.getRenderClasses())}"
-        @focusout=${this.handleFocusout}>
-        ${this.renderField()} ${this.renderMenu()}
-      </span>
-    `;
-  }
-  async firstUpdated(changed) {
-    var _this$menu2;
-    await ((_this$menu2 = this.menu) === null || _this$menu2 === void 0 ? void 0 : _this$menu2.updateComplete);
-    // If this has been handled on update already due to SSR, try again.
-    if (!this.lastSelectedOptionRecords.length) {
-      this.initUserSelection();
-    }
-    // Case for when the DOM is streaming, there are no children, and a child
-    // has [selected] set on it, we need to wait for DOM to render something.
-    if (!this.lastSelectedOptionRecords.length && true && !this.options.length) {
-      setTimeout(() => {
-        this.updateValueAndDisplayText();
-      });
-    }
-    super.firstUpdated(changed);
-  }
-  getRenderClasses() {
-    return {
-      'disabled': this.disabled,
-      'error': this.error,
-      'open': this.open
-    };
-  }
-  renderField() {
-    const ariaLabel = this.ariaLabel || this.label;
-    return u`
-      <${this.fieldTag}
-          aria-haspopup="listbox"
-          role="combobox"
-          part="field"
-          id="field"
-          tabindex=${this.disabled ? '-1' : '0'}
-          aria-label=${ariaLabel || A}
-          aria-describedby="description"
-          aria-expanded=${this.open ? 'true' : 'false'}
-          aria-controls="listbox"
-          class="field"
-          label=${this.label}
-          ?no-asterisk=${this.noAsterisk}
-          .focused=${this.focused || this.open}
-          .populated=${!!this.displayText}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          .error=${this.hasError}
-          ?has-start=${this.hasLeadingIcon}
-          has-end
-          supporting-text=${this.supportingText}
-          error-text=${this.getErrorText()}
-          @keydown=${this.handleKeydown}
-          @click=${this.handleClick}>
-         ${this.renderFieldContent()}
-         <div id="description" slot="aria-describedby"></div>
-      </${this.fieldTag}>`;
-  }
-  renderFieldContent() {
-    return [this.renderLeadingIcon(), this.renderLabel(), this.renderTrailingIcon()];
-  }
-  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}>
-          <svg height="5" viewBox="7 10 10 5" focusable="false">
-            <polygon
-              class="down"
-              stroke="none"
-              fill-rule="evenodd"
-              points="7 10 12 15 17 10"></polygon>
-            <polygon
-              class="up"
-              stroke="none"
-              fill-rule="evenodd"
-              points="7 15 12 10 17 15"></polygon>
-          </svg>
-        </slot>
-      </span>
-    `;
-  }
-  renderLabel() {
-    // need to render &nbsp; so that line-height can apply and give it a
-    // non-zero height
-    return b`<div id="label">${this.displayText || b`&nbsp;`}</div>`;
-  }
-  renderMenu() {
-    const ariaLabel = this.label || this.ariaLabel;
-    return b`<div class="menu-wrapper">
-      <md-menu
-        id="listbox"
-        .defaultFocus=${this.defaultFocus}
-        role="listbox"
-        tabindex="-1"
-        aria-label=${ariaLabel || A}
-        stay-open-on-focusout
-        part="menu"
-        exportparts="focus-ring: menu-focus-ring"
-        anchor="field"
-        style=${o$1({
-      '--__menu-min-width': `${this.selectWidth}px`,
-      '--__menu-max-width': this.clampMenuWidth ? `${this.selectWidth}px` : undefined
-    })}
-        no-navigation-wrap
-        .open=${this.open}
-        .quick=${this.quick}
-        .positioning=${this.menuPositioning}
-        .typeaheadDelay=${this.typeaheadDelay}
-        .anchorCorner=${this.menuAlign === 'start' ? 'end-start' : 'end-end'}
-        .menuCorner=${this.menuAlign === 'start' ? 'start-start' : 'start-end'}
-        @opening=${this.handleOpening}
-        @opened=${this.redispatchEvent}
-        @closing=${this.redispatchEvent}
-        @closed=${this.handleClosed}
-        @close-menu=${this.handleCloseMenu}
-        @request-selection=${this.handleRequestSelection}
-        @request-deselection=${this.handleRequestDeselection}>
-        ${this.renderMenuContent()}
-      </md-menu>
-    </div>`;
-  }
-  renderMenuContent() {
-    return b`<slot></slot>`;
-  }
-  /**
-   * Handles opening the select on keydown and typahead selection when the menu
-   * is closed.
-   */
-  handleKeydown(event) {
-    if (this.open || this.disabled || !this.menu) {
-      return;
-    }
-    const typeaheadController = this.menu.typeaheadController;
-    const isOpenKey = event.code === 'Space' || event.code === 'ArrowDown' || event.code === 'ArrowUp' || event.code === 'End' || event.code === 'Home' || event.code === 'Enter';
-    // Do not open if currently typing ahead because the user may be typing the
-    // spacebar to match a word with a space
-    if (!typeaheadController.isTypingAhead && isOpenKey) {
-      event.preventDefault();
-      this.open = true;
-      // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/#kbd_label
-      switch (event.code) {
-        case 'Space':
-        case 'ArrowDown':
-        case 'Enter':
-          // We will handle focusing last selected item in this.handleOpening()
-          this.defaultFocus = FocusState.NONE;
-          break;
-        case 'End':
-          this.defaultFocus = FocusState.LAST_ITEM;
-          break;
-        case 'ArrowUp':
-        case 'Home':
-          this.defaultFocus = FocusState.FIRST_ITEM;
-          break;
-      }
-      return;
-    }
-    const isPrintableKey = event.key.length === 1;
-    // Handles typing ahead when the menu is closed by delegating the event to
-    // the underlying menu's typeaheadController
-    if (isPrintableKey) {
-      var _this$labelEl, _this$labelEl$setAttr;
-      typeaheadController.onKeydown(event);
-      event.preventDefault();
-      const {
-        lastActiveRecord
-      } = typeaheadController;
-      if (!lastActiveRecord) {
-        return;
-      }
-      (_this$labelEl = this.labelEl) === null || _this$labelEl === void 0 || (_this$labelEl$setAttr = _this$labelEl.setAttribute) === null || _this$labelEl$setAttr === void 0 || _this$labelEl$setAttr.call(_this$labelEl, 'aria-live', 'polite');
-      const hasChanged = this.selectItem(lastActiveRecord[TYPEAHEAD_RECORD.ITEM]);
-      if (hasChanged) {
-        this.dispatchInteractionEvents();
-      }
-    }
-  }
-  handleClick() {
-    this.open = !this.open;
-  }
-  handleFocus() {
-    this.focused = true;
-  }
-  handleBlur() {
-    this.focused = false;
-  }
-  /**
-   * Handles closing the menu when the focus leaves the select's subtree.
-   */
-  handleFocusout(event) {
-    // Don't close the menu if we are switching focus between menu,
-    // select-option, and field
-    if (event.relatedTarget && isElementInSubtree(event.relatedTarget, this)) {
-      return;
-    }
-    this.open = false;
-  }
-  /**
-   * Gets a list of all selected select options as a list item record array.
-   *
-   * @return An array of selected list option records.
-   */
-  getSelectedOptions() {
-    if (!this.menu) {
-      this.lastSelectedOptionRecords = [];
-      return null;
-    }
-    const items = this.menu.items;
-    this.lastSelectedOptionRecords = getSelectedItems(items);
-    return this.lastSelectedOptionRecords;
-  }
-  async getUpdateComplete() {
-    var _this$menu3;
-    await ((_this$menu3 = this.menu) === null || _this$menu3 === void 0 ? void 0 : _this$menu3.updateComplete);
-    return super.getUpdateComplete();
-  }
-  /**
-   * Gets the selected options from the DOM, and updates the value and display
-   * text to the first selected option's value and headline respectively.
-   *
-   * @return Whether or not the selected option has changed since last update.
-   */
-  updateValueAndDisplayText() {
-    const selectedOptions = this.getSelectedOptions() ?? [];
-    // Used to determine whether or not we need to fire an input / change event
-    // which fire whenever the option element changes (value or selectedIndex)
-    // on user interaction.
-    let hasSelectedOptionChanged = false;
-    if (selectedOptions.length) {
-      const [firstSelectedOption] = selectedOptions[0];
-      hasSelectedOptionChanged = this.lastSelectedOption !== firstSelectedOption;
-      this.lastSelectedOption = firstSelectedOption;
-      this[VALUE] = firstSelectedOption.value;
-      this.displayText = firstSelectedOption.displayText;
-    } else {
-      hasSelectedOptionChanged = this.lastSelectedOption !== null;
-      this.lastSelectedOption = null;
-      this[VALUE] = '';
-      this.displayText = '';
-    }
-    return hasSelectedOptionChanged;
-  }
-  /**
-   * Focuses and activates the last selected item upon opening, and resets other
-   * active items.
-   */
-  async handleOpening(e) {
-    var _this$labelEl2, _this$labelEl2$remove, _getActiveItem;
-    (_this$labelEl2 = this.labelEl) === null || _this$labelEl2 === void 0 || (_this$labelEl2$remove = _this$labelEl2.removeAttribute) === null || _this$labelEl2$remove === void 0 || _this$labelEl2$remove.call(_this$labelEl2, 'aria-live');
-    this.redispatchEvent(e);
-    // FocusState.NONE means we want to handle focus ourselves and focus the
-    // last selected item.
-    if (this.defaultFocus !== FocusState.NONE) {
-      return;
-    }
-    const items = this.menu.items;
-    const activeItem = (_getActiveItem = getActiveItem(items)) === null || _getActiveItem === void 0 ? void 0 : _getActiveItem.item;
-    let [selectedItem] = this.lastSelectedOptionRecords[0] ?? [null];
-    // This is true if the user keys through the list but clicks out of the menu
-    // thus no close-menu event is fired by an item and we can't clean up in
-    // handleCloseMenu.
-    if (activeItem && activeItem !== selectedItem) {
-      activeItem.tabIndex = -1;
-    }
-    // in the case that nothing is selected, focus the first item
-    selectedItem = selectedItem ?? items[0];
-    if (selectedItem) {
-      selectedItem.tabIndex = 0;
-      selectedItem.focus();
-    }
-  }
-  redispatchEvent(e) {
-    redispatchEvent(this, e);
-  }
-  handleClosed(e) {
-    this.open = false;
-    this.redispatchEvent(e);
-  }
-  /**
-   * Determines the reason for closing, and updates the UI accordingly.
-   */
-  handleCloseMenu(event) {
-    const reason = event.detail.reason;
-    const item = event.detail.itemPath[0];
-    this.open = false;
-    let hasChanged = false;
-    if (reason.kind === 'click-selection') {
-      hasChanged = this.selectItem(item);
-    } else if (reason.kind === 'keydown' && isSelectableKey(reason.key)) {
-      hasChanged = this.selectItem(item);
-    } else {
-      // This can happen on ESC being pressed
-      item.tabIndex = -1;
-      item.blur();
-    }
-    // Dispatch interaction events since selection has been made via keyboard
-    // or mouse.
-    if (hasChanged) {
-      this.dispatchInteractionEvents();
-    }
-  }
-  /**
-   * Selects a given option, deselects other options, and updates the UI.
-   *
-   * @return Whether the last selected option has changed.
-   */
-  selectItem(item) {
-    const selectedOptions = this.getSelectedOptions() ?? [];
-    selectedOptions.forEach(([option]) => {
-      if (item !== option) {
-        option.selected = false;
-      }
-    });
-    item.selected = true;
-    return this.updateValueAndDisplayText();
-  }
-  /**
-   * Handles updating selection when an option element requests selection via
-   * property / attribute change.
-   */
-  handleRequestSelection(event) {
-    const requestingOptionEl = event.target;
-    // No-op if this item is already selected.
-    if (this.lastSelectedOptionRecords.some(([option]) => option === requestingOptionEl)) {
-      return;
-    }
-    this.selectItem(requestingOptionEl);
-  }
-  /**
-   * Handles updating selection when an option element requests deselection via
-   * property / attribute change.
-   */
-  handleRequestDeselection(event) {
-    const requestingOptionEl = event.target;
-    // No-op if this item is not even in the list of tracked selected items.
-    if (!this.lastSelectedOptionRecords.some(([option]) => option === requestingOptionEl)) {
-      return;
-    }
-    this.updateValueAndDisplayText();
-  }
-  /**
-   * Attempts to initialize the selected option from user-settable values like
-   * SSR, setting `value`, or `selectedIndex` at startup.
-   */
-  initUserSelection() {
-    // User has set `.value` directly, but internals have not yet booted up.
-    if (this.lastUserSetValue && !this.lastSelectedOptionRecords.length) {
-      this.select(this.lastUserSetValue);
-      // User has set `.selectedIndex` directly, but internals have not yet
-      // booted up.
-    } else if (this.lastUserSetSelectedIndex !== null && !this.lastSelectedOptionRecords.length) {
-      this.selectIndex(this.lastUserSetSelectedIndex);
-      // Regular boot up!
-    } else {
-      this.updateValueAndDisplayText();
-    }
-  }
-  handleIconChange() {
-    this.hasLeadingIcon = this.leadingIcons.length > 0;
-  }
-  /**
-   * Dispatches the `input` and `change` events.
-   */
-  dispatchInteractionEvents() {
-    this.dispatchEvent(new Event('input', {
-      bubbles: true,
-      composed: true
-    }));
-    this.dispatchEvent(new Event('change', {
-      bubbles: true
-    }));
-  }
-  getErrorText() {
-    return this.error ? this.errorText : this.nativeErrorText;
-  }
-  [getFormValue]() {
-    return this.value;
-  }
-  formResetCallback() {
-    this.reset();
-  }
-  formStateRestoreCallback(state) {
-    this.value = state;
-  }
-  click() {
-    var _this$field2;
-    (_this$field2 = this.field) === null || _this$field2 === void 0 || _this$field2.click();
-  }
-  [createValidator]() {
-    return new SelectValidator(() => this);
-  }
-  [getValidityAnchor]() {
-    return this.field;
-  }
-}
-/** @nocollapse */
-Select.shadowRootOptions = {
-  ...i.shadowRootOptions,
-  delegatesFocus: true
-};
-__decorate([n$1({
-  type: Boolean
-})], Select.prototype, "quick", void 0);
-__decorate([n$1({
-  type: Boolean
-})], Select.prototype, "required", void 0);
-__decorate([n$1({
-  type: String,
-  attribute: 'error-text'
-})], Select.prototype, "errorText", void 0);
-__decorate([n$1()], Select.prototype, "label", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'no-asterisk'
-})], Select.prototype, "noAsterisk", void 0);
-__decorate([n$1({
-  type: String,
-  attribute: 'supporting-text'
-})], Select.prototype, "supportingText", void 0);
-__decorate([n$1({
-  type: Boolean,
-  reflect: true
-})], Select.prototype, "error", void 0);
-__decorate([n$1({
-  attribute: 'menu-positioning'
-})], Select.prototype, "menuPositioning", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'clamp-menu-width'
-})], Select.prototype, "clampMenuWidth", void 0);
-__decorate([n$1({
-  type: Number,
-  attribute: 'typeahead-delay'
-})], Select.prototype, "typeaheadDelay", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'has-leading-icon'
-})], Select.prototype, "hasLeadingIcon", void 0);
-__decorate([n$1({
-  attribute: 'display-text'
-})], Select.prototype, "displayText", void 0);
-__decorate([n$1({
-  attribute: 'menu-align'
-})], Select.prototype, "menuAlign", void 0);
-__decorate([n$1()], Select.prototype, "value", null);
-__decorate([n$1({
-  type: Number,
-  attribute: 'selected-index'
-})], Select.prototype, "selectedIndex", null);
-__decorate([r()], Select.prototype, "nativeError", void 0);
-__decorate([r()], Select.prototype, "nativeErrorText", void 0);
-__decorate([r()], Select.prototype, "focused", void 0);
-__decorate([r()], Select.prototype, "open", void 0);
-__decorate([r()], Select.prototype, "defaultFocus", void 0);
-__decorate([e$1('.field')], Select.prototype, "field", void 0);
-__decorate([e$1('md-menu')], Select.prototype, "menu", void 0);
-__decorate([e$1('#label')], Select.prototype, "labelEl", void 0);
-__decorate([o({
-  slot: 'leading-icon',
-  flatten: true
-})], Select.prototype, "leadingIcons", void 0);
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// tslint:disable-next-line:enforce-comments-on-exported-symbols
-class OutlinedSelect extends Select {
-  constructor() {
-    super(...arguments);
-    this.fieldTag = i$2`md-outlined-field`;
-  }
-}
-
-/**
- * @license
- * Copyright 2024 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// Generated stylesheet for ./select/internal/outlined-select-styles.css.
-const styles$2 = i$1`:host{--_text-field-disabled-input-text-color: var(--md-outlined-select-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-input-text-opacity: var(--md-outlined-select-text-field-disabled-input-text-opacity, 0.38);--_text-field-disabled-label-text-color: var(--md-outlined-select-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-label-text-opacity: var(--md-outlined-select-text-field-disabled-label-text-opacity, 0.38);--_text-field-disabled-leading-icon-color: var(--md-outlined-select-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-leading-icon-opacity: var(--md-outlined-select-text-field-disabled-leading-icon-opacity, 0.38);--_text-field-disabled-outline-color: var(--md-outlined-select-text-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-outline-opacity: var(--md-outlined-select-text-field-disabled-outline-opacity, 0.12);--_text-field-disabled-outline-width: var(--md-outlined-select-text-field-disabled-outline-width, 1px);--_text-field-disabled-supporting-text-color: var(--md-outlined-select-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-supporting-text-opacity: var(--md-outlined-select-text-field-disabled-supporting-text-opacity, 0.38);--_text-field-disabled-trailing-icon-color: var(--md-outlined-select-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-trailing-icon-opacity: var(--md-outlined-select-text-field-disabled-trailing-icon-opacity, 0.38);--_text-field-error-focus-input-text-color: var(--md-outlined-select-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-focus-label-text-color: var(--md-outlined-select-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-leading-icon-color: var(--md-outlined-select-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-focus-outline-color: var(--md-outlined-select-text-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-supporting-text-color: var(--md-outlined-select-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-trailing-icon-color: var(--md-outlined-select-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-input-text-color: var(--md-outlined-select-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-hover-label-text-color: var(--md-outlined-select-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-leading-icon-color: var(--md-outlined-select-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-hover-outline-color: var(--md-outlined-select-text-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-supporting-text-color: var(--md-outlined-select-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-trailing-icon-color: var(--md-outlined-select-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-input-text-color: var(--md-outlined-select-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-label-text-color: var(--md-outlined-select-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-leading-icon-color: var(--md-outlined-select-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-outline-color: var(--md-outlined-select-text-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_text-field-error-supporting-text-color: var(--md-outlined-select-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-trailing-icon-color: var(--md-outlined-select-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-focus-input-text-color: var(--md-outlined-select-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-focus-label-text-color: var(--md-outlined-select-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-leading-icon-color: var(--md-outlined-select-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-outline-color: var(--md-outlined-select-text-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-outline-width: var(--md-outlined-select-text-field-focus-outline-width, 3px);--_text-field-focus-supporting-text-color: var(--md-outlined-select-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-trailing-icon-color: var(--md-outlined-select-text-field-focus-trailing-icon-color, var(--md-sys-color-primary, #6750a4));--_text-field-hover-input-text-color: var(--md-outlined-select-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-label-text-color: var(--md-outlined-select-text-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-leading-icon-color: var(--md-outlined-select-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-outline-color: var(--md-outlined-select-text-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-outline-width: var(--md-outlined-select-text-field-hover-outline-width, 1px);--_text-field-hover-supporting-text-color: var(--md-outlined-select-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-trailing-icon-color: var(--md-outlined-select-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-input-text-color: var(--md-outlined-select-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-input-text-font: var(--md-outlined-select-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-input-text-line-height: var(--md-outlined-select-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_text-field-input-text-size: var(--md-outlined-select-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_text-field-input-text-weight: var(--md-outlined-select-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-label-text-color: var(--md-outlined-select-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-label-text-font: var(--md-outlined-select-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-label-text-line-height: var(--md-outlined-select-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_text-field-label-text-populated-line-height: var(--md-outlined-select-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_text-field-label-text-populated-size: var(--md-outlined-select-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_text-field-label-text-size: var(--md-outlined-select-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_text-field-label-text-weight: var(--md-outlined-select-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-leading-icon-color: var(--md-outlined-select-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-leading-icon-size: var(--md-outlined-select-text-field-leading-icon-size, 24px);--_text-field-outline-color: var(--md-outlined-select-text-field-outline-color, var(--md-sys-color-outline, #79747e));--_text-field-outline-width: var(--md-outlined-select-text-field-outline-width, 1px);--_text-field-supporting-text-color: var(--md-outlined-select-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-supporting-text-font: var(--md-outlined-select-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-supporting-text-line-height: var(--md-outlined-select-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_text-field-supporting-text-size: var(--md-outlined-select-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_text-field-supporting-text-weight: var(--md-outlined-select-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-trailing-icon-color: var(--md-outlined-select-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-trailing-icon-size: var(--md-outlined-select-text-field-trailing-icon-size, 24px);--_text-field-container-shape-start-start: var(--md-outlined-select-text-field-container-shape-start-start, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-start-end: var(--md-outlined-select-text-field-container-shape-start-end, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-end-end: var(--md-outlined-select-text-field-container-shape-end-end, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-end-start: var(--md-outlined-select-text-field-container-shape-end-start, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--md-outlined-field-container-shape-end-end: var(--_text-field-container-shape-end-end);--md-outlined-field-container-shape-end-start: var(--_text-field-container-shape-end-start);--md-outlined-field-container-shape-start-end: var(--_text-field-container-shape-start-end);--md-outlined-field-container-shape-start-start: var(--_text-field-container-shape-start-start);--md-outlined-field-content-color: var(--_text-field-input-text-color);--md-outlined-field-content-font: var(--_text-field-input-text-font);--md-outlined-field-content-line-height: var(--_text-field-input-text-line-height);--md-outlined-field-content-size: var(--_text-field-input-text-size);--md-outlined-field-content-weight: var(--_text-field-input-text-weight);--md-outlined-field-disabled-content-color: var(--_text-field-disabled-input-text-color);--md-outlined-field-disabled-content-opacity: var(--_text-field-disabled-input-text-opacity);--md-outlined-field-disabled-label-text-color: var(--_text-field-disabled-label-text-color);--md-outlined-field-disabled-label-text-opacity: var(--_text-field-disabled-label-text-opacity);--md-outlined-field-disabled-leading-content-color: var(--_text-field-disabled-leading-icon-color);--md-outlined-field-disabled-leading-content-opacity: var(--_text-field-disabled-leading-icon-opacity);--md-outlined-field-disabled-outline-color: var(--_text-field-disabled-outline-color);--md-outlined-field-disabled-outline-opacity: var(--_text-field-disabled-outline-opacity);--md-outlined-field-disabled-outline-width: var(--_text-field-disabled-outline-width);--md-outlined-field-disabled-supporting-text-color: var(--_text-field-disabled-supporting-text-color);--md-outlined-field-disabled-supporting-text-opacity: var(--_text-field-disabled-supporting-text-opacity);--md-outlined-field-disabled-trailing-content-color: var(--_text-field-disabled-trailing-icon-color);--md-outlined-field-disabled-trailing-content-opacity: var(--_text-field-disabled-trailing-icon-opacity);--md-outlined-field-error-content-color: var(--_text-field-error-input-text-color);--md-outlined-field-error-focus-content-color: var(--_text-field-error-focus-input-text-color);--md-outlined-field-error-focus-label-text-color: var(--_text-field-error-focus-label-text-color);--md-outlined-field-error-focus-leading-content-color: var(--_text-field-error-focus-leading-icon-color);--md-outlined-field-error-focus-outline-color: var(--_text-field-error-focus-outline-color);--md-outlined-field-error-focus-supporting-text-color: var(--_text-field-error-focus-supporting-text-color);--md-outlined-field-error-focus-trailing-content-color: var(--_text-field-error-focus-trailing-icon-color);--md-outlined-field-error-hover-content-color: var(--_text-field-error-hover-input-text-color);--md-outlined-field-error-hover-label-text-color: var(--_text-field-error-hover-label-text-color);--md-outlined-field-error-hover-leading-content-color: var(--_text-field-error-hover-leading-icon-color);--md-outlined-field-error-hover-outline-color: var(--_text-field-error-hover-outline-color);--md-outlined-field-error-hover-supporting-text-color: var(--_text-field-error-hover-supporting-text-color);--md-outlined-field-error-hover-trailing-content-color: var(--_text-field-error-hover-trailing-icon-color);--md-outlined-field-error-label-text-color: var(--_text-field-error-label-text-color);--md-outlined-field-error-leading-content-color: var(--_text-field-error-leading-icon-color);--md-outlined-field-error-outline-color: var(--_text-field-error-outline-color);--md-outlined-field-error-supporting-text-color: var(--_text-field-error-supporting-text-color);--md-outlined-field-error-trailing-content-color: var(--_text-field-error-trailing-icon-color);--md-outlined-field-focus-content-color: var(--_text-field-focus-input-text-color);--md-outlined-field-focus-label-text-color: var(--_text-field-focus-label-text-color);--md-outlined-field-focus-leading-content-color: var(--_text-field-focus-leading-icon-color);--md-outlined-field-focus-outline-color: var(--_text-field-focus-outline-color);--md-outlined-field-focus-outline-width: var(--_text-field-focus-outline-width);--md-outlined-field-focus-supporting-text-color: var(--_text-field-focus-supporting-text-color);--md-outlined-field-focus-trailing-content-color: var(--_text-field-focus-trailing-icon-color);--md-outlined-field-hover-content-color: var(--_text-field-hover-input-text-color);--md-outlined-field-hover-label-text-color: var(--_text-field-hover-label-text-color);--md-outlined-field-hover-leading-content-color: var(--_text-field-hover-leading-icon-color);--md-outlined-field-hover-outline-color: var(--_text-field-hover-outline-color);--md-outlined-field-hover-outline-width: var(--_text-field-hover-outline-width);--md-outlined-field-hover-supporting-text-color: var(--_text-field-hover-supporting-text-color);--md-outlined-field-hover-trailing-content-color: var(--_text-field-hover-trailing-icon-color);--md-outlined-field-label-text-color: var(--_text-field-label-text-color);--md-outlined-field-label-text-font: var(--_text-field-label-text-font);--md-outlined-field-label-text-line-height: var(--_text-field-label-text-line-height);--md-outlined-field-label-text-populated-line-height: var(--_text-field-label-text-populated-line-height);--md-outlined-field-label-text-populated-size: var(--_text-field-label-text-populated-size);--md-outlined-field-label-text-size: var(--_text-field-label-text-size);--md-outlined-field-label-text-weight: var(--_text-field-label-text-weight);--md-outlined-field-leading-content-color: var(--_text-field-leading-icon-color);--md-outlined-field-outline-color: var(--_text-field-outline-color);--md-outlined-field-outline-width: var(--_text-field-outline-width);--md-outlined-field-supporting-text-color: var(--_text-field-supporting-text-color);--md-outlined-field-supporting-text-font: var(--_text-field-supporting-text-font);--md-outlined-field-supporting-text-line-height: var(--_text-field-supporting-text-line-height);--md-outlined-field-supporting-text-size: var(--_text-field-supporting-text-size);--md-outlined-field-supporting-text-weight: var(--_text-field-supporting-text-weight);--md-outlined-field-trailing-content-color: var(--_text-field-trailing-icon-color)}[has-start] .icon.leading{font-size:var(--_text-field-leading-icon-size);height:var(--_text-field-leading-icon-size);width:var(--_text-field-leading-icon-size)}.icon.trailing{font-size:var(--_text-field-trailing-icon-size);height:var(--_text-field-trailing-icon-size);width:var(--_text-field-trailing-icon-size)}
-`;
-
-/**
- * @license
- * Copyright 2024 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// Generated stylesheet for ./select/internal/shared-styles.css.
-const styles$1 = i$1`:host{color:unset;min-width:210px;display:flex}.field{cursor:default;outline:none}.select{position:relative;flex-direction:column}.icon.trailing svg,.icon ::slotted(*){fill:currentColor}.icon ::slotted(*){width:inherit;height:inherit;font-size:inherit}.icon slot{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.icon.trailing :is(.up,.down){opacity:0;transition:opacity 75ms linear 75ms}.select:not(.open) .down,.select.open .up{opacity:1}.field,.select,md-menu{min-width:inherit;width:inherit;max-width:inherit;display:flex}md-menu{min-width:var(--__menu-min-width);max-width:var(--__menu-max-width, inherit)}.menu-wrapper{width:0px;height:0px;max-width:inherit}md-menu ::slotted(:not[disabled]){cursor:pointer}.field,.select{width:100%}:host{display:inline-flex}:host([disabled]){pointer-events:none}
-`;
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * @summary
- * Select menus display a list of choices on temporary surfaces and display the
- * currently selected menu item above the menu.
- *
- * @description
- * The select component allows users to choose a value from a fixed list of
- * available options. Composed of an interactive anchor button and a menu, it is
- * analogous to the native HTML `<select>` element. This is the "outlined"
- * variant.
- *
- * @example
- * ```html
- * <md-outlined-select label="fruits">
- *   <!-- An empty selected option will give select an "un-filled" state -->
- *   <md-select-option selected></md-select-option>
- *   <md-select-option value="apple" headline="Apple"></md-select-option>
- *   <md-select-option value="banana" headline="Banana"></md-select-option>
- *   <md-select-option value="kiwi" headline="Kiwi"></md-select-option>
- *   <md-select-option value="orange" headline="Orange"></md-select-option>
- *   <md-select-option value="tomato" headline="Tomato"></md-select-option>
- * </md-outlined-select>
- * ```
- *
- * @final
- * @suppress {visibility}
- */
-let MdOutlinedSelect = class MdOutlinedSelect extends OutlinedSelect {};
-MdOutlinedSelect.styles = [styles$1, styles$2];
-MdOutlinedSelect = __decorate([t('md-outlined-select')], MdOutlinedSelect);
-
-/**
- * @license
- * Copyright 2024 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// Generated stylesheet for ./menu/internal/menuitem/menu-item-styles.css.
-const styles = i$1`:host{display:flex;--md-ripple-hover-color: var(--md-menu-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-menu-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-menu-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-menu-item-pressed-state-layer-opacity, 0.12)}:host([disabled]){opacity:var(--md-menu-item-disabled-opacity, 0.3);pointer-events:none}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled){cursor:pointer}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;color:var(--md-menu-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-menu-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-menu-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-menu-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-menu-item-one-line-container-height, 56px);padding-top:var(--md-menu-item-top-space, 12px);padding-bottom:var(--md-menu-item-bottom-space, 12px);padding-inline-start:var(--md-menu-item-leading-space, 16px);padding-inline-end:var(--md-menu-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-menu-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-menu-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-menu-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-menu-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-menu-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-menu-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-menu-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-menu-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-menu-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.list-item{background-color:var(--md-menu-item-container-color, transparent)}.list-item.selected{background-color:var(--md-menu-item-selected-container-color, var(--md-sys-color-secondary-container, #e8def8))}.selected:not(.disabled) ::slotted(*){color:var(--md-menu-item-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}@media(forced-colors: active){:host([disabled]),:host([disabled]) slot{color:GrayText;opacity:1}.list-item{position:relative}.list-item.selected::before{content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:3px double CanvasText}}
-`;
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * A controller that provides most functionality of an element that implements
- * the MenuItem interface.
- */
-class MenuItemController {
-  /**
-   * @param host The MenuItem in which to attach this controller to.
-   * @param config The object that configures this controller's behavior.
-   */
-  constructor(host, config) {
-    this.host = host;
-    this.internalTypeaheadText = null;
-    /**
-     * Bind this click listener to the interactive element. Handles closing the
-     * menu.
-     */
-    this.onClick = () => {
-      if (this.host.keepOpen) return;
-      this.host.dispatchEvent(createDefaultCloseMenuEvent(this.host, {
-        kind: CloseReason.CLICK_SELECTION
-      }));
-    };
-    /**
-     * Bind this click listener to the interactive element. Handles closing the
-     * menu.
-     */
-    this.onKeydown = event => {
-      // Check if the interactive element is an anchor tag. If so, click it.
-      if (this.host.href && event.code === 'Enter') {
-        const interactiveElement = this.getInteractiveElement();
-        if (interactiveElement instanceof HTMLAnchorElement) {
-          interactiveElement.click();
-        }
-      }
-      if (event.defaultPrevented) return;
-      // If the host has keepOpen = true we should ignore clicks & Space/Enter,
-      // however we always maintain the ability to close a menu with a explicit
-      // `escape` keypress.
-      const keyCode = event.code;
-      if (this.host.keepOpen && keyCode !== 'Escape') return;
-      if (isClosableKey(keyCode)) {
-        event.preventDefault();
-        this.host.dispatchEvent(createDefaultCloseMenuEvent(this.host, {
-          kind: CloseReason.KEYDOWN,
-          key: keyCode
-        }));
-      }
-    };
-    this.getHeadlineElements = config.getHeadlineElements;
-    this.getSupportingTextElements = config.getSupportingTextElements;
-    this.getDefaultElements = config.getDefaultElements;
-    this.getInteractiveElement = config.getInteractiveElement;
-    this.host.addController(this);
-  }
-  /**
-   * The text that is selectable via typeahead. If not set, defaults to the
-   * innerText of the item slotted into the `"headline"` slot, and if there are
-   * no slotted elements into headline, then it checks the _default_ slot, and
-   * then the `"supporting-text"` slot if nothing is in _default_.
-   */
-  get typeaheadText() {
-    if (this.internalTypeaheadText !== null) {
-      return this.internalTypeaheadText;
-    }
-    const headlineElements = this.getHeadlineElements();
-    const textParts = [];
-    headlineElements.forEach(headlineElement => {
-      if (headlineElement.textContent && headlineElement.textContent.trim()) {
-        textParts.push(headlineElement.textContent.trim());
-      }
-    });
-    // If there are no headline elements, check the default slot's text content
-    if (textParts.length === 0) {
-      this.getDefaultElements().forEach(defaultElement => {
-        if (defaultElement.textContent && defaultElement.textContent.trim()) {
-          textParts.push(defaultElement.textContent.trim());
-        }
-      });
-    }
-    // If there are no headline nor default slot elements, check the
-    //supporting-text slot's text content
-    if (textParts.length === 0) {
-      this.getSupportingTextElements().forEach(supportingTextElement => {
-        if (supportingTextElement.textContent && supportingTextElement.textContent.trim()) {
-          textParts.push(supportingTextElement.textContent.trim());
-        }
-      });
-    }
-    return textParts.join(' ');
-  }
-  /**
-   * The recommended tag name to render as the list item.
-   */
-  get tagName() {
-    const type = this.host.type;
-    switch (type) {
-      case 'link':
-        return 'a';
-      case 'button':
-        return 'button';
-      default:
-      case 'menuitem':
-      case 'option':
-        return 'li';
-    }
-  }
-  /**
-   * The recommended role of the menu item.
-   */
-  get role() {
-    return this.host.type === 'option' ? 'option' : 'menuitem';
-  }
-  hostConnected() {
-    this.host.toggleAttribute('md-menu-item', true);
-  }
-  hostUpdate() {
-    if (this.host.href) {
-      this.host.type = 'link';
-    }
-  }
-  /**
-   * Use to set the typeaheadText when it changes.
-   */
-  setTypeaheadText(text) {
-    this.internalTypeaheadText = text;
-  }
-}
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * Creates an event fired by a SelectOption to request selection from md-select.
- * Typically fired after `selected` changes from `false` to `true`.
- */
-function createRequestSelectionEvent() {
-  return new Event('request-selection', {
-    bubbles: true,
-    composed: true
-  });
-}
-/**
- * Creates an event fired by a SelectOption to request deselection from
- * md-select. Typically fired after `selected` changes from `true` to `false`.
- */
-function createRequestDeselectionEvent() {
-  return new Event('request-deselection', {
-    bubbles: true,
-    composed: true
-  });
-}
-/**
- * A controller that provides most functionality and md-select compatibility for
- * an element that implements the SelectOption interface.
- */
-class SelectOptionController {
-  /**
-   * The recommended role of the select option.
-   */
-  get role() {
-    return this.menuItemController.role;
-  }
-  /**
-   * The text that is selectable via typeahead. If not set, defaults to the
-   * innerText of the item slotted into the `"headline"` slot, and if there are
-   * no slotted elements into headline, then it checks the _default_ slot, and
-   * then the `"supporting-text"` slot if nothing is in _default_.
-   */
-  get typeaheadText() {
-    return this.menuItemController.typeaheadText;
-  }
-  setTypeaheadText(text) {
-    this.menuItemController.setTypeaheadText(text);
-  }
-  /**
-   * The text that is displayed in the select field when selected. If not set,
-   * defaults to the textContent of the item slotted into the `"headline"` slot,
-   * and if there are no slotted elements into headline, then it checks the
-   * _default_ slot, and then the `"supporting-text"` slot if nothing is in
-   * _default_.
-   */
-  get displayText() {
-    if (this.internalDisplayText !== null) {
-      return this.internalDisplayText;
-    }
-    return this.menuItemController.typeaheadText;
-  }
-  setDisplayText(text) {
-    this.internalDisplayText = text;
-  }
-  /**
-   * @param host The SelectOption in which to attach this controller to.
-   * @param config The object that configures this controller's behavior.
-   */
-  constructor(host, config) {
-    this.host = host;
-    this.internalDisplayText = null;
-    this.firstUpdate = true;
-    /**
-     * Bind this click listener to the interactive element. Handles closing the
-     * menu.
-     */
-    this.onClick = () => {
-      this.menuItemController.onClick();
-    };
-    /**
-     * Bind this click listener to the interactive element. Handles closing the
-     * menu.
-     */
-    this.onKeydown = e => {
-      this.menuItemController.onKeydown(e);
-    };
-    this.lastSelected = this.host.selected;
-    this.menuItemController = new MenuItemController(host, config);
-    host.addController(this);
-  }
-  hostUpdate() {
-    if (this.lastSelected !== this.host.selected) {
-      this.host.ariaSelected = this.host.selected ? 'true' : 'false';
-    }
-  }
-  hostUpdated() {
-    // Do not dispatch event on first update / boot-up.
-    if (this.lastSelected !== this.host.selected && !this.firstUpdate) {
-      // This section is really useful for when the user sets selected on the
-      // option programmatically. Most other cases (click and keyboard) are
-      // handled by md-select because it needs to coordinate the
-      // single-selection behavior.
-      if (this.host.selected) {
-        this.host.dispatchEvent(createRequestSelectionEvent());
-      } else {
-        this.host.dispatchEvent(createRequestDeselectionEvent());
-      }
-    }
-    this.lastSelected = this.host.selected;
-    this.firstUpdate = false;
-  }
-}
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// Separate variable needed for closure.
-const selectOptionBaseClass = mixinDelegatesAria(i);
-/**
- * @fires close-menu {CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>}
- * Closes the encapsulating menu on closable interaction. --bubbles --composed
- * @fires request-selection {Event} Requests the parent md-select to select this
- * element (and deselect others if single-selection) when `selected` changed to
- * `true`. --bubbles --composed
- * @fires request-deselection {Event} Requests the parent md-select to deselect
- * this element when `selected` changed to `false`. --bubbles --composed
- */
-class SelectOptionEl extends selectOptionBaseClass {
-  constructor() {
-    super(...arguments);
-    /**
-     * Disables the item and makes it non-selectable and non-interactive.
-     */
-    this.disabled = false;
-    /**
-     * READONLY: self-identifies as a menu item and sets its identifying attribute
-     */
-    this.isMenuItem = true;
-    /**
-     * Sets the item in the selected visual state when a submenu is opened.
-     */
-    this.selected = false;
-    /**
-     * Form value of the option.
-     */
-    this.value = '';
-    this.type = 'option';
-    this.selectOptionController = new SelectOptionController(this, {
-      getHeadlineElements: () => {
-        return this.headlineElements;
-      },
-      getSupportingTextElements: () => {
-        return this.supportingTextElements;
-      },
-      getDefaultElements: () => {
-        return this.defaultElements;
-      },
-      getInteractiveElement: () => this.listItemRoot
-    });
-  }
-  /**
-   * The text that is selectable via typeahead. If not set, defaults to the
-   * innerText of the item slotted into the `"headline"` slot.
-   */
-  get typeaheadText() {
-    return this.selectOptionController.typeaheadText;
-  }
-  set typeaheadText(text) {
-    this.selectOptionController.setTypeaheadText(text);
-  }
-  /**
-   * The text that is displayed in the select field when selected. If not set,
-   * defaults to the textContent of the item slotted into the `"headline"` slot.
-   */
-  get displayText() {
-    return this.selectOptionController.displayText;
-  }
-  set displayText(text) {
-    this.selectOptionController.setDisplayText(text);
-  }
-  render() {
-    return this.renderListItem(b`
-      <md-item>
-        <div slot="container">
-          ${this.renderRipple()} ${this.renderFocusRing()}
-        </div>
-        <slot name="start" slot="start"></slot>
-        <slot name="end" slot="end"></slot>
-        ${this.renderBody()}
-      </md-item>
-    `);
-  }
-  /**
-   * Renders the root list item.
-   *
-   * @param content the child content of the list item.
-   */
-  renderListItem(content) {
-    return b`
-      <li
-        id="item"
-        tabindex=${this.disabled ? -1 : 0}
-        role=${this.selectOptionController.role}
-        aria-label=${this.ariaLabel || A}
-        aria-selected=${this.ariaSelected || A}
-        aria-checked=${this.ariaChecked || A}
-        aria-expanded=${this.ariaExpanded || A}
-        aria-haspopup=${this.ariaHasPopup || A}
-        class="list-item ${e$2(this.getRenderClasses())}"
-        @click=${this.selectOptionController.onClick}
-        @keydown=${this.selectOptionController.onKeydown}
-        >${content}</li
-      >
-    `;
-  }
-  /**
-   * Handles rendering of the ripple element.
-   */
-  renderRipple() {
-    return b` <md-ripple
-      part="ripple"
-      for="item"
-      ?disabled=${this.disabled}></md-ripple>`;
-  }
-  /**
-   * Handles rendering of the focus ring.
-   */
-  renderFocusRing() {
-    return b` <md-focus-ring
-      part="focus-ring"
-      for="item"
-      inward></md-focus-ring>`;
-  }
-  /**
-   * Classes applied to the list item root.
-   */
-  getRenderClasses() {
-    return {
-      'disabled': this.disabled,
-      'selected': this.selected
-    };
-  }
-  /**
-   * Handles rendering the headline and supporting text.
-   */
-  renderBody() {
-    return b`
-      <slot></slot>
-      <slot name="overline" slot="overline"></slot>
-      <slot name="headline" slot="headline"></slot>
-      <slot name="supporting-text" slot="supporting-text"></slot>
-      <slot
-        name="trailing-supporting-text"
-        slot="trailing-supporting-text"></slot>
-    `;
-  }
-  focus() {
-    var _this$listItemRoot;
-    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't
-    // work programmatically like in FF and select-option
-    (_this$listItemRoot = this.listItemRoot) === null || _this$listItemRoot === void 0 || _this$listItemRoot.focus();
-  }
-}
-/** @nocollapse */
-SelectOptionEl.shadowRootOptions = {
-  ...i.shadowRootOptions,
-  delegatesFocus: true
-};
-__decorate([n$1({
-  type: Boolean,
-  reflect: true
-})], SelectOptionEl.prototype, "disabled", void 0);
-__decorate([n$1({
-  type: Boolean,
-  attribute: 'md-menu-item',
-  reflect: true
-})], SelectOptionEl.prototype, "isMenuItem", void 0);
-__decorate([n$1({
-  type: Boolean
-})], SelectOptionEl.prototype, "selected", void 0);
-__decorate([n$1()], SelectOptionEl.prototype, "value", void 0);
-__decorate([e$1('.list-item')], SelectOptionEl.prototype, "listItemRoot", void 0);
-__decorate([o({
-  slot: 'headline'
-})], SelectOptionEl.prototype, "headlineElements", void 0);
-__decorate([o({
-  slot: 'supporting-text'
-})], SelectOptionEl.prototype, "supportingTextElements", void 0);
-__decorate([n({
-  slot: ''
-})], SelectOptionEl.prototype, "defaultElements", void 0);
-__decorate([n$1({
-  attribute: 'typeahead-text'
-})], SelectOptionEl.prototype, "typeaheadText", null);
-__decorate([n$1({
-  attribute: 'display-text'
-})], SelectOptionEl.prototype, "displayText", null);
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * @summary
- * Select menus display a list of choices on temporary surfaces and display the
- * currently selected menu item above the menu.
- *
- * @description
- * The select component allows users to choose a value from a fixed list of
- * available options. Composed of an interactive anchor button and a menu, it is
- * analogous to the native HTML `<select>` element. This is the option that
- * can be placed inside of an md-select.
- *
- * This component is a subclass of `md-menu-item` and can accept the same slots,
- * properties, and events as `md-menu-item`.
- *
- * @example
- * ```html
- * <md-outlined-select label="fruits">
- *   <!-- An empty selected option will give select an "un-filled" state -->
- *   <md-select-option selected></md-select-option>
- *   <md-select-option value="apple" headline="Apple"></md-select-option>
- *   <md-select-option value="banana" headline="Banana"></md-select-option>
- *   <md-select-option value="kiwi" headline="Kiwi"></md-select-option>
- *   <md-select-option value="orange" headline="Orange"></md-select-option>
- *   <md-select-option value="tomato" headline="Tomato"></md-select-option>
- * </md-outlined-select>
- * ```
- *
- * @final
- * @suppress {visibility}
- */
-let MdSelectOption = class MdSelectOption extends SelectOptionEl {};
-MdSelectOption.styles = [styles];
-MdSelectOption = __decorate([t('md-select-option')], MdSelectOption);
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
-  return result;
-};
-const LOG_LEVELS = [{
-  value: "critical",
-  label: "Critical"
-}, {
-  value: "error",
-  label: "Error"
-}, {
-  value: "warning",
-  label: "Warning"
-}, {
-  value: "info",
-  label: "Info"
-}, {
-  value: "debug",
-  label: "Debug"
-}];
-let LogLevelSection = class extends i {
-  constructor() {
-    super(...arguments);
-    this._consoleLevel = "info";
-    this._fileLevel = null;
-    this._loading = true;
-    this._applying = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    fireAndForget(this._loadLogLevels());
-  }
-  async _loadLogLevels() {
-    try {
-      const result = await this.client.getLogLevel();
-      this._consoleLevel = result.console_loglevel;
-      this._fileLevel = result.file_loglevel;
-    } catch (err) {
-      console.error("Failed to load log levels:", err);
-    } finally {
-      this._loading = false;
-    }
-  }
-  async _apply() {
-    this._applying = true;
-    try {
-      var _this$_fileSelect;
-      const consoleLevel = this._consoleSelect.value;
-      const fileLevel = (_this$_fileSelect = this._fileSelect) === null || _this$_fileSelect === void 0 ? void 0 : _this$_fileSelect.value;
-      const result = await this.client.setLogLevel(consoleLevel, this._fileLevel !== null ? fileLevel : void 0);
-      this._consoleLevel = result.console_loglevel;
-      this._fileLevel = result.file_loglevel;
-      this.dispatchEvent(new CustomEvent("log-level-applied", {
-        bubbles: true,
-        composed: true
-      }));
-    } catch (err) {
-      console.error("Failed to apply log levels:", err);
-      showAlertDialog({
-        title: "Error",
-        text: "Failed to apply log levels"
-      });
-    } finally {
-      this._applying = false;
-    }
-  }
-  render() {
-    if (this._loading) {
-      return b` <p class="loading">Loading...</p> `;
-    }
-    return b`
-            <p class="hint">Changes are temporary and will be reset on the next server restart.</p>
-            <div class="form-field">
-                <label>Console Log Level</label>
-                <md-outlined-select name="console" .value=${this._consoleLevel}>
-                    ${LOG_LEVELS.map(level => b`
-                            <md-select-option value=${level.value} ?selected=${level.value === this._consoleLevel}>
-                                <div slot="headline">${level.label}</div>
-                            </md-select-option>
-                        `)}
-                </md-outlined-select>
-            </div>
-            ${this._fileLevel !== null ? b`
-                      <div class="form-field">
-                          <label>File Log Level</label>
-                          <md-outlined-select name="file" .value=${this._fileLevel}>
-                              ${LOG_LEVELS.map(level => b`
-                                      <md-select-option
-                                          value=${level.value}
-                                          ?selected=${level.value === this._fileLevel}
-                                      >
-                                          <div slot="headline">${level.label}</div>
-                                      </md-select-option>
-                                  `)}
-                          </md-outlined-select>
-                      </div>
-                  ` : A}
-            <div class="actions">
-                <md-text-button @click=${handleAsync(() => this._apply())} ?disabled=${this._applying}>
-                    ${this._applying ? "Applying..." : "Apply"}
-                </md-text-button>
-            </div>
-        `;
-  }
-};
-LogLevelSection.styles = i$1`
-        :host {
-            display: block;
-        }
-
-        .loading {
-            text-align: center;
-            padding: 24px;
-            color: var(--md-sys-color-on-surface-variant);
-        }
-
-        .hint {
-            font-size: 0.875rem;
-            color: var(--md-sys-color-on-surface-variant);
-            margin: 0 0 16px 0;
-            font-style: italic;
-        }
-
-        .form-field {
-            margin-bottom: 16px;
-        }
-
-        .form-field label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 500;
-            color: var(--md-sys-color-on-surface);
-        }
-
-        md-outlined-select {
-            width: 100%;
-        }
-
-        .actions {
-            display: flex;
-            justify-content: flex-end;
-            margin-top: 8px;
-        }
-    `;
-__decorateClass$1([n$1({
-  attribute: false
-})], LogLevelSection.prototype, "client", 2);
-__decorateClass$1([r()], LogLevelSection.prototype, "_consoleLevel", 2);
-__decorateClass$1([r()], LogLevelSection.prototype, "_fileLevel", 2);
-__decorateClass$1([r()], LogLevelSection.prototype, "_loading", 2);
-__decorateClass$1([r()], LogLevelSection.prototype, "_applying", 2);
-__decorateClass$1([e$1("md-outlined-select[name='console']")], LogLevelSection.prototype, "_consoleSelect", 2);
-__decorateClass$1([e$1("md-outlined-select[name='file']")], LogLevelSection.prototype, "_fileSelect", 2);
-LogLevelSection = __decorateClass$1([t("log-level-section")], LogLevelSection);
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let SettingsDialog = class extends i {
-  constructor() {
-    super(...arguments);
-    this._devMode = DevModeService.active;
-    this._expandedRow = null;
-    this._credLoading = false;
-    this._showPassword = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this._unsubscribeDev = DevModeService.subscribe(active => {
-      this._devMode = active;
-    });
-  }
-  disconnectedCallback() {
-    var _this$_unsubscribeDev;
-    super.disconnectedCallback();
-    (_this$_unsubscribeDev = this._unsubscribeDev) === null || _this$_unsubscribeDev === void 0 || _this$_unsubscribeDev.call(this);
-  }
-  firstUpdated() {
-    const knownSections = /* @__PURE__ */new Set(["network-credentials"]);
-    if (this.scrollToSection && knownSections.has(this.scrollToSection)) {
-      requestAnimationFrame(() => {
-        var _this$renderRoot$quer;
-        (_this$renderRoot$quer = this.renderRoot.querySelector(`#${this.scrollToSection}`)) === null || _this$renderRoot$quer === void 0 || _this$renderRoot$quer.scrollIntoView({
-          behavior: "smooth",
-          block: "start"
-        });
-      });
-    }
-  }
-  _close() {
-    this.shadowRoot.querySelector("md-dialog").close();
-  }
-  _handleClosed() {
-    this.parentNode.removeChild(this);
-  }
-  _onDevToggle(event) {
-    const target = event.target;
-    DevModeService.setActive(target.selected);
-  }
-  _copyDevLink() {
-    var _navigator$clipboard;
-    const url = new URL(window.location.href);
-    url.searchParams.set("dev", "on");
-    (_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 || _navigator$clipboard.writeText(url.toString()).catch(() => {});
-  }
-  _toggleExpand(row) {
-    this._expandedRow = this._expandedRow === row ? null : row;
-    this._showPassword = false;
-  }
-  _cancelCred() {
-    this._expandedRow = null;
-    this._showPassword = false;
-  }
-  _togglePassword() {
-    this._showPassword = !this._showPassword;
-  }
-  async _saveWifi() {
-    const ssid = this._wifiSsidField.value.trim();
-    if (!ssid) {
-      showAlertDialog({
-        title: "Validation error",
-        text: "SSID is required"
-      });
-      return;
-    }
-    const password = this._wifiPasswordField.value;
-    if (!password) {
-      showAlertDialog({
-        title: "Validation error",
-        text: "Password is required"
-      });
-      return;
-    }
-    this._credLoading = true;
-    try {
-      await this.client.setWifiCredentials(ssid, password);
-      this._expandedRow = null;
-      this._showPassword = false;
-    } catch (err) {
-      showAlertDialog({
-        title: "Error saving WiFi credentials",
-        text: err.message
-      });
-    } finally {
-      this._credLoading = false;
-    }
-  }
-  async _removeWifi() {
-    this._credLoading = true;
-    try {
-      await this.client.removeWifiCredentials();
-      this._expandedRow = null;
-      this._showPassword = false;
-    } catch (err) {
-      showAlertDialog({
-        title: "Error removing WiFi credentials",
-        text: err.message
-      });
-    } finally {
-      this._credLoading = false;
-    }
-  }
-  async _saveThread() {
-    const dataset = this._threadDatasetField.value.trim();
-    if (!dataset) {
-      showAlertDialog({
-        title: "Validation error",
-        text: "Thread dataset is required"
-      });
-      return;
-    }
-    if (!/^[0-9a-fA-F]*$/.test(dataset) || dataset.length % 2 !== 0) {
-      showAlertDialog({
-        title: "Invalid Thread dataset",
-        text: "Must be a hex string with even length (each byte is two hex characters)"
-      });
-      return;
-    }
-    this._credLoading = true;
-    try {
-      await this.client.setThreadOperationalDataset(dataset);
-      this._expandedRow = null;
-    } catch (err) {
-      showAlertDialog({
-        title: "Error saving Thread dataset",
-        text: err.message
-      });
-    } finally {
-      this._credLoading = false;
-    }
-  }
-  async _removeThread() {
-    this._credLoading = true;
-    try {
-      await this.client.removeThreadDataset();
-      this._expandedRow = null;
-      this._showPassword = false;
-    } catch (err) {
-      showAlertDialog({
-        title: "Error removing Thread dataset",
-        text: err.message
-      });
-    } finally {
-      this._credLoading = false;
-    }
-  }
-  render() {
-    return b`
-            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
-                <div slot="headline">Settings</div>
-                <div slot="content">
-                    <section class="section">
-                        <h3 class="section-title">Developer mode</h3>
-                        <div class="toggle-row">
-                            <label for="dev-switch" class="toggle-label">
-                                Enable developer mode
-                                <span class="hint">
-                                    Adds raw read/write buttons and a generic command invoker to cluster views.
-                                    Activation is reflected in the URL (<code>?dev=on</code>) and does not persist.
-                                </span>
-                            </label>
-                            <md-switch
-                                id="dev-switch"
-                                ?selected=${this._devMode}
-                                @change=${this._onDevToggle}
-                            ></md-switch>
-                        </div>
-                        <div class="aux-row">
-                            <md-text-button @click=${this._copyDevLink}>Copy URL with dev enabled</md-text-button>
-                        </div>
-                    </section>
-
-                    <md-divider></md-divider>
-
-                    <section class="section">
-                        <h3 class="section-title">Server log levels</h3>
-                        <log-level-section .client=${this.client}></log-level-section>
-                    </section>
-
-                    <md-divider></md-divider>
-
-                    <section id="network-credentials" class="section">
-                        <h3 class="section-title">Network credentials</h3>
-
-                        <div class="cred-row">
-                            <div class="cred-info">
-                                <ha-svg-icon .path=${mdiWifi}></ha-svg-icon>
-                                <span class="cred-label">WiFi</span>
-                                ${this.client.serverInfo.wifi_credentials_set ? b`<span class="cred-value">${this.client.serverInfo.wifi_ssid}</span>` : b`<span class="cred-unset">Not configured</span>`}
-                            </div>
-                            <md-text-button @click=${() => this._toggleExpand("wifi")} .disabled=${this._credLoading}
-                                >Edit</md-text-button
-                            >
-                        </div>
-
-                        ${this._expandedRow === "wifi" ? b` <div class="cred-form">
-                                  <md-outlined-text-field
-                                      id="cred-wifi-ssid"
-                                      label="SSID"
-                                      .value=${this.client.serverInfo.wifi_ssid ?? ""}
-                                      .disabled=${this._credLoading}
-                                  ></md-outlined-text-field>
-                                  <div class="password-row">
-                                      <md-outlined-text-field
-                                          id="cred-wifi-password"
-                                          label="Password"
-                                          .type=${this._showPassword ? "text" : "password"}
-                                          .disabled=${this._credLoading}
-                                      ></md-outlined-text-field>
-                                      <md-icon-button @click=${this._togglePassword}>
-                                          <ha-svg-icon .path=${this._showPassword ? mdiEyeOff : mdiEye}></ha-svg-icon>
-                                      </md-icon-button>
-                                  </div>
-                                  <div class="form-actions">
-                                      <md-text-button @click=${this._cancelCred} .disabled=${this._credLoading}
-                                          >Cancel</md-text-button
-                                      >
-                                      ${this.client.serverInfo.wifi_credentials_set ? b`<md-text-button
-                                                @click=${handleAsync(() => this._removeWifi())}
-                                                .disabled=${this._credLoading}
-                                                >Remove</md-text-button
-                                            >` : A}
-                                      <md-filled-button
-                                          @click=${handleAsync(() => this._saveWifi())}
-                                          .disabled=${this._credLoading}
-                                          >Save</md-filled-button
-                                      >
-                                  </div>
-                              </div>` : A}
-
-                        <div class="cred-row cred-row-thread">
-                            <div class="cred-info">
-                                <ha-svg-icon .path=${mdiAccessPoint}></ha-svg-icon>
-                                <span class="cred-label">Thread</span>
-                                ${this.client.serverInfo.thread_credentials_set ? b`<span class="cred-value">Thread network set</span>` : b`<span class="cred-unset">Not configured</span>`}
-                            </div>
-                            <md-text-button @click=${() => this._toggleExpand("thread")} .disabled=${this._credLoading}
-                                >Edit</md-text-button
-                            >
-                        </div>
-
-                        ${this._expandedRow === "thread" ? b` <div class="cred-form">
-                                  <md-outlined-text-field
-                                      id="cred-thread-dataset"
-                                      label="Thread dataset"
-                                      supporting-text="Hex string (e.g. 0E080000...)"
-                                      .disabled=${this._credLoading}
-                                  ></md-outlined-text-field>
-                                  <div class="form-actions">
-                                      <md-text-button @click=${this._cancelCred} .disabled=${this._credLoading}
-                                          >Cancel</md-text-button
-                                      >
-                                      ${this.client.serverInfo.thread_credentials_set ? b`<md-text-button
-                                                @click=${handleAsync(() => this._removeThread())}
-                                                .disabled=${this._credLoading}
-                                                >Remove</md-text-button
-                                            >` : A}
-                                      <md-filled-button
-                                          @click=${handleAsync(() => this._saveThread())}
-                                          .disabled=${this._credLoading}
-                                          >Save</md-filled-button
-                                      >
-                                  </div>
-                              </div>` : A}
-
-                        <p class="cred-hint">Used when commissioning new devices. Existing devices are not affected.</p>
-                    </section>
-                </div>
-                <div slot="actions">
-                    <md-text-button @click=${this._close}>Close</md-text-button>
-                </div>
-            </md-dialog>
-        `;
-  }
-};
-SettingsDialog.styles = i$1`
-        md-dialog {
-            min-width: 480px;
-            max-width: 600px;
-        }
-
-        .section {
-            padding: 8px 0 16px 0;
-        }
-
-        .section-title {
-            margin: 0 0 12px 0;
-            font-size: 0.95rem;
-            font-weight: 500;
-            color: var(--md-sys-color-on-surface);
-            text-transform: uppercase;
-            letter-spacing: 0.08em;
-        }
-
-        .toggle-row {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            justify-content: space-between;
-        }
-
-        .toggle-label {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-            color: var(--md-sys-color-on-surface);
-            font-size: 0.95rem;
-        }
-
-        .hint {
-            font-size: 0.825rem;
-            color: var(--md-sys-color-on-surface-variant);
-            font-weight: 400;
-        }
-
-        .hint code {
-            font-family: var(--monospace-font);
-            background: var(--md-sys-color-surface-container-high);
-            padding: 0 4px;
-            border-radius: 3px;
-        }
-
-        .aux-row {
-            margin-top: 8px;
-            display: flex;
-            justify-content: flex-end;
-        }
-
-        md-divider {
-            margin: 12px 0;
-        }
-
-        .cred-row {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 4px 0;
-        }
-
-        .cred-row-thread {
-            margin-top: 8px;
-        }
-
-        .cred-info {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font-size: 0.9rem;
-            color: var(--md-sys-color-on-surface);
-        }
-
-        .cred-label {
-            font-weight: 500;
-            min-width: 52px;
-        }
-
-        .cred-value {
-            color: var(--md-sys-color-on-surface-variant);
-        }
-
-        .cred-unset {
-            color: var(--md-sys-color-on-surface-variant);
-            font-style: italic;
-        }
-
-        .cred-form {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            padding: 8px 0 4px 0;
-        }
-
-        .password-row {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        }
-
-        .password-row md-outlined-text-field {
-            flex: 1;
-        }
-
-        .form-actions {
-            display: flex;
-            gap: 4px;
-            justify-content: flex-end;
-        }
-
-        .cred-hint {
-            margin: 10px 0 0 0;
-            font-size: 0.8rem;
-            color: var(--md-sys-color-on-surface-variant);
-        }
-
-        .cred-info ha-svg-icon {
-            width: 18px;
-            height: 18px;
-            color: var(--md-sys-color-on-surface-variant);
-        }
-
-        .password-row ha-svg-icon {
-            width: 18px;
-            height: 18px;
-            color: var(--md-sys-color-on-surface-variant);
-        }
-    `;
-__decorateClass([n$1({
-  attribute: false
-})], SettingsDialog.prototype, "client", 2);
-__decorateClass([r()], SettingsDialog.prototype, "_devMode", 2);
-__decorateClass([n$1({
-  attribute: false
-})], SettingsDialog.prototype, "scrollToSection", 2);
-__decorateClass([r()], SettingsDialog.prototype, "_expandedRow", 2);
-__decorateClass([r()], SettingsDialog.prototype, "_credLoading", 2);
-__decorateClass([r()], SettingsDialog.prototype, "_showPassword", 2);
-__decorateClass([e$1("#cred-wifi-ssid")], SettingsDialog.prototype, "_wifiSsidField", 2);
-__decorateClass([e$1("#cred-wifi-password")], SettingsDialog.prototype, "_wifiPasswordField", 2);
-__decorateClass([e$1("#cred-thread-dataset")], SettingsDialog.prototype, "_threadDatasetField", 2);
-SettingsDialog = __decorateClass([t("settings-dialog")], SettingsDialog);
-
-export { SettingsDialog };