@orangelogic/design-system 3.1.0 → 3.3.0

package/library/components/menu-item.js

@@ -1,488 +1,17 @@
-import { n as r, C as w } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as _ } from "../chunks/component.styles.CRO4Odto.js";
-import { c as L } from "../chunks/custom-element.L4WJXn1j.js";
-import { d as g, L as M } from "../chunks/i18n.DbXTTLXx.js";
-import { H as z, g as E } from "../chunks/slot.j5oheLJC.js";
-import { w as p } from "../chunks/watch.DJF5K-8U.js";
-import { i as P, x as h, E as y } from "../chunks/lit-element.jLBm65_O.js";
-import { e as b } from "../chunks/query.BBf1UFkC.js";
-import { e as v } from "../chunks/class-map.BiVq-cVR.js";
-import { o as m } from "../chunks/if-defined.BRoBj_Rp.js";
-import { C as T } from "../chunks/icon.CpHbi8tH.js";
-import R from "./popup.js";
-import $ from "./spinner.js";
-import { f as k } from "../chunks/focus-when-visible.jWSw9ks0.js";
-import { e as D, n as O } from "../chunks/ref.DktKp7fP.js";
-var d = /* @__PURE__ */ ((o) => (o.Prefix = "prefix", o.Suffix = "suffix", o))(d || {});
-const I = P`: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(--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 A {
-  constructor(e, t) {
-    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.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 s = this.queryMenuItems(t);
-    if (!s || s.length === 0) {
-      this.host.lazy && (e.preventDefault(), e.stopPropagation(), this.focusFirstMenuItemAfterLazyLoad(t));
-      return;
-    }
-    this.setRovingTabIndex(s), this.popupRef.value && (e.preventDefault(), e.stopPropagation(), this.popupRef.value.active || this.enableSubmenu(!1), s[0] instanceof HTMLElement && (this.pendingFocusCancel?.(), this.pendingFocusCancel = k(
-      s[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 s of e.assignedElements())
-      if (t = s.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), s = t?.[0];
-      !(s instanceof HTMLElement) || !t || (this.setRovingTabIndex(t), this.lazyLoadObserver?.disconnect(), this.lazyLoadObserver = null, this.pendingFocusCancel?.(), this.pendingFocusCancel = k(
-        s,
-        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((f) => f.localName === "cx-menu")[0], s = getComputedStyle(this.host).direction === "rtl" || this.popupRef.value?.dataset.currentPlacement?.startsWith("left");
-    if (!t)
-      return;
-    const { height: l, left: a, top: u, width: c } = t.getBoundingClientRect();
-    this.host.style.setProperty(
-      "--safe-triangle-submenu-start-x",
-      `${s ? a + c : a}px`
-    ), this.host.style.setProperty("--safe-triangle-submenu-start-y", `${u}px`), this.host.style.setProperty(
-      "--safe-triangle-submenu-end-x",
-      `${s ? a + c : 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((s) => {
-          s.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 = g(this.host) === "rtl", s = this.host.submenuPlacement ?? (t ? "left-start" : "right-start"), l = s.startsWith("left") || s.startsWith("right");
-    let a = [];
-    l && (s.endsWith("-start") ? a = ["padding-top", "border-top-width", "margin-top"] : s.endsWith("-end") && (a = ["padding-bottom", "border-bottom-width", "margin-bottom"]));
-    const u = a.reduce((c, f) => {
-      const x = e.get(f) ?? new CSSUnitValue(0, "px"), S = (x instanceof CSSUnitValue ? x : new CSSUnitValue(0, "px")).to("px"), C = s.endsWith("-end") ? 1 : -1;
-      return c + S.value * C;
-    }, 0);
-    this.skidding = u;
-  }
-  isExpanded() {
-    return this.popupRef.value ? this.popupRef.value.active : !1;
-  }
-  renderSubmenu() {
-    const e = g(this.host) === "rtl";
-    if (!this.hasSlotController.test("submenu"))
-      return null;
-    const t = this.host.submenuPlacement ?? (e ? "left-start" : "right-start");
-    return h`<cx-popup ${O(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 B = Object.defineProperty, H = Object.getOwnPropertyDescriptor, n = (o, e, t, s) => {
-  for (var l = s > 1 ? void 0 : s ? H(e, t) : e, a = o.length - 1, u; a >= 0; a--)
-    (u = o[a]) && (l = (s ? u(e, t, l) : u(l)) || l);
-  return s && l && B(e, t, l), l;
-};
-let i = class extends w {
-  constructor() {
-    super(), this.type = "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 = d.Suffix, this.lazy = !1, this.localize = new M(this), this.hasSlotController = new z(
-      this,
-      "submenu",
-      "submenu-icon"
-    ), this.submenuController = new A(
-      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);
-  }
-  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 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");
-  }
-  handleCurrentChange() {
-    this.current ? this.setAttribute("aria-current", this.current) : this.removeAttribute("aria-current");
-  }
-  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 E(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(o) {
-    const e = !!this.href, t = this.localize.dir() === "rtl", s = this.submenuController.isExpanded();
-    return e ? h`<a id="anchor" part="base" class=${v({
-      "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": t,
-      "menu-item--submenu-expanded": s
-    })} 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=${v({
-      "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": t,
-      "menu-item--submenu-expanded": s
-    })} aria-haspopup=${this.isSubmenu()} aria-label=${this.getTextLabel()}>${o}</div>`;
-  }
-  render() {
-    const o = this.localize.dir() === "rtl";
-    let e;
-    this.submenuPlacement && (this.submenuPlacement.startsWith("top") || this.submenuPlacement.startsWith("bottom")) ? e = "keyboard_arrow_down" : e = o ? "chevron_left" : "chevron_right";
-    const t = h`<slot part="checked-icon" name="checked-icon" class=${v({
-      "menu-item__check": !0,
-      "menu-item__check--always-show": this.alwaysShowCheckedIcon,
-      "menu-item__check--suffix": this.checkPlacement === d.Suffix
-    })}><cx-icon name="check"></cx-icon></slot>`, s = this.checkPlacement === d.Suffix;
-    return this.renderBase(h`
-      ${s ? y : 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>${s ? t : y}
-
-      ${this.submenuController.renderSubmenu()}
-      ${this.loading ? h`<cx-spinner part="spinner" exportparts="base:spinner__base"></cx-spinner>` : ""}
-    `);
-  }
-};
-i.styles = [_, I];
-i.dependencies = {
-  "cx-icon": T,
-  "cx-popup": R,
-  "cx-spinner": $
-};
-n([
-  b("slot:not([name])")
-], i.prototype, "defaultSlot", 2);
-n([
-  b("a#anchor", !0)
-], i.prototype, "anchor", 2);
-n([
-  b(".menu-item")
-], i.prototype, "menuItem", 2);
-n([
-  b(".menu-item__chevron")
-], i.prototype, "submenuIcon", 2);
-n([
-  r()
-], i.prototype, "type", 2);
-n([
-  r({ attribute: "submenu-trigger", type: String })
-], i.prototype, "submenuTrigger", 2);
-n([
-  r({ reflect: !0, type: Boolean })
-], i.prototype, "checked", 2);
-n([
-  r({ attribute: "no-uncheck", reflect: !0, type: Boolean })
-], i.prototype, "noUncheck", 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: String })
-], i.prototype, "current", 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({ attribute: "auto-size-boundary", type: Object })
-], i.prototype, "autoSizeBoundary", 2);
-n([
-  r({ reflect: !0 })
-], i.prototype, "menu", 2);
-n([
-  r({ attribute: "always-show-checked-icon", reflect: !0, type: Boolean })
-], i.prototype, "alwaysShowCheckedIcon", 2);
-n([
-  r({ attribute: "check-placement", reflect: !0, type: String })
-], i.prototype, "checkPlacement", 2);
-n([
-  r({ attribute: "submenu-placement" })
-], i.prototype, "submenuPlacement", 2);
-n([
-  r({ reflect: !0, type: Boolean })
-], i.prototype, "lazy", 2);
-n([
-  p("checked")
-], i.prototype, "handleCheckedChange", 1);
-n([
-  p("disabled")
-], i.prototype, "handleDisabledChange", 1);
-n([
-  p("current")
-], i.prototype, "handleCurrentChange", 1);
-n([
-  p("type")
-], i.prototype, "handleTypeChange", 1);
-i = n([
-  L("cx-menu-item")
-], i);
+import "../chunks/lib-cortex-element.CVMmyPMC.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import { C as b } from "../chunks/menu-item.DgUMVYe5.js";
+import "../chunks/custom-element.L4WJXn1j.js";
+import "../chunks/i18n.BA19xtyU.js";
+import "../chunks/slot.j5oheLJC.js";
+import "../chunks/watch.DJF5K-8U.js";
+import "../chunks/lit-element.jLBm65_O.js";
+import "../chunks/query.BBf1UFkC.js";
+import "../chunks/class-map.BiVq-cVR.js";
+import "../chunks/if-defined.BRoBj_Rp.js";
+import "../chunks/icon.CpHbi8tH.js";
+import "./popup.js";
+import "./spinner.js";
 export {
-  i as default
+  b as default
 };

package/library/components/menu.js

@@ -1,25 +1,25 @@
 import { n as c, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as b } from "../chunks/component.styles.CRO4Odto.js";
-import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as v } from "../chunks/i18n.DbXTTLXx.js";
-import { i as y, x as f } from "../chunks/lit-element.jLBm65_O.js";
-import { r as w } from "../chunks/state.CSDxrqLd.js";
-import { e as x } from "../chunks/query.BBf1UFkC.js";
-import { n as k } from "../chunks/when.Dr1es41R.js";
-import M from "./menu-item.js";
+import { M as g, C as v } from "../chunks/menu-item.DgUMVYe5.js";
+import { c as y } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as w } from "../chunks/i18n.BA19xtyU.js";
+import { i as x, x as f } from "../chunks/lit-element.jLBm65_O.js";
+import { r as k } from "../chunks/state.CSDxrqLd.js";
+import { e as M } from "../chunks/query.BBf1UFkC.js";
+import { n as A } from "../chunks/when.Dr1es41R.js";
 var d = /* @__PURE__ */ ((e) => (e.Default = "default", e.Multiple = "multiple", e))(d || {});
-const A = y`:host{background:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-panel-border-radius,var(--cx-border-radius-large));padding:var(--cx-panel-padding,var(--cx-spacing-x-small) 0);--divider-color:var(--cx-panel-border-color);--divider-width:var(--cx-panel-border-width);--divider-spacing:var(--cx-spacing-x-small);display:block;position:relative;overflow:auto}:host([horizontal]){padding:0 var(--cx-spacing-x-small);flex-wrap:wrap;justify-content:space-between;display:flex}::slotted(cx-divider){--color:var(--divider-color);--width:var(--divider-width);--spacing:var(--divider-spacing)}::slotted([data-alternating-grouping]):before{content:" ";background-color:var(--divider-color);margin:var(--divider-spacing) 0;height:var(--divider-width);display:block}::slotted([data-alternating-grouping=horizontal]):before{height:100%;margin:0 var(--divider-spacing);width:var(--divider-width);display:inline-block}:host([horizontal]) ::slotted(cx-menu-section){flex-wrap:wrap;justify-content:space-between;display:flex}:host([horizontal]) ::slotted(cx-menu-item){display:flex}:host([variant=multiple]){position:relative;overflow:hidden}:host([variant=multiple]) ::slotted(cx-menu[name]){opacity:0;pointer-events:none;transition:opacity var(--cx-transition-fast) ease-in-out, transform var(--cx-transition-medium) ease-in-out;border:none;top:0;left:0;transform:translate(-50%);position:absolute!important}:host([variant=multiple]) ::slotted(cx-menu[active]){opacity:1;pointer-events:auto;transform:translate(0)}.back__button::part(checked-icon),.back__button::part(submenu-icon){display:none}.back__divider{--spacing:var(--cx-spacing-x-small)}`;
-var I = Object.defineProperty, C = Object.getOwnPropertyDescriptor, u = (e, t, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? C(t, r) : t, h = e.length - 1, n; h >= 0; h--)
+const I = x`:host{background:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-panel-border-radius,var(--cx-border-radius-large));padding:var(--cx-panel-padding,var(--cx-spacing-x-small) 0);--divider-color:var(--cx-panel-border-color);--divider-width:var(--cx-panel-border-width);--divider-spacing:var(--cx-spacing-x-small);display:block;position:relative;overflow:auto}:host([horizontal]){padding:0 var(--cx-spacing-x-small);flex-wrap:wrap;justify-content:space-between;display:flex}::slotted(cx-divider){--color:var(--divider-color);--width:var(--divider-width);--spacing:var(--divider-spacing)}::slotted([data-alternating-grouping]):before{content:" ";background-color:var(--divider-color);margin:var(--divider-spacing) 0;height:var(--divider-width);display:block}::slotted([data-alternating-grouping=horizontal]):before{height:100%;margin:0 var(--divider-spacing);width:var(--divider-width);display:inline-block}:host([horizontal]) ::slotted(cx-menu-section){flex-wrap:wrap;justify-content:space-between;display:flex}:host([horizontal]) ::slotted(cx-menu-item){display:flex}:host([variant=multiple]){position:relative;overflow:hidden}:host([variant=multiple]) ::slotted(cx-menu[name]){opacity:0;pointer-events:none;transition:opacity var(--cx-transition-fast) ease-in-out, transform var(--cx-transition-medium) ease-in-out;border:none;top:0;left:0;transform:translate(-50%);position:absolute!important}:host([variant=multiple]) ::slotted(cx-menu[active]){opacity:1;pointer-events:auto;transform:translate(0)}.back__button::part(checked-icon),.back__button::part(submenu-icon){display:none}.back__divider{--spacing:var(--cx-spacing-x-small)}`;
+var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, u = (e, t, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? S(t, r) : t, h = e.length - 1, n; h >= 0; h--)
     (n = e[h]) && (o = (i ? n(t, r, o) : n(o)) || o);
-  return i && o && I(t, r, o), o;
+  return i && o && C(t, r, o), o;
 };
 function m(e) {
   return e.tagName.toLowerCase() === "cx-menu" && e instanceof l && e.getAttribute("role") === "menu";
 }
 let l = class extends p {
   constructor() {
-    super(...arguments), this.localize = new v(this), this.horizontal = !1, this.variant = d.Default, this.active = !1, this.name = "", this.back = "", this.default = !1, this.bubbleKeyDown = !1, this.ignoredKeys = [], this.disabledTabLoop = !1, this.noUncheck = !1, this.resizeObserver = null, this.slotMutationObserver = null;
+    super(...arguments), this.localize = new w(this), this.horizontal = !1, this.variant = d.Default, this.active = !1, this.name = "", this.back = "", this.default = !1, this.bubbleKeyDown = !1, this.ignoredKeys = [], this.disabledTabLoop = !1, this.noUncheck = !1, this.resizeObserver = null, this.slotMutationObserver = null;
   }
   connectedCallback() {
     super.connectedCallback(), this.slotMutationObserver = new MutationObserver(() => this.handleSlotChange()), this.slotMutationObserver.observe(this, {
@@ -40,7 +40,7 @@ let l = class extends p {
     }
   }
   handleClick(e) {
-    const t = ["menuitem", "menuitemcheckbox"], r = e.composedPath(), i = r.find(
+    const t = ["menuitem", "menuitemcheckbox", "menuitemradio"], r = e.composedPath(), i = r.find(
       (a) => t.includes(a?.getAttribute?.("role") || "")
     );
     if (!i)
@@ -55,7 +55,7 @@ let l = class extends p {
     ) !== this)
       return;
     const s = i;
-    s.type === "checkbox" && (s.checked && (this.noUncheck || s.noUncheck) || (s.checked = !s.checked)), this.emit("cx-select", { detail: { item: s } });
+    s.type === g.Checkbox && (s.checked && (this.noUncheck || s.noUncheck) || (s.checked = !s.checked)), this.emit("cx-select", { detail: { item: s } });
   }
   handleKeyDown(e) {
     if (!this.ignoredKeys.includes(e.key)) {
@@ -73,7 +73,7 @@ let l = class extends p {
       ].includes(e.key)) {
         const t = this.getAllItems(), r = this.getCurrentItem();
         let i = r ? t.indexOf(r) : 0;
-        if (["ArrowLeft", "ArrowRight"].includes(e.key) && !this.bubbleKeyDown && !(this.parentElement instanceof l) && !(this.parentElement instanceof M) && e.stopPropagation(), t.length > 0) {
+        if (["ArrowLeft", "ArrowRight"].includes(e.key) && !this.bubbleKeyDown && !(this.parentElement instanceof l) && !(this.parentElement instanceof v) && e.stopPropagation(), t.length > 0) {
           const o = this.horizontal ? e.key === "ArrowRight" || i === t.length - 1 && e.key === "ArrowDown" : e.key === "ArrowDown", h = this.horizontal ? e.key === "ArrowLeft" || i === 0 && e.key === "ArrowUp" : e.key === "ArrowUp";
           if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(
             e.key
@@ -266,16 +266,16 @@ let l = class extends p {
     });
   }
   render() {
-    const e = k(
+    const e = A(
       this.back,
       () => f`<slot name="back-button" role="menuitem" menu=${this.back}><cx-menu-item part="back-button" class="back__button" menu=${this.back}><cx-icon slot="prefix" name="chevron_left"></cx-icon>${this.localize.term("back")}</cx-menu-item><cx-divider class="back__divider"></cx-divider></slot>`
     );
     return this.variant === d.Multiple ? f`${e}<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}></slot>` : f`${e}<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}></slot>`;
   }
 };
-l.styles = [b, A];
+l.styles = [b, I];
 u([
-  x("slot")
+  M("slot")
 ], l.prototype, "defaultSlot", 2);
 u([
   c({ type: Boolean })
@@ -315,10 +315,10 @@ u([
   c({ attribute: "no-uncheck", reflect: !0, type: Boolean })
 ], l.prototype, "noUncheck", 2);
 u([
-  w()
+  k()
 ], l.prototype, "resizeObserver", 2);
 l = u([
-  g("cx-menu")
+  y("cx-menu")
 ], l);
 export {
   l as default

package/library/components/molecules.js

@@ -1,11 +1,11 @@
 import { default as e } from "./bicolor-picker.js";
 import { default as a } from "./border-input-group.js";
-import { C as x } from "../chunks/color-swatch.D6Gg5bpz.js";
-import { C as u } from "../chunks/confirm-popover.tftDINBg.js";
+import { C as x } from "../chunks/color-swatch.Caved2kL.js";
+import { C as u } from "../chunks/confirm-popover.BSS1VhB2.js";
 import { default as d } from "./corner-position-input-group.js";
 import { default as l } from "./cropper.js";
 import { default as i } from "./dynamic-select.js";
-import { C as c } from "../chunks/folder-select.CIqVGGFl.js";
+import { C as c } from "../chunks/folder-select.DN-JomDt.js";
 import { default as P } from "./masonry.js";
 import { default as I } from "./padding-input-group.js";
 import { default as y } from "./position-picker.js";

package/library/components/option.js

@@ -1,8 +1,8 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C } from "../chunks/option.B6odSlS2.js";
+import { C } from "../chunks/option.jeaj7_Lr.js";
 import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/i18n.DbXTTLXx.js";
+import "../chunks/i18n.BA19xtyU.js";
 import "../chunks/watch.DJF5K-8U.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";

package/library/components/organisms.js

@@ -1,5 +1,5 @@
-import { C as a } from "../chunks/asset-link-format.Ds5nq4mo.js";
-import { C as t } from "../chunks/color-swatch-group.d5e1sYos.js";
+import { C as a } from "../chunks/asset-link-format.BnIUG_vO.js";
+import { C as t } from "../chunks/color-swatch-group.CTcv62MK.js";
 import { default as C } from "./file-on-demand.js";
 export {
   a as CxAssetLinkFormat,

package/library/components/padding-input-group.js

@@ -1,4 +1,4 @@
-import { C as i } from "../chunks/input.33UmFGqR.js";
+import { C as i } from "../chunks/input.xgeLCG8I.js";
 import l from "./input-group.js";
 import { n as c, C as x } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as f } from "../chunks/component.styles.CRO4Odto.js";