@sbb-esta/lyne-elements 2.2.0 → 2.4.1

package/stepper/step.js

@@ -1,28 +1,23 @@
-import { __esDecorate as d, __runInitializers as c } from "tslib";
-import { ResizeController as m } from "@lit-labs/observers/resize-controller.js";
-import { css as u, LitElement as v, html 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 = (() => {
+import { __esDecorate as c, __runInitializers as h } from "tslib";
+import { css as m, LitElement as u, html as v } from "lit";
+import { customElement as f } from "lit/decorators.js";
+import { hostAttributes as g } from "../core/decorators.js";
+import { EventEmitter as y } from "../core/eventing.js";
+const _ = m`*,: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 x = 0, A = (() => {
   var e;
-  let h = [g("sbb-step"), y({
+  let d = [f("sbb-step"), g({
     slot: "step",
     role: "tabpanel"
-  })], o, l = [], s, p = v;
-  var b = (e = class extends p {
+  })], n, r = [], i, o = u;
+  var b = (e = class extends o {
     /** 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));
+      super(), this._validate = new y(this, b.events.validate), this._loaded = !1, this._stepper = null, this._label = null, (t = this.addEventListener) == null || t.call(this, "click", (a) => this._handleClick(a));
     }
     /**
      * Selects and configures the step.
@@ -54,9 +49,9 @@ let E = 0, L = (() => {
     }
     /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
     _handleClick(t) {
-      var a, n;
-      const i = t.composedPath().filter((r) => r instanceof window.HTMLElement);
-      i.some((r) => this._isGoNextElement(r)) ? (a = this._stepper) == null || a.next() : i.some((r) => this._isGoPreviousElement(r)) && ((n = this._stepper) == null || n.previous());
+      var l, p;
+      const a = t.composedPath().filter((s) => s instanceof window.HTMLElement);
+      a.some((s) => this._isGoNextElement(s)) ? (l = this._stepper) == null || l.next() : a.some((s) => this._isGoPreviousElement(s)) && ((p = this._stepper) == null || p.previous());
     }
     _isGoNextElement(t) {
       return t.hasAttribute("sbb-stepper-next") && !t.hasAttribute("disabled");
@@ -64,13 +59,6 @@ let E = 0, L = (() => {
     _isGoPreviousElement(t) {
       return t.hasAttribute("sbb-stepper-previous") && !t.hasAttribute("disabled");
     }
-    _onStepElementResize(t) {
-      var a, n;
-      if (!this.hasAttribute("data-selected"))
-        return;
-      const i = Math.floor(t[0].contentRect.height);
-      (n = (a = this._stepper) == null ? void 0 : a.style) == null || n.setProperty("--sbb-stepper-content-height", `${i}px`);
-    }
     _getStepLabel() {
       let t = this.previousElementSibling;
       for (; t && t.localName !== "sbb-step-label"; )
@@ -78,13 +66,13 @@ let E = 0, L = (() => {
       return t;
     }
     connectedCallback() {
-      super.connectedCallback(), this.id = this.id || `sbb-step-${E++}`, this._stepper = this.closest("sbb-stepper"), this._label = this._getStepLabel();
+      super.connectedCallback(), this.id = this.id || `sbb-step-${x++}`, 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"));
+      super.firstUpdated(t), this._loaded = !0;
     }
     render() {
-      return f`
+      return v`
       <div class="sbb-step--wrapper">
         <div class="sbb-step">
           <slot></slot>
@@ -92,14 +80,14 @@ let E = 0, L = (() => {
       </div>
     `;
     }
-  }, s = e, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-    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 = {
+  }, i = e, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    c(null, n = { value: i }, d, { kind: "class", name: i.name, metadata: t }, null, r), b = i = n.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), e.styles = _, e.events = {
     validate: "validate"
-  }, c(s, l), e);
-  return b = s;
+  }, h(i, r), e);
+  return b = i;
 })();
 export {
-  L as SbbStepElement
+  A as SbbStepElement
 };

package/stepper/stepper/stepper.d.ts

