@sbb-esta/lyne-elements-dev 4.7.0-dev.1773149675 → 4.7.0-dev.1773159918

package/status/status.component.js

@@ -1,22 +1,22 @@
-var d = (t) => {
+var b = (t) => {
   throw TypeError(t);
 };
-var g = (t, s, e) => s.has(t) || d("Cannot " + e);
-var y = (t, s, e) => (g(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? d("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), c = (t, s, e, r) => (g(t, s, "write to private field"), r ? r.call(t, e) : s.set(t, e), e);
-import { __esDecorate as f, __runInitializers as b } from "tslib";
-import { css as v, LitElement as x, html as S } from "lit";
-import { customElement as z, property as k } from "lit/decorators.js";
-import { SbbElementInternalsMixin as I } from "../core/mixins.js";
-import { boxSizingStyles as E } from "../core/styles.js";
-import { SbbIconNameMixin as N } from "../icon.js";
-const T = v`:host{--sbb-status-text-color: var(--sbb-status-color);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host([type=error]){--sbb-status-color: var(--sbb-color-error)}:host([type=success]){--sbb-status-color: var(--sbb-color-success)}:host([type=warning]){--sbb-status-color: var(--sbb-color-2)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-5);--sbb-status-text-color: var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-title-font-size: var(--sbb-heading-font-size-5);--_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-color);margin-block-start:calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__content-slot{display:inline;margin:0;padding:0}::slotted(sbb-title){margin-block:0}`;
-let P = (() => {
-  var i, o;
-  let t = [z("sbb-status")], s, e = [], r, p = N(I(x)), u, m = [], h = [];
-  return o = class extends p {
+var p = (t, s, e) => s.has(t) || b("Cannot " + e);
+var u = (t, s, e) => (p(t, s, "read from private field"), e ? e.call(t) : s.get(t)), m = (t, s, e) => s.has(t) ? b("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), n = (t, s, e, i) => (p(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e);
+import { __esDecorate as d, __runInitializers as h } from "tslib";
+import { css as g, html as y } from "lit";
+import { property as f } from "lit/decorators.js";
+import { SbbElement as _ } from "../core/base-elements.js";
+import { boxSizingStyles as v } from "../core/styles.js";
+import { SbbIconNameMixin as x } from "../icon.js";
+const z = g`:host{--sbb-status-text-color: var(--sbb-status-color);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host([type=error]){--sbb-status-color: var(--sbb-color-error)}:host([type=success]){--sbb-status-color: var(--sbb-color-success)}:host([type=warning]){--sbb-status-color: var(--sbb-color-2)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-5);--sbb-status-text-color: var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-title-font-size: var(--sbb-heading-font-size-5);--_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-color);margin-block-start:calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__content-slot{display:inline;margin:0;padding:0}::slotted(sbb-title){margin-block:0}`;
+let M = (() => {
+  var l, r;
+  let t = x(_), s, e = [], i = [];
+  return r = class extends t {
     constructor() {
       super(...arguments);
-      _(this, i);
+      m(this, l);
       this._statusTypes = /* @__PURE__ */ new Map([
         ["info", "circle-information-small"],
         ["success", "circle-tick-small"],
@@ -26,28 +26,28 @@ let P = (() => {
         ["incomplete", "circle-dotted-part-x-small"],
         ["not-started", "circle-dotted-small"],
         ["in-progress", "circle-dotted-part-small"]
-      ]), c(this, i, b(this, m, "info")), b(this, h);
+      ]), n(this, l, h(this, e, "info")), h(this, i);
     }
     /** The type of the status. */
     get type() {
-      return y(this, i);
+      return u(this, l);
     }
-    set type(a) {
-      c(this, i, a);
+    set type(o) {
+      n(this, l, o);
     }
     _handleSlotchange() {
-      const a = Array.from(this.children).find((l) => l.localName === "sbb-title");
-      a && (a.slot = "title");
+      const o = Array.from(this.children).find((a) => a.localName === "sbb-title");
+      o && (o.slot = "title");
     }
-    _configureTitle(a) {
-      const l = a.target.assignedElements().find((n) => n.localName === "sbb-title");
-      l && (customElements.upgrade(l), l.visualLevel = "5");
+    _configureTitle(o) {
+      const a = o.target.assignedElements().find((c) => c.localName === "sbb-title");
+      a && (customElements.upgrade(a), a.visualLevel = "5");
     }
     renderIconName() {
       return super.renderIconName() || this._statusTypes.get(this.type);
     }
     render() {
-      return S`
+      return y`
       <span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
       <span class="sbb-status__content">
         <slot name="title" @slotchange=${this._configureTitle}></slot>
@@ -57,13 +57,13 @@ let P = (() => {
       </span>
     `;
     }
-  }, i = new WeakMap(), r = o, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-    u = [k({ reflect: !0 })], f(o, null, u, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (l) => "type" in l, get: (l) => l.type, set: (l, n) => {
-      l.type = n;
-    } }, metadata: a }, m, h), f(null, s = { value: r }, t, { kind: "class", name: r.name, metadata: a }, null, e), r = s.value, a && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), o.styles = [E, T], b(r, e), r;
+  }, l = new WeakMap(), (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    s = [f({ reflect: !0 })], d(r, null, s, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (a) => "type" in a, get: (a) => a.type, set: (a, c) => {
+      a.type = c;
+    } }, metadata: o }, e, i), o && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), r.elementName = "sbb-status", r.styles = [v, z], r;
 })();
 export {
-  P as SbbStatusElement
+  M as SbbStatusElement
 };

package/status.js

@@ -1,4 +1,5 @@
-import { SbbStatusElement as b } from "./status/status.component.js";
+import { SbbStatusElement as e } from "./status/status.component.js";
+e.define();
 export {
-  b as SbbStatusElement
+  e as SbbStatusElement
 };

package/status.pure.js

@@ -0,0 +1,4 @@
+import { SbbStatusElement as b } from "./status/status.component.js";
+export {
+  b as SbbStatusElement
+};

package/stepper/step/step.component.js

@@ -1,116 +1,111 @@
-import { __esDecorate as b, __runInitializers as p } from "tslib";
-import { ResizeController as h } from "@lit-labs/observers/resize-controller.js";
-import { css as d, LitElement as c, html as m } from "lit";
-import { customElement as u } from "lit/decorators.js";
-import { SbbPropertyWatcherController as v } from "../../core/controllers.js";
-import { SbbElementInternalsMixin as y, removeAriaElements as g, appendAriaElements as f } from "../../core/mixins.js";
-import { boxSizingStyles as _ } from "../../core/styles.js";
-const E = d`:host{--sbb-step-position: initial;--sbb-step-inset-block-start: unset;--sbb-step-opacity: 0;--sbb-step-display: none;--sbb-step-height: 0;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-animation-delay: 0;display:contents}:host(:is(:state(selected),[state--selected])){--sbb-step-opacity: 1;--sbb-step-display: block;--sbb-step-height: fit-content;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-step--wrapper{margin-inline-start:var(--sbb-spacing-fixed-4x);opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-step--wrapper{opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),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);transition-behavior:allow-discrete}.sbb-step{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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);display:var(--sbb-step-display);height:var(--sbb-step-height);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{.sbb-step{--sbb-step-opacity: 0}}`;
-let x = 0, A = (() => {
-  var e;
-  let l = [u("sbb-step")], n, r = [], s, o = y(c);
-  return e = class extends o {
-    /** The label of the step. */
-    get label() {
-      return this._label;
-    }
-    get stepper() {
-      return this.closest("sbb-stepper");
-    }
-    constructor() {
-      super(), this._stepResizeObserver = new h(this, {
-        target: null,
-        skipInitial: !0,
-        callback: () => setTimeout(() => this._onStepElementResize())
-      }), this._label = null, this.addEventListener?.("click", (t) => this._handleClick(t)), this.addController(new v(this, () => this.stepper, {
-        orientation: (t) => {
-          this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = t.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
-        }
-      }));
-    }
-    /**
-     * Selects and configures the step.
-     * @internal
-     * TODO: @breaking-change: make protected
-     */
-    select() {
-      !this.hasUpdated || !this.label || (this.internals.states.add("selected"), this.label.select());
-    }
-    /**
-     * Deselects and configures the step.
-     * @internal
-     * TODO: @breaking-change: make protected
-     */
-    deselect() {
-      this.label && (this.internals.states.delete("selected"), this.label.deselect());
-    }
-    /**
-     * Emits a validate event whenever step switch is triggered.
-     * @internal
-     * TODO: @breaking-change: make protected
-     */
-    validate(t) {
-      return this.dispatchEvent(new CustomEvent("validate", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0,
-        detail: t
-      }));
-    }
-    /**
-     * Configures the step.
-     * @internal
-     * TODO: @breaking-change: make protected
-     */
-    configure(t) {
-      t && this._assignLabel();
-    }
-    /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
-    _handleClick(t) {
-      const i = t.composedPath().filter((a) => a instanceof window.HTMLElement);
-      i.some((a) => this._isGoNextElement(a)) ? this.stepper?.next() : i.some((a) => this._isGoPreviousElement(a)) && this.stepper?.previous();
-    }
-    _isGoNextElement(t) {
-      return t.hasAttribute("sbb-stepper-next") && !t.hasAttribute("disabled");
-    }
-    _isGoPreviousElement(t) {
-      return t.hasAttribute("sbb-stepper-previous") && !t.hasAttribute("disabled");
-    }
-    _onStepElementResize() {
-      this.matches(":is(:state(selected),[state--selected])") && this.dispatchEvent(new Event("resizechange", { bubbles: !0 }));
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-step-${x++}`, this.slot ||= "step", this._assignLabel();
-    }
-    firstUpdated(t) {
-      super.firstUpdated(t), this.updateComplete.then(() => {
-        this._stepResizeObserver.observe(this.shadowRoot.querySelector(".sbb-step"));
-      });
-    }
-    _assignLabel() {
-      let t = this.previousElementSibling;
-      for (; t && t.localName !== "sbb-step-label"; )
-        t = t.previousElementSibling;
-      const i = t;
-      this.internals.ariaLabelledByElements = g(this.internals.ariaLabelledByElements, this._label), this._label = i instanceof Element ? i : null, this.internals.ariaLabelledByElements = f(this.internals.ariaLabelledByElements, this._label);
-    }
-    render() {
-      return m`
+import { ResizeController as n } from "@lit-labs/observers/resize-controller.js";
+import { css as r, html as o } from "lit";
+import { SbbElement as b } from "../../core/base-elements.js";
+import { SbbPropertyWatcherController as l } from "../../core/controllers.js";
+import { removeAriaElements as p, appendAriaElements as h } from "../../core/mixins.js";
+import { boxSizingStyles as d } from "../../core/styles.js";
+const c = r`:host{--sbb-step-position: initial;--sbb-step-inset-block-start: unset;--sbb-step-opacity: 0;--sbb-step-display: none;--sbb-step-height: 0;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-animation-delay: 0;display:contents}:host(:is(:state(selected),[state--selected])){--sbb-step-opacity: 1;--sbb-step-display: block;--sbb-step-height: fit-content;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-step--wrapper{margin-inline-start:var(--sbb-spacing-fixed-4x);opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-step--wrapper{opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),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);transition-behavior:allow-discrete}.sbb-step{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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);display:var(--sbb-step-display);height:var(--sbb-step-height);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{.sbb-step{--sbb-step-opacity: 0}}`;
+let v = 0;
+const e = class e extends b {
+  /** The label of the step. */
+  get label() {
+    return this._label;
+  }
+  get stepper() {
+    return this.closest("sbb-stepper");
+  }
+  constructor() {
+    super(), this._stepResizeObserver = new n(this, {
+      target: null,
+      skipInitial: !0,
+      callback: () => setTimeout(() => this._onStepElementResize())
+    }), this._label = null, this.addEventListener?.("click", (t) => this._handleClick(t)), this.addController(new l(this, () => this.stepper, {
+      orientation: (t) => {
+        this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = t.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
+      }
+    }));
+  }
+  /**
+   * Selects and configures the step.
+   * @internal
+   * TODO: @breaking-change: make protected
+   */
+  select() {
+    !this.hasUpdated || !this.label || (this.internals.states.add("selected"), this.label.select());
+  }
+  /**
+   * Deselects and configures the step.
+   * @internal
+   * TODO: @breaking-change: make protected
+   */
+  deselect() {
+    this.label && (this.internals.states.delete("selected"), this.label.deselect());
+  }
+  /**
+   * Emits a validate event whenever step switch is triggered.
+   * @internal
+   * TODO: @breaking-change: make protected
+   */
+  validate(t) {
+    return this.dispatchEvent(new CustomEvent("validate", {
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0,
+      detail: t
+    }));
+  }
+  /**
+   * Configures the step.
+   * @internal
+   * TODO: @breaking-change: make protected
+   */
+  configure(t) {
+    t && this._assignLabel();
+  }
+  /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
+  _handleClick(t) {
+    const s = t.composedPath().filter((i) => i instanceof window.HTMLElement);
+    s.some((i) => this._isGoNextElement(i)) ? this.stepper?.next() : s.some((i) => this._isGoPreviousElement(i)) && this.stepper?.previous();
+  }
+  _isGoNextElement(t) {
+    return t.hasAttribute("sbb-stepper-next") && !t.hasAttribute("disabled");
+  }
+  _isGoPreviousElement(t) {
+    return t.hasAttribute("sbb-stepper-previous") && !t.hasAttribute("disabled");
+  }
+  _onStepElementResize() {
+    this.matches(":is(:state(selected),[state--selected])") && this.dispatchEvent(new Event("resizechange", { bubbles: !0 }));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.id ||= `sbb-step-${v++}`, this.slot ||= "step", this._assignLabel();
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.updateComplete.then(() => {
+      this._stepResizeObserver.observe(this.shadowRoot.querySelector(".sbb-step"));
+    });
+  }
+  _assignLabel() {
+    let t = this.previousElementSibling;
+    for (; t && t.localName !== "sbb-step-label"; )
+      t = t.previousElementSibling;
+    const s = t;
+    this.internals.ariaLabelledByElements = p(this.internals.ariaLabelledByElements, this._label), this._label = s instanceof Element ? s : null, this.internals.ariaLabelledByElements = h(this.internals.ariaLabelledByElements, this._label);
+  }
+  render() {
+    return o`
       <div class="sbb-step--wrapper">
         <div class="sbb-step">
           <slot></slot>
         </div>
       </div>
     `;
-    }
-  }, s = e, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    b(null, n = { value: s }, l, { kind: "class", name: s.name, metadata: t }, null, r), s = n.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), e.role = "tabpanel", e.styles = [_, E], e.events = {
-    validate: "validate",
-    resizechange: "resizechange"
-  }, p(s, r), s;
-})();
+  }
+};
+e.elementName = "sbb-step", e.role = "tabpanel", e.styles = [d, c], e.events = {
+  validate: "validate",
+  resizechange: "resizechange"
+};
+let a = e;
 export {
-  A as SbbStepElement
+  a as SbbStepElement
 };

package/stepper/step-label/step-label.component.js

@@ -1,102 +1,96 @@
-import { __esDecorate as n, __runInitializers as p } from "tslib";
-import { css as c, html as d } from "lit";
-import { customElement as h } from "lit/decorators.js";
-import { SbbButtonBaseElement as f } from "../../core/base-elements.js";
-import { SbbPropertyWatcherController as v } from "../../core/controllers.js";
-import { SbbDisabledMixin as x, removeAriaElements as u, appendAriaElements as m } from "../../core/mixins.js";
-import { boxSizingStyles as g } from "../../core/styles.js";
-import { SbbIconNameMixin as y } from "../../icon.js";
-const z = c`:host{--sbb-step-label-color: var(--sbb-color-4);--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, 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-border-color-4-inverted);--sbb-step-label-prefix-background-color: var(--sbb-background-color-1);--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-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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-text-font-size-l) * var(--sbb-typo-line-height-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(:is(:state(selected),[state--selected])){--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;--sbb-step-label-color: var(--sbb-color-3)}@media(forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color: Highlight !important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs)}:host(:is(:state(size-s),[state--size-s])):before{inset-block-start:calc(var(--sbb-text-font-size-m) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2)}:host(:disabled){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--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: var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color: var(--sbb-background-color-3);--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){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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(:is(:state(size-s),[state--size-s])) .sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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-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(:is(:state(orientation-horizontal),[state--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 _ = 0, B = (() => {
-  var s;
-  let l = [h("sbb-step-label")], r, o = [], i, b = y(x(f));
-  return s = class extends b {
-    /** The step controlled by the label. */
-    get step() {
-      return this._step;
-    }
-    get stepper() {
-      return this.closest("sbb-stepper");
-    }
-    set disabled(t) {
-      super.disabled = t, this.toggleState("user-disabled", t);
-    }
-    get disabled() {
-      return super.disabled;
-    }
-    constructor() {
-      super(), this._step = null, this.addEventListener?.("click", () => {
-        const t = this.stepper;
-        t && this.step && this._isNotDeactivatedByLinearMode(this.step) && (t.selected = this.step);
-      }), this.addController(new v(this, () => this.stepper, {
-        orientation: (t) => {
-          this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = t.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
-        },
-        size: (t) => {
-          this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = t.size, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
-        }
-      }));
-    }
-    _isNotDeactivatedByLinearMode(t) {
-      const e = this.stepper;
-      if (e?.linear && e.selectedIndex !== null) {
-        const a = e.steps.indexOf(t);
-        return a < e.selectedIndex || a === e.selectedIndex + 1;
+import { css as a, html as o } from "lit";
+import { SbbButtonBaseElement as b } from "../../core/base-elements.js";
+import { SbbPropertyWatcherController as n } from "../../core/controllers.js";
+import { SbbDisabledMixin as l, removeAriaElements as p, appendAriaElements as c } from "../../core/mixins.js";
+import { boxSizingStyles as d } from "../../core/styles.js";
+import { SbbIconNameMixin as h } from "../../icon.js";
+const f = a`:host{--sbb-step-label-color: var(--sbb-color-4);--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, 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-border-color-4-inverted);--sbb-step-label-prefix-background-color: var(--sbb-background-color-1);--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-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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-text-font-size-l) * var(--sbb-typo-line-height-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(:is(:state(selected),[state--selected])){--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;--sbb-step-label-color: var(--sbb-color-3)}@media(forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color: Highlight !important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs)}:host(:is(:state(size-s),[state--size-s])):before{inset-block-start:calc(var(--sbb-text-font-size-m) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2)}:host(:disabled){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--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: var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color: var(--sbb-background-color-3);--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){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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(:is(:state(size-s),[state--size-s])) .sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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-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(:is(:state(orientation-horizontal),[state--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 v = 0;
+const s = class s extends h(l(b)) {
+  /** The step controlled by the label. */
+  get step() {
+    return this._step;
+  }
+  get stepper() {
+    return this.closest("sbb-stepper");
+  }
+  set disabled(t) {
+    super.disabled = t, this.toggleState("user-disabled", t);
+  }
+  get disabled() {
+    return super.disabled;
+  }
+  constructor() {
+    super(), this._step = null, this.addEventListener?.("click", () => {
+      const t = this.stepper;
+      t && this.step && this._isNotDeactivatedByLinearMode(this.step) && (t.selected = this.step);
+    }), this.addController(new n(this, () => this.stepper, {
+      orientation: (t) => {
+        this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = t.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
+      },
+      size: (t) => {
+        this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = t.size, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
       }
-      return !0;
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-step-label-${_++}`, this.slot ||= "step-label", this.internals.ariaSelected = "false", this.tabIndex = -1, this._assignStep();
-    }
-    /**
-     * Selects and configures the step label.
-     * @internal
-     */
-    select() {
-      this.tabIndex = 0, this.internals.ariaSelected = "true", this.internals.states.add("selected");
+    }));
+  }
+  _isNotDeactivatedByLinearMode(t) {
+    const e = this.stepper;
+    if (e?.linear && e.selectedIndex !== null) {
+      const i = e.steps.indexOf(t);
+      return i < e.selectedIndex || i === e.selectedIndex + 1;
     }
-    /**
-     * Deselects and configures the step label.
-     * @internal
-     */
-    deselect() {
-      this.tabIndex = -1, this.internals.ariaSelected = "false", this.internals.states.delete("selected");
-    }
-    /**
-     * Configures the step label.
-     * @internal
-     */
-    configure(t, e, a) {
-      a && this._assignStep(), this.internals.ariaPosInSet = `${t}`, this.internals.ariaSetSize = `${e}`;
-    }
-    _assignStep() {
-      let t = this.nextElementSibling;
-      for (; t && t.localName !== "sbb-step"; )
-        t = t.nextElementSibling;
-      const e = t;
-      this.internals.ariaControlsElements = u(this.internals.ariaControlsElements, this._step), this._step = e instanceof Element ? e : null, this.internals.ariaControlsElements = m(this.internals.ariaControlsElements, this._step);
-    }
-    /**
-     * @internal
-     * Disables the step label and avoids setting the `disabled` state to preserve the initial
-     * disabled state in case of switching between linear and non-linear mode.
-     */
-    disable(t) {
-      super.disabled = t;
-    }
-    render() {
-      return d`
+    return !0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.id ||= `sbb-step-label-${v++}`, this.slot ||= "step-label", this.internals.ariaSelected = "false", this.tabIndex = -1, this._assignStep();
+  }
+  /**
+   * Selects and configures the step label.
+   * @internal
+   */
+  select() {
+    this.tabIndex = 0, this.internals.ariaSelected = "true", this.internals.states.add("selected");
+  }
+  /**
+   * Deselects and configures the step label.
+   * @internal
+   */
+  deselect() {
+    this.tabIndex = -1, this.internals.ariaSelected = "false", this.internals.states.delete("selected");
+  }
+  /**
+   * Configures the step label.
+   * @internal
+   */
+  configure(t, e, i) {
+    i && this._assignStep(), this.internals.ariaPosInSet = `${t}`, this.internals.ariaSetSize = `${e}`;
+  }
+  _assignStep() {
+    let t = this.nextElementSibling;
+    for (; t && t.localName !== "sbb-step"; )
+      t = t.nextElementSibling;
+    const e = t;
+    this.internals.ariaControlsElements = p(this.internals.ariaControlsElements, this._step), this._step = e instanceof Element ? e : null, this.internals.ariaControlsElements = c(this.internals.ariaControlsElements, this._step);
+  }
+  /**
+   * @internal
+   * Disables the step label and avoids setting the `disabled` state to preserve the initial
+   * disabled state in case of switching between linear and non-linear mode.
+   */
+  disable(t) {
+    super.disabled = t;
+  }
+  render() {
+    return o`
       <div class="sbb-step-label">
         <span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
         <span class="sbb-step-label__text"><slot></slot></span>
       </div>
     `;
-    }
-  }, i = s, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    n(null, r = { value: i }, l, { kind: "class", name: i.name, metadata: t }, null, o), i = r.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), s.role = "tab", s.styles = [g, z], p(i, o), i;
-})();
+  }
+};
+s.elementName = "sbb-step-label", s.role = "tab", s.styles = [d, f];
+let r = s;
 export {
-  B as SbbStepLabelElement
+  r as SbbStepLabelElement
 };

package/stepper/step-label.js

@@ -1,4 +1,7 @@
-import { SbbStepLabelElement as t } from "./step-label/step-label.component.js";
+import { SbbStepLabelElement as e } from "./step-label/step-label.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/stepper/step-label.js' has been deprecated.
+Use either '@sbb-esta/elements/stepper.js' or '@sbb-esta/elements/stepper.pure.js' instead.`);
 export {
-  t as SbbStepLabelElement
+  e as SbbStepLabelElement
 };

package/stepper/step.js

@@ -1,4 +1,7 @@
-import { SbbStepElement as b } from "./step/step.component.js";
+import { SbbStepElement as e } from "./step/step.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/stepper/step.js' has been deprecated.
+Use either '@sbb-esta/elements/stepper.js' or '@sbb-esta/elements/stepper.pure.js' instead.`);
 export {
-  b as SbbStepElement
+  e as SbbStepElement
 };