@orangelogic/design-system 2.78.0 → 2.79.0

package/library/components/menu-item.js

@@ -1,5 +1,5 @@
 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 S } from "../chunks/component.styles.CRO4Odto.js";
 import { c as w } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as x, L as C } from "../chunks/i18n.BUW7B9hr.js";
 import { H as _, g as M } from "../chunks/slot.j5oheLJC.js";
@@ -12,235 +12,7 @@ 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;
-  }
-`;
+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{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))}: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-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}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 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);
@@ -427,25 +199,7 @@ class T {
     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>
-    `;
+    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>`;
   }
 }
 var O = Object.defineProperty, I = Object.getOwnPropertyDescriptor, s = (o, e, n, i) => {
@@ -521,11 +275,7 @@ let t = class extends k {
   }
   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({
+    return e ? h`<a id="anchor" part="base" class=${b({
       "menu-item": !0,
       "menu-item--active": this.active,
       "menu-item--checkbox": this.type === "checkbox",
@@ -535,23 +285,7 @@ let t = class extends k {
       "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({
+    })} 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": !0,
       "menu-item--active": this.active,
       "menu-item--checkbox": this.type === "checkbox",
@@ -561,50 +295,16 @@ let t = class extends k {
       "menu-item--loading": this.loading,
       "menu-item--rtl": n,
       "menu-item--submenu-expanded": i
-    })}
-        aria-haspopup=${this.isSubmenu()}
-        aria-label=${this.getTextLabel()}
-      >
-        ${o}
-      </div>
-    `;
+    })} aria-haspopup=${this.isSubmenu()} aria-label=${this.getTextLabel()}>${o}</div>`;
   }
   render() {
     const o = this.localize.dir() === "rtl";
     let e;
-    return this.submenuPlacement && (this.submenuPlacement.startsWith("top") || this.submenuPlacement.startsWith("bottom")) ? e = "keyboard_arrow_down" : e = o ? "chevron_left" : "chevron_right", this.renderBase(h`
-      <slot
-        part="checked-icon"
-        name="checked-icon"
-        class=${b({
+    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({
       "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>
-
-      ${this.submenuController.renderSubmenu()}
-      ${this.loading ? h`
-            <cx-spinner
-              part="spinner"
-              exportparts="base:spinner__base"
-            ></cx-spinner>
-          ` : ""}
+    })}><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>${this.submenuController.renderSubmenu()}
+      ${this.loading ? h`<cx-spinner part="spinner" exportparts="base:spinner__base"></cx-spinner>` : ""}
     `);
   }
 };

package/library/components/menu-label.js

@@ -1,25 +1,8 @@
 import { C as c } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as i } from "../chunks/component.styles.DMSLciL5.js";
+import { c as i } from "../chunks/component.styles.CRO4Odto.js";
 import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as p, x } from "../chunks/lit-element.jLBm65_O.js";
-const f = p`
-  :host {
-    display: block;
-  }
-
-  .menu-label {
-    display: inline-block;
-    font-family: var(--cx-font-sans);
-    font-size: var(--cx-font-size-small);
-    font-weight: var(--cx-font-weight-medium);
-    line-height: var(--cx-line-height-large);
-    letter-spacing: var(--cx-letter-spacing-normal);
-    color: var(--cx-color-neutral-500);
-    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-`;
+const f = p`:host{display:block}.menu-label{font-family:var(--cx-font-sans);font-size:var(--cx-font-size-small);font-weight:var(--cx-font-weight-medium);line-height:var(--cx-line-height-large);letter-spacing:var(--cx-letter-spacing-normal);color:var(--cx-color-neutral-500);padding:var(--cx-spacing-x-small) var(--cx-spacing-small);-webkit-user-select:none;user-select:none;display:inline-block}`;
 var u = Object.getOwnPropertyDescriptor, v = (r, s, o, a) => {
   for (var e = a > 1 ? void 0 : a ? u(s, o) : s, t = r.length - 1, n; t >= 0; t--)
     (n = r[t]) && (e = n(e) || e);
@@ -27,7 +10,7 @@ var u = Object.getOwnPropertyDescriptor, v = (r, s, o, a) => {
 };
 let l = class extends c {
   render() {
-    return x` <slot part="base" class="menu-label"></slot> `;
+    return x`<slot part="base" class="menu-label"></slot>`;
   }
 };
 l.styles = [i, f];

package/library/components/menu-section.js

@@ -1,22 +1,10 @@
 import { n as u, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as m } from "../chunks/component.styles.DMSLciL5.js";
+import { c as m } from "../chunks/component.styles.CRO4Odto.js";
 import { c as h } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as p, E as d, x as c } from "../chunks/lit-element.jLBm65_O.js";
 import { e as f } from "../chunks/query.BBf1UFkC.js";
 import v from "./menu-label.js";
