@orangelogic/design-system 2.78.0 → 2.79.0-ci.2

package/library/components/position-picker.js

@@ -3,32 +3,12 @@ import p from "./grid-item.js";
 import m from "./radio.js";
 import x from "./radio-group.js";
 import { n as h, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as g } from "../chunks/component.styles.DMSLciL5.js";
+import { c as g } from "../chunks/component.styles.CRO4Odto.js";
 import { c as _ } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as f } from "../chunks/i18n.BUW7B9hr.js";
 import { i as v, x as C } from "../chunks/lit-element.jLBm65_O.js";
 var r = /* @__PURE__ */ ((e) => (e.BottomCenter = "bottom-center", e.BottomLeft = "bottom-left", e.BottomRight = "bottom-right", e.CenterCenter = "center-center", e.CenterLeft = "center-left", e.CenterRight = "center-right", e.TopCenter = "top-center", e.TopLeft = "top-left", e.TopRight = "top-right", e))(r || {});
-const b = v`
-  .position-picker__column {
-    width: fit-content;
-  }
-
-  .position-picker__column::part(base) {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cx-spacing-x-small);
-  }
-
-  .position-picker__radio {
-    --checked-color: var(--cx-color-neutral-0);
-    --checked-border-color: var(--cx-color-neutral-0);
-    --checked-background-color: var(--cx-color-primary);
-    --checked-hover-border-color: var(--cx-color-neutral-0);
-    --checked-hover-background-color: var(--cx-color-primary);
-  }
-`;
+const b = v`.position-picker__column{width:fit-content}.position-picker__column::part(base){justify-content:center;align-items:center;gap:var(--cx-spacing-x-small);flex-direction:column;display:flex}.position-picker__radio{--checked-color:var(--cx-color-neutral-0);--checked-border-color:var(--cx-color-neutral-0);--checked-background-color:var(--cx-color-primary);--checked-hover-border-color:var(--cx-color-neutral-0);--checked-hover-background-color:var(--cx-color-primary)}`;
 var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, n = (e, t, a, c) => {
   for (var o = c > 1 ? void 0 : c ? $(t, a) : t, l = e.length - 1, s; l >= 0; l--)
     (s = e[l]) && (o = (c ? s(t, a, o) : s(o)) || o);
@@ -43,77 +23,7 @@ let i = class extends u {
     this.value = t.value;
   }
   render() {
-    return C`<div class="position-picker">
-      <cx-radio-group
-        value=${this.value}
-        name="position"
-        .form=${this.closest("form")}
-        @cx-change=${this.handleChange}
-      >
-        <cx-grid columns="3" spacing="var(--cx-spacing-small)">
-          <cx-grid-item xs="1" class="position-picker__column">
-            <cx-radio
-              class="position-picker__radio"
-              value=${r.TopLeft}
-              checked-icon-radius="3"
-              aria-label=${this.localize.term("topLeft")}
-            ></cx-radio>
-            <cx-radio
-              class="position-picker__radio"
-              value=${r.CenterLeft}
-              checked-icon-radius="3"
-              aria-label=${this.localize.term("centerLeft")}
-            ></cx-radio>
-            <cx-radio
-              class="position-picker__radio"
-              value=${r.BottomLeft}
-              checked-icon-radius="3"
-              aria-label=${this.localize.term("bottomLeft")}
-            ></cx-radio>
-          </cx-grid-item>
-          <cx-grid-item xs="1" class="position-picker__column">
-            <cx-radio
-              class="position-picker__radio"
-              value=${r.TopCenter}
-              checked-icon-radius="3"
-              aria-label=${this.localize.term("topCenter")}
-            ></cx-radio>
-            <cx-radio
-              class="position-picker__radio"
-              value=${r.CenterCenter}
-              checked-icon-radius="3"
-              aria-label=${this.localize.term("centerCenter")}
-            ></cx-radio>
-            <cx-radio
-              class="position-picker__radio"
-              value=${r.BottomCenter}
-              checked-icon-radius="3"
-              aria-label=${this.localize.term("bottomCenter")}
-            ></cx-radio>
-          </cx-grid-item>
-          <cx-grid-item xs="1" class="position-picker__column">
-            <cx-radio
-              class="position-picker__radio"
-              value=${r.TopRight}
-              checked-icon-radius="3"
-              aria-label=${this.localize.term("topRight")}
-            ></cx-radio>
-            <cx-radio
-              class="position-picker__radio"
-              value=${r.CenterRight}
-              checked-icon-radius="3"
-              aria-label=${this.localize.term("centerRight")}
-            ></cx-radio>
-            <cx-radio
-              class="position-picker__radio"
-              value=${r.BottomRight}
-              checked-icon-radius="3"
-              aria-label=${this.localize.term("bottomRight")}
-            ></cx-radio>
-          </cx-grid-item>
-        </cx-grid>
-      </cx-radio-group>
-    </div>`;
+    return C`<div class="position-picker"><cx-radio-group value=${this.value} name="position" .form=${this.closest("form")} @cx-change=${this.handleChange}><cx-grid columns="3" spacing="var(--cx-spacing-small)"><cx-grid-item xs="1" class="position-picker__column"><cx-radio class="position-picker__radio" value=${r.TopLeft} checked-icon-radius="3" aria-label=${this.localize.term("topLeft")}></cx-radio><cx-radio class="position-picker__radio" value=${r.CenterLeft} checked-icon-radius="3" aria-label=${this.localize.term("centerLeft")}></cx-radio><cx-radio class="position-picker__radio" value=${r.BottomLeft} checked-icon-radius="3" aria-label=${this.localize.term("bottomLeft")}></cx-radio></cx-grid-item><cx-grid-item xs="1" class="position-picker__column"><cx-radio class="position-picker__radio" value=${r.TopCenter} checked-icon-radius="3" aria-label=${this.localize.term("topCenter")}></cx-radio><cx-radio class="position-picker__radio" value=${r.CenterCenter} checked-icon-radius="3" aria-label=${this.localize.term("centerCenter")}></cx-radio><cx-radio class="position-picker__radio" value=${r.BottomCenter} checked-icon-radius="3" aria-label=${this.localize.term("bottomCenter")}></cx-radio></cx-grid-item><cx-grid-item xs="1" class="position-picker__column"><cx-radio class="position-picker__radio" value=${r.TopRight} checked-icon-radius="3" aria-label=${this.localize.term("topRight")}></cx-radio><cx-radio class="position-picker__radio" value=${r.CenterRight} checked-icon-radius="3" aria-label=${this.localize.term("centerRight")}></cx-radio><cx-radio class="position-picker__radio" value=${r.BottomRight} checked-icon-radius="3" aria-label=${this.localize.term("bottomRight")}></cx-radio></cx-grid-item></cx-grid></cx-radio-group></div>`;
   }
 };
 i.styles = [g, b];

