@orangelogic/design-system 2.44.0 → 2.45.0

package/library/components/menu-item.js

@@ -1,15 +1,680 @@
-import "../chunks/custom-element.fmLrnDZr.js";
-import "../chunks/component.styles.DtouHn2g.js";
-import "../chunks/i18n.D33BKrRs.js";
-import "../chunks/slot.DJLm4Dig.js";
-import "../chunks/watch.BCJD77bD.js";
-import "../chunks/query.BBf1UFkC.js";
-import "../chunks/class-map.DqNfBvJI.js";
-import "../chunks/if-defined.CKupVaWs.js";
-import "./icon.js";
-import "../chunks/popup.CJrePm7n.js";
-import "./spinner.js";
-import { C as x } from "../chunks/menu-item.DOFCmq0Z.js";
+import { i as k, x as h, n as r, C as S, c as C } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as w } from "../chunks/component.styles.DtouHn2g.js";
+import { d as v, L as _ } from "../chunks/i18n.D33BKrRs.js";
+import { H as M, g as L } from "../chunks/slot.DJLm4Dig.js";
+import { w as b } from "../chunks/watch.BCJD77bD.js";
+import { e as d } from "../chunks/query.BBf1UFkC.js";
+import { e as x } from "../chunks/class-map.DqNfBvJI.js";
+import { o as m } from "../chunks/if-defined.CKupVaWs.js";
+import P from "./icon.js";
+import { C as E } from "../chunks/popup.CJrePm7n.js";
+import z from "./spinner.js";
+import { e as D, n as R } from "../chunks/ref.BDmlFGTP.js";
+const $ = k`
+  :host {
+    --submenu-offset: -2px;
+    --prefix-font-size: var(--cx-font-size-small);
+    --prefix-color: var(--cx-color-neutral-500);
+    --label-color: var(--cx-color-neutral);
+    --suffix-color: var(--cx-color-neutral);
+    --font-weight: var(--cx-font-weight-regular);
+
+    display: block;
+  }
+
+  :host([inert]) {
+    display: none;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    text-decoration: none;
+    font-family: var(--cx-font-sans);
+    font-size: var(--cx-font-size-small);
+    font-weight: var(--font-weight, var(--cx-font-weight-regular));
+    line-height: var(--cx-line-height-large);
+    letter-spacing: var(--cx-letter-spacing-normal);
+    color: var(--cx-color-neutral);
+    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
+    transition: var(--cx-transition-fast) fill;
+    background-color: var(--cx-menu-item-background-color, unset);
+    user-select: none;
+    -webkit-user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .menu-item.menu-item--disabled {
+    outline: none;
+    cursor: default;
+  }
+
+  .menu-item.menu-item--disabled .menu-item__label,
+  .menu-item.menu-item--disabled .menu-item__prefix,
+  .menu-item.menu-item--disabled .menu-item__chevron {
+    opacity: 0.5;
+  }
+
+  .menu-item.menu-item--disabled .menu-item__suffix:not(:slotted(cx-tooltip)) {
+    opacity: 0.5;
+  }
+
+  .menu-item.menu-item--loading {
+    outline: none;
+    cursor: wait;
+  }
+
+  .menu-item.menu-item--loading *:not(cx-spinner) {
+    opacity: 0.5;
+  }
+
+  .menu-item--loading cx-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 {
+    color: var(--label-color, var(--cx-color-neutral));
+    flex: 1 1 auto;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin: auto;
+  }
+
+  .menu-item--checked .menu-item__label {
+    color: var(--cx-color-primary);
+  }
+
+  .menu-item .menu-item__prefix {
+    color: var(--prefix-color, var(--cx-color-neutral-500));
+    font-size: var(--prefix-font-size, var(--cx-font-size-small));
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item--checked {
+    --prefix-color: var(--cx-color-primary);
+    --suffix-color: var(--cx-color-primary);
+  }
+
+  .menu-item--checked .menu-item__check {
+    color: var(--cx-color-primary);
+  }
+
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: var(--cx-spacing-x-small);
+  }
+
+  .menu-item .menu-item__suffix {
+    color: var(--suffix-color);
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: var(--cx-spacing-x-small);
+  }
+
+  /* Safe triangle */
+  .menu-item--submenu-expanded::after {
+    content: '';
+    position: fixed;
+    z-index: calc(var(--cx-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)
+    );
+  }
+
+  @media (pointer: none), (pointer: coarse) {
+    .menu-item--submenu-expanded::after {
+      display: none;
+    }
+  }
+
+  :host(:focus-visible) {
+    outline: var(--cx-focus-ring);
+    outline-offset: calc(-1 * var(--cx-focus-ring-width));
+  }
+
+  :host(:hover:not([aria-disabled='true'], :focus-visible, .disable-hover))
+    .menu-item,
+  .menu-item--submenu-expanded {
+    background-color: var(--cx-menu-item-background-color-hover);
+    color: var(--cx-color-neutral-1000);
+  }
+
+  :host(:not([aria-disabled='true'])) .menu-item--active {
+    background-color: var(
+      --cx-menu-item-background-color-active,
+      var(--cx-menu-item-background-color-hover)
+    );
+    color: var(--cx-color-neutral-1000);
+  }
+
+  :host(:hover:not([aria-disabled='true'], :focus-visible, .disable-hover))
+    .menu-item--active {
+    background-color: var(
+      --cx-menu-item-background-color-active-hover,
+      var(--cx-menu-item-background-color-active)
+    );
+  }
+
+  :host(:focus-visible) .menu-item {
+    outline: none;
+    background-color: var(--cx-menu-item-background-color-hover);
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__check,
+  .menu-item .menu-item__chevron {
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    visibility: hidden;
+  }
+
+  .menu-item .menu-item__check {
+    display: var(--checked-icon-display, flex);
+    margin-right: var(--cx-spacing-2x-small);
+  }
+
+  .menu-item .menu-item__chevron {
+    display: var(--submenu-icon-display, flex);
+  }
+
+  .menu-item--checked .menu-item__check,
+  .menu-item--has-submenu .menu-item__chevron {
+    visibility: visible;
+  }
+
+  /* Add elevation and z-index to submenus */
+  cx-popup::part(popup) {
+    border: var(--cx-panel-border-width) solid var(--cx-popup-border-color);
+    border-radius: var(--cx-border-radius-large);
+    box-shadow: var(--cx-shadow-large);
+    z-index: var(--cx-z-index-dropdown);
+    margin-left: var(--submenu-offset, -2px);
+    overflow: hidden;
+  }
+
+  .menu-item--rtl cx-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;
+    }
+  }
+
+  /* When users slot a menu, make sure it conforms to the popup's auto-size */
+  ::slotted(cx-menu) {
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
+`;
+class T {
+  constructor(e, s) {
+    this.popupRef = D(), this.parent = null, this.enableSubmenuTimer = -1, this.isHorizontalMenu = !1, this.isConnected = !1, this.isPopupConnected = !1, this.skidding = 0, this.submenuOpenDelay = 100, (this.host = e).addController(this), this.hasSlotController = s, this.handleMouseMove = this.handleMouseMove.bind(this), this.handleMouseOver = this.handleMouseOver.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this), this.handleClick = this.handleClick.bind(this), this.handleSubmenuIconClick = this.handleSubmenuIconClick.bind(this), this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this), this.handleMouseLeave = this.handleMouseLeave.bind(this), this.handlePopupMouseover = this.handlePopupMouseover.bind(this), this.handlePopupReposition = this.handlePopupReposition.bind(this);
+  }
+  get popup() {
+    return this.popupRef.value;
+  }
+  hostConnected() {
+    this.parent = this.host.closest("cx-menu"), this.hasSlotController.test("submenu") && !this.host.disabled && (this.addListeners(), this.updateSkidding()), this.parent && (this.syncIsHorizontalMenu(), this.parentObserver = new MutationObserver(() => {
+      this.syncIsHorizontalMenu();
+    }), this.parentObserver.observe(this.parent, {
+      attributeFilter: ["horizontal"]
+    }));
+  }
+  hostDisconnected() {
+    this.removeListeners(), this.parentObserver && this.parentObserver.disconnect();
+  }
+  hostUpdated() {
+    this.removeListeners(), this.hasSlotController.test("submenu") && !this.host.disabled && (this.addListeners(), this.updateSkidding(), this.syncIsHorizontalMenu());
+  }
+  addListeners() {
+    this.isConnected || (this.host.addEventListener("mousemove", this.handleMouseMove), (this.host.submenuTrigger === "both" || this.host.submenuTrigger === "hover") && (this.host.addEventListener("mouseover", this.handleMouseOver), this.host.addEventListener("mouseleave", this.handleMouseLeave)), (this.host.submenuTrigger === "both" || this.host.submenuTrigger === "click") && (this.host.addEventListener("click", this.handleClick), this.host.submenuIcon?.addEventListener(
+      "click",
+      this.handleSubmenuIconClick
+    ), document.addEventListener("mousedown", this.handleDocumentMouseDown)), this.host.addEventListener("keydown", this.handleKeyDown), this.isConnected = !0), this.isPopupConnected || this.popupRef.value && (this.popupRef.value.addEventListener(
+      "mouseover",
+      this.handlePopupMouseover
+    ), this.popupRef.value.addEventListener(
+      "cx-reposition",
+      this.handlePopupReposition
+    ), this.isPopupConnected = !0);
+  }
+  removeListeners() {
+    this.isConnected && (this.host.removeEventListener("mousemove", this.handleMouseMove), this.host.removeEventListener("mouseover", this.handleMouseOver), this.host.removeEventListener("mouseleave", this.handleMouseLeave), this.host.removeEventListener("click", this.handleClick), this.host.submenuIcon?.removeEventListener(
+      "click",
+      this.handleSubmenuIconClick
+    ), document.removeEventListener("mousedown", this.handleDocumentMouseDown), this.host.removeEventListener("keydown", this.handleKeyDown), this.isConnected = !1), this.isPopupConnected && this.popupRef.value && (this.popupRef.value.removeEventListener(
+      "mouseover",
+      this.handlePopupMouseover
+    ), this.popupRef.value.removeEventListener(
+      "cx-reposition",
+      this.handlePopupReposition
+    ), this.isPopupConnected = !1);
+  }
+  syncIsHorizontalMenu() {
+    this.parent && (this.isHorizontalMenu = this.parent.hasAttribute("horizontal"));
+  }
+  // Set the safe triangle cursor position
+  handleMouseMove(e) {
+    const s = getComputedStyle(this.host).direction === "rtl" || this.popupRef.value?.dataset.currentPlacement?.startsWith("left");
+    this.host.style.setProperty(
+      "--safe-triangle-cursor-x",
+      `${e.clientX + (s ? 1 : 0)}px`
+    ), this.host.style.setProperty(
+      "--safe-triangle-cursor-y",
+      `${e.clientY}px`
+    );
+  }
+  handleMouseOver() {
+    this.hasSlotController.test("submenu") && this.enableSubmenu();
+  }
+  handleSubmenuEntry(e) {
+    const s = this.host.renderRoot.querySelector("slot[name='submenu']");
+    if (!s) {
+      console.error(
+        "Cannot activate a submenu if no corresponding menuitem can be found.",
+        this
+      );
+      return;
+    }
+    let t = null;
+    for (const a of s.assignedElements())
+      if (t = a.querySelectorAll("cx-menu-item, [role^='menuitem']"), t.length !== 0)
+        break;
+    if (!t || t.length === 0) {
+      this.host.lazy && (e.preventDefault(), e.stopPropagation(), this.enableSubmenu(!1));
+      return;
+    }
+    t[0].setAttribute("tabindex", "0");
+    for (let a = 1; a !== t.length; ++a)
+      t[a].setAttribute("tabindex", "-1");
+    this.popupRef.value && (e.preventDefault(), e.stopPropagation(), this.popupRef.value.active ? t[0] instanceof HTMLElement && t[0].focus() : (this.enableSubmenu(!1), this.popupRef.value.addEventListener("cx-opened", () => {
+      t[0] instanceof HTMLElement && t[0].focus();
+    }), this.host.requestUpdate()));
+  }
+  // Focus on the first menu-item of a submenu.
+  handleKeyDown(e) {
+    const s = () => {
+      e.preventDefault(), e.stopPropagation(), this.host.focus(), this.disableSubmenu();
+    };
+    switch (e.key) {
+      case "Tab": {
+        this.disableSubmenu();
+        break;
+      }
+      case "Escape": {
+        this.host.focus(), this.disableSubmenu();
+        break;
+      }
+      case "ArrowLeft": {
+        e.target !== this.host && !this.isHorizontalMenu && s();
+        break;
+      }
+      case "ArrowUp": {
+        e.target !== this.host && this.isHorizontalMenu && s();
+        break;
+      }
+      case "ArrowRight": {
+        this.isHorizontalMenu || this.handleSubmenuEntry(e);
+        break;
+      }
+      case "ArrowDown": {
+        this.isHorizontalMenu && this.handleSubmenuEntry(e);
+        break;
+      }
+    }
+  }
+  handleClick(e) {
+    e.target === this.host ? (e.preventDefault(), e.stopPropagation(), this.isExpanded() ? this.disableSubmenu() : e.isTrusted && this.enableSubmenu()) : e.target instanceof Element && (e.target.tagName === "cx-menu-item" || e.target.role?.startsWith("menuitem"));
+  }
+  handleSubmenuIconClick(e) {
+    e.preventDefault(), e.stopPropagation(), this.isExpanded() ? this.disableSubmenu() : this.enableSubmenu();
+  }
+  handleDocumentMouseDown(e) {
+    const s = e.composedPath();
+    this.host && !s.includes(this.host) && this.disableSubmenu();
+  }
+  // Close this submenu on focus outside of the parent or any descendants.
+  handleMouseLeave(e) {
+    e.relatedTarget && e.relatedTarget instanceof Element && this.host.contains(e.relatedTarget) || this.disableSubmenu();
+  }
+  // Prevent the parent menu-item from getting focus on mouse movement on the submenu
+  handlePopupMouseover(e) {
+    e.stopPropagation();
+  }
+  // Set the safe triangle values for the submenu when the position changes
+  handlePopupReposition() {
+    const s = this.host.renderRoot.querySelector("slot[name='submenu']")?.assignedElements({ flatten: !0 }).filter((p) => p.localName === "cx-menu")[0], t = getComputedStyle(this.host).direction === "rtl" || this.popupRef.value?.dataset.currentPlacement?.startsWith("left");
+    if (!s)
+      return;
+    const { height: a, left: l, top: u, width: c } = s.getBoundingClientRect();
+    this.host.style.setProperty(
+      "--safe-triangle-submenu-start-x",
+      `${t ? l + c : l}px`
+    ), this.host.style.setProperty("--safe-triangle-submenu-start-y", `${u}px`), this.host.style.setProperty(
+      "--safe-triangle-submenu-end-x",
+      `${t ? l + c : l}px`
+    ), this.host.style.setProperty(
+      "--safe-triangle-submenu-end-y",
+      `${u + a}px`
+    );
+  }
+  setSubmenuState(e) {
+    this.popupRef.value && this.popupRef.value.active !== e && (this.popupRef.value.active = e, 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(e = !0) {
+    this.host.lazy && this.host.emit("cx-lazy-load"), e ? (window.clearTimeout(this.enableSubmenuTimer), this.enableSubmenuTimer = window.setTimeout(() => {
+      this.setSubmenuState(!0);
+    }, this.submenuOpenDelay)) : this.setSubmenuState(!0);
+  }
+  disableSubmenu() {
+    window.clearTimeout(this.enableSubmenuTimer), this.setSubmenuState(!1);
+  }
+  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
+  updateSkidding() {
+    if (!this.host.parentElement?.computedStyleMap)
+      return;
+    const e = this.host.parentElement.computedStyleMap(), s = v(this.host) === "rtl", t = this.host.submenuPlacement ?? (s ? "left-start" : "right-start"), a = t.startsWith("left") || t.startsWith("right");
+    let l = [];
+    a && (t.endsWith("-start") ? l = ["padding-top", "border-top-width", "margin-top"] : t.endsWith("-end") && (l = ["padding-bottom", "border-bottom-width", "margin-bottom"]));
+    const u = l.reduce((c, p) => {
+      const f = e.get(p) ?? new CSSUnitValue(0, "px"), g = (f instanceof CSSUnitValue ? f : new CSSUnitValue(0, "px")).to("px"), y = t.endsWith("-end") ? 1 : -1;
+      return c + g.value * y;
+    }, 0);
+    this.skidding = u;
+  }
+  isExpanded() {
+    return this.popupRef.value ? this.popupRef.value.active : !1;
+  }
+  renderSubmenu() {
+    const e = v(this.host) === "rtl";
+    if (!this.hasSlotController.test("submenu"))
+      return null;
+    const s = this.host.submenuPlacement ?? (e ? "left-start" : "right-start");
+    return h`
+      <cx-popup
+        ${R(this.popupRef)}
+        placement=${s}
+        anchor="anchor"
+        part="submenu-popup"
+        flip
+        flip-fallback-strategy="best-fit"
+        skidding=${this.skidding}
+        strategy="overlay"
+        auto-size="both"
+        auto-size-padding="10"
+        ?shift=${!!this.host.shiftBoundary}
+        .flipBoundary=${this.host.flipBoundary}
+        .shiftBoundary=${this.host.shiftBoundary}
+      >
+        <slot name="submenu"></slot>
+      </cx-popup>
+    `;
+  }
+}
+var O = Object.defineProperty, H = Object.getOwnPropertyDescriptor, n = (o, e, s, t) => {
+  for (var a = t > 1 ? void 0 : t ? H(e, s) : e, l = o.length - 1, u; l >= 0; l--)
+    (u = o[l]) && (a = (t ? u(e, s, a) : u(a)) || a);
+  return t && a && O(e, s, a), a;
+};
+let i = class extends S {
+  constructor() {
+    super(), this.type = "normal", this.submenuTrigger = "both", this.checked = !1, this.value = "", this.href = "", this.rel = "noreferrer noopener", this.loading = !1, this.disabled = !1, this.active = !1, this.readonly = !1, this.menu = "", this.lazy = !1, this.localize = new _(this), this.hasSlotController = new M(
+      this,
+      "submenu",
+      "submenu-icon"
+    ), this.submenuController = new T(
+      this,
+      this.hasSlotController
+    ), this.handleDocumentWheel = (o) => {
+      const e = o.composedPath();
+      this.submenuController.isExpanded() && (!this.submenuController.popup || !e.includes(this.submenuController.popup)) && (o.preventDefault(), this.submenuController.disableSubmenu());
+    }, this.handleHostClick = this.handleHostClick.bind(this), this.handleMouseOver = this.handleMouseOver.bind(this);
+  }
+  runFirstUpdated() {
+    this.addEventListener("click", this.handleHostClick), this.addEventListener("mouseover", this.handleMouseOver), document.addEventListener("wheel", this.handleDocumentWheel, {
+      passive: !1
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.handleHostClick), this.removeEventListener("mouseover", this.handleMouseOver), document.removeEventListener("wheel", this.handleDocumentWheel);
+  }
+  handleDefaultSlotChange() {
+    const o = this.getTextLabel();
+    if (typeof this.cachedTextLabel > "u") {
+      this.cachedTextLabel = o;
+      return;
+    }
+    o !== this.cachedTextLabel && (this.cachedTextLabel = o, this.emit("slotchange", {
+      bubbles: !0,
+      cancelable: !1,
+      composed: !1
+    }));
+  }
+  handleHostClick(o) {
+    (this.disabled || this.readonly) && (o.target === this && o.preventDefault(), o.stopImmediatePropagation()), this.href && this.anchor && this.anchor.click();
+  }
+  handleMouseOver(o) {
+    o.stopPropagation();
+  }
+  handleAnchorClick(o) {
+    o.stopPropagation();
+  }
+  handleCheckedChange() {
+    if (this.checked && this.type !== "checkbox") {
+      this.checked = !1, console.error(
+        'The checked attribute can only be used on menu items with type="checkbox"',
+        this
+      );
+      return;
+    }
+    this.type === "checkbox" ? this.setAttribute("aria-checked", this.checked ? "true" : "false") : this.removeAttribute("aria-checked");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleTypeChange() {
+    this.type === "checkbox" ? (this.setAttribute("role", "menuitemcheckbox"), this.setAttribute("aria-checked", this.checked ? "true" : "false")) : (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 L(this.defaultSlot);
+  }
+  isSubmenu() {
+    return this.hasSlotController.test("submenu") || !!this.menu.trim();
+  }
+  renderBase(o) {
+    const e = !!this.href, s = this.localize.dir() === "rtl", t = this.submenuController.isExpanded();
+    return e ? h`
+        <a
+          id="anchor"
+          part="base"
+          class=${x({
+      "menu-item": !0,
+      "menu-item--active": this.active,
+      "menu-item--checkbox": this.type === "checkbox",
+      "menu-item--checked": this.checked,
+      "menu-item--disabled": this.disabled,
+      "menu-item--has-submenu": this.isSubmenu(),
+      "menu-item--loading": this.loading,
+      "menu-item--rtl": s,
+      "menu-item--submenu-expanded": t
+    })}
+          aria-haspopup=${this.isSubmenu()}
+          href=${m(this.href)}
+          target=${m(this.target)}
+          download=${m(this.download)}
+          rel=${m(this.rel)}
+          aria-label=${this.getTextLabel()}
+          ?inert=${this.disabled}
+          @click=${this.handleAnchorClick}
+        >
+          ${o}
+        </a>
+      ` : h`
+      <div
+        id="anchor"
+        part="base"
+        class=${x({
+      "menu-item": !0,
+      "menu-item--active": this.active,
+      "menu-item--checkbox": this.type === "checkbox",
+      "menu-item--checked": this.checked,
+      "menu-item--disabled": this.disabled,
+      "menu-item--has-submenu": this.isSubmenu(),
+      "menu-item--loading": this.loading,
+      "menu-item--rtl": s,
+      "menu-item--submenu-expanded": t
+    })}
+        aria-haspopup=${this.isSubmenu()}
+        aria-label=${this.getTextLabel()}
+      >
+        ${o}
+      </div>
+    `;
+  }
+  render() {
+    const o = this.localize.dir() === "rtl";
+    let e;
+    return this.submenuPlacement && (this.submenuPlacement.startsWith("top") || this.submenuPlacement.startsWith("bottom")) ? e = "keyboard_arrow_down" : e = o ? "chevron_left" : "chevron_right", this.renderBase(h`
+      <span part="checked-icon" class="menu-item__check">
+        <cx-icon name="check"></cx-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>
+
+      <slot name="submenu-icon" part="submenu-icon" class="menu-item__chevron">
+        <cx-icon name=${e} aria-hidden="true"></cx-icon>
+      </slot>
+
+      ${this.submenuController.renderSubmenu()}
+      ${this.loading ? h`
+            <cx-spinner
+              part="spinner"
+              exportparts="base:spinner__base"
+            ></cx-spinner>
+          ` : ""}
+    `);
+  }
+};
+i.styles = [w, $];
+i.dependencies = {
+  "cx-icon": P,
+  "cx-popup": E,
+  "cx-spinner": z
+};
+n([
+  d("slot:not([name])")
+], i.prototype, "defaultSlot", 2);
+n([
+  d("a#anchor", !0)
+], i.prototype, "anchor", 2);
+n([
+  d(".menu-item")
+], i.prototype, "menuItem", 2);
+n([
+  d(".menu-item__chevron")
+], i.prototype, "submenuIcon", 2);
+n([
+  r()
+], i.prototype, "type", 2);
+n([
+  r({ attribute: "submenu-trigger" })
+], i.prototype, "submenuTrigger", 2);
+n([
+  r({ reflect: !0, type: Boolean })
+], i.prototype, "checked", 2);
+n([
+  r()
+], i.prototype, "value", 2);
+n([
+  r()
+], i.prototype, "href", 2);
+n([
+  r()
+], i.prototype, "target", 2);
+n([
+  r()
+], i.prototype, "rel", 2);
+n([
+  r()
+], i.prototype, "download", 2);
+n([
+  r({ reflect: !0, type: Boolean })
+], i.prototype, "loading", 2);
+n([
+  r({ reflect: !0, type: Boolean })
+], i.prototype, "disabled", 2);
+n([
+  r({ reflect: !0, type: Boolean })
+], i.prototype, "active", 2);
+n([
+  r({ reflect: !0, type: Boolean })
+], i.prototype, "readonly", 2);
+n([
+  r({ attribute: "flip-boundary", type: Object })
+], i.prototype, "flipBoundary", 2);
+n([
+  r({ attribute: "shift-boundary", type: Object })
+], i.prototype, "shiftBoundary", 2);
+n([
+  r({ reflect: !0 })
+], i.prototype, "menu", 2);
+n([
+  r({ attribute: "submenu-placement" })
+], i.prototype, "submenuPlacement", 2);
+n([
+  r({ reflect: !0, type: Boolean })
+], i.prototype, "lazy", 2);
+n([
+  b("checked")
+], i.prototype, "handleCheckedChange", 1);
+n([
+  b("disabled")
+], i.prototype, "handleDisabledChange", 1);
+n([
+  b("type")
+], i.prototype, "handleTypeChange", 1);
+i = n([
+  C("cx-menu-item")
+], i);
 export {
-  x as default
+  i as default
 };

package/library/components/menu.js

@@ -4,7 +4,7 @@ import { L as v } from "../chunks/i18n.D33BKrRs.js";
 import { r as y } from "../chunks/state.Dt9F_SuS.js";
 import { e as w } from "../chunks/query.BBf1UFkC.js";
 import { n as x } from "../chunks/when.Dr1es41R.js";
-import { C as M } from "../chunks/menu-item.DOFCmq0Z.js";
+import M from "./menu-item.js";
 const k = f`
   :host {
     display: block;