@orangelogic/design-system 2.0.0-29DUO2-beta-2 → 2.0.0-29IORR-beta-1

package/library/components/spinner.js

@@ -1,70 +1,11 @@
 import { C as c } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as l } from "../chunks/component.styles.DMSLciL5.js";
+import { c as l } from "../chunks/component.styles.CRO4Odto.js";
 import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as p } from "../chunks/i18n.C0iakJkV.js";
+import { L as p } from "../chunks/i18n.BFqTRDCA.js";
 import { i as d, x as h } from "../chunks/lit-element.jLBm65_O.js";
-const f = d`
-  :host {
-    --track-width: 2px;
-    --track-color: rgb(128 128 128 / 25%);
-    --indicator-color: var(--cx-color-primary);
-    --speed: 2s;
-
-    display: inline-flex;
-    width: 1em;
-    height: 1em;
-    max-width: 1em;
-    max-height: 1em;
-    flex: none;
-  }
-
-  .spinner {
-    flex: 1 1 auto;
-    height: 1em;
-    width: 1em;
-  }
-
-  .spinner__track,
-  .spinner__indicator {
-    fill: none;
-    stroke-width: var(--track-width);
-    r: calc(0.5em - var(--track-width) / 2);
-    cx: calc(0.5em);
-    cy: calc(0.5em);
-    transform-origin: calc(0.5em) calc(0.5em);
-  }
-
-  .spinner__track {
-    stroke: var(--track-color);
-    transform-origin: 0% 0%;
-  }
-
-  .spinner__indicator {
-    stroke: var(--indicator-color);
-    stroke-linecap: round;
-    stroke-dasharray: 150% 75%;
-    animation: spin var(--speed) linear infinite;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-      stroke-dasharray: 0.05em, 3em;
-    }
-
-    50% {
-      transform: rotate(450deg);
-      stroke-dasharray: 1.375em, 1.375em;
-    }
-
-    100% {
-      transform: rotate(1080deg);
-      stroke-dasharray: 0.05em, 3em;
-    }
-  }
-`;
-var g = Object.getOwnPropertyDescriptor, k = (a, s, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? g(s, n) : s, e = a.length - 1, i; e >= 0; e--)
+const f = d`:host{--track-width:2px;--track-color:#80808040;--indicator-color:var(--cx-color-primary);--speed:2s;flex:none;width:1em;max-width:1em;height:1em;max-height:1em;display:inline-flex}.spinner{flex:auto;width:1em;height:1em}.spinner__track,.spinner__indicator{fill:none;stroke-width:var(--track-width);r:calc(.5em - var(--track-width) / 2);cx:calc(.5em);cy:calc(.5em);transform-origin:.5em .5em}.spinner__track{stroke:var(--track-color);transform-origin:0 0}.spinner__indicator{stroke:var(--indicator-color);stroke-linecap:round;stroke-dasharray:150% 75%;animation:spin var(--speed) linear infinite}@keyframes spin{0%{stroke-dasharray:.05em 3em;transform:rotate(0)}50%{stroke-dasharray:1.375em 1.375em;transform:rotate(450deg)}to{stroke-dasharray:.05em 3em;transform:rotate(1080deg)}}`;
+var k = Object.getOwnPropertyDescriptor, _ = (a, s, n, o) => {
+  for (var r = o > 1 ? void 0 : o ? k(s, n) : s, e = a.length - 1, i; e >= 0; e--)
     (i = a[e]) && (r = i(r) || r);
   return r;
 };
@@ -73,21 +14,11 @@ let t = class extends c {
     super(...arguments), this.localize = new p(this);
   }
   render() {
-    return h`
-      <svg
-        part="base"
-        class="spinner"
-        role="progressbar"
-        aria-label=${this.localize.term("loading")}
-      >
-        <circle class="spinner__track"></circle>
-        <circle class="spinner__indicator"></circle>
-      </svg>
-    `;
+    return h`<svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term("loading")}><circle class="spinner__track"></circle><circle class="spinner__indicator"></circle></svg>`;
   }
 };
 t.styles = [l, f];