package/library/components/progress-bar.js

@@ -1,162 +1,45 @@
 import { n as i, C as d } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as m } from "../chunks/component.styles.DMSLciL5.js";
-import { c as h } from "../chunks/custom-element.L4WJXn1j.js";
+import { c as h } from "../chunks/component.styles.CRO4Odto.js";
+import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as b } from "../chunks/i18n.BUW7B9hr.js";
 import { i as g, x as c } from "../chunks/lit-element.jLBm65_O.js";
 import { e as u } from "../chunks/class-map.BiVq-cVR.js";
 import { o as v } from "../chunks/if-defined.BRoBj_Rp.js";
 import { o as f } from "../chunks/style-map.llVFPd__.js";
-const w = g`
-  :host {
-    --height: 1rem;
-    --track-color: var(--cx-color-neutral-200);
-    --indicator-color: var(--cx-color-primary);
-    --label-color: var(--cx-color-neutral);
-    --indicator-label-color: var(--cx-color-neutral-0);
-
-    display: block;
-  }
-
-  .progress-bar-label {
-    align-items: center;
-    color: var(--label-color);
-    display: flex;
-    font-size: var(--cx-font-size-small);
-    font-weight: var(--cx-font-weight-medium);
-    justify-content: space-between;
-  }
-
-  .progress-bar {
-    position: relative;
-    background-color: var(--track-color);
-    height: var(--height);
-    border-radius: var(--cx-border-radius-pill);
-    box-shadow: inset var(--cx-shadow-small);
-    overflow: hidden;
-  }
-
-  .progress-bar__indicator {
-    height: 100%;
-    font-family: var(--cx-font-sans);
-    font-size: 12px;
-    font-weight: var(--cx-font-weight-regular);
-    background-color: var(--indicator-color);
-    color: var(--indicator-label-color);
-    text-align: center;
-    line-height: var(--height);
-    white-space: nowrap;
-    overflow: hidden;
-    transition:
-      400ms width,
-      400ms background-color;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  /* Indeterminate */
-  .progress-bar--indeterminate .progress-bar__indicator {
-    position: absolute;
-    animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
-  }
-
-  .progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
-    animation-name: indeterminate-rtl;
-  }
-
-  @media (forced-colors: active) {
-    .progress-bar {
-      outline: solid 1px SelectedItem;
-      background-color: var(--cx-color-neutral-0);
-    }
-
-    .progress-bar__indicator {
-      outline: solid 1px SelectedItem;
-      background-color: SelectedItem;
-    }
-  }
-
-  @keyframes indeterminate {
-    0% {
-      left: -50%;
-      width: 50%;
-    }
-    75%,
-    100% {
-      left: 100%;
-      width: 50%;
-    }
-  }
-
-  @keyframes indeterminate-rtl {
-    0% {
-      right: -50%;
-      width: 50%;
-    }
-    75%,
-    100% {
-      right: 100%;
-      width: 50%;
-    }
-  }
-`;
+const w = g`:host{--height:1rem;--track-color:var(--cx-color-neutral-200);--indicator-color:var(--cx-color-primary);--label-color:var(--cx-color-neutral);--indicator-label-color:var(--cx-color-neutral-0);display:block}.progress-bar-label{color:var(--label-color);font-size:var(--cx-font-size-small);font-weight:var(--cx-font-weight-medium);justify-content:space-between;align-items:center;display:flex}.progress-bar{background-color:var(--track-color);height:var(--height);border-radius:var(--cx-border-radius-pill);box-shadow:inset var(--cx-shadow-small);position:relative;overflow:hidden}.progress-bar__indicator{height:100%;font-family:var(--cx-font-sans);font-size:12px;font-weight:var(--cx-font-weight-regular);background-color:var(--indicator-color);color:var(--indicator-label-color);text-align:center;line-height:var(--height);white-space:nowrap;-webkit-user-select:none;user-select:none;transition:width .4s,background-color .4s;overflow:hidden}.progress-bar--indeterminate .progress-bar__indicator{animation:2.5s cubic-bezier(.37,0,.63,1) infinite indeterminate;position:absolute}.progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator{animation-name:indeterminate-rtl}@media (forced-colors:active){.progress-bar{background-color:var(--cx-color-neutral-0);outline:1px solid selecteditem}.progress-bar__indicator{background-color:selecteditem;outline:1px solid selecteditem}}@keyframes indeterminate{0%{width:50%;left:-50%}75%,to{width:50%;left:100%}}@keyframes indeterminate-rtl{0%{width:50%;right:-50%}75%,to{width:50%;right:100%}}`;
 var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (p, o, s, a) => {
-  for (var e = a > 1 ? void 0 : a ? y(o, s) : o, l = p.length - 1, n; l >= 0; l--)
-    (n = p[l]) && (e = (a ? n(o, s, e) : n(e)) || e);
-  return a && e && x(o, s, e), e;
+  for (var r = a > 1 ? void 0 : a ? y(o, s) : o, l = p.length - 1, n; l >= 0; l--)
+    (n = p[l]) && (r = (a ? n(o, s, r) : n(r)) || r);
+  return a && r && x(o, s, r), r;
 };