-const C = p`
-  :host {
-    display: block;
-  }
-  
-  :host([inert]) {
-    display: none;
-  }
-
-  :host([is-empty]) {
-    display: none;
-  }
-`;
+const C = p`:host{display:block}:host([inert]),:host([is-empty]){display:none}`;
 var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (n, t, r, l) => {
   for (var e = l > 1 ? void 0 : l ? x(t, r) : t, i = n.length - 1, o; i >= 0; i--)
     (o = n[i]) && (e = (l ? o(t, r, e) : o(e)) || e);
@@ -43,9 +31,7 @@ let s = class extends b {
   }
   render() {
     return c`
-      ${this.label.length > 0 ? c`<cx-menu-label part="label">${this.label}</cx-menu-label>` : d}
-      <slot @slotchange=${this.handleSlotChange}></slot>
-    `;
+      ${this.label.length > 0 ? c`<cx-menu-label part="label">${this.label}</cx-menu-label>` : d}<slot @slotchange=${this.handleSlotChange}></slot>`;
   }
 };
 s.styles = [m, C];

package/library/components/menu.js

@@ -1,5 +1,5 @@
 import { n as c, C as f } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as p } from "../chunks/component.styles.DMSLciL5.js";
+import { c as p } from "../chunks/component.styles.CRO4Odto.js";
 import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as g } from "../chunks/i18n.BUW7B9hr.js";
 import { i as v, x as d } from "../chunks/lit-element.jLBm65_O.js";
@@ -7,93 +7,7 @@ import { r as y } from "../chunks/state.CSDxrqLd.js";
 import { e as w } from "../chunks/query.BBf1UFkC.js";
 import { n as x } from "../chunks/when.Dr1es41R.js";
 import M from "./menu-item.js";
-const k = v`
-  :host {
-    display: block;
-    position: relative;
-    background: var(--cx-panel-background-color);
-    border: solid var(--cx-panel-border-width) var(--cx-panel-border-color);
-    border-radius: var(--cx-border-radius-large);
-    padding: var(--cx-spacing-x-small) 0;
-    overflow: auto;
-
-    --divider-color: var(--cx-panel-border-color);
-    --divider-width: var(--cx-panel-border-width);
-    --divider-spacing: var(--cx-spacing-x-small);
-  }
-
-  :host([horizontal]) {
-    display: flex;
-    padding: 0 var(--cx-spacing-x-small);
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-
-  ::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);
-
-    display: block;
-    margin: var(--divider-spacing) 0;
-    height: var(--divider-width);
-  }
-
-  ::slotted([data-alternating-grouping='horizontal'])::before {
-    display: inline-block;
-    height: 100%;
-    margin: 0 var(--divider-spacing);
-    width: var(--divider-width);
-  }
-
-  :host([horizontal]) ::slotted(cx-menu-section) {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-
-  :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;
-    transform: translateX(-50%);
-    position: absolute;
-    top: 0;
-    left: 0;
-    border: none;
-    transition:
-      opacity var(--cx-transition-fast) ease-in-out,
-      transform var(--cx-transition-medium) ease-in-out;
-  }
-
-  :host([variant='multiple']) ::slotted(cx-menu[active]) {
-    opacity: 1;
-    transform: translateX(0);
-    pointer-events: auto;
-  }
-
-  .back__button::part(checked-icon),
-  .back__button::part(submenu-icon) {
-    display: none;
-  }
-
-  .back__divider {
-    --spacing: var(--cx-spacing-x-small);
-  }
-`;
+const k = v`:host{background:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-border-radius-large);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;position:absolute;top:0;left:0;transform:translate(-50%)}: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 A = Object.defineProperty, I = Object.getOwnPropertyDescriptor, u = (e, t, r, i) => {
   for (var o = i > 1 ? void 0 : i ? I(t, r) : t, h = e.length - 1, n; h >= 0; h--)
     (n = e[h]) && (o = (i ? n(t, r, o) : n(o)) || o);
@@ -353,31 +267,9 @@ let l = class extends f {
   render() {
     const e = x(
       this.back,
-      () => d`
-        <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>
-      `
+      () => d`<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 === "multiple" ? d`${e}<slot
-          @slotchange=${this.handleSlotChange}
-          @click=${this.handleClick}
-          @keydown=${this.handleKeyDown}
-          @mousedown=${this.handleMouseDown}
-        ></slot>` : d`${e}<slot
-        @slotchange=${this.handleSlotChange}
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-        @mousedown=${this.handleMouseDown}
-      ></slot>`;
+    return this.variant === "multiple" ? d`${e}<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}></slot>` : d`${e}<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}></slot>`;
   }
 };
 l.styles = [p, k];

package/library/components/molecules.js

@@ -1,12 +1,12 @@
 import { default as e } from "./bicolor-picker.js";
 import { default as a } from "./border-input-group.js";
-import { C as p } from "../chunks/color-swatch.BuUP5yG4.js";
-import { C } from "../chunks/confirm-popover.BNjRvnN0.js";
+import { C as p } from "../chunks/color-swatch.Bx-HOp9f.js";
+import { C } from "../chunks/confirm-popover.BbHneK19.js";
 import { default as u } from "./corner-position-input-group.js";
-import { C as m } from "../chunks/cropper.D1lO3pl-.js";
+import { C as m } from "../chunks/cropper.DTokTzP9.js";
 import { default as i } from "./dynamic-select.js";
-import { C as c } from "../chunks/folder-select.B2qxSKA5.js";
-import { C as P } from "../chunks/list-editor.DluUZa06.js";
+import { C as c } from "../chunks/folder-select.DOsefkAC.js";
+import { C as P } from "../chunks/list-editor.DNa6ROgr.js";
 import { default as I } from "./masonry.js";
 import { default as y } from "./padding-input-group.js";
 import { default as w } from "./position-picker.js";

package/library/components/mutation-observer.js

@@ -1,14 +1,10 @@
 import { n as o, C as c } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as u } from "../chunks/component.styles.DMSLciL5.js";
+import { c as u } from "../chunks/component.styles.CRO4Odto.js";
 import { c as p } from "../chunks/custom-element.L4WJXn1j.js";
 import { w as l } from "../chunks/watch.BCJD77bD.js";
 import { i as b, x as f } from "../chunks/lit-element.jLBm65_O.js";
 import { e as v } from "../chunks/query.BBf1UFkC.js";
-const O = b`
-  :host {
-    display: contents;
-  }
-`;
+const O = b`:host{display:contents}`;
 var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (a, i, n, r) => {
   for (var s = r > 1 ? void 0 : r ? y(i, n) : i, h = a.length - 1, d; h >= 0; h--)
     (d = a[h]) && (s = (r ? d(i, n, s) : d(s)) || s);

package/library/components/option.js

@@ -1,6 +1,6 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
-import { C } from "../chunks/option.Csqefux_.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import { C } from "../chunks/option.DljDoFx4.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.BUW7B9hr.js";
 import "../chunks/watch.BCJD77bD.js";

package/library/components/organisms.js

@@ -1,6 +1,6 @@
 import { default as a } from "./asset-link-format.js";
-import { C as t } from "../chunks/color-swatch-group.C7T6-sY7.js";
-import { C } from "../chunks/file-on-demand.BTTdth3o.js";
+import { C as t } from "../chunks/color-swatch-group.DvllHUil.js";
+import { C } from "../chunks/file-on-demand.D_Mia7M9.js";
 export {
   a as CxAssetLinkFormat,
   t as CxColorSwatchGroup,

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

@@ -1,7 +1,7 @@
 import i from "./input.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.DMSLciL5.js";
+import { c as f } from "../chunks/component.styles.CRO4Odto.js";
 import { c as d } from "../chunks/custom-element.L4WJXn1j.js";
 import { s as g } from "../chunks/parse.Cu5nBDTb.js";
 import { i as h, x as u } from "../chunks/lit-element.jLBm65_O.js";
@@ -34,29 +34,18 @@ let s = class extends x {
     });
   }
   render() {
-    return u`<cx-input-group @cx-change=${this.handleInputChange}>
-      ${v(
+    return u`<cx-input-group @cx-change=${this.handleInputChange}>${v(
       ["Top", "Right", "Bottom", "Left"],
       (t) => t,
-      (t, e) => u`<cx-input
-            data-index=${e}
-            id=${t}
-            label=${t}
-            value=${this.value[e] ?? ""}
-            mask="numpx"
-            .maskBlocks=${{
+      (t, e) => u`<cx-input data-index=${e} id=${t} label=${t} value=${this.value[e] ?? ""} mask="numpx" .maskBlocks=${{
         num: {
           mask: Number,
           min: 0,
           scale: 0,
           thousandsSeparator: ""
         }
-      }}
-            .form=${this.closest("form")}
-          >
-          </cx-input>`
-    )}
-    </cx-input-group>`;
+      }} .form=${this.closest("form")}></cx-input>`
+    )}</cx-input-group>`;
   }
 };
 s.styles = [f, C];