@sbb-esta/lyne-elements 2.0.1 → 2.0.2

package/slider.js

@@ -1,35 +1,35 @@
-var H = (t) => {
+var L = (t) => {
   throw TypeError(t);
 };
-var L = (t, r, l) => r.has(t) || H("Cannot " + l);
-var f = (t, r, l) => (L(t, r, "read from private field"), l ? l.call(t) : r.get(t)), p = (t, r, l) => r.has(t) ? H("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, l), b = (t, r, l, o) => (L(t, r, "write to private field"), o ? o.call(t, l) : r.set(t, l), l);
+var O = (t, r, l) => r.has(t) || L("Cannot " + l);
+var f = (t, r, l) => (O(t, r, "read from private field"), l ? l.call(t) : r.get(t)), p = (t, r, l) => r.has(t) ? L("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, l), b = (t, r, l, o) => (O(t, r, "write to private field"), o ? o.call(t, l) : r.set(t, l), l);
 import { __esDecorate as d, __runInitializers as n } from "tslib";
-import { css as O, LitElement as j, html as y, nothing as x } from "lit";
+import { css as j, LitElement as H, html as y, nothing as x } from "lit";
 import { customElement as K, property as c, state as Y } from "lit/decorators.js";
 import { ref as q } from "lit/directives/ref.js";
 import { styleMap as J } from "lit/directives/style-map.js";
-import { SbbConnectedAbortController as P } from "./core/controllers.js";
-import { hostAttributes as Q, forceType as k } from "./core/decorators.js";
-import { EventEmitter as W, forwardEventToHost as X } from "./core/eventing.js";
-import { SbbDisabledMixin as Z, SbbFormAssociatedMixin as ee } from "./core/mixins.js";
+import { hostAttributes as P, forceType as k } from "./core/decorators.js";
+import { EventEmitter as Q, forwardEvent as W } from "./core/eventing.js";
+import { SbbDisabledMixin as X, SbbFormAssociatedMixin as Z } from "./core/mixins.js";
 import "./icon.js";
-const se = O`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%);--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host(:disabled){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;top:0;right:0;bottom:0;left:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
-let me = (() => {
+const ee = j`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%);--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host(:disabled){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;top:0;right:0;bottom:0;left:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
+let he = (() => {
   var h, u, m, v, a;
-  let t = [K("sbb-slider"), Q({
+  let t = [K("sbb-slider"), P({
     tabindex: "0"
-  })], r, l = [], o, w = Z(ee(j)), _ = [], I, z, F, N, S, M = [], A = [], E, V = [], C = [], D, $ = [], T = [], U, B = [], R = [];
+  })], r, l = [], o, w = X(Z(H)), _ = [], I, z, F, N, M, S = [], E = [], V, A = [], D = [], C, $ = [], T = [], U, B = [], R = [];
   var g = (a = class extends w {
     constructor() {
+      var e;
       super();
       p(this, h);
       p(this, u);
       p(this, m);
       p(this, v);
-      this._min = (n(this, _), "0"), this._max = "100", b(this, h, n(this, M, !1)), b(this, u, (n(this, A), n(this, V, ""))), b(this, m, (n(this, C), n(this, $, ""))), b(this, v, (n(this, T), n(this, B, 0))), this._didChange = (n(this, R), new W(this, g.events.didChange, {
+      this._min = (n(this, _), "0"), this._max = "100", b(this, h, n(this, S, !1)), b(this, u, (n(this, E), n(this, A, ""))), b(this, m, (n(this, D), n(this, $, ""))), b(this, v, (n(this, T), n(this, B, 0))), this._didChange = (n(this, R), new Q(this, g.events.didChange, {
         bubbles: !0,
         cancelable: !0
-      })), this._abort = new P(this), this.internals.role = "slider";
+      })), this.internals.role = "slider", (e = this.addEventListener) == null || e.call(this, "keydown", (s) => this._handleKeydown(s));
     }
     /**
      * Value of the form element.
@@ -43,7 +43,7 @@ let me = (() => {
     }
     /** Numeric value for the inner HTMLInputElement. */
     set valueAsNumber(e) {
-      this.value = e == null ? void 0 : e.toString();
+      this.value = (e == null ? void 0 : e.toString()) ?? null;
     }
     get valueAsNumber() {
       return Number(this.value);
@@ -104,9 +104,7 @@ let me = (() => {
       b(this, v, e);
     }
     connectedCallback() {
-      super.connectedCallback();
-      const e = this._abort.signal;
-      this.addEventListener("keydown", (s) => this._handleKeydown(s), { signal: e }), this.value || (this.value = this._getDefaultValue());
+      super.connectedCallback(), this.value || (this.value = this._getDefaultValue());
     }
     willUpdate(e) {
       super.willUpdate(e), e.has("min") && (this.internals.ariaValueMin = this.min), e.has("max") && (this.internals.ariaValueMax = this.max), e.has("readonly") && (this.internals.ariaReadOnly = (!!this.readonly).toString());
@@ -168,7 +166,7 @@ let me = (() => {
     }
     /** Emits the change event. */
     _emitChange(e) {
-      X(e, this), this._didChange.emit();
+      W(e, this), this._didChange.emit();
     }
     render() {
       return y`
@@ -207,7 +205,7 @@ let me = (() => {
     }
   }, h = new WeakMap(), u = new WeakMap(), m = new WeakMap(), v = new WeakMap(), o = a, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
-    I = [c()], z = [c({ attribute: "value-as-number", type: Number })], F = [c()], N = [c()], S = [k(), c({ type: Boolean })], E = [k(), c({ attribute: "start-icon" })], D = [k(), c({ attribute: "end-icon" })], U = [Y()], d(a, null, I, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (s) => "value" in s, set: (s, i) => {
+    I = [c()], z = [c({ attribute: "value-as-number", type: Number })], F = [c()], N = [c()], M = [k(), c({ type: Boolean })], V = [k(), c({ attribute: "start-icon" })], C = [k(), c({ attribute: "end-icon" })], U = [Y()], d(a, null, I, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (s) => "value" in s, set: (s, i) => {
       s.value = i;
     } }, metadata: e }, null, _), d(a, null, z, { kind: "setter", name: "valueAsNumber", static: !1, private: !1, access: { has: (s) => "valueAsNumber" in s, set: (s, i) => {
       s.valueAsNumber = i;
@@ -215,20 +213,20 @@ let me = (() => {
       s.min = i;
     } }, metadata: e }, null, _), d(a, null, N, { kind: "setter", name: "max", static: !1, private: !1, access: { has: (s) => "max" in s, set: (s, i) => {
       s.max = i;
-    } }, metadata: e }, null, _), d(a, null, S, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (s) => "readonly" in s, get: (s) => s.readonly, set: (s, i) => {
+    } }, metadata: e }, null, _), d(a, null, M, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (s) => "readonly" in s, get: (s) => s.readonly, set: (s, i) => {
       s.readonly = i;
-    } }, metadata: e }, M, A), d(a, null, E, { kind: "accessor", name: "startIcon", static: !1, private: !1, access: { has: (s) => "startIcon" in s, get: (s) => s.startIcon, set: (s, i) => {
+    } }, metadata: e }, S, E), d(a, null, V, { kind: "accessor", name: "startIcon", static: !1, private: !1, access: { has: (s) => "startIcon" in s, get: (s) => s.startIcon, set: (s, i) => {
       s.startIcon = i;
-    } }, metadata: e }, V, C), d(a, null, D, { kind: "accessor", name: "endIcon", static: !1, private: !1, access: { has: (s) => "endIcon" in s, get: (s) => s.endIcon, set: (s, i) => {
+    } }, metadata: e }, A, D), d(a, null, C, { kind: "accessor", name: "endIcon", static: !1, private: !1, access: { has: (s) => "endIcon" in s, get: (s) => s.endIcon, set: (s, i) => {
       s.endIcon = i;
     } }, metadata: e }, $, T), d(a, null, U, { kind: "accessor", name: "_valueFraction", static: !1, private: !1, access: { has: (s) => "_valueFraction" in s, get: (s) => s._valueFraction, set: (s, i) => {
       s._valueFraction = i;
     } }, metadata: e }, B, R), d(null, r = { value: o }, t, { kind: "class", name: o.name, metadata: e }, null, l), g = o = r.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a.styles = se, a.events = {
+  })(), a.styles = ee, a.events = {
     didChange: "didChange"
   }, n(o, l), a);
   return g = o;
 })();
 export {
-  me as SbbSliderElement
+  he as SbbSliderElement
 };

package/standard-theme.css

@@ -1485,8 +1485,9 @@ sbb-teaser :is(sbb-image, img) {
   }
 }
 :is(sbb-teaser-hero) img {
-  width: 100%;
   display: block;
+  align-self: stretch;
+  width: 100%;
 }
 
 sbb-train-formation:has(sbb-train[direction-label]) {
@@ -1814,10 +1815,27 @@ sup {
   --sbb-step-list-dimensions: 2.125rem;
   --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
   --sbb-step-list-to-text-gap: var(--sbb-spacing-responsive-xxxs);
-  --sbb-step-list-text-to-marker-block-offset: calc(0.5 * (var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size)));
+  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
+  --sbb-step-list-text-to-marker-block-offset: calc(
+    0.5 *
+      (
+        var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-body-text) *
+          var(--sbb-text-font-size)
+      )
+  );
   list-style: none;
   margin: 0;
   padding: 0;
+  counter-reset: steps;
+  color: var(--sbb-color-iron);
+}
+.sbb-step-list:where(.sbb-text-s) {
+  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
+}
+.sbb-step-list:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) {
+  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
 }
 @media (min-width: calc(52.5rem)) {
   .sbb-step-list:where(.sbb-text-xl) {
@@ -1826,8 +1844,11 @@ sup {
 }
 .sbb-step-list > li {
   position: relative;
+  counter-increment: steps;
+  background-color: var(--sbb-color-milk);
+  padding-block: calc(var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)) var(--sbb-step-list-padding-block);
   padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-dimensions) + var(--sbb-step-list-to-text-gap)) var(--sbb-step-list-padding-inline);
-  min-height: var(--sbb-step-list-dimensions);
+  min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
 }
 .sbb-step-list > li::before {
   --sbb-text-font-size: var(--sbb-font-size-text-xxs);
@@ -1837,11 +1858,17 @@ sup {
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
+  content: counter(steps);
   position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: var(--sbb-step-list-dimensions);
   width: var(--sbb-step-list-dimensions);
   margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
   inset-inline-start: var(--sbb-step-list-padding-inline);
+  color: var(--sbb-color-charcoal);
+  border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
   border-radius: 50%;
 }
 .sbb-step-list > li + li {
@@ -1853,34 +1880,6 @@ sup {
 .sbb-step-list > li > * + p {
   margin-block-start: var(--sbb-spacing-responsive-xxxs);
 }
-.sbb-step-list {
-  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
-  --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
-  counter-reset: steps;
-  color: var(--sbb-color-iron);
-}
-.sbb-step-list:where(.sbb-text-s) {
-  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
-}
-.sbb-step-list:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) {
-  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
-}
-.sbb-step-list > li {
-  counter-increment: steps;
-  background-color: var(--sbb-color-milk);
-  padding-block: calc(var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)) var(--sbb-step-list-padding-block);
-  padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-dimensions) + var(--sbb-step-list-to-text-gap)) var(--sbb-step-list-padding-inline);
-  min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
-}
-.sbb-step-list > li::before {
-  content: counter(steps);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
-  color: var(--sbb-color-charcoal);
-}
 .sbb-step-list > li:first-of-type {
   border-start-start-radius: var(--sbb-step-list-border-radius);
   border-start-end-radius: var(--sbb-step-list-border-radius);
@@ -1891,39 +1890,27 @@ sup {
 }
 
 .sbb-icon-list {
-  --sbb-icon-list-dimensions: 2.125rem;
-  --sbb-icon-list-padding-inline: var(--sbb-spacing-responsive-xxs);
-  --sbb-icon-list-to-text-gap: var(--sbb-spacing-responsive-xxxs);
-  --sbb-icon-list-text-to-marker-block-offset: calc(0.5 * (var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size)));
+  --sbb-icon-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.104 13.305 5-6.5-.792-.61-4.69 6.096-2.102-1.681-.624.78 2.5 2 .398.319z" clip-rule="evenodd"></path></svg>');
+  --sbb-icon-list-marker-icon-color: currentcolor;
+  --sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small);
+  --sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-icon-list-text-to-marker-block-offset: calc(
+    0.5 *
+      (
+        var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-body-text) *
+          var(--sbb-text-font-size)
+      )
+  );
   list-style: none;
   margin: 0;
   padding: 0;
 }
-@media (min-width: calc(52.5rem)) {
-  .sbb-icon-list:where(.sbb-text-xl) {
-    --sbb-icon-list-dimensions: 2.5625rem;
-  }
-}
 .sbb-icon-list > li {
   position: relative;
-  padding-inline: calc(var(--sbb-icon-list-padding-inline) + var(--sbb-icon-list-dimensions) + var(--sbb-icon-list-to-text-gap)) var(--sbb-icon-list-padding-inline);
+  padding-inline: calc(var(--sbb-icon-list-dimensions) + var(--sbb-icon-list-to-text-gap)) 0;
   min-height: var(--sbb-icon-list-dimensions);
 }
-.sbb-icon-list > li::before {
-  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  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: bold;
-  position: absolute;
-  height: var(--sbb-icon-list-dimensions);
-  width: var(--sbb-icon-list-dimensions);
-  margin-block-start: calc(-1 * var(--sbb-icon-list-text-to-marker-block-offset));
-  inset-inline-start: var(--sbb-icon-list-padding-inline);
-  border-radius: 50%;
-}
 .sbb-icon-list > li + li {
   margin-block-start: var(--sbb-icon-list-vertical-gap);
 }
@@ -1933,15 +1920,13 @@ sup {
 .sbb-icon-list > li > * + p {
   margin-block-start: var(--sbb-spacing-responsive-xxxs);
 }
-.sbb-icon-list {
-  --sbb-icon-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.104 13.305 5-6.5-.792-.61-4.69 6.096-2.102-1.681-.624.78 2.5 2 .398.319z" clip-rule="evenodd"></path></svg>');
-  --sbb-icon-list-marker-icon-color: currentcolor;
-  --sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small);
-  --sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x);
-}
 .sbb-icon-list > li::before {
   content: "";
+  position: absolute;
+  width: var(--sbb-icon-list-dimensions);
+  height: var(--sbb-icon-list-dimensions);
+  margin-block-start: calc(-1 * var(--sbb-icon-list-text-to-marker-block-offset));
+  inset-inline-start: 0;
   background-color: var(--sbb-icon-list-marker-icon-color);
   mask-image: var(--sbb-icon-list-marker-icon);
   mask-repeat: no-repeat;

package/stepper/step/step.d.ts

@@ -1,10 +1,10 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { SbbStepLabelElement } from '../step-label.js';
 export type SbbStepValidateEventDetails = {
-    currentIndex?: number;
-    currentStep?: SbbStepElement;
-    nextIndex?: number;
-    nextStep?: SbbStepElement;
+    currentIndex: number | null;
+    currentStep: SbbStepElement | null;
+    nextIndex: number | null;
+    nextStep: SbbStepElement | null;
 };
 /**
  * Combined with a `sbb-stepper`, it displays a step's content.
@@ -20,12 +20,12 @@ export declare class SbbStepElement extends LitElement {
     /** Emits whenever step switch is triggered. */
     private _validate;
     private _loaded;
-    private _abort;
     private _stepper;
     private _label;
     private _stepResizeObserver;
     /** The label of the step. */
     get label(): SbbStepLabelElement | null;
+    constructor();
     /**
      * Selects and configures the step.
      * @internal

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,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"}
+{"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;AAKb,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;CACjC,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,QAAQ,CAAkC;IAClD,OAAO,CAAC,MAAM,CAAoC;IAClD,OAAO,CAAC,mBAAmB,CAIxB;IAEH,6BAA6B;IAC7B,IAAW,KAAK,IAAI,mBAAmB,GAAG,IAAI,CAE7C;;IAOD;;;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;cAOtB,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

@@ -12,9 +12,9 @@ export declare class SbbStepLabelElement extends SbbStepLabelElement_base {
     static styles: CSSResultGroup;
     /** The step controlled by the label. */
     get step(): SbbStepElement | null;
-    private _abort;
     private _stepper;
     private _step;
+    constructor();
     private _getStep;
     connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;

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,qBAOM,mBAAoB,SAAQ,wBAAwD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,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;AAInE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;;AAOjD;;;;;GAKG;AACH,qBAOM,mBAAoB,SAAQ,wBAAwD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wCAAwC;IACxC,IAAW,IAAI,IAAI,cAAc,GAAG,IAAI,CAEvC;IAED,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,KAAK,CAA+B;;IAW5C,OAAO,CAAC,QAAQ;IAQA,iBAAiB,IAAI,IAAI;cAWtB,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

@@ -2,26 +2,28 @@ 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-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-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 = (() => {
+import { hostAttributes as v } from "../core/decorators.js";
+import { SbbDisabledMixin as x } from "../core/mixins.js";
+import { SbbIconNameMixin as m } from "../icon.js";
+const u = 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-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-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 g = 0, E = (() => {
   var s;
-  let b = [f("sbb-step-label"), x({
+  let b = [f("sbb-step-label"), v({
     slot: "step-label",
     tabindex: "-1",
     role: "tab"
-  })], a, i = [], e, r = u(m(h));
+  })], a, i = [], e, r = m(x(h));
   return s = class extends r {
-    constructor() {
-      super(...arguments), this._abort = new v(this), this._stepper = null, this._step = null;
-    }
     /** The step controlled by the label. */
     get step() {
       return this._step;
     }
+    constructor() {
+      var t;
+      super(), this._stepper = null, this._step = null, (t = this.addEventListener) == null || t.call(this, "click", () => {
+        this._stepper && this._step && (this._stepper.selected = this._step);
+      });
+    }
     _getStep() {
       let t = this.nextElementSibling;
       for (; t && t.localName !== "sbb-step"; )
@@ -29,11 +31,7 @@ let y = 0, B = (() => {
       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 });
+      super.connectedCallback(), this.id = this.id || `sbb-step-label-${g++}`, this.internals.ariaSelected = "false", this._stepper = this.closest("sbb-stepper"), this._step = this._getStep(), this.toggleAttribute("data-disabled", this.hasAttribute("disabled"));
     }
     firstUpdated(t) {
       super.firstUpdated(t), this.step && this.setAttribute("aria-controls", this.step.id);
@@ -70,8 +68,8 @@ let y = 0, B = (() => {
   }, 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;
+  })(), s.styles = u, p(e, i), e;
 })();
 export {
-  B as SbbStepLabelElement
+  E as SbbStepLabelElement
 };

package/stepper/step.js

@@ -1,29 +1,29 @@
 import { __esDecorate as d, __runInitializers as c } 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-duration, 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 = (() => {
+import { css as u, html as v, LitElement as f } from "lit";
+import { customElement as g } from "lit/decorators.js";
+import { hostAttributes as y } from "../core/decorators.js";
+import { EventEmitter as _ } from "../core/eventing.js";
+const x = 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-duration, 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, L = (() => {
   var e;
-  let h = [f("sbb-step"), _({
+  let h = [g("sbb-step"), y({
     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)
-      });
-    }
+  })], o, l = [], s, p = f;
+  var b = (e = class extends p {
     /** The label of the step. */
     get label() {
       return this._label;
     }
+    constructor() {
+      var t;
+      super(), this._validate = new _(this, b.events.validate), this._loaded = !1, this._stepper = null, this._label = null, this._stepResizeObserver = new m(this, {
+        target: null,
+        skipInitial: !0,
+        callback: (i) => this._onStepElementResize(i)
+      }), (t = this.addEventListener) == null || t.call(this, "click", (i) => this._handleClick(i));
+    }
     /**
      * Selects and configures the step.
      * @internal
@@ -78,9 +78,7 @@ let E = 0, P = (() => {
       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();
+      super.connectedCallback(), this.id = this.id || `sbb-step-${E++}`, 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"));
@@ -96,12 +94,12 @@ let E = 0, P = (() => {
     }
   }, s = e, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-    d(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 = {
+    d(null, o = { value: s }, h, { kind: "class", name: s.name, metadata: t }, null, l), b = s = o.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), e.styles = x, e.events = {
     validate: "validate"
   }, c(s, l), e);
-  return o = s;
+  return b = s;
 })();
 export {
-  P as SbbStepElement
+  L as SbbStepElement
 };

package/stepper/stepper/stepper.d.ts

@@ -13,9 +13,9 @@ export declare class SbbStepperElement extends SbbStepperElement_base {
     /** If set to true, only the current and previous labels can be clicked and selected. */
     accessor linear: boolean;
     /** Overrides the behaviour of `orientation` property. */
-    set horizontalFrom(value: SbbHorizontalFrom);
-    get horizontalFrom(): SbbHorizontalFrom | undefined;
-    private _horizontalFrom?;
+    set horizontalFrom(value: SbbHorizontalFrom | null);
+    get horizontalFrom(): SbbHorizontalFrom | null;
+    private _horizontalFrom;
     /** Steps orientation, either horizontal or vertical. */
     accessor orientation: SbbOrientation;
     /**
@@ -24,17 +24,17 @@ export declare class SbbStepperElement extends SbbStepperElement_base {
      */
     accessor size: 's' | 'm';
     /** The currently selected step. */
-    set selected(step: SbbStepElement);
-    get selected(): SbbStepElement | undefined;
+    set selected(step: SbbStepElement | null);
+    get selected(): SbbStepElement | null;
     /** The currently selected step index. */
-    set selectedIndex(index: number);
-    get selectedIndex(): number | undefined;
+    set selectedIndex(index: number | null);
+    get selectedIndex(): number | null;
     /** The steps of the stepper. */
     get steps(): SbbStepElement[];
     private get _enabledSteps();
     private _loaded;
-    private _abort;
     private _resizeObserverTimeout;
+    constructor();
     /** Selects the next step. */
     next(): void;
     /** Selects the previous step. */
@@ -51,6 +51,7 @@ export declare class SbbStepperElement extends SbbStepperElement_base {
     private _onStepperResize;
     private _configureLinearMode;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     private _proxySize;

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;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;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,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;AAMb,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,GAAG,IAAI,EAKxD;IACD,IAAW,cAAc,IAAI,iBAAiB,GAAG,IAAI,CAEpD;IACD,OAAO,CAAC,eAAe,CAAkC;IAEzD,wDAAwD;IACxD,SACgB,WAAW,EAAE,cAAc,CAAgB;IAE3D;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,mCAAmC;IACnC,IACW,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,EAI9C;IACD,IAAW,QAAQ,IAAI,cAAc,GAAG,IAAI,CAE3C;IAED,yCAAyC;IACzC,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAI5C;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,IAAI,CAExC;IAED,gCAAgC;IAChC,IAAW,KAAK,IAAI,cAAc,EAAE,CAEnC;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,sBAAsB,CAA8C;;IAO5E,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,CAUtB;IAEF,OAAO,CAAC,oBAAoB;IAUZ,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;cAKnB,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"}