-let r = class extends d {
+let e = class extends d {
   constructor() {
     super(...arguments), this.localize = new b(this), this.value = 0, this.indeterminate = !1, this.label = "", this.showProgress = "";
   }
   render() {
-    return c`
-      <div part="container" class="container">
-        <div part="label" class="progress-bar-label">
-          <slot name="label"><span>${this.label}</span></slot>
-          ${this.showProgress ? c`<span>${this.value || 0}%</span>` : ""}
-        </div>
-        <div
-          part="base"
-          class=${u({
+    return c`<div part="container" class="container"><div part="label" class="progress-bar-label"><slot name="label"><span>${this.label}</span></slot>${this.showProgress ? c`<span>${this.value || 0}%</span>` : ""}</div><div part="base" class=${u({
       "progress-bar": !0,
       "progress-bar--indeterminate": this.indeterminate,
       "progress-bar--rtl": this.localize.dir() === "rtl"
-    })}
-          role="progressbar"
-          title=${v(this.title)}
-          aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
-          aria-valuemin="0"
-          aria-valuemax="100"
-          aria-valuenow=${this.indeterminate ? 0 : this.value}
-        >
-          <div
-            part="indicator"
-            class="progress-bar__indicator"
-            style=${f({ width: `${this.value || 0}%` })}
-          >
-            ${this.indeterminate ? "" : c` <slot part="label" class="progress-bar__label"></slot> `}
-          </div>
-        </div>
-      </div>
-    `;
+    })} role="progressbar" title=${v(this.title)} aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")} aria-valuemin="0" aria-valuemax="100" aria-valuenow=${this.indeterminate ? 0 : this.value}><div part="indicator" class="progress-bar__indicator" style=${f({ width: `${this.value || 0}%` })}>${this.indeterminate ? "" : c`<slot part="label" class="progress-bar__label"></slot>`}</div></div></div>`;
   }
 };
-r.styles = [m, w];
+e.styles = [h, w];
 t([
   i({ reflect: !0, type: Number })
-], r.prototype, "value", 2);
+], e.prototype, "value", 2);
 t([
   i({ reflect: !0, type: Boolean })
-], r.prototype, "indeterminate", 2);
+], e.prototype, "indeterminate", 2);
 t([
   i({ reflect: !0, type: String })
-], r.prototype, "label", 2);
+], e.prototype, "label", 2);
 t([
   i({ attribute: "show-progress", reflect: !0, type: Boolean })
-], r.prototype, "showProgress", 2);
-r = t([
-  h("cx-progress-bar")
-], r);
+], e.prototype, "showProgress", 2);
+e = t([
+  m("cx-progress-bar")
+], e);
 export {
-  r as default
+  e as default
 };

