@pod-os/contacts 0.0.2-rc.40ff2aa.0

package/dist/cjs/chunk.HVTXQL7M-CkreIIRp.js

@@ -0,0 +1,1369 @@
+'use strict';
+
+var chunk_YHLNUJ7P = require('./chunk.YHLNUJ7P-BQOX8L9A.js');
+var chunk_5JY5FUCG = require('./chunk.5JY5FUCG-DBOKVhYw.js');
+var chunk_6CTB5ZDJ = require('./chunk.6CTB5ZDJ-CC8k6o5T.js');
+var classMap = require('./class-map-Bp6RgbSP.js');
+var ifDefined = require('./if-defined-C9hF9oNL.js');
+
+// src/internal/slot.ts
+var HasSlotController = class {
+  constructor(host, ...slotNames) {
+    this.slotNames = [];
+    this.handleSlotChange = (event) => {
+      const slot = event.target;
+      if (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name)) {
+        this.host.requestUpdate();
+      }
+    };
+    (this.host = host).addController(this);
+    this.slotNames = slotNames;
+  }
+  hasDefaultSlot() {
+    return [...this.host.childNodes].some((node) => {
+      if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") {
+        return true;
+      }
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const el = node;
+        const tagName = el.tagName.toLowerCase();
+        if (tagName === "sl-visually-hidden") {
+          return false;
+        }
+        if (!el.hasAttribute("slot")) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+  hasNamedSlot(name) {
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+  }
+  test(slotName) {
+    return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+  }
+  hostConnected() {
+    this.host.shadowRoot.addEventListener("slotchange", this.handleSlotChange);
+  }
+  hostDisconnected() {
+    this.host.shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
+  }
+};
+function getTextContent(slot) {
+  if (!slot) {
+    return "";
+  }
+  const nodes = slot.assignedNodes({ flatten: true });
+  let text = "";
+  [...nodes].forEach((node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += node.textContent;
+    }
+  });
+  return text;
+}
+
+// src/components/dropdown/dropdown.styles.ts
+var dropdown_styles_default = chunk_YHLNUJ7P.i`
+  :host {
+    display: inline-block;
+  }
+
+  .dropdown::part(popup) {
+    z-index: var(--sl-z-index-dropdown);
+  }
+
+  .dropdown[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .dropdown[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .dropdown[data-current-placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .dropdown[data-current-placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .dropdown__trigger {
+    display: block;
+  }
+
+  .dropdown__panel {
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    box-shadow: var(--sl-shadow-large);
+    border-radius: var(--sl-border-radius-medium);
+    pointer-events: none;
+  }
+
+  .dropdown--open .dropdown__panel {
+    display: block;
+    pointer-events: all;
+  }
+
+  /* When users slot a menu, make sure it conforms to the popup's auto-size */
+  ::slotted(sl-menu) {
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
+`;
+
+// src/internal/active-elements.ts
+function* activeElements(activeElement = document.activeElement) {
+  if (activeElement === null || activeElement === void 0) return;
+  yield activeElement;
+  if ("shadowRoot" in activeElement && activeElement.shadowRoot && activeElement.shadowRoot.mode !== "closed") {
+    yield* chunk_YHLNUJ7P.__yieldStar(activeElements(activeElement.shadowRoot.activeElement));
+  }
+}
+function getDeepestActiveElement() {
+  return [...activeElements()].pop();
+}
+
+// src/internal/tabbable.ts
+var computedStyleMap = /* @__PURE__ */ new WeakMap();
+function getCachedComputedStyle(el) {
+  let computedStyle = computedStyleMap.get(el);
+  if (!computedStyle) {
+    computedStyle = window.getComputedStyle(el, null);
+    computedStyleMap.set(el, computedStyle);
+  }
+  return computedStyle;
+}
+function isVisible(el) {
+  if (typeof el.checkVisibility === "function") {
+    return el.checkVisibility({ checkOpacity: false, checkVisibilityCSS: true });
+  }
+  const computedStyle = getCachedComputedStyle(el);
+  return computedStyle.visibility !== "hidden" && computedStyle.display !== "none";
+}
+function isOverflowingAndTabbable(el) {
+  const computedStyle = getCachedComputedStyle(el);
+  const { overflowY, overflowX } = computedStyle;
+  if (overflowY === "scroll" || overflowX === "scroll") {
+    return true;
+  }
+  if (overflowY !== "auto" || overflowX !== "auto") {
+    return false;
+  }
+  const isOverflowingY = el.scrollHeight > el.clientHeight;
+  if (isOverflowingY && overflowY === "auto") {
+    return true;
+  }
+  const isOverflowingX = el.scrollWidth > el.clientWidth;
+  if (isOverflowingX && overflowX === "auto") {
+    return true;
+  }
+  return false;
+}
+function isTabbable(el) {
+  const tag = el.tagName.toLowerCase();
+  const tabindex = Number(el.getAttribute("tabindex"));
+  const hasTabindex = el.hasAttribute("tabindex");
+  if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
+    return false;
+  }
+  if (el.hasAttribute("disabled")) {
+    return false;
+  }
+  if (el.closest("[inert]")) {
+    return false;
+  }
+  if (tag === "input" && el.getAttribute("type") === "radio") {
+    const rootNode = el.getRootNode();
+    const findRadios = `input[type='radio'][name="${el.getAttribute("name")}"]`;
+    const firstChecked = rootNode.querySelector(`${findRadios}:checked`);
+    if (firstChecked) {
+      return firstChecked === el;
+    }
+    const firstRadio = rootNode.querySelector(findRadios);
+    return firstRadio === el;
+  }
+  if (!isVisible(el)) {
+    return false;
+  }
+  if ((tag === "audio" || tag === "video") && el.hasAttribute("controls")) {
+    return true;
+  }
+  if (el.hasAttribute("tabindex")) {
+    return true;
+  }
+  if (el.hasAttribute("contenteditable") && el.getAttribute("contenteditable") !== "false") {
+    return true;
+  }
+  const isNativelyTabbable = [
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "a",
+    "audio",
+    "video",
+    "summary",
+    "iframe"
+  ].includes(tag);
+  if (isNativelyTabbable) {
+    return true;
+  }
+  return isOverflowingAndTabbable(el);
+}
+function getTabbableBoundary(root) {
+  var _a, _b;
+  const tabbableElements = getTabbableElements(root);
+  const start = (_a = tabbableElements[0]) != null ? _a : null;
+  const end = (_b = tabbableElements[tabbableElements.length - 1]) != null ? _b : null;
+  return { start, end };
+}
+function getSlottedChildrenOutsideRootElement(slotElement, root) {
+  var _a;
+  return ((_a = slotElement.getRootNode({ composed: true })) == null ? void 0 : _a.host) !== root;
+}
+function getTabbableElements(root) {
+  const walkedEls = /* @__PURE__ */ new WeakMap();
+  const tabbableElements = [];
+  function walk(el) {
+    if (el instanceof Element) {
+      if (el.hasAttribute("inert") || el.closest("[inert]")) {
+        return;
+      }
+      if (walkedEls.has(el)) {
+        return;
+      }
+      walkedEls.set(el, true);
+      if (!tabbableElements.includes(el) && isTabbable(el)) {
+        tabbableElements.push(el);
+      }
+      if (el instanceof HTMLSlotElement && getSlottedChildrenOutsideRootElement(el, root)) {
+        el.assignedElements({ flatten: true }).forEach((assignedEl) => {
+          walk(assignedEl);
+        });
+      }
+      if (el.shadowRoot !== null && el.shadowRoot.mode === "open") {
+        walk(el.shadowRoot);
+      }
+    }
+    for (const e of el.children) {
+      walk(e);
+    }
+  }
+  walk(root);
+  return tabbableElements.sort((a, b) => {
+    const aTabindex = Number(a.getAttribute("tabindex")) || 0;
+    const bTabindex = Number(b.getAttribute("tabindex")) || 0;
+    return bTabindex - aTabindex;
+  });
+}
+
+var SlDropdown = class extends chunk_YHLNUJ7P.ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new chunk_6CTB5ZDJ.LocalizeController(this);
+    this.open = false;
+    this.placement = "bottom-start";
+    this.disabled = false;
+    this.stayOpenOnSelect = false;
+    this.distance = 0;
+    this.skidding = 0;
+    this.hoist = false;
+    this.sync = void 0;
+    this.handleKeyDown = (event) => {
+      if (this.open && event.key === "Escape") {
+        event.stopPropagation();
+        this.hide();
+        this.focusOnTrigger();
+      }
+    };
+    this.handleDocumentKeyDown = (event) => {
+      var _a;
+      if (event.key === "Escape" && this.open && !this.closeWatcher) {
+        event.stopPropagation();
+        this.focusOnTrigger();
+        this.hide();
+        return;
+      }
+      if (event.key === "Tab") {
+        if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sl-menu-item") {
+          event.preventDefault();
+          this.hide();
+          this.focusOnTrigger();
+          return;
+        }
+        const computeClosestContaining = (element, tagName) => {
+          if (!element) return null;
+          const closest = element.closest(tagName);
+          if (closest) return closest;
+          const rootNode = element.getRootNode();
+          if (rootNode instanceof ShadowRoot) {
+            return computeClosestContaining(rootNode.host, tagName);
+          }
+          return null;
+        };
+        setTimeout(() => {
+          var _a2;
+          const activeElement = ((_a2 = this.containingElement) == null ? void 0 : _a2.getRootNode()) instanceof ShadowRoot ? getDeepestActiveElement() : document.activeElement;
+          if (!this.containingElement || computeClosestContaining(activeElement, this.containingElement.tagName.toLowerCase()) !== this.containingElement) {
+            this.hide();
+          }
+        });
+      }
+    };
+    this.handleDocumentMouseDown = (event) => {
+      const path = event.composedPath();
+      if (this.containingElement && !path.includes(this.containingElement)) {
+        this.hide();
+      }
+    };
+    this.handlePanelSelect = (event) => {
+      const target = event.target;
+      if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sl-menu") {
+        this.hide();
+        this.focusOnTrigger();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.containingElement) {
+      this.containingElement = this;
+    }
+  }
+  firstUpdated() {
+    this.panel.hidden = !this.open;
+    if (this.open) {
+      this.addOpenListeners();
+      this.popup.active = true;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeOpenListeners();
+    this.hide();
+  }
+  focusOnTrigger() {
+    const trigger = this.trigger.assignedElements({ flatten: true })[0];
+    if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
+      trigger.focus();
+    }
+  }
+  getMenu() {
+    return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sl-menu");
+  }
+  handleTriggerClick() {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+      this.focusOnTrigger();
+    }
+  }
+  async handleTriggerKeyDown(event) {
+    if ([" ", "Enter"].includes(event.key)) {
+      event.preventDefault();
+      this.handleTriggerClick();
+      return;
+    }
+    const menu = this.getMenu();
+    if (menu) {
+      const menuItems = menu.getAllItems();
+      const firstMenuItem = menuItems[0];
+      const lastMenuItem = menuItems[menuItems.length - 1];
+      if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+        event.preventDefault();
+        if (!this.open) {
+          this.show();
+          await this.updateComplete;
+        }
+        if (menuItems.length > 0) {
+          this.updateComplete.then(() => {
+            if (event.key === "ArrowDown" || event.key === "Home") {
+              menu.setCurrentItem(firstMenuItem);
+              firstMenuItem.focus();
+            }
+            if (event.key === "ArrowUp" || event.key === "End") {
+              menu.setCurrentItem(lastMenuItem);
+              lastMenuItem.focus();
+            }
+          });
+        }
+      }
+    }
+  }
+  handleTriggerKeyUp(event) {
+    if (event.key === " ") {
+      event.preventDefault();
+    }
+  }
+  handleTriggerSlotChange() {
+    this.updateAccessibleTrigger();
+  }
+  //
+  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
+  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+  // a child of the slotted element, or an element in the slotted element's shadow root.
+  //
+  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.
+  //
+  // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
+  //
+  updateAccessibleTrigger() {
+    const assignedElements = this.trigger.assignedElements({ flatten: true });
+    const accessibleTrigger = assignedElements.find((el) => getTabbableBoundary(el).start);
+    let target;
+    if (accessibleTrigger) {
+      switch (accessibleTrigger.tagName.toLowerCase()) {
+        // Shoelace buttons have to update the internal button so it's announced correctly by screen readers
+        case "sl-button":
+        case "sl-icon-button":
+          target = accessibleTrigger.button;
+          break;
+        default:
+          target = accessibleTrigger;
+      }
+      target.setAttribute("aria-haspopup", "true");
+      target.setAttribute("aria-expanded", this.open ? "true" : "false");
+    }
+  }
+  /** Shows the dropdown panel. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return chunk_5JY5FUCG.waitForEvent(this, "sl-after-show");
+  }
+  /** Hides the dropdown panel */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return chunk_5JY5FUCG.waitForEvent(this, "sl-after-hide");
+  }
+  /**
+   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   */
+  reposition() {
+    this.popup.reposition();
+  }
+  addOpenListeners() {
+    var _a;
+    this.panel.addEventListener("sl-select", this.handlePanelSelect);
+    if ("CloseWatcher" in window) {
+      (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+      this.closeWatcher = new CloseWatcher();
+      this.closeWatcher.onclose = () => {
+        this.hide();
+        this.focusOnTrigger();
+      };
+    } else {
+      this.panel.addEventListener("keydown", this.handleKeyDown);
+    }
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+    document.addEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  removeOpenListeners() {
+    var _a;
+    if (this.panel) {
+      this.panel.removeEventListener("sl-select", this.handlePanelSelect);
+      this.panel.removeEventListener("keydown", this.handleKeyDown);
+    }
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+    (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+  }
+  async handleOpenChange() {
+    if (this.disabled) {
+      this.open = false;
+      return;
+    }
+    this.updateAccessibleTrigger();
+    if (this.open) {
+      this.emit("sl-show");
+      this.addOpenListeners();
+      await chunk_5JY5FUCG.stopAnimations(this);
+      this.panel.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = chunk_5JY5FUCG.getAnimation(this, "dropdown.show", { dir: this.localize.dir() });
+      await chunk_5JY5FUCG.animateTo(this.popup.popup, keyframes, options);
+      this.emit("sl-after-show");
+    } else {
+      this.emit("sl-hide");
+      this.removeOpenListeners();
+      await chunk_5JY5FUCG.stopAnimations(this);
+      const { keyframes, options } = chunk_5JY5FUCG.getAnimation(this, "dropdown.hide", { dir: this.localize.dir() });
+      await chunk_5JY5FUCG.animateTo(this.popup.popup, keyframes, options);
+      this.panel.hidden = true;
+      this.popup.active = false;
+      this.emit("sl-after-hide");
+    }
+  }
+  render() {
+    return chunk_YHLNUJ7P.x`
+      <sl-popup
+        part="base"
+        exportparts="popup:base__popup"
+        id="dropdown"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        flip
+        shift
+        auto-size="vertical"
+        auto-size-padding="10"
+        sync=${ifDefined.o(this.sync ? this.sync : void 0)}
+        class=${classMap.e({
+      dropdown: true,
+      "dropdown--open": this.open
+    })}
+      >
+        <slot
+          name="trigger"
+          slot="anchor"
+          part="trigger"
+          class="dropdown__trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+          @keyup=${this.handleTriggerKeyUp}
+          @slotchange=${this.handleTriggerSlotChange}
+        ></slot>
+
+        <div aria-hidden=${this.open ? "false" : "true"} aria-labelledby="dropdown">
+          <slot part="panel" class="dropdown__panel"></slot>
+        </div>
+      </sl-popup>
+    `;
+  }
+};
+SlDropdown.styles = [chunk_YHLNUJ7P.component_styles_default, dropdown_styles_default];
+SlDropdown.dependencies = { "sl-popup": chunk_5JY5FUCG.SlPopup };
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_5JY5FUCG.e(".dropdown")
+], SlDropdown.prototype, "popup", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_5JY5FUCG.e(".dropdown__trigger")
+], SlDropdown.prototype, "trigger", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_5JY5FUCG.e(".dropdown__panel")
+], SlDropdown.prototype, "panel", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n({ type: Boolean, reflect: true })
+], SlDropdown.prototype, "open", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n({ reflect: true })
+], SlDropdown.prototype, "placement", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n({ type: Boolean, reflect: true })
+], SlDropdown.prototype, "disabled", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n({ attribute: "stay-open-on-select", type: Boolean, reflect: true })
+], SlDropdown.prototype, "stayOpenOnSelect", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n({ attribute: false })
+], SlDropdown.prototype, "containingElement", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n({ type: Number })
+], SlDropdown.prototype, "distance", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n({ type: Number })
+], SlDropdown.prototype, "skidding", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n({ type: Boolean })
+], SlDropdown.prototype, "hoist", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n({ reflect: true })
+], SlDropdown.prototype, "sync", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.watch("open", { waitUntilFirstUpdate: true })
+], SlDropdown.prototype, "handleOpenChange", 1);
+chunk_5JY5FUCG.setDefaultAnimation("dropdown.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+chunk_5JY5FUCG.setDefaultAnimation("dropdown.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+
+SlDropdown.define("sl-dropdown");
+
+// src/components/menu/menu.styles.ts
+var menu_styles_default = chunk_YHLNUJ7P.i`
+  :host {
+    display: block;
+    position: relative;
+    background: var(--sl-panel-background-color);
+    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
+    border-radius: var(--sl-border-radius-medium);
+    padding: var(--sl-spacing-x-small) 0;
+    overflow: auto;
+    overscroll-behavior: none;
+  }
+
+  ::slotted(sl-divider) {
+    --spacing: var(--sl-spacing-x-small);
+  }
+`;
+
+var SlMenu = class extends chunk_YHLNUJ7P.ShoelaceElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+  handleClick(event) {
+    const menuItemTypes = ["menuitem", "menuitemcheckbox"];
+    const composedPath = event.composedPath();
+    const target = composedPath.find((el) => {
+      var _a;
+      return menuItemTypes.includes(((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) || "");
+    });
+    if (!target) return;
+    const closestMenu = composedPath.find((el) => {
+      var _a;
+      return ((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) === "menu";
+    });
+    const clickHasSubmenu = closestMenu !== this;
+    if (clickHasSubmenu) return;
+    const item = target;
+    if (item.type === "checkbox") {
+      item.checked = !item.checked;
+    }
+    this.emit("sl-select", { detail: { item } });
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      event.stopPropagation();
+      item == null ? void 0 : item.click();
+    } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      const items = this.getAllItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+      if (items.length > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.key === "ArrowDown") {
+          index++;
+        } else if (event.key === "ArrowUp") {
+          index--;
+        } else if (event.key === "Home") {
+          index = 0;
+        } else if (event.key === "End") {
+          index = items.length - 1;
+        }
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+        this.setCurrentItem(items[index]);
+        items[index].focus();
+      }
+    }
+  }
+  handleMouseDown(event) {
+    const target = event.target;
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target);
+    }
+  }
+  handleSlotChange() {
+    const items = this.getAllItems();
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+    }
+  }
+  isMenuItem(item) {
+    var _a;
+    return item.tagName.toLowerCase() === "sl-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
+  }
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
+      if (el.inert || !this.isMenuItem(el)) {
+        return false;
+      }
+      return true;
+    });
+  }
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find((i) => i.getAttribute("tabindex") === "0");
+  }
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item) {
+    const items = this.getAllItems();
+    items.forEach((i) => {
+      i.setAttribute("tabindex", i === item ? "0" : "-1");
+    });
+  }
+  render() {
+    return chunk_YHLNUJ7P.x`
+      <slot
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>
+    `;
+  }
+};
+SlMenu.styles = [chunk_YHLNUJ7P.component_styles_default, menu_styles_default];
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_5JY5FUCG.e("slot")
+], SlMenu.prototype, "defaultSlot", 2);
+
+SlMenu.define("sl-menu");
+
+// src/components/menu-item/menu-item.styles.ts
+var menu_item_styles_default = chunk_YHLNUJ7P.i`
+  :host {
+    --submenu-offset: -2px;
+
+    display: block;
+  }
+
+  :host([inert]) {
+    display: none;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    line-height: var(--sl-line-height-normal);
+    letter-spacing: var(--sl-letter-spacing-normal);
+    color: var(--sl-color-neutral-700);
+    padding: var(--sl-spacing-2x-small) var(--sl-spacing-2x-small);
+    transition: var(--sl-transition-fast) fill;
+    user-select: none;
+    -webkit-user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .menu-item.menu-item--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu-item.menu-item--loading {
+    outline: none;
+    cursor: wait;
+  }
+
+  .menu-item.menu-item--loading *:not(sl-spinner) {
+    opacity: 0.5;
+  }
+
+  .menu-item--loading sl-spinner {
+    --indicator-color: currentColor;
+    --track-width: 1px;
+    position: absolute;
+    font-size: 0.75em;
+    top: calc(50% - 0.5em);
+    left: 0.65rem;
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__label {
+    flex: 1 1 auto;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .menu-item .menu-item__prefix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: var(--sl-spacing-x-small);
+  }
+
+  .menu-item .menu-item__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: var(--sl-spacing-x-small);
+  }
+
+  /* Safe triangle */
+  .menu-item--submenu-expanded::after {
+    content: '';
+    position: fixed;
+    z-index: calc(var(--sl-z-index-dropdown) - 1);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
+      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
+    );
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
+  .menu-item--submenu-expanded {
+    background-color: var(--sl-color-neutral-100);
+    color: var(--sl-color-neutral-1000);
+  }
+
+  :host(:focus-visible) .menu-item {
+    outline: none;
+    background-color: var(--sl-color-primary-600);
+    color: var(--sl-color-neutral-0);
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__check,
+  .menu-item .menu-item__chevron {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    visibility: hidden;
+  }
+
+  .menu-item--checked .menu-item__check,
+  .menu-item--has-submenu .menu-item__chevron {
+    visibility: visible;
+  }
+
+  /* Add elevation and z-index to submenus */
+  sl-popup::part(popup) {
+    box-shadow: var(--sl-shadow-large);
+    z-index: var(--sl-z-index-dropdown);
+    margin-left: var(--submenu-offset);
+  }
+
+  .menu-item--rtl sl-popup::part(popup) {
+    margin-left: calc(-1 * var(--submenu-offset));
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible) .menu-item {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+
+  ::slotted(sl-menu) {
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
+`;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const s=(i,t)=>{const e=i._$AN;if(void 0===e)return  false;for(const i of e)i._$AO?.(t,false),s(i,t);return  true},o$1=i=>{let t,e;do{if(void 0===(t=i._$AM))break;e=t._$AN,e.delete(i),i=t;}while(0===e?.size)},r=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(void 0===e)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),c(t);}};function h$1(i){ void 0!==this._$AN?(o$1(this),this._$AM=i,r(this)):this._$AM=i;}function n$1(i,t=false,e=0){const r=this._$AH,h=this._$AN;if(void 0!==h&&0!==h.size)if(t)if(Array.isArray(r))for(let i=e;i<r.length;i++)s(r[i],false),o$1(r[i]);else null!=r&&(s(r,false),o$1(r));else s(this,i);}const c=i=>{i.type==classMap.t.CHILD&&(i._$AP??=n$1,i._$AQ??=h$1);};class f extends classMap.i{constructor(){super(...arguments),this._$AN=void 0;}_$AT(i,t,e){super._$AT(i,t,e),r(this),this.isConnected=i._$AU;}_$AO(i,t=true){i!==this.isConnected&&(this.isConnected=i,i?this.reconnected?.():this.disconnected?.()),t&&(s(this,i),o$1(this));}setValue(t){if(chunk_YHLNUJ7P.f(this._$Ct))this._$Ct._$AI(t,this);else {const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0);}}disconnected(){}reconnected(){}}
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e=()=>new h;class h{}const o=new WeakMap,n=classMap.e$1(class extends f{render(i){return chunk_YHLNUJ7P.E}update(i,[s]){const e=s!==this.G;return e&&void 0!==this.G&&this.rt(void 0),(e||this.lt!==this.ct)&&(this.G=s,this.ht=i.options?.host,this.rt(this.ct=i.element)),chunk_YHLNUJ7P.E}rt(t){if(this.isConnected||(t=void 0),"function"==typeof this.G){const i=this.ht??globalThis;let s=o.get(i);void 0===s&&(s=new WeakMap,o.set(i,s)),void 0!==s.get(this.G)&&this.G.call(this.ht,void 0),s.set(this.G,t),void 0!==t&&this.G.call(this.ht,t);}else this.G.value=t;}get lt(){return "function"==typeof this.G?o.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0);}reconnected(){this.rt(this.ct);}});
+
+// src/components/menu-item/submenu-controller.ts
+var SubmenuController = class {
+  constructor(host, hasSlotController) {
+    this.popupRef = e();
+    this.enableSubmenuTimer = -1;
+    this.isConnected = false;
+    this.isPopupConnected = false;
+    this.skidding = 0;
+    this.submenuOpenDelay = 100;
+    // Set the safe triangle cursor position
+    this.handleMouseMove = (event) => {
+      this.host.style.setProperty("--safe-triangle-cursor-x", `${event.clientX}px`);
+      this.host.style.setProperty("--safe-triangle-cursor-y", `${event.clientY}px`);
+    };
+    this.handleMouseOver = () => {
+      if (this.hasSlotController.test("submenu")) {
+        this.enableSubmenu();
+      }
+    };
+    // Focus on the first menu-item of a submenu.
+    this.handleKeyDown = (event) => {
+      switch (event.key) {
+        case "Escape":
+        case "Tab":
+          this.disableSubmenu();
+          break;
+        case "ArrowLeft":
+          if (event.target !== this.host) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.host.focus();
+            this.disableSubmenu();
+          }
+          break;
+        case "ArrowRight":
+        case "Enter":
+        case " ":
+          this.handleSubmenuEntry(event);
+          break;
+      }
+    };
+    this.handleClick = (event) => {
+      var _a;
+      if (event.target === this.host) {
+        event.preventDefault();
+        event.stopPropagation();
+      } else if (event.target instanceof Element && (event.target.tagName === "sl-menu-item" || ((_a = event.target.role) == null ? void 0 : _a.startsWith("menuitem")))) {
+        this.disableSubmenu();
+      }
+    };
+    // Close this submenu on focus outside of the parent or any descendants.
+    this.handleFocusOut = (event) => {
+      if (event.relatedTarget && event.relatedTarget instanceof Element && this.host.contains(event.relatedTarget)) {
+        return;
+      }
+      this.disableSubmenu();
+    };
+    // Prevent the parent menu-item from getting focus on mouse movement on the submenu
+    this.handlePopupMouseover = (event) => {
+      event.stopPropagation();
+    };
+    // Set the safe triangle values for the submenu when the position changes
+    this.handlePopupReposition = () => {
+      const submenuSlot = this.host.renderRoot.querySelector("slot[name='submenu']");
+      const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sl-menu")[0];
+      const isRtl = getComputedStyle(this.host).direction === "rtl";
+      if (!menu) {
+        return;
+      }
+      const { left, top, width, height } = menu.getBoundingClientRect();
+      this.host.style.setProperty("--safe-triangle-submenu-start-x", `${isRtl ? left + width : left}px`);
+      this.host.style.setProperty("--safe-triangle-submenu-start-y", `${top}px`);
+      this.host.style.setProperty("--safe-triangle-submenu-end-x", `${isRtl ? left + width : left}px`);
+      this.host.style.setProperty("--safe-triangle-submenu-end-y", `${top + height}px`);
+    };
+    (this.host = host).addController(this);
+    this.hasSlotController = hasSlotController;
+  }
+  hostConnected() {
+    if (this.hasSlotController.test("submenu") && !this.host.disabled) {
+      this.addListeners();
+    }
+  }
+  hostDisconnected() {
+    this.removeListeners();
+  }
+  hostUpdated() {
+    if (this.hasSlotController.test("submenu") && !this.host.disabled) {
+      this.addListeners();
+      this.updateSkidding();
+    } else {
+      this.removeListeners();
+    }
+  }
+  addListeners() {
+    if (!this.isConnected) {
+      this.host.addEventListener("mousemove", this.handleMouseMove);
+      this.host.addEventListener("mouseover", this.handleMouseOver);
+      this.host.addEventListener("keydown", this.handleKeyDown);
+      this.host.addEventListener("click", this.handleClick);
+      this.host.addEventListener("focusout", this.handleFocusOut);
+      this.isConnected = true;
+    }
+    if (!this.isPopupConnected) {
+      if (this.popupRef.value) {
+        this.popupRef.value.addEventListener("mouseover", this.handlePopupMouseover);
+        this.popupRef.value.addEventListener("sl-reposition", this.handlePopupReposition);
+        this.isPopupConnected = true;
+      }
+    }
+  }
+  removeListeners() {
+    if (this.isConnected) {
+      this.host.removeEventListener("mousemove", this.handleMouseMove);
+      this.host.removeEventListener("mouseover", this.handleMouseOver);
+      this.host.removeEventListener("keydown", this.handleKeyDown);
+      this.host.removeEventListener("click", this.handleClick);
+      this.host.removeEventListener("focusout", this.handleFocusOut);
+      this.isConnected = false;
+    }
+    if (this.isPopupConnected) {
+      if (this.popupRef.value) {
+        this.popupRef.value.removeEventListener("mouseover", this.handlePopupMouseover);
+        this.popupRef.value.removeEventListener("sl-reposition", this.handlePopupReposition);
+        this.isPopupConnected = false;
+      }
+    }
+  }
+  handleSubmenuEntry(event) {
+    const submenuSlot = this.host.renderRoot.querySelector("slot[name='submenu']");
+    if (!submenuSlot) {
+      console.error("Cannot activate a submenu if no corresponding menuitem can be found.", this);
+      return;
+    }
+    let menuItems = null;
+    for (const elt of submenuSlot.assignedElements()) {
+      menuItems = elt.querySelectorAll("sl-menu-item, [role^='menuitem']");
+      if (menuItems.length !== 0) {
+        break;
+      }
+    }
+    if (!menuItems || menuItems.length === 0) {
+      return;
+    }
+    menuItems[0].setAttribute("tabindex", "0");
+    for (let i = 1; i !== menuItems.length; ++i) {
+      menuItems[i].setAttribute("tabindex", "-1");
+    }
+    if (this.popupRef.value) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.popupRef.value.active) {
+        if (menuItems[0] instanceof HTMLElement) {
+          menuItems[0].focus();
+        }
+      } else {
+        this.enableSubmenu(false);
+        this.host.updateComplete.then(() => {
+          if (menuItems[0] instanceof HTMLElement) {
+            menuItems[0].focus();
+          }
+        });
+        this.host.requestUpdate();
+      }
+    }
+  }
+  setSubmenuState(state) {
+    if (this.popupRef.value) {
+      if (this.popupRef.value.active !== state) {
+        this.popupRef.value.active = state;
+        this.host.requestUpdate();
+      }
+    }
+  }
+  // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the
+  // newly opened menu.
+  enableSubmenu(delay = true) {
+    if (delay) {
+      window.clearTimeout(this.enableSubmenuTimer);
+      this.enableSubmenuTimer = window.setTimeout(() => {
+        this.setSubmenuState(true);
+      }, this.submenuOpenDelay);
+    } else {
+      this.setSubmenuState(true);
+    }
+  }
+  disableSubmenu() {
+    window.clearTimeout(this.enableSubmenuTimer);
+    this.setSubmenuState(false);
+  }
+  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
+  updateSkidding() {
+    var _a;
+    if (!((_a = this.host.parentElement) == null ? void 0 : _a.computedStyleMap)) {
+      return;
+    }
+    const styleMap = this.host.parentElement.computedStyleMap();
+    const attrs = ["padding-top", "border-top-width", "margin-top"];
+    const skidding = attrs.reduce((accumulator, attr) => {
+      var _a2;
+      const styleValue = (_a2 = styleMap.get(attr)) != null ? _a2 : new CSSUnitValue(0, "px");
+      const unitValue = styleValue instanceof CSSUnitValue ? styleValue : new CSSUnitValue(0, "px");
+      const pxValue = unitValue.to("px");
+      return accumulator - pxValue.value;
+    }, 0);
+    this.skidding = skidding;
+  }
+  isExpanded() {
+    return this.popupRef.value ? this.popupRef.value.active : false;
+  }
+  renderSubmenu() {
+    const isRtl = getComputedStyle(this.host).direction === "rtl";
+    if (!this.isConnected) {
+      return chunk_YHLNUJ7P.x` <slot name="submenu" hidden></slot> `;
+    }
+    return chunk_YHLNUJ7P.x`
+      <sl-popup
+        ${n(this.popupRef)}
+        placement=${isRtl ? "left-start" : "right-start"}
+        anchor="anchor"
+        flip
+        flip-fallback-strategy="best-fit"
+        skidding="${this.skidding}"
+        strategy="fixed"
+        auto-size="vertical"
+        auto-size-padding="10"
+      >
+        <slot name="submenu"></slot>
+      </sl-popup>
+    `;
+  }
+};
+
+// src/components/spinner/spinner.styles.ts
+var spinner_styles_default = chunk_YHLNUJ7P.i`
+  :host {
+    --track-width: 2px;
+    --track-color: rgb(128 128 128 / 25%);
+    --indicator-color: var(--sl-color-primary-600);
+    --speed: 2s;
+
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+    flex: none;
+  }
+
+  .spinner {
+    flex: 1 1 auto;
+    height: 100%;
+    width: 100%;
+  }
+
+  .spinner__track,
+  .spinner__indicator {
+    fill: none;
+    stroke-width: var(--track-width);
+    r: calc(0.5em - var(--track-width) / 2);
+    cx: 0.5em;
+    cy: 0.5em;
+    transform-origin: 50% 50%;
+  }
+
+  .spinner__track {
+    stroke: var(--track-color);
+    transform-origin: 0% 0%;
+  }
+
+  .spinner__indicator {
+    stroke: var(--indicator-color);
+    stroke-linecap: round;
+    stroke-dasharray: 150% 75%;
+    animation: spin var(--speed) linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+      stroke-dasharray: 0.05em, 3em;
+    }
+
+    50% {
+      transform: rotate(450deg);
+      stroke-dasharray: 1.375em, 1.375em;
+    }
+
+    100% {
+      transform: rotate(1080deg);
+      stroke-dasharray: 0.05em, 3em;
+    }
+  }
+`;
+
+var SlSpinner = class extends chunk_YHLNUJ7P.ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new chunk_6CTB5ZDJ.LocalizeController(this);
+  }
+  render() {
+    return chunk_YHLNUJ7P.x`
+      <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term("loading")}>
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `;
+  }
+};
+SlSpinner.styles = [chunk_YHLNUJ7P.component_styles_default, spinner_styles_default];
+
+var SlMenuItem = class extends chunk_YHLNUJ7P.ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new chunk_6CTB5ZDJ.LocalizeController(this);
+    this.type = "normal";
+    this.checked = false;
+    this.value = "";
+    this.loading = false;
+    this.disabled = false;
+    this.hasSlotController = new HasSlotController(this, "submenu");
+    this.submenuController = new SubmenuController(this, this.hasSlotController);
+    this.handleHostClick = (event) => {
+      if (this.disabled) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+    this.handleMouseOver = (event) => {
+      this.focus();
+      event.stopPropagation();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleHostClick);
+    this.addEventListener("mouseover", this.handleMouseOver);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleHostClick);
+    this.removeEventListener("mouseover", this.handleMouseOver);
+  }
+  handleDefaultSlotChange() {
+    const textLabel = this.getTextLabel();
+    if (typeof this.cachedTextLabel === "undefined") {
+      this.cachedTextLabel = textLabel;
+      return;
+    }
+    if (textLabel !== this.cachedTextLabel) {
+      this.cachedTextLabel = textLabel;
+      this.emit("slotchange", { bubbles: true, composed: false, cancelable: false });
+    }
+  }
+  handleCheckedChange() {
+    if (this.checked && this.type !== "checkbox") {
+      this.checked = false;
+      console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
+      return;
+    }
+    if (this.type === "checkbox") {
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    } else {
+      this.removeAttribute("aria-checked");
+    }
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleTypeChange() {
+    if (this.type === "checkbox") {
+      this.setAttribute("role", "menuitemcheckbox");
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    } else {
+      this.setAttribute("role", "menuitem");
+      this.removeAttribute("aria-checked");
+    }
+  }
+  /** Returns a text label based on the contents of the menu item's default slot. */
+  getTextLabel() {
+    return getTextContent(this.defaultSlot);
+  }
+  isSubmenu() {
+    return this.hasSlotController.test("submenu");
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    const isSubmenuExpanded = this.submenuController.isExpanded();
+    return chunk_YHLNUJ7P.x`
+      <div
+        id="anchor"
+        part="base"
+        class=${classMap.e({
+      "menu-item": true,
+      "menu-item--rtl": isRtl,
+      "menu-item--checked": this.checked,
+      "menu-item--disabled": this.disabled,
+      "menu-item--loading": this.loading,
+      "menu-item--has-submenu": this.isSubmenu(),
+      "menu-item--submenu-expanded": isSubmenuExpanded
+    })}
+        ?aria-haspopup="${this.isSubmenu()}"
+        ?aria-expanded="${isSubmenuExpanded ? true : false}"
+      >
+        <span part="checked-icon" class="menu-item__check">
+          <sl-icon name="check" library="system" aria-hidden="true"></sl-icon>
+        </span>
+
+        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+
+        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+
+        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+
+        <span part="submenu-icon" class="menu-item__chevron">
+          <sl-icon name=${isRtl ? "chevron-left" : "chevron-right"} library="system" aria-hidden="true"></sl-icon>
+        </span>
+
+        ${this.submenuController.renderSubmenu()}
+        ${this.loading ? chunk_YHLNUJ7P.x` <sl-spinner part="spinner" exportparts="base:spinner__base"></sl-spinner> ` : ""}
+      </div>
+    `;
+  }
+};
+SlMenuItem.styles = [chunk_YHLNUJ7P.component_styles_default, menu_item_styles_default];
+SlMenuItem.dependencies = {
+  "sl-icon": chunk_YHLNUJ7P.SlIcon,
+  "sl-popup": chunk_5JY5FUCG.SlPopup,
+  "sl-spinner": SlSpinner
+};
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_5JY5FUCG.e("slot:not([name])")
+], SlMenuItem.prototype, "defaultSlot", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_5JY5FUCG.e(".menu-item")
+], SlMenuItem.prototype, "menuItem", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n()
+], SlMenuItem.prototype, "type", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n({ type: Boolean, reflect: true })
+], SlMenuItem.prototype, "checked", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n()
+], SlMenuItem.prototype, "value", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n({ type: Boolean, reflect: true })
+], SlMenuItem.prototype, "loading", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.n({ type: Boolean, reflect: true })
+], SlMenuItem.prototype, "disabled", 2);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.watch("checked")
+], SlMenuItem.prototype, "handleCheckedChange", 1);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.watch("disabled")
+], SlMenuItem.prototype, "handleDisabledChange", 1);
+chunk_YHLNUJ7P.__decorateClass([
+  chunk_YHLNUJ7P.watch("type")
+], SlMenuItem.prototype, "handleTypeChange", 1);
+
+SlMenuItem.define("sl-menu-item");
+
+exports.HasSlotController = HasSlotController;