@sbb-esta/lyne-elements 4.0.0-next.3 → 4.0.0-next.4

package/tabs/tab/tab.component.js

@@ -2,12 +2,12 @@ import { __esDecorate as l, __runInitializers as r } from "tslib";
 import { ResizeController as b } from "@lit-labs/observers/resize-controller.js";
 import { css as c, LitElement as u, html as h } from "lit";
 import { customElement as m } from "lit/decorators.js";
-import { SbbElementInternalsMixin as v } from "../../core/mixins.js";
-const d = c`@charset "UTF-8";:host{display:none}:host:after,:host:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host(:is(:state(active),[state--active])){display:block;opacity:1;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{:host(:is(:state(active),[state--active])){opacity:0}}`;
-let f = 0, C = (() => {
+import { SbbElementInternalsMixin as d } from "../../core/mixins.js";
+const v = c`@charset "UTF-8";:host{display:none}:host:after,:host:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host(:is(:state(active),[state--active])){display:block;opacity:1;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{:host(:is(:state(active),[state--active])){opacity:0}}`;
+let p = 0, E = (() => {
   var t;
-  let n = [m("sbb-tab")], s, a = [], e, o = v(u);
-  return t = class extends o {
+  let o = [m("sbb-tab")], i, a = [], e, n = d(u);
+  return t = class extends n {
     constructor() {
       super(...arguments), this._tabContentResizeObserver = new b(this, {
         target: null,
@@ -23,22 +23,16 @@ let f = 0, C = (() => {
     get group() {
       return this.closest("sbb-tab-group");
     }
-    /**
-     * @internal
-     * @deprecated
-     */
-    configure() {
-    }
     connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-tab-${f++}`, this.tabIndex = 0;
+      super.connectedCallback(), this.id ||= `sbb-tab-${p++}`, this.tabIndex = 0;
     }
     /** @internal */
     activate() {
-      this.toggleState("active", !0), this._tabContentResizeObserver.observe(this);
+      this.internals.states.add("active"), this._tabContentResizeObserver.observe(this);
     }
     /** @internal */
     deactivate() {
-      this._tabContentResizeObserver.unobserve(this), this.toggleState("active", !1);
+      this._tabContentResizeObserver.unobserve(this), this.internals.states.delete("active");
     }
     _onTabContentElementResize() {
       this.group?.setTabContentHeight(Math.floor(this.getBoundingClientRect().height));
@@ -47,12 +41,12 @@ let f = 0, C = (() => {
       return h`<slot></slot>`;
     }
   }, e = t, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    l(null, s = { value: e }, n, { kind: "class", name: e.name, metadata: i }, null, a), e = s.value, i && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
-  })(), t.role = "tabpanel", t.styles = d, t.events = {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    l(null, i = { value: e }, o, { kind: "class", name: e.name, metadata: s }, null, a), e = i.value, s && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), t.role = "tabpanel", t.styles = v, t.events = {
     active: "active"
   }, r(e, a), e;
 })();
 export {
-  C as SbbTabElement
+  E as SbbTabElement
 };

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

@@ -9,27 +9,6 @@ export type SbbTabChangedEventDetails = {
     previousTabLabel: SbbTabLabelElement | undefined;
     previousTab: SbbTabElement | undefined;
 };
-/**
- * @deprecated
- */
-export interface InterfaceSbbTabGroupActions {
-    activate(): void;
-    deactivate(): void;
-    enable(): void;
-    disable(): void;
-    select(): void;
-}
-/**
- * @deprecated
- */
-export interface InterfaceSbbTabGroupTab extends SbbTabLabelElement {
-    active: boolean;
-    disabled: boolean;
-    tab: SbbTabElement | null;
-    index?: number;
-    tabGroupActions?: InterfaceSbbTabGroupActions;
-    size: 's' | 'l' | 'xl';
-}
 declare const SbbTabGroupElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbElementInternalsMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbHydrationMixinType> & typeof LitElement & import('../../core/mixins.ts').SbbElementInternalsConstructor;
 /**
  * It displays one or more tabs, each one with a label and some content.
@@ -49,9 +28,7 @@ export declare class SbbTabGroupElement extends SbbTabGroupElement_base {
      * Size variant, either s, l or xl.
      * @default 'l' / 's' (lean)
      */
-    set size(value: 's' | 'l' | 'xl');
-    get size(): 's' | 'l' | 'xl';
-    private _size;
+    accessor size: 's' | 'l' | 'xl';
     /**
      * Sets the initial tab. If it matches a disabled tab or exceeds the length of
      * the tab group, the first enabled tab will be selected.
@@ -79,7 +56,6 @@ export declare class SbbTabGroupElement extends SbbTabGroupElement_base {
      */
     activateTab(tabIndex: number): void;
     private _enabledTabs;
-    private _updateSize;
     private _onContentSlotChange;
     private _onLabelSlotChange;
     private _initSelection;

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":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAUvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI/C,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;;GAEG;AACH,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;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;;AAED;;;;;GAKG;AACH,qBAEM,kBAAmB,SAAQ,uBAAuD;IACtF,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,uBAAuB,CAI5B;IAEH;;;OAGG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,EAGtC;IACD,IAAW,IAAI,IAAI,GAAG,GAAG,GAAG,GAAG,IAAI,CAElC;IACD,OAAO,CAAC,KAAK,CAA0C;IAEvD;;;OAGG;IACH,SAEgB,oBAAoB,EAAE,MAAM,CAAK;IAEjD,yCAAyC;IACzC,IAAW,MAAM,IAAI,kBAAkB,EAAE,CAQxC;IAED,mCAAmC;IACnC,IAAW,IAAI,IAAI,aAAa,EAAE,CAQjC;;cAOkB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAW9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB,CAG1B;IAEF,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,cAAc;IAoBtB;;OAEG;IACH,SAAS,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI;cAIvC,MAAM,IAAI,cAAc;CAiB5C;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":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAcvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI/C,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;;;;;GAKG;AACH,qBAEM,kBAAmB,SAAQ,uBAAuD;IACtF,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,uBAAuB,CAI5B;IAEH;;;OAGG;IACH,SACgB,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAwB;IAE9D;;;OAGG;IACH,SAEgB,oBAAoB,EAAE,MAAM,CAAK;IAEjD,yCAAyC;IACzC,IAAW,MAAM,IAAI,kBAAkB,EAAE,CAQxC;IAED,mCAAmC;IACnC,IAAW,IAAI,IAAI,aAAa,EAAE,CAQjC;;cAOkB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAW9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,oBAAoB,CAG1B;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,cAAc;IAoBtB;;OAEG;IACH,SAAS,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI;cAIvC,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

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

@@ -1,56 +1,57 @@
-var S = (i) => {
+var z = (i) => {
   throw TypeError(i);
 };
-var x = (i, a, s) => a.has(i) || S("Cannot " + s);
-var v = (i, a, s) => (x(i, a, "read from private field"), s ? s.call(i) : a.get(i)), z = (i, a, s) => a.has(i) ? S("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, s), c = (i, a, s, l) => (x(i, a, "write to private field"), l ? l.call(i, s) : a.set(i, s), s);
-import { __esDecorate as h, __runInitializers as d } from "tslib";
-import { ResizeController as T } from "@lit-labs/observers/resize-controller.js";
-import { css as k, LitElement as C, html as w } from "lit";
-import { customElement as G, property as E } from "lit/decorators.js";
-import { ref as y } from "lit/directives/ref.js";
-import { isArrowKeyPressed as L, getNextElementIndex as $ } from "../../core/a11y.js";
-import { forceType as D } from "../../core/decorators.js";
-import { isLean as A } from "../../core/dom.js";
-import { throttle as R } from "../../core/eventing.js";
-import { SbbElementInternalsMixin as N, SbbHydrationMixin as O } from "../../core/mixins.js";
-import { boxSizingStyles as P } from "../../core/styles.js";
-const K = k`:host{display:block;--sbb-tab-group-animation-duration: 0s}:host(:is(:state(initialized),[state--initialized])){--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) )}.sbb-tab-group{display:flex;flex-wrap:wrap}.sbb-tab-group-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}`;
-let Z = (() => {
-  var o, n;
-  let i = [G("sbb-tab-group")], a, s = [], l, m = N(O(C)), u = [], p, f, _ = [], g = [];
-  return n = class extends m {
+var E = (i, a, s) => a.has(i) || z("Cannot " + s);
+var m = (i, a, s) => (E(i, a, "read from private field"), s ? s.call(i) : a.get(i)), u = (i, a, s) => a.has(i) ? z("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, s), d = (i, a, s, l) => (E(i, a, "write to private field"), l ? l.call(i, s) : a.set(i, s), s);
+import { __esDecorate as p, __runInitializers as h } from "tslib";
+import { ResizeController as k } from "@lit-labs/observers/resize-controller.js";
+import { css as w, LitElement as L, html as G } from "lit";
+import { customElement as $, property as I } from "lit/decorators.js";
+import { ref as T } from "lit/directives/ref.js";
+import { isArrowKeyPressed as D, getNextElementIndex as R } from "../../core/a11y.js";
+import { forceType as N } from "../../core/decorators.js";
+import { isLean as O } from "../../core/dom.js";
+import { throttle as P } from "../../core/eventing.js";
+import { SbbElementInternalsMixin as A, SbbHydrationMixin as K, ɵstateController as j } from "../../core/mixins.js";
+import { boxSizingStyles as H } from "../../core/styles.js";
+const M = w`:host{display:block;--sbb-tab-group-animation-duration: 0s}:host(:is(:state(initialized),[state--initialized])){--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) )}.sbb-tab-group{display:flex;flex-wrap:wrap}.sbb-tab-group-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}`;
+let it = (() => {
+  var o, b, n;
+  let i = [$("sbb-tab-group")], a, s = [], l, f = A(K(L)), _, g = [], x = [], S, v = [], y = [];
+  return n = class extends f {
     constructor() {
       super();
-      z(this, o);
-      this._tabGroupElement = d(this, u), this._tabGroupResizeObserver = new T(this, {
+      u(this, o);
+      u(this, b);
+      this._tabGroupResizeObserver = new k(this, {
         target: null,
         skipInitial: !0,
         callback: (t) => this._onTabGroupElementResize(t)
-      }), this._size = A() ? "s" : "l", c(this, o, d(this, _, 0)), this._onContentSlotChange = (d(this, g), () => {
+      }), d(this, o, h(this, g, O() ? "s" : "l")), d(this, b, (h(this, x), h(this, v, 0))), this._onContentSlotChange = (h(this, y), () => {
         this.labels.forEach((t) => t.linkToTab()), this.labels.find((t) => t.active)?.activate();
       }), this._onLabelSlotChange = () => {
-        this._updateSize(), this.labels.forEach((t) => t.linkToTab());
+        this.labels.forEach((t) => t.linkToTab());
       }, this.addEventListener?.("keydown", (t) => this._handleKeyDown(t));
     }
     /**
      * Size variant, either s, l or xl.
      * @default 'l' / 's' (lean)
      */
-    set size(t) {
-      this._size = t, this._updateSize();
-    }
     get size() {
-      return this._size;
+      return m(this, o);
+    }
+    set size(t) {
+      d(this, o, t);
     }
     /**
      * Sets the initial tab. If it matches a disabled tab or exceeds the length of
      * the tab group, the first enabled tab will be selected.
      */
     get initialSelectedIndex() {
-      return v(this, o);
+      return m(this, b);
     }
     set initialSelectedIndex(t) {
-      c(this, o, t);
+      d(this, b, t);
     }
     /** Gets the slotted `sbb-tab-label`s. */
     get labels() {
@@ -61,7 +62,7 @@ let Z = (() => {
       return Array.from(this.children ?? []).filter((t) => /^sbb-tab$/u.test(t.localName));
     }
     firstUpdated(t) {
-      super.firstUpdated(t), this.labels.forEach((e) => e.linkToTab()), this._initSelection(), Promise.resolve().then(() => this.toggleState("initialized", !0)), this._tabGroupResizeObserver.observe(this._tabGroupElement);
+      super.firstUpdated(t), this.labels.forEach((e) => e.linkToTab()), this._initSelection(), Promise.resolve().then(() => this.internals.states.add("initialized")), this._tabGroupResizeObserver.observe(this._tabGroupElement);
     }
     /**
      * Disables a tab by index.
@@ -87,9 +88,6 @@ let Z = (() => {
     _enabledTabs() {
       return this.labels.filter((t) => (customElements.upgrade(t), !t.disabled));
     }
-    _updateSize() {
-      this.labels.forEach((t) => t.setAttribute("data-size", this.size));
-    }
     _initSelection() {
       const t = this.labels[this.initialSelectedIndex];
       if (t && (customElements.upgrade(t), this.initialSelectedIndex >= 0 && this.initialSelectedIndex < this.labels.length && !t.disabled)) {
@@ -101,16 +99,16 @@ let Z = (() => {
     _onTabGroupElementResize(t) {
       for (const e of t) {
         const r = e.target.firstElementChild.assignedElements();
-        for (const b of r)
-          b.toggleAttribute("data-has-divider", b === r[0] || b.offsetLeft === r[0].offsetLeft), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
+        for (const c of r)
+          j(c)?.toggle("has-divider", c === r[0] || c.offsetLeft === r[0].offsetLeft), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
       }
     }
     _handleKeyDown(t) {
       const e = this._enabledTabs();
       if (!(!e || // don't trap nested handling
-      t.target !== this && t.target.parentElement !== this) && L(t)) {
-        const r = e.findIndex((I) => I.active), b = $(t, r, e.length);
-        e[b]?.activate(), e[b]?.focus(), t.preventDefault();
+      t.target !== this && t.target.parentElement !== this) && D(t)) {
+        const r = e.findIndex((C) => C.active), c = R(t, r, e.length);
+        e[c]?.activate(), e[c]?.focus(), t.preventDefault();
       }
     }
     /**
@@ -120,33 +118,33 @@ let Z = (() => {
       this._tabContentElement.style.height = `${t}px`;
     }
     render() {
-      return w`
+      return G`
       <div
         class="sbb-tab-group"
         role="tablist"
-        ${y((t) => this._tabGroupElement = t)}
+        ${T((t) => this._tabGroupElement = t)}
       >
         <slot name="tab-bar" @slotchange=${this._onLabelSlotChange}></slot>
       </div>
       <div
         class="sbb-tab-group-content"
-        ${y((t) => this._tabContentElement = t)}
+        ${T((t) => this._tabContentElement = t)}
       >
-        <slot @slotchange=${R(this._onContentSlotChange, 150)}></slot>
+        <slot @slotchange=${P(this._onContentSlotChange, 150)}></slot>
       </div>
     `;
     }
-  }, o = new WeakMap(), l = n, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
-    p = [E()], f = [D(), E({ attribute: "initial-selected-index", type: Number })], h(n, null, p, { kind: "setter", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, set: (e, r) => {
+  }, o = new WeakMap(), b = new WeakMap(), l = n, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+    _ = [I()], S = [N(), I({ attribute: "initial-selected-index", type: Number })], p(n, null, _, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, r) => {
       e.size = r;
-    } }, metadata: t }, null, u), h(n, null, f, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, r) => {
+    } }, metadata: t }, g, x), p(n, null, S, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, r) => {
       e.initialSelectedIndex = r;
-    } }, metadata: t }, _, g), h(null, a = { value: l }, i, { kind: "class", name: l.name, metadata: t }, null, s), l = a.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.styles = [P, K], n.events = {
+    } }, metadata: t }, v, y), p(null, a = { value: l }, i, { kind: "class", name: l.name, metadata: t }, null, s), l = a.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.styles = [H, M], n.events = {
     tabchange: "tabchange"
-  }, d(l, s), l;
+  }, h(l, s), l;
 })();
 export {
-  Z as SbbTabGroupElement
+  it as SbbTabGroupElement
 };

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

