@orangelogic/design-system 3.0.0 → 3.2.0

package/library/chunks/{input.33UmFGqR.js → input.xgeLCG8I.js}

@@ -4,7 +4,7 @@ import { f as ot } from "./form-control.styles.CaGWmeAS.js";
 import { c as lt } from "./custom-element.L4WJXn1j.js";
 import { d as ht } from "./default-value.COZopaet.js";
 import { F as pt } from "./form.DSsy3Fcy.js";
-import { L as ct } from "./i18n.DbXTTLXx.js";
+import { L as ct } from "./i18n.BA19xtyU.js";
 import { H as dt } from "./slot.j5oheLJC.js";
 import { w as V } from "./watch.DJF5K-8U.js";
 import { i as ft, x as E } from "./lit-element.jLBm65_O.js";

package/library/chunks/{markdown.DOHru2Rz.js → markdown.bkEjjjS9.js}

@@ -1,7 +1,7 @@
-import { C as jn, I as Yn } from "./icon-button.CVrxJcZq.js";
+import { C as jn, I as Yn } from "./icon-button.BWJ1Vqn5.js";
 import { C as Un, n as me } from "./lib-cortex-element.CVMmyPMC.js";
 import { c as Gn } from "./custom-element.L4WJXn1j.js";
-import { L as Hn } from "./i18n.DbXTTLXx.js";
+import { L as Hn } from "./i18n.BA19xtyU.js";
 import { w as Ne } from "./watch.DJF5K-8U.js";
 import { s as Kn } from "./string.CfI2ejyR.js";
 import { i as mt, x as Wn } from "./lit-element.jLBm65_O.js";

package/library/chunks/menu-item.DgUMVYe5.js

