@sbb-esta/lyne-elements 1.12.1 → 1.14.0

package/status.js

@@ -1,36 +1,65 @@
-import { css as p, LitElement as u, html as c } from "lit";
-import { property as i, customElement as m } from "lit/decorators.js";
-import { slotState as v } from "./core/decorators.js";
-import { SbbIconNameMixin as y } from "./icon.js";
-import "./title.js";
-const d = p`*,:before,:after{box-sizing:border-box}:host{--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-icon-color: var(--sbb-color-iron);--sbb-status-text-color: var(--sbb-color-iron);--_sbb-status-icon-font-size: var(--sbb-font-size-text-s);display:block}:host([type=error]){--sbb-status-text-color: var(--sbb-color-red125)}:host(:is([type=error],[type=error]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-red125)}:host([type=success]){--sbb-status-text-color: var(--sbb-color-green)}:host(:is([type=success],[type=success]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-green)}:host([type=warning]){--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-text-color: var(--sbb-color-charcoal)}:host([type=pending]){--sbb-status-text-color: var(--sbb-color-sky)}:host(:is([type=pending],[type=pending]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-text-color: var(--sbb-color-red125)}:host(:is([type=incomplete],[type=incomplete]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-red125)}:host([type=not-started]){--sbb-status-icon-color: var(--sbb-color-smoke);--sbb-status-text-color: var(--sbb-color-charcoal)}:host(:is([type=not-started],[type=in-progress]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-smoke)}:host([type=in-progress]){--sbb-status-text-color: var(--sbb-color-pink)}:host(:is([type=in-progress],[type=in-progress]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-pink)}:host(:is([data-slot-names~=title],[title-content])){--sbb-status-text-color: var(--sbb-color-granite);--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-icon-font-size: var(--sbb-font-size-title-5)}.sbb-status{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-icon-font-size) * var(--sbb-typo-line-height-body-text) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__title{margin-block:0}:host(:not(:is([data-slot-names~=title],[title-content]))) .sbb-status__title{display:none}.sbb-status__content-slot{display:inline;margin:0;padding:0}`;
-var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (n, o, l, e) => {
-  for (var t = e > 1 ? void 0 : e ? f(o, l) : o, a = n.length - 1, b; a >= 0; a--)
-    (b = n[a]) && (t = (e ? b(o, l, t) : b(t)) || t);
-  return e && t && h(o, l, t), t;
+var I = (t) => {
+  throw TypeError(t);
 };
-let s = class extends y(u) {
-  constructor() {
-    super(...arguments), this._statusTypes = /* @__PURE__ */ new Map([
-      ["info", "circle-information-small"],
-      ["success", "circle-tick-small"],
-      ["warning", "circle-exclamation-point-small"],
-      ["error", "circle-cross-small"],
-      ["pending", "circle-three-dots-small"],
-      ["incomplete", "circle-dotted-part-x-small"],
-      ["not-started", "circle-dotted-small"],
-      ["in-progress", "circle-dotted-part-small"]
-    ]), this.type = "info", this.titleLevel = "3";
-  }
-  renderIconSlot() {
-    return c`
+var w = (t, e, o) => e.has(t) || I("Cannot " + o);
+var m = (t, e, o) => (w(t, e, "read from private field"), o ? o.call(t) : e.get(t)), d = (t, e, o) => e.has(t) ? I("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), r = (t, e, o, l) => (w(t, e, "write to private field"), l ? l.call(t, o) : e.set(t, o), o);
+import { __esDecorate as h, __runInitializers as n } from "tslib";
+import { css as T, LitElement as $, html as E } from "lit";
+import { customElement as D, property as v } from "lit/decorators.js";
+import { slotState as j, forceType as M, omitEmptyConverter as N } from "./core/decorators.js";
+import { SbbIconNameMixin as O } from "./icon.js";
+import "./title.js";
+const P = T`*,:before,:after{box-sizing:border-box}:host{--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-icon-color: var(--sbb-color-iron);--sbb-status-text-color: var(--sbb-color-iron);--_sbb-status-icon-font-size: var(--sbb-font-size-text-s);display:block}:host([type=error]){--sbb-status-text-color: var(--sbb-color-red125)}:host(:is([type=error],[type=error]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-red125)}:host([type=success]){--sbb-status-text-color: var(--sbb-color-green)}:host(:is([type=success],[type=success]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-green)}:host([type=warning]){--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-text-color: var(--sbb-color-charcoal)}:host([type=pending]){--sbb-status-text-color: var(--sbb-color-sky)}:host(:is([type=pending],[type=pending]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-text-color: var(--sbb-color-red125)}:host(:is([type=incomplete],[type=incomplete]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-red125)}:host([type=not-started]){--sbb-status-icon-color: var(--sbb-color-smoke);--sbb-status-text-color: var(--sbb-color-charcoal)}:host(:is([type=not-started],[type=in-progress]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-smoke)}:host([type=in-progress]){--sbb-status-text-color: var(--sbb-color-pink)}:host(:is([type=in-progress],[type=in-progress]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-pink)}:host(:is([data-slot-names~=title],[title-content])){--sbb-status-text-color: var(--sbb-color-granite);--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-icon-font-size: var(--sbb-font-size-title-5)}.sbb-status{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-icon-font-size) * var(--sbb-typo-line-height-body-text) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__title{margin-block:0}:host(:not(:is([data-slot-names~=title],[title-content]))) .sbb-status__title{display:none}.sbb-status__content-slot{display:inline;margin:0;padding:0}`;
+let Q = (() => {
+  var c, b, p, i;
+  let t = [D("sbb-status"), j()], e, o = [], l, y = O($), _, g = [], f = [], x, z = [], k = [], C, L = [], S = [];
+  return i = class extends y {
+    constructor() {
+      super(...arguments);
+      d(this, c);
+      d(this, b);
+      d(this, p);
+      this._statusTypes = /* @__PURE__ */ new Map([
+        ["info", "circle-information-small"],
+        ["success", "circle-tick-small"],
+        ["warning", "circle-exclamation-point-small"],
+        ["error", "circle-cross-small"],
+        ["pending", "circle-three-dots-small"],
+        ["incomplete", "circle-dotted-part-x-small"],
+        ["not-started", "circle-dotted-small"],
+        ["in-progress", "circle-dotted-part-small"]
+      ]), r(this, c, n(this, g, "info")), r(this, b, (n(this, f), n(this, z, ""))), r(this, p, (n(this, k), n(this, L, "3"))), n(this, S);
+    }
+    /** The type of the status. */
+    get type() {
+      return m(this, c);
+    }
+    set type(a) {
+      r(this, c, a);
+    }
+    /** Content of title. */
+    get titleContent() {
+      return m(this, b);
+    }
+    set titleContent(a) {
+      r(this, b, a);
+    }
+    /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
+    get titleLevel() {
+      return m(this, p);
+    }
+    set titleLevel(a) {
+      r(this, p, a);
+    }
+    renderIconSlot() {
+      return E`
       <slot name="icon">
-        <sbb-icon name=${this.iconName ?? this._statusTypes.get(this.type)}></sbb-icon>
+        <sbb-icon name=${this.iconName || this._statusTypes.get(this.type)}></sbb-icon>
       </slot>
     `;
-  }
-  render() {
-    return c`
+    }
+    render() {
+      return E`
       <div class="sbb-status">
         <span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
         <span class="sbb-status__content">
@@ -43,22 +72,18 @@ let s = class extends y(u) {
         </span>
       </div>
     `;
-  }
-};
-s.styles = d;
-r([
-  i({ reflect: !0 })
-], s.prototype, "type", 2);
-r([
-  i({ reflect: !0, attribute: "title-content" })
-], s.prototype, "titleContent", 2);
-r([
-  i({ attribute: "title-level" })
-], s.prototype, "titleLevel", 2);
-s = r([
-  m("sbb-status"),
-  v()
-], s);
+    }
+  }, c = new WeakMap(), b = new WeakMap(), p = new WeakMap(), l = i, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
+    _ = [v({ reflect: !0 })], x = [M(), v({ attribute: "title-content", reflect: !0, converter: N })], C = [v({ attribute: "title-level" })], h(i, null, _, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (s) => "type" in s, get: (s) => s.type, set: (s, u) => {
+      s.type = u;
+    } }, metadata: a }, g, f), h(i, null, x, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (s) => "titleContent" in s, get: (s) => s.titleContent, set: (s, u) => {
+      s.titleContent = u;
+    } }, metadata: a }, z, k), h(i, null, C, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (s) => "titleLevel" in s, get: (s) => s.titleLevel, set: (s, u) => {
+      s.titleLevel = u;
+    } }, metadata: a }, L, S), h(null, e = { value: l }, t, { kind: "class", name: l.name, metadata: a }, null, o), l = e.value, a && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), i.styles = P, n(l, o), l;
+})();
 export {
-  s as SbbStatusElement
+  Q as SbbStatusElement
 };

