@sbb-esta/lyne-elements 4.0.0-next.2 → 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

@@ -1,6 +1,6 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-import { SbbTabLabelElement } from '../tab-label.js';
-import { SbbTabElement } from '../tab.js';
+import { SbbTabLabelElement } from '../tab-label.ts';
+import { SbbTabElement } from '../tab.ts';
 export type SbbTabChangedEventDetails = {
     activeIndex: number;
     activeTabLabel: SbbTabLabelElement;
@@ -9,28 +9,7 @@ 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.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
+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-group.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './tab-group/tab-group.component.js';
+export * from './tab-group/tab-group.component.ts';
 //# sourceMappingURL=tab-group.d.ts.map

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

@@ -1,8 +1,8 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-import { SbbTitleLevel } from '../../title.js';
-import { SbbTabElement } from '../tab/tab.component.js';
-import { SbbTabGroupElement } from '../tab-group.js';
-declare const SbbTabLabelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
+import { SbbTitleLevel } from '../../title.ts';
+import { SbbTabElement } from '../tab/tab.component.ts';
+import { SbbTabGroupElement } from '../tab-group.ts';
+declare const SbbTabLabelElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../icon.ts').SbbIconNameMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.ts').SbbElementInternalsConstructor;
 /**
  * Combined with a `sbb-tab-group`, it displays a tab's title.
  *
@@ -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-inset: 0;--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/tabs/tab-label.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './tab-label/tab-label.component.js';
+export * from './tab-label/tab-label.component.ts';
 //# sourceMappingURL=tab-label.d.ts.map

package/tabs/tab.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './tab/tab.component.js';
+export * from './tab/tab.component.ts';
 //# sourceMappingURL=tab.d.ts.map

package/tabs.d.ts

@@ -1,7 +1,7 @@
 /**
  * @entrypoint
  */
-export * from './tabs/tab.js';
-export * from './tabs/tab-group.js';
-export * from './tabs/tab-label.js';
+export * from './tabs/tab.ts';
+export * from './tabs/tab-group.ts';
+export * from './tabs/tab-label.ts';
 //# sourceMappingURL=tabs.d.ts.map

package/tag/tag/tag.component.d.ts

@@ -1,8 +1,8 @@
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { SbbButtonLikeBaseElement } from '../../core/base-elements.js';
-import { FormRestoreReason, FormRestoreState } from '../../core/mixins.js';
+import { SbbButtonLikeBaseElement } from '../../core/base-elements.ts';
+import { FormRestoreReason, FormRestoreState } from '../../core/mixins.ts';
 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 SbbButtonLikeBaseElement;
+declare const SbbTagElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../icon.ts').SbbIconNameMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledMixinType & import('../../core/mixins.ts').SbbDisabledInteractiveMixinType> & typeof SbbButtonLikeBaseElement;
 /**
  * It displays a selectable element which can be used as a filter.
  *