@@ -0,0 +1,493 @@
+import { n as r, C as L } from "./lib-cortex-element.CVMmyPMC.js";
+import { c as M } from "./component.styles.CRO4Odto.js";
+import { c as z } from "./custom-element.L4WJXn1j.js";
+import { d as k, L as E } from "./i18n.BA19xtyU.js";
+import { H as P, g as R } from "./slot.j5oheLJC.js";
+import { w as b } from "./watch.DJF5K-8U.js";
+import { i as T, x as h, E as S } from "./lit-element.jLBm65_O.js";
+import { e as f } from "./query.BBf1UFkC.js";
+import { e as x } from "./class-map.BiVq-cVR.js";
+import { o as d } from "./if-defined.BRoBj_Rp.js";
+import { C as $ } from "./icon.CpHbi8tH.js";
+import D from "../components/popup.js";
+import O from "../components/spinner.js";
+import { f as C } from "./focus-when-visible.jWSw9ks0.js";
+import { e as I, n as A } from "./ref.DktKp7fP.js";
+var p = /* @__PURE__ */ ((i) => (i.Prefix = "prefix", i.Suffix = "suffix", i))(p || {}), g = /* @__PURE__ */ ((i) => (i.Checkbox = "menuitemcheckbox", i.Item = "menuitem", i.Radio = "menuitemradio", i))(g || {}), c = /* @__PURE__ */ ((i) => (i.Checkbox = "checkbox", i.Normal = "normal", i))(c || {});
+const B = T`:host{--submenu-offset:0px;--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(--checked-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(--checked-icon-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-medium)}.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{outline:var(--cx-focus-ring);outline-offset:calc(-1 * var(--cx-focus-ring-width));background-color:var(--cx-menu-item-background-color-hover);opacity:1}.menu-item .menu-item__check,.menu-item .menu-item__chevron{width:var(--checked-icon-size,1.5em);visibility:hidden;flex:none;justify-content:center;align-items:center}.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,0px);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 H {
+  constructor(e, t) {
+    this.popupRef = I(), this.parent = null, this.enableSubmenuTimer = -1, this.isHorizontalMenu = !1, this.isConnected = !1, this.isPopupConnected = !1, this.skidding = 0, this.submenuOpenDelay = 100, this.focusVisibilityTimeoutMs = 1e4, this.lazyLoadObserver = null, this.pendingFocusCancel = null, (this.host = e).addController(this), this.hasSlotController = t, 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(), this.cancelPendingFocus();
+  }
+  hostUpdated() {
+    this.removeListeners(), this.hasSlotController.test("submenu") && !this.host.disabled && (this.addListeners(), this.updateSkidding(), this.syncIsHorizontalMenu(), this.syncAriaExpanded());
+  }
+  syncAriaExpanded() {
+    this.host.setAttribute("aria-expanded", this.isExpanded() ? "true" : "false");
+  }
+  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 t = getComputedStyle(this.host).direction === "rtl" || this.popupRef.value?.dataset.currentPlacement?.startsWith("left");
+    this.host.style.setProperty(
+      "--safe-triangle-cursor-x",
+      `${e.clientX + (t ? 1 : 0)}px`
+    ), this.host.style.setProperty(
+      "--safe-triangle-cursor-y",
+      `${e.clientY}px`
+    );
+  }
+  handleMouseOver() {
+    this.hasSlotController.test("submenu") && this.enableSubmenu();
+  }
+  handleSubmenuEntry(e) {
+    const t = this.host.renderRoot.querySelector("slot[name='submenu']");
+    if (!t) {
+      console.error(
+        "Cannot activate a submenu if no corresponding menuitem can be found.",
+        this
+      );
+      return;
+    }
+    const n = this.queryMenuItems(t);
+    if (!n || n.length === 0) {
+      this.host.lazy && (e.preventDefault(), e.stopPropagation(), this.focusFirstMenuItemAfterLazyLoad(t));
+      return;
+    }
+    this.setRovingTabIndex(n), this.popupRef.value && (e.preventDefault(), e.stopPropagation(), this.popupRef.value.active || this.enableSubmenu(!1), n[0] instanceof HTMLElement && (this.pendingFocusCancel?.(), this.pendingFocusCancel = C(
+      n[0],
+      this.focusVisibilityTimeoutMs
+    )));
+  }
+  // Sets up the roving tabindex for a freshly revealed set of submenu items: first item tabbable, rest not.
+  setRovingTabIndex(e) {
+    e[0].setAttribute("tabindex", "0");
+    for (let t = 1; t !== e.length; ++t)
+      e[t].setAttribute("tabindex", "-1");
+  }
+  // Find the first menu-item (or menuitem-role element) assigned to the submenu slot, if any exist yet.
+  queryMenuItems(e) {
+    let t = null;
+    for (const n of e.assignedElements())
+      if (t = n.querySelectorAll("cx-menu-item, [role^='menuitem']"), t.length !== 0)
+        break;
+    return t;
+  }
+  // Disconnect any pending lazy-load item watch and cancel any pending focus attempt (submenu closed, host
+  // disconnected, or the item was already found/focused).
+  cancelPendingFocus() {
+    this.lazyLoadObserver?.disconnect(), this.lazyLoadObserver = null, this.pendingFocusCancel?.(), this.pendingFocusCancel = null;
+  }
+  /**
+   * Enables the submenu and, once its content finishes loading and the first menu-item appears, focuses it.
+   * focusWhenVisible already tolerates the popup not being visually ready yet, so this only needs to wait for
+   * the item itself to exist.
+   */
+  focusFirstMenuItemAfterLazyLoad(e) {
+    this.lazyLoadObserver?.disconnect(), this.lazyLoadObserver = new MutationObserver(() => {
+      const t = this.queryMenuItems(e), n = t?.[0];
+      !(n instanceof HTMLElement) || !t || (this.setRovingTabIndex(t), this.lazyLoadObserver?.disconnect(), this.lazyLoadObserver = null, this.pendingFocusCancel?.(), this.pendingFocusCancel = C(
+        n,
+        this.focusVisibilityTimeoutMs
+      ));
+    });
+    for (const t of e.assignedElements())
+      this.lazyLoadObserver.observe(t, { childList: !0, subtree: !0 });
+    this.enableSubmenu(!1);
+  }
+  // Focus on the first menu-item of a submenu.
+  handleKeyDown(e) {
+    const t = () => {
+      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 && t();
+        break;
+      }
+      case "ArrowUp": {
+        e.target !== this.host && this.isHorizontalMenu && t();
+        break;
+      }
+      case "ArrowRight": {
+        this.isHorizontalMenu || this.handleSubmenuEntry(e);
+        break;
+      }
+      case "ArrowDown": {
+        this.isHorizontalMenu && this.handleSubmenuEntry(e);
+        break;
+      }
+      case "Enter":
+      case " ": {
+        this.host.href || this.handleSubmenuEntry(e);
+        break;
+      }
+    }
+  }
+  handleClick(e) {
+    e.target !== this.host && e.target instanceof Element && (e.target.localName === "cx-menu-item" || e.target.role?.startsWith("menuitem")) || (e.preventDefault(), e.stopPropagation(), this.isExpanded() ? this.disableSubmenu() : e.isTrusted && this.enableSubmenu());
+  }
+  handleSubmenuIconClick(e) {
+    e.preventDefault(), e.stopPropagation(), this.isExpanded() ? this.disableSubmenu() : this.enableSubmenu();
+  }
+  handleDocumentMouseDown(e) {
+    const t = e.composedPath();
+    this.host && !t.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 t = this.host.renderRoot.querySelector("slot[name='submenu']")?.assignedElements({ flatten: !0 }).filter((v) => v.localName === "cx-menu")[0], n = getComputedStyle(this.host).direction === "rtl" || this.popupRef.value?.dataset.currentPlacement?.startsWith("left");
+    if (!t)
+      return;
+    const { height: l, left: a, top: u, width: m } = t.getBoundingClientRect();
+    this.host.style.setProperty(
+      "--safe-triangle-submenu-start-x",
+      `${n ? a + m : a}px`
+    ), this.host.style.setProperty("--safe-triangle-submenu-start-y", `${u}px`), this.host.style.setProperty(
+      "--safe-triangle-submenu-end-x",
+      `${n ? a + m : a}px`
+    ), this.host.style.setProperty(
+      "--safe-triangle-submenu-end-y",
+      `${u + l}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.cancelPendingFocus(), this.setSubmenuState(!1), this.disableNestedSubmenus();
+  }
+  /**
+   * Closing this submenu hides nested submenus visually (via the parent popup's own hidden state) without
+   * resetting their own `active` flag, since they never receive a property change to react to. Left stale,
+   * reopening a nested submenu later hits the "already active" fast path and skips the re-sync a fresh open
+   * would normally do. Cascade the close so every nested submenu starts clean the next time it's opened.
+   */
+  disableNestedSubmenus() {
+    if (!this.hasSlotController.test("submenu"))
+      return;
+    const e = this.host.renderRoot.querySelector("slot[name='submenu']");
+    if (e)
+      for (const t of e.assignedElements({ flatten: !0 }))
+        t.querySelectorAll("cx-menu-item").forEach((n) => {
+          n.closeSubmenu?.();
+        });
+  }
+  // Schedule a recalculation of the skidding value
+  updateSkidding() {
+    requestAnimationFrame(() => {
+      this.calculateSkidding();
+    });
+  }
+  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
+  calculateSkidding() {
+    if (!this.host.parentElement?.computedStyleMap)
+      return;
+    const e = this.host.parentElement.computedStyleMap(), t = k(this.host) === "rtl", n = this.host.submenuPlacement ?? (t ? "left-start" : "right-start"), l = n.startsWith("left") || n.startsWith("right");
+    let a = [];
+    l && (n.endsWith("-start") ? a = ["padding-top", "border-top-width", "margin-top"] : n.endsWith("-end") && (a = ["padding-bottom", "border-bottom-width", "margin-bottom"]));
+    const u = a.reduce((m, v) => {
+      const y = e.get(v) ?? new CSSUnitValue(0, "px"), w = (y instanceof CSSUnitValue ? y : new CSSUnitValue(0, "px")).to("px"), _ = n.endsWith("-end") ? 1 : -1;
+      return m + w.value * _;
+    }, 0);
+    this.skidding = u;
+  }
+  isExpanded() {
+    return this.popupRef.value ? this.popupRef.value.active : !1;
+  }
+  renderSubmenu() {
+    const e = k(this.host) === "rtl";
+    if (!this.hasSlotController.test("submenu"))
+      return null;
+    const t = this.host.submenuPlacement ?? (e ? "left-start" : "right-start");
+    return h`<cx-popup ${A(this.popupRef)} placement=${t} 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} .autoSizeBoundary=${this.host.autoSizeBoundary}><slot name="submenu"></slot></cx-popup>`;
+  }
+}
+var F = Object.defineProperty, W = Object.getOwnPropertyDescriptor, o = (i, e, t, n) => {
+  for (var l = n > 1 ? void 0 : n ? W(e, t) : e, a = i.length - 1, u; a >= 0; a--)
+    (u = i[a]) && (l = (n ? u(e, t, l) : u(l)) || l);
+  return n && l && F(e, t, l), l;
+};
+let s = class extends L {
+  constructor() {
+    super(), this.type = c.Normal, this.submenuTrigger = "both", this.checked = !1, this.noUncheck = !1, this.value = "", this.href = "", this.rel = "noreferrer noopener", this.loading = !1, this.disabled = !1, this.active = !1, this.current = void 0, this.readonly = !1, this.menu = "", this.alwaysShowCheckedIcon = !1, this.checkPlacement = p.Suffix, this.lazy = !1, this.localize = new E(this), this.hasSlotController = new P(
+      this,
+      "submenu",
+      "submenu-icon"
+    ), this.submenuController = new H(
+      this,
+      this.hasSlotController
+    ), this.handleDocumentWheel = (i) => {
+      const e = i.composedPath();
+      this.submenuController.isExpanded() && (!this.submenuController.popup || !e.includes(this.submenuController.popup)) && (i.preventDefault(), this.submenuController.disableSubmenu());
+    }, this.handleHostClick = this.handleHostClick.bind(this), this.handleMouseOver = this.handleMouseOver.bind(this);
+  }
+  runConnectedCallback() {
+    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 i = this.getTextLabel();
+    if (typeof this.cachedTextLabel > "u") {
+      this.cachedTextLabel = i;
+      return;
+    }
+    i !== this.cachedTextLabel && (this.cachedTextLabel = i, this.emit("slotchange", {
+      bubbles: !0,
+      cancelable: !1,
+      composed: !1
+    }));
+  }
+  handleHostClick(i) {
+    (this.disabled || this.readonly) && (i.target === this && i.preventDefault(), i.stopImmediatePropagation()), this.href && this.anchor && this.anchor.click();
+  }
+  handleMouseOver(i) {
+    i.stopPropagation();
+  }
+  handleAnchorClick(i) {
+    i.stopPropagation();
+  }
+  handleCheckedChange() {
+    if (this.checked && this.type !== c.Checkbox) {
+      this.checked = !1, console.error(
+        'The checked attribute can only be used on menu items with type="checkbox"',
+        this
+      );
+      return;
+    }
+    this.type === c.Checkbox ? this.setAttribute("aria-checked", this.checked ? "true" : "false") : this.removeAttribute("aria-checked");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleCurrentChange() {
+    this.current ? this.setAttribute("aria-current", this.current) : this.removeAttribute("aria-current");
+  }
+  handleTypeChange() {
+    this.type === "checkbox" ? (this.setAttribute("role", this.itemRole ?? g.Checkbox), this.setAttribute("aria-checked", this.checked ? "true" : "false")) : (this.setAttribute("role", this.itemRole ?? g.Item), this.removeAttribute("aria-checked"));
+  }
+  /** Returns a text label based on the contents of the menu item's default slot. */
+  getTextLabel() {
+    return R(this.defaultSlot);
+  }
+  isSubmenu() {
+    return this.hasSlotController.test("submenu") || !!this.menu.trim();
+  }
+  /** Closes this menu item's own submenu, if it has one open. Used to cascade-close nested submenus. */
+  closeSubmenu() {
+    this.submenuController.disableSubmenu();
+  }
+  renderBase(i) {
+    const e = !!this.href, t = this.localize.dir() === "rtl", n = 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 === c.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": t,
+      "menu-item--submenu-expanded": n
+    })} aria-haspopup=${this.isSubmenu()} href=${d(this.href)} target=${d(this.target)} download=${d(this.download)} rel=${d(this.rel)} aria-label=${this.getTextLabel()} ?inert=${this.disabled} @click=${this.handleAnchorClick}>${i}</a>` : h`<div id="anchor" part="base" class=${x({
+      "menu-item": !0,
+      "menu-item--active": this.active,
+      "menu-item--checkbox": this.type === c.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": t,
+      "menu-item--submenu-expanded": n
+    })} aria-haspopup=${this.isSubmenu()} aria-label=${this.getTextLabel()}>${i}</div>`;
+  }
+  render() {
+    const i = this.localize.dir() === "rtl";
+    let e;
+    this.submenuPlacement && (this.submenuPlacement.startsWith("top") || this.submenuPlacement.startsWith("bottom")) ? e = "keyboard_arrow_down" : e = i ? "chevron_left" : "chevron_right";
+    const t = h`<slot part="checked-icon" name="checked-icon" class=${x({
+      "menu-item__check": !0,
+      "menu-item__check--always-show": this.alwaysShowCheckedIcon,
+      "menu-item__check--suffix": this.checkPlacement === p.Suffix
+    })}><cx-icon name="check"></cx-icon></slot>`, n = this.checkPlacement === p.Suffix;
+    return this.renderBase(h`
+      ${n ? S : t}<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>${n ? t : S}
+
+      ${this.submenuController.renderSubmenu()}
+      ${this.loading ? h`<cx-spinner part="spinner" exportparts="base:spinner__base"></cx-spinner>` : ""}
+    `);
+  }
+};
+s.styles = [M, B];
+s.dependencies = {
+  "cx-icon": $,
+  "cx-popup": D,
+  "cx-spinner": O
+};
+o([
+  f("slot:not([name])")
+], s.prototype, "defaultSlot", 2);
+o([
+  f("a#anchor", !0)
+], s.prototype, "anchor", 2);
+o([
+  f(".menu-item")
+], s.prototype, "menuItem", 2);
+o([
+  f(".menu-item__chevron")
+], s.prototype, "submenuIcon", 2);
+o([
+  r()
+], s.prototype, "type", 2);
+o([
+  r({ attribute: "item-role", type: String })
+], s.prototype, "itemRole", 2);
+o([
+  r({ attribute: "submenu-trigger", type: String })
+], s.prototype, "submenuTrigger", 2);
+o([
+  r({ reflect: !0, type: Boolean })
+], s.prototype, "checked", 2);
+o([
+  r({ attribute: "no-uncheck", reflect: !0, type: Boolean })
+], s.prototype, "noUncheck", 2);
+o([
+  r()
+], s.prototype, "value", 2);
+o([
+  r()
+], s.prototype, "href", 2);
+o([
+  r()
+], s.prototype, "target", 2);
+o([
+  r()
+], s.prototype, "rel", 2);
+o([
+  r()
+], s.prototype, "download", 2);
+o([
+  r({ reflect: !0, type: Boolean })
+], s.prototype, "loading", 2);
+o([
+  r({ reflect: !0, type: Boolean })
+], s.prototype, "disabled", 2);
+o([
+  r({ reflect: !0, type: Boolean })
+], s.prototype, "active", 2);
+o([
+  r({ reflect: !0, type: String })
+], s.prototype, "current", 2);
+o([
+  r({ reflect: !0, type: Boolean })
+], s.prototype, "readonly", 2);
+o([
+  r({ attribute: "flip-boundary", type: Object })
+], s.prototype, "flipBoundary", 2);
+o([
+  r({ attribute: "shift-boundary", type: Object })
+], s.prototype, "shiftBoundary", 2);
+o([
+  r({ attribute: "auto-size-boundary", type: Object })
+], s.prototype, "autoSizeBoundary", 2);
+o([
+  r({ reflect: !0 })
+], s.prototype, "menu", 2);
+o([
+  r({ attribute: "always-show-checked-icon", reflect: !0, type: Boolean })
+], s.prototype, "alwaysShowCheckedIcon", 2);
+o([
+  r({ attribute: "check-placement", reflect: !0, type: String })
+], s.prototype, "checkPlacement", 2);
+o([
+  r({ attribute: "submenu-placement" })
+], s.prototype, "submenuPlacement", 2);
+o([
+  r({ reflect: !0, type: Boolean })
+], s.prototype, "lazy", 2);
+o([
+  b("checked")
+], s.prototype, "handleCheckedChange", 1);
+o([
+  b("disabled")
+], s.prototype, "handleDisabledChange", 1);
+o([
+  b("current")
+], s.prototype, "handleCurrentChange", 1);
+o([
+  b(["type", "itemRole"])
+], s.prototype, "handleTypeChange", 1);
+s = o([
+  z("cx-menu-item")
+], s);
+export {
+  s as C,
+  c as M,
+  g as a
+};

package/library/chunks/{option.B6odSlS2.js → option.jeaj7_Lr.js}

@@ -1,7 +1,7 @@
 import { n as s, C as x } from "./lib-cortex-element.CVMmyPMC.js";
 import { c as m } from "./component.styles.CRO4Odto.js";
 import { c as v } from "./custom-element.L4WJXn1j.js";
-import { L as g } from "./i18n.DbXTTLXx.js";
+import { L as g } from "./i18n.BA19xtyU.js";
 import { w as d } from "./watch.DJF5K-8U.js";
 import { i as _, x as h } from "./lit-element.jLBm65_O.js";
 import { r as f } from "./state.CSDxrqLd.js";

package/library/chunks/{pagination.mzolTIpF.js → pagination.CSPKsj4y.js}

@@ -1,8 +1,8 @@
 import b from "../components/space.js";
 import { n as o, C as _ } from "./lib-cortex-element.CVMmyPMC.js";
-import { C as P, I as y } from "./icon-button.CVrxJcZq.js";
+import { C as P, I as y } from "./icon-button.BWJ1Vqn5.js";
 import { c as f } from "./custom-element.L4WJXn1j.js";
-import { L as z } from "./i18n.DbXTTLXx.js";
+import { L as z } from "./i18n.BA19xtyU.js";
 import { c as m } from "./math.DuKzLacZ.js";
 import { w as d } from "./watch.DJF5K-8U.js";
 import { i as C, x as s } from "./lit-element.jLBm65_O.js";
@@ -10,9 +10,9 @@ import { r as S } from "./state.CSDxrqLd.js";
 import { e as $ } from "./class-map.BiVq-cVR.js";
 import { c as x } from "./repeat.CFjcER6_.js";
 import { n as g } from "./when.Dr1es41R.js";
-import { C as w } from "./button.BnkkUqiI.js";
-import { C as v } from "./input.33UmFGqR.js";
-import { C as I } from "./option.B6odSlS2.js";
+import { C as w } from "./button.CpY4FCwE.js";
+import { C as v } from "./input.xgeLCG8I.js";
+import { C as I } from "./option.jeaj7_Lr.js";
 import B from "../components/select.js";
 import N from "../components/tooltip.js";
 import { C as k } from "./typography.IqHbnd3C.js";

package/library/chunks/{tab-group.uSHlsFu8.js → tab-group.BSl6GdIO.js}

@@ -2,7 +2,7 @@ import zn from "../components/resize-observer.js";
 import { n as wt, C as Bn } from "./lib-cortex-element.CVMmyPMC.js";
 import { c as Fn } from "./component.styles.CRO4Odto.js";
 import { c as Nn } from "./custom-element.L4WJXn1j.js";
-import { L as Ln } from "./i18n.DbXTTLXx.js";
+import { L as Ln } from "./i18n.BA19xtyU.js";
 import { s as Zi } from "./scroll.xtO5yojm.js";
 import { w as ft } from "./watch.DJF5K-8U.js";
 import { i as $n } from "./dom.gRV2cDjL.js";
@@ -17,11 +17,11 @@ import { i as Ji } from "./guard.D4axKaMo.js";
 import { o as tr } from "./map.D8heArFD.js";
 import { o as Ve } from "./style-map.llVFPd__.js";
 import { n as Pe } from "./when.Dr1es41R.js";
-import { C as Yn } from "./button.BnkkUqiI.js";
+import { C as Yn } from "./button.CpY4FCwE.js";
 import Xn from "../components/dropdown.js";
-import { C as qn } from "./icon-button.CVrxJcZq.js";
+import { C as qn } from "./icon-button.BWJ1Vqn5.js";
 import Gn from "../components/menu.js";
-import Kn from "../components/menu-item.js";
+import { C as Kn } from "./menu-item.DgUMVYe5.js";
 import jn from "../components/tab.js";
 var bi = /* @__PURE__ */ ((o) => (o.Bottom = "bottom", o.End = "end", o.Start = "start", o.Top = "top", o))(bi || {}), Ke = /* @__PURE__ */ ((o) => (o.Center = "center", o.End = "flex-end", o.Start = "flex-start", o))(Ke || {}), wr = /* @__PURE__ */ ((o) => (o.Auto = "auto", o.Manual = "manual", o))(wr || {}), ue = /* @__PURE__ */ ((o) => (o.Button = "button", o.Default = "default", o.Timeline = "timeline", o))(ue || {}), Tt = /* @__PURE__ */ ((o) => (o.Dropdown = "dropdown", o.Pagination = "pagination", o.Scroll = "scroll", o))(Tt || {}), Ut = /* @__PURE__ */ ((o) => (o.Absolute = "absolute", o.DisplayNone = "display-none", o))(Ut || {});
 function Dt(o) {

package/library/chunks/{toast.CXEAfCvN.js → toast.C5Ir5yKA.js}

@@ -1,4 +1,4 @@
-import { D as f } from "./transformation.8uLv6uwG.js";
+import { D as f } from "./content-builder.BX4pHujE.js";
 function h(n, e) {
   return n.filter((r, t) => t !== e);
 }