-t = k([
+t = _([
   m("cx-spinner")
 ], t);
 export {

package/library/components/split-panel.js

@@ -1,104 +1,17 @@
-import { n, C as v } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as m } from "../chunks/component.styles.DMSLciL5.js";
+import { n as l, C as v } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as m } from "../chunks/component.styles.CRO4Odto.js";
 import { c as u } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as g } from "../chunks/drag.DXEXVXPv.js";
-import { L as f } from "../chunks/i18n.C0iakJkV.js";
+import { L as f } from "../chunks/i18n.BFqTRDCA.js";
 import { c as p } from "../chunks/math.DqTA6ya4.js";
-import { w as c } from "../chunks/watch.q1sEjPWL.js";
+import { w as c } from "../chunks/watch.BCJD77bD.js";
 import { i as y, x } from "../chunks/lit-element.jLBm65_O.js";
 import { e as b } from "../chunks/query.BBf1UFkC.js";
 import { o as w } from "../chunks/if-defined.BRoBj_Rp.js";
-const P = y`
-  :host {
-    --divider-color: var(--cx-panel-border-color);
-    --divider-color-hover: var(--cx-color-neutral-300);
-    --divider-color-dragging: var(--cx-color-primary-500);
-    --divider-color-focus: var(--cx-color-primary);
-    --divider-width: 3px;
-    --divider-hit-area: 12px;
-    --min: 0%;
-    --max: 100%;
-
-    display: grid;
-  }
-
-  .start,
-  .end {
-    overflow: hidden;
-  }
-
-  .divider {
-    flex: 0 0 var(--divider-width);
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--divider-color);
-    color: var(--cx-color-neutral-900);
-    z-index: 1;
-  }
-
-  .divider:focus {
-    outline: none;
-  }
-
-  .divider:hover {
-    background-color: var(--divider-color-hover);
-  }
-
-  .divider.dragging {
-    background-color: var(--divider-color-dragging);
-  }
-
-  :host(:not([disabled])) .divider:focus-visible {
-    background-color: var(--divider-color-focus);
-    color: var(--cx-color-neutral-0);
-  }
-
-  :host([disabled]) .divider {
-    cursor: default;
-  }
-
-  /* Horizontal */
-  :host(:not([vertical], [disabled])) .divider {
-    cursor: col-resize;
-  }
-
-  :host(:not([vertical])) .divider::after {
-    display: flex;
-    content: '';
-    position: absolute;
-    height: 100%;
-    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
-    width: var(--divider-hit-area);
-  }
-
-  /* Vertical */
-  :host([vertical]) {
-    flex-direction: column;
-  }
-
-  :host([vertical]:not([disabled])) .divider {
-    cursor: row-resize;
-  }
-
-  :host([vertical]) .divider::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
-    height: var(--divider-hit-area);
-  }
-
-  @media (forced-colors: active) {
-    .divider {
-      outline: solid 1px transparent;
-    }
-  }
-`;
+const P = y`:host{--divider-color:var(--cx-panel-border-color);--divider-color-hover:var(--cx-color-neutral-300);--divider-color-dragging:var(--cx-color-primary-500);--divider-color-focus:var(--cx-color-primary);--divider-width:3px;--divider-hit-area:12px;--min:0%;--max:100%;display:grid}.start,.end{overflow:hidden}.divider{flex:0 0 var(--divider-width);background-color:var(--divider-color);color:var(--cx-color-neutral-900);z-index:1;justify-content:center;align-items:center;display:flex;position:relative}.divider:focus{outline:none}.divider:hover{background-color:var(--divider-color-hover)}.divider.dragging{background-color:var(--divider-color-dragging)}:host(:not([disabled])) .divider:focus-visible{background-color:var(--divider-color-focus);color:var(--cx-color-neutral-0)}:host([disabled]) .divider{cursor:default}:host(:not([vertical],[disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider:after{content:"";height:100%;left:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);width:var(--divider-hit-area);display:flex;position:absolute}:host([vertical]){flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider:after{content:"";width:100%;top:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);height:var(--divider-hit-area);position:absolute}@media (forced-colors:active){.divider{outline:1px solid #0000}}`;
 var z = Object.defineProperty, C = Object.getOwnPropertyDescriptor, s = (i, t, o, a) => {
-  for (var e = a > 1 ? void 0 : a ? C(t, o) : t, h = i.length - 1, l; h >= 0; h--)
-    (l = i[h]) && (e = (a ? l(t, o, e) : l(e)) || e);
+  for (var e = a > 1 ? void 0 : a ? C(t, o) : t, h = i.length - 1, n; h >= 0; h--)
+    (n = i[h]) && (e = (a ? n(t, o, e) : n(e)) || e);
   return a && e && z(t, o, e), e;
 };
 let r = class extends v {
@@ -132,9 +45,9 @@ let r = class extends v {
       initialEvent: i,
       onMove: (o, a) => {
         let e = this.vertical ? a : o;
-        this.primary === "end" && (e = this.size - e), this.snap && this.snap.split(" ").forEach((l) => {
+        this.primary === "end" && (e = this.size - e), this.snap && this.snap.split(" ").forEach((n) => {
           let d;
-          l.endsWith("%") ? d = this.size * (parseFloat(l) / 100) : d = parseFloat(l), t && !this.vertical && (d = this.size - d), e >= d - this.snapThreshold && e <= d + this.snapThreshold && (e = d);
+          n.endsWith("%") ? d = this.size * (parseFloat(n) / 100) : d = parseFloat(n), t && !this.vertical && (d = this.size - d), e >= d - this.snapThreshold && e <= d + this.snapThreshold && (e = d);
         }), this.position = p(
           this.pixelsToPercentage(e),
           0,
@@ -193,27 +106,7 @@ let r = class extends v {
         calc(100% - var(--divider-width))
       )
     `, e = "auto";
-    return this.primary === "end" ? o && !this.vertical ? this.style[i] = `${a} var(--divider-width) ${e}` : this.style[i] = `${e} var(--divider-width) ${a}` : o && !this.vertical ? this.style[i] = `${e} var(--divider-width) ${a}` : this.style[i] = `${a} var(--divider-width) ${e}`, this.style[t] = "", x`
-      <slot name="start" part="panel start" class="start"></slot>
-
-      <div
-        part="divider"
-        class="divider ${this.state === "dragging" ? "dragging" : ""}"
-        tabindex=${w(this.disabled ? void 0 : "0")}
-        role="separator"
-        aria-valuenow=${this.position}
-        aria-valuemin="0"
-        aria-valuemax="100"
-        aria-label=${this.localize.term("resize")}
-        @keydown=${this.handleKeyDown}
-        @mousedown=${this.handleDrag}
-        @touchstart=${this.handleDrag}
-      >
-        <slot name="divider"></slot>
-      </div>
-
-      <slot name="end" part="panel end" class="end"></slot>
-    `;
+    return this.primary === "end" ? o && !this.vertical ? this.style[i] = `${a} var(--divider-width) ${e}` : this.style[i] = `${e} var(--divider-width) ${a}` : o && !this.vertical ? this.style[i] = `${e} var(--divider-width) ${a}` : this.style[i] = `${a} var(--divider-width) ${e}`, this.style[t] = "", x`<slot name="start" part="panel start" class="start"></slot><div part="divider" class="divider ${this.state === "dragging" ? "dragging" : ""}" tabindex=${w(this.disabled ? void 0 : "0")} role="separator" aria-valuenow=${this.position} aria-valuemin="0" aria-valuemax="100" aria-label=${this.localize.term("resize")} @keydown=${this.handleKeyDown} @mousedown=${this.handleDrag} @touchstart=${this.handleDrag}><slot name="divider"></slot></div><slot name="end" part="panel end" class="end"></slot>`;
   }
 };
 r.styles = [m, P];
@@ -221,28 +114,28 @@ s([
   b(".divider")
 ], r.prototype, "divider", 2);
 s([
-  n({ reflect: !0, type: Number })
+  l({ reflect: !0, type: Number })
 ], r.prototype, "position", 2);
 s([
-  n({ attribute: "position-in-pixels", type: Number })
+  l({ attribute: "position-in-pixels", type: Number })
 ], r.prototype, "positionInPixels", 2);
 s([
-  n({ reflect: !0, type: Boolean })
+  l({ reflect: !0, type: Boolean })
 ], r.prototype, "vertical", 2);
 s([
-  n({ reflect: !0, type: Boolean })
+  l({ reflect: !0, type: Boolean })
 ], r.prototype, "disabled", 2);
 s([
-  n()
+  l()
 ], r.prototype, "primary", 2);
 s([
-  n()
+  l()
 ], r.prototype, "state", 2);
 s([
-  n()
+  l()
 ], r.prototype, "snap", 2);
 s([
-  n({ attribute: "snap-threshold", type: Number })
+  l({ attribute: "snap-threshold", type: Number })
 ], r.prototype, "snapThreshold", 2);
 s([
   c("position")

package/library/components/step.js

@@ -1,232 +1,20 @@
 import { n as r, C as _ } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as x } from "../chunks/component.styles.DMSLciL5.js";
-import { c as u } from "../chunks/custom-element.L4WJXn1j.js";
-import { i as m, x as o } from "../chunks/lit-element.jLBm65_O.js";
+import { c as x } from "../chunks/component.styles.CRO4Odto.js";
+import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
+import { i as u, x as o } from "../chunks/lit-element.jLBm65_O.js";
 import { e as h } from "../chunks/query.BBf1UFkC.js";
 import { e as v } from "../chunks/class-map.BiVq-cVR.js";
-import { o as f } from "../chunks/style-map.llVFPd__.js";
-import { n as l } from "../chunks/when.Dr1es41R.js";
-import g from "./icon.js";
+import { o as g } from "../chunks/style-map.llVFPd__.js";
+import { n as c } from "../chunks/when.Dr1es41R.js";
+import f from "./icon.js";
 import b from "./line-clamp.js";
 import y from "./progress-bar.js";
 import w from "./tooltip.js";
-const $ = m`
-  :host {
-    --color: var(--color);
-
-    flex: calc(100% / var(--columns) + var(--cx-spacing-small));
-    margin-left: calc(-1 * var(--cx-spacing-small));
-  }
-
-  :host([round]) {
-    max-width: 100%;
-    margin-left: 0;
-  }
-
-  .step {
-    font-family: var(--cx-font-sans);
-    display: flex;
-    gap: var(--cx-spacing-x-small);
-    width: 100%;
-  }
-
-  .step__arrow {
-    display: inline-flex;
-    align-items: center;
-    padding-top: var(--cx-spacing-x-small);
-    padding-bottom: var(--cx-spacing-x-small);
-    padding-left: var(--cx-spacing-x-large);
-    padding-right: var(--cx-spacing-medium);
-    background-color: var(--cx-color-neutral-100);
-    cursor: pointer;
-    position: relative;
-    clip-path: polygon(
-      calc(100% - var(--cx-spacing-medium)) 0%,
-      100% 50%,
-      calc(100% - var(--cx-spacing-medium)) 100%,
-      0% 100%,
-      var(--cx-spacing-medium) 50%,
-      0% 0%
-    );
-    width: 100%;
-  }
-
-  .step--first .step__arrow {
-    clip-path: polygon(
-      calc(100% - var(--cx-spacing-medium)) 0%,
-      100% 50%,
-      calc(100% - var(--cx-spacing-medium)) 100%,
-      0% 100%,
-      0 50%,
-      0% 0%
-    );
-    border-top-left-radius: var(--cx-border-radius-large);
-    border-bottom-left-radius: var(--cx-border-radius-large);
-    padding-left: var(--cx-spacing-small);
-  }
-
-  .step--last .step__arrow {
-    clip-path: polygon(
-      100% 0,
-      100% 50%,
-      100% 100%,
-      0% 100%,
-      var(--cx-spacing-medium) 50%,
-      0% 0%
-    );
-    border-top-right-radius: var(--cx-border-radius-large);
-    border-bottom-right-radius: var(--cx-border-radius-large);
-  }
-
-  .step--first.step--last .step__arrow {
-    clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
-  }
-
-  .step--active .step__arrow {
-    background-color: color-mix(in srgb, var(--color) 15%, white);
-    cursor: default;
-  }
-
-  .step--completed .step__arrow {
-    opacity: 0.5;
-  }
-
-  .step--disabled .step__arrow {
-    cursor: default;
-  }
-
-  .step--readonly .step__arrow {
-    cursor: default;
-  }
-
-  .step--disabled.step--has-description .step__arrow,
-  .step--readonly.step--has-description .step__arrow,
-  .step--active.step--has-description .step__arrow {
-    cursor: help;
-  }
-
-  .step__circle {
-    align-items: center;
-    background-color: color-mix(in srgb, var(--color) 15%, white);
-    border: 2px solid var(--color);
-    border-radius: var(--cx-border-radius-circle);
-    color: var(--color);
-    display: flex;
-    flex: 0 0 32px;
-    font-weight: var(--cx-font-weight-semibold);
-    height: 32px;
-    justify-content: center;
-
-    cx-icon {
-      font-size: var(--cx-font-size-medium);
-    }
-  }
-
-  .step--round.step--active .step__circle,
-  .step--round.step--completed .step__circle {
-    background-color: var(--color);
-    color: var(--cx-color-neutral-0);
-  }
-
-  .step--round.step--disabled .step__circle {
-    background-color: var(--cx-color-neutral-0);
-    border-color: var(--cx-color-neutral-400);
-    color: var(--cx-color-neutral-400);
-  }
-
-  .step--round.step--error .step__circle {
-    background-color: var(--cx-color-danger);
-    border-color: var(--cx-color-danger);
-    color: var(--cx-color-neutral-0);
-  }
-
-  .step__content {
-    display: flex;
-    align-items: center;
-    gap: var(--cx-spacing-x-small);
-    position: relative;
-    max-width: 100%;
-  }
-
-  .step--round .step__content {
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    gap: 0;
-  }
-
-  .step__content__prefix::slotted(cx-icon) {
-    color: var(--cx-color-neutral-600);
-    font-size: var(--cx-font-size-medium);
-  }
-
-  .step__content__label {
-    color: var(--cx-color-neutral-600);
-    font-size: var(--cx-font-size-medium);
-  }
-
-  .step--active .step__content__label,
-  .step--active .step__content__help-text,
-  .step--active .step__content__prefix::slotted(cx-icon) {
-    color: var(--color);
-  }
-
-  .step--round.step--completed .step__content__label,
-  .step--round.step--completed .step__content__help-text {
-    color: var(--color);
-  }
-
-  .step--disabled .step__content__label,
-  .step--disabled .step__content__help-text,
-  .step--disabled .step__content__prefix::slotted(cx-icon) {
-    color: var(--cx-color-neutral-400);
-  }
-
-  .step--error .step__content__label,
-  .step--error .step__content__help-text {
-    color: var(--cx-color-danger);
-  }
-
-  .step--round .step__content__progress {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cx-spacing-small);
-    line-height: 1;
-    min-width: 120px;
-  }
-
-  .step--round .step__content__progress__text {
-    color: var(--color);
-  }
-
-  .step--round.step__content__help-text {
-    color: var(--cx-color-neutral-600);
-    font-size: var(--cx-font-size-small);
-    line-height: 1;
-  }
-
-  .step__line {
-    background-color: var(--color);
-    flex: 1;
-    height: 2rem;
-    margin: var(--cx-spacing-medium) calc(32px / 2) 0;
-    width: 2px;
-  }
-
-  .step--last ~ .step__line {
-    display: none;
-  }
-
-  cx-progress-bar {
-    --height: 8px;
-    flex: 1;
-  }
-`;
-var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, t = (d, i, p, c) => {
-  for (var s = c > 1 ? void 0 : c ? C(i, p) : i, a = d.length - 1, n; a >= 0; a--)
-    (n = d[a]) && (s = (c ? n(i, p, s) : n(s)) || s);
-  return c && s && S(i, p, s), s;
+const $ = u`:host{--color:var(--color);flex:calc(100% / var(--columns) + var(--cx-spacing-small));margin-left:calc(-1 * var(--cx-spacing-small))}:host([round]){max-width:100%;margin-left:0}.step{font-family:var(--cx-font-sans);gap:var(--cx-spacing-x-small);width:100%;display:flex}.step__arrow{padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-x-small);padding-left:var(--cx-spacing-x-large);padding-right:var(--cx-spacing-medium);background-color:var(--cx-color-neutral-100);cursor:pointer;clip-path:polygon(calc(100% - var(--cx-spacing-medium)) 0%, 100% 50%, calc(100% - var(--cx-spacing-medium)) 100%, 0% 100%, var(--cx-spacing-medium) 50%, 0% 0%);align-items:center;width:100%;display:inline-flex;position:relative}.step--first .step__arrow{clip-path:polygon(calc(100% - var(--cx-spacing-medium)) 0%, 100% 50%, calc(100% - var(--cx-spacing-medium)) 100%, 0% 100%, 0 50%, 0% 0%);border-top-left-radius:var(--cx-border-radius-large);border-bottom-left-radius:var(--cx-border-radius-large);padding-left:var(--cx-spacing-small)}.step--last .step__arrow{clip-path:polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, var(--cx-spacing-medium) 50%, 0% 0%);border-top-right-radius:var(--cx-border-radius-large);border-bottom-right-radius:var(--cx-border-radius-large)}.step--first.step--last .step__arrow{clip-path:polygon(100% 0%,100% 50%,100% 100%,0% 100%,0 50%,0% 0%)}.step--active .step__arrow{background-color:color-mix(in srgb, var(--color) 15%, white);cursor:default}.step--completed .step__arrow{opacity:.5}.step--disabled .step__arrow,.step--readonly .step__arrow{cursor:default}.step--disabled.step--has-description .step__arrow,.step--readonly.step--has-description .step__arrow,.step--active.step--has-description .step__arrow{cursor:help}.step__circle{background-color:color-mix(in srgb, var(--color) 15%, white);border:2px solid var(--color);border-radius:var(--cx-border-radius-circle);color:var(--color);font-weight:var(--cx-font-weight-semibold);flex:0 0 32px;justify-content:center;align-items:center;height:32px;display:flex;& cx-icon{font-size:var(--cx-font-size-medium)}}.step--round.step--active .step__circle,.step--round.step--completed .step__circle{background-color:var(--color);color:var(--cx-color-neutral-0)}.step--round.step--disabled .step__circle{background-color:var(--cx-color-neutral-0);border-color:var(--cx-color-neutral-400);color:var(--cx-color-neutral-400)}.step--round.step--error .step__circle{background-color:var(--cx-color-danger);border-color:var(--cx-color-danger);color:var(--cx-color-neutral-0)}.step__content{align-items:center;gap:var(--cx-spacing-x-small);max-width:100%;display:flex;position:relative}.step--round .step__content{flex-direction:column;justify-content:center;align-items:flex-start;gap:0}.step__content__prefix::slotted(cx-icon),.step__content__label{color:var(--cx-color-neutral-600);font-size:var(--cx-font-size-medium)}.step--active .step__content__label,.step--active .step__content__help-text,.step--active .step__content__prefix::slotted(cx-icon),.step--round.step--completed .step__content__label,.step--round.step--completed .step__content__help-text{color:var(--color)}.step--disabled .step__content__label,.step--disabled .step__content__help-text,.step--disabled .step__content__prefix::slotted(cx-icon){color:var(--cx-color-neutral-400)}.step--error .step__content__label,.step--error .step__content__help-text{color:var(--cx-color-danger)}.step--round .step__content__progress{justify-content:center;align-items:center;gap:var(--cx-spacing-small);min-width:120px;line-height:1;display:flex}.step--round .step__content__progress__text{color:var(--color)}.step--round.step__content__help-text{color:var(--cx-color-neutral-600);font-size:var(--cx-font-size-small);line-height:1}.step__line{background-color:var(--color);height:2rem;margin:var(--cx-spacing-medium) calc(32px / 2) 0;flex:1;width:2px}.step--last~.step__line{display:none}cx-progress-bar{--height:8px;flex:1}`;
+var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, t = (d, i, p, l) => {
+  for (var s = l > 1 ? void 0 : l ? C(i, p) : i, a = d.length - 1, n; a >= 0; a--)
+    (n = d[a]) && (s = (l ? n(i, p, s) : n(s)) || s);
+  return l && s && S(i, p, s), s;
 };
 let e = class extends _ {
   constructor() {
@@ -238,55 +26,24 @@ let e = class extends _ {
     });
   }
   renderDefaultStep() {
-    return o`<div class="step__arrow">
-      <div class="step__content">
-        <slot name="prefix" class="step__content__prefix"></slot>
-        <cx-line-clamp lines="1">
-          <slot class="step__content__label"></slot>
-        </cx-line-clamp>
-      </div>
-    </div>`;
+    return o`<div class="step__arrow"><div class="step__content"><slot name="prefix" class="step__content__prefix"></slot><cx-line-clamp lines="1"><slot class="step__content__label"></slot></cx-line-clamp></div></div>`;
   }
   renderRoundStep() {
-    return o`<div class="step__circle">
-    ${this.completed ? o`<cx-icon name="check"></cx-icon>` : o`<div class="step__circle__number">${this.index + 1}</div>`}
-  </div>
-  <div class="step__content">
-    <slot class="step__content__label"></slot>
-    ${l(
+    return o`<div class="step__circle">${this.completed ? o`<cx-icon name="check"></cx-icon>` : o`<div class="step__circle__number">${this.index + 1}</div>`}</div><div class="step__content"><slot class="step__content__label"></slot>${c(
       this.progress && this.progress > 0,
-      () => o`<div class="step__content__progress">
-          <cx-progress-bar value=${this.progress}></cx-progress-bar>
-          <div class="step__content__progress__text">${this.progress}%</div>
-        </div>`,
+      () => o`<div class="step__content__progress"><cx-progress-bar value=${this.progress}></cx-progress-bar><div class="step__content__progress__text">${this.progress}%</div></div>`,
       () => o`
-        ${l(
+        ${c(
         this.helpText,
         () => o`<div class="step__content__help-text">${this.helpText}</div>`
       )}
       `
-    )}
-  </div>
-</div>
-</div>`;
+    )}</div>`;
   }
   render() {
-    return o`
-      <cx-tooltip
-        ?disabled=${!this.description.trim()}
-        .content=${this.description}
-        hoist
-      >
-        <div
-          style=${f({
+    return o`<cx-tooltip ?disabled=${!this.description.trim()} .content=${this.description} hoist><div style=${g({
       "--color": this.color
-    })}
-        >
-          <div
-            part="base"
-            aria-label="step"
-            role="button"
-            class=${v({
+    })}><div part="base" aria-label="step" role="button" class=${v({
       step: !0,
       "step--active": this.active,
       "step--completed": this.completed,
@@ -297,20 +54,12 @@ let e = class extends _ {
       "step--last": this.last,
       "step--readonly": this.readonly,
       "step--round": this.round
-    })}
-            @click=${this.handleClick}
-          >
-            ${l(this.round, this.renderRoundStep, this.renderDefaultStep)}
-          </div>
-          ${l(this.round, () => o` <div class="step__line"></div>`)}
-        </div>
-      </cx-tooltip>
-    `;
+    })} @click=${this.handleClick}>${c(this.round, this.renderRoundStep, this.renderDefaultStep)}</div>${c(this.round, () => o`<div class="step__line"></div>`)}</div></cx-tooltip>`;
   }
 };
 e.styles = [x, $];
 e.dependencies = {
-  "cx-icon": g,
+  "cx-icon": f,
   "cx-line-clamp": b,
   "cx-progress-bar": y,
   "cx-tooltip": w
@@ -355,7 +104,7 @@ t([
   r({ attribute: "description", reflect: !0, type: String })
 ], e.prototype, "description", 2);
 e = t([
-  u("cx-step")
+  m("cx-step")
 ], e);
 export {
   e as default