@@ -15,6 +15,7 @@ export declare class SbbTabLabelElement extends SbbTabLabelElement_base {
     static styles: CSSResultGroup;
     /** Whether the tab is selected. */
     private _selected;
+    private _previousSize;
     /**
      * The level will correspond to the heading tag generated in the title.
      * Use this property to generate the appropriate header tag, taking SEO into consideration.

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

@@ -1 +1 @@
-{"version":3,"file":"tab-label.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-label/tab-label.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAQjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAA6B,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAIrF;;;;;;GAMG;AACH,qBAEM,kBAAmB,SAAQ,uBAEhC;IACC,OAAuB,IAAI,SAAS;IACpC,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,mCAAmC;IACnC,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACH,SAA4B,KAAK,EAAE,aAAa,CAAO;IAEvD,wBAAwB;IACxB,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,uCAAuC;IACvC,SAEgB,MAAM,EAAE,MAAM,CAAM;IAEpC,wDAAwD;IACxD,IAAW,GAAG,IAAI,aAAa,GAAG,IAAI,CAIrC;IAED,sCAAsC;IACtC,IAAW,KAAK,IAAI,kBAAkB,GAAG,IAAI,CAE5C;;IAQe,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAsB5E,0BAA0B;IACnB,UAAU,IAAI,IAAI;IAOzB,+FAA+F;IACxF,QAAQ,IAAI,IAAI;IAkCvB;;OAEG;IACH,SAAS,CAAC,SAAS,IAAI,IAAI;cAYR,MAAM,IAAI,cAAc;CAoB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
+{"version":3,"file":"tab-label.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-label/tab-label.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AASjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAA6B,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAIrF;;;;;;GAMG;AACH,qBAEM,kBAAmB,SAAQ,uBAEhC;IACC,OAAuB,IAAI,SAAS;IACpC,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,mCAAmC;IACnC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,aAAa,CAA2C;IAEhE;;;OAGG;IACH,SAA4B,KAAK,EAAE,aAAa,CAAO;IAEvD,wBAAwB;IACxB,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,uCAAuC;IACvC,SAEgB,MAAM,EAAE,MAAM,CAAM;IAEpC,wDAAwD;IACxD,IAAW,GAAG,IAAI,aAAa,GAAG,IAAI,CAIrC;IAED,sCAAsC;IACtC,IAAW,KAAK,IAAI,kBAAkB,GAAG,IAAI,CAE5C;;IAqBe,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAsB5E,0BAA0B;IACnB,UAAU,IAAI,IAAI;IAOzB,+FAA+F;IACxF,QAAQ,IAAI,IAAI;IAkCvB;;OAEG;IACH,SAAS,CAAC,SAAS,IAAI,IAAI;cAYR,MAAM,IAAI,cAAc;CAoB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

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

@@ -1,27 +1,32 @@
-var S = (a) => {
+var I = (a) => {
   throw TypeError(a);
 };
-var E = (a, s, b) => s.has(a) || S("Cannot " + b);
-var d = (a, s, b) => (E(a, s, "read from private field"), b ? b.call(a) : s.get(a)), m = (a, s, b) => s.has(a) ? S("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, b), n = (a, s, b, o) => (E(a, s, "write to private field"), o ? o.call(a, b) : s.set(a, b), b);
+var E = (a, s, i) => s.has(a) || I("Cannot " + i);
+var d = (a, s, i) => (E(a, s, "read from private field"), i ? i.call(a) : s.get(a)), m = (a, s, i) => s.has(a) ? I("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, i), n = (a, s, i, o) => (E(a, s, "write to private field"), o ? o.call(a, i) : s.set(a, i), i);
 import { __esDecorate as u, __runInitializers as r } from "tslib";
-import { css as B, LitElement as C } from "lit";
+import { css as L, LitElement as B } from "lit";
 import { customElement as D, property as f } from "lit/decorators.js";
-import { unsafeStatic as L, html as M } from "lit/static-html.js";
-import { forceType as $, omitEmptyConverter as N } from "../../core/decorators.js";
-import { SbbDisabledMixin as A, SbbElementInternalsMixin as G } from "../../core/mixins.js";
-import { boxSizingStyles as j } from "../../core/styles.js";
-import { SbbIconNameMixin as O } from "../../icon.js";
-const U = B`:host{--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-color: var(--sbb-color-granite);--sbb-tab-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);--sbb-tab-label-cursor: var(--sbb-cursor-pointer);--sbb-tab-label-pointer-events: unset;--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-marker-transform: scale(0);--sbb-tab-label-text-decoration: none;--sbb-tab-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-tab-label-animation-easing: var(--sbb-animation-easing);--sbb-tab-label-amount-color: var(--sbb-color-metal);--sbb-tab-label-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));display:inline-block;max-width:100%;pointer-events:var(--sbb-tab-label-pointer-events);-webkit-tap-highlight-color:transparent;outline:none!important}@media(forced-colors:active){:host{--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host([data-size=s]){--sbb-tab-label-height: var(--sbb-size-element-xs);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs)}:host([disabled]){--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-text-decoration: line-through}@media(forced-colors:active){:host([disabled]){--sbb-tab-label-color: GrayText;--sbb-tab-label-amount-color: GrayText}}:host([active]:not([disabled])){--sbb-tab-label-color: var(--sbb-color-3);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-marker-transform: scale(1)}@media(forced-colors:active){:host([active]:not([disabled])){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}@media(any-hover:hover){:host(:hover:not([disabled])){--sbb-tab-label-marker-transform: scale(1)}}:host(:active){--sbb-tab-label-color: var(--sbb-color-3)}.sbb-tab-label__wrapper{position:relative}:host(:focus-visible) .sbb-tab-label__wrapper:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:"";position:absolute;display:block;inset:0;z-index:1;border-radius:calc(var(--sbb-border-radius-2x) - var(--sbb-focus-outline-offset))}.sbb-tab-label{position:relative;margin:0;min-height:var(--sbb-tab-label-height);display:flex;align-items:center;padding-inline:var(--sbb-tab-label-inline-padding);gap:var(--sbb-spacing-fixed-2x);-webkit-user-select:none;user-select:none;cursor:var(--sbb-tab-label-cursor);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host([data-has-divider]) .sbb-tab-label:after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-tab-label-line-color)}.sbb-tab-label:before{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:var(--sbb-border-width-3x);background-color:var(--sbb-tab-label-color);transform:var(--sbb-tab-label-marker-transform);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:transform,background-color;z-index:1}.sbb-tab-label__icon,.sbb-tab-label__text,.sbb-tab-label__amount{text-decoration:var(--sbb-tab-label-text-decoration)}.sbb-tab-label__icon{display:flex;flex-shrink:0;color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}:host([data-size=s]) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}:host([data-size=xl]) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-text-font-size-xl);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-tab-label__text{display:none}.sbb-tab-label__amount{display:flex;color:var(--sbb-tab-label-amount-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tab-label__amount{display:none}:host([data-size=s]) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host([data-size=xl]) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-text-font-size-xl);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}`;
-let Y = (() => {
-  var c, v, h, i;
-  let a = [D("sbb-tab-label")], s, b = [], o, p = A(O(G(C))), x, g = [], _ = [], y, z = [], w = [], k, T = [], I = [];
-  return i = class extends p {
+import { unsafeStatic as $, html as M } from "lit/static-html.js";
+import { SbbPropertyWatcherController as N } from "../../core/controllers.js";
+import { forceType as C, omitEmptyConverter as A } from "../../core/decorators.js";
+import { SbbDisabledMixin as G, SbbElementInternalsMixin as j } from "../../core/mixins.js";
+import { boxSizingStyles as O } from "../../core/styles.js";
+import { SbbIconNameMixin as U } from "../../icon.js";
+const W = L`:host{--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-color: var(--sbb-color-granite);--sbb-tab-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);--sbb-tab-label-cursor: var(--sbb-cursor-pointer);--sbb-tab-label-pointer-events: unset;--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-marker-transform: scale(0);--sbb-tab-label-text-decoration: none;--sbb-tab-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-tab-label-animation-easing: var(--sbb-animation-easing);--sbb-tab-label-amount-color: var(--sbb-color-metal);--sbb-tab-label-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));display:inline-block;max-width:100%;pointer-events:var(--sbb-tab-label-pointer-events);-webkit-tap-highlight-color:transparent;outline:none!important}@media(forced-colors:active){:host{--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host(:is(:state(size-s),[state--size-s])){--sbb-tab-label-height: var(--sbb-size-element-xs);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs)}:host([disabled]){--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-text-decoration: line-through}@media(forced-colors:active){:host([disabled]){--sbb-tab-label-color: GrayText;--sbb-tab-label-amount-color: GrayText}}:host([active]:not([disabled])){--sbb-tab-label-color: var(--sbb-color-3);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-marker-transform: scale(1)}@media(forced-colors:active){:host([active]:not([disabled])){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}@media(any-hover:hover){:host(:hover:not([disabled])){--sbb-tab-label-marker-transform: scale(1)}}:host(:active){--sbb-tab-label-color: var(--sbb-color-3)}.sbb-tab-label__wrapper{position:relative}:host(:focus-visible) .sbb-tab-label__wrapper:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:"";position:absolute;display:block;inset:0;z-index:1;border-radius:calc(var(--sbb-border-radius-2x) - var(--sbb-focus-outline-offset))}.sbb-tab-label{position:relative;margin:0;min-height:var(--sbb-tab-label-height);display:flex;align-items:center;padding-inline:var(--sbb-tab-label-inline-padding);gap:var(--sbb-spacing-fixed-2x);-webkit-user-select:none;user-select:none;cursor:var(--sbb-tab-label-cursor);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host(:is(:state(has-divider),[state--has-divider])) .sbb-tab-label:after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-tab-label-line-color)}.sbb-tab-label:before{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:var(--sbb-border-width-3x);background-color:var(--sbb-tab-label-color);transform:var(--sbb-tab-label-marker-transform);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:transform,background-color;z-index:1}.sbb-tab-label__icon,.sbb-tab-label__text,.sbb-tab-label__amount{text-decoration:var(--sbb-tab-label-text-decoration)}.sbb-tab-label__icon{display:flex;flex-shrink:0;color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}:host(:is(:state(size-s),[state--size-s])) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}:host(:is(:state(size-xl),[state--size-xl])) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-text-font-size-xl);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-tab-label__text{display:none}.sbb-tab-label__amount{display:flex;color:var(--sbb-tab-label-amount-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tab-label__amount{display:none}:host(:is(:state(size-s),[state--size-s])) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host(:is(:state(size-xl),[state--size-xl])) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-text-font-size-xl);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}`;
+let Z = (() => {
+  var c, h, v, b;
+  let a = [D("sbb-tab-label")], s, i = [], o, p = G(U(j(B))), x, g = [], _ = [], y, z = [], w = [], k, S = [], T = [];
+  return b = class extends p {
     constructor() {
       super();
       m(this, c);
-      m(this, v);
       m(this, h);
-      this._selected = !1, n(this, c, r(this, g, "1")), n(this, v, (r(this, _), r(this, z, !1))), n(this, h, (r(this, w), r(this, T, ""))), r(this, I), this.addEventListener("click", () => this.activate());
+      m(this, v);
+      this._selected = !1, this._previousSize = null, n(this, c, r(this, g, "1")), n(this, h, (r(this, _), r(this, z, !1))), n(this, v, (r(this, w), r(this, S, ""))), r(this, T), this.addEventListener("click", () => this.activate()), this.addController(new N(this, () => this.group, {
+        size: (t) => {
+          this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = t?.size || null, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
+        }
+      }));
     }
     /**
      * The level will correspond to the heading tag generated in the title.
@@ -35,17 +40,17 @@ let Y = (() => {
     }
     /** Active tab state. */
     get active() {
-      return d(this, v);
+      return d(this, h);
     }
     set active(t) {
-      n(this, v, t);
+      n(this, h, t);
     }
     /** Amount displayed inside the tab. */
     get amount() {
-      return d(this, h);
+      return d(this, v);
     }
     set amount(t) {
-      n(this, h, t);
+      n(this, v, t);
     }
     /** Get the `sbb-tab` related to the `sbb-tab-label`. */
     get tab() {
@@ -93,7 +98,7 @@ let Y = (() => {
       const t = `h${Number(this.level) < 7 ? this.level : "1"}`;
       return M`
       <div class="sbb-tab-label__wrapper">
-        <${L(t)} class="sbb-tab-label">
+        <${$(t)} class="sbb-tab-label">
           <span class="sbb-tab-label__icon">
             ${this.renderIconSlot()}
           </span>
@@ -103,21 +108,21 @@ let Y = (() => {
           <span class="sbb-tab-label__amount">
             <slot name="amount">${this.amount}</slot>
           </span>
-        </${L(t)}>
+        </${$(t)}>
       </div>
     `;
     }
-  }, c = new WeakMap(), v = new WeakMap(), h = new WeakMap(), o = i, (() => {
+  }, c = new WeakMap(), h = new WeakMap(), v = new WeakMap(), o = b, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-    x = [f()], y = [$(), f({ reflect: !0, type: Boolean })], k = [$(), f({ reflect: !0, converter: N })], u(i, null, x, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (e) => "level" in e, get: (e) => e.level, set: (e, l) => {
+    x = [f()], y = [C(), f({ reflect: !0, type: Boolean })], k = [C(), f({ reflect: !0, converter: A })], u(b, null, x, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (e) => "level" in e, get: (e) => e.level, set: (e, l) => {
       e.level = l;
-    } }, metadata: t }, g, _), u(i, null, y, { kind: "accessor", name: "active", static: !1, private: !1, access: { has: (e) => "active" in e, get: (e) => e.active, set: (e, l) => {
+    } }, metadata: t }, g, _), u(b, null, y, { kind: "accessor", name: "active", static: !1, private: !1, access: { has: (e) => "active" in e, get: (e) => e.active, set: (e, l) => {
       e.active = l;
-    } }, metadata: t }, z, w), u(i, null, k, { kind: "accessor", name: "amount", static: !1, private: !1, access: { has: (e) => "amount" in e, get: (e) => e.amount, set: (e, l) => {
+    } }, metadata: t }, z, w), u(b, null, k, { kind: "accessor", name: "amount", static: !1, private: !1, access: { has: (e) => "amount" in e, get: (e) => e.amount, set: (e, l) => {
       e.amount = l;
-    } }, metadata: t }, T, I), u(null, s = { value: o }, a, { kind: "class", name: o.name, metadata: t }, null, b), o = s.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), i.role = "tab", i.styles = [j, U], r(o, b), o;
+    } }, metadata: t }, S, T), u(null, s = { value: o }, a, { kind: "class", name: o.name, metadata: t }, null, i), o = s.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), b.role = "tab", b.styles = [O, W], r(o, i), o;
 })();
 export {
-  Y as SbbTabLabelElement
+  Z as SbbTabLabelElement
 };