package/library/components/progress-ring.js

@@ -1,80 +1,11 @@
 import { n as l, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as d } from "../chunks/component.styles.DMSLciL5.js";
+import { c as d } from "../chunks/component.styles.CRO4Odto.js";
 import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as u } from "../chunks/i18n.BUW7B9hr.js";
 import { i as f, x as v } from "../chunks/lit-element.jLBm65_O.js";
 import { r as m } from "../chunks/state.CSDxrqLd.js";
 import { e as h } from "../chunks/query.BBf1UFkC.js";
-const _ = f`
-  :host {
-    --size: 128px;
-    --track-width: 4px;
-    --track-color: var(--cx-color-neutral-200);
-    --indicator-width: var(--track-width);
-    --indicator-color: var(--cx-color-primary);
-    --indicator-transition-duration: 0.35s;
-
-    display: inline-flex;
-  }
-
-  .progress-ring {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-  }
-
-  .progress-ring__image {
-    width: var(--size);
-    height: var(--size);
-    rotate: -90deg;
-    transform-origin: 50% 50%;
-  }
-
-  .progress-ring__track,
-  .progress-ring__indicator {
-    --radius: calc(
-      var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5
-    );
-    --circumference: calc(var(--radius) * 2 * 3.141592654);
-
-    fill: none;
-    r: var(--radius);
-    cx: calc(var(--size) / 2);
-    cy: calc(var(--size) / 2);
-  }
-
-  .progress-ring__track {
-    stroke: var(--track-color);
-    stroke-width: var(--track-width);
-  }
-
-  .progress-ring__indicator {
-    stroke: var(--indicator-color);
-    stroke-width: var(--indicator-width);
-    stroke-linecap: round;
-    transition-property: stroke-dashoffset;
-    transition-duration: var(--indicator-transition-duration);
-    stroke-dasharray: var(--circumference) var(--circumference);
-    stroke-dashoffset: calc(
-      var(--circumference) - var(--percentage) * var(--circumference)
-    );
-  }
-
-  .progress-ring__label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-`;
+const _ = f`:host{--size:128px;--track-width:4px;--track-color:var(--cx-color-neutral-200);--indicator-width:var(--track-width);--indicator-color:var(--cx-color-primary);--indicator-transition-duration:.35s;display:inline-flex}.progress-ring{justify-content:center;align-items:center;display:inline-flex;position:relative}.progress-ring__image{width:var(--size);height:var(--size);transform-origin:50%;rotate:-90deg}.progress-ring__track,.progress-ring__indicator{--radius:calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * .5);--circumference:calc(var(--radius) * 2 * 3.14159);fill:none;r:var(--radius);cx:calc(var(--size) / 2);cy:calc(var(--size) / 2)}.progress-ring__track{stroke:var(--track-color);stroke-width:var(--track-width)}.progress-ring__indicator{stroke:var(--indicator-color);stroke-width:var(--indicator-width);stroke-linecap:round;transition-property:stroke-dashoffset;transition-duration:var(--indicator-transition-duration);stroke-dasharray:var(--circumference) var(--circumference);stroke-dashoffset:calc(var(--circumference) - var(--percentage) * var(--circumference))}.progress-ring__label{text-align:center;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}`;
 var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (s, t, i, a) => {
   for (var r = a > 1 ? void 0 : a ? b(t, i) : t, c = s.length - 1, n; c >= 0; c--)
     (n = s[c]) && (r = (a ? n(t, i, r) : n(r)) || r);
@@ -93,29 +24,7 @@ let e = class extends p {
     }
   }
   render() {
-    return v`
-      <div
-        part="base"
-        class="progress-ring"
-        role="progressbar"
-        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
-        aria-describedby="label"
-        aria-valuemin="0"
-        aria-valuemax="100"
-        aria-valuenow=${this.value}
-        style="--percentage: ${this.value / 100}"
-      >
-        <svg class="progress-ring__image">
-          <circle class="progress-ring__track"></circle>
-          <circle
-            class="progress-ring__indicator"
-            style="stroke-dashoffset: ${this.indicatorOffset}"
-          ></circle>
-        </svg>
-
-        <slot id="label" part="label" class="progress-ring__label"></slot>
-      </div>
-    `;
+    return v`<div part="base" class="progress-ring" role="progressbar" aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")} aria-describedby="label" aria-valuemin="0" aria-valuemax="100" aria-valuenow=${this.value} style="--percentage: ${this.value / 100}"><svg class="progress-ring__image"><circle class="progress-ring__track"></circle><circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle></svg><slot id="label" part="label" class="progress-ring__label"></slot></div>`;
   }
 };
 e.styles = [d, _];