@@ -10,6 +10,13 @@ declare const SbbStepperElement_base: import('../../core/mixins.js').AbstractCon
  */
 export declare class SbbStepperElement extends SbbStepperElement_base {
     static styles: CSSResultGroup;
+    /**
+     * If the sbb-stepper is used in a sbb-dialog, the marker on the selected element will not appear,
+     * because the calculations are done when the dialog is closed, so the marker has a width of 0;
+     * the same happens for the stepper height.
+     * We need to recalculate it when the element becomes visible.
+     */
+    private _observer;
     /** If set to true, only the current and previous labels can be clicked and selected. */
     accessor linear: boolean;
     /** Overrides the behaviour of `orientation` property. */
@@ -44,6 +51,10 @@ export declare class SbbStepperElement extends SbbStepperElement_base {
     private _isValidStep;
     private _select;
     private _setMarkerSize;
+    /**
+     * Sets the stepper height based on the height of the provided step.
+     */
+    private _setStepperHeight;
     private _calculateLabelOffsetTop;
     private _configure;
     private _updateLabels;

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

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/stepper/stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAElF,OAAO,KAAK,EAAE,cAAc,EAA+B,MAAM,YAAY,CAAC;;AAM9E;;;;;GAKG;AACH,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"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/stepper/stepper.ts"],"names":[],"mappings":"AACA,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;;;;;OAKG;IACH,OAAO,CAAC,SAAS,CAUd;IAEH,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;IAyBf,OAAO,CAAC,cAAc;IAiBtB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,gBAAgB,CAWtB;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;cAW1E,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"}

package/stepper/stepper.js

@@ -1,60 +1,68 @@
 var C = (i) => {
   throw TypeError(i);
 };