package/tag/tag/tag.component.js

@@ -5,17 +5,17 @@ var G = (a, s, r) => s.has(a) || D("Cannot " + r);
 var u = (a, s, r) => (G(a, s, "read from private field"), r ? r.call(a) : s.get(a)), v = (a, s, r) => s.has(a) ? D("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, r), n = (a, s, r, b) => (G(a, s, "write to private field"), b ? b.call(a, r) : s.set(a, r), r);
 import { __esDecorate as m, __runInitializers as l } from "tslib";
 import { css as V, html as $ } from "lit";
-import { customElement as A, property as p } from "lit/decorators.js";
-import { SbbButtonLikeBaseElement as H } from "../../core/base-elements.js";
-import { forceType as F, omitEmptyConverter as L, getOverride as O } from "../../core/decorators.js";
-import { isLean as j } from "../../core/dom.js";
+import { customElement as H, property as p } from "lit/decorators.js";
+import { SbbButtonLikeBaseElement as L } from "../../core/base-elements.js";
+import { forceType as F, omitEmptyConverter as O, getOverride as j } from "../../core/decorators.js";
+import { isLean as A } from "../../core/dom.js";
 import { SbbDisabledTabIndexActionMixin as M } from "../../core/mixins.js";
 import { boxSizingStyles as R } from "../../core/styles.js";
 import { SbbIconNameMixin as U } from "../../icon.js";
-const Y = V`:host{display:inline-block;outline:none!important;max-width:100%;--sbb-tag-border-radius: var(--sbb-border-radius-infinity);--sbb-tag-background-color: var(--sbb-background-color-1);--sbb-tag-border-color: var(--sbb-border-color-4-inverted);--sbb-tag-border-style: solid;--sbb-tag-border-width: var(--sbb-border-width-1x);--sbb-tag-text-color: var(--sbb-color-2);--sbb-tag-amount-color: var(--sbb-color-metal);--sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-tag-height: var(--sbb-size-element-xs);--sbb-tag-inset: 0;--sbb-tag-cursor: var(--sbb-cursor-pointer);--sbb-tag-content-shift: translateY(0);--sbb-tag-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-tag-animation-easing: var(--sbb-animation-easing);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-tag-gap: var(--sbb-spacing-fixed-2x)}@media(forced-colors:active){:host{--sbb-tag-background-color: Canvas !important;--sbb-tag-text-color: ButtonText;--sbb-tag-amount-color: ButtonText;--sbb-tag-border-color: CanvasText;--sbb-tag-border-width: var(--sbb-border-width-2x)}}:host([data-checked]){--sbb-tag-border-color: var(--sbb-border-color-3);--sbb-tag-border-width: var(--sbb-border-width-2x)}@media(forced-colors:active){:host([data-checked]){--sbb-tag-border-color: Highlight !important;--sbb-tag-border-width: var(--sbb-border-width-4x)}}:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color: var(--sbb-color-granite);--sbb-tag-text-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));--sbb-tag-amount-color: var(--sbb-tag-text-color);--sbb-tag-background-color: var(--sbb-background-color-3);--sbb-tag-border-color: var(--sbb-color-cement);--sbb-tag-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));--sbb-tag-border-style: dashed;--sbb-tag-cursor: unset;--sbb-tag-pointer-events: none}@media(forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color: GrayText;--sbb-tag-amount-color: GrayText;--sbb-tag-border-color: GrayText}}:host([data-checked]:is(:disabled,[disabled-interactive])){--sbb-tag-border-color: var(--sbb-color-metal);--sbb-tag-border-color: light-dark(var(--sbb-color-metal), var(--sbb-color-cement));--sbb-tag-border-style: dashed}@media(any-hover:hover){:host(:hover:not(:disabled,[disabled-interactive],:active,[data-active])){--sbb-tag-background-color: var(--sbb-background-color-3);--sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1))}}@media(any-hover:hover)and (forced-colors:active){:host(:hover:not(:disabled,[disabled-interactive],:active,[data-active])){--sbb-tag-border-color: Highlight}}:host(:is(:active,[data-active]):not(:disabled,[disabled-interactive])){--sbb-tag-background-color: var(--sbb-background-color-3);--sbb-tag-border-color: var(--sbb-color-iron);--sbb-tag-border-color: light-dark(var(--sbb-color-iron), var(--sbb-color-storm));--sbb-tag-border-width: var(--sbb-border-width-2x);--sbb-tag-text-color: var(--sbb-color-4)}@media(forced-colors:active){:host(:is(:active,[data-active]):not(:disabled,[disabled-interactive])){--sbb-tag-border-color: Highlight;--sbb-tag-text-color: ButtonText}}:host([size=s]){--sbb-tag-height: var(--sbb-size-element-xxxs);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x)}.sbb-tag{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;position:relative;display:flex;align-items:center;height:var(--sbb-tag-height);max-width:100%;gap:var(--sbb-tag-gap);padding-inline:var(--sbb-tag-padding-inline);cursor:var(--sbb-tag-cursor);border-radius:var(--sbb-tag-border-radius);color:var(--sbb-tag-text-color);transition:color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;pointer-events:var(--sbb-tag-pointer-events, unset)}.sbb-tag:before{content:"";position:absolute;inset:var(--sbb-tag-inset);background-color:var(--sbb-tag-background-color);border:var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);border-radius:var(--sbb-tag-border-radius);transition-duration:var(--sbb-tag-animation-duration);transition-timing-function:var(--sbb-tag-animation-easing);transition-property:inset,background-color,border-color,box-shadow}:host(:focus-visible) .sbb-tag:before{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-tag__icon{display:flex;align-items:center;height:calc(var(--sbb-typo-line-height-text) * 1em);flex-shrink:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tag__icon{display:none}.sbb-tag__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-tag__amount{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-tag-amount-color)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tag__amount{display:none}.sbb-tag--shift{transition:transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);transform:var(--sbb-tag-content-shift);will-change:transform}`;
+const Y = V`:host{display:inline-block;outline:none!important;max-width:100%;--sbb-tag-border-radius: var(--sbb-border-radius-infinity);--sbb-tag-background-color: var(--sbb-background-color-1);--sbb-tag-border-color: var(--sbb-border-color-4-inverted);--sbb-tag-border-style: solid;--sbb-tag-border-width: var(--sbb-border-width-1x);--sbb-tag-text-color: var(--sbb-color-2);--sbb-tag-amount-color: var(--sbb-color-metal);--sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-tag-height: var(--sbb-size-element-xs);--sbb-tag-inset: 0;--sbb-tag-cursor: var(--sbb-cursor-pointer);--sbb-tag-content-shift: translateY(0);--sbb-tag-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-tag-animation-easing: var(--sbb-animation-easing);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-tag-gap: var(--sbb-spacing-fixed-2x)}@media(forced-colors:active){:host{--sbb-tag-background-color: Canvas !important;--sbb-tag-text-color: ButtonText;--sbb-tag-amount-color: ButtonText;--sbb-tag-border-color: CanvasText;--sbb-tag-border-width: var(--sbb-border-width-2x)}}:host(:is(:state(checked),[state--checked])){--sbb-tag-border-color: var(--sbb-border-color-3);--sbb-tag-border-width: var(--sbb-border-width-2x)}@media(forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-tag-border-color: Highlight !important;--sbb-tag-border-width: var(--sbb-border-width-4x)}}:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color: var(--sbb-color-granite);--sbb-tag-text-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));--sbb-tag-amount-color: var(--sbb-tag-text-color);--sbb-tag-background-color: var(--sbb-background-color-3);--sbb-tag-border-color: var(--sbb-color-cement);--sbb-tag-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));--sbb-tag-border-style: dashed;--sbb-tag-cursor: unset;--sbb-tag-pointer-events: none}@media(forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color: GrayText;--sbb-tag-amount-color: GrayText;--sbb-tag-border-color: GrayText}}:host(:is(:state(checked),[state--checked]):is(:disabled,[disabled-interactive])){--sbb-tag-border-color: var(--sbb-color-metal);--sbb-tag-border-color: light-dark(var(--sbb-color-metal), var(--sbb-color-cement));--sbb-tag-border-style: dashed}@media(any-hover:hover){:host(:hover:not(:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-tag-background-color: var(--sbb-background-color-3);--sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1))}}@media(any-hover:hover)and (forced-colors:active){:host(:hover:not(:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-tag-border-color: Highlight}}:host(:is(:active,:is(:state(active),[state--active])):not(:disabled,[disabled-interactive])){--sbb-tag-background-color: var(--sbb-background-color-3);--sbb-tag-border-color: var(--sbb-color-iron);--sbb-tag-border-color: light-dark(var(--sbb-color-iron), var(--sbb-color-storm));--sbb-tag-border-width: var(--sbb-border-width-2x);--sbb-tag-text-color: var(--sbb-color-4)}@media(forced-colors:active){:host(:is(:active,:is(:state(active),[state--active])):not(:disabled,[disabled-interactive])){--sbb-tag-border-color: Highlight;--sbb-tag-text-color: ButtonText}}:host([size=s]){--sbb-tag-height: var(--sbb-size-element-xxxs);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x)}.sbb-tag{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;position:relative;display:flex;align-items:center;height:var(--sbb-tag-height);max-width:100%;gap:var(--sbb-tag-gap);padding-inline:var(--sbb-tag-padding-inline);cursor:var(--sbb-tag-cursor);border-radius:var(--sbb-tag-border-radius);color:var(--sbb-tag-text-color);transition:color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;pointer-events:var(--sbb-tag-pointer-events, unset)}.sbb-tag:before{content:"";position:absolute;inset:var(--sbb-tag-inset);background-color:var(--sbb-tag-background-color);border:var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);border-radius:var(--sbb-tag-border-radius);transition-duration:var(--sbb-tag-animation-duration);transition-timing-function:var(--sbb-tag-animation-easing);transition-property:inset,background-color,border-color,box-shadow}:host(:focus-visible) .sbb-tag:before{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-tag__icon{display:flex;align-items:center;height:calc(var(--sbb-typo-line-height-text) * 1em);flex-shrink:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tag__icon{display:none}.sbb-tag__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-tag__amount{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-tag-amount-color)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tag__amount{display:none}.sbb-tag--shift{transition:transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);transform:var(--sbb-tag-content-shift);will-change:transform}`;
 let at = (() => {
   var c, d, h, g, i;
-  let a = [A("sbb-tag")], s, r = [], b, f = U(M(H)), x, _ = [], k = [], y, w = [], z = [], E, S = [], C = [], T, I = [], B = [];
+  let a = [H("sbb-tag")], s, r = [], b, f = U(M(L)), x, k = [], _ = [], y, w = [], z = [], S, E = [], C = [], T, I = [], B = [];
   return i = class extends f {
     constructor() {
       super();
@@ -23,7 +23,7 @@ let at = (() => {
       v(this, d);
       v(this, h);
       v(this, g);
-      n(this, c, l(this, _, null)), n(this, d, (l(this, k), l(this, w, ""))), n(this, h, (l(this, z), l(this, S, !1))), n(this, g, (l(this, C), l(this, I, j() ? "s" : "m"))), this._group = (l(this, B), null), this.addEventListener?.("click", () => this._handleClick());
+      n(this, c, l(this, k, null)), n(this, d, (l(this, _), l(this, w, ""))), n(this, h, (l(this, z), l(this, E, !1))), n(this, g, (l(this, C), l(this, I, A() ? "s" : "m"))), this._group = (l(this, B), null), this.addEventListener?.("click", () => this._handleClick());
     }
     /** Value of the form element. */
     get value() {
@@ -73,7 +73,7 @@ let at = (() => {
       })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new Event("didChange", { bubbles: !0 })));
     }
     willUpdate(e) {
-      super.willUpdate(e), e.has("checked") && (this.internals.ariaPressed = `${this.checked}`, this.toggleAttribute("data-checked", this.checked), this.updateFormValue());
+      super.willUpdate(e), e.has("checked") && (this.internals.ariaPressed = `${this.checked}`, this.toggleState("checked", this.checked), this.updateFormValue());
       const t = this.closest?.("sbb-tag-group");
       t && !t.multiple && e.has("checked") && this.checked && t?.tags.filter((o) => o !== this).forEach((o) => o.checked = !1);
     }
@@ -108,13 +108,13 @@ let at = (() => {
     }
   }, c = new WeakMap(), d = new WeakMap(), h = new WeakMap(), g = new WeakMap(), b = i, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    x = [p()], y = [F(), p({ reflect: !0, converter: L })], E = [F(), p({ reflect: !1, type: Boolean })], T = [p({ reflect: !0 }), O((t, o) => t._group?.size ?? o)], m(i, null, x, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, get: (t) => t.value, set: (t, o) => {
+    x = [p()], y = [F(), p({ reflect: !0, converter: O })], S = [F(), p({ reflect: !1, type: Boolean })], T = [p({ reflect: !0 }), j((t, o) => t._group?.size ?? o)], m(i, null, x, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, get: (t) => t.value, set: (t, o) => {
       t.value = o;
-    } }, metadata: e }, _, k), m(i, null, y, { kind: "accessor", name: "amount", static: !1, private: !1, access: { has: (t) => "amount" in t, get: (t) => t.amount, set: (t, o) => {
+    } }, metadata: e }, k, _), m(i, null, y, { kind: "accessor", name: "amount", static: !1, private: !1, access: { has: (t) => "amount" in t, get: (t) => t.amount, set: (t, o) => {
       t.amount = o;
-    } }, metadata: e }, w, z), m(i, null, E, { kind: "accessor", name: "checked", static: !1, private: !1, access: { has: (t) => "checked" in t, get: (t) => t.checked, set: (t, o) => {
+    } }, metadata: e }, w, z), m(i, null, S, { kind: "accessor", name: "checked", static: !1, private: !1, access: { has: (t) => "checked" in t, get: (t) => t.checked, set: (t, o) => {
       t.checked = o;
-    } }, metadata: e }, S, C), m(i, null, T, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, o) => {
+    } }, metadata: e }, E, C), m(i, null, T, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, o) => {
       t.size = o;
     } }, metadata: e }, I, B), m(null, s = { value: b }, a, { kind: "class", name: b.name, metadata: e }, null, r), b = s.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), i.styles = [R, Y], i.events = {

package/teaser/teaser.component.js

@@ -45,7 +45,7 @@ let O = (() => {
       return c`
       <div class="sbb-teaser__wrapper">
         ${this.renderLink(
-        // For SEO we add the accessibility hidden as hidden content of the link
+        // For SEO, we add the accessibility hidden as hidden content of the link
         c`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
       )}
         ${this.renderContent()}

package/teaser-product/common.js

@@ -1,5 +1,5 @@
 import { SbbTeaserProductCommonElementMixin as r } from "./common/teaser-product-common.js";
-import { t as m } from "../teaser-product-common-a4NenpSA.js";
+import { t as m } from "../teaser-product-common-DwaWdQEh.js";
 export {
   r as SbbTeaserProductCommonElementMixin,
   m as teaserProductCommonStyle

package/teaser-product/teaser-product/teaser-product.component.js

@@ -15,7 +15,7 @@ let E = (() => {
       return i`
       <div class="sbb-teaser-product__wrapper">
         ${this.renderLink(
-        // For SEO we add the accessibility hidden as hidden content of the link
+        // For SEO, we add the accessibility hidden as hidden content of the link
         i`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
       )}
         ${this.renderTemplate()}

package/teaser-product-common-DwaWdQEh.js

@@ -0,0 +1,5 @@
+import { css as r } from "lit";
+const e = r`:host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-color: light-dark( var(--sbb-color-cloud), var(--sbb-color-midnight) );--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-4);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-footer-color: light-dark( var(--sbb-color-anthracite), var(--sbb-color-cloud) );--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media(min-width:64rem){:host{--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-background-color-1-negative);--sbb-teaser-product-content-color: var(--sbb-color-4-negative);--sbb-teaser-product-footer-color: var(--sbb-color-4-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-3-negative)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{overflow:hidden;border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0}@media(min-width:64rem){.sbb-teaser-product__image-container{position:absolute;inset:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){margin-block-start:0}::slotted(:is(sbb-action-group,:is(:state(action),[state--action])).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}::slotted([slot=image]){display:flex;width:100%;height:100%}@media(forced-colors:active){.sbb-teaser-product__root:after{content:"";position:absolute;display:block;inset:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-action-base{display:block;position:relative;text-decoration:none}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media(min-width:64rem){.sbb-teaser-product__container{display:grid;grid:"content ." 1fr "footnote ." auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:". content" ". footnote"}}.sbb-teaser-product__content{grid-area:content;align-self:center;margin:0;color:var(--sbb-teaser-product-content-color)}@media(min-width:64rem){.sbb-teaser-product__content{align-content:center;min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block))}}.sbb-teaser-product__footnote{grid-area:footnote;padding-block-start:var(--sbb-spacing-responsive-s);color:var(--sbb-teaser-product-footer-color);--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host(:not(:is(:state(slotted-footnote),[state--slotted-footnote]))) .sbb-teaser-product__footnote{padding-block-start:0}@media(min-width:64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}`;
+export {
+  e as t
+};

package/teaser-product.js

@@ -1,7 +1,7 @@
 import { SbbTeaserProductElement as r } from "./teaser-product/teaser-product/teaser-product.component.js";
 import { SbbTeaserProductStaticElement as m } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
 import { SbbTeaserProductCommonElementMixin as b } from "./teaser-product/common/teaser-product-common.js";
-import { t as c } from "./teaser-product-common-a4NenpSA.js";
+import { t as c } from "./teaser-product-common-DwaWdQEh.js";
 export {
   b as SbbTeaserProductCommonElementMixin,
   r as SbbTeaserProductElement,

package/time-input/time-input.component.d.ts

@@ -15,11 +15,6 @@ export declare class SbbTimeInputElement extends SbbTimeInputElement_base {
     set valueAsDate(date: Date | null);
     get valueAsDate(): Date | null;
     private _valueAsTime?;
-    /**
-     * Whether the input is empty.
-     * @deprecated
-     */
-    get empty(): boolean;
     /**
      * Stores the last string and parsed date object value to prevent repeated
      * parsing of the string value.