@warp-ds/elements 1.0.0-alpha.18 → 1.0.0-alpha.19

package/dist/index.js

@@ -4,7 +4,7 @@ var w = (r, o, e) => (ft(r, typeof o != "symbol" ? o + "" : o, e), e), wt = (r,
   if (!o.has(r))
     throw TypeError("Cannot " + e);
 };
-var D = (r, o, e) => (wt(r, o, "read from private field"), e ? e.call(r) : o.get(r)), Fo = (r, o, e) => {
+var H = (r, o, e) => (wt(r, o, "read from private field"), e ? e.call(r) : o.get(r)), Fo = (r, o, e) => {
   if (o.has(r))
     throw TypeError("Cannot add the same private member more than once");
   o instanceof WeakSet ? o.add(r) : o.set(r, e);
@@ -374,7 +374,7 @@ This is probably caused by illegal octal escape sequences.`), {
   _$litType$: r,
   strings: o,
   values: e
-}), h = Be(Ne), K = Be(Do), Z = Symbol.for("lit-noChange"), k = Symbol.for("lit-nothing"), pe = /* @__PURE__ */ new WeakMap(), lo = go.createTreeWalker(go, 129, null, !1);
+}), h = Be(Ne), K = Be(Do), I = Symbol.for("lit-noChange"), k = Symbol.for("lit-nothing"), pe = /* @__PURE__ */ new WeakMap(), lo = go.createTreeWalker(go, 129, null, !1);
 let ro = er;
 const Ue = (r, o) => {
   const e = r.length - 1, t = [];
@@ -497,7 +497,7 @@ class zo {
 }
 function eo(r, o, e = r, t) {
   var a, c, i, l;
-  if (o === Z)
+  if (o === I)
     return o;
   let n = t !== void 0 ? (a = e.__directives) === null || a === void 0 ? void 0 : a[t] : e.__directive;
   const d = yo(o) ? void 0 : o._$litDirective$;
@@ -571,7 +571,7 @@ class ho {
         end: this._$endNode,
         parent: this._$parent,
         options: this.options
-      }), this._$clear()), this._$committedValue = k) : o !== this._$committedValue && o !== Z && this._commitText(o);
+      }), this._$clear()), this._$committedValue = k) : o !== this._$committedValue && o !== I && this._commitText(o);
     else if (o._$litType$ !== void 0)
       this._commitTemplateResult(o);
     else if (o.nodeType !== void 0) {
@@ -699,13 +699,13 @@ class Ro {
     const c = this.strings;
     let i = !1;
     if (c === void 0)
-      o = eo(this, o, e, 0), i = !yo(o) || o !== this._$committedValue && o !== Z, i && (this._$committedValue = o);
+      o = eo(this, o, e, 0), i = !yo(o) || o !== this._$committedValue && o !== I, i && (this._$committedValue = o);
     else {
       const l = o;
       o = c[0];
       let n, d;
       for (n = 0; n < c.length - 1; n++)
-        d = eo(this, l[t + n], e, n), d === Z && (d = this._$committedValue[n]), i || (i = !yo(d) || d !== this._$committedValue[n]), d === k ? o = k : o !== k && (o += (d != null ? d : "") + c[n + 1]), this._$committedValue[n] = d;
+        d = eo(this, l[t + n], e, n), d === I && (d = this._$committedValue[n]), i || (i = !yo(d) || d !== this._$committedValue[n]), d === k ? o = k : o !== k && (o += (d != null ? d : "") + c[n + 1]), this._$committedValue[n] = d;
     }
     i && !a && this._commitValue(o);
   }
@@ -755,7 +755,7 @@ class De extends Ro {
   }
   _$setValue(o, e = this) {
     var t;
-    if (o = (t = eo(this, o, e, 0)) !== null && t !== void 0 ? t : k, o === Z)
+    if (o = (t = eo(this, o, e, 0)) !== null && t !== void 0 ? t : k, o === I)
       return;
     const a = this._$committedValue, c = o === k && a !== k || o.capture !== a.capture || o.once !== a.once || o.passive !== a.passive, i = o !== k && (a === k || c);
     p == null || p({
@@ -871,7 +871,7 @@ class $ extends L {
     super.disconnectedCallback(), (o = this.__childPart) === null || o === void 0 || o.setConnected(!1);
   }
   render() {
-    return Z;
+    return I;
   }
 }
 $.finalized = !0;
@@ -892,7 +892,7 @@ $.finalize = function() {
 };
 (($r = globalThis.litElementVersions) !== null && $r !== void 0 ? $r : globalThis.litElementVersions = []).push("3.3.1");
 globalThis.litElementVersions.length > 1 && Qr("multiple-versions", "Multiple versions of Lit loaded. Loading multiple versions is not recommended.");
-const H = {
+const N = {
   base: "border-2 relative",
   tooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8",
   callout: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8",
@@ -905,7 +905,7 @@ const H = {
   arrowTooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background",
   arrowCallout: "i-bg-$color-callout-background i-border-$color-callout-border",
   arrowPopover: "i-bg-$color-popover-background i-border-$color-popover-background"
-}, U = {
+}, Z = {
   box: "group block relative break-words last:mb-0 p-16 rounded-8",
   bleed: "-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",
   info: "i-bg-$color-box-info-background",
@@ -941,17 +941,17 @@ const H = {
   toastIconLoading: "animate-bounce",
   toastContent: "self-center mr-8 py-4 last:mb-0",
   toastClose: "ml-auto p-[8px]"
-}, Nt = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block", N = {
+}, Nt = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block", B = {
   expandable: "will-change-height",
   expandableTitle: "font-bold i-text-$color-expandable-title-text",
-  expandableBox: "i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 " + U.box,
-  expandableBleed: U.bleed,
+  expandableBox: "i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 " + Z.box,
+  expandableBleed: Z.bleed,
   chevron: "inline-block align-middle transform transition-transform transition-gpu i-text-$color-expandable-icon",
   chevronNonBox: "relative left-8",
   chevronBox: "absolute right-16",
   chevronExpanded: "-rotate-180",
   button: Nt + " hover:underline focus:underline",
-  buttonBox: "w-full text-left relative inline-flex! items-center " + U.box
+  buttonBox: "w-full text-left relative inline-flex! items-center " + Z.box
 }, R = {
   buttonSecondary: "py-10 px-14 border-2 font-bold rounded-8 leading-24 max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",
   buttonPrimary: "py-12 px-16 border-0 font-bold rounded-8 leading-24 max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover! active:i-bg-$color-button-primary-background-active",
@@ -2262,7 +2262,7 @@ class Jt extends ee {
       const l = !!e[i];
       l !== this._previousClasses.has(i) && !(!((a = this._staticClasses) === null || a === void 0) && a.has(i)) && (l ? (c.add(i), this._previousClasses.add(i)) : (c.remove(i), this._previousClasses.delete(i)));
     }
-    return Z;
+    return I;
   }
 }
 const Ke = re(Jt), Qt = (r) => r.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
@@ -4553,7 +4553,7 @@ class te extends ee {
   render(o) {
     if (o === k || o == null)
       return this._templateResult = void 0, this._value = o;
-    if (o === Z)
+    if (o === I)
       return o;
     if (typeof o != "string")
       throw new Error(`${this.constructor.directiveName}() called with a non-string value`);
@@ -4581,10 +4581,10 @@ class Tr extends Eo($) {
     this._options = this.innerHTML;
   }
   render() {
-    return h`<div class="${D(this, rr, Je)}">
+    return h`<div class="${H(this, rr, Je)}">
       ${Bo(
       this.label,
-      () => h`<label for="${D(this, no, Uo)}">
+      () => h`<label for="${H(this, no, Uo)}">
             ${this.label}
             ${Bo(
         this.optional,
@@ -4594,18 +4594,18 @@ class Tr extends Eo($) {
     )}
       <div class="input--select__wrap">
         <select
-          id="${D(this, no, Uo)}"
+          id="${H(this, no, Uo)}"
           ?autofocus=${this.autoFocus}
-          aria-describedby="${z(D(this, bo, Zo))}"
+          aria-describedby="${z(H(this, bo, Zo))}"
           aria-invalid="${z(this.invalid)}"
-          aria-errormessage="${z(this.invalid && D(this, bo, Zo))}"
+          aria-errormessage="${z(this.invalid && H(this, bo, Zo))}"
         >
           ${Ge(this._options)}
         </select>
       </div>
       ${Bo(
       this.always || this.invalid,
-      () => h`<div id="${D(this, bo, Zo)}" class="input__sub-text">${this.hint}</div>`
+      () => h`<div id="${H(this, bo, Zo)}" class="input__sub-text">${this.hint}</div>`
     )}
     </div>`;
   }
@@ -4617,7 +4617,7 @@ rr = new WeakSet(), Je = function() {
 }, no = new WeakSet(), Uo = function() {
   return "select_id";
 }, bo = new WeakSet(), Zo = function() {
-  return this.hint ? `${D(this, no, Uo)}__hint` : void 0;
+  return this.hint ? `${H(this, no, Uo)}__hint` : void 0;
 }, w(Tr, "properties", {
   autoFocus: { type: Boolean, reflect: !0 },
   invalid: { type: Boolean, reflect: !0 },
@@ -5676,11 +5676,11 @@ customElements.get("w-select") || customElements.define("w-select", Tr);
 class Mr extends $ {
   get _class() {
     return j({
-      [U.box]: !0,
-      [U.bleed]: this.bleed,
-      [U.info]: this.info,
-      [U.neutral]: this.neutral,
-      [U.bordered]: this.bordered
+      [Z.box]: !0,
+      [Z.bleed]: this.bleed,
+      [Z.info]: this.info,
+      [Z.neutral]: this.neutral,
+      [Z.bordered]: this.bordered
     });
   }
   render() {
@@ -9092,14 +9092,14 @@ customElements.get("w-toast") || customElements.define("w-toast", Or);
  * SPDX-License-Identifier: BSD-3-Clause
  */
 var _r, Sr;
-const { _ChildPart: ha } = Xt, B = ((_r = window.ShadyDOM) === null || _r === void 0 ? void 0 : _r.inUse) && ((Sr = window.ShadyDOM) === null || Sr === void 0 ? void 0 : Sr.noPatch) === !0 ? window.ShadyDOM.wrap : (r) => r, ye = () => document.createComment(""), xo = (r, o, e) => {
+const { _ChildPart: ha } = Xt, U = ((_r = window.ShadyDOM) === null || _r === void 0 ? void 0 : _r.inUse) && ((Sr = window.ShadyDOM) === null || Sr === void 0 ? void 0 : Sr.noPatch) === !0 ? window.ShadyDOM.wrap : (r) => r, ye = () => document.createComment(""), xo = (r, o, e) => {
   var t;
-  const a = B(r._$startNode).parentNode, c = o === void 0 ? r._$endNode : o._$startNode;
+  const a = U(r._$startNode).parentNode, c = o === void 0 ? r._$endNode : o._$startNode;
   if (e === void 0) {
-    const i = B(a).insertBefore(ye(), c), l = B(a).insertBefore(ye(), c);
+    const i = U(a).insertBefore(ye(), c), l = U(a).insertBefore(ye(), c);
     e = new ha(i, l, r, r.options);
   } else {
-    const i = B(e._$endNode).nextSibling, l = e._$parent, n = l !== r;
+    const i = U(e._$endNode).nextSibling, l = e._$parent, n = l !== r;
     if (n) {
       (t = e._$reparentDisconnectables) === null || t === void 0 || t.call(e, r), e._$parent = r;
       let d;
@@ -9108,8 +9108,8 @@ const { _ChildPart: ha } = Xt, B = ((_r = window.ShadyDOM) === null || _r === vo
     if (i !== c || n) {
       let d = e._$startNode;
       for (; d !== i; ) {
-        const u = B(d).nextSibling;
-        B(a).insertBefore(d, c), d = u;
+        const u = U(d).nextSibling;
+        U(a).insertBefore(d, c), d = u;
       }
     }
   }
@@ -9118,10 +9118,10 @@ const { _ChildPart: ha } = Xt, B = ((_r = window.ShadyDOM) === null || _r === vo
   var o;
   (o = r._$notifyConnectionChanged) === null || o === void 0 || o.call(r, !1, !0);
   let e = r._$startNode;
-  const t = B(r._$endNode).nextSibling;
+  const t = U(r._$endNode).nextSibling;
   for (; e !== t; ) {
-    const a = B(e).nextSibling;
-    B(e).remove(), e = a;
+    const a = U(e).nextSibling;
+    U(e).remove(), e = a;
   }
 };
 /**
@@ -9196,7 +9196,7 @@ class fa extends ee {
       const x = i[b++];
       x !== null && Cr(x);
     }
-    return this._itemKeys = n, pa(o, u), Z;
+    return this._itemKeys = n, pa(o, u), I;
   }
 }
 const at = re(fa);
@@ -11892,7 +11892,7 @@ const Aa = function(r) {
 function lt(r) {
   return r && r.document && r.location && r.alert && r.setInterval;
 }
-function V(r) {
+function D(r) {
   if (r == null)
     return window;
   if (!lt(r)) {
@@ -11902,9 +11902,9 @@ function V(r) {
   return r;
 }
 function Po(r) {
-  return V(r).getComputedStyle(r);
+  return D(r).getComputedStyle(r);
 }
-function I(r) {
+function V(r) {
   return lt(r) ? "" : r ? (r.nodeName || "").toLowerCase() : "";
 }
 function nt() {
@@ -11912,18 +11912,18 @@ function nt() {
   return r != null && r.brands ? r.brands.map((o) => o.brand + "/" + o.version).join(" ") : navigator.userAgent;
 }
 function Y(r) {
-  return r instanceof V(r).HTMLElement;
+  return r instanceof D(r).HTMLElement;
 }
 function uo(r) {
-  return r instanceof V(r).Element;
+  return r instanceof D(r).Element;
 }
 function Pa(r) {
-  return r instanceof V(r).Node;
+  return r instanceof D(r).Node;
 }
 function ce(r) {
   if (typeof ShadowRoot > "u")
     return !1;
-  const o = V(r).ShadowRoot;
+  const o = D(r).ShadowRoot;
   return r instanceof o || r instanceof ShadowRoot;
 }
 function ar(r) {
@@ -11935,7 +11935,7 @@ function ar(r) {
   return /auto|scroll|overlay|hidden/.test(o + t + e);
 }
 function Ta(r) {
-  return ["table", "td", "th"].includes(I(r));
+  return ["table", "td", "th"].includes(V(r));
 }
 function dt(r) {
   const o = /firefox/i.test(nt()), e = Po(r);
@@ -11951,7 +11951,7 @@ function to(r, o, e) {
   const l = r.getBoundingClientRect();
   let n = 1, d = 1;
   o && Y(r) && (n = r.offsetWidth > 0 && Jo(l.width) / r.offsetWidth || 1, d = r.offsetHeight > 0 && Jo(l.height) / r.offsetHeight || 1);
-  const u = uo(r) ? V(r) : window, s = !bt() && e, g = (l.left + (s && (t = (a = u.visualViewport) == null ? void 0 : a.offsetLeft) != null ? t : 0)) / n, b = (l.top + (s && (c = (i = u.visualViewport) == null ? void 0 : i.offsetTop) != null ? c : 0)) / d, v = l.width / n, m = l.height / d;
+  const u = uo(r) ? D(r) : window, s = !bt() && e, g = (l.left + (s && (t = (a = u.visualViewport) == null ? void 0 : a.offsetLeft) != null ? t : 0)) / n, b = (l.top + (s && (c = (i = u.visualViewport) == null ? void 0 : i.offsetTop) != null ? c : 0)) / d, v = l.width / n, m = l.height / d;
   return {
     width: v,
     height: m,
@@ -11997,7 +11997,7 @@ function Fa(r, o, e) {
     y: 0
   };
   if (t || !t && e !== "fixed")
-    if ((I(o) !== "body" || ar(a)) && (i = ir(o)), Y(o)) {
+    if ((V(o) !== "body" || ar(a)) && (i = ir(o)), Y(o)) {
       const n = to(o, !0);
       l.x = n.x + o.clientLeft, l.y = n.y + o.clientTop;
     } else
@@ -12010,14 +12010,14 @@ function Fa(r, o, e) {
   };
 }
 function gt(r) {
-  return I(r) === "html" ? r : r.assignedSlot || r.parentNode || (ce(r) ? r.host : null) || G(r);
+  return V(r) === "html" ? r : r.assignedSlot || r.parentNode || (ce(r) ? r.host : null) || G(r);
 }
 function qe(r) {
   return !Y(r) || getComputedStyle(r).position === "fixed" ? null : r.offsetParent;
 }
 function Oa(r) {
   let o = gt(r);
-  for (ce(o) && (o = o.host); Y(o) && !["html", "body"].includes(I(o)); ) {
+  for (ce(o) && (o = o.host); Y(o) && !["html", "body"].includes(V(o)); ) {
     if (dt(o))
       return o;
     o = o.parentNode;
@@ -12025,11 +12025,11 @@ function Oa(r) {
   return null;
 }
 function Nr(r) {
-  const o = V(r);
+  const o = D(r);
   let e = qe(r);
   for (; e && Ta(e) && getComputedStyle(e).position === "static"; )
     e = qe(e);
-  return e && (I(e) === "html" || I(e) === "body" && getComputedStyle(e).position === "static" && !dt(e)) ? o : e || Oa(r) || o;
+  return e && (V(e) === "html" || V(e) === "body" && getComputedStyle(e).position === "static" && !dt(e)) ? o : e || Oa(r) || o;
 }
 function Re(r) {
   if (Y(r))
@@ -12060,7 +12060,7 @@ function La(r) {
     x: 0,
     y: 0
   };
-  if ((a || !a && t !== "fixed") && ((I(e) !== "body" || ar(c)) && (i = ir(e)), Y(e))) {
+  if ((a || !a && t !== "fixed") && ((V(e) !== "body" || ar(c)) && (i = ir(e)), Y(e))) {
     const n = to(e, !0);
     l.x = n.x + e.clientLeft, l.y = n.y + e.clientTop;
   }
@@ -12071,7 +12071,7 @@ function La(r) {
   };
 }
 function Ya(r, o) {
-  const e = V(r), t = G(r), a = e.visualViewport;
+  const e = D(r), t = G(r), a = e.visualViewport;
   let c = t.clientWidth, i = t.clientHeight, l = 0, n = 0;
   if (a) {
     c = a.width, i = a.height;
@@ -12099,12 +12099,12 @@ function Xa(r) {
 }
 function ut(r) {
   const o = gt(r);
-  return ["html", "body", "#document"].includes(I(o)) ? r.ownerDocument.body : Y(o) && ar(o) ? o : ut(o);
+  return ["html", "body", "#document"].includes(V(o)) ? r.ownerDocument.body : Y(o) && ar(o) ? o : ut(o);
 }
 function ht(r, o) {
   var e;
   o === void 0 && (o = []);
-  const t = ut(r), a = t === ((e = r.ownerDocument) == null ? void 0 : e.body), c = V(t), i = a ? [c].concat(c.visualViewport || [], ar(t) ? t : []) : t, l = o.concat(i);
+  const t = ut(r), a = t === ((e = r.ownerDocument) == null ? void 0 : e.body), c = D(t), i = a ? [c].concat(c.visualViewport || [], ar(t) ? t : []) : t, l = o.concat(i);
   return a ? l : l.concat(ht(i));
 }
 function Na(r, o) {
@@ -12139,7 +12139,7 @@ function Ee(r, o, e) {
 }
 function Ua(r) {
   const o = ht(r), t = ["absolute", "fixed"].includes(Po(r).position) && Y(r) ? Nr(r) : r;
-  return uo(t) ? o.filter((a) => uo(a) && Na(a, t) && I(a) !== "body") : [];
+  return uo(t) ? o.filter((a) => uo(a) && Na(a, t) && V(a) !== "body") : [];
 }
 function Za(r) {
   let {
@@ -12287,22 +12287,19 @@ ${JSON.stringify(
   }
   get _wrapperClasses() {
     return xe({
-      [H.base]: !0,
-      [H.tooltip]: this.tooltip,
-      [H.callout]: this.callout,
-      [H.popover]: this.popover
+      [N.base]: !0,
+      [N.tooltip]: this.tooltip,
+      [N.callout]: this.callout,
+      [N.popover]: this.popover
     });
   }
   get _arrowClasses() {
     return xe({
-      [H.arrowBase]: !0,
-      ["-top-8"]: this._arrowDirection === "top",
-      ["-right-8"]: this._arrowDirection === "right",
-      ["-bottom-8"]: this._arrowDirection === "bottom",
-      ["-left-8"]: this._arrowDirection === "left",
-      [H.arrowTooltip]: this.tooltip,
-      [H.arrowCallout]: this.callout,
-      [H.arrowPopover]: this.popover
+      [N.arrowBase]: !0,
+      [N[`arrowDirection${this._arrowDirection.charAt(0).toUpperCase() + this._arrowDirection.slice(1)}`]]: !0,
+      [N.arrowTooltip]: this.tooltip,
+      [N.arrowCallout]: this.callout,
+      [N.arrowPopover]: this.popover
     });
   }
   get _arrowHtml() {
@@ -13184,13 +13181,9 @@ body:not(:-moz-handler-blocked) fieldset {
 .inset-0{inset:0rem;}
 .-bottom-\\[8px\\]{bottom:-8px;}
 .-bottom-0{bottom:-0rem;}
-.-bottom-8{bottom:-0.8rem;}
 .-left-\\[8px\\]{left:-8px;}
-.-left-8{left:-0.8rem;}
 .-right-\\[8px\\]{right:-8px;}
-.-right-8{right:-0.8rem;}
 .-top-\\[8px\\]{top:-8px;}
-.-top-8{top:-0.8rem;}
 .before\\:bottom-0::before,
 .bottom-0{bottom:0rem;}
 .before\\:left-0::before,
@@ -14592,7 +14585,7 @@ class Zr extends Eo($) {
     return h`<div
       class=${j({
       [this.contentClass || ""]: !0,
-      [U.box + (this._hasTitle ? " pt-0" : "")]: this.box
+      [Z.box + (this._hasTitle ? " pt-0" : "")]: this.box
     })}
     >
       <slot></slot>
@@ -14601,9 +14594,9 @@ class Zr extends Eo($) {
   render() {
     return h` <div
       class=${j({
-      [N.expandable]: !0,
-      [N.expandableBox]: this.box,
-      [N.expandableBleed]: this.bleed
+      [B.expandable]: !0,
+      [B.expandableBox]: this.box,
+      [B.expandableBleed]: this.bleed
     })}
     >
       ${this._hasTitle ? h`<w-unstyled-heading level=${this.headingLevel}>
@@ -14612,8 +14605,8 @@ class Zr extends Eo($) {
               aria-expanded="${this.expanded}"
               class=${j({
       [this.buttonClass || ""]: !0,
-      [N.button]: !0,
-      [N.buttonBox]: this.box
+      [B.button]: !0,
+      [B.buttonBox]: this.box
     })}
               @click=${() => this.expanded = !this.expanded}
             >
@@ -14621,10 +14614,10 @@ class Zr extends Eo($) {
                 ${this.title ? h`<span class="h4">${this.title}</span>` : h`<slot name="title"></slot>`}
                 ${this.noChevron ? "" : h`<div
                       class=${j({
-      [N.chevron]: !0,
-      [N.chevronExpanded]: this.expanded,
-      [N.chevronBox]: this.box,
-      [N.chevronNonBox]: !this.box
+      [B.chevron]: !0,
+      [B.chevronExpanded]: this.expanded,
+      [B.chevronBox]: this.box,
+      [B.chevronNonBox]: !this.box
     })}
                     >
                       <f-icon-chevron-down16></f-icon-chevron-down16>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "1.0.0-alpha.18",
+  "version": "1.0.0-alpha.19",
   "description": "Custom elements for Warp",
   "exports": {
     ".": "./dist/index.js",