@warp-ds/elements 1.0.0-alpha.11 → 1.0.0-alpha.12

package/dist/index.js

@@ -4,7 +4,7 @@ var x = (e, o, r) => (pt(e, typeof o != "symbol" ? o + "" : o, r), r), ht = (e,
   if (!o.has(e))
     throw TypeError("Cannot " + r);
 };
-var X = (e, o, r) => (ht(e, o, "read from private field"), r ? r.call(e) : o.get(e)), Eo = (e, o, r) => {
+var V = (e, o, r) => (ht(e, o, "read from private field"), r ? r.call(e) : o.get(e)), Eo = (e, o, r) => {
   if (o.has(e))
     throw TypeError("Cannot add the same private member more than once");
   o instanceof WeakSet ? o.add(e) : o.set(e, r);
@@ -61,15 +61,15 @@ const mt = (e) => {
  */
 var ee, re, te, Er;
 const N = window;
-let jr, Z;
+let jr, D;
 const ar = N.trustedTypes, wt = ar ? ar.emptyScript : "", Ao = N.reactiveElementPolyfillSupportDevMode;
 {
   const e = (ee = N.litIssuedWarnings) !== null && ee !== void 0 ? ee : N.litIssuedWarnings = /* @__PURE__ */ new Set();
-  Z = (o, r) => {
+  D = (o, r) => {
     r += ` See https://lit.dev/msg/${o} for more information.`, e.has(r) || (console.warn(r), e.add(r));
-  }, Z("dev-mode", "Lit is in dev mode. Not recommended for production!"), ((re = N.ShadyDOM) === null || re === void 0 ? void 0 : re.inUse) && Ao === void 0 && Z("polyfill-support-missing", "Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded."), jr = (o) => ({
+  }, D("dev-mode", "Lit is in dev mode. Not recommended for production!"), ((re = N.ShadyDOM) === null || re === void 0 ? void 0 : re.inUse) && Ao === void 0 && D("polyfill-support-missing", "Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded."), jr = (o) => ({
     then: (r, t) => {
-      Z("request-update-promise", `The \`requestUpdate\` method should no longer return a Promise but does so on \`${o}\`. Use \`updateComplete\` instead.`), r !== void 0 && r(!1);
+      D("request-update-promise", `The \`requestUpdate\` method should no longer return a Promise but does so on \`${o}\`. Use \`updateComplete\` instead.`), r !== void 0 && r(!1);
     }
   });
 }
@@ -172,7 +172,7 @@ class U extends HTMLElement {
     this.elementStyles = this.finalizeStyles(this.styles);
     {
       const r = (t, i = !1) => {
-        this.prototype.hasOwnProperty(t) && Z(i ? "renamed-api" : "removed-api", `\`${t}\` is implemented on class ${this.name}. It has been ${i ? "renamed" : "removed"} in this version of LitElement.`);
+        this.prototype.hasOwnProperty(t) && D(i ? "renamed-api" : "removed-api", `\`${t}\` is implemented on class ${this.name}. It has been ${i ? "renamed" : "removed"} in this version of LitElement.`);
       };
       r("initialize"), r("requestUpdateInternal"), r("_getUpdateComplete", !0);
     }
@@ -238,7 +238,7 @@ class U extends HTMLElement {
     const n = this.constructor.__attributeNameForProperty(o, t);
     if (n !== void 0 && t.reflect === !0) {
       const l = (((i = t.converter) === null || i === void 0 ? void 0 : i.toAttribute) !== void 0 ? t.converter : ze).toAttribute(r, t.type);
-      this.constructor.enabledWarnings.indexOf("migration") >= 0 && l === void 0 && Z("undefined-attribute-value", `The attribute value for the ${o} property is undefined on element ${this.localName}. The attribute will be removed, but in the previous version of \`ReactiveElement\`, the attribute would not have changed.`), this.__reflectingProperty = o, l == null ? this.removeAttribute(n) : this.setAttribute(n, l), this.__reflectingProperty = null;
+      this.constructor.enabledWarnings.indexOf("migration") >= 0 && l === void 0 && D("undefined-attribute-value", `The attribute value for the ${o} property is undefined on element ${this.localName}. The attribute will be removed, but in the previous version of \`ReactiveElement\`, the attribute would not have changed.`), this.__reflectingProperty = o, l == null ? this.removeAttribute(n) : this.setAttribute(n, l), this.__reflectingProperty = null;
     }
   }
   _$attributeToProperty(o, r) {
@@ -301,7 +301,7 @@ class U extends HTMLElement {
     (r = this.__controllers) === null || r === void 0 || r.forEach((t) => {
       var i;
       return (i = t.hostUpdated) === null || i === void 0 ? void 0 : i.call(t);
-    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(o)), this.updated(o), this.isUpdatePending && this.constructor.enabledWarnings.indexOf("change-in-update") >= 0 && Z("change-in-update", `Element ${this.localName} scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update.`);
+    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(o)), this.updated(o), this.isUpdatePending && this.constructor.enabledWarnings.indexOf("change-in-update") >= 0 && D("change-in-update", `Element ${this.localName} scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update.`);
   }
   __markUpdated() {
     this._$changedProperties = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
@@ -343,7 +343,7 @@ Ao == null || Ao({ ReactiveElement: U });
   };
 }
 ((te = N.reactiveElementVersions) !== null && te !== void 0 ? te : N.reactiveElementVersions = []).push("1.6.1");
-N.reactiveElementVersions.length > 1 && Z("multiple-versions", "Multiple versions of Lit loaded. Loading multiple versions is not recommended.");
+N.reactiveElementVersions.length > 1 && D("multiple-versions", "Multiple versions of Lit loaded. Loading multiple versions is not recommended.");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -362,20 +362,20 @@ let kt = 0, Fo;
 const j = ((le = q.ShadyDOM) === null || le === void 0 ? void 0 : le.inUse) && ((ce = q.ShadyDOM) === null || ce === void 0 ? void 0 : ce.noPatch) === !0 ? q.ShadyDOM.wrap : (e) => e, no = q.trustedTypes, nr = no ? no.createPolicy("lit-html", {
   createHTML: (e) => e
 }) : void 0, yt = (e) => e, Wo = (e, o, r) => yt, $t = (e) => {
-  if (G !== Wo)
+  if (J !== Wo)
     throw new Error("Attempted to overwrite existing lit-html security policy. setSanitizeDOMValueFactory should be called at most once.");
-  G = e;
+  J = e;
 }, zt = () => {
-  G = Wo;
-}, Se = (e, o, r) => G(e, o, r), Oo = "$lit$", P = `lit$${String(Math.random()).slice(9)}$`, Xe = "?" + P, _t = `<${Xe}>`, vo = document, fo = (e = "") => vo.createComment(e), xo = (e) => e === null || typeof e != "object" && typeof e != "function", Pr = Array.isArray, Nr = (e) => Pr(e) || typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", se = `[ 	
+  J = Wo;
+}, Se = (e, o, r) => J(e, o, r), Oo = "$lit$", P = `lit$${String(Math.random()).slice(9)}$`, Xe = "?" + P, _t = `<${Xe}>`, vo = document, fo = (e = "") => vo.createComment(e), xo = (e) => e === null || typeof e != "object" && typeof e != "function", Pr = Array.isArray, Nr = (e) => Pr(e) || typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", se = `[ 	
 \f\r]`, St = `[^ 	
-\f\r"'\`<>=]`, Ct = `[^\\s"'>=/]`, po = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, lr = 1, be = 2, qt = 3, cr = /-->/g, dr = />/g, H = new RegExp(`>|${se}(?:(${Ct}+)(${se}*=${se}*(?:${St}|("|')|))|$)`, "g"), Rt = 0, sr = 1, Et = 2, br = 3, ge = /'/g, ue = /"/g, Ur = /^(?:script|style|textarea|title)$/i, Tr = 1, Lo = 2, Ve = 1, Io = 2, jt = 3, At = 4, Mt = 5, Ze = 6, Pt = 7, Fr = (e) => (o, ...r) => (o.some((t) => t === void 0) && console.warn(`Some template strings are undefined.
+\f\r"'\`<>=]`, Ct = `[^\\s"'>=/]`, po = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, lr = 1, be = 2, qt = 3, cr = /-->/g, dr = />/g, W = new RegExp(`>|${se}(?:(${Ct}+)(${se}*=${se}*(?:${St}|("|')|))|$)`, "g"), Rt = 0, sr = 1, Et = 2, br = 3, ge = /'/g, ue = /"/g, Ur = /^(?:script|style|textarea|title)$/i, Tr = 1, Lo = 2, Ve = 1, Io = 2, jt = 3, At = 4, Mt = 5, Ze = 6, Pt = 7, Fr = (e) => (o, ...r) => (o.some((t) => t === void 0) && console.warn(`Some template strings are undefined.
 This is probably caused by illegal octal escape sequences.`), {
   _$litType$: e,
   strings: o,
   values: r
-}), p = Fr(Tr), Ko = Fr(Lo), I = Symbol.for("lit-noChange"), k = Symbol.for("lit-nothing"), gr = /* @__PURE__ */ new WeakMap(), to = vo.createTreeWalker(vo, 129, null, !1);
-let G = Wo;
+}), p = Fr(Tr), Ko = Fr(Lo), B = Symbol.for("lit-noChange"), k = Symbol.for("lit-nothing"), gr = /* @__PURE__ */ new WeakMap(), to = vo.createTreeWalker(vo, 129, null, !1);
+let J = Wo;
 const Or = (e, o) => {
   const r = e.length - 1, t = [];
   let i = o === Lo ? "<svg>" : "", n, a = po;
@@ -389,13 +389,13 @@ const Or = (e, o) => {
         else if (s[lr] !== void 0)
           a = dr;
         else if (s[be] !== void 0)
-          Ur.test(s[be]) && (n = new RegExp(`</${s[be]}`, "g")), a = H;
+          Ur.test(s[be]) && (n = new RegExp(`</${s[be]}`, "g")), a = W;
         else if (s[qt] !== void 0)
           throw new Error("Bindings in tag names are not supported. Please use static templates instead. See https://lit.dev/docs/templates/expressions/#static-expressions");
       } else
-        a === H ? s[Rt] === ">" ? (a = n != null ? n : po, u = -1) : s[sr] === void 0 ? u = -2 : (u = a.lastIndex - s[Et].length, b = s[sr], a = s[br] === void 0 ? H : s[br] === '"' ? ue : ge) : a === ue || a === ge ? a = H : a === cr || a === dr ? a = po : (a = H, n = void 0);
-    console.assert(u === -1 || a === H || a === ge || a === ue, "unexpected parse state B");
-    const h = a === H && e[c + 1].startsWith("/>") ? " " : "";
+        a === W ? s[Rt] === ">" ? (a = n != null ? n : po, u = -1) : s[sr] === void 0 ? u = -2 : (u = a.lastIndex - s[Et].length, b = s[sr], a = s[br] === void 0 ? W : s[br] === '"' ? ue : ge) : a === ue || a === ge ? a = W : a === cr || a === dr ? a = po : (a = W, n = void 0);
+    console.assert(u === -1 || a === W || a === ge || a === ue, "unexpected parse state B");
+    const h = a === W && e[c + 1].startsWith("/>") ? " " : "";
     i += a === po ? d + _t : u >= 0 ? (t.push(b), d.slice(0, u) + Oo + d.slice(u) + P + h) : d + P + (u === -2 ? (t.push(void 0), c) : h);
   }
   const l = i + (e[r] || "<?>") + (o === Lo ? "</svg>" : "");
@@ -495,13 +495,13 @@ class wo {
     return t.innerHTML = o, t;
   }
 }
-function J(e, o, r = e, t) {
+function Q(e, o, r = e, t) {
   var i, n, a, l;
-  if (o === I)
+  if (o === B)
     return o;
   let c = t !== void 0 ? (i = r.__directives) === null || i === void 0 ? void 0 : i[t] : r.__directive;
   const d = xo(o) ? void 0 : o._$litDirective$;
-  return (c == null ? void 0 : c.constructor) !== d && ((n = c == null ? void 0 : c._$notifyDirectiveConnectionChanged) === null || n === void 0 || n.call(c, !1), d === void 0 ? c = void 0 : (c = new d(e), c._$initialize(e, r, t)), t !== void 0 ? ((a = (l = r).__directives) !== null && a !== void 0 ? a : l.__directives = [])[t] = c : r.__directive = c), c !== void 0 && (o = J(e, c._$resolve(e, o.values), c, t)), o;
+  return (c == null ? void 0 : c.constructor) !== d && ((n = c == null ? void 0 : c._$notifyDirectiveConnectionChanged) === null || n === void 0 || n.call(c, !1), d === void 0 ? c = void 0 : (c = new d(e), c._$initialize(e, r, t)), t !== void 0 ? ((a = (l = r).__directives) !== null && a !== void 0 ? a : l.__directives = [])[t] = c : r.__directive = c), c !== void 0 && (o = Q(e, c._$resolve(e, o.values), c, t)), o;
 }
 class Lr {
   constructor(o, r) {
@@ -564,14 +564,14 @@ class co {
     var t;
     if (this.parentNode === null)
       throw new Error("This `ChildPart` has no `parentNode` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's `innerHTML` or `textContent` can do this.");
-    if (o = J(this, o, r), xo(o))
+    if (o = Q(this, o, r), xo(o))
       o === k || o == null || o === "" ? (this._$committedValue !== k && (m == null || m({
         kind: "commit nothing to child",
         start: this._$startNode,
         end: this._$endNode,
         parent: this._$parent,
         options: this.options
-      }), this._$clear()), this._$committedValue = k) : o !== this._$committedValue && o !== I && this._commitText(o);
+      }), this._$clear()), this._$committedValue = k) : o !== this._$committedValue && o !== B && this._commitText(o);
     else if (o._$litType$ !== void 0)
       this._commitTemplateResult(o);
     else if (o.nodeType !== void 0) {
@@ -589,7 +589,7 @@ class co {
   _commitNode(o) {
     var r;
     if (this._$committedValue !== o) {
-      if (this._$clear(), G !== Wo) {
+      if (this._$clear(), J !== Wo) {
         const t = (r = this._$startNode.parentNode) === null || r === void 0 ? void 0 : r.nodeName;
         if (t === "STYLE" || t === "SCRIPT") {
           let i = "Forbidden";
@@ -699,18 +699,18 @@ class zo {
     const n = this.strings;
     let a = !1;
     if (n === void 0)
-      o = J(this, o, r, 0), a = !xo(o) || o !== this._$committedValue && o !== I, a && (this._$committedValue = o);
+      o = Q(this, o, r, 0), a = !xo(o) || o !== this._$committedValue && o !== B, a && (this._$committedValue = o);
     else {
       const l = o;
       o = n[0];
       let c, d;
       for (c = 0; c < n.length - 1; c++)
-        d = J(this, l[t + c], r, c), d === I && (d = this._$committedValue[c]), a || (a = !xo(d) || d !== this._$committedValue[c]), d === k ? o = k : o !== k && (o += (d != null ? d : "") + n[c + 1]), this._$committedValue[c] = d;
+        d = Q(this, l[t + c], r, c), d === B && (d = this._$committedValue[c]), a || (a = !xo(d) || d !== this._$committedValue[c]), d === k ? o = k : o !== k && (o += (d != null ? d : "") + n[c + 1]), this._$committedValue[c] = d;
     }
     a && !i && this._commitValue(o);
   }
   _commitValue(o) {
-    o === k ? j(this.element).removeAttribute(this.name) : (this._sanitizer === void 0 && (this._sanitizer = G(this.element, this.name, "attribute")), o = this._sanitizer(o != null ? o : ""), m == null || m({
+    o === k ? j(this.element).removeAttribute(this.name) : (this._sanitizer === void 0 && (this._sanitizer = J(this.element, this.name, "attribute")), o = this._sanitizer(o != null ? o : ""), m == null || m({
       kind: "commit attribute",
       element: this.element,
       name: this.name,
@@ -724,7 +724,7 @@ class Ir extends zo {
     super(...arguments), this.type = jt;
   }
   _commitValue(o) {
-    this._sanitizer === void 0 && (this._sanitizer = G(this.element, this.name, "property")), o = this._sanitizer(o), m == null || m({
+    this._sanitizer === void 0 && (this._sanitizer = J(this.element, this.name, "property")), o = this._sanitizer(o), m == null || m({
       kind: "commit property",
       element: this.element,
       name: this.name,
@@ -755,7 +755,7 @@ class Yr extends zo {
   }
   _$setValue(o, r = this) {
     var t;
-    if (o = (t = J(this, o, r, 0)) !== null && t !== void 0 ? t : k, o === I)
+    if (o = (t = Q(this, o, r, 0)) !== null && t !== void 0 ? t : k, o === B)
       return;
     const i = this._$committedValue, n = o === k && i !== k || o.capture !== i.capture || o.once !== i.once || o.passive !== i.passive, a = o !== k && (i === k || n);
     m == null || m({
@@ -787,7 +787,7 @@ class Xr {
       element: this.element,
       value: o,
       options: this.options
-    }), J(this, o);
+    }), Q(this, o);
   }
 }
 const Ut = {
@@ -798,7 +798,7 @@ const Ut = {
   _getTemplateHtml: Or,
   _TemplateInstance: Lr,
   _isIterable: Nr,
-  _resolveDirective: J,
+  _resolveDirective: Q,
   _ChildPart: co,
   _AttributePart: zo,
   _BooleanAttributePart: Br,
@@ -871,7 +871,7 @@ class y extends U {
     super.disconnectedCallback(), (o = this.__childPart) === null || o === void 0 || o.setConnected(!1);
   }
   render() {
-    return I;
+    return B;
   }
 }
 y.finalized = !0;
@@ -1840,7 +1840,7 @@ video {
       }
     `);
 customElements.get("w-alert") || customElements.define("w-alert", Ce);