-var D = (i, r, a) => r.has(i) || C("Cannot " + a);
-var x = (i, r, a) => (D(i, r, "read from private field"), a ? a.call(i) : r.get(i)), z = (i, r, a) => r.has(i) ? C("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, a), c = (i, r, a, n) => (D(i, r, "write to private field"), n ? n.call(i, a) : r.set(i, a), a);
-import { __esDecorate as h, __runInitializers as d } from "tslib";
-import { css as B, LitElement as N, html as j } from "lit";
-import { customElement as q, property as _ } from "lit/decorators.js";
-import { isArrowKeyPressed as H, getNextElementIndex as K } from "../core/a11y.js";
-import { forceType as R } from "../core/decorators.js";
-import { breakpoints as V, isLean as $, isBreakpoint as P } from "../core/dom.js";
-import { SbbHydrationMixin as W } from "../core/mixins.js";
-const G = B`*,: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}`, U = 150;
-let re = (() => {
+var H = (i, r, a) => r.has(i) || C("Cannot " + a);
+var g = (i, r, a) => (H(i, r, "read from private field"), a ? a.call(i) : r.get(i)), x = (i, r, a) => r.has(i) ? C("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, a), h = (i, r, a, n) => (H(i, r, "write to private field"), n ? n.call(i, a) : r.set(i, a), a);
+import { __esDecorate as c, __runInitializers as d } from "tslib";
+import { IntersectionController as R } from "@lit-labs/observers/intersection-controller.js";
+import { css as U, LitElement as q, html as B } from "lit";
+import { customElement as N, property as _ } from "lit/decorators.js";
+import { isArrowKeyPressed as $, getNextElementIndex as j } from "../core/a11y.js";
+import { forceType as K } from "../core/decorators.js";
+import { breakpoints as P, isLean as V, isBreakpoint as W } from "../core/dom.js";
+import { SbbHydrationMixin as G } from "../core/mixins.js";
+const J = U`*,: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}`, D = 150;
+let le = (() => {
   var b, p, u, l;
-  let i = [q("sbb-stepper")], r, a = [], n, g = W(N), f = [], v, k = [], I = [], y, S, w = [], E = [], A, F = [], O = [], L, T;
-  return l = class extends g {
+  let i = [N("sbb-stepper")], r, a = [], n, v = G(q), f = [], z, k = [], S = [], y, I, w = [], E = [], A, F = [], O = [], L, T;
+  return l = class extends v {
     constructor() {
       var e;
       super();
-      z(this, b);
-      z(this, p);
-      z(this, u);
-      c(this, b, (d(this, f), d(this, k, !1))), this._horizontalFrom = (d(this, I), null), c(this, p, d(this, w, "horizontal")), c(this, u, (d(this, E), d(this, F, $() ? "s" : "m"))), this._loaded = (d(this, O), !1), this._resizeObserverTimeout = null, this._onStepperResize = () => {
-        this._checkOrientation(), clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-disable-animation", !0), this._resizeObserverTimeout = setTimeout(() => this.toggleAttribute("data-disable-animation", !1), U);
+      x(this, b);
+      x(this, p);
+      x(this, u);
+      this._observer = (d(this, f), new R(this, {
+        target: null,
+        callback: (t) => {
+          t.forEach((s) => {
+            s.intersectionRatio > 0 && (this._setStepperHeight(this.selected), this._setMarkerSize());
+          });
+        }
+      })), h(this, b, d(this, k, !1)), this._horizontalFrom = (d(this, S), null), h(this, p, d(this, w, "horizontal")), h(this, u, (d(this, E), d(this, F, V() ? "s" : "m"))), this._loaded = (d(this, O), !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), D);
       }, (e = this.addEventListener) == null || e.call(this, "keydown", (t) => this._handleKeyDown(t));
     }
     /** If set to true, only the current and previous labels can be clicked and selected. */
     get linear() {
-      return x(this, b);
+      return g(this, b);
     }
     set linear(e) {
-      c(this, b, e);
+      h(this, b, e);
     }
     /** Overrides the behaviour of `orientation` property. */
     set horizontalFrom(e) {
-      this._horizontalFrom = e && V.includes(e) ? e : null, this._horizontalFrom && this._loaded && this._checkOrientation();
+      this._horizontalFrom = e && P.includes(e) ? e : null, this._horizontalFrom && this._loaded && this._checkOrientation();
     }
     get horizontalFrom() {
       return this._horizontalFrom;
     }
     /** Steps orientation, either horizontal or vertical. */
     get orientation() {
-      return x(this, p);
+      return g(this, p);
     }
     set orientation(e) {
-      c(this, p, e);
+      h(this, p, e);
     }
     /**
      * Size variant, either s or m.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return x(this, u);
+      return g(this, u);
     }
     set size(e) {
-      c(this, u, e);
+      h(this, u, e);
     }
     /** The currently selected step. */
     set selected(e) {
@@ -121,7 +129,7 @@ let re = (() => {
       if (this.selected && !this.selected.validate(t))
         return;
       const s = this.selected;
-      s == null || s.deselect(), e.select(), this._setMarkerSize(), this._configureLinearMode(), ((o = document.activeElement) == null ? void 0 : o.closest("sbb-stepper")) === this && ((M = (m = this.selected) == null ? void 0 : m.label) == null || M.focus());
+      s == null || s.deselect(), e.select(), this._setMarkerSize(), this._setStepperHeight(e), this._configureLinearMode(), ((o = document.activeElement) == null ? void 0 : o.closest("sbb-stepper")) === this && ((M = (m = this.selected) == null ? void 0 : m.label) == null || M.focus());
     }
     _setMarkerSize() {
       if (!this._loaded || !this.selected || this.selectedIndex === void 0 || !this.selected.label)
@@ -129,6 +137,16 @@ let re = (() => {
       const e = this.orientation === "horizontal" ? this.selected.label.offsetLeft + this.selected.label.offsetWidth : this._calculateLabelOffsetTop();
       this.style.setProperty("--sbb-stepper-marker-size", `${e}px`);
     }
+    /**
+     * Sets the stepper height based on the height of the provided step.
+     */
+    _setStepperHeight(e) {
+      var t;
+      if (e && e.shadowRoot) {
+        const s = e.shadowRoot.querySelector(".sbb-step");
+        s && ((t = this.style) == null || t.setProperty("--sbb-stepper-content-height", `${s.offsetHeight}px`));
+      }
+    }
     _calculateLabelOffsetTop() {
       if (this.selectedIndex === null)
         return;
@@ -153,7 +171,7 @@ let re = (() => {
       });
     }
     _checkOrientation() {
-      this.horizontalFrom && (this.orientation = P(this.horizontalFrom) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
+      this.horizontalFrom && (this.orientation = W(this.horizontalFrom) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
     }
     _configureLinearMode() {
       this.steps.forEach((e, t) => {
@@ -170,7 +188,7 @@ let re = (() => {
       super.disconnectedCallback(), window.removeEventListener("resize", this._onStepperResize);
     }
     async firstUpdated(e) {
-      super.firstUpdated(e), await this.updateComplete, this._loaded = !0, this.selectedIndex = this.linear ? 0 : Number(this.getAttribute("selected-index")) || 0, this._checkOrientation(), setTimeout(() => this.toggleAttribute("data-disable-animation", !1), U);
+      super.firstUpdated(e), await this.updateComplete, 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), D);
     }
     willUpdate(e) {
       super.willUpdate(e), e.has("orientation") && !this.horizontalFrom && (this._updateLabels(), this._setMarkerSize()), e.has("linear") && this._loaded && this._configureLinearMode(), e.has("size") && (this._proxySize(), this._setMarkerSize());
@@ -184,13 +202,13 @@ let re = (() => {
     _handleKeyDown(e) {
       const t = this._enabledSteps;
       if (!(!t || // don't trap nested handling
-      e.target !== this && e.target.parentElement !== this) && H(e)) {
-        const s = t.indexOf(this.selected), o = K(e, s, t.length);
+      e.target !== this && e.target.parentElement !== this) && $(e)) {
+        const s = t.indexOf(this.selected), o = j(e, s, t.length);
         this._select(t[o]), e.preventDefault();
       }
     }
     render() {
-      return j`
+      return B`
       <div class="sbb-stepper">
         <div class="sbb-stepper__labels" role="tablist">
           <slot name="step-label" @slotchange=${this._configure}></slot>
@@ -202,22 +220,22 @@ let re = (() => {
     `;
     }
   }, b = new WeakMap(), p = new WeakMap(), u = new WeakMap(), n = l, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
-    v = [R(), _({ type: Boolean })], y = [_({ attribute: "horizontal-from", reflect: !0 })], S = [_({ reflect: !0 })], A = [_({ reflect: !0 })], L = [_({ attribute: !1 })], T = [_({ attribute: "selected-index", type: Number })], h(l, null, v, { kind: "accessor", name: "linear", static: !1, private: !1, access: { has: (t) => "linear" in t, get: (t) => t.linear, set: (t, s) => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    z = [K(), _({ type: Boolean })], y = [_({ attribute: "horizontal-from", reflect: !0 })], I = [_({ reflect: !0 })], A = [_({ reflect: !0 })], L = [_({ attribute: !1 })], T = [_({ attribute: "selected-index", type: Number })], c(l, null, z, { kind: "accessor", name: "linear", static: !1, private: !1, access: { has: (t) => "linear" in t, get: (t) => t.linear, set: (t, s) => {
       t.linear = s;
-    } }, metadata: e }, k, I), h(l, null, y, { kind: "setter", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, set: (t, s) => {
+    } }, metadata: e }, k, S), c(l, null, y, { kind: "setter", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, set: (t, s) => {
       t.horizontalFrom = s;
-    } }, metadata: e }, null, f), h(l, null, S, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, s) => {
+    } }, metadata: e }, null, f), c(l, null, I, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, s) => {
       t.orientation = s;
-    } }, metadata: e }, w, E), h(l, null, A, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, s) => {
+    } }, metadata: e }, w, E), c(l, null, A, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, s) => {
       t.size = s;
-    } }, metadata: e }, F, O), h(l, null, L, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, s) => {
+    } }, metadata: e }, F, O), c(l, null, L, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, s) => {
       t.selected = s;
-    } }, metadata: e }, null, f), h(l, null, T, { kind: "setter", name: "selectedIndex", static: !1, private: !1, access: { has: (t) => "selectedIndex" in t, set: (t, s) => {
+    } }, metadata: e }, null, f), c(l, null, T, { kind: "setter", name: "selectedIndex", static: !1, private: !1, access: { has: (t) => "selectedIndex" in t, set: (t, s) => {
       t.selectedIndex = s;
-    } }, metadata: e }, null, f), h(null, r = { value: n }, i, { kind: "class", name: n.name, metadata: e }, null, a), n = r.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), l.styles = G, d(n, a), n;
+    } }, metadata: e }, null, f), c(null, r = { value: n }, i, { kind: "class", name: n.name, metadata: e }, null, a), n = r.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.styles = J, d(n, a), n;
 })();
 export {
-  re as SbbStepperElement
+  le as SbbStepperElement
 };

package/table/table-wrapper.js

@@ -1,12 +1,12 @@
 import { __esDecorate as s, __runInitializers as c } from "tslib";
 import { ResizeController as i } from "@lit-labs/observers/resize-controller.js";
-import { css as p, LitElement as d, html as n } from "lit";
-import { customElement as h } from "lit/decorators.js";
+import { css as p, LitElement as d, html as h } from "lit";
+import { customElement as n } from "lit/decorators.js";
 import { SbbNegativeMixin as u } from "../core/mixins.js";
 const w = p`*,:before,:after{box-sizing:border-box}:host{--sbb-table-wrapper-border-radius: var(--sbb-border-radius-4x);display:block}::slotted(.sbb-table){width:100%}.sbb-table-wrapper{overflow:auto;--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-table-wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-table-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-table-wrapper::-webkit-scrollbar-button,.sbb-table-wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-table-wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([negative]) .sbb-table-wrapper{--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-iron)}:host([data-has-horizontal-scrollbar]) .sbb-table-wrapper{padding-bottom:var(--sbb-spacing-fixed-1x)}`;
 let _ = (() => {
   var b;
-  let e = [h("sbb-table-wrapper")], l, t = [], r, o = u(d);
+  let e = [n("sbb-table-wrapper")], l, t = [], r, o = u(d);
   return b = class extends o {
     constructor() {
       super(...arguments), this._resizeObserver = new i(this, {
@@ -22,7 +22,7 @@ let _ = (() => {
       this.toggleAttribute("data-has-horizontal-scrollbar", this._tableWrapper.scrollWidth > this._tableWrapper.offsetWidth);
     }
     render() {
-      return n`<div class="sbb-table-wrapper">
+      return h`<div class="sbb-table-wrapper">
       <slot></slot>
     </div>`;
     }

package/tabs/tab-group.js

@@ -1,8 +1,8 @@
-var I = (a) => {
-  throw TypeError(a);
+var I = (n) => {
+  throw TypeError(n);
 };
-var S = (a, r, l) => r.has(a) || I("Cannot " + l);
-var y = (a, r, l) => (S(a, r, "read from private field"), l ? l.call(a) : r.get(a)), z = (a, r, l) => r.has(a) ? I("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, l), _ = (a, r, l, c) => (S(a, r, "write to private field"), c ? c.call(a, l) : r.set(a, l), l);
+var S = (n, r, l) => r.has(n) || I("Cannot " + l);
+var y = (n, r, l) => (S(n, r, "read from private field"), l ? l.call(n) : r.get(n)), z = (n, r, l) => r.has(n) ? I("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(n) : r.set(n, l), _ = (n, r, l, c) => (S(n, r, "write to private field"), c ? c.call(n, l) : r.set(n, l), l);
 import { __esDecorate as m, __runInitializers as h } from "tslib";
 import { MutationController as w } from "@lit-labs/observers/mutation-controller.js";
 import { ResizeController as E } from "@lit-labs/observers/resize-controller.js";
@@ -20,13 +20,13 @@ const F = k`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animati
 };
 let B = 0, ot = (() => {
   var b, d;
-  let a = [$("sbb-tab-group")], r, l = [], c, p = U(R), v = [], g, A, x = [], T = [];
-  var f = (d = class extends p {
+  let n = [$("sbb-tab-group")], r, l = [], c, v = U(R), p = [], g, A, x = [], T = [];
+  var f = (d = class extends v {
     constructor() {
       var t;
       super();
       z(this, b);
-      this._tabs = (h(this, v), []), this._tabAttributeObserver = new w(this, {
+      this._tabs = (h(this, p), []), this._tabAttributeObserver = new w(this, {
         target: null,
         config: W,
         callback: (e) => this._onTabAttributesChange(e)
@@ -39,15 +39,15 @@ let B = 0, ot = (() => {
         skipInitial: !0,
         callback: (e) => this._onTabContentElementResize(e)
       }), this._size = P() ? "s" : "l", _(this, b, h(this, x, 0)), this._selectedTabChanged = (h(this, T), new j(this, f.events.didChange)), this._onContentSlotChange = () => {
-        var i, n;
+        var i, a;
         this._tabContentElement = this.shadowRoot.querySelector("div.tab-content");
         const e = this._getTabs().filter((s) => !this._tabs.includes(s));
-        e.length && (e.forEach((s) => this._configure(s)), this._tabs = this._tabs.concat(e), (n = (i = e.find((s) => s.active)) == null ? void 0 : i.tabGroupActions) == null || n.select());
+        e.length && (e.forEach((s) => this._configure(s)), this._tabs = this._tabs.concat(e), (a = (i = e.find((s) => s.active)) == null ? void 0 : i.tabGroupActions) == null || a.select());
       }, this._onTabsSlotChange = () => {
         const e = this._getTabs();
-        e.length < this._tabs.length && (this._tabs.filter((n) => !e.includes(n)).forEach((n) => {
+        e.length < this._tabs.length && (this._tabs.filter((a) => !e.includes(a)).forEach((a) => {
           var s;
-          (s = n.tab) == null || s.remove();
+          (s = a.tab) == null || s.remove();
         }), this._tabs = e), this._tabs.forEach((i) => i.setAttribute("data-size", this.size));
       }, (t = this.addEventListener) == null || t.call(this, "keydown", (e) => this._handleKeyDown(e));
     }
@@ -116,19 +116,19 @@ let B = 0, ot = (() => {
       this.initialSelectedIndex >= 0 && this.initialSelectedIndex < this._tabs.length && !this._tabs[this.initialSelectedIndex].disabled ? (t = this._tabs[this.initialSelectedIndex].tabGroupActions) == null || t.select() : (i = (e = this._enabledTabs()[0]) == null ? void 0 : e.tabGroupActions) == null || i.select();
     }
     _onTabAttributesChange(t) {
-      var e, i, n;
+      var e, i, a;
       for (const s of t) {
         if (s.type !== "attributes")
           return;
         const o = s.target;
-        s.attributeName === "disabled" && (o.hasAttribute("disabled") && o !== this._selectedTab ? (e = o.tabGroupActions) == null || e.disable() : o.disabled && ((i = o.tabGroupActions) == null || i.enable())), s.attributeName === "active" && (o.hasAttribute("active") && !o.disabled ? (n = o.tabGroupActions) == null || n.select() : o === this._selectedTab && o.toggleAttribute("active", !0));
+        s.attributeName === "disabled" && (o.hasAttribute("disabled") && o !== this._selectedTab ? (e = o.tabGroupActions) == null || e.disable() : o.disabled && ((i = o.tabGroupActions) == null || i.enable())), s.attributeName === "active" && (o.hasAttribute("active") && !o.disabled ? (a = o.tabGroupActions) == null || a.select() : o === this._selectedTab && o.toggleAttribute("active", !0));
       }
     }
     _onTabGroupElementResize(t) {
       for (const e of t) {
         const i = e.target.firstElementChild.assignedElements();
-        for (const n of i)
-          n.toggleAttribute("data-has-divider", n === i[0] || n.offsetLeft === i[0].offsetLeft), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
+        for (const a of i)
+          a.toggleAttribute("data-has-divider", a === i[0] || a.offsetLeft === i[0].offsetLeft), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
       }
     }
     _onTabContentElementResize(t) {
@@ -150,17 +150,17 @@ let B = 0, ot = (() => {
           t.removeAttribute("active"), t.active = !1, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (i = t.tab) == null || i.removeAttribute("active");
         },
         disable: () => {
-          var i, n, s;
-          t.disabled || (t.hasAttribute("disabled") || t.toggleAttribute("disabled", !0), t.disabled = !0, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (i = t.tab) == null || i.removeAttribute("active"), t.active && (t.removeAttribute("active"), t.active = !1, (s = (n = this._enabledTabs()[0]) == null ? void 0 : n.tabGroupActions) == null || s.select()));
+          var i, a, s;
+          t.disabled || (t.hasAttribute("disabled") || t.toggleAttribute("disabled", !0), t.disabled = !0, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (i = t.tab) == null || i.removeAttribute("active"), t.active && (t.removeAttribute("active"), t.active = !1, (s = (a = this._enabledTabs()[0]) == null ? void 0 : a.tabGroupActions) == null || s.select()));
         },
         enable: () => {
           t.disabled && (t.removeAttribute("disabled"), t.disabled = !1);
         },
         select: () => {
-          var i, n;
+          var i, a;
           if (t !== this._selectedTab && !t.disabled) {
             const s = this._selectedTab;
-            s && ((i = s.tabGroupActions) == null || i.deactivate(), this._tabContentResizeObserver.unobserve(s.tab)), (n = t.tabGroupActions) == null || n.activate(), this._selectedTab = t, this._tabContentResizeObserver.observe(t.tab);
+            s && ((i = s.tabGroupActions) == null || i.deactivate(), this._tabContentResizeObserver.unobserve(s.tab)), (a = t.tabGroupActions) == null || a.activate(), this._selectedTab = t, this._tabContentResizeObserver.observe(t.tab);
             const o = this._tabs;
             this._selectedTabChanged.emit({
               activeIndex: o.findIndex((u) => u === t),
@@ -178,12 +178,12 @@ let B = 0, ot = (() => {
       }), t.tab && (t.setAttribute("aria-controls", t.tab.id), t.tab.setAttribute("role", "tabpanel"), t.tab.toggleAttribute("active", t.active)), this._tabAttributeObserver.observe(t), t.slot = "tab-bar";
     }
     _handleKeyDown(t) {
-      var i, n, s;
+      var i, a, s;
       const e = this._enabledTabs();
       if (!(!e || // don't trap nested handling
       t.target !== this && t.target.parentElement !== this) && N(t)) {
         const o = e.findIndex((G) => G.active), u = K(t, o, e.length);
-        (n = (i = e[u]) == null ? void 0 : i.tabGroupActions) == null || n.select(), (s = e[u]) == null || s.focus(), t.preventDefault();
+        (a = (i = e[u]) == null ? void 0 : i.tabGroupActions) == null || a.select(), (s = e[u]) == null || s.focus(), t.preventDefault();
       }
     }
     render() {
@@ -202,12 +202,12 @@ let B = 0, ot = (() => {
     `;
     }
   }, b = new WeakMap(), c = d, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
     g = [C()], A = [M(), C({ attribute: "initial-selected-index", type: Number })], m(d, null, g, { kind: "setter", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, set: (e, i) => {
       e.size = i;
-    } }, metadata: t }, null, v), m(d, null, A, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, i) => {
+    } }, metadata: t }, null, p), m(d, null, A, { 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 }, x, T), m(null, r = { value: c }, a, { kind: "class", name: c.name, metadata: t }, null, l), f = c = r.value, t && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+    } }, metadata: t }, x, T), m(null, r = { value: c }, n, { kind: "class", name: c.name, metadata: t }, null, l), f = c = r.value, t && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), d.styles = F, d.events = {
     didChange: "didChange"
   }, h(c, l), d);

package/tabs/tab-label.js

@@ -6,7 +6,7 @@ var m = (t, e, o) => (I(t, e, "read from private field"), o ? o.call(t) : e.get(
 import { __esDecorate as h, __runInitializers as i } from "tslib";
 import { css as D, LitElement as G } from "lit";
 import { customElement as M, property as u } from "lit/decorators.js";
-import { html as N, unsafeStatic as E } from "lit/static-html.js";
+import { unsafeStatic as E, html as N } from "lit/static-html.js";
 import { slotState as j, forceType as $, omitEmptyConverter as A } from "../core/decorators.js";
 import { SbbDisabledMixin as L } from "../core/mixins.js";
 import { SbbIconNameMixin as O } from "../icon.js";

package/tabs/tab.js

@@ -1,10 +1,10 @@
 import { __esDecorate as o, __runInitializers as b } from "tslib";
-import { css as n, LitElement as c, html as u } from "lit";
-import { customElement as m } from "lit/decorators.js";
+import { css as n, LitElement as c, html as m } from "lit";
+import { customElement as u } from "lit/decorators.js";
 const d = n`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:block}:host:after,:host:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}`;
 let p = (() => {
   var l;
-  let r = [m("sbb-tab")], a, s = [], t, i = c;
+  let r = [u("sbb-tab")], a, s = [], t, i = c;
   return l = class extends i {
     constructor() {
       super(...arguments), this._label = null;
@@ -24,7 +24,7 @@ let p = (() => {
       this._label = this._getTabLabel();
     }
     render() {
-      return u`
+      return m`
       <div class="sbb-tab">
         <slot></slot>
       </div>

package/tag/tag/tag.d.ts

@@ -1,5 +1,6 @@
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { FormRestoreReason, FormRestoreState } from '../../core/mixins.js';
 export type SbbTagSize = 's' | 'm';
 declare const SbbTagElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType & import('../../core/mixins.js').SbbDisabledInteractiveMixinType> & typeof SbbButtonBaseElement;
 /**
@@ -38,9 +39,19 @@ export declare class SbbTagElement extends SbbTagElement_base {
     private _change;
     constructor();
     connectedCallback(): void;
+    protected isDisabledExternally(): boolean;
     /** Method triggered on button click. Inverts the checked value and emits events. */
     private _handleClick;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /**
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * @internal
+     */
+    formStateRestoreCallback(state: FormRestoreState | null, _reason: FormRestoreReason): void;
+    protected updateFormValue(): void;
     protected renderTemplate(): TemplateResult;
 }
 declare global {

package/tag/tag/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/elements/tag/tag/tag.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAUnE,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;;AAEnC;;;;;;;;;GASG;AACH,qBAGM,aAAc,SAAQ,kBAAsE;IAChG,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX,uCAAuC;IACvC,SAEgB,MAAM,EAAE,MAAM,CAAM;IAEpC,kCAAkC;IAClC,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC;;;OAGG;IACH,SAEgB,IAAI,EAAE,UAAU,CAAwB;IAExD,4CAA4C;IAC5C,OAAO,CAAC,MAAM,CAAmC;IAEjD,0BAA0B;IAC1B,OAAO,CAAC,MAAM,CAGX;IAEH,4FAA4F;IAC5F,OAAO,CAAC,UAAU,CAEf;IAEH,2BAA2B;IAC3B,OAAO,CAAC,OAAO,CAEZ;;IAOa,iBAAiB,IAAI,IAAI;IAKzC,oFAAoF;IACpF,OAAO,CAAC,YAAY;cAgBD,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAazD,cAAc,IAAI,cAAc;CAWpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/elements/tag/tag/tag.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAInE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAM9B,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;;AAEnC;;;;;;;;;GASG;AACH,qBAGM,aAAc,SAAQ,kBAAsE;IAChG,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX,uCAAuC;IACvC,SAEgB,MAAM,EAAE,MAAM,CAAM;IAEpC,kCAAkC;IAClC,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC;;;OAGG;IACH,SAEgB,IAAI,EAAE,UAAU,CAAwB;IAExD,4CAA4C;IAC5C,OAAO,CAAC,MAAM,CAAmC;IAEjD,0BAA0B;IAC1B,OAAO,CAAC,MAAM,CAGX;IAEH,4FAA4F;IAC5F,OAAO,CAAC,UAAU,CAEf;IAEH,2BAA2B;IAC3B,OAAO,CAAC,OAAO,CAEZ;;IAOa,iBAAiB,IAAI,IAAI;cAKtB,oBAAoB,IAAI,OAAO;IAIlD,oFAAoF;IACpF,OAAO,CAAC,YAAY;cAgBD,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E;;OAEG;IACa,iBAAiB,IAAI,IAAI;IAIzC;;OAEG;IACa,wBAAwB,CACtC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;cAMY,eAAe,IAAI,IAAI;cAQvB,cAAc,IAAI,cAAc;CAWpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}

package/tag/tag-group/tag-group.d.ts

@@ -1,7 +1,7 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { WithListChildren } from '../../core/mixins.js';
 import { SbbTagElement, SbbTagSize } from '../tag.js';
-declare const SbbTagGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbTagElement>> & typeof LitElement;
+declare const SbbTagGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbTagElement>> & typeof LitElement;
 /**
  * It can be used as a container for one or more `sbb-tag`.
  *

package/tag/tag-group/tag-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/tag/tag-group/tag-group.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpF,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;;AAI3D;;;;GAIG;AACH,qBAEM,kBAAmB,SAAQ,uBAEhC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,mBAA4B,mBAAmB,WAAsB;IAErE;;OAEG;IACH,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD;;;;;OAKG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C;;;OAGG;IACH,SAA6C,IAAI,EAAE,UAAU,CAAwB;IAErF;;;;OAIG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,EAyBxD;IACD,IAAW,KAAK,IAAI,MAAM,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAMpD;IACD,OAAO,CAAC,MAAM,CAA2C;IAEzD,kDAAkD;IAClD,IAAW,IAAI,IAAI,aAAa,EAAE,CAEjC;cAEkB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cA0B3E,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
+{"version":3,"file":"tag-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/tag/tag-group/tag-group.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;;AAI3D;;;;GAIG;AACH,qBAEM,kBAAmB,SAAQ,uBAEhC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,mBAA4B,mBAAmB,WAAsB;IAErE;;OAEG;IACH,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD;;;;;OAKG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C;;;OAGG;IACH,SAA6C,IAAI,EAAE,UAAU,CAAwB;IAErF;;;;OAIG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,EAyBxD;IACD,IAAW,KAAK,IAAI,MAAM,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAMpD;IACD,OAAO,CAAC,MAAM,CAA2C;IAEzD,kDAAkD;IAClD,IAAW,IAAI,IAAI,aAAa,EAAE,CAEjC;cAEkB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cA8B3E,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}