package/library/components/qr-code.js

@@ -1,5 +1,5 @@
 import { n as Q, C as R } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as $ } from "../chunks/component.styles.DMSLciL5.js";
+import { c as $ } from "../chunks/component.styles.CRO4Odto.js";
 import { c as B } from "../chunks/custom-element.L4WJXn1j.js";
 import { w as V } from "../chunks/watch.BCJD77bD.js";
 import { i as J, x as U } from "../chunks/lit-element.jLBm65_O.js";
@@ -530,11 +530,7 @@ self.QrCreator = N;
   }();
   return O;
 }());
-const D = QrCreator, F = J`
-  :host {
-    display: inline-block;
-  }
-`;
+const D = QrCreator, F = J`:host{display:inline-block}`;
 var W = Object.defineProperty, X = Object.getOwnPropertyDescriptor, L = (P, T, O, g) => {
   for (var d = g > 1 ? void 0 : g ? X(T, O) : T, w = P.length - 1, A; w >= 0; w--)
     (A = P[w]) && (d = (g ? A(T, O, d) : A(d)) || d);
@@ -562,18 +558,10 @@ let m = class extends R {
     );
   }
   render() {
-    return U`
-      <canvas
-        part="base"
-        class="qr-code"
-        role="img"
-        aria-label=${this.label?.length > 0 ? this.label : this.value}
-        style=${K({
+    return U`<canvas part="base" class="qr-code" role="img" aria-label=${this.label?.length > 0 ? this.label : this.value} style=${K({
       height: `${this.size}px`,
       width: `${this.size}px`
-    })}
-      ></canvas>
-    `;
+    })}></canvas>`;
   }
 };
 m.styles = [$, F];

