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

package/dist/web/js/log-level-dialog-B7LsZYUL.js

@@ -0,0 +1,3232 @@
+import { e, N as NavigableKeys, _ as __decorate, a as e$1, n as n$1, o, r, i, c as createAnimationSignal, L as ListController, g as getActiveItem, b as getLastActivatableItem, d as getFirstActivatableItem, f as e$2, A, h as b, E as EASING, j as i$1, t, D, m as mixinDelegatesAria, k as mixinElementInternals, u, l as i$2 } from './matter-dashboard-app-DlHSE_Qh.js';
+import { r as redispatchEvent, p as preventDefault } from './prevent_default-CuW2EnKR.js';
+import { o as o$1, V as Validator, m as mixinOnReportValidity, a as mixinConstraintValidation, b as mixinFormAssociated, c as onReportValidity, g as getFormValue, d as createValidator, e as getValidityAnchor } from './validator-MOJiFndw.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
+ */
+/**
+ * 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 = 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;
+};
+const LOG_LEVELS = [{
+  value: "critical",
+  label: "Critical"
+}, {
+  value: "error",
+  label: "Error"
+}, {
+  value: "warning",
+  label: "Warning"
+}, {
+  value: "info",
+  label: "Info"
+}, {
+  value: "debug",
+  label: "Debug"
+}];
+let LogLevelDialog = class extends i {
+  constructor() {
+    super(...arguments);
+    this._consoleLevel = "info";
+    this._fileLevel = null;
+    this._loading = true;
+    this._applying = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    void 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._close();
+    } catch (err) {
+      console.error("Failed to apply log levels:", err);
+      alert("Failed to apply log levels");
+    } finally {
+      this._applying = false;
+    }
+  }
+  _close() {
+    this.shadowRoot.querySelector("md-dialog").close();
+  }
+  _handleClosed() {
+    this.parentNode.removeChild(this);
+  }
+  render() {
+    return b`
+            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
+                <div slot="headline">Server Log Settings</div>
+                <div slot="content">
+                    ${this._loading ? b`<p class="loading">Loading...</p>` : 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>
+                <div slot="actions">
+                    <md-text-button @click=${this._close}>Cancel</md-text-button>
+                    <md-text-button @click=${this._apply} ?disabled=${this._loading || this._applying}>
+                        ${this._applying ? "Applying..." : "Apply"}
+                    </md-text-button>
+                </div>
+            </md-dialog>
+        `;
+  }
+};
+LogLevelDialog.styles = i$1`
+        .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%;
+        }
+    `;
+__decorateClass([n$1({
+  attribute: false
+})], LogLevelDialog.prototype, "client", 2);
+__decorateClass([r()], LogLevelDialog.prototype, "_consoleLevel", 2);
+__decorateClass([r()], LogLevelDialog.prototype, "_fileLevel", 2);
+__decorateClass([r()], LogLevelDialog.prototype, "_loading", 2);
+__decorateClass([r()], LogLevelDialog.prototype, "_applying", 2);
+__decorateClass([e$1("md-outlined-select[name='console']")], LogLevelDialog.prototype, "_consoleSelect", 2);
+__decorateClass([e$1("md-outlined-select[name='file']")], LogLevelDialog.prototype, "_fileSelect", 2);
+LogLevelDialog = __decorateClass([t("log-level-dialog")], LogLevelDialog);
+
+export { LogLevelDialog };