-const V = {
+const Z = {
   base: "border-2 relative",
   tooltip: "bg-gray-700 border-gray-700 text-white rounded-4 py-6 px-8",
   callout: "bg-green-100 border-green-400 py-8 px-16 rounded-8",
@@ -1849,7 +1849,7 @@ const V = {
   arrowTooltip: "bg-gray-700 border-gray-700",
   arrowCallout: "bg-green-100 border-green-400",
   arrowPopover: "bg-white border-white"
-}, ro = {
+}, I = {
   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",
@@ -1904,7 +1904,7 @@ const V = {
   buttonSmallButtonLink: "p-0",
   buttonIsDisabled: "py-10 px-14 font-bold leading-24 max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-disabled-background! i-text-$color-button-disabled-text cursor-default pointer-events-none",
   buttonInProgress: "py-10 px-14 border-0 font-bold rounded-8 leading-24 max-w-max focusable justify-center transition-colors ease-in-out animate-inprogress i-text-$color-button-loading-text! pointer-events-none i-bg-$color-button-loading-background!"
-}, W = {
+}, K = {
   default: "block text-16 mb-0 leading-22 i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable",
   disabled: "i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none",
   invalid: "focusable i-border-$color-input-border-error i-text-$color-input-text-error!",
@@ -2004,7 +2004,7 @@ class Ht extends Ge {
       const l = !!r[a];
       l !== this._previousClasses.has(a) && !(!((i = this._staticClasses) === null || i === void 0) && i.has(a)) && (l ? (n.add(a), this._previousClasses.add(a)) : (n.remove(a), this._previousClasses.delete(a)));
     }
-    return I;
+    return B;
   }
 }
 const Je = Ke(Ht), Wt = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
@@ -3821,7 +3821,7 @@ class Qe extends Ge {
   render(o) {
     if (o === k || o == null)
       return this._templateResult = void 0, this._value = o;
-    if (o === I)
+    if (o === B)
       return o;
     if (typeof o != "string")
       throw new Error(`${this.constructor.directiveName}() called with a non-string value`);
@@ -3849,10 +3849,10 @@ class Re extends Go(y) {
     this._options = this.innerHTML;
   }
   render() {
-    return p`<div class="${X(this, Ho, Dr)}">
+    return p`<div class="${V(this, Ho, Dr)}">
       ${No(
       this.label,
-      () => p`<label for="${X(this, io, Uo)}">
+      () => p`<label for="${V(this, io, Uo)}">
             ${this.label}
             ${No(
         this.optional,
@@ -3862,18 +3862,18 @@ class Re extends Go(y) {
     )}
       <div class="input--select__wrap">
         <select
-          id="${X(this, io, Uo)}"
+          id="${V(this, io, Uo)}"
           ?autofocus=${this.autoFocus}
-          aria-describedby="${z(X(this, ao, To))}"
+          aria-describedby="${z(V(this, ao, To))}"
           aria-invalid="${z(this.invalid)}"
-          aria-errormessage="${z(this.invalid && X(this, ao, To))}"
+          aria-errormessage="${z(this.invalid && V(this, ao, To))}"
         >
           ${Zr(this._options)}
         </select>
       </div>
       ${No(
       this.always || this.invalid,
-      () => p`<div id="${X(this, ao, To)}" class="input__sub-text">${this.hint}</div>`
+      () => p`<div id="${V(this, ao, To)}" class="input__sub-text">${this.hint}</div>`
     )}
     </div>`;
   }
@@ -3885,7 +3885,7 @@ Ho = new WeakSet(), Dr = function() {
 }, io = new WeakSet(), Uo = function() {
   return "select_id";
 }, ao = new WeakSet(), To = function() {
-  return this.hint ? `${X(this, io, Uo)}__hint` : void 0;
+  return this.hint ? `${V(this, io, Uo)}__hint` : void 0;
 }, x(Re, "properties", {
   autoFocus: { type: Boolean, reflect: !0 },
   invalid: { type: Boolean, reflect: !0 },
@@ -4706,11 +4706,11 @@ customElements.get("w-select") || customElements.define("w-select", Re);
 class Ee extends y {
   get _class() {
     return A({
-      [ro.box]: !0,
-      [ro.bleed]: this.bleed,
-      "bg-aqua-50": this.info,
-      "bg-bluegray-100": this.neutral,
-      "border-2 border-bluegray-300": this.bordered
+      [I.box]: !0,
+      [I.bleed]: this.bleed,
+      [I.info]: this.info,
+      [I.neutral]: this.neutral,
+      [I.bordered]: this.bordered
     });
   }
   render() {
@@ -5224,7 +5224,6 @@ video {
 .bg-aqua-200,
 .bg-blue-200,
 .bg-blue-600,
-.bg-bluegray-100,
 .bg-bluegray-200,
 .bg-bluegray-300,
 .bg-gray-100,
@@ -5537,7 +5536,7 @@ video {
           display: block;
         }
         ::slotted(:last-child) {
-          margin-bottom: 0px !important;
+          margin-bottom: 0 !important;
         }
       `);
 customElements.get("w-box") || customElements.define("w-box", Ee);
@@ -7402,7 +7401,7 @@ const { _ChildPart: ai } = Ut, L = ((we = window.ShadyDOM) === null || we === vo
     }
   }
   return r;
-}, K = (e, o, r = e) => (e._$setValue(o, r), e), ni = {}, li = (e, o = ni) => e._$committedValue = o, ci = (e) => e._$committedValue, ye = (e) => {
+}, G = (e, o, r = e) => (e._$setValue(o, r), e), ni = {}, li = (e, o = ni) => e._$committedValue = o, ci = (e) => e._$committedValue, ye = (e) => {
   var o;
   (o = e._$notifyConnectionChanged) === null || o === void 0 || o.call(e, !1, !0);
   let r = e._$startNode;
@@ -7456,13 +7455,13 @@ class di extends Ge {
       else if (a[h] === null)
         h--;
       else if (d[s] === c[v])
-        u[v] = K(a[s], l[v]), s++, v++;
+        u[v] = G(a[s], l[v]), s++, v++;
       else if (d[h] === c[f])
-        u[f] = K(a[h], l[f]), h--, f--;
+        u[f] = G(a[h], l[f]), h--, f--;
       else if (d[s] === c[f])
-        u[f] = K(a[s], l[f]), ho(o, u[f + 1], a[s]), s++, f--;
+        u[f] = G(a[s], l[f]), ho(o, u[f + 1], a[s]), s++, f--;
       else if (d[h] === c[v])
-        u[v] = K(a[h], l[v]), ho(o, a[s], a[h]), h--, v++;
+        u[v] = G(a[h], l[v]), ho(o, a[s], a[h]), h--, v++;
       else if (b === void 0 && (b = wr(c, v, f), g = wr(d, s, h)), !b.has(d[s]))
         ye(a[s]), s++;
       else if (!b.has(d[h]))
@@ -7471,20 +7470,20 @@ class di extends Ge {
         const w = g.get(c[v]), $ = w !== void 0 ? a[w] : null;
         if ($ === null) {
           const S = ho(o, a[s]);
-          K(S, l[v]), u[v] = S;
+          G(S, l[v]), u[v] = S;
         } else
-          u[v] = K($, l[v]), ho(o, a[s], $), a[w] = null;
+          u[v] = G($, l[v]), ho(o, a[s], $), a[w] = null;
         v++;
       }
     for (; v <= f; ) {
       const w = ho(o, u[f + 1]);
-      K(w, l[v]), u[v++] = w;
+      G(w, l[v]), u[v++] = w;
     }
     for (; s <= h; ) {
       const w = a[s++];
       w !== null && ye(w);
     }
-    return this._itemKeys = c, li(o, u), I;
+    return this._itemKeys = c, li(o, u), B;
   }
 }
 const ot = Ke(di);
@@ -9495,7 +9494,7 @@ const pi = (e) => ({
     }, b = So(a), g = Jo(a), s = er(b), h = await c.getDimensions(r), v = b === "y" ? "top" : "left", f = b === "y" ? "bottom" : "right", w = l.reference[s] + l.reference[b] - u[b] - l.floating[s], $ = u[b] - l.reference[b], S = await (c.getOffsetParent == null ? void 0 : c.getOffsetParent(r));
     let _ = S ? b === "y" ? S.clientHeight || 0 : S.clientWidth || 0 : 0;
     _ === 0 && (_ = l.floating[s]);
-    const oo = w / 2 - $ / 2, eo = d[v], so = _ - h[s] - d[f], F = _ / 2 - h[s] / 2 + oo, M = Pe(eo, F, so), qo = (g === "start" ? d[v] : d[f]) > 0 && F !== M && l.reference[s] <= l.floating[s] ? F < eo ? eo - F : so - F : 0;
+    const eo = w / 2 - $ / 2, ro = d[v], so = _ - h[s] - d[f], F = _ / 2 - h[s] / 2 + eo, M = Pe(ro, F, so), qo = (g === "start" ? d[v] : d[f]) > 0 && F !== M && l.reference[s] <= l.floating[s] ? F < ro ? ro - F : so - F : 0;
     return {
       [b]: u[b] - qo,
       data: {
@@ -9554,7 +9553,7 @@ const xi = function(e) {
         flipAlignment: s = !0,
         ...h
       } = e, v = _o(t), w = b || (v === a || !s ? [Xo(a)] : fi(a)), $ = [a, ...w], S = await rt(o, h), _ = [];
-      let oo = ((r = i.flip) == null ? void 0 : r.overflows) || [];
+      let eo = ((r = i.flip) == null ? void 0 : r.overflows) || [];
       if (d && _.push(S[v]), u) {
         const {
           main: M,
@@ -9562,17 +9561,17 @@ const xi = function(e) {
         } = mi(t, n, await (l.isRTL == null ? void 0 : l.isRTL(c.floating)));
         _.push(S[M], S[bo]);
       }
-      if (oo = [...oo, {
+      if (eo = [...eo, {
         placement: t,
         overflows: _
       }], !_.every((M) => M <= 0)) {
-        var eo, so;
-        const M = ((eo = (so = i.flip) == null ? void 0 : so.index) != null ? eo : 0) + 1, bo = $[M];
+        var ro, so;
+        const M = ((ro = (so = i.flip) == null ? void 0 : so.index) != null ? ro : 0) + 1, bo = $[M];
         if (bo)
           return {
             data: {
               index: M,
-              overflows: oo
+              overflows: eo
             },
             reset: {
               placement: bo
@@ -9582,7 +9581,7 @@ const xi = function(e) {
         switch (g) {
           case "bestFit": {
             var F;
-            const qo = (F = oo.map((Ro) => [Ro, Ro.overflows.filter((uo) => uo > 0).reduce((uo, gt) => uo + gt, 0)]).sort((Ro, uo) => Ro[1] - uo[1])[0]) == null ? void 0 : F[0].placement;
+            const qo = (F = eo.map((Ro) => [Ro, Ro.overflows.filter((uo) => uo > 0).reduce((uo, gt) => uo + gt, 0)]).sort((Ro, uo) => Ro[1] - uo[1])[0]) == null ? void 0 : F[0].placement;
             qo && (go = qo);
             break;
           }
@@ -9705,7 +9704,7 @@ const $i = function(e) {
 function tt(e) {
   return e && e.document && e.location && e.alert && e.setInterval;
 }
-function Y(e) {
+function X(e) {
   if (e == null)
     return window;
   if (!tt(e)) {
@@ -9715,9 +9714,9 @@ function Y(e) {
   return e;
 }
 function Co(e) {
-  return Y(e).getComputedStyle(e);
+  return X(e).getComputedStyle(e);
 }
-function B(e) {
+function Y(e) {
   return tt(e) ? "" : e ? (e.nodeName || "").toLowerCase() : "";
 }
 function it() {
@@ -9725,18 +9724,18 @@ function it() {
   return e != null && e.brands ? e.brands.map((o) => o.brand + "/" + o.version).join(" ") : navigator.userAgent;
 }
 function T(e) {
-  return e instanceof Y(e).HTMLElement;
+  return e instanceof X(e).HTMLElement;
 }
 function lo(e) {
-  return e instanceof Y(e).Element;
+  return e instanceof X(e).Element;
 }
 function zi(e) {
-  return e instanceof Y(e).Node;
+  return e instanceof X(e).Node;
 }
 function rr(e) {
   if (typeof ShadowRoot > "u")
     return !1;
-  const o = Y(e).ShadowRoot;
+  const o = X(e).ShadowRoot;
   return e instanceof o || e instanceof ShadowRoot;
 }
 function Qo(e) {
@@ -9748,7 +9747,7 @@ function Qo(e) {
   return /auto|scroll|overlay|hidden/.test(o + t + r);
 }
 function _i(e) {
-  return ["table", "td", "th"].includes(B(e));
+  return ["table", "td", "th"].includes(Y(e));
 }
 function at(e) {
   const o = /firefox/i.test(it()), r = Co(e);
@@ -9758,13 +9757,13 @@ function nt() {
   return !/^((?!chrome|android).)*safari/i.test(it());
 }
 const $r = Math.min, mo = Math.max, Vo = Math.round;
-function Q(e, o, r) {
+function oo(e, o, r) {
   var t, i, n, a;
   o === void 0 && (o = !1), r === void 0 && (r = !1);
   const l = e.getBoundingClientRect();
   let c = 1, d = 1;
   o && T(e) && (c = e.offsetWidth > 0 && Vo(l.width) / e.offsetWidth || 1, d = e.offsetHeight > 0 && Vo(l.height) / e.offsetHeight || 1);
-  const u = lo(e) ? Y(e) : window, b = !nt() && r, g = (l.left + (b && (t = (i = u.visualViewport) == null ? void 0 : i.offsetLeft) != null ? t : 0)) / c, s = (l.top + (b && (n = (a = u.visualViewport) == null ? void 0 : a.offsetTop) != null ? n : 0)) / d, h = l.width / c, v = l.height / d;
+  const u = lo(e) ? X(e) : window, b = !nt() && r, g = (l.left + (b && (t = (i = u.visualViewport) == null ? void 0 : i.offsetLeft) != null ? t : 0)) / c, s = (l.top + (b && (n = (a = u.visualViewport) == null ? void 0 : a.offsetTop) != null ? n : 0)) / d, h = l.width / c, v = l.height / d;
   return {
     width: h,
     height: v,
@@ -9776,7 +9775,7 @@ function Q(e, o, r) {
     y: s
   };
 }
-function D(e) {
+function H(e) {
   return ((zi(e) ? e.ownerDocument : e.document) || window.document).documentElement;
 }
 function oe(e) {
@@ -9789,14 +9788,14 @@ function oe(e) {
   };
 }
 function lt(e) {
-  return Q(D(e)).left + oe(e).scrollLeft;
+  return oo(H(e)).left + oe(e).scrollLeft;
 }
 function Si(e) {
-  const o = Q(e);
+  const o = oo(e);
   return Vo(o.width) !== e.offsetWidth || Vo(o.height) !== e.offsetHeight;
 }
 function Ci(e, o, r) {
-  const t = T(o), i = D(o), n = Q(
+  const t = T(o), i = H(o), n = oo(
     e,
     t && Si(o),
     r === "fixed"
@@ -9810,8 +9809,8 @@ function Ci(e, o, r) {
     y: 0
   };
   if (t || !t && r !== "fixed")
-    if ((B(o) !== "body" || Qo(i)) && (a = oe(o)), T(o)) {
-      const c = Q(o, !0);
+    if ((Y(o) !== "body" || Qo(i)) && (a = oe(o)), T(o)) {
+      const c = oo(o, !0);
       l.x = c.x + o.clientLeft, l.y = c.y + o.clientTop;
     } else
       i && (l.x = lt(i));
@@ -9823,14 +9822,14 @@ function Ci(e, o, r) {
   };
 }
 function ct(e) {
-  return B(e) === "html" ? e : e.assignedSlot || e.parentNode || (rr(e) ? e.host : null) || D(e);
+  return Y(e) === "html" ? e : e.assignedSlot || e.parentNode || (rr(e) ? e.host : null) || H(e);
 }
 function zr(e) {
   return !T(e) || getComputedStyle(e).position === "fixed" ? null : e.offsetParent;
 }
 function qi(e) {
   let o = ct(e);
-  for (rr(o) && (o = o.host); T(o) && !["html", "body"].includes(B(o)); ) {
+  for (rr(o) && (o = o.host); T(o) && !["html", "body"].includes(Y(o)); ) {
     if (at(o))
       return o;
     o = o.parentNode;
@@ -9838,11 +9837,11 @@ function qi(e) {
   return null;
 }
 function Ne(e) {
-  const o = Y(e);
+  const o = X(e);
   let r = zr(e);
   for (; r && _i(r) && getComputedStyle(r).position === "static"; )
     r = zr(r);
-  return r && (B(r) === "html" || B(r) === "body" && getComputedStyle(r).position === "static" && !at(r)) ? o : r || qi(e) || o;
+  return r && (Y(r) === "html" || Y(r) === "body" && getComputedStyle(r).position === "static" && !at(r)) ? o : r || qi(e) || o;
 }
 function _r(e) {
   if (T(e))
@@ -9850,7 +9849,7 @@ function _r(e) {
       width: e.offsetWidth,
       height: e.offsetHeight
     };
-  const o = Q(e);
+  const o = oo(e);
   return {
     width: o.width,
     height: o.height
@@ -9862,7 +9861,7 @@ function Ri(e) {
     offsetParent: r,
     strategy: t
   } = e;
-  const i = T(r), n = D(r);
+  const i = T(r), n = H(r);
   if (r === n)
     return o;
   let a = {
@@ -9873,8 +9872,8 @@ function Ri(e) {
     x: 0,
     y: 0
   };
-  if ((i || !i && t !== "fixed") && ((B(r) !== "body" || Qo(n)) && (a = oe(r)), T(r))) {
-    const c = Q(r, !0);
+  if ((i || !i && t !== "fixed") && ((Y(r) !== "body" || Qo(n)) && (a = oe(r)), T(r))) {
+    const c = oo(r, !0);
     l.x = c.x + r.clientLeft, l.y = c.y + r.clientTop;
   }
   return {
@@ -9884,7 +9883,7 @@ function Ri(e) {
   };
 }
 function Ei(e, o) {
-  const r = Y(e), t = D(e), i = r.visualViewport;
+  const r = X(e), t = H(e), i = r.visualViewport;
   let n = t.clientWidth, a = t.clientHeight, l = 0, c = 0;
   if (i) {
     n = i.width, a = i.height;
@@ -9900,7 +9899,7 @@ function Ei(e, o) {
 }
 function ji(e) {
   var o;
-  const r = D(e), t = oe(e), i = (o = e.ownerDocument) == null ? void 0 : o.body, n = mo(r.scrollWidth, r.clientWidth, i ? i.scrollWidth : 0, i ? i.clientWidth : 0), a = mo(r.scrollHeight, r.clientHeight, i ? i.scrollHeight : 0, i ? i.clientHeight : 0);
+  const r = H(e), t = oe(e), i = (o = e.ownerDocument) == null ? void 0 : o.body, n = mo(r.scrollWidth, r.clientWidth, i ? i.scrollWidth : 0, i ? i.clientWidth : 0), a = mo(r.scrollHeight, r.clientHeight, i ? i.scrollHeight : 0, i ? i.clientHeight : 0);
   let l = -t.scrollLeft + lt(e);
   const c = -t.scrollTop;
   return Co(i || r).direction === "rtl" && (l += mo(r.clientWidth, i ? i.clientWidth : 0) - n), {
@@ -9912,12 +9911,12 @@ function ji(e) {
 }
 function dt(e) {
   const o = ct(e);
-  return ["html", "body", "#document"].includes(B(o)) ? e.ownerDocument.body : T(o) && Qo(o) ? o : dt(o);
+  return ["html", "body", "#document"].includes(Y(o)) ? e.ownerDocument.body : T(o) && Qo(o) ? o : dt(o);
 }
 function st(e, o) {
   var r;
   o === void 0 && (o = []);
-  const t = dt(e), i = t === ((r = e.ownerDocument) == null ? void 0 : r.body), n = Y(t), a = i ? [n].concat(n.visualViewport || [], Qo(t) ? t : []) : t, l = o.concat(a);
+  const t = dt(e), i = t === ((r = e.ownerDocument) == null ? void 0 : r.body), n = X(t), a = i ? [n].concat(n.visualViewport || [], Qo(t) ? t : []) : t, l = o.concat(a);
   return i ? l : l.concat(st(a));
 }
 function Ai(e, o) {
@@ -9935,7 +9934,7 @@ function Ai(e, o) {
   return !1;
 }
 function Mi(e, o) {
-  const r = Q(e, !1, o === "fixed"), t = r.top + e.clientTop, i = r.left + e.clientLeft;
+  const r = oo(e, !1, o === "fixed"), t = r.top + e.clientTop, i = r.left + e.clientLeft;
   return {
     top: t,
     left: i,
@@ -9948,11 +9947,11 @@ function Mi(e, o) {
   };
 }
 function Sr(e, o, r) {
-  return o === "viewport" ? Yo(Ei(e, r)) : lo(o) ? Mi(o, r) : Yo(ji(D(e)));
+  return o === "viewport" ? Yo(Ei(e, r)) : lo(o) ? Mi(o, r) : Yo(ji(H(e)));
 }
 function Pi(e) {
   const o = st(e), t = ["absolute", "fixed"].includes(Co(e).position) && T(e) ? Ne(e) : e;
-  return lo(t) ? o.filter((i) => lo(i) && Ai(i, t) && B(i) !== "body") : [];
+  return lo(t) ? o.filter((i) => lo(i) && Ai(i, t) && Y(i) !== "body") : [];
 }
 function Ni(e) {
   let {
@@ -9978,7 +9977,7 @@ const Ui = {
   isElement: lo,
   getDimensions: _r,
   getOffsetParent: Ne,
-  getDocumentElement: D,
+  getDocumentElement: H,
   getElementRects: (e) => {
     let {
       reference: o,
@@ -10100,22 +10099,22 @@ ${JSON.stringify(
   }
   get _wrapperClasses() {
     return mr({
-      [V.base]: !0,
-      [V.tooltip]: this.tooltip,
-      [V.callout]: this.callout,
-      [V.popover]: this.popover
+      [Z.base]: !0,
+      [Z.tooltip]: this.tooltip,
+      [Z.callout]: this.callout,
+      [Z.popover]: this.popover
     });
   }
   get _arrowClasses() {
     return mr({
-      [V.arrowBase]: !0,
+      [Z.arrowBase]: !0,
       ["-top-8"]: this._arrowDirection === "top",
       ["-right-8"]: this._arrowDirection === "right",
       ["-bottom-8"]: this._arrowDirection === "bottom",
       ["-left-8"]: this._arrowDirection === "left",
-      [V.arrowTooltip]: this.tooltip,
-      [V.arrowCallout]: this.callout,
-      [V.arrowPopover]: this.popover
+      [Z.arrowTooltip]: this.tooltip,
+      [Z.arrowCallout]: this.callout,
+      [Z.arrowPopover]: this.popover
     });
   }
   get _arrowHtml() {
@@ -10991,12 +10990,12 @@ class Te extends y {
   }
   get _inputStyles() {
     return A({
-      [W.default]: !0,
-      [W.invalid]: this.invalid,
-      [W.disabled]: this.disabled,
-      [W.readOnly]: this.readOnly,
-      [W.suffix]: this._hasSuffix,
-      [W.prefix]: this._hasPrefix
+      [K.default]: !0,
+      [K.invalid]: this.invalid,
+      [K.disabled]: this.disabled,
+      [K.readOnly]: this.readOnly,
+      [K.suffix]: this._hasSuffix,
+      [K.prefix]: this._hasPrefix
     });
   }
   get _helpTextStyles() {
@@ -11045,7 +11044,7 @@ class Te extends y {
   render() {
     return p`
       ${this._label}
-      <div class="${W.wrapper}">
+      <div class="${K.wrapper}">
         <slot @slotchange="${this.prefixSlotChange}" name="prefix"></slot>
         <input
           class="${this._inputStyles}"
@@ -11930,7 +11929,7 @@ class Fe extends Go(y) {
     return p`<div
       class=${A({
       [this.contentClass || ""]: !0,
-      [ro.box + (this._hasTitle ? " pt-0" : "")]: this.box
+      [I.box + (this._hasTitle ? " pt-0" : "")]: this.box
     })}
     >
       <slot></slot>
@@ -11940,8 +11939,8 @@ class Fe extends Go(y) {
     return p` <div
       class=${A({
       "bg-aqua-50": this.info,
-      ["py-0 px-0 " + ro.box]: this.box,
-      [ro.bleed]: this.bleed
+      ["py-0 px-0 " + I.box]: this.box,
+      [I.bleed]: this.bleed
     })}
     >
       ${this._hasTitle ? p`<w-unstyled-heading level=${this.headingLevel}>
@@ -11951,7 +11950,7 @@ class Fe extends Go(y) {
               class=${A({
       [this.buttonClass || ""]: !0,
       [Vt + " hover:underline focus:underline"]: !0,
-      ["w-full text-left relative " + ro.box]: this.box,
+      ["w-full text-left relative " + I.box]: this.box,
       "hover:text-aqua-700 active:text-aqua-800": this.info
     })}
               @click=${() => this.expanded = !this.expanded}

package/package.json

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