package/stepper/step/step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step/step.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,qBAKa,cAAe,SAAQ,UAAU;IAC5C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,+CAA+C;IAC/C,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,MAAM,CAAoC;IAClD,OAAO,CAAC,mBAAmB,CAIxB;IAEH,6BAA6B;IAC7B,IAAW,KAAK,IAAI,mBAAmB,GAAG,IAAI,CAE7C;IAED;;;OAGG;IACI,MAAM,IAAI,IAAI;IAQrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAQvB;;;OAGG;IACI,QAAQ,CAAC,SAAS,EAAE,2BAA2B,GAAG,OAAO;IAIhE;;;OAGG;IACI,SAAS,CAAC,aAAa,EAAE,OAAO,GAAG,IAAI;IAS9C,iGAAiG;IACjG,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,aAAa;IAQL,iBAAiB,IAAI,IAAI;cAStB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAM3D,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step/step.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,qBAMM,cAAe,SAAQ,UAAU;IACrC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,+CAA+C;IAC/C,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,MAAM,CAAoC;IAClD,OAAO,CAAC,mBAAmB,CAIxB;IAEH,6BAA6B;IAC7B,IAAW,KAAK,IAAI,mBAAmB,GAAG,IAAI,CAE7C;IAED;;;OAGG;IACI,MAAM,IAAI,IAAI;IAQrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAQvB;;;OAGG;IACI,QAAQ,CAAC,SAAS,EAAE,2BAA2B,GAAG,OAAO;IAIhE;;;OAGG;IACI,SAAS,CAAC,aAAa,EAAE,OAAO,GAAG,IAAI;IAS9C,iGAAiG;IACjG,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,aAAa;IAQL,iBAAiB,IAAI,IAAI;cAStB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAM3D,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/stepper/step-label/step-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step-label.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step-label/step-label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAKnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;;AAOjD;;;;;GAKG;AACH,qBAMa,mBAAoB,SAAQ,wBAAwD;IAC/F,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gBAAgB;IAChB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA4C;IAEvE,wCAAwC;IACxC,IAAW,IAAI,IAAI,cAAc,GAAG,IAAI,CAEvC;IAED,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,KAAK,CAA+B;IAE5C,OAAO,CAAC,QAAQ;IAQA,iBAAiB,IAAI,IAAI;cAqBtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E;;;OAGG;IACI,MAAM,IAAI,IAAI;IAMrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAMvB;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,GAAG,IAAI;cAQ9D,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"step-label.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step-label/step-label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAKnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;;AAOjD;;;;;GAKG;AACH,qBAOM,mBAAoB,SAAQ,wBAAwD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gBAAgB;IAChB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA4C;IAEvE,wCAAwC;IACxC,IAAW,IAAI,IAAI,cAAc,GAAG,IAAI,CAEvC;IAED,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,KAAK,CAA+B;IAE5C,OAAO,CAAC,QAAQ;IAQA,iBAAiB,IAAI,IAAI;cAqBtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E;;;OAGG;IACI,MAAM,IAAI,IAAI;IAMrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAMvB;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,GAAG,IAAI;cAQ9D,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/stepper/step-label.js

@@ -1,83 +1,77 @@
-import { css as l, html as n } from "lit";
-import { customElement as p } from "lit/decorators.js";
-import { SbbButtonBaseElement as c } from "../core/base-elements.js";
-import { SbbConnectedAbortController as d } from "../core/controllers.js";
-import { hostAttributes as f } from "../core/decorators.js";
-import { SbbDisabledMixin as h } from "../core/mixins.js";
-import { SbbIconNameMixin as v } from "../icon.js";
-const x = l`*,:before,:after{box-sizing:border-box}:host{--sbb-step-label-color: var(--sbb-color-iron);--sbb-step-label-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-step-label-prefix-size: var(--sbb-size-element-xxs);--sbb-step-label-prefix-border-style: solid;--sbb-step-label-prefix-border-color: var(--sbb-color-cloud);--sbb-step-label-prefix-background-color: var(--sbb-color-white);--sbb-step-label-gap: var(--sbb-spacing-fixed-4x);position:relative;min-width:0;max-width:fit-content}:host:before{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);inset-block-start:calc(var(--sbb-font-size-text-l) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2);line-height:1;z-index:1;transform:translate(-50%,calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0rem)));transition:transform var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-step-label-color: ButtonText;--sbb-step-label-prefix-border-color: ButtonText}}:host([data-selected]){--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;--sbb-step-label-color: var(--sbb-color-charcoal)}@media (forced-colors: active){:host([data-selected]){--sbb-step-label-color: Highlight !important}}:host([data-size=s]){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs)}:host([data-size=s]):before{inset-block-start:calc(var(--sbb-font-size-text-m) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2)}:host([disabled]){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-prefix-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-step-label-color: GrayText !important}}@media (any-hover: hover){:host(:hover:not([disabled])){--sbb-step-label-cursor: pointer;--sbb-step-label-prefix-background-color: var(--sbb-color-milk);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host([data-orientation=vertical]){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([data-orientation=vertical]:not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host([data-selected][data-orientation=vertical]){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-font-size-text-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;cursor:var(--sbb-step-label-cursor);position:relative;display:flex;gap:var(--sbb-step-label-gap);color:var(--sbb-step-label-color)}:host([data-size=s]) .sbb-step-label{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:calc(1em * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}:host([data-orientation=horizontal]) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);transform:translateY(var(--sbb-step-label-translate-y-content-hover, 0rem));transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,transform}`;
-var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, u = (t, s, r, i) => {
-  for (var e = i > 1 ? void 0 : i ? m(s, r) : s, b = t.length - 1, a; b >= 0; b--)
-    (a = t[b]) && (e = (i ? a(s, r, e) : a(e)) || e);
-  return i && e && g(s, r, e), e;
-};
-let y = 0, o = class extends v(h(c)) {
-  constructor() {
-    super(...arguments), this._internals = this.attachInternals(), this._abort = new d(this), this._stepper = null, this._step = null;
-  }
-  /** The step controlled by the label. */
-  get step() {
-    return this._step;
-  }
-  _getStep() {
-    let t = this.nextElementSibling;
-    for (; t && t.localName !== "sbb-step"; )
-      t = t.nextElementSibling;
-    return t;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const t = this._abort.signal;
-    this.id = this.id || `sbb-step-label-${y++}`, this._internals.ariaSelected = "false", this._stepper = this.closest("sbb-stepper"), this._step = this._getStep(), this.toggleAttribute("data-disabled", this.hasAttribute("disabled")), this.addEventListener(
-      "click",
-      () => {
+import { __esDecorate as n, __runInitializers as p } from "tslib";
+import { css as c, html as d } from "lit";
+import { customElement as f } from "lit/decorators.js";
+import { SbbButtonBaseElement as h } from "../core/base-elements.js";
+import { SbbConnectedAbortController as v } from "../core/controllers.js";
+import { hostAttributes as x } from "../core/decorators.js";
+import { SbbDisabledMixin as m } from "../core/mixins.js";
+import { SbbIconNameMixin as u } from "../icon.js";
+const g = c`*,:before,:after{box-sizing:border-box}:host{--sbb-step-label-color: var(--sbb-color-iron);--sbb-step-label-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-step-label-prefix-size: var(--sbb-size-element-xxs);--sbb-step-label-prefix-border-style: solid;--sbb-step-label-prefix-border-color: var(--sbb-color-cloud);--sbb-step-label-prefix-background-color: var(--sbb-color-white);--sbb-step-label-gap: var(--sbb-spacing-fixed-4x);position:relative;min-width:0;max-width:fit-content}:host:before{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);inset-block-start:calc(var(--sbb-font-size-text-l) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2);line-height:1;z-index:1;transform:translate(-50%,calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0rem)));transition:transform var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-step-label-color: ButtonText;--sbb-step-label-prefix-border-color: ButtonText}}:host([data-selected]){--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;--sbb-step-label-color: var(--sbb-color-charcoal)}@media (forced-colors: active){:host([data-selected]){--sbb-step-label-color: Highlight !important}}:host([data-size=s]){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs)}:host([data-size=s]):before{inset-block-start:calc(var(--sbb-font-size-text-m) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2)}:host([disabled]){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-prefix-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-step-label-color: GrayText !important}}@media (any-hover: hover){:host(:hover:not([disabled])){--sbb-step-label-cursor: pointer;--sbb-step-label-prefix-background-color: var(--sbb-color-milk);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host([data-orientation=vertical]){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([data-orientation=vertical]:not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host([data-selected][data-orientation=vertical]){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-font-size-text-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;cursor:var(--sbb-step-label-cursor);position:relative;display:flex;gap:var(--sbb-step-label-gap);color:var(--sbb-step-label-color)}:host([data-size=s]) .sbb-step-label{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:calc(1em * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}:host([data-orientation=horizontal]) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);transform:translateY(var(--sbb-step-label-translate-y-content-hover, 0rem));transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,transform}`;
+let y = 0, B = (() => {
+  var s;
+  let b = [f("sbb-step-label"), x({
+    slot: "step-label",
+    tabindex: "-1",
+    role: "tab"
+  })], a, i = [], e, r = u(m(h));
+  return s = class extends r {
+    constructor() {
+      super(...arguments), this._internals = this.attachInternals(), this._abort = new v(this), this._stepper = null, this._step = null;
+    }
+    /** The step controlled by the label. */
+    get step() {
+      return this._step;
+    }
+    _getStep() {
+      let t = this.nextElementSibling;
+      for (; t && t.localName !== "sbb-step"; )
+        t = t.nextElementSibling;
+      return t;
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      const t = this._abort.signal;
+      this.id = this.id || `sbb-step-label-${y++}`, this._internals.ariaSelected = "false", this._stepper = this.closest("sbb-stepper"), this._step = this._getStep(), this.toggleAttribute("data-disabled", this.hasAttribute("disabled")), this.addEventListener("click", () => {
         this._stepper && this._step && (this._stepper.selected = this._step);
-      },
-      { signal: t }
-    );
-  }
-  firstUpdated(t) {
-    super.firstUpdated(t), this.step && this.setAttribute("aria-controls", this.step.id);
-  }
-  /**
-   * Selects and configures the step label.
-   * @internal
-   */
-  select() {
-    this.tabIndex = 0, this._internals.ariaSelected = "true", this.toggleAttribute("data-selected", !0);
-  }
-  /**
-   * Deselects and configures the step label.
-   * @internal
-   */
-  deselect() {
-    this.tabIndex = -1, this._internals.ariaSelected = "false", this.toggleAttribute("data-selected", !1);
-  }
-  /**
-   * Configures the step label.
-   * @internal
-   */
-  configure(t, s, r) {
-    r && (this._step = this._getStep()), this._internals.ariaPosInSet = `${t}`, this._internals.ariaSetSize = `${s}`;
-  }
-  render() {
-    return n`
+      }, { signal: t });
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), this.step && this.setAttribute("aria-controls", this.step.id);
+    }
+    /**
+     * Selects and configures the step label.
+     * @internal
+     */
+    select() {
+      this.tabIndex = 0, this._internals.ariaSelected = "true", this.toggleAttribute("data-selected", !0);
+    }
+    /**
+     * Deselects and configures the step label.
+     * @internal
+     */
+    deselect() {
+      this.tabIndex = -1, this._internals.ariaSelected = "false", this.toggleAttribute("data-selected", !1);
+    }
+    /**
+     * Configures the step label.
+     * @internal
+     */
+    configure(t, o, l) {
+      l && (this._step = this._getStep()), this._internals.ariaPosInSet = `${t}`, this._internals.ariaSetSize = `${o}`;
+    }
+    render() {
+      return d`
       <div class="sbb-step-label">
         <span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
         <span class="sbb-step-label__text"><slot></slot></span>
       </div>
     `;
-  }
-};
-o.styles = x;
-o = u([
-  p("sbb-step-label"),
-  f({
-    slot: "step-label",
-    tabindex: "-1",
-    role: "tab"
-  })
-], o);
+    }
+  }, e = s, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    n(null, a = { value: e }, b, { kind: "class", name: e.name, metadata: t }, null, i), e = a.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), s.styles = g, p(e, i), e;
+})();
 export {
-  o as SbbStepLabelElement
+  B as SbbStepLabelElement
 };

package/stepper/step.js

@@ -1,112 +1,107 @@
-import { ResizeController as o } from "@lit-labs/observers/resize-controller.js";
-import { css as l, LitElement as p, html as h } from "lit";
-import { customElement as d } from "lit/decorators.js";
-import { SbbConnectedAbortController as c } from "../core/controllers.js";
-import { hostAttributes as v } from "../core/decorators.js";
-import { EventEmitter as m } from "../core/eventing.js";
-const u = l`*,:before,:after{box-sizing:border-box}:host{--sbb-step-position: initial;--sbb-step-inset-block-start: unset;--sbb-step-opacity: 0;--sbb-step-visibility: hidden;--sbb-step-height: 0;--sbb-step-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-step-animation-delay: 0;--sbb-step-color: var(--sbb-color-iron);display:contents}:host([data-selected]){--sbb-step-opacity: 1;--sbb-step-visibility: visible;--sbb-step-height: fit-content;--sbb-step-animation-duration: var(--sbb-animation-duration-4x);--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host([data-orientation=horizontal]){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host([data-orientation=vertical]) .sbb-step--wrapper{margin-inline-start:var(--sbb-spacing-fixed-4x);opacity:0;height:0;transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing)}:host([data-selected][data-orientation=vertical]) .sbb-step--wrapper{opacity:1;height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-step{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:var(--sbb-step-position);width:100%;inset-block-start:var(--sbb-step-inset-block-start);opacity:var(--sbb-step-opacity);visibility:var(--sbb-step-visibility);height:var(--sbb-step-height);color:var(--sbb-step-color);transition-property:opacity,visibility;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay);transition-timing-function:var(--sbb-animation-easing)}`;
-var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, _ = (t, s, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? f(s, a) : s, r = t.length - 1, b; r >= 0; r--)
-    (b = t[r]) && (e = (i ? b(s, a, e) : b(e)) || e);
-  return i && e && g(s, a, e), e;
-};
-let y = 0, n = class extends p {
-  constructor() {
-    super(...arguments), this._validate = new m(
-      this,
-      n.events.validate
-    ), this._loaded = !1, this._abort = new c(this), this._stepper = null, this._label = null, this._stepResizeObserver = new o(this, {
-      target: null,
-      skipInitial: !0,
-      callback: (t) => this._onStepElementResize(t)
-    });
-  }
-  /** The label of the step. */
-  get label() {
-    return this._label;
-  }
-  /**
-   * Selects and configures the step.
-   * @internal
-   */
-  select() {
-    !this._loaded || !this.label || (this.toggleAttribute("data-selected", !0), this.label.select());
-  }
-  /**
-   * Deselects and configures the step.
-   * @internal
-   */
-  deselect() {
-    this.label && (this.toggleAttribute("data-selected", !1), this.label.deselect());
-  }
-  /**
-   * Emits a validate event whenever step switch is triggered.
-   * @internal
-   */
-  validate(t) {
-    return !!this._validate.emit(t);
-  }
-  /**
-   * Configures the step.
-   * @internal
-   */
-  configure(t) {
-    t && (this._label = this._getStepLabel()), this.label && this.setAttribute("aria-labelledby", this.label.id);
-  }
-  /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
-  _handleClick(t) {
-    var a, i;
-    const s = t.composedPath().filter((e) => e instanceof window.HTMLElement);
-    s.some((e) => this._isGoNextElement(e)) ? (a = this._stepper) == null || a.next() : s.some((e) => this._isGoPreviousElement(e)) && ((i = this._stepper) == null || i.previous());
-  }
-  _isGoNextElement(t) {
-    return t.hasAttribute("sbb-stepper-next") && !t.hasAttribute("disabled");
-  }
-  _isGoPreviousElement(t) {
-    return t.hasAttribute("sbb-stepper-previous") && !t.hasAttribute("disabled");
-  }
-  _onStepElementResize(t) {
-    var a, i;
-    if (!this.hasAttribute("data-selected"))
-      return;
-    const s = Math.floor(t[0].contentRect.height);
-    (i = (a = this._stepper) == null ? void 0 : a.style) == null || i.setProperty("--sbb-stepper-content-height", `${s}px`);
-  }
-  _getStepLabel() {
-    let t = this.previousElementSibling;
-    for (; t && t.localName !== "sbb-step-label"; )
-      t = t.previousElementSibling;
-    return t;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const t = this._abort.signal;
-    this.id = this.id || `sbb-step-${y++}`, this.addEventListener("click", (s) => this._handleClick(s), { signal: t }), this._stepper = this.closest("sbb-stepper"), this._label = this._getStepLabel();
-  }
-  firstUpdated(t) {
-    super.firstUpdated(t), this._loaded = !0, this._stepResizeObserver.observe(this.shadowRoot.querySelector(".sbb-step"));
-  }
-  render() {
-    return h`
+import { __esDecorate as c, __runInitializers as d } from "tslib";
+import { ResizeController as m } from "@lit-labs/observers/resize-controller.js";
+import { css as u, html as v, LitElement as g } from "lit";
+import { customElement as f } from "lit/decorators.js";
+import { SbbConnectedAbortController as y } from "../core/controllers.js";
+import { hostAttributes as _ } from "../core/decorators.js";
+import { EventEmitter as x } from "../core/eventing.js";
+const S = u`*,:before,:after{box-sizing:border-box}:host{--sbb-step-position: initial;--sbb-step-inset-block-start: unset;--sbb-step-opacity: 0;--sbb-step-visibility: hidden;--sbb-step-height: 0;--sbb-step-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-step-animation-delay: 0;--sbb-step-color: var(--sbb-color-iron);display:contents}:host([data-selected]){--sbb-step-opacity: 1;--sbb-step-visibility: visible;--sbb-step-height: fit-content;--sbb-step-animation-duration: var(--sbb-animation-duration-4x);--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host([data-orientation=horizontal]){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host([data-orientation=vertical]) .sbb-step--wrapper{margin-inline-start:var(--sbb-spacing-fixed-4x);opacity:0;height:0;transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing)}:host([data-selected][data-orientation=vertical]) .sbb-step--wrapper{opacity:1;height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-step{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:var(--sbb-step-position);width:100%;inset-block-start:var(--sbb-step-inset-block-start);opacity:var(--sbb-step-opacity);visibility:var(--sbb-step-visibility);height:var(--sbb-step-height);color:var(--sbb-step-color);transition-property:opacity,visibility;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay);transition-timing-function:var(--sbb-animation-easing)}`;
+let E = 0, P = (() => {
+  var e;
+  let h = [f("sbb-step"), _({
+    slot: "step",
+    role: "tabpanel"
+  })], b, l = [], s, p = g;
+  var o = (e = class extends p {
+    constructor() {
+      super(...arguments), this._validate = new x(this, o.events.validate), this._loaded = !1, this._abort = new y(this), this._stepper = null, this._label = null, this._stepResizeObserver = new m(this, {
+        target: null,
+        skipInitial: !0,
+        callback: (t) => this._onStepElementResize(t)
+      });
+    }
+    /** The label of the step. */
+    get label() {
+      return this._label;
+    }
+    /**
+     * Selects and configures the step.
+     * @internal
+     */
+    select() {
+      !this._loaded || !this.label || (this.toggleAttribute("data-selected", !0), this.label.select());
+    }
+    /**
+     * Deselects and configures the step.
+     * @internal
+     */
+    deselect() {
+      this.label && (this.toggleAttribute("data-selected", !1), this.label.deselect());
+    }
+    /**
+     * Emits a validate event whenever step switch is triggered.
+     * @internal
+     */
+    validate(t) {
+      return !!this._validate.emit(t);
+    }
+    /**
+     * Configures the step.
+     * @internal
+     */
+    configure(t) {
+      t && (this._label = this._getStepLabel()), this.label && this.setAttribute("aria-labelledby", this.label.id);
+    }
+    /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
+    _handleClick(t) {
+      var a, n;
+      const i = t.composedPath().filter((r) => r instanceof window.HTMLElement);
+      i.some((r) => this._isGoNextElement(r)) ? (a = this._stepper) == null || a.next() : i.some((r) => this._isGoPreviousElement(r)) && ((n = this._stepper) == null || n.previous());
+    }
+    _isGoNextElement(t) {
+      return t.hasAttribute("sbb-stepper-next") && !t.hasAttribute("disabled");
+    }
+    _isGoPreviousElement(t) {
+      return t.hasAttribute("sbb-stepper-previous") && !t.hasAttribute("disabled");
+    }
+    _onStepElementResize(t) {
+      var a, n;
+      if (!this.hasAttribute("data-selected"))
+        return;
+      const i = Math.floor(t[0].contentRect.height);
+      (n = (a = this._stepper) == null ? void 0 : a.style) == null || n.setProperty("--sbb-stepper-content-height", `${i}px`);
+    }
+    _getStepLabel() {
+      let t = this.previousElementSibling;
+      for (; t && t.localName !== "sbb-step-label"; )
+        t = t.previousElementSibling;
+      return t;
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      const t = this._abort.signal;
+      this.id = this.id || `sbb-step-${E++}`, this.addEventListener("click", (i) => this._handleClick(i), { signal: t }), this._stepper = this.closest("sbb-stepper"), this._label = this._getStepLabel();
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), this._loaded = !0, this._stepResizeObserver.observe(this.shadowRoot.querySelector(".sbb-step"));
+    }
+    render() {
+      return v`
       <div class="sbb-step--wrapper">
         <div class="sbb-step">
           <slot></slot>
         </div>
       </div>
     `;
-  }
-};
-n.styles = u;
-n.events = {
-  validate: "validate"
-};
-n = _([
-  d("sbb-step"),
-  v({
-    slot: "step",
-    role: "tabpanel"
-  })
-], n);
+    }
+  }, s = e, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+    c(null, b = { value: s }, h, { kind: "class", name: s.name, metadata: t }, null, l), o = s = b.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), e.styles = S, e.events = {
+    validate: "validate"
+  }, d(s, l), e);
+  return o = s;
+})();
 export {
-  n as SbbStepElement
+  P as SbbStepElement
 };

package/stepper/stepper/stepper.d.ts

@@ -11,15 +11,15 @@ declare const SbbStepperElement_base: import('../../core/mixins.js').AbstractCon
 export declare class SbbStepperElement extends SbbStepperElement_base {
     static styles: CSSResultGroup;
     /** If set to true, only the current and previous labels can be clicked and selected. */
-    linear: boolean;
+    accessor linear: boolean;
     /** Overrides the behaviour of `orientation` property. */
     set horizontalFrom(value: SbbHorizontalFrom);
     get horizontalFrom(): SbbHorizontalFrom | undefined;
     private _horizontalFrom?;
     /** Steps orientation, either horizontal or vertical. */
-    orientation: SbbOrientation;
+    accessor orientation: SbbOrientation;
     /** Size variant, either s or m. */
-    size: 's' | 'm';
+    accessor size: 's' | 'm';
     /** The currently selected step. */
     set selected(step: SbbStepElement);
     get selected(): SbbStepElement | undefined;

package/stepper/stepper/stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/stepper/stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAElF,OAAO,KAAK,EAAE,cAAc,EAA+B,MAAM,YAAY,CAAC;;AAM9E;;;;;GAKG;AACH,qBACa,iBAAkB,SAAQ,sBAA6B;IAClE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wFAAwF;IACpD,MAAM,UAAS;IAEnD,yDAAyD;IACzD,IACW,cAAc,CAAC,KAAK,EAAE,iBAAiB,EAKjD;IACD,IAAW,cAAc,IAAI,iBAAiB,GAAG,SAAS,CAEzD;IACD,OAAO,CAAC,eAAe,CAAC,CAAgC;IAExD,wDAAwD;IAEjD,WAAW,EAAE,cAAc,CAAgB;IAElD,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,mCAAmC;IACnC,IACW,QAAQ,CAAC,IAAI,EAAE,cAAc,EAIvC;IACD,IAAW,QAAQ,IAAI,cAAc,GAAG,SAAS,CAEhD;IAED,yCAAyC;IACzC,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,EAIrC;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,SAAS,CAE7C;IAED,gCAAgC;IAChC,IAAW,KAAK,IAAI,cAAc,EAAE,CAEnC;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,sBAAsB,CAA8C;IAE5E,6BAA6B;IACtB,IAAI,IAAI,IAAI;IAMnB,iCAAiC;IAC1B,QAAQ,IAAI,IAAI;IAMvB,yFAAyF;IAClF,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,OAAO;IAwBf,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,oBAAoB;IAUZ,iBAAiB,IAAI,IAAI;cAWhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAU1E,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgB5E,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,cAAc;cAmBH,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/stepper/stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAElF,OAAO,KAAK,EAAE,cAAc,EAA+B,MAAM,YAAY,CAAC;;AAM9E;;;;;GAKG;AACH,qBAEM,iBAAkB,SAAQ,sBAA6B;IAC3D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wFAAwF;IACxF,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,yDAAyD;IACzD,IACW,cAAc,CAAC,KAAK,EAAE,iBAAiB,EAKjD;IACD,IAAW,cAAc,IAAI,iBAAiB,GAAG,SAAS,CAEzD;IACD,OAAO,CAAC,eAAe,CAAC,CAAgC;IAExD,wDAAwD;IACxD,SACgB,WAAW,EAAE,cAAc,CAAgB;IAE3D,mCAAmC;IACnC,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAEnE,mCAAmC;IACnC,IACW,QAAQ,CAAC,IAAI,EAAE,cAAc,EAIvC;IACD,IAAW,QAAQ,IAAI,cAAc,GAAG,SAAS,CAEhD;IAED,yCAAyC;IACzC,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,EAIrC;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,SAAS,CAE7C;IAED,gCAAgC;IAChC,IAAW,KAAK,IAAI,cAAc,EAAE,CAEnC;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,sBAAsB,CAA8C;IAE5E,6BAA6B;IACtB,IAAI,IAAI,IAAI;IAMnB,iCAAiC;IAC1B,QAAQ,IAAI,IAAI;IAMvB,yFAAyF;IAClF,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,OAAO;IAwBf,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,oBAAoB;IAUZ,iBAAiB,IAAI,IAAI;cAWhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAU1E,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgB5E,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,cAAc;cAmBH,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}