@orangelogic/design-system 4.2.0 → 4.3.0

package/library/components/input.js

@@ -1,13 +1,13 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CAS3c9pM.js";
-import "../chunks/form-control.styles.CaGWmeAS.js";
+import "../chunks/form-control.styles.CHC7Q08Q.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/default-value.COZopaet.js";
-import "../chunks/form.DN2v7-DH.js";
-import "../chunks/i18n.rtxrs1c1.js";
+import "../chunks/form.LpappO1d.js";
+import "../chunks/i18n.Q5_2aVLU.js";
 import "../chunks/slot.j5oheLJC.js";
 import "../chunks/watch.DJF5K-8U.js";
-import { C as j } from "../chunks/input.D1FFprPl.js";
+import { C as j } from "../chunks/input.ftEf4GS6.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";

package/library/components/line-clamp.js

@@ -1,4 +1,4 @@
-import "../chunks/button.D1YIxtv-.js";
+import "../chunks/button.DbAUlIXG.js";
 import "./tooltip.js";
 import "./resize-observer.js";
 import { n as s, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";

package/library/components/markdown.js

@@ -1,9 +1,9 @@
-import "../chunks/icon-button.CbUddcgI.js";
-import { C as s } from "../chunks/markdown.Dd_GFJK8.js";
+import "../chunks/icon-button.BjAbCuH8.js";
+import { C as s } from "../chunks/markdown.RljldBNb.js";
 import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/i18n.rtxrs1c1.js";
+import "../chunks/i18n.Q5_2aVLU.js";
 import "../chunks/watch.DJF5K-8U.js";
-import "../chunks/string.Demn8Xmk.js";
+import "../chunks/string.CfI2ejyR.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/state.CSDxrqLd.js";

package/library/components/masonry.js

@@ -1,33 +1,33 @@
-import f from "./grid.js";
-import _ from "./grid-item.js";
-import { C as v } from "../chunks/icon-button.CbUddcgI.js";
-import { C as $ } from "../chunks/image.A2hE1WoV.js";
-import S from "./space.js";
+import _ from "./grid.js";
+import f from "./grid-item.js";
+import { C as v } from "../chunks/icon-button.BjAbCuH8.js";
+import { C as S } from "../chunks/image.CCo__54F.js";
+import $ from "./space.js";
 import C from "./tooltip.js";
 import { n as s, C as w } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as I } from "../chunks/component.styles.CAS3c9pM.js";
 import { a as x } from "../chunks/index.Cpamj0jB.js";
 import { c as k } from "../chunks/custom-element.L4WJXn1j.js";
-import { w as U } from "../chunks/watch.DJF5K-8U.js";
-import { i as z, x as n } from "../chunks/lit-element.jLBm65_O.js";
+import { w as D } from "../chunks/watch.DJF5K-8U.js";
+import { i as U, x as n } from "../chunks/lit-element.jLBm65_O.js";
 import { r as b } from "../chunks/state.CSDxrqLd.js";
-import { e as A } from "../chunks/query.BBf1UFkC.js";
-import { e as m } from "../chunks/class-map.BiVq-cVR.js";
+import { e as z } from "../chunks/query.BBf1UFkC.js";
+import { e as g } from "../chunks/class-map.BiVq-cVR.js";
 import { o as c } from "../chunks/if-defined.BRoBj_Rp.js";
-import { c as g } from "../chunks/repeat.CFjcER6_.js";
-import { o as y } from "../chunks/style-map.llVFPd__.js";
+import { c as y } from "../chunks/repeat.CFjcER6_.js";
+import { o as p } from "../chunks/style-map.llVFPd__.js";
 import { n as u } from "../chunks/when.Dr1es41R.js";
-import { S as E } from "../chunks/sortable.esm.oSzf6C5Q.js";
+import { S as A } from "../chunks/sortable.esm.oSzf6C5Q.js";
 var d = /* @__PURE__ */ ((t) => (t.Masonry = "masonry", t.Standard = "standard", t))(d || {});
-const j = z`:host{--actions-background-color:var(--cx-color-neutral-100);--border-radius:0px;--item-border-radius:var(--cx-border-radius-medium);--padding:0px;--width:100%;--height:auto;width:var(--width,100%);height:var(--height,100%);display:block;overflow:auto}:host([spacing="3x-small"]){--spacing-container-gap:var(--cx-spacing-3x-small)}:host([spacing="2x-small"]){--spacing-container-gap:var(--cx-spacing-2x-small)}:host([spacing=x-small]){--spacing-container-gap:var(--cx-spacing-x-small)}:host([spacing=small]){--spacing-container-gap:var(--cx-spacing-small)}:host([spacing=medium]){--spacing-container-gap:var(--cx-spacing-medium)}:host([spacing=large]){--spacing-container-gap:var(--cx-spacing-large)}:host([spacing=x-large]){--spacing-container-gap:var(--cx-spacing-x-large)}:host([spacing="2x-large"]){--spacing-container-gap:var(--cx-spacing-2x-large)}:host([spacing="3x-large"]){--spacing-container-gap:var(--cx-spacing-3x-large)}:host([spacing="4x-large"]){--spacing-container-gap:var(--cx-spacing-4x-large)}.masonry-list{column-gap:var(--spacing-container-gap)}.masonry-list__item{border-radius:var(--item-border-radius);display:block;position:relative;overflow:hidden}.masonry-list__item--error:before{content:"";border:2px solid var(--cx-color-danger);border-radius:var(--item-border-radius);z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.container--masonry .masonry-list__item{margin-bottom:var(--spacing-container-gap)}.container--standard cx-grid-item::part(base){height:100%}.masonry-list__item__image{width:100%;height:100%}.masonry-list__item__actions{opacity:0;width:100%;transition:opacity var(--cx-transition-fast) ease-in-out;z-index:10;position:absolute;bottom:0;left:0}.masonry-list__item__actions:before{content:"";background-color:var(--actions-background-color);opacity:.5;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.masonry-list__item:hover .masonry-list__item__actions{opacity:1}.masonry-list__item__action{z-index:5;flex:auto;position:relative}.masonry-list__item__action::part(base){border-radius:0;width:100%}.container--sortable .masonry-list__item{cursor:move}`;
-var D = Object.defineProperty, F = Object.getOwnPropertyDescriptor, e = (t, a, r, o) => {
-  for (var l = o > 1 ? void 0 : o ? F(a, r) : a, p = t.length - 1, h; p >= 0; p--)
-    (h = t[p]) && (l = (o ? h(a, r, l) : h(l)) || l);
-  return o && l && D(a, r, l), l;
+const E = U`:host{--actions-background-color:var(--cx-color-neutral-100);--border-radius:0px;--item-border-radius:var(--cx-border-radius-medium);--padding:0px;--width:100%;--height:auto;width:var(--width,100%);height:var(--height,100%);display:block;overflow:auto}:host([spacing="3x-small"]){--spacing-container-gap:var(--cx-spacing-3x-small)}:host([spacing="2x-small"]){--spacing-container-gap:var(--cx-spacing-2x-small)}:host([spacing=x-small]){--spacing-container-gap:var(--cx-spacing-x-small)}:host([spacing=small]){--spacing-container-gap:var(--cx-spacing-small)}:host([spacing=medium]){--spacing-container-gap:var(--cx-spacing-medium)}:host([spacing=large]){--spacing-container-gap:var(--cx-spacing-large)}:host([spacing=x-large]){--spacing-container-gap:var(--cx-spacing-x-large)}:host([spacing="2x-large"]){--spacing-container-gap:var(--cx-spacing-2x-large)}:host([spacing="3x-large"]){--spacing-container-gap:var(--cx-spacing-3x-large)}:host([spacing="4x-large"]){--spacing-container-gap:var(--cx-spacing-4x-large)}.masonry-list{column-gap:var(--spacing-container-gap)}.masonry-list__item{border-radius:var(--item-border-radius);display:block;position:relative;overflow:hidden}.masonry-list__item--error:before{content:"";border:2px solid var(--cx-color-danger);border-radius:var(--item-border-radius);z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.container--masonry .masonry-list__item{margin-bottom:var(--spacing-container-gap)}.container--standard cx-grid-item::part(base){height:100%}.masonry-list__item__image{width:100%;height:100%}.masonry-list__item--no-image .masonry-list__item__image{display:none}.masonry-list__item__actions{opacity:0;width:100%;transition:opacity var(--cx-transition-fast) ease-in-out;z-index:10;position:absolute;bottom:0;left:0}.masonry-list__item__actions:before{content:"";background-color:var(--actions-background-color);opacity:.5;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.masonry-list__item:hover .masonry-list__item__actions{opacity:1}.masonry-list__item__action{z-index:5;flex:auto;position:relative}.masonry-list__item__action::part(base){border-radius:0;width:100%}.container--sortable .masonry-list__item{cursor:move}`;
+var j = Object.defineProperty, F = Object.getOwnPropertyDescriptor, e = (t, r, a, o) => {
+  for (var l = o > 1 ? void 0 : o ? F(r, a) : r, h = t.length - 1, m; h >= 0; h--)
+    (m = t[h]) && (l = (o ? m(r, a, l) : m(l)) || l);
+  return o && l && j(r, a, l), l;
 };
 let i = class extends w {
   constructor() {
-    super(), this.data = [], this.variant = d.Standard, this.cols = 3, this.rowHeight = "auto", this.actions = [], this.sortable = !1, this.spacing = "medium", this.idKey = "id", this.format = "", this.manualFormat = !1, this.noCrossorigin = !1, this.sortableInstance = null, this.previous = [], this.abortDrag = !1, this.handleEnd = this.handleEnd.bind(this), this.handleStart = this.handleStart.bind(this), this.handleSortableUpdate = this.handleSortableUpdate.bind(this), this.handleItemClick = this.handleItemClick.bind(this);
+    super(), this.data = [], this.variant = d.Standard, this.cols = 3, this.rowHeight = "auto", this.actions = [], this.sortable = !1, this.spacing = "medium", this.idKey = "id", this.format = "", this.manualFormat = !1, this.noCrossorigin = !1, this.sortableInstance = null, this.previous = [], this.abortDrag = !1, this.handleEnd = this.handleEnd.bind(this), this.handleStart = this.handleStart.bind(this), this.handleSortableUpdate = this.handleSortableUpdate.bind(this), this.handleSetData = this.handleSetData.bind(this), this.handleItemClick = this.handleItemClick.bind(this);
   }
   getAllItems() {
     return Array.from(this.list.querySelectorAll(".masonry-list__item"));
@@ -36,21 +36,22 @@ let i = class extends w {
     t.item && (this.previous = [t.item.previousSibling]);
   }
   async handleEnd(t) {
-    await this.updateComplete, this.sortableInstance && (t.item && this.previous.forEach((a) => {
-      a && a.after(t.item);
+    await this.updateComplete, this.sortableInstance && (t.item && this.previous.forEach((r) => {
+      r && r.after(t.item);
     }), this.requestUpdate());
   }
   destroySortable() {
     this.sortableInstance && (this.sortableInstance.destroy(), this.sortableInstance = null);
   }
   initSortable() {
-    this.sortableInstance = E.create(this.list, {
+    this.sortableInstance = A.create(this.list, {
       animation: 100,
       onAdd: this.handleSortableUpdate,
       onEnd: this.handleEnd,
       onRemove: this.handleSortableUpdate,
       onStart: this.handleStart,
-      onUpdate: this.handleSortableUpdate
+      onUpdate: this.handleSortableUpdate,
+      setData: this.handleSetData
     });
   }
   handleSortableChange() {
@@ -74,19 +75,19 @@ let i = class extends w {
     const t = Number.isFinite(this.cols) && this.cols > 0 ? this.cols : 1;
     return `${Math.round(100 / t)}vw`;
   }
-  handleItemClick(t, a) {
+  handleItemClick(t, r) {
     this.emit("cx-masonry-select", {
-      detail: { event: t, item: a }
+      detail: { event: t, item: r }
     });
   }
   handleSortableUpdate(t) {
-    const a = this.data[t.oldIndex], r = [...this.data];
-    r.splice(t.oldIndex, 1), r.splice(t.newIndex, 0, a);
+    const r = this.data[t.oldIndex], a = [...this.data];
+    a.splice(t.oldIndex, 1), a.splice(t.newIndex, 0, r);
     const o = {
       from: t.from,
       item: t.item,
       items: this.getAllItems(),
-      itemsData: r,
+      itemsData: a,
       newIndex: t.newIndex,
       oldIndex: t.oldIndex,
       to: t.to,
@@ -96,59 +97,72 @@ let i = class extends w {
       detail: o
     });
   }
+  /**
+   * An item without an image gets a browser-made drag preview that lands in the
+   * viewport corner. Use the item itself as the preview so it follows the cursor.
+   */
+  handleSetData(t, r) {
+    const a = r.getBoundingClientRect();
+    t.setDragImage(r, a.width / 2, a.height / 2);
+  }
   renderActions(t) {
-    const a = (r) => {
+    const r = (a) => {
       const o = () => {
-        this.emit(r.event, {
+        this.emit(a.event, {
           detail: { item: t }
         });
       };
-      return n`<cx-icon-button class="masonry-list__item__action" name=${c(r.icon)} src=${c(r.src)} @click=${o} size="small" style=${y({
-        color: r.color
+      return n`<cx-icon-button class="masonry-list__item__action" name=${c(a.icon)} src=${c(a.src)} @click=${o} size="small" style=${p({
+        color: a.color
       })}></cx-icon-button>`;
     };
-    return n`<cx-space class="masonry-list__item__actions" direction="horizontal" spacing="x-small" justify-content="space-around">${g(
+    return n`<cx-space class="masonry-list__item__actions" direction="horizontal" spacing="x-small" justify-content="space-around">${y(
       this.actions,
-      (r) => r.event,
-      (r) => r.tooltip ? n`<cx-tooltip content=${r.tooltip}>${a(r)}</cx-tooltip>` : a(r)
+      (a) => a.event,
+      (a) => a.tooltip ? n`<cx-tooltip content=${a.tooltip}>${r(a)}</cx-tooltip>` : r(a)
     )}</cx-space>`;
   }
   renderMasonry() {
-    return n`<div class="masonry-list" style=${y({
+    return n`<div class="masonry-list" style=${p({
       "column-count": this.cols
-    })} part="list">${g(
+    })} part="list">${y(
       this.data,
       (t) => t[this.idKey],
       (t) => {
-        const a = (r) => {
-          this.handleItemClick(r, t);
+        const r = (a) => {
+          this.handleItemClick(a, t);
         };
-        return n`<div data-id=${t[this.idKey]} class=${m({
+        return n`<div data-id=${t[this.idKey]} class=${g({
           "masonry-list__item": !0,
-          "masonry-list__item--error": t.hasError ?? !1
-        })} part="item" @click=${a}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} srcset=${c(t.srcset || void 0)} sizes=${c(t.srcset ? this.itemSizes : void 0)} object-fit=${t.objectFit || x.Cover} ?loading=${t.loading} ?no-crossorigin=${this.noCrossorigin} retry-on-error></cx-image>${u(this.actions.length > 0, () => this.renderActions(t))}</div>`;
+          "masonry-list__item--error": t.hasError ?? !1,
+          "masonry-list__item--no-image": !t.src && !t.loading
+        })} style=${p({
+          backgroundColor: t.backgroundColor || void 0
+        })} part="item" @click=${r}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} srcset=${c(t.srcset || void 0)} sizes=${c(t.srcset ? this.itemSizes : void 0)} object-fit=${t.objectFit || x.Cover} ?loading=${t.loading} ?no-crossorigin=${this.noCrossorigin} retry-on-error></cx-image>${u(this.actions.length > 0, () => this.renderActions(t))}</div>`;
       }
     )}</div>`;
   }
   renderStandard() {
-    return n`<cx-grid columns=${this.cols} spacing="var(--cx-spacing-${this.spacing})" use-flex-gap class="masonry-list" part="list">${g(
+    return n`<cx-grid columns=${this.cols} spacing="var(--cx-spacing-${this.spacing})" use-flex-gap class="masonry-list" part="list">${y(
       this.data,
       (t) => t[this.idKey],
       (t) => {
-        const a = (r) => {
-          this.handleItemClick(r, t);
+        const r = (a) => {
+          this.handleItemClick(a, t);
         };
-        return n`<cx-grid-item xs="1"><div class=${m({
+        return n`<cx-grid-item xs="1"><div class=${g({
           "masonry-list__item": !0,
-          "masonry-list__item--error": t.hasError ?? !1
-        })} style=${y({
+          "masonry-list__item--error": t.hasError ?? !1,
+          "masonry-list__item--no-image": !t.src && !t.loading
+        })} style=${p({
+          backgroundColor: t.backgroundColor || void 0,
           height: this.rowHeight
-        })} part="item" @click=${a} data-id=${t[this.idKey]}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} srcset=${c(t.srcset || void 0)} sizes=${c(t.srcset ? this.itemSizes : void 0)} width="100%" height="100%" object-fit=${t.objectFit || x.Cover} retry-on-error ?loading=${t.loading} ?no-crossorigin=${this.noCrossorigin}></cx-image>${u(this.actions.length > 0, () => this.renderActions(t))}</div></cx-grid-item>`;
+        })} part="item" @click=${r} data-id=${t[this.idKey]}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} srcset=${c(t.srcset || void 0)} sizes=${c(t.srcset ? this.itemSizes : void 0)} width="100%" height="100%" object-fit=${t.objectFit || x.Cover} retry-on-error ?loading=${t.loading} ?no-crossorigin=${this.noCrossorigin}></cx-image>${u(this.actions.length > 0, () => this.renderActions(t))}</div></cx-grid-item>`;
       }
     )}</cx-grid>`;
   }
   render() {
-    return n`<div part="base" class=${m({
+    return n`<div part="base" class=${g({
       container: !0,
       "container--masonry": this.variant === d.Masonry,
       "container--sortable": this.sortable,
@@ -160,17 +174,17 @@ let i = class extends w {
     )}</div>`;
   }
 };
-i.styles = [I, j];
+i.styles = [I, E];
 i.dependencies = {
-  "cx-grid": f,
-  "cx-grid-item": _,
+  "cx-grid": _,
+  "cx-grid-item": f,
   "cx-icon-button": v,
-  "cx-image": $,
-  "cx-space": S,
+  "cx-image": S,
+  "cx-space": $,
   "cx-tooltip": C
 };
 e([
-  A(".masonry-list")
+  z(".masonry-list")
 ], i.prototype, "list", 2);
 e([
   s({ type: Array })
@@ -215,7 +229,7 @@ e([
   b()
 ], i.prototype, "abortDrag", 2);
 e([
-  U("sortable", { waitUntilFirstUpdate: !0 })
+  D("sortable", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleSortableChange", 1);
 i = e([
   k("cx-masonry")

package/library/components/menu-item.js

@@ -1,8 +1,8 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CAS3c9pM.js";
-import { C as b } from "../chunks/menu-item.CbqZ66to.js";
+import { C as b } from "../chunks/menu-item.BNs1Ji48.js";
 import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/i18n.rtxrs1c1.js";
+import "../chunks/i18n.Q5_2aVLU.js";
 import "../chunks/slot.j5oheLJC.js";
 import "../chunks/watch.DJF5K-8U.js";
 import "../chunks/lit-element.jLBm65_O.js";

package/library/components/menu.js

@@ -1,8 +1,8 @@
 import { n as c, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as b } from "../chunks/component.styles.CAS3c9pM.js";
-import { M as g, C as v } from "../chunks/menu-item.CbqZ66to.js";
+import { M as g, C as v } from "../chunks/menu-item.BNs1Ji48.js";
 import { c as y } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as w } from "../chunks/i18n.rtxrs1c1.js";
+import { L as w } from "../chunks/i18n.Q5_2aVLU.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";

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.DdsUysbF.js";
-import { C as u } from "../chunks/confirm-popover.CJXyEa5A.js";
+import { default as p } from "./color-swatch.js";
+import { C as u } from "../chunks/confirm-popover.Cd4HM5-B.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.BAPsI-gg.js";
+import { C as c } from "../chunks/folder-select.BWeanVkA.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";
@@ -18,7 +18,7 @@ import { default as O } from "./typeface.js";
 export {
   e as CxBicolorPicker,
   a as CxBorderInputGroup,
-  x as CxColorSwatch,
+  p as CxColorSwatch,
   u as CxConfirmPopover,
   d as CxCornerPositionInputGroup,
   l as CxCropper,

package/library/components/mutation-observer.js

@@ -5,34 +5,36 @@ import { w as l } from "../chunks/watch.DJF5K-8U.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}`;
-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);
-  return r && s && m(i, n, s), s;
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (r, s, n, i) => {
+  for (var e = i > 1 ? void 0 : i ? y(s, n) : s, h = r.length - 1, d; h >= 0; h--)
+    (d = r[h]) && (e = (i ? d(s, n, e) : d(e)) || e);
+  return i && e && m(s, n, e), e;
 };
 let t = class extends c {
   constructor() {
-    super(...arguments), this.attrOldValue = !1, this.charData = !1, this.charDataOldValue = !1, this.childList = !1, this.disabled = !1, this.handleMutation = (a) => {
+    super(...arguments), this.attrOldValue = !1, this.charData = !1, this.charDataOldValue = !1, this.childList = !1, this.disabled = !1, this.handleMutation = (r) => {
       this.emit("cx-mutation", {
-        detail: { mutationList: a }
+        detail: { mutationList: r }
       });
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.mutationObserver = new MutationObserver(this.handleMutation), this.disabled || this.startObserver();
+    super.connectedCallback(), this.disabled || this.startObserver();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.stopObserver();
   }
   startObserver() {
-    const a = typeof this.attr == "string" && this.attr.length > 0, i = a && this.attr !== "*" ? this.attr.split(" ") : void 0;
-    (this.mutationSlot?.assignedNodes({ flatten: !0 }) || []).forEach((r) => {
-      if (r.nodeType === Node.ELEMENT_NODE)
+    const r = typeof this.attr == "string" && this.attr.length > 0, s = r && this.attr !== "*" ? this.attr.split(" ") : void 0, n = this.mutationSlot?.assignedNodes({ flatten: !0 }) || [];
+    this.mutationObserver ??= new MutationObserver(this.handleMutation);
+    const { mutationObserver: i } = this;
+    n.forEach((e) => {
+      if (e.nodeType === Node.ELEMENT_NODE)
         try {
-          this.mutationObserver.observe(r, {
-            attributeFilter: i,
+          i.observe(e, {
+            attributeFilter: s,
             attributeOldValue: this.attrOldValue,
-            attributes: a,
+            attributes: r,
             characterData: this.charData,
             characterDataOldValue: this.charDataOldValue,
             childList: this.childList,
@@ -59,38 +61,38 @@ let t = class extends c {
   }
 };
 t.styles = [u, O];
-e([
+a([
   v("slot")
 ], t.prototype, "mutationSlot", 2);
-e([
+a([
   o({ reflect: !0 })
 ], t.prototype, "attr", 2);
-e([
+a([
   o({ attribute: "attr-old-value", reflect: !0, type: Boolean })
 ], t.prototype, "attrOldValue", 2);
-e([
+a([
   o({ attribute: "char-data", reflect: !0, type: Boolean })
 ], t.prototype, "charData", 2);
-e([
+a([
   o({ attribute: "char-data-old-value", reflect: !0, type: Boolean })
 ], t.prototype, "charDataOldValue", 2);
-e([
+a([
   o({ attribute: "child-list", reflect: !0, type: Boolean })
 ], t.prototype, "childList", 2);
-e([
+a([
   o({ reflect: !0, type: Boolean })
 ], t.prototype, "disabled", 2);
-e([
+a([
   l("disabled")
 ], t.prototype, "handleDisabledChange", 1);
-e([
+a([
   l("attr", { waitUntilFirstUpdate: !0 }),
   l("attr-old-value", { waitUntilFirstUpdate: !0 }),
   l("char-data", { waitUntilFirstUpdate: !0 }),
   l("char-data-old-value", { waitUntilFirstUpdate: !0 }),
   l("childList", { waitUntilFirstUpdate: !0 })
 ], t.prototype, "handleChange", 1);
-t = e([
+t = a([
   p("cx-mutation-observer")
 ], t);
 export {

package/library/components/option.js

@@ -1,8 +1,8 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CAS3c9pM.js";
-import { C } from "../chunks/option.CkhHTlpl.js";
+import { C } from "../chunks/option.C8IEnv5Q.js";
 import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/i18n.rtxrs1c1.js";
+import "../chunks/i18n.Q5_2aVLU.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.CVwjA_yf.js";
-import { C as t } from "../chunks/color-swatch-group.BPXiMxjh.js";
+import { C as a } from "../chunks/asset-link-format.C5Ue4EGP.js";
+import { C as t } from "../chunks/color-swatch-group.B10yWbVM.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.D1FFprPl.js";
+import { C as i } from "../chunks/input.ftEf4GS6.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.CAS3c9pM.js";

package/library/components/pagination.js

@@ -1,9 +1,9 @@
 import "./space.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/icon-button.CbUddcgI.js";
-import { C as k } from "../chunks/pagination.BlQRt932.js";
+import "../chunks/icon-button.BjAbCuH8.js";
+import { C as k } from "../chunks/pagination.Bke9vgl4.js";
 import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/i18n.rtxrs1c1.js";
+import "../chunks/i18n.Q5_2aVLU.js";
 import "../chunks/math.DuKzLacZ.js";
 import "../chunks/watch.DJF5K-8U.js";
 import "../chunks/lit-element.jLBm65_O.js";
@@ -11,12 +11,12 @@ import "../chunks/state.CSDxrqLd.js";
 import "../chunks/class-map.BiVq-cVR.js";
 import "../chunks/repeat.CFjcER6_.js";
 import "../chunks/when.Dr1es41R.js";
-import "../chunks/button.D1YIxtv-.js";
-import "../chunks/input.D1FFprPl.js";
-import "../chunks/option.CkhHTlpl.js";
+import "../chunks/button.DbAUlIXG.js";
+import "../chunks/input.ftEf4GS6.js";
+import "../chunks/option.C8IEnv5Q.js";
 import "./select.js";
 import "./tooltip.js";
-import "../chunks/typography.T72DuoCa.js";
+import "../chunks/typography.BLYdTF0n.js";
 export {
   k as default
 };

package/library/components/popup.js

@@ -10,7 +10,7 @@ import { i as gt, p as ne, f as We, a as qe } from "../chunks/browser.BHOCIF_A.j
 import { c as ye } from "../chunks/component.styles.CAS3c9pM.js";
 import { c as Ve } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as je } from "../chunks/debounce.DaHuiSGU.js";
-import { L as Ue } from "../chunks/i18n.rtxrs1c1.js";
+import { L as Ue } from "../chunks/i18n.Q5_2aVLU.js";
 import { n as Ye } from "../chunks/when.Dr1es41R.js";
 /**
  * @license

package/library/components/position-picker.js

@@ -4,9 +4,9 @@ import m from "./radio.js";
 import x from "./radio-group.js";
 import { n as u, C as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as _ } from "../chunks/component.styles.CAS3c9pM.js";
-import { P as i } from "../chunks/position-picker.DjnhxIKF.js";
+import { P as i } from "../chunks/position-picker.qkbJlboF.js";
 import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as v } from "../chunks/i18n.rtxrs1c1.js";
+import { L as v } from "../chunks/i18n.Q5_2aVLU.js";
 import { i as f, x as k } from "../chunks/lit-element.jLBm65_O.js";
 const $ = f`.position-picker__column{width:fit-content}.position-picker__column::part(base){justify-content:center;align-items:center;gap:var(--cx-spacing-x-small);flex-direction:column;display:flex}.position-picker__radio{--checked-color:var(--cx-color-neutral-0);--checked-border-color:var(--cx-color-neutral-0);--checked-background-color:var(--cx-color-primary);--checked-hover-border-color:var(--cx-color-neutral-0);--checked-hover-background-color:var(--cx-color-primary)}`;
 var C = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (c, o, t, a) => {

package/library/components/progress-bar.js

@@ -1,7 +1,7 @@
 import { n as i, C as d } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as h } from "../chunks/component.styles.CAS3c9pM.js";
 import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as b } from "../chunks/i18n.rtxrs1c1.js";
+import { L as b } from "../chunks/i18n.Q5_2aVLU.js";
 import { i as g, x as c } from "../chunks/lit-element.jLBm65_O.js";
 import { e as u } from "../chunks/class-map.BiVq-cVR.js";
 import { o as v } from "../chunks/if-defined.BRoBj_Rp.js";

package/library/components/progress-ring.js

@@ -1,7 +1,7 @@
 import { n as l, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as d } from "../chunks/component.styles.CAS3c9pM.js";
 import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as u } from "../chunks/i18n.rtxrs1c1.js";
+import { L as u } from "../chunks/i18n.Q5_2aVLU.js";
 import { i as f, x as v } from "../chunks/lit-element.jLBm65_O.js";
 import { r as h } from "../chunks/state.CSDxrqLd.js";
 import { e as m } from "../chunks/query.BBf1UFkC.js";

package/library/components/radio-button.js

@@ -9,7 +9,7 @@ import { e as y } from "../chunks/class-map.BiVq-cVR.js";
 import { o as h } from "../chunks/if-defined.BRoBj_Rp.js";
 import { u as _ } from "../chunks/static.UA3G1Deq.js";
 import { i as v } from "../chunks/lit-element.jLBm65_O.js";
-import { b as w } from "../chunks/button.styles.BWgHrfLD.js";
+import { b as w } from "../chunks/button.styles.D3GdfF7I.js";
 const C = v`
   ${w}
 

package/library/components/radio-card.js

@@ -10,7 +10,7 @@ import { e as v } from "../chunks/class-map.BiVq-cVR.js";
 import _ from "./card.js";
 import y from "./line-clamp.js";
 import C from "./radio.js";
-const w = m`:host{--label-color:var(--cx-input-label-color);--label-text-align:left;--description-color:var(--cx-input-label-color);--description-text-align:left;--toggle-size:var(--cx-toggle-size-large);flex-direction:column;align-items:center;width:100%;display:flex;position:relative}:host(:focus-visible){outline:0}.radio-card{--border-radius:var(--cx-border-radius-large);--box-shadow:none;--padding:var(--cx-spacing-small);--image-border-radius:var(--cx-border-radius-medium);cursor:pointer;width:var(--card-width,100%);height:var(--card-height,100%)}.radio-card--checked:not(.radio-card--grouped)::part(base){height:100%}.radio-card--grouped::part(base){border-top-width:0;border-radius:0;height:100%}.radio-card--grouped.radio-card--horizontal::part(base){border-left-width:0;border-top-width:var(--border-width)}:host(:first-child) .radio-card--grouped::part(base){border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-top-width:var(--border-width);border-bottom-right-radius:0;border-bottom-left-radius:0}:host(:last-child) .radio-card--grouped::part(base){border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-top-left-radius:0;border-top-right-radius:0}:host(:first-child) .radio-card--grouped.radio-card--horizontal::part(base){border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius);border-left-width:var(--border-width);border-top-right-radius:0;border-bottom-right-radius:0}:host(:last-child) .radio-card--grouped.radio-card--horizontal::part(base){border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.radio-card::part(image){background-color:#0000}.radio-card--compact::part(image){display:none}.radio-card--checked:not(.radio-card--grouped){--border-color:var(--cx-color-primary)}.radio-card--checked::part(base){background-color:var(--cx-color-primary-50)}.radio-card--disabled{opacity:.5;cursor:default}.radio-card__label{justify-content:space-between;align-items:center;gap:var(--cx-spacing-2x-small);text-transform:var(--cx-radio-card-label-text-transform,none);display:flex}.radio-card__description{margin-left:calc(var(--toggle-size) + .5em)}.radio-card__description>cx-line-clamp{color:var(--description-color);line-height:var(--cx-line-height-medium);text-align:var(--description-text-align)}.radio-card__label>cx-line-clamp{color:var(--label-color);text-align:var(--label-text-align);flex:auto}.radio-card--has-suffix .radio-card__label__suffix{width:3rem}.radio-card__label__suffix{justify-content:flex-end;height:fit-content;display:flex}.radio-card__image::slotted(img),.radio-card__image::slotted(svg){border-radius:var(--cx-border-radius-small);width:100%}.radio-card__image::slotted(*){flex-direction:column;display:flex}cx-radio{--toggle-size:var(--toggle-size)}cx-radio::part(base){align-items:center;width:100%}`;
+const w = m`:host{--label-color:var(--cx-input-label-color);--label-text-align:left;--description-color:var(--cx-input-label-color);--description-text-align:left;--toggle-size:var(--cx-toggle-size-large);--radio-card-overflow:auto;flex-direction:column;align-items:center;width:100%;display:flex;position:relative}:host(:focus-visible){outline:0}.radio-card{--border-radius:var(--cx-border-radius-large);--box-shadow:none;--padding:var(--cx-spacing-small);--image-border-radius:var(--cx-border-radius-medium);cursor:pointer;width:var(--card-width,100%);height:var(--card-height,100%);--card-overflow:var(--radio-card-overflow,auto)}.radio-card--checked:not(.radio-card--grouped)::part(base){height:100%}.radio-card--grouped::part(base){border-top-width:0;border-radius:0;height:100%}.radio-card--grouped.radio-card--horizontal::part(base){border-left-width:0;border-top-width:var(--border-width)}:host(:first-child) .radio-card--grouped::part(base){border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-top-width:var(--border-width);border-bottom-right-radius:0;border-bottom-left-radius:0}:host(:last-child) .radio-card--grouped::part(base){border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-top-left-radius:0;border-top-right-radius:0}:host(:first-child) .radio-card--grouped.radio-card--horizontal::part(base){border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius);border-left-width:var(--border-width);border-top-right-radius:0;border-bottom-right-radius:0}:host(:last-child) .radio-card--grouped.radio-card--horizontal::part(base){border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.radio-card::part(image){background-color:#0000}.radio-card--compact::part(image){display:none}.radio-card--checked:not(.radio-card--grouped){--border-color:var(--cx-color-primary)}.radio-card--checked::part(base){background-color:var(--cx-color-primary-50)}.radio-card--disabled{opacity:.5;cursor:default}.radio-card__label{justify-content:space-between;align-items:center;gap:var(--cx-spacing-2x-small);text-transform:var(--cx-radio-card-label-text-transform,none);display:flex}.radio-card__description{margin-left:calc(var(--toggle-size) + .5em)}.radio-card__description>cx-line-clamp{color:var(--description-color);line-height:var(--cx-line-height-medium);text-align:var(--description-text-align)}.radio-card__label>cx-line-clamp{color:var(--label-color);text-align:var(--label-text-align);flex:auto}.radio-card--has-suffix .radio-card__label__suffix{width:3rem}.radio-card__label__suffix{justify-content:flex-end;height:fit-content;display:flex}.radio-card__image::slotted(img),.radio-card__image::slotted(svg){border-radius:var(--cx-border-radius-small);width:100%}.radio-card__image::slotted(*){flex-direction:column;display:flex}cx-radio{--toggle-size:var(--toggle-size)}cx-radio::part(base){align-items:center;width:100%}`;
 var k = Object.defineProperty, z = Object.getOwnPropertyDescriptor, e = (c, i, o, d) => {
   for (var t = d > 1 ? void 0 : d ? z(i, o) : i, s = c.length - 1, l; s >= 0; s--)
     (l = c[s]) && (t = (d ? l(i, o, t) : l(t)) || t);

package/library/components/radio-group.js

@@ -1,9 +1,9 @@
 import { n as d, C as f } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as g } from "../chunks/component.styles.CAS3c9pM.js";
-import { f as y } from "../chunks/form-control.styles.CaGWmeAS.js";
+import { f as y } from "../chunks/form-control.styles.CHC7Q08Q.js";
 import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as x } from "../chunks/default-value.COZopaet.js";
-import { F as b, c as C, a as w, v as R } from "../chunks/form.DN2v7-DH.js";
+import { F as b, c as C, a as w, v as R } from "../chunks/form.LpappO1d.js";
 import { H as V } from "../chunks/slot.j5oheLJC.js";
 import { w as h } from "../chunks/watch.DJF5K-8U.js";
 import { i as E, x as u } from "../chunks/lit-element.jLBm65_O.js";

package/library/components/range.js

@@ -1,13 +1,13 @@
 import R from "./resize-observer.js";
 import { n as u, C as I } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as P } from "../chunks/component.styles.CAS3c9pM.js";
-import { f as F } from "../chunks/form-control.styles.CaGWmeAS.js";
+import { f as F } from "../chunks/form-control.styles.CHC7Q08Q.js";
 import { c as U } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as $ } from "../chunks/debounce.DaHuiSGU.js";
 import { d as O } from "../chunks/default-value.COZopaet.js";
 import { d as w } from "../chunks/drag.DenOh3AE.js";
-import { F as N } from "../chunks/form.DN2v7-DH.js";
-import { L as S } from "../chunks/i18n.rtxrs1c1.js";
+import { F as N } from "../chunks/form.LpappO1d.js";
+import { L as S } from "../chunks/i18n.Q5_2aVLU.js";
 import { c as d } from "../chunks/math.DuKzLacZ.js";
 import { H as A } from "../chunks/slot.j5oheLJC.js";
 import { w as v } from "../chunks/watch.DJF5K-8U.js";

package/library/components/rating.js

@@ -1,7 +1,7 @@
 import { n as l, C as g } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as y } from "../chunks/component.styles.CAS3c9pM.js";
 import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as f } from "../chunks/i18n.rtxrs1c1.js";
+import { L as f } from "../chunks/i18n.Q5_2aVLU.js";
 import { c as _ } from "../chunks/math.DuKzLacZ.js";
 import { w as p } from "../chunks/watch.DJF5K-8U.js";
 import { i as x, x as c } from "../chunks/lit-element.jLBm65_O.js";

package/library/components/relative-time.js

@@ -1,7 +1,7 @@
 import { n as l, C as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as p } from "../chunks/component.styles.CAS3c9pM.js";
 import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as d } from "../chunks/i18n.rtxrs1c1.js";
+import { L as d } from "../chunks/i18n.Q5_2aVLU.js";
 import { i as f, x as y } from "../chunks/lit-element.jLBm65_O.js";
 import { r as c } from "../chunks/state.CSDxrqLd.js";
 const T = f`:host{display:contents}.relative-time{color:var(--cx-relative-time-color,inherit);font-size:var(--cx-relative-time-font-size,inherit);font-weight:var(--cx-relative-time-font-weight,inherit)}`;