package/library/components/radio-button.js

@@ -1,5 +1,5 @@
 import { n as i, C as d } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c } from "../chunks/component.styles.DMSLciL5.js";
+import { c } from "../chunks/component.styles.CRO4Odto.js";
 import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
 import { H as f } from "../chunks/slot.j5oheLJC.js";
 import { w as m } from "../chunks/watch.BCJD77bD.js";
@@ -9,7 +9,7 @@ import { e as y } from "../chunks/class-map.BiVq-cVR.js";
 import { o as h } from "../chunks/if-defined.BRoBj_Rp.js";
 import { u as _ } from "../chunks/static.UA3G1Deq.js";
 import { i as C } from "../chunks/lit-element.jLBm65_O.js";
-import { b as v } from "../chunks/button.styles.Dl5IQLHU.js";
+import { b as v } from "../chunks/button.styles.CKqn956w.js";
 const w = C`
   ${v}
 
@@ -77,14 +77,7 @@ let t = class extends d {
     this.input.blur();
   }
   render() {
-    return _`
-      <div part="base" role="presentation">
-        <button
-          part=${`button${this.checked ? " button--checked" : ""}`}
-          role="radio"
-          aria-checked=${this.checked}
-          aria-label=${h(this.label || void 0)}
-          class=${y({
+    return _`<div part="base" role="presentation"><button part=${`button${this.checked ? " button--checked" : ""}`} role="radio" aria-checked=${this.checked} aria-label=${h(this.label || void 0)} class=${y({
       button: !0,
       "button--checked": this.checked,
       "button--default": !0,
@@ -98,20 +91,7 @@ let t = class extends d {
       "button--outline": !0,
       "button--pill": this.pill,
       "button--small": this.size === "small"
-    })}
-          aria-disabled=${this.disabled}
-          type="button"
-          value=${h(this.value)}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-          @click=${this.handleClick}
-        >
-          <slot name="prefix" part="prefix" class="button__prefix"></slot>
-          <slot part="label" class="button__label"></slot>
-          <slot name="suffix" part="suffix" class="button__suffix"></slot>
-        </button>
-      </div>
-    `;
+    })} aria-disabled=${this.disabled} type="button" value=${h(this.value)} @blur=${this.handleBlur} @focus=${this.handleFocus} @click=${this.handleClick}><slot name="prefix" part="prefix" class="button__prefix"></slot><slot part="label" class="button__label"></slot><slot name="suffix" part="suffix" class="button__suffix"></slot></button></div>`;
   }
 };
 t.styles = [c, w];