@orangelogic/design-system 2.56.0 → 2.57.0-ci.2

package/library/chunks/{button.CiWlWCNb.js → button.kTTrlOjj.js}

@@ -1,28 +1,28 @@
-import { n as o, C as v, c as g } from "./custom-element.vnXBMQxc.js";
+import { n as r, C as v, c as g } from "./custom-element.vnXBMQxc.js";
 import { c as C } from "./component.styles.CI-v8BZa.js";
-import { F as x, v as w } from "./form.DycFDdkp.js";
-import { L as $ } from "./i18n.C3Z8Xe8q.js";
-import { H as O, g as S } from "./slot.DJLm4Dig.js";
+import { F as x, v as w } from "./form.D1R9s3Mf.js";
+import { L as $ } from "./i18n.DwnDne7p.js";
+import { H as S, g as O } from "./slot.DJLm4Dig.js";
 import { w as m } from "./watch.BCJD77bD.js";
-import { r as h } from "./state.Cw55xXlb.js";
-import { e as D } from "./query.BBf1UFkC.js";
-import { e as B } from "./class-map.CoZTSvbM.js";
-import { o as r } from "./if-defined.MfEgpxEN.js";
+import { r as u } from "./state.Cw55xXlb.js";
+import { e as L } from "./query.BBf1UFkC.js";
+import { e as D } from "./class-map.CoZTSvbM.js";
+import { o } from "./if-defined.MfEgpxEN.js";
 import { n as f } from "./when.Dr1es41R.js";
-import { i as b, u as c } from "./static.BjNkqt7_.js";
-import F from "../components/icon.js";
-import L from "../components/spinner.js";
+import { u as h, i as b } from "./static.BjNkqt7_.js";
+import B from "../components/icon.js";
+import F from "../components/spinner.js";
 import { b as _ } from "./button.styles.C8AIO8fd.js";
 var y = /* @__PURE__ */ ((t) => (t.Adaptive = "adaptive", t.Fill = "fill", t.Hug = "hug", t))(y || {}), l = /* @__PURE__ */ ((t) => (t.Custom = "custom", t.Large = "large", t.Medium = "medium", t.Small = "small", t.XLarge = "x-large", t))(l || {}), k = Object.defineProperty, V = Object.getOwnPropertyDescriptor, i = (t, s, p, n) => {
-  for (var a = n > 1 ? void 0 : n ? V(s, p) : s, u = t.length - 1, d; u >= 0; u--)
-    (d = t[u]) && (a = (n ? d(s, p, a) : d(a)) || a);
+  for (var a = n > 1 ? void 0 : n ? V(s, p) : s, d = t.length - 1, c; d >= 0; d--)
+    (c = t[d]) && (a = (n ? c(s, p, a) : c(a)) || a);
   return n && a && k(s, p, a), a;
 };
 let e = class extends v {
   constructor() {
     super(...arguments), this.formControlController = new x(this, {
       assumeInteractionOn: ["click"]
-    }), this.hasSlotController = new O(
+    }), this.hasSlotController = new S(
       this,
       "[default]",
       "prefix",
@@ -37,6 +37,15 @@ let e = class extends v {
   get validationMessage() {
     return this.isButton() ? this.button.validationMessage : "";
   }
+  get hasPrefix() {
+    return this.hasSlotController.test("prefix");
+  }
+  get hasSuffix() {
+    return this.hasSlotController.test("suffix");
+  }
+  get hasLabel() {
+    return this.hasSlotController.test("[default]");
+  }
   runFirstUpdated() {
     this.isButton() && this.formControlController.updateValidity();
   }
@@ -80,7 +89,7 @@ let e = class extends v {
     return this.link || this.href;
   }
   handleLabelSlotChange() {
-    this.mappedLabel = S(
+    this.mappedLabel = O(
       this.shadowRoot?.querySelector('slot[part="label"]')
     ).trim() || this.label || "";
   }
@@ -115,12 +124,17 @@ let e = class extends v {
   setCustomValidity(t) {
     this.isButton() && (this.button.setCustomValidity(t), this.formControlController.updateValidity());
   }
+  renderLabel() {
+    return h`
+      <slot part="label" class="button__label" @slotchange=${this.handleLabelSlotChange}></slot>
+    `;
+  }
   render() {
     const t = this.isLink() && !this.forceButtonNavigation, s = t ? b`a` : b`button`;
-    return c`
+    return h`
       <${s}
         part="base"
-        class=${B({
+        class=${D({
       button: !0,
       "button--caret": this.caret,
       "button--circle": this.circle,
@@ -130,9 +144,9 @@ let e = class extends v {
       "button--default": this.variant === "default" || this.variant === "neutral",
       "button--disabled": this.disabled,
       "button--focused": this.hasFocus || this.isParentDropdownOpened,
-      "button--has-label": this.hasSlotController.test("[default]"),
-      "button--has-prefix": this.hasSlotController.test("prefix"),
-      "button--has-suffix": this.hasSlotController.test("suffix"),
+      "button--has-label": this.hasLabel,
+      "button--has-prefix": this.hasPrefix,
+      "button--has-suffix": this.hasSuffix,
       "button--large": this.size === l.Large,
       "button--loading": this.loading,
       "button--medium": this.size === l.Medium,
@@ -148,18 +162,18 @@ let e = class extends v {
       "button--warning": this.variant === "warning",
       "button--x-large": this.size === l.XLarge
     })}
-        ?disabled=${r(t ? void 0 : this.disabled)}
-        type=${r(t ? void 0 : this.type)}
-        title=${r(this.title || void 0)}
-        name=${r(t ? void 0 : this.name)}
-        value=${r(t ? void 0 : this.value)}
-        href=${r(t ? this.link || this.href : void 0)}
-        target=${r(t ? this.target : void 0)}
-        download=${r(t ? this.download : void 0)}
-        rel=${r(t ? this.rel : void 0)}
-        role=${r(t ? void 0 : "button")}
+        ?disabled=${o(t ? void 0 : this.disabled)}
+        type=${o(t ? void 0 : this.type)}
+        title=${o(this.title || void 0)}
+        name=${o(t ? void 0 : this.name)}
+        value=${o(t ? void 0 : this.value)}
+        href=${o(t ? this.link || this.href : void 0)}
+        target=${o(t ? this.target : void 0)}
+        download=${o(t ? this.download : void 0)}
+        rel=${o(t ? this.rel : void 0)}
+        role=${o(t ? void 0 : "button")}
         aria-disabled=${this.disabled ? "true" : "false"}
-        aria-label=${r(this.mappedLabel || void 0)}
+        aria-label=${o(this.mappedLabel || void 0)}
         tabindex=${this.disabled ? "-1" : "0"}
         @blur=${this.handleBlur}
         @focus=${this.handleFocus}
@@ -167,11 +181,11 @@ let e = class extends v {
         @click=${this.handleClick}
       >
         <slot name="prefix" part="prefix" class="button__prefix"></slot>
-        <slot part="label" class="button__label" @slotchange=${this.handleLabelSlotChange}></slot>
+        ${this.renderLabel()}
         <slot name="suffix" part="suffix" class="button__suffix"></slot>
         ${f(
       this.caret,
-      () => c`
+      () => h`
             <cx-icon
               part="caret"
               class="button__caret"
@@ -179,108 +193,108 @@ let e = class extends v {
             ></cx-icon>
           `
     )}
-        ${f(this.loading, () => c`<cx-spinner part="spinner"></cx-spinner>`)}
+        ${f(this.loading, () => h`<cx-spinner part="spinner"></cx-spinner>`)}
       </${s}>
     `;
   }
 };
 e.styles = [C, _];
 e.dependencies = {
-  "cx-icon": F,
-  "cx-spinner": L
+  "cx-icon": B,
+  "cx-spinner": F
 };
 i([
-  D(".button")
+  L(".button")
 ], e.prototype, "button", 2);
 i([
-  h()
+  u()
 ], e.prototype, "hasFocus", 2);
 i([
-  h()
+  u()
 ], e.prototype, "invalid", 2);
 i([
-  h()
+  u()
 ], e.prototype, "isParentDropdownOpened", 2);
 i([
-  o()
+  r()
 ], e.prototype, "title", 2);
 i([
-  o({ reflect: !0 })
+  r({ reflect: !0 })
 ], e.prototype, "variant", 2);
 i([
-  o({ reflect: !0 })
+  r({ reflect: !0 })
 ], e.prototype, "size", 2);
 i([
-  o({ reflect: !0, type: Boolean })
+  r({ reflect: !0, type: Boolean })
 ], e.prototype, "caret", 2);
 i([
-  o({ attribute: "caret-direction", reflect: !0, type: String })
+  r({ attribute: "caret-direction", reflect: !0, type: String })
 ], e.prototype, "caretDirection", 2);
 i([
-  o({ reflect: !0, type: Boolean })
+  r({ reflect: !0, type: Boolean })
 ], e.prototype, "disabled", 2);
 i([
-  o({ reflect: !0, type: Boolean })
+  r({ reflect: !0, type: Boolean })
 ], e.prototype, "loading", 2);
 i([
-  o({ reflect: !0, type: Boolean })
+  r({ reflect: !0, type: Boolean })
 ], e.prototype, "outline", 2);
 i([
-  o({ reflect: !0, type: Boolean })
+  r({ reflect: !0, type: Boolean })
 ], e.prototype, "pill", 2);
 i([
-  o({ reflect: !0, type: Boolean })
+  r({ reflect: !0, type: Boolean })
 ], e.prototype, "circle", 2);
 i([
-  o()
+  r()
 ], e.prototype, "type", 2);
 i([
-  o()
+  r()
 ], e.prototype, "name", 2);
 i([
-  o()
+  r()
 ], e.prototype, "value", 2);
 i([
-  o()
+  r()
 ], e.prototype, "href", 2);
 i([
-  o()
+  r()
 ], e.prototype, "link", 2);
 i([
-  o()
+  r()
 ], e.prototype, "target", 2);
 i([
-  o()
+  r()
 ], e.prototype, "rel", 2);
 i([
-  o()
+  r()
 ], e.prototype, "download", 2);
 i([
-  o({ reflect: !1 })
+  r({ reflect: !1 })
 ], e.prototype, "form", 2);
 i([
-  o({ attribute: "formaction" })
+  r({ attribute: "formaction" })
 ], e.prototype, "formAction", 2);
 i([
-  o({ attribute: "formenctype" })
+  r({ attribute: "formenctype" })
 ], e.prototype, "formEnctype", 2);
 i([
-  o({ attribute: "formmethod" })
+  r({ attribute: "formmethod" })
 ], e.prototype, "formMethod", 2);
 i([
-  o({ attribute: "formnovalidate", type: Boolean })
+  r({ attribute: "formnovalidate", type: Boolean })
 ], e.prototype, "formNoValidate", 2);
 i([
-  o({ attribute: "formtarget" })
+  r({ attribute: "formtarget" })
 ], e.prototype, "formTarget", 2);
 i([
-  o({ attribute: "width-type", reflect: !0, type: String })
+  r({ attribute: "width-type", reflect: !0, type: String })
 ], e.prototype, "widthType", 2);
 i([
-  o({ reflect: !0, type: String })
+  r({ reflect: !0, type: String })
 ], e.prototype, "label", 2);
 i([
-  h()
+  u()
 ], e.prototype, "mappedLabel", 2);
 i([
   m("label")