@orangelogic/design-system 2.153.0 → 2.155.0

package/library/components/popup.js

@@ -2,11 +2,11 @@ import { a as _e, i as Vt, r as ze, x as U } from "../chunks/lit-element.jLBm65_
 import { n as y, C as Be } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { r as Me } from "../chunks/state.CSDxrqLd.js";
 import { e as Ct } from "../chunks/query.BBf1UFkC.js";
-import { e as He } from "../chunks/base.D76d76ww.js";
+import { e as Ie } from "../chunks/base.D76d76ww.js";
 import { e as ht } from "../chunks/class-map.BiVq-cVR.js";
 import { o as Lt } from "../chunks/if-defined.BRoBj_Rp.js";
 import { o as se } from "../chunks/style-map.llVFPd__.js";
-import { i as gt, p as ne, f as Ie, a as We } from "../chunks/browser.BHOCIF_A.js";
+import { i as gt, p as ne, f as He, a as We } from "../chunks/browser.BHOCIF_A.js";
 import { c as ye } from "../chunks/component.styles.CRO4Odto.js";
 import { c as qe } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as Ve } from "../chunks/debounce.DaHuiSGU.js";
@@ -20,7 +20,7 @@ import { n as Ue } from "../chunks/when.Dr1es41R.js";
 function Ye(e) {
   return (t, o) => {
     const { slot: i, selector: s } = e ?? {}, r = "slot" + (i ? `[name=${i}]` : ":not([name])");
-    return He(t, o, { get() {
+    return Ie(t, o, { get() {
       const n = this.renderRoot?.querySelector(r), a = n?.assignedElements(e) ?? [];
       return s === void 0 ? a : a.filter((l) => l.matches(s));
     } });
@@ -856,7 +856,7 @@ class yi {
     this.closeOverlay(t);
   }
 }
-const le = new yi(), vi = ["top", "right", "bottom", "left"], Q = Math.min, T = Math.max, xt = Math.round, yt = Math.floor, I = (e) => ({
+const le = new yi(), vi = ["top", "right", "bottom", "left"], Q = Math.min, T = Math.max, xt = Math.round, yt = Math.floor, H = (e) => ({
   x: e,
   y: e
 }), bi = {
@@ -1140,7 +1140,7 @@ const Di = (e) => ({
     }, p = Zt(s), f = Qt(p), m = await n.getDimensions(c), g = p === "y", v = g ? "top" : "left", x = g ? "bottom" : "right", E = g ? "clientHeight" : "clientWidth", C = r.reference[f] + r.reference[p] - u[p] - r.floating[f], P = u[p] - r.reference[p], $ = await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(c));
     let A = $ ? $[E] : 0;
     (!A || !await (n.isElement == null ? void 0 : n.isElement($))) && (A = a.floating[E] || r.floating[f]);
-    const V = C / 2 - P / 2, M = A / 2 - m[f] / 2 - 1, L = Q(d[v], M), X = Q(d[x], M), H = L, G = A - m[f] - X, R = A / 2 - m[f] / 2 + V, et = _t(H, R, G), j = !l.arrow && at(s) != null && R !== et && r.reference[f] / 2 - (R < H ? L : X) - m[f] / 2 < 0, F = j ? R < H ? R - H : R - G : 0;
+    const V = C / 2 - P / 2, M = A / 2 - m[f] / 2 - 1, L = Q(d[v], M), X = Q(d[x], M), I = L, G = A - m[f] - X, R = A / 2 - m[f] / 2 + V, et = _t(I, R, G), j = !l.arrow && at(s) != null && R !== et && r.reference[f] / 2 - (R < I ? L : X) - m[f] / 2 < 0, F = j ? R < I ? R - I : R - G : 0;
     return {
       [p]: u[p] + F,
       data: {
@@ -1189,7 +1189,7 @@ const Di = (e) => ({
         placement: s,
         overflows: M
       }], !M.every((R) => R <= 0)) {
-        var X, H;
+        var X, I;
         const R = (((X = r.flip) == null ? void 0 : X.index) || 0) + 1, et = A[R];
         if (et && (!(d === "alignment" ? x !== Y(et) : !1) || // We leave the current main axis only if every placement on that axis
         // overflows the main axis.
@@ -1203,7 +1203,7 @@ const Di = (e) => ({
               placement: et
             }
           };
-        let j = (H = L.filter((F) => F.overflows[0] <= 0).sort((F, N) => F.overflows[1] - N.overflows[1])[0]) == null ? void 0 : H.placement;
+        let j = (I = L.filter((F) => F.overflows[0] <= 0).sort((F, N) => F.overflows[1] - N.overflows[1])[0]) == null ? void 0 : I.placement;
         if (!j)
           switch (p) {
             case "bestFit": {
@@ -1417,8 +1417,8 @@ const Ni = function(e) {
       const x = m - h.top - h.bottom, E = f - h.left - h.right, C = Q(m - h[g], x), P = Q(f - h[v], E), $ = !t.middlewareData.shift;
       let A = C, V = P;
       if ((o = t.middlewareData.shift) != null && o.enabled.x && (V = E), (i = t.middlewareData.shift) != null && i.enabled.y && (A = x), $ && !u) {
-        const L = T(h.left, 0), X = T(h.right, 0), H = T(h.top, 0), G = T(h.bottom, 0);
-        p ? V = f - 2 * (L !== 0 || X !== 0 ? L + X : T(h.left, h.right)) : A = m - 2 * (H !== 0 || G !== 0 ? H + G : T(h.top, h.bottom));
+        const L = T(h.left, 0), X = T(h.right, 0), I = T(h.top, 0), G = T(h.bottom, 0);
+        p ? V = f - 2 * (L !== 0 || X !== 0 ? L + X : T(h.left, h.right)) : A = m - 2 * (I !== 0 || G !== 0 ? I + G : T(h.top, h.bottom));
       }
       await l({
         ...t,
@@ -1471,12 +1471,12 @@ function mt(e) {
   return /auto|scroll|overlay|hidden|clip/.test(t + i + o) && !Bi.has(s);
 }
 const Mi = /* @__PURE__ */ new Set(["table", "td", "th"]);
-function Hi(e) {
+function Ii(e) {
   return Mi.has(lt(e));
 }
-const Ii = [":popover-open", ":modal"];
+const Hi = [":popover-open", ":modal"];
 function St(e) {
-  return Ii.some((t) => {
+  return Hi.some((t) => {
     try {
       return e.matches(t);
     } catch {
@@ -1564,7 +1564,7 @@ function ee(e) {
 function nt(e) {
   const t = ee(e);
   if (!W(t))
-    return I(1);
+    return H(1);
   const o = t.getBoundingClientRect(), {
     width: i,
     height: s,
@@ -1576,7 +1576,7 @@ function nt(e) {
     y: a
   };
 }
-const Yi = /* @__PURE__ */ I(0);
+const Yi = /* @__PURE__ */ H(0);
 function Ce(e) {
   const t = D(e);
   return !te() || !t.visualViewport ? Yi : {
@@ -1590,9 +1590,9 @@ function Ki(e, t, o) {
 function ot(e, t, o, i) {
   t === void 0 && (t = !1), o === void 0 && (o = !1);
   const s = e.getBoundingClientRect(), r = ee(e);
-  let n = I(1);
+  let n = H(1);
   t && (i ? z(i) && (n = nt(i)) : n = nt(e));
-  const a = Ki(r, o, i) ? Ce(r) : I(0);
+  const a = Ki(r, o, i) ? Ce(r) : H(0);
   let l = (s.left + a.x) / n.x, c = (s.top + a.y) / n.y, h = s.width / n.x, d = s.height / n.y;
   if (r) {
     const u = D(r), p = i && z(i) ? D(i) : i;
@@ -1637,13 +1637,13 @@ function Xi(e) {
   let l = {
     scrollLeft: 0,
     scrollTop: 0
-  }, c = I(1);
-  const h = I(0), d = W(i);
+  }, c = H(1);
+  const h = H(0), d = W(i);
   if ((d || !d && !r) && ((lt(i) !== "body" || mt(n)) && (l = Tt(i)), W(i))) {
     const p = ot(i);
     c = nt(i), h.x = p.x + i.clientLeft, h.y = p.y + i.clientTop;
   }
-  const u = n && !d && !r ? Oe(n, l, !0) : I(0);
+  const u = n && !d && !r ? Oe(n, l, !0) : H(0);
   return {
     width: o.width * c.x,
     height: o.height * c.y,
@@ -1682,7 +1682,7 @@ function Qi(e, t) {
 }
 const Zi = /* @__PURE__ */ new Set(["absolute", "fixed"]);
 function to(e, t) {
-  const o = ot(e, !0, t === "fixed"), i = o.top + e.clientTop, s = o.left + e.clientLeft, r = W(e) ? nt(e) : I(1), n = e.clientWidth * r.x, a = e.clientHeight * r.y, l = s * r.x, c = i * r.y;
+  const o = ot(e, !0, t === "fixed"), i = o.top + e.clientTop, s = o.left + e.clientLeft, r = W(e) ? nt(e) : H(1), n = e.clientWidth * r.x, a = e.clientHeight * r.y, l = s * r.x, c = i * r.y;
   return {
     width: n,
     height: a,
@@ -1760,7 +1760,7 @@ function so(e, t, o) {
     scrollLeft: 0,
     scrollTop: 0
   };
-  const l = I(0);
+  const l = H(0);
   function c() {
     l.x = ie(s);
   }
@@ -1770,7 +1770,7 @@ function so(e, t, o) {
       l.x = p.x + t.clientLeft, l.y = p.y + t.clientTop;
     } else s && c();
   r && !i && s && c();
-  const h = s && !i && !r ? Oe(s, a) : I(0), d = n.left + a.scrollLeft - l.x - h.x, u = n.top + a.scrollTop - l.y - h.y;
+  const h = s && !i && !r ? Oe(s, a) : H(0), d = n.left + a.scrollLeft - l.x - h.x, u = n.top + a.scrollTop - l.y - h.y;
   return {
     x: d,
     y: u,
@@ -1803,7 +1803,7 @@ function Se(e, t) {
     return o;
   }
   let i = ge(e, t);
-  for (; i && Hi(i) && $t(i); )
+  for (; i && Ii(i) && $t(i); )
     i = ge(i, t);
   return i && rt(i) && $t(i) && !Rt(i) ? o : i || ji(e) || o;
 }
@@ -1883,7 +1883,7 @@ function ao(e, t) {
   }
   return n(!0), r;
 }
-function Ht(e, t, o, i) {
+function It(e, t, o, i) {
   i === void 0 && (i = {});
   const {
     ancestorScroll: s = !0,
@@ -1919,7 +1919,7 @@ function Ht(e, t, o, i) {
     }), d?.(), (v = p) == null || v.disconnect(), p = null, l && cancelAnimationFrame(f);
   };
 }
-const It = Ni, Te = _i, Wt = Li, qt = zi, lo = ki, De = Di, Le = (e, t, o) => {
+const Ht = Ni, Te = _i, Wt = Li, qt = zi, lo = ki, De = Di, Le = (e, t, o) => {
   const i = /* @__PURE__ */ new Map(), s = {
     platform: Mt,
     ...o
@@ -1965,7 +1965,7 @@ class po {
   async placeOverlay(t = this.target, o = this.options) {
     if (this.target = t, this.options = o, !t || !o)
       return;
-    const i = Ht(
+    const i = It(
       o.trigger,
       t,
       this.closeForAncestorUpdate,
@@ -1974,7 +1974,7 @@ class po {
         elementResize: !1,
         layoutShift: !1
       }
-    ), s = Ht(
+    ), s = It(
       o.trigger,
       t,
       this.updatePlacement,
@@ -2004,7 +2004,7 @@ class po {
     }), [s = 0, r = 0] = Array.isArray(t?.offset) ? t.offset : [t.offset, 0], n = this.host.elements.find(
       (u) => u.tipElement
     )?.tipElement, a = [
-      It({
+      Ht({
         crossAxis: r,
         mainAxis: s
       }),
@@ -2715,11 +2715,11 @@ let b = class extends Be {
     return this.sync || this.autoSize;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.stop();
+    super.disconnectedCallback(), this.stopImmediate();
   }
   connectedUpdatedCallback() {
     if (this.strategy === "overlay" && (this.start(), !ne)) {
-      const e = Ie(this);
+      const e = He(this);
       e && (this.autoSizeBoundary = e, this.flipBoundary = e, this.shiftBoundary = e);
     }
   }
@@ -2743,13 +2743,16 @@ let b = class extends Be {
     )), this.anchorEl && this.start();
   }
   start() {
-    !this.anchorEl || !this.isConnected || (this.cleanup = Ht(this.anchorEl, this.popup, () => {
+    !this.anchorEl || !this.isConnected || (this.cleanup = It(this.anchorEl, this.popup, () => {
       this.reposition();
     }));
   }
+  stopImmediate() {
+    this.cleanup && (this.cleanup(), this.cleanup = void 0, this.removeAttribute("data-current-placement"), this.style.removeProperty("--auto-size-available-width"), this.style.removeProperty("--auto-size-available-height"));
+  }
   async stop() {
     return new Promise((e) => {
-      this.cleanup ? (this.cleanup(), this.cleanup = void 0, this.removeAttribute("data-current-placement"), this.style.removeProperty("--auto-size-available-width"), this.style.removeProperty("--auto-size-available-height"), requestAnimationFrame(() => e())) : e();
+      this.cleanup ? (this.stopImmediate(), requestAnimationFrame(() => e())) : e();
     });
   }
   /** Forces the popup to recalculate and reposition itself. */
@@ -2758,9 +2761,9 @@ let b = class extends Be {
       return;
     const e = [
       // The offset middleware goes first
-      this.placement === "center" ? It(
+      this.placement === "center" ? Ht(
         ({ rects: t }) => -t.reference.height / 2 - t.floating.height / 2
-      ) : It({ crossAxis: this.skidding, mainAxis: this.distance })
+      ) : Ht({ crossAxis: this.skidding, mainAxis: this.distance })
     ];
     this.sync ? e.push(
       qt({

package/library/components/select.js

@@ -3,42 +3,43 @@ import { C } from "../chunks/typography.IqHbnd3C.js";
 import { n as a, C as S } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as k } from "../chunks/component.styles.CRO4Odto.js";
 import { f as D } from "../chunks/form-control.styles.CaGWmeAS.js";
+import { g as I } from "../chunks/active-elements.jTVWtBDp.js";
 import { s as x, a as y, w as v } from "../chunks/event.BeKOsirN.js";
 import { c as z } from "../chunks/custom-element.L4WJXn1j.js";
-import { d as I } from "../chunks/default-value.COZopaet.js";
-import { F as $ } from "../chunks/form.CP9KLGjF.js";
-import { L } from "../chunks/i18n.Bchq8v1d.js";
-import { s as F } from "../chunks/scroll.xtO5yojm.js";
-import { H as V } from "../chunks/slot.j5oheLJC.js";
+import { d as $ } from "../chunks/default-value.COZopaet.js";
+import { F as L } from "../chunks/form.CP9KLGjF.js";
+import { L as F } from "../chunks/i18n.Bchq8v1d.js";
+import { s as V } from "../chunks/scroll.xtO5yojm.js";
+import { H as E } from "../chunks/slot.j5oheLJC.js";
 import { i as T } from "../chunks/user-agent.D9aPuOyL.js";
 import { w as p } from "../chunks/watch.DOt4Mabe.js";
-import { i as E, x as u, E as B } from "../chunks/lit-element.jLBm65_O.js";
+import { i as B, x as u, E as A } from "../chunks/lit-element.jLBm65_O.js";
 import { r as g } from "../chunks/state.CSDxrqLd.js";
 import { e as m } from "../chunks/query.BBf1UFkC.js";
 import { e as b } from "../chunks/class-map.BiVq-cVR.js";
-import { o as A } from "../chunks/unsafe-html.Dff7-rCx.js";
+import { o as P } from "../chunks/unsafe-html.Dff7-rCx.js";
 import { n as f } from "../chunks/when.Dr1es41R.js";
 import { s as O, g as _ } from "../chunks/animation-registry.HmpwNuGH.js";
-import { C as P } from "../chunks/icon.mxNZ85k0.js";
+import { C as U } from "../chunks/icon.mxNZ85k0.js";
 import { C as d } from "../chunks/option.qN3aaqVI.js";
-import U from "./popup.js";
-import M from "./spinner.js";
-import N from "./tag.js";
-const R = (t) => !(document.createElement(t.tagName).constructor === HTMLElement || customElements.get(t.tagName.toLowerCase())), W = E`:host{display:block}:host([data-user-invalid])::part(combobox){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid]:focus-within)::part(combobox){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.select{vertical-align:middle;flex:auto;width:100%;display:inline-flex;position:relative}.select::part(popup){z-index:var(--cx-z-index-dropdown)}.select[data-current-placement^=top]::part(popup){transform-origin:bottom}.select[data-current-placement^=bottom]::part(popup){transform-origin:top}.select__combobox{font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);letter-spacing:var(--cx-input-letter-spacing);vertical-align:middle;cursor:pointer;transition:var(--cx-transition-fast) color, var(--cx-transition-fast) border, var(--cx-transition-fast) box-shadow, var(--cx-transition-fast) background-color;flex:1;justify-content:start;align-items:center;width:20ch;min-width:0;display:flex;position:relative;overflow:hidden}.select__display-input{width:100%;font:inherit;color:var(--cx-input-color);cursor:inherit;-webkit-appearance:none;text-overflow:ellipsis;background:0 0;border:none;margin:0;padding:0;transition:padding-top .2s ease-in-out;position:relative;overflow:hidden}:host([allow-freetext]) .input-container,:host([allow-freetext]) .select__display-input{cursor:text}:host([allow-freetext]) .select--disabled .input-container,:host([allow-freetext]) .select--disabled .select__display-input{cursor:default}.select__tags+.select__display-input{padding-top:var(--cx-spacing-2x-small)}.select__display-input--small{line-height:var(--cx-line-height-small)}.select__display-input--medium{line-height:var(--cx-line-height-medium)}.select__display-input--large{line-height:var(--cx-line-height-large)}.select__display-input--hidden{visibility:hidden;height:0;padding-top:0!important}.form-control--has-label .select__display-input{padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-2x-small)}.select__display-input::placeholder{color:var(--cx-input-placeholder-color)}.select:not(.select--disabled):hover .select__display-input{color:var(--cx-input-color-hover)}.select:not(.select--disabled):hover .select__combobox{border-color:var(--cx-input-border-color-hover)}.select__display-input:focus{outline:none}.select__value-input{opacity:0;z-index:-1;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0}.select__tags{flex-wrap:wrap;align-items:center;max-width:100%;display:flex}.form-control--has-label .select__tags{margin-top:var(--cx-spacing-x-small)}.select--small:not(.select--placeholder-visible) .select__tags,.select--medium:not(.select--placeholder-visible) .select__tags,.select--large:not(.select--placeholder-visible) .select__tags{min-height:var(--cx-line-height-medium)}.select__tags::slotted(cx-tag){cursor:pointer!important}.select--disabled .select__tags,.select--disabled .select__tags::slotted(cx-tag){cursor:default!important}.select__tag-wrapper{line-height:1}.select--standard .select__combobox{background-color:var(--cx-input-background-color);border:solid var(--cx-input-border-width) var(--cx-input-border-color)}.select--standard.select--disabled .select__combobox{background-color:var(--cx-input-background-color-disabled);border-color:var(--cx-input-border-color-disabled);color:var(--cx-input-color-disabled);opacity:.5;cursor:default;outline:none}.select--standard:not(.select--disabled).select--open .select__combobox,.select--standard:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-background-color-focus);border-color:var(--cx-input-border-color-focus)}.select--filled .select__combobox{background-color:var(--cx-input-filled-background-color);color:var(--cx-input-color);border:none}.select--filled:hover:not(.select--disabled) .select__combobox{background-color:var(--cx-input-filled-background-color-hover)}.select--filled.select--disabled .select__combobox{background-color:var(--cx-input-filled-background-color-disabled);opacity:.5;cursor:default}.select--filled:not(.select--disabled).select--open .select__combobox,.select--filled:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-filled-background-color-focus);outline:var(--cx-focus-ring)}.select--small .select__combobox{border-radius:var(--cx-input-border-radius-small);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-small);padding-block:0;padding-inline:var(--cx-input-spacing-small)}.form-control:not(.form-control--has-label) .select--small.select--multiple .select__combobox{padding-block:2px}.form-control:not(.form-control--has-label) .select--multiple .select__display-input{margin-top:0}.form-control:not(.form-control--has-label) .input-container{justify-content:center}.form-control:not(.form-control--has-label) .input-container .select__display-input{margin-top:0}.select--small .select__clear{margin-inline-start:var(--cx-input-spacing-small)}.select--small .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-small)}.select--small .select__tags{gap:2px}.select--medium .select__combobox{border-radius:var(--cx-input-border-radius-medium);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-medium);padding-block:0;padding-inline:var(--cx-input-spacing-medium)}.form-control:not(.form-control--has-label) .select--medium.select--multiple .select__combobox{padding-block:3px}.select--medium .select__clear{margin-inline-start:var(--cx-input-spacing-medium)}.select--medium .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-medium)}.select--medium .select__tags{gap:3px}.select--large .select__combobox{border-radius:var(--cx-input-border-radius-large);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-large);padding-block:0;padding-inline:var(--cx-input-spacing-large)}.form-control:not(.form-control--has-label) .select--large.select--multiple .select__combobox{padding-block:4px}.select--large .select__clear{margin-inline-start:var(--cx-input-spacing-large)}.select--large .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-large)}.select--large .select__tags{gap:4px}.select--pill.select--small .select__combobox{border-radius:var(--cx-input-height-small)}.select--pill.select--medium .select__combobox{border-radius:var(--cx-input-height-medium)}.select--pill.select--large .select__combobox{border-radius:var(--cx-input-height-large)}.select__prefix,.select__suffix{color:var(--cx-input-placeholder-color);flex:0;align-items:center;display:inline-flex}.select__clear{font-size:inherit;color:var(--cx-input-icon-color);transition:var(--cx-transition-fast) color;cursor:pointer;z-index:1;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.select__clear:hover{color:var(--cx-input-icon-color-hover)}.select__clear:focus{outline:none}.select__expand-icon{transition:var(--cx-transition-medium) rotate ease;rotate:0;font-size:var(--cx-font-size-large);flex:none;align-items:center;margin-inline-start:var(--cx-spacing-small);display:flex}.select--open .select__expand-icon{rotate:var(--cx-select-expand-icon-rotate-open,-180deg)}.select__listbox{font-family:var(--cx-font-sans);font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);box-shadow:var(--cx-shadow-large);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-block:var(--cx-spacing-x-small);overscroll-behavior:none;max-width:var(--auto-size-available-width);max-height:var(--auto-size-available-height);padding-inline:0;display:block;position:relative;overflow:auto}.select__listbox ::slotted(cx-divider){--spacing:var(--cx-spacing-x-small);width:calc(100% - (var(--cx-spacing-x-small) * 2));margin-inline:auto}.select__listbox ::slotted(small){font-size:var(--cx-font-size-x-small);font-weight:var(--cx-font-weight-medium);line-height:var(--cx-line-height-x-small);color:var(--cx-color-neutral-600);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);display:block}.select__no-options{font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);text-align:left;cursor:default;user-select:none;display:block}.input-container{flex-direction:column;flex:1;align-self:stretch;width:0;display:inline-flex;position:relative}.input-container__display-value{column-gap:var(--cx-spacing-small);row-gap:var(--cx-spacing-3x-small);flex-flow:wrap;width:100%;height:100%;display:flex}.form-control__label{pointer-events:none;width:fit-content;line-height:1;-webkit-transition:transform .2s ease-in-out;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;position:relative}.select--small .form-control__label{transform:translateY(calc(( var(--cx-input-height-small) + 1.25rem - var(--cx-input-font-size-small) ) / 2));margin:0}.select--medium .form-control__label{transform:translateY(calc(( var(--cx-input-height-medium) / 2 + 1rem - var(--cx-input-font-size-medium) )));margin:0}.select--large .form-control__label{transform:translateY(calc(( var(--cx-input-height-large) + 1rem - var(--cx-input-font-size-large) ) / 2));margin:0}.form-control--has-label .select--small{min-height:calc(var(--cx-input-height-small) + 1rem)}.form-control--has-label .select--medium{min-height:calc(var(--cx-input-height-medium) + 1rem)}.form-control--has-label .select--large{min-height:calc(var(--cx-input-height-large) + 1rem)}.form-control--has-label .select--focused .form-control__label,.form-control--has-label .select--placeholder-visible .form-control__label,.form-control--has-label .select:not(.select--empty) .form-control__label{transform:translateY(calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small)))}.select__listbox slot{flex-direction:column;display:flex}:host([data-cx-input-group__input--first]:not([data-cx-input-group__input--last])) .select__combobox{border-start-end-radius:0;border-end-end-radius:0}:host([data-cx-input-group__input--inner]) .select__combobox{border-radius:0}:host([data-cx-input-group__input--last]:not([data-cx-input-group__input--first])) .select__combobox{border-start-start-radius:0;border-end-start-radius:0}:host([data-cx-input-group__input]:not([data-cx-input-group__input--first])){margin-inline-start:calc(-1 * var(--cx-input-border-width))}:host([data-cx-input-group__input--hover]){z-index:1}:host([data-cx-input-group__input--focus]),:host([data-cx-input-group__input][checked]){z-index:2}`;
-var H = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (t, e, o, n) => {
-  for (var l = n > 1 ? void 0 : n ? q(e, o) : e, r = t.length - 1, c; r >= 0; r--)
+import M from "./popup.js";
+import N from "./spinner.js";
+import R from "./tag.js";
+const W = (t) => !(document.createElement(t.tagName).constructor === HTMLElement || customElements.get(t.tagName.toLowerCase())), H = B`:host{display:block}:host([data-user-invalid])::part(combobox){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid]:focus-within)::part(combobox){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.select{vertical-align:middle;flex:auto;width:100%;display:inline-flex;position:relative}.select::part(popup){z-index:var(--cx-z-index-dropdown)}.select[data-current-placement^=top]::part(popup){transform-origin:bottom}.select[data-current-placement^=bottom]::part(popup){transform-origin:top}.select__combobox{font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);letter-spacing:var(--cx-input-letter-spacing);vertical-align:middle;cursor:pointer;transition:var(--cx-transition-fast) color, var(--cx-transition-fast) border, var(--cx-transition-fast) box-shadow, var(--cx-transition-fast) background-color;flex:1;justify-content:start;align-items:center;width:20ch;min-width:0;display:flex;position:relative;overflow:hidden}.select__display-input{width:100%;font:inherit;color:var(--cx-input-color);cursor:inherit;-webkit-appearance:none;text-overflow:ellipsis;background:0 0;border:none;margin:0;padding:0;transition:padding-top .2s ease-in-out;position:relative;overflow:hidden}:host([allow-freetext]) .input-container,:host([allow-freetext]) .select__display-input{cursor:text}:host([allow-freetext]) .select--disabled .input-container,:host([allow-freetext]) .select--disabled .select__display-input{cursor:default}.select__tags+.select__display-input{padding-top:var(--cx-spacing-2x-small)}.select__display-input--small{line-height:var(--cx-line-height-small)}.select__display-input--medium{line-height:var(--cx-line-height-medium)}.select__display-input--large{line-height:var(--cx-line-height-large)}.select__display-input--hidden{visibility:hidden;height:0;padding-top:0!important}.form-control--has-label .select__display-input{padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-2x-small)}.select__display-input::placeholder{color:var(--cx-input-placeholder-color)}.select:not(.select--disabled):hover .select__display-input{color:var(--cx-input-color-hover)}.select:not(.select--disabled):hover .select__combobox{border-color:var(--cx-input-border-color-hover)}.select__display-input:focus{outline:none}.select__value-input{opacity:0;z-index:-1;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0}.select__tags{flex-wrap:wrap;align-items:center;max-width:100%;display:flex}.form-control--has-label .select__tags{margin-top:var(--cx-spacing-x-small)}.select--small:not(.select--placeholder-visible) .select__tags,.select--medium:not(.select--placeholder-visible) .select__tags,.select--large:not(.select--placeholder-visible) .select__tags{min-height:var(--cx-line-height-medium)}.select__tags::slotted(cx-tag){cursor:pointer!important}.select--disabled .select__tags,.select--disabled .select__tags::slotted(cx-tag){cursor:default!important}.select__tag-wrapper{line-height:1}.select--standard .select__combobox{background-color:var(--cx-input-background-color);border:solid var(--cx-input-border-width) var(--cx-input-border-color)}.select--standard.select--disabled .select__combobox{background-color:var(--cx-input-background-color-disabled);border-color:var(--cx-input-border-color-disabled);color:var(--cx-input-color-disabled);opacity:.5;cursor:default;outline:none}.select--standard:not(.select--disabled).select--open .select__combobox,.select--standard:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-background-color-focus);border-color:var(--cx-input-border-color-focus)}.select--filled .select__combobox{background-color:var(--cx-input-filled-background-color);color:var(--cx-input-color);border:none}.select--filled:hover:not(.select--disabled) .select__combobox{background-color:var(--cx-input-filled-background-color-hover)}.select--filled.select--disabled .select__combobox{background-color:var(--cx-input-filled-background-color-disabled);opacity:.5;cursor:default}.select--filled:not(.select--disabled).select--open .select__combobox,.select--filled:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-filled-background-color-focus);outline:var(--cx-focus-ring)}.select--small .select__combobox{border-radius:var(--cx-input-border-radius-small);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-small);padding-block:0;padding-inline:var(--cx-input-spacing-small)}.form-control:not(.form-control--has-label) .select--small.select--multiple .select__combobox{padding-block:2px}.form-control:not(.form-control--has-label) .select--multiple .select__display-input{margin-top:0}.form-control:not(.form-control--has-label) .input-container{justify-content:center}.form-control:not(.form-control--has-label) .input-container .select__display-input{margin-top:0}.select--small .select__clear{margin-inline-start:var(--cx-input-spacing-small)}.select--small .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-small)}.select--small .select__tags{gap:2px}.select--medium .select__combobox{border-radius:var(--cx-input-border-radius-medium);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-medium);padding-block:0;padding-inline:var(--cx-input-spacing-medium)}.form-control:not(.form-control--has-label) .select--medium.select--multiple .select__combobox{padding-block:3px}.select--medium .select__clear{margin-inline-start:var(--cx-input-spacing-medium)}.select--medium .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-medium)}.select--medium .select__tags{gap:3px}.select--large .select__combobox{border-radius:var(--cx-input-border-radius-large);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-large);padding-block:0;padding-inline:var(--cx-input-spacing-large)}.form-control:not(.form-control--has-label) .select--large.select--multiple .select__combobox{padding-block:4px}.select--large .select__clear{margin-inline-start:var(--cx-input-spacing-large)}.select--large .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-large)}.select--large .select__tags{gap:4px}.select--pill.select--small .select__combobox{border-radius:var(--cx-input-height-small)}.select--pill.select--medium .select__combobox{border-radius:var(--cx-input-height-medium)}.select--pill.select--large .select__combobox{border-radius:var(--cx-input-height-large)}.select__prefix,.select__suffix{color:var(--cx-input-placeholder-color);flex:0;align-items:center;display:inline-flex}.select__clear{font-size:inherit;color:var(--cx-input-icon-color);transition:var(--cx-transition-fast) color;cursor:pointer;z-index:1;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.select__clear:hover{color:var(--cx-input-icon-color-hover)}.select__clear:focus{outline:none}.select__expand-icon{transition:var(--cx-transition-medium) rotate ease;rotate:0;font-size:var(--cx-font-size-large);flex:none;align-items:center;margin-inline-start:var(--cx-spacing-small);display:flex}.select--open .select__expand-icon{rotate:var(--cx-select-expand-icon-rotate-open,-180deg)}.select__listbox{font-family:var(--cx-font-sans);font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);box-shadow:var(--cx-shadow-large);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-block:var(--cx-spacing-x-small);overscroll-behavior:none;max-width:var(--auto-size-available-width);max-height:var(--auto-size-available-height);padding-inline:0;display:block;position:relative;overflow:auto}.select__listbox ::slotted(cx-divider){--spacing:var(--cx-spacing-x-small);width:calc(100% - (var(--cx-spacing-x-small) * 2));margin-inline:auto}.select__listbox ::slotted(small){font-size:var(--cx-font-size-x-small);font-weight:var(--cx-font-weight-medium);line-height:var(--cx-line-height-x-small);color:var(--cx-color-neutral-600);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);display:block}.select__no-options{font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);text-align:left;cursor:default;user-select:none;display:block}.input-container{flex-direction:column;flex:1;align-self:stretch;width:0;display:inline-flex;position:relative}.input-container__display-value{column-gap:var(--cx-spacing-small);row-gap:var(--cx-spacing-3x-small);flex-flow:wrap;width:100%;height:100%;display:flex}.form-control__label{pointer-events:none;width:fit-content;line-height:1;-webkit-transition:transform .2s ease-in-out;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;position:relative}.select--small .form-control__label{transform:translateY(calc(( var(--cx-input-height-small) + 1.25rem - var(--cx-input-font-size-small) ) / 2));margin:0}.select--medium .form-control__label{transform:translateY(calc(( var(--cx-input-height-medium) / 2 + 1rem - var(--cx-input-font-size-medium) )));margin:0}.select--large .form-control__label{transform:translateY(calc(( var(--cx-input-height-large) + 1rem - var(--cx-input-font-size-large) ) / 2));margin:0}.form-control--has-label .select--small{min-height:calc(var(--cx-input-height-small) + 1rem)}.form-control--has-label .select--medium{min-height:calc(var(--cx-input-height-medium) + 1rem)}.form-control--has-label .select--large{min-height:calc(var(--cx-input-height-large) + 1rem)}.form-control--has-label .select--focused .form-control__label,.form-control--has-label .select--placeholder-visible .form-control__label,.form-control--has-label .select:not(.select--empty) .form-control__label{transform:translateY(calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small)))}.select__listbox slot{flex-direction:column;display:flex}:host([data-cx-input-group__input--first]:not([data-cx-input-group__input--last])) .select__combobox{border-start-end-radius:0;border-end-end-radius:0}:host([data-cx-input-group__input--inner]) .select__combobox{border-radius:0}:host([data-cx-input-group__input--last]:not([data-cx-input-group__input--first])) .select__combobox{border-start-start-radius:0;border-end-start-radius:0}:host([data-cx-input-group__input]:not([data-cx-input-group__input--first])){margin-inline-start:calc(-1 * var(--cx-input-border-width))}:host([data-cx-input-group__input--hover]){z-index:1}:host([data-cx-input-group__input--focus]),:host([data-cx-input-group__input][checked]){z-index:2}`;
+var q = Object.defineProperty, j = Object.getOwnPropertyDescriptor, s = (t, e, o, n) => {
+  for (var l = n > 1 ? void 0 : n ? j(e, o) : e, r = t.length - 1, c; r >= 0; r--)
     (c = t[r]) && (l = (n ? c(e, o, l) : c(l)) || l);
-  return n && l && H(e, o, l), l;
+  return n && l && q(e, o, l), l;
 };
 let i = class extends S {
   constructor() {
-    super(...arguments), this.formControlController = new $(this, {
+    super(...arguments), this.formControlController = new L(this, {
       assumeInteractionOn: ["cx-input"]
-    }), this.hasSlotController = new V(
+    }), this.hasSlotController = new E(
       this,
       "help-text",
       "label"
-    ), this.localize = new L(this), this.typeToSelectString = "", this.hasFocus = !1, this.displayLabel = "", this.selectedOptions = [], this.name = "", this.value = "", this.fallbackOptionValue = "", this.defaultValue = "", this.size = "medium", this.placeholder = "", this.allowFreetext = !1, this.multiple = !1, this.maxOptionsVisible = 3, this.disabled = !1, this.clearable = !1, this.open = !1, this.hoist = !1, this.noFlip = !1, this.freeWidth = !1, this.autosizePadding = 10, this.filled = !1, this.pill = !1, this.label = "", this.placement = "bottom", this.helpText = "", this.form = void 0, this.required = !1, this.useTag = !1, this.noSelectOnEnter = !1, this.noResetCurrent = !1, this.noDropdown = !1, this.loading = !1, this.getTag = (t) => {
+    ), this.localize = new F(this), this.typeToSelectString = "", this.hasFocus = !1, this.displayLabel = "", this.selectedOptions = [], this.name = "", this.value = "", this.fallbackOptionValue = "", this.defaultValue = "", this.size = "medium", this.placeholder = "", this.allowFreetext = !1, this.multiple = !1, this.maxOptionsVisible = 3, this.disabled = !1, this.clearable = !1, this.open = !1, this.hoist = !1, this.noFlip = !1, this.freeWidth = !1, this.autosizePadding = 10, this.filled = !1, this.pill = !1, this.label = "", this.placement = "bottom", this.helpText = "", this.form = void 0, this.required = !1, this.useTag = !1, this.noSelectOnEnter = !1, this.noResetCurrent = !1, this.noDropdown = !1, this.loading = !1, this.getTag = (t) => {
       const e = this.hasSlotController.test("label"), n = (this.label ? !0 : !!e) ? this.size === "large" ? "medium" : "small" : this.size, l = (r) => {
         this.handleTagRemove(r, t);
       };
@@ -55,8 +56,10 @@ let i = class extends S {
       if (!(!t || !(t instanceof d)))
         return t.disabled;
     }, this.stayOpenOnSelect = !1, this.closeOnSelect = !1, this.forceOnChange = !1, this.allowDefaultMouseDown = !1, this.noOptionText = "", this.handleDocumentFocusIn = (t) => {
-      const e = t.composedPath();
-      this && !e.includes(this) && !this.stayOpenOnSelect && this.hide();
+      !t.composedPath().includes(this) && !this.stayOpenOnSelect && requestAnimationFrame(() => {
+        const o = I();
+        !(this.contains(o ?? null) || this.shadowRoot?.contains(o ?? null)) && this.open && this.hide();
+      });
     }, this.handleDocumentKeyDown = (t) => {
       const e = t.target, o = e.closest(".select__clear") !== null, n = e.closest("cx-icon-button") !== null;
       if (!(o || n)) {
@@ -294,7 +297,7 @@ let i = class extends S {
         return;
       o.push(c);
       const h = r.tagName.toLowerCase();
-      if (!R(r) && !customElements.get(h)) {
+      if (!W(r) && !customElements.get(h)) {
         customElements.whenDefined(h).then(() => this.handleDefaultSlotChange());
         return;
       }
@@ -304,7 +307,7 @@ let i = class extends S {
       e,
       t
     );
-    this.setSelectedOptions(n, l ? this.value : void 0);
+    this.setSelectedOptions(n, l ? this.value : void 0), this.hasFocus && !this.open && !this.disabled && t.length > 0 && this.show();
   }
   handleTagRemove(t, e) {
     t.stopPropagation(), this.disabled || (this.toggleOptionSelection(e, !1), this.updateComplete.then(() => {
@@ -390,11 +393,11 @@ let i = class extends S {
     return this.selectedOptions.map((n, l) => {
       if (l < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
         const r = this.getTag(n, l);
-        return u`${typeof r == "string" ? A(r) : r}`;
+        return u`${typeof r == "string" ? P(r) : r}`;
       } else if (l === this.maxOptionsVisible)
         return u`<cx-tag ?pill=${this.pill} size=${o}>
           +${this.selectedOptions.length - l}</cx-tag>`;
-      return B;
+      return A;
     });
   }
   handleInvalid(t) {
@@ -423,7 +426,7 @@ let i = class extends S {
       const { keyframes: t, options: e } = _(this, "select.show", {
         dir: this.localize.dir()
       });
-      await y(this.popup.popup, t, e), this.currentOption && F(this.currentOption, this.listbox, "vertical", "auto"), this.emit("cx-after-show");
+      await y(this.popup.popup, t, e), this.currentOption && V(this.currentOption, this.listbox, "vertical", "auto"), this.emit("cx-after-show");
     } else {
       this.emit("cx-hide"), this.removeOpenListeners(), await x(this);
       const { keyframes: t, options: e } = _(this, "select.hide", {
@@ -521,14 +524,14 @@ let i = class extends S {
 i.styles = [
   k,
   D,
-  W
+  H
 ];
 i.dependencies = {
-  "cx-icon": P,
+  "cx-icon": U,
   "cx-line-clamp": w,
-  "cx-popup": U,
-  "cx-spinner": M,
-  "cx-tag": N,
+  "cx-popup": M,
+  "cx-spinner": N,
+  "cx-tag": R,
   "cx-typography": C
 };
 s([
@@ -573,7 +576,7 @@ s([
   a({ attribute: "fallback-option-value", type: String })
 ], i.prototype, "fallbackOptionValue", 2);
 s([
-  I()
+  $()
 ], i.prototype, "defaultValue", 2);
 s([
   a({ reflect: !0 })

package/library/components/sidebar.js

@@ -59,10 +59,10 @@ let i = class extends m {
     );
   }
   handleCloseTriggerClick() {
-    this.collapsible && (this.open = !1, this.handleSizeChange());
+    this.collapsible && (this.open = !1);
   }
   handleOpenTriggerClick() {
-    this.collapsible && (this.open = !0, this.handleSizeChange());
+    this.collapsible && (this.open = !0);
   }
   render() {
     const e = this.hasSlotController.test("header");