@sbb-esta/lyne-elements 3.0.0-next.3 → 3.0.0

package/slider/slider.component.js

@@ -1,31 +1,27 @@
-var $ = (t) => {
+var V = (t) => {
   throw TypeError(t);
 };
-var C = (t, i, r) => i.has(t) || $("Cannot " + r);
-var _ = (t, i, r) => (C(t, i, "read from private field"), r ? r.call(t) : i.get(t)), f = (t, i, r) => i.has(t) ? $("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, r), v = (t, i, r, n) => (C(t, i, "write to private field"), n ? n.call(t, r) : i.set(t, r), r);
+var $ = (t, i, r) => i.has(t) || V("Cannot " + r);
+var m = (t, i, r) => ($(t, i, "read from private field"), r ? r.call(t) : i.get(t)), _ = (t, i, r) => i.has(t) ? V("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, r), v = (t, i, r, n) => ($(t, i, "write to private field"), n ? n.call(t, r) : i.set(t, r), r);
 import { __esDecorate as o, __runInitializers as c } from "tslib";
-import { css as T, LitElement as O, nothing as p, html as g } from "lit";
-import { customElement as U, property as h } from "lit/decorators.js";
-import { ref as B } from "lit/directives/ref.js";
-import { hostAttributes as F, forceType as D } from "../core/decorators.js";
-import { EventEmitter as R, forwardEvent as G } from "../core/eventing.js";
-import { SbbDisabledMixin as L, SbbReadonlyMixin as P, SbbFormAssociatedMixin as j, SbbElementInternalsMixin as H } from "../core/mixins.js";
+import { css as C, LitElement as T, nothing as p, html as f } from "lit";
+import { customElement as O, property as h } from "lit/decorators.js";
+import { ref as U } from "lit/directives/ref.js";
+import { hostAttributes as B, forceType as D } from "../core/decorators.js";
+import { SbbDisabledMixin as F, SbbReadonlyMixin as R, SbbFormAssociatedMixin as G, SbbElementInternalsMixin as L } from "../core/mixins.js";
 import "../icon.js";
-const K = T`@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%;inset: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) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, 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 ie = (() => {
+const P = C`@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%;inset: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) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, 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 Z = (() => {
   var b, d, a;
-  let t = [U("sbb-slider"), F({
+  let t = [O("sbb-slider"), B({
     tabindex: "0"
-  })], i, r = [], n, x = L(P(j(H(O)))), u = [], w, k, y, I, z, N = [], S = [], M, E = [], A = [];
-  var m = (a = class extends x {
+  })], i, r = [], n, g = F(R(G(L(T)))), u = [], x, w, k, y, I, z = [], N = [], E, M = [], S = [];
+  return a = class extends g {
     constructor() {
       super();
-      f(this, b);
-      f(this, d);
-      this._value = (c(this, u), null), this._min = "0", this._max = "100", v(this, b, c(this, N, "")), v(this, d, (c(this, S), c(this, E, ""))), this._didChange = (c(this, A), new R(this, m.events.didChange, {
-        bubbles: !0,
-        cancelable: !0
-      })), this.addEventListener?.("keydown", (e) => this._handleKeydown(e));
+      _(this, b);
+      _(this, d);
+      this._value = (c(this, u), null), this._min = "0", this._max = "100", v(this, b, c(this, z, "")), v(this, d, (c(this, N), c(this, M, ""))), this._rangeInput = c(this, S), this.addEventListener?.("keydown", (e) => this._handleKeydown(e));
     }
     /**
      * Value of the form element.
@@ -68,14 +64,14 @@ let ie = (() => {
     }
     /** Name of the icon at component's start, which will be forward to the nested `sbb-icon`. */
     get startIcon() {
-      return _(this, b);
+      return m(this, b);
     }
     set startIcon(e) {
       v(this, b, e);
     }
     /** Name of the icon at component's end, which will be forward to the nested `sbb-icon`. */
     get endIcon() {
-      return _(this, d);
+      return m(this, d);
     }
     set endIcon(e) {
       v(this, d, e);
@@ -120,8 +116,8 @@ let ie = (() => {
       return Math.max(+this.min, Math.min(+this.max, +e)).toString();
     }
     _valueFraction() {
-      const e = this.valueAsNumber, s = +this.min, l = +this.max, V = (e - s) / (l - s);
-      return isNaN(V) ? 0 : Math.max(0, Math.min(1, V));
+      const e = this.valueAsNumber, s = +this.min, l = +this.max, A = (e - s) / (l - s);
+      return isNaN(A) ? 0 : Math.max(0, Math.min(1, A));
     }
     async _handleKeydown(e) {
       if (e.key !== "Tab" && e.preventDefault(), !this.readOnly) {
@@ -143,15 +139,15 @@ let ie = (() => {
       }
     }
     /** Emits the change event. */
-    _emitChange(e) {
-      G(e, this), this._didChange.emit();
+    _dispatchChangeEvent() {
+      this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new Event("didChange", { bubbles: !0 }));
     }
     render() {
-      return g`
+      return f`
       <div class="sbb-slider__height-container">
         <div class="sbb-slider__wrapper">
           <slot name="prefix">
-            ${this.startIcon ? g`<sbb-icon name="${this.startIcon}"></sbb-icon>` : p}
+            ${this.startIcon ? f`<sbb-icon name="${this.startIcon}"></sbb-icon>` : p}
           </slot>
           <div class="sbb-slider__container">
             <input
@@ -162,9 +158,9 @@ let ie = (() => {
               value=${this.value || p}
               class="sbb-slider__range-input"
               type="range"
-              @change=${(e) => this._emitChange(e)}
+              @change=${() => this._dispatchChangeEvent()}
               @input=${() => this.value = this._rangeInput.value}
-              ${B((e) => this._rangeInput = e)}
+              ${U((e) => this._rangeInput = e)}
             />
             <div class="sbb-slider__line">
               <div class="sbb-slider__selected-line"></div>
@@ -172,32 +168,31 @@ let ie = (() => {
             <div class="sbb-slider__knob"></div>
           </div>
           <slot name="suffix">
-            ${this.endIcon ? g`<sbb-icon name="${this.endIcon}"></sbb-icon>` : p}
+            ${this.endIcon ? f`<sbb-icon name="${this.endIcon}"></sbb-icon>` : p}
           </slot>
         </div>
       </div>
     `;
     }
   }, b = new WeakMap(), d = new WeakMap(), n = a, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    w = [h()], k = [h({ attribute: "value-as-number", type: Number })], y = [h()], I = [h()], z = [D(), h({ attribute: "start-icon" })], M = [D(), h({ attribute: "end-icon" })], o(a, null, w, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (s) => "value" in s, set: (s, l) => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
+    x = [h()], w = [h({ attribute: "value-as-number", type: Number })], k = [h()], y = [h()], I = [D(), h({ attribute: "start-icon" })], E = [D(), h({ attribute: "end-icon" })], o(a, null, x, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (s) => "value" in s, set: (s, l) => {
       s.value = l;
-    } }, metadata: e }, null, u), o(a, null, k, { kind: "setter", name: "valueAsNumber", static: !1, private: !1, access: { has: (s) => "valueAsNumber" in s, set: (s, l) => {
+    } }, metadata: e }, null, u), o(a, null, w, { kind: "setter", name: "valueAsNumber", static: !1, private: !1, access: { has: (s) => "valueAsNumber" in s, set: (s, l) => {
       s.valueAsNumber = l;
-    } }, metadata: e }, null, u), o(a, null, y, { kind: "setter", name: "min", static: !1, private: !1, access: { has: (s) => "min" in s, set: (s, l) => {
+    } }, metadata: e }, null, u), o(a, null, k, { kind: "setter", name: "min", static: !1, private: !1, access: { has: (s) => "min" in s, set: (s, l) => {
       s.min = l;
-    } }, metadata: e }, null, u), o(a, null, I, { kind: "setter", name: "max", static: !1, private: !1, access: { has: (s) => "max" in s, set: (s, l) => {
+    } }, metadata: e }, null, u), o(a, null, y, { kind: "setter", name: "max", static: !1, private: !1, access: { has: (s) => "max" in s, set: (s, l) => {
       s.max = l;
-    } }, metadata: e }, null, u), o(a, null, z, { kind: "accessor", name: "startIcon", static: !1, private: !1, access: { has: (s) => "startIcon" in s, get: (s) => s.startIcon, set: (s, l) => {
+    } }, metadata: e }, null, u), o(a, null, I, { kind: "accessor", name: "startIcon", static: !1, private: !1, access: { has: (s) => "startIcon" in s, get: (s) => s.startIcon, set: (s, l) => {
       s.startIcon = l;
-    } }, metadata: e }, N, S), o(a, null, M, { kind: "accessor", name: "endIcon", static: !1, private: !1, access: { has: (s) => "endIcon" in s, get: (s) => s.endIcon, set: (s, l) => {
+    } }, metadata: e }, z, N), o(a, null, E, { kind: "accessor", name: "endIcon", static: !1, private: !1, access: { has: (s) => "endIcon" in s, get: (s) => s.endIcon, set: (s, l) => {
       s.endIcon = l;
-    } }, metadata: e }, E, A), o(null, i = { value: n }, t, { kind: "class", name: n.name, metadata: e }, null, r), m = n = i.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a.role = "slider", a.styles = K, a.events = {
+    } }, metadata: e }, M, S), o(null, i = { value: n }, t, { kind: "class", name: n.name, metadata: e }, null, r), n = i.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.role = "slider", a.styles = P, a.events = {
     didChange: "didChange"
-  }, c(n, r), a);
-  return m = n;
+  }, c(n, r), n;
 })();
 export {
-  ie as SbbSliderElement
+  Z as SbbSliderElement
 };

package/stepper/step/step.component.d.ts

@@ -11,22 +11,14 @@ declare const SbbStepElement_base: import('../../core/mixins.js').AbstractConstr
  * Combined with a `sbb-stepper`, it displays a step's content.
  *
  * @slot - Use the unnamed slot to provide content.
- * @event {CustomEvent<SbbStepValidateEventDetails>} validate - Emits whenever step switch is triggered. Can be canceled.
  */
 export declare class SbbStepElement extends SbbStepElement_base {
     static readonly role = "tabpanel";
     static styles: CSSResultGroup;
     static readonly events: {
         readonly validate: "validate";
-        readonly resizeChange: "resizeChange";
+        readonly resizechange: "resizechange";
     };
-    /** Emits whenever step switch is triggered. */
-    private _validate;
-    /**
-     * @internal
-     * Emits when a resize happens, used to avoid setting the height of the stepper from the step component.
-     */
-    private _resizeChange;
     private _stepper;
     private _stepResizeObserver;
     /** The label of the step. */
@@ -70,7 +62,7 @@ declare global {
 }
 declare global {
     interface GlobalEventHandlersEventMap {
-        resizeChange: CustomEvent<void>;
+        resizechange: CustomEvent<void>;
     }
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"step.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step/step.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AASb,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,qBAEM,cAAe,SAAQ,mBAAoC;IAC/D,gBAAgC,IAAI,cAAc;IAClD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,+CAA+C;IAC/C,OAAO,CAAC,SAAS,CAGf;IAEF;;;OAGG;IACH,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,QAAQ,CAAkC;IAMlD,OAAO,CAAC,mBAAmB,CAIxB;IAEH,6BAA6B;IAC7B,IAAW,KAAK,IAAI,mBAAmB,GAAG,IAAI,CAE7C;IACD,OAAO,CAAC,MAAM,CAAoC;;IAOlD;;;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;IAM9C,iGAAiG;IACjG,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,oBAAoB;IAOZ,iBAAiB,IAAI,IAAI;cAQtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E,OAAO,CAAC,YAAY;cAkBD,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,2BAA2B;QACnC,YAAY,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KACjC;CACF"}
+{"version":3,"file":"step.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step/step.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,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;;;;GAIG;AACH,qBAEM,cAAe,SAAQ,mBAAoC;IAC/D,gBAAgC,IAAI,cAAc;IAClD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,OAAO,CAAC,QAAQ,CAAkC;IAMlD,OAAO,CAAC,mBAAmB,CAIxB;IAEH,6BAA6B;IAC7B,IAAW,KAAK,IAAI,mBAAmB,GAAG,IAAI,CAE7C;IACD,OAAO,CAAC,MAAM,CAAoC;;IAOlD;;;OAGG;IACI,MAAM,IAAI,IAAI;IAQrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAQvB;;;OAGG;IACI,QAAQ,CAAC,SAAS,EAAE,2BAA2B,GAAG,OAAO;IAehE;;;OAGG;IACI,SAAS,CAAC,aAAa,EAAE,OAAO,GAAG,IAAI;IAM9C,iGAAiG;IACjG,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,oBAAoB;IAYZ,iBAAiB,IAAI,IAAI;cAQtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E,OAAO,CAAC,YAAY;cAkBD,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,2BAA2B;QACnC,YAAY,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KACjC;CACF"}

package/stepper/step/step.component.js

@@ -1,20 +1,19 @@
-import { __esDecorate as d, __runInitializers as h } from "tslib";
-import { ResizeController as c } from "@lit-labs/observers/resize-controller.js";
-import { css as m, LitElement as u, html as v } from "lit";
-import { customElement as g } from "lit/decorators.js";
-import { EventEmitter as l } from "../../core/eventing.js";
-import { SbbElementInternalsMixin as y, removeAriaElements as f, appendAriaElements as _ } from "../../core/mixins.js";
-const E = m`*,:before,:after{box-sizing:border-box}: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;--sbb-step-color: var(--sbb-color-iron);display:contents}:host([data-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([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: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([data-selected][data-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-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);display:var(--sbb-step-display);height:var(--sbb-step-height);color:var(--sbb-step-color);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 = (() => {
+import { __esDecorate as l, __runInitializers as p } from "tslib";
+import { ResizeController as d } from "@lit-labs/observers/resize-controller.js";
+import { css as c, LitElement as h, html as m } from "lit";
+import { customElement as u } from "lit/decorators.js";
+import { SbbElementInternalsMixin as v, removeAriaElements as y, appendAriaElements as g } from "../../core/mixins.js";
+const f = c`*,:before,:after{box-sizing:border-box}: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;--sbb-step-color: var(--sbb-color-iron);display:contents}:host([data-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([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: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([data-selected][data-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-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);display:var(--sbb-step-display);height:var(--sbb-step-height);color:var(--sbb-step-color);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 _ = 0, k = (() => {
   var e;
-  let p = [g("sbb-step")], r, b = [], s, o = y(u);
-  var n = (e = class extends o {
+  let o = [u("sbb-step")], n, r = [], s, b = v(h);
+  return e = class extends b {
     /** The label of the step. */
     get label() {
       return this._label;
     }
     constructor() {
-      super(), this._validate = new l(this, n.events.validate), this._resizeChange = new l(this, n.events.resizeChange, { bubbles: !0 }), this._stepper = null, this._stepResizeObserver = new c(this, {
+      super(), this._stepper = null, this._stepResizeObserver = new d(this, {
         target: null,
         skipInitial: !0,
         callback: () => setTimeout(() => this._onStepElementResize())
@@ -39,7 +38,12 @@ let x = 0, A = (() => {
      * @internal
      */
     validate(t) {
-      return !!this._validate.emit(t);
+      return this.dispatchEvent(new CustomEvent("validate", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: t
+      }));
     }
     /**
      * Configures the step.
@@ -60,10 +64,10 @@ let x = 0, A = (() => {
       return t.hasAttribute("sbb-stepper-previous") && !t.hasAttribute("disabled");
     }
     _onStepElementResize() {
-      this.hasAttribute("data-selected") && this._resizeChange.emit();
+      this.hasAttribute("data-selected") && this.dispatchEvent(new Event("resizechange", { bubbles: !0 }));
     }
     connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-step-${x++}`, this.slot ||= "step", this._stepper = this.closest("sbb-stepper"), this._assignLabel();
+      super.connectedCallback(), this.id ||= `sbb-step-${_++}`, this.slot ||= "step", this._stepper = this.closest("sbb-stepper"), this._assignLabel();
     }
     firstUpdated(t) {
       super.firstUpdated(t), this.updateComplete.then(() => {
@@ -75,10 +79,10 @@ let x = 0, A = (() => {
       for (; t && t.localName !== "sbb-step-label"; )
         t = t.previousElementSibling;
       const i = t;
-      this.internals.ariaLabelledByElements = f(this.internals.ariaLabelledByElements, this._label), this._label = i instanceof Element ? i : null, this.internals.ariaLabelledByElements = _(this.internals.ariaLabelledByElements, this._label);
+      this.internals.ariaLabelledByElements = y(this.internals.ariaLabelledByElements, this._label), this._label = i instanceof Element ? i : null, this.internals.ariaLabelledByElements = g(this.internals.ariaLabelledByElements, this._label);
     }
     render() {
-      return v`
+      return m`
       <div class="sbb-step--wrapper">
         <div class="sbb-step">
           <slot></slot>
@@ -87,14 +91,13 @@ let x = 0, A = (() => {
     `;
     }
   }, s = e, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    d(null, r = { value: s }, p, { kind: "class", name: s.name, metadata: t }, null, b), n = s = r.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), e.role = "tabpanel", e.styles = E, e.events = {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    l(null, n = { value: s }, o, { 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 = f, e.events = {
     validate: "validate",
-    resizeChange: "resizeChange"
-  }, h(s, b), e);
-  return n = s;
+    resizechange: "resizechange"
+  }, p(s, r), s;
 })();
 export {
-  A as SbbStepElement
+  k as SbbStepElement
 };

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

@@ -7,7 +7,6 @@ declare const SbbStepLabelElement_base: import('../../core/mixins.js').AbstractC
  *
  * @slot - Use the unnamed slot to provide a label.
  * @slot icon - Use this to display an icon in the label bubble.
- * @overrideType value - string
  */
 export declare class SbbStepLabelElement extends SbbStepLabelElement_base {
     static readonly role = "tab";

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

@@ -1 +1 @@
-{"version":3,"file":"step-label.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step-label/step-label.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;;AAOjD;;;;;;GAMG;AACH,qBAEM,mBAAoB,SAAQ,wBAAwD;IACxF,gBAAgC,IAAI,SAAS;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wCAAwC;IACxC,IAAW,IAAI,IAAI,cAAc,GAAG,IAAI,CAEvC;IACD,OAAO,CAAC,KAAK,CAA+B;IAE5C,OAAO,CAAC,QAAQ,CAAkC;;IAWlC,iBAAiB,IAAI,IAAI;IAazC;;;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;IAQjF,OAAO,CAAC,WAAW;cAkBA,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"step-label.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step-label/step-label.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;;AAOjD;;;;;GAKG;AACH,qBAEM,mBAAoB,SAAQ,wBAAwD;IACxF,gBAAgC,IAAI,SAAS;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wCAAwC;IACxC,IAAW,IAAI,IAAI,cAAc,GAAG,IAAI,CAEvC;IACD,OAAO,CAAC,KAAK,CAA+B;IAE5C,OAAO,CAAC,QAAQ,CAAkC;;IAWlC,iBAAiB,IAAI,IAAI;IAazC;;;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;IAQjF,OAAO,CAAC,WAAW;cAkBA,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/stepper/stepper/stepper.component.js

@@ -4,14 +4,14 @@ var T = (s) => {
 var M = (s, r, a) => r.has(s) || T("Cannot " + a);
 var f = (s, r, a) => (M(s, r, "read from private field"), a ? a.call(s) : r.get(s)), m = (s, r, a) => r.has(s) ? T("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, a), d = (s, r, a, n) => (M(s, r, "write to private field"), n ? n.call(s, a) : r.set(s, a), a);
 import { __esDecorate as h, __runInitializers as o } from "tslib";
-import { IntersectionController as H } from "@lit-labs/observers/intersection-controller.js";
+import { IntersectionController as C } from "@lit-labs/observers/intersection-controller.js";
 import { css as R, LitElement as D, html as U } from "lit";
 import { customElement as q, property as u } from "lit/decorators.js";
 import { isArrowKeyPressed as B, getNextElementIndex as N } from "../../core/a11y.js";
 import { forceType as $ } from "../../core/decorators.js";
 import { breakpoints as j, isLean as K, isBreakpoint as P } from "../../core/dom.js";
 import { SbbHydrationMixin as V } from "../../core/mixins.js";
-const W = R`*,:before,:after{box-sizing:border-box}:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-charcoal);display:block;position:relative;counter-reset:step-label}@media (forced-colors: active){:host{--sbb-stepper-marker-color: ButtonText}}:host([data-disable-animation]){--sbb-disable-animation-duration: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:space-between;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-fixed-4x);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`, C = 150;
+const W = R`*,:before,:after{box-sizing:border-box}:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-charcoal);display:block;position:relative;counter-reset:step-label}@media (forced-colors: active){:host{--sbb-stepper-marker-color: ButtonText}}:host([data-disable-animation]){--sbb-disable-animation-duration: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:space-between;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-fixed-4x);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`, H = 150;
 let re = (() => {
   var c, b, p, l;
   let s = [q("sbb-stepper")], r, a = [], n, z = V(D), _ = [], x, v = [], k = [], S, I, y = [], w = [], E, A = [], F = [], L, O;
@@ -21,7 +21,7 @@ let re = (() => {
       m(this, c);
       m(this, b);
       m(this, p);
-      this._observer = (o(this, _), new H(this, {
+      this._observer = (o(this, _), new C(this, {
         target: null,
         callback: (e) => {
           e.forEach((t) => {
@@ -29,8 +29,8 @@ let re = (() => {
           });
         }
       })), d(this, c, o(this, v, !1)), this._horizontalFrom = (o(this, k), null), d(this, b, o(this, y, "horizontal")), d(this, p, (o(this, w), o(this, A, K() ? "s" : "m"))), this._loaded = (o(this, F), !1), this._resizeObserverTimeout = null, this._onStepperResize = () => {
-        this._checkOrientation(), this._setStepperHeight(this.selected), clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-disable-animation", !0), this._resizeObserverTimeout = setTimeout(() => this.toggleAttribute("data-disable-animation", !1), C);
-      }, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e)), this.addEventListener?.("resizeChange", (e) => this._onSelectedStepResize(e));
+        this._checkOrientation(), this._setStepperHeight(this.selected), clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-disable-animation", !0), this._resizeObserverTimeout = setTimeout(() => this.toggleAttribute("data-disable-animation", !1), H);
+      }, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e)), this.addEventListener?.("resizechange", (e) => this._onSelectedStepResize(e));
     }
     /** If set to true, only the current and previous labels can be clicked and selected. */
     get linear() {
@@ -179,7 +179,7 @@ let re = (() => {
     }
     firstUpdated(e) {
       super.firstUpdated(e), this.updateComplete.then(() => {
-        this._loaded = !0, this.selectedIndex = this.linear ? 0 : Number(this.getAttribute("selected-index")) || 0, this._observer.observe(this), this._checkOrientation(), setTimeout(() => this.toggleAttribute("data-disable-animation", !1), C);
+        this._loaded = !0, this.selectedIndex = this.linear ? 0 : Number(this.getAttribute("selected-index")) || 0, this._observer.observe(this), this._checkOrientation(), setTimeout(() => this.toggleAttribute("data-disable-animation", !1), H);
       });
     }
     willUpdate(e) {

package/tabs/tab-group/tab-group.component.d.ts

@@ -30,12 +30,11 @@ declare const SbbTabGroupElement_base: import('../../core/mixins.js').AbstractCo
  *
  * @slot - Use the unnamed slot to add content to the `sbb-tab-group` via
  * `sbb-tab-label` and `sbb-tab` instances.
- * @event {CustomEvent<SbbTabChangedEventDetails>} didChange - Emits an event on selected tab change.
  */
 export declare class SbbTabGroupElement extends SbbTabGroupElement_base {
     static styles: CSSResultGroup;
     static readonly events: {
-        readonly didChange: "didChange";
+        readonly tabchange: "tabchange";
     };
     private _tabs;
     private _selectedTab?;
@@ -56,8 +55,6 @@ export declare class SbbTabGroupElement extends SbbTabGroupElement_base {
      * the tab group, the first enabled tab will be selected.
      */
     accessor initialSelectedIndex: number;
-    /** Emits an event on selected tab change. */
-    private _selectedTabChanged;
     constructor();
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
     /**

package/tabs/tab-group/tab-group.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AASvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI1C,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,CAAC;IACnC,SAAS,EAAE,aAAa,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,IAAI,IAAI,CAAC;IACjB,UAAU,IAAI,IAAI,CAAC;IACnB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;;AAQD;;;;;;GAMG;AACH,qBAEM,kBAAmB,SAAQ,uBAA6B;IAC5D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,YAAY,CAAC,CAA0B;IAC/C,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,qBAAqB,CAI1B;IACH,OAAO,CAAC,uBAAuB,CAI5B;IACH,OAAO,CAAC,yBAAyB,CAI9B;IAEH;;;OAGG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,uBAAuB,CAAC,MAAM,CAAC,EAGrD;IACD,IAAW,IAAI,IAAI,uBAAuB,CAAC,MAAM,CAAC,CAEjD;IACD,OAAO,CAAC,KAAK,CAAyD;IAEtE;;;OAGG;IACH,SAEgB,oBAAoB,EAAE,MAAM,CAAK;IAGjD,6CAA6C;IAC7C,OAAO,CAAC,mBAAmB,CAGzB;;cAOiB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB,CAY1B;IAEF,OAAO,CAAC,iBAAiB,CAavB;IAEF,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,UAAU;IAiGlB,OAAO,CAAC,cAAc;cAoBH,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
+{"version":3,"file":"tab-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AASvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI1C,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,CAAC;IACnC,SAAS,EAAE,aAAa,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,IAAI,IAAI,CAAC;IACjB,UAAU,IAAI,IAAI,CAAC;IACnB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;;AAQD;;;;;GAKG;AACH,qBAEM,kBAAmB,SAAQ,uBAA6B;IAC5D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,YAAY,CAAC,CAA0B;IAC/C,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,qBAAqB,CAI1B;IACH,OAAO,CAAC,uBAAuB,CAI5B;IACH,OAAO,CAAC,yBAAyB,CAI9B;IAEH;;;OAGG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,uBAAuB,CAAC,MAAM,CAAC,EAGrD;IACD,IAAW,IAAI,IAAI,uBAAuB,CAAC,MAAM,CAAC,CAEjD;IACD,OAAO,CAAC,KAAK,CAAyD;IAEtE;;;OAGG;IACH,SAEgB,oBAAoB,EAAE,MAAM,CAAK;;cAO9B,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB,CAY1B;IAEF,OAAO,CAAC,iBAAiB,CAavB;IAEF,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,UAAU;IA4GlB,OAAO,CAAC,cAAc;cAoBH,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

package/tabs/tab-group/tab-group.component.js

@@ -1,47 +1,47 @@
-var x = (s) => {
+var g = (s) => {
   throw TypeError(s);
 };
-var A = (s, a, n) => a.has(s) || x("Cannot " + n);
-var T = (s, a, n) => (A(s, a, "read from private field"), n ? n.call(s) : a.get(s)), y = (s, a, n) => a.has(s) ? x("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, n), u = (s, a, n, r) => (A(s, a, "write to private field"), r ? r.call(s, n) : a.set(s, n), n);
-import { __esDecorate as h, __runInitializers as d } from "tslib";
-import { MutationController as E } from "@lit-labs/observers/mutation-controller.js";
-import { ResizeController as I } from "@lit-labs/observers/resize-controller.js";
-import { css as C, LitElement as G, html as w } from "lit";
-import { customElement as k, property as S } from "lit/decorators.js";
-import { ref as R } from "lit/directives/ref.js";
-import { isArrowKeyPressed as O, getNextElementIndex as $ } from "../../core/a11y.js";
-import { forceType as D } from "../../core/decorators.js";
-import { isLean as N } from "../../core/dom.js";
-import { EventEmitter as K, throttle as M } from "../../core/eventing.js";
-import { SbbHydrationMixin as P } from "../../core/mixins.js";
-import { SbbTabElement as j } from "../tab.js";
-const H = C`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );display:block}.tab-group{display:flex;flex-wrap:wrap}.tab-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}.tab-content ::slotted(*){visibility:hidden;opacity:0;height:0;overflow:hidden;position:relative}.tab-content ::slotted(*[active]){visibility:visible;opacity:1;height:fit-content;overflow:unset;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,visibility}.tab-content ::slotted(sbb-tab: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)}`, U = {
+var x = (s, a, n) => a.has(s) || g("Cannot " + n);
+var A = (s, a, n) => (x(s, a, "read from private field"), n ? n.call(s) : a.get(s)), T = (s, a, n) => a.has(s) ? g("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, n), b = (s, a, n, r) => (x(s, a, "write to private field"), r ? r.call(s, n) : a.set(s, n), n);
+import { __esDecorate as u, __runInitializers as d } from "tslib";
+import { MutationController as z } from "@lit-labs/observers/mutation-controller.js";
+import { ResizeController as y } from "@lit-labs/observers/resize-controller.js";
+import { css as E, LitElement as G, html as C } from "lit";
+import { customElement as w, property as I } from "lit/decorators.js";
+import { ref as k } from "lit/directives/ref.js";
+import { isArrowKeyPressed as R, getNextElementIndex as O } from "../../core/a11y.js";
+import { forceType as $ } from "../../core/decorators.js";
+import { isLean as D } from "../../core/dom.js";
+import { throttle as N } from "../../core/eventing.js";
+import { SbbHydrationMixin as K } from "../../core/mixins.js";
+import { SbbTabElement as M } from "../tab.js";
+const P = E`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );display:block}.tab-group{display:flex;flex-wrap:wrap}.tab-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}.tab-content ::slotted(*){visibility:hidden;opacity:0;height:0;overflow:hidden;position:relative}.tab-content ::slotted(*[active]){visibility:visible;opacity:1;height:fit-content;overflow:unset;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,visibility}.tab-content ::slotted(sbb-tab: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)}`, j = {
   attributeFilter: ["active", "disabled"]
 };
-let q = 0, at = (() => {
+let H = 0, it = (() => {
   var c, o;
-  let s = [k("sbb-tab-group")], a, n = [], r, f = P(G), _ = [], m, v, p = [], g = [];
-  var b = (o = class extends f {
+  let s = [w("sbb-tab-group")], a, n = [], r, h = K(G), f = [], m, _, v = [], p = [];
+  return o = class extends h {
     constructor() {
       super();
-      y(this, c);
-      this._tabs = (d(this, _), []), this._tabAttributeObserver = new E(this, {
+      T(this, c);
+      this._tabs = (d(this, f), []), this._tabAttributeObserver = new z(this, {
         target: null,
-        config: U,
+        config: j,
         callback: (t) => this._onTabAttributesChange(t)
-      }), this._tabGroupResizeObserver = new I(this, {
+      }), this._tabGroupResizeObserver = new y(this, {
         target: null,
         skipInitial: !0,
         callback: (t) => this._onTabGroupElementResize(t)
-      }), this._tabContentResizeObserver = new I(this, {
+      }), this._tabContentResizeObserver = new y(this, {
         target: null,
         skipInitial: !0,
         callback: (t) => this._onTabContentElementResize(t)
-      }), this._size = N() ? "s" : "l", u(this, c, d(this, p, 0)), this._selectedTabChanged = (d(this, g), new K(this, b.events.didChange)), this._onContentSlotChange = () => {
+      }), this._size = D() ? "s" : "l", b(this, c, d(this, v, 0)), this._onContentSlotChange = (d(this, p), () => {
         this._tabContentElement = this.shadowRoot.querySelector("div.tab-content");
         const t = this._getTabs().filter((e) => !this._tabs.includes(e));
         t.length && (t.forEach((e) => this._configure(e)), this._tabs = this._tabs.concat(t), t.find((e) => e.active)?.tabGroupActions?.select());
-      }, this._onTabsSlotChange = () => {
+      }), this._onTabsSlotChange = () => {
         const t = this._getTabs();
         t.length < this._tabs.length && (this._tabs.filter((i) => !t.includes(i)).forEach((i) => {
           i.tab?.remove();
@@ -63,10 +63,10 @@ let q = 0, at = (() => {
      * the tab group, the first enabled tab will be selected.
      */
     get initialSelectedIndex() {
-      return T(this, c);
+      return A(this, c);
     }
     set initialSelectedIndex(t) {
-      u(this, c, t);
+      b(this, c, t);
     }
     firstUpdated(t) {
       super.firstUpdated(t), this._tabs = this._getTabs(), this._tabs.forEach((e) => this._configure(e)), this._initSelection(), this._tabGroupResizeObserver.observe(this._tabGroupElement);
@@ -103,7 +103,7 @@ let q = 0, at = (() => {
         t.setAttribute("data-size", this.size);
     }
     _assignId() {
-      return `sbb-tab-panel-${++q}`;
+      return `sbb-tab-panel-${++H}`;
     }
     _initSelection() {
       this.initialSelectedIndex >= 0 && this.initialSelectedIndex < this._tabs.length && !this._tabs[this.initialSelectedIndex].disabled ? this._tabs[this.initialSelectedIndex].tabGroupActions?.select() : this._enabledTabs()[0]?.tabGroupActions?.select();
@@ -149,55 +149,58 @@ let q = 0, at = (() => {
             const e = this._selectedTab;
             e && (e.tabGroupActions?.deactivate(), this._tabContentResizeObserver.unobserve(e.tab)), t.tabGroupActions?.activate(), this._selectedTab = t, this._tabContentResizeObserver.observe(t.tab);
             const i = this._tabs;
-            this._selectedTabChanged.emit({
-              activeIndex: i.findIndex((l) => l === t),
-              activeTabLabel: t,
-              activeTab: t.tab,
-              previousIndex: i.findIndex((l) => l === e),
-              previousTabLabel: e,
-              previousTab: e?.tab
-            });
+            this.dispatchEvent(new CustomEvent("tabchange", {
+              bubbles: !0,
+              composed: !0,
+              detail: {
+                activeIndex: i.findIndex((l) => l === t),
+                activeTabLabel: t,
+                activeTab: t.tab,
+                previousIndex: i.findIndex((l) => l === e),
+                previousTabLabel: e,
+                previousTab: e?.tab
+              }
+            }));
           }
         }
-      }, t.nextElementSibling?.localName === "sbb-tab" && (t.tab = t.nextElementSibling, t.tab.id = this._assignId(), t.tab instanceof j && (t.tab.tabIndex = 0, t.tab.configure())), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("aria-selected", String(t.active)), t.addEventListener("click", () => {
+      }, t.nextElementSibling?.localName === "sbb-tab" && (t.tab = t.nextElementSibling, t.tab.id = this._assignId(), t.tab instanceof M && (t.tab.tabIndex = 0, t.tab.configure())), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("aria-selected", String(t.active)), t.addEventListener("click", () => {
         t.tabGroupActions?.select();
       }), t.tab && (t.setAttribute("aria-controls", t.tab.id), t.tab.toggleAttribute("active", t.active)), this._tabAttributeObserver.observe(t), t.slot = "tab-bar";
     }
     _handleKeyDown(t) {
       const e = this._enabledTabs();
       if (!(!e || // don't trap nested handling
-      t.target !== this && t.target.parentElement !== this) && O(t)) {
-        const i = e.findIndex((z) => z.active), l = $(t, i, e.length);
+      t.target !== this && t.target.parentElement !== this) && R(t)) {
+        const i = e.findIndex((S) => S.active), l = O(t, i, e.length);
         e[l]?.tabGroupActions?.select(), e[l]?.focus(), t.preventDefault();
       }
     }
     render() {
-      return w`
+      return C`
       <div
         class="tab-group"
         role="tablist"
-        ${R((t) => this._tabGroupElement = t)}
+        ${k((t) => this._tabGroupElement = t)}
       >
         <slot name="tab-bar" @slotchange=${this._onTabsSlotChange}></slot>
       </div>
 
       <div class="tab-content">
-        <slot @slotchange=${M(this._onContentSlotChange, 150)}></slot>
+        <slot @slotchange=${N(this._onContentSlotChange, 150)}></slot>
       </div>
     `;
     }
   }, c = new WeakMap(), r = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    m = [S()], v = [D(), S({ attribute: "initial-selected-index", type: Number })], h(o, null, m, { kind: "setter", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, set: (e, i) => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    m = [I()], _ = [$(), I({ attribute: "initial-selected-index", type: Number })], u(o, null, m, { kind: "setter", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, set: (e, i) => {
       e.size = i;
-    } }, metadata: t }, null, _), h(o, null, v, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, i) => {
+    } }, metadata: t }, null, f), u(o, null, _, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, i) => {
       e.initialSelectedIndex = i;
-    } }, metadata: t }, p, g), h(null, a = { value: r }, s, { kind: "class", name: r.name, metadata: t }, null, n), b = r = a.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = H, o.events = {
-    didChange: "didChange"
-  }, d(r, n), o);
-  return b = r;
+    } }, metadata: t }, v, p), u(null, a = { value: r }, s, { kind: "class", name: r.name, metadata: t }, null, n), r = a.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = P, o.events = {
+    tabchange: "tabchange"
+  }, d(r, n), r;
 })();
 export {
-  at as SbbTabGroupElement
+  it as SbbTabGroupElement
 };