@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

package/library/components/menu-item.js

@@ -1,249 +1,22 @@
-import { n as a, C as k } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as S } from "../chunks/component.styles.DMSLciL5.js";
-import { c as w } from "../chunks/custom-element.L4WJXn1j.js";
-import { d as x, L as C } from "../chunks/i18n.C0iakJkV.js";
-import { H as _, g as M } from "../chunks/slot.j5oheLJC.js";
-import { w as f } from "../chunks/watch.q1sEjPWL.js";
-import { i as L, x as h } from "../chunks/lit-element.jLBm65_O.js";
-import { e as d } from "../chunks/query.BBf1UFkC.js";
+import { n as a, C as w } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as C } from "../chunks/component.styles.CRO4Odto.js";
+import { c as _ } from "../chunks/custom-element.L4WJXn1j.js";
+import { d as g, L } from "../chunks/i18n.BFqTRDCA.js";
+import { H as M, g as P } from "../chunks/slot.j5oheLJC.js";
+import { w as v } from "../chunks/watch.BCJD77bD.js";
+import { i as E, x as h, E as y } from "../chunks/lit-element.jLBm65_O.js";
+import { e as p } from "../chunks/query.BBf1UFkC.js";
 import { e as b } from "../chunks/class-map.BiVq-cVR.js";
 import { o as m } from "../chunks/if-defined.BRoBj_Rp.js";
-import P from "./icon.js";
-import E from "./popup.js";
-import z from "./spinner.js";
-import { e as D, n as R } from "../chunks/ref.bzeTdX0K.js";
-const $ = L`
-  :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,
-  .menu-item.menu-item--disabled .menu-item__check {
-    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__check--always-show {
-    visibility: visible;
-  }
-
-  .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, n) {
-    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 = n, 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);
+import z from "./icon.js";
+import D from "./popup.js";
+import $ from "./spinner.js";
+import { e as R, n as T } from "../chunks/ref.bzeTdX0K.js";
+var d = /* @__PURE__ */ ((n) => (n.Prefix = "prefix", n.Suffix = "suffix", n))(d || {});
+const O = E`: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{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);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;align-items:stretch;text-decoration:none;display:flex;position:relative}.menu-item.menu-item--disabled{cursor:default;outline:none}.menu-item.menu-item--disabled .menu-item__label,.menu-item.menu-item--disabled .menu-item__prefix,.menu-item.menu-item--disabled .menu-item__chevron,.menu-item.menu-item--disabled .menu-item__check{opacity:.5}.menu-item.menu-item--disabled .menu-item__suffix:not(:slotted(cx-tooltip)){opacity:.5}.menu-item.menu-item--loading{cursor:wait;outline:none}.menu-item.menu-item--loading :not(cx-spinner){opacity:.5}.menu-item--loading cx-spinner{--indicator-color:currentColor;--track-width:1px;opacity:1;font-size:.75em;position:absolute;top:calc(50% - .5em);left:.65rem}.menu-item .menu-item__label{color:var(--label-color,var(--cx-color-neutral));text-overflow:ellipsis;flex:auto;margin:auto;display:inline-block;overflow:hidden}.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:none;align-items:center;display:flex}.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:none;align-items:center;display:flex}.menu-item .menu-item__suffix::slotted(*){margin-inline-start:var(--cx-spacing-x-small)}.menu-item--submenu-expanded:after{content:"";z-index:calc(var(--cx-z-index-dropdown) - 1);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));position:fixed;inset: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,var(--cx-menu-item-background-color-hover)))}:host(:focus-visible) .menu-item{background-color:var(--cx-menu-item-background-color-hover);opacity:1;outline:none}.menu-item .menu-item__check,.menu-item .menu-item__chevron{visibility:hidden;flex:none;justify-content:center;align-items:center;width:1.5em}.menu-item .menu-item__check{display:var(--checked-icon-display,flex);margin-inline-end:var(--cx-spacing-2x-small)}.menu-item .menu-item__check--suffix{margin-inline:auto 0;padding-inline-start:var(--cx-spacing-2x-small)}.menu-item .menu-item__check--always-show{visibility:visible}.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}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-offset:-1px;outline:1px dashed selecteditem}}::slotted(cx-menu){max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}`;
+class I {
+  constructor(e, s) {
+    this.popupRef = R(), 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;
@@ -290,10 +63,10 @@ class T {
   }
   // Set the safe triangle cursor position
   handleMouseMove(e) {
-    const n = getComputedStyle(this.host).direction === "rtl" || this.popupRef.value?.dataset.currentPlacement?.startsWith("left");
+    const s = getComputedStyle(this.host).direction === "rtl" || this.popupRef.value?.dataset.currentPlacement?.startsWith("left");
     this.host.style.setProperty(
       "--safe-triangle-cursor-x",
-      `${e.clientX + (n ? 1 : 0)}px`
+      `${e.clientX + (s ? 1 : 0)}px`
     ), this.host.style.setProperty(
       "--safe-triangle-cursor-y",
       `${e.clientY}px`
@@ -303,32 +76,32 @@ class T {
     this.hasSlotController.test("submenu") && this.enableSubmenu();
   }
   handleSubmenuEntry(e) {
-    const n = this.host.renderRoot.querySelector("slot[name='submenu']");
-    if (!n) {
+    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 i = null;
-    for (const r of n.assignedElements())
-      if (i = r.querySelectorAll("cx-menu-item, [role^='menuitem']"), i.length !== 0)
+    let t = null;
+    for (const r of s.assignedElements())
+      if (t = r.querySelectorAll("cx-menu-item, [role^='menuitem']"), t.length !== 0)
         break;
-    if (!i || i.length === 0) {
+    if (!t || t.length === 0) {
       this.host.lazy && (e.preventDefault(), e.stopPropagation(), this.enableSubmenu(!1));
       return;
     }
-    i[0].setAttribute("tabindex", "0");
-    for (let r = 1; r !== i.length; ++r)
-      i[r].setAttribute("tabindex", "-1");
-    this.popupRef.value && (e.preventDefault(), e.stopPropagation(), this.popupRef.value.active ? i[0] instanceof HTMLElement && i[0].focus() : (this.enableSubmenu(!1), this.popupRef.value.addEventListener("cx-opened", () => {
-      i[0] instanceof HTMLElement && i[0].focus();
+    t[0].setAttribute("tabindex", "0");
+    for (let r = 1; r !== t.length; ++r)
+      t[r].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 n = () => {
+    const s = () => {
       e.preventDefault(), e.stopPropagation(), this.host.focus(), this.disableSubmenu();
     };
     switch (e.key) {
@@ -341,11 +114,11 @@ class T {
         break;
       }
       case "ArrowLeft": {
-        e.target !== this.host && !this.isHorizontalMenu && n();
+        e.target !== this.host && !this.isHorizontalMenu && s();
         break;
       }
       case "ArrowUp": {
-        e.target !== this.host && this.isHorizontalMenu && n();
+        e.target !== this.host && this.isHorizontalMenu && s();
         break;
       }
       case "ArrowRight": {
@@ -365,8 +138,8 @@ class T {
     e.preventDefault(), e.stopPropagation(), this.isExpanded() ? this.disableSubmenu() : this.enableSubmenu();
   }
   handleDocumentMouseDown(e) {
-    const n = e.composedPath();
-    this.host && !n.includes(this.host) && this.disableSubmenu();
+    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) {
@@ -378,16 +151,16 @@ class T {
   }
   // Set the safe triangle values for the submenu when the position changes
   handlePopupReposition() {
-    const n = this.host.renderRoot.querySelector("slot[name='submenu']")?.assignedElements({ flatten: !0 }).filter((p) => p.localName === "cx-menu")[0], i = getComputedStyle(this.host).direction === "rtl" || this.popupRef.value?.dataset.currentPlacement?.startsWith("left");
-    if (!n)
+    const s = this.host.renderRoot.querySelector("slot[name='submenu']")?.assignedElements({ flatten: !0 }).filter((f) => f.localName === "cx-menu")[0], t = getComputedStyle(this.host).direction === "rtl" || this.popupRef.value?.dataset.currentPlacement?.startsWith("left");
+    if (!s)
       return;
-    const { height: r, left: l, top: u, width: c } = n.getBoundingClientRect();
+    const { height: r, left: l, top: u, width: c } = s.getBoundingClientRect();
     this.host.style.setProperty(
       "--safe-triangle-submenu-start-x",
-      `${i ? l + c : l}px`
+      `${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",
-      `${i ? l + c : l}px`
+      `${t ? l + c : l}px`
     ), this.host.style.setProperty(
       "--safe-triangle-submenu-end-y",
       `${u + r}px`
@@ -410,12 +183,12 @@ class T {
   updateSkidding() {
     if (!this.host.parentElement?.computedStyleMap)
       return;
-    const e = this.host.parentElement.computedStyleMap(), n = x(this.host) === "rtl", i = this.host.submenuPlacement ?? (n ? "left-start" : "right-start"), r = i.startsWith("left") || i.startsWith("right");
+    const e = this.host.parentElement.computedStyleMap(), s = g(this.host) === "rtl", t = this.host.submenuPlacement ?? (s ? "left-start" : "right-start"), r = t.startsWith("left") || t.startsWith("right");
     let l = [];
-    r && (i.endsWith("-start") ? l = ["padding-top", "border-top-width", "margin-top"] : i.endsWith("-end") && (l = ["padding-bottom", "border-bottom-width", "margin-bottom"]));
-    const u = l.reduce((c, p) => {
-      const v = e.get(p) ?? new CSSUnitValue(0, "px"), g = (v instanceof CSSUnitValue ? v : new CSSUnitValue(0, "px")).to("px"), y = i.endsWith("-end") ? 1 : -1;
-      return c + g.value * y;
+    r && (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, f) => {
+      const x = e.get(f) ?? new CSSUnitValue(0, "px"), k = (x instanceof CSSUnitValue ? x : new CSSUnitValue(0, "px")).to("px"), S = t.endsWith("-end") ? 1 : -1;
+      return c + k.value * S;
     }, 0);
     this.skidding = u;
   }
@@ -423,48 +196,30 @@ class T {
     return this.popupRef.value ? this.popupRef.value.active : !1;
   }
   renderSubmenu() {
-    const e = x(this.host) === "rtl";
+    const e = g(this.host) === "rtl";
     if (!this.hasSlotController.test("submenu"))
       return null;
-    const n = this.host.submenuPlacement ?? (e ? "left-start" : "right-start");
-    return h`
-      <cx-popup
-        ${R(this.popupRef)}
-        placement=${n}
-        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>
-    `;
+    const s = this.host.submenuPlacement ?? (e ? "left-start" : "right-start");
+    return h`<cx-popup ${T(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, I = Object.getOwnPropertyDescriptor, s = (o, e, n, i) => {
-  for (var r = i > 1 ? void 0 : i ? I(e, n) : e, l = o.length - 1, u; l >= 0; l--)
-    (u = o[l]) && (r = (i ? u(e, n, r) : u(r)) || r);
-  return i && r && O(e, n, r), r;
+var H = Object.defineProperty, B = Object.getOwnPropertyDescriptor, o = (n, e, s, t) => {
+  for (var r = t > 1 ? void 0 : t ? B(e, s) : e, l = n.length - 1, u; l >= 0; l--)
+    (u = n[l]) && (r = (t ? u(e, s, r) : u(r)) || r);
+  return t && r && H(e, s, r), r;
 };
-let t = class extends k {
+let i = class extends w {
   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.alwaysShowCheckedIcon = !1, this.lazy = !1, this.localize = new C(this), this.hasSlotController = new _(
+    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.alwaysShowCheckedIcon = !1, this.checkPlacement = d.Suffix, this.lazy = !1, this.localize = new L(this), this.hasSlotController = new M(
       this,
       "submenu",
       "submenu-icon"
-    ), this.submenuController = new T(
+    ), this.submenuController = new I(
       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.handleDocumentWheel = (n) => {
+      const e = n.composedPath();
+      this.submenuController.isExpanded() && (!this.submenuController.popup || !e.includes(this.submenuController.popup)) && (n.preventDefault(), this.submenuController.disableSubmenu());
     }, this.handleHostClick = this.handleHostClick.bind(this), this.handleMouseOver = this.handleMouseOver.bind(this);
   }
   runConnectedCallback() {
@@ -476,25 +231,25 @@ let t = class extends k {
     super.disconnectedCallback(), this.removeEventListener("click", this.handleHostClick), this.removeEventListener("mouseover", this.handleMouseOver), document.removeEventListener("wheel", this.handleDocumentWheel);
   }
   handleDefaultSlotChange() {
-    const o = this.getTextLabel();
+    const n = this.getTextLabel();
     if (typeof this.cachedTextLabel > "u") {
-      this.cachedTextLabel = o;
+      this.cachedTextLabel = n;
       return;
     }
-    o !== this.cachedTextLabel && (this.cachedTextLabel = o, this.emit("slotchange", {
+    n !== this.cachedTextLabel && (this.cachedTextLabel = n, 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();
+  handleHostClick(n) {
+    (this.disabled || this.readonly) && (n.target === this && n.preventDefault(), n.stopImmediatePropagation()), this.href && this.anchor && this.anchor.click();
   }
-  handleMouseOver(o) {
-    o.stopPropagation();
+  handleMouseOver(n) {
+    n.stopPropagation();
   }
-  handleAnchorClick(o) {
-    o.stopPropagation();
+  handleAnchorClick(n) {
+    n.stopPropagation();
   }
   handleCheckedChange() {
     if (this.checked && this.type !== "checkbox") {
@@ -514,18 +269,14 @@ let t = class extends k {
   }
   /** Returns a text label based on the contents of the menu item's default slot. */
   getTextLabel() {
-    return M(this.defaultSlot);
+    return P(this.defaultSlot);
   }
   isSubmenu() {
     return this.hasSlotController.test("submenu") || !!this.menu.trim();
   }
-  renderBase(o) {
-    const e = !!this.href, n = this.localize.dir() === "rtl", i = this.submenuController.isExpanded();
-    return e ? h`
-        <a
-          id="anchor"
-          part="base"
-          class=${b({
+  renderBase(n) {
+    const e = !!this.href, s = this.localize.dir() === "rtl", t = this.submenuController.isExpanded();
+    return e ? h`<a id="anchor" part="base" class=${b({
       "menu-item": !0,
       "menu-item--active": this.active,
       "menu-item--checkbox": this.type === "checkbox",
@@ -533,25 +284,9 @@ let t = class extends k {
       "menu-item--disabled": this.disabled,
       "menu-item--has-submenu": this.isSubmenu(),
       "menu-item--loading": this.loading,
-      "menu-item--rtl": n,
-      "menu-item--submenu-expanded": i
-    })}
-          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=${b({
+      "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}>${n}</a>` : h`<div id="anchor" part="base" class=${b({
       "menu-item": !0,
       "menu-item--active": this.active,
       "menu-item--checkbox": this.type === "checkbox",
@@ -559,139 +294,114 @@ let t = class extends k {
       "menu-item--disabled": this.disabled,
       "menu-item--has-submenu": this.isSubmenu(),
       "menu-item--loading": this.loading,
-      "menu-item--rtl": n,
-      "menu-item--submenu-expanded": i
-    })}
-        aria-haspopup=${this.isSubmenu()}
-        aria-label=${this.getTextLabel()}
-      >
-        ${o}
-      </div>
-    `;
+      "menu-item--rtl": s,
+      "menu-item--submenu-expanded": t
+    })} aria-haspopup=${this.isSubmenu()} aria-label=${this.getTextLabel()}>${n}</div>`;
   }
   render() {
-    const o = this.localize.dir() === "rtl";
+    const n = 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`
-      <slot
-        part="checked-icon"
-        name="checked-icon"
-        class=${b({
+    this.submenuPlacement && (this.submenuPlacement.startsWith("top") || this.submenuPlacement.startsWith("bottom")) ? e = "keyboard_arrow_down" : e = n ? "chevron_left" : "chevron_right";
+    const s = h`<slot part="checked-icon" name="checked-icon" class=${b({
       "menu-item__check": !0,
-      "menu-item__check--always-show": this.alwaysShowCheckedIcon
-    })}
-      >
-        <cx-icon name="check"></cx-icon>
-      </slot>
-
-      <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>
+      "menu-item__check--always-show": this.alwaysShowCheckedIcon,
+      "menu-item__check--suffix": this.checkPlacement === d.Suffix
+    })}><cx-icon name="check"></cx-icon></slot>`, t = this.checkPlacement === d.Suffix;
+    return this.renderBase(h`
+      ${t ? y : s}<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>${t ? s : y}
 
       ${this.submenuController.renderSubmenu()}
-      ${this.loading ? h`
-            <cx-spinner
-              part="spinner"
-              exportparts="base:spinner__base"
-            ></cx-spinner>
-          ` : ""}
+      ${this.loading ? h`<cx-spinner part="spinner" exportparts="base:spinner__base"></cx-spinner>` : ""}
     `);
   }
 };
-t.styles = [S, $];
-t.dependencies = {
-  "cx-icon": P,
-  "cx-popup": E,
-  "cx-spinner": z
+i.styles = [C, O];
+i.dependencies = {
+  "cx-icon": z,
+  "cx-popup": D,
+  "cx-spinner": $
 };
-s([
-  d("slot:not([name])")
-], t.prototype, "defaultSlot", 2);
-s([
-  d("a#anchor", !0)
-], t.prototype, "anchor", 2);
-s([
-  d(".menu-item")
-], t.prototype, "menuItem", 2);
-s([
-  d(".menu-item__chevron")
-], t.prototype, "submenuIcon", 2);
-s([
+o([
+  p("slot:not([name])")
+], i.prototype, "defaultSlot", 2);
+o([
+  p("a#anchor", !0)
+], i.prototype, "anchor", 2);
+o([
+  p(".menu-item")
+], i.prototype, "menuItem", 2);
+o([
+  p(".menu-item__chevron")
+], i.prototype, "submenuIcon", 2);
+o([
   a()
-], t.prototype, "type", 2);
-s([
+], i.prototype, "type", 2);
+o([
   a({ attribute: "submenu-trigger" })
-], t.prototype, "submenuTrigger", 2);
-s([
+], i.prototype, "submenuTrigger", 2);
+o([
   a({ reflect: !0, type: Boolean })
-], t.prototype, "checked", 2);
-s([
+], i.prototype, "checked", 2);
+o([
   a()
-], t.prototype, "value", 2);
-s([
+], i.prototype, "value", 2);
+o([
   a()
-], t.prototype, "href", 2);
-s([
+], i.prototype, "href", 2);
+o([
   a()
-], t.prototype, "target", 2);
-s([
+], i.prototype, "target", 2);
+o([
   a()
-], t.prototype, "rel", 2);
-s([
+], i.prototype, "rel", 2);
+o([
   a()
-], t.prototype, "download", 2);
-s([
+], i.prototype, "download", 2);
+o([
   a({ reflect: !0, type: Boolean })
-], t.prototype, "loading", 2);
-s([
+], i.prototype, "loading", 2);
+o([
   a({ reflect: !0, type: Boolean })
-], t.prototype, "disabled", 2);
-s([
+], i.prototype, "disabled", 2);
+o([
   a({ reflect: !0, type: Boolean })
-], t.prototype, "active", 2);
-s([
+], i.prototype, "active", 2);
+o([
   a({ reflect: !0, type: Boolean })
-], t.prototype, "readonly", 2);
-s([
+], i.prototype, "readonly", 2);
+o([
   a({ attribute: "flip-boundary", type: Object })
-], t.prototype, "flipBoundary", 2);
-s([
+], i.prototype, "flipBoundary", 2);
+o([
   a({ attribute: "shift-boundary", type: Object })
-], t.prototype, "shiftBoundary", 2);
-s([
+], i.prototype, "shiftBoundary", 2);
+o([
   a({ reflect: !0 })
-], t.prototype, "menu", 2);
-s([
+], i.prototype, "menu", 2);
+o([
   a({ attribute: "always-show-checked-icon", reflect: !0, type: Boolean })
-], t.prototype, "alwaysShowCheckedIcon", 2);
-s([
+], i.prototype, "alwaysShowCheckedIcon", 2);
+o([
+  a({ attribute: "check-placement", reflect: !0 })
+], i.prototype, "checkPlacement", 2);
+o([
   a({ attribute: "submenu-placement" })
-], t.prototype, "submenuPlacement", 2);
-s([
+], i.prototype, "submenuPlacement", 2);
+o([
   a({ reflect: !0, type: Boolean })
-], t.prototype, "lazy", 2);
-s([
-  f("checked")
-], t.prototype, "handleCheckedChange", 1);
-s([
-  f("disabled")
-], t.prototype, "handleDisabledChange", 1);
-s([
-  f("type")
-], t.prototype, "handleTypeChange", 1);
-t = s([
-  w("cx-menu-item")
-], t);
+], i.prototype, "lazy", 2);
+o([
+  v("checked")
+], i.prototype, "handleCheckedChange", 1);
+o([
+  v("disabled")
+], i.prototype, "handleDisabledChange", 1);
+o([
+  v("type")
+], i.prototype, "handleTypeChange", 1);
+i = o([
+  _("cx-menu-item")
+], i);
 export {
-  t as default
+  i as default
 };