@sbb-esta/lyne-elements 3.8.0 → 3.9.0

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

@@ -9,6 +9,9 @@ export type SbbTabChangedEventDetails = {
     previousTabLabel: SbbTabLabelElement | undefined;
     previousTab: SbbTabElement | undefined;
 };
+/**
+ * @deprecated
+ */
 export interface InterfaceSbbTabGroupActions {
     activate(): void;
     deactivate(): void;
@@ -16,45 +19,47 @@ export interface InterfaceSbbTabGroupActions {
     disable(): void;
     select(): void;
 }
+/**
+ * @deprecated
+ */
 export interface InterfaceSbbTabGroupTab extends SbbTabLabelElement {
     active: boolean;
     disabled: boolean;
-    tab?: SbbTabElement;
+    tab: SbbTabElement | null;
     index?: number;
     tabGroupActions?: InterfaceSbbTabGroupActions;
     size: 's' | 'l' | 'xl';
 }
 declare const SbbTabGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
 /**
- * It displays one or more tabs, each one with a label and a content.
+ * It displays one or more tabs, each one with a label and some content.
  *
- * @slot - Use the unnamed slot to add content to the `sbb-tab-group` via
- * `sbb-tab-label` and `sbb-tab` instances.
+ * @slot - Use the unnamed slot to add content to the `sbb-tab-group` via `sbb-tab-label` and `sbb-tab` instances.
+ * @event {CustomEvent<SbbTabChangedEventDetails>} tabchange - The tabchange event is dispatched when a tab is selected.
  */
 export declare class SbbTabGroupElement extends SbbTabGroupElement_base {
     static styles: CSSResultGroup;
     static readonly events: {
         readonly tabchange: "tabchange";
     };
-    private _tabs;
-    private _selectedTab?;
     private _tabGroupElement;
     private _tabContentElement;
-    private _tabAttributeObserver;
     private _tabGroupResizeObserver;
     private _tabContentResizeObserver;
     /**
      * Size variant, either s, l or xl.
      * @default 'l' / 's' (lean)
      */
-    set size(value: InterfaceSbbTabGroupTab['size']);
-    get size(): InterfaceSbbTabGroupTab['size'];
+    set size(value: 's' | 'l' | 'xl');
+    get size(): 's' | 'l' | 'xl';
     private _size;
     /**
      * 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.
      */
     accessor initialSelectedIndex: number;
+    /** Gets the slotted `sbb-tab-label`s. */
+    get labels(): SbbTabLabelElement[];
     constructor();
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
     /**
@@ -72,17 +77,13 @@ export declare class SbbTabGroupElement extends SbbTabGroupElement_base {
      * @param tabIndex The index of the tab you want to activate.
      */
     activateTab(tabIndex: number): void;
-    private _getTabs;
     private _enabledTabs;
     private _updateSize;
     private _onContentSlotChange;
-    private _onTabsSlotChange;
-    private _assignId;
+    private _onLabelSlotChange;
     private _initSelection;
-    private _onTabAttributesChange;
     private _onTabGroupElementResize;
     private _onTabContentElementResize;
-    private _configure;
     private _handleKeyDown;
     protected render(): TemplateResult;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tab-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AASvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI1C,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,CAAC;IACnC,SAAS,EAAE,aAAa,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,IAAI,IAAI,CAAC;IACjB,UAAU,IAAI,IAAI,CAAC;IACnB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;;AAQD;;;;;GAKG;AACH,qBAEM,kBAAmB,SAAQ,uBAA6B;IAC5D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,YAAY,CAAC,CAA0B;IAC/C,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,qBAAqB,CAI1B;IACH,OAAO,CAAC,uBAAuB,CAI5B;IACH,OAAO,CAAC,yBAAyB,CAI9B;IAEH;;;OAGG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,uBAAuB,CAAC,MAAM,CAAC,EAGrD;IACD,IAAW,IAAI,IAAI,uBAAuB,CAAC,MAAM,CAAC,CAEjD;IACD,OAAO,CAAC,KAAK,CAAyD;IAEtE;;;OAGG;IACH,SAEgB,oBAAoB,EAAE,MAAM,CAAK;;cAO9B,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB,CAY1B;IAEF,OAAO,CAAC,iBAAiB,CAavB;IAEF,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,UAAU;IA4GlB,OAAO,CAAC,cAAc;cAoBH,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
+{"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;AASvC,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,uBAA6B;IAC5D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,uBAAuB,CAI5B;IACH,OAAO,CAAC,yBAAyB,CAI9B;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;;cAOkB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9E;;;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,0BAA0B;IAWlC,OAAO,CAAC,cAAc;cAoBH,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,51 +1,38 @@
-var g = (s) => {
-  throw TypeError(s);
+var v = (i) => {
+  throw TypeError(i);
 };
-var x = (s, a, n) => a.has(s) || g("Cannot " + n);
-var A = (s, a, n) => (x(s, a, "read from private field"), n ? n.call(s) : a.get(s)), T = (s, a, n) => a.has(s) ? g("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, n), d = (s, a, n, r) => (x(s, a, "write to private field"), r ? r.call(s, n) : a.set(s, n), n);
-import { __esDecorate as u, __runInitializers as b } from "tslib";
-import { MutationController as z } from "@lit-labs/observers/mutation-controller.js";
-import { ResizeController as y } from "@lit-labs/observers/resize-controller.js";
-import { css as E, LitElement as G, html as C } from "lit";
-import { customElement as w, property as I } from "lit/decorators.js";
-import { ref as k } from "lit/directives/ref.js";
-import { isArrowKeyPressed as R, getNextElementIndex as O } from "../../core/a11y.js";
+var y = (i, a, s) => a.has(i) || v("Cannot " + s);
+var x = (i, a, s) => (y(i, a, "read from private field"), s ? s.call(i) : a.get(i)), z = (i, a, s) => a.has(i) ? v("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, s), d = (i, a, s, l) => (y(i, a, "write to private field"), l ? l.call(i, s) : a.set(i, s), s);
+import { __esDecorate as h, __runInitializers as c } from "tslib";
+import { ResizeController as E } from "@lit-labs/observers/resize-controller.js";
+import { css as C, LitElement as k, html as w } from "lit";
+import { customElement as R, property as S } from "lit/decorators.js";
+import { ref as T } from "lit/directives/ref.js";
+import { isArrowKeyPressed as G, getNextElementIndex as L } from "../../core/a11y.js";
 import { forceType as $ } from "../../core/decorators.js";
 import { isLean as D } from "../../core/dom.js";
-import { throttle as N } from "../../core/eventing.js";
-import { SbbHydrationMixin as K } from "../../core/mixins.js";
-import { SbbTabElement as M } from "../tab.js";
-const P = E`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );display:block}.tab-group{display:flex;flex-wrap:wrap}.tab-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}.tab-content ::slotted(sbb-tab){visibility:hidden;opacity:0;height:0;overflow:hidden}.tab-content ::slotted(sbb-tab[active]){visibility:visible;opacity:1;height:fit-content;overflow:unset;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,visibility}.tab-content ::slotted(sbb-tab:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`, j = {
-  attributeFilter: ["active", "disabled"]
-};
-let H = 0, it = (() => {
-  var c, o;
-  let s = [w("sbb-tab-group")], a, n = [], r, h = K(G), f = [], m, _, v = [], p = [];
-  return o = class extends h {
+import { throttle as O } from "../../core/eventing.js";
+import { SbbHydrationMixin as A } from "../../core/mixins.js";
+const K = C`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );display:block}.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)}.sbb-tab-group-content ::slotted(sbb-tab){visibility:hidden;opacity:0;height:0;overflow:hidden}.sbb-tab-group-content ::slotted(sbb-tab[data-active]){visibility:visible;opacity:1;height:fit-content;overflow:unset;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,visibility}.sbb-tab-group-content ::slotted(sbb-tab:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`;
+let V = (() => {
+  var r, o;
+  let i = [R("sbb-tab-group")], a, s = [], l, u = A(k), m = [], f, p, _ = [], g = [];
+  return o = class extends u {
     constructor() {
       super();
-      T(this, c);
-      this._tabs = (b(this, f), []), this._tabAttributeObserver = new z(this, {
-        target: null,
-        config: j,
-        callback: (t) => this._onTabAttributesChange(t)
-      }), this._tabGroupResizeObserver = new y(this, {
+      z(this, r);
+      this._tabGroupElement = c(this, m), this._tabGroupResizeObserver = new E(this, {
         target: null,
         skipInitial: !0,
         callback: (t) => this._onTabGroupElementResize(t)
-      }), this._tabContentResizeObserver = new y(this, {
+      }), this._tabContentResizeObserver = new E(this, {
         target: null,
         skipInitial: !0,
         callback: (t) => this._onTabContentElementResize(t)
-      }), this._size = D() ? "s" : "l", d(this, c, b(this, v, 0)), this._onContentSlotChange = (b(this, p), () => {
-        this._tabContentElement = this.shadowRoot.querySelector("div.tab-content");
-        const t = this._getTabs().filter((e) => !this._tabs.includes(e));
-        t.length && (t.forEach((e) => this._configure(e)), this._tabs = this._tabs.concat(t), t.find((e) => e.active)?.tabGroupActions?.select());
-      }), this._onTabsSlotChange = () => {
-        const t = this._getTabs();
-        t.length < this._tabs.length && (this._tabs.filter((i) => !t.includes(i)).forEach((i) => {
-          i.tab?.remove();
-        }), this._tabs = t), this._tabs.forEach((e) => e.setAttribute("data-size", this.size));
+      }), this._size = D() ? "s" : "l", d(this, r, c(this, _, 0)), this._onContentSlotChange = (c(this, g), () => {
+        this.labels.forEach((t) => t.linkToTab()), this.labels.find((t) => t.active)?.activate();
+      }), this._onLabelSlotChange = () => {
+        this._updateSize(), this.labels.forEach((t) => t.linkToTab());
       }, this.addEventListener?.("keydown", (t) => this._handleKeyDown(t));
     }
     /**
@@ -63,144 +50,103 @@ let H = 0, it = (() => {
      * the tab group, the first enabled tab will be selected.
      */
     get initialSelectedIndex() {
-      return A(this, c);
+      return x(this, r);
     }
     set initialSelectedIndex(t) {
-      d(this, c, t);
+      d(this, r, t);
+    }
+    /** Gets the slotted `sbb-tab-label`s. */
+    get labels() {
+      return Array.from(this.children ?? []).filter((t) => /^sbb-tab-label$/u.test(t.localName));
     }
     firstUpdated(t) {
-      super.firstUpdated(t), this._tabs = this._getTabs(), this._tabs.forEach((e) => this._configure(e)), this._initSelection(), this._tabGroupResizeObserver.observe(this._tabGroupElement);
+      super.firstUpdated(t), this.labels.forEach((e) => e.linkToTab()), this._initSelection(), this._tabGroupResizeObserver.observe(this._tabGroupElement), this._tabContentResizeObserver.observe(this._tabContentElement);
     }
     /**
      * Disables a tab by index.
      * @param tabIndex The index of the tab you want to disable.
      */
     disableTab(t) {
-      this._tabs[t]?.tabGroupActions?.disable();
+      this.labels[t] && (this.labels[t].disabled = !0);
     }
     /**
      * Enables a tab by index.
      * @param tabIndex The index of the tab you want to enable.
      */
     enableTab(t) {
-      this._tabs[t]?.tabGroupActions?.enable();
+      this.labels[t] && (this.labels[t].disabled = !1);
     }
     /**
      * Activates a tab by index.
      * @param tabIndex The index of the tab you want to activate.
      */
     activateTab(t) {
-      this._tabs[t]?.tabGroupActions?.select();
-    }
-    _getTabs() {
-      return Array.from(this.children ?? []).filter((t) => /^sbb-tab-label$/u.test(t.localName));
+      this.labels[t]?.activate();
     }
     _enabledTabs() {
-      return this._tabs.filter((t) => !t.hasAttribute("disabled"));
+      return this.labels.filter((t) => (customElements.upgrade(t), !t.disabled));
     }
     _updateSize() {
-      for (const t of this._tabs)
-        t.setAttribute("data-size", this.size);
-    }
-    _assignId() {
-      return `sbb-tab-panel-${++H}`;
+      this.labels.forEach((t) => t.setAttribute("data-size", this.size));
     }
     _initSelection() {
-      this.initialSelectedIndex >= 0 && this.initialSelectedIndex < this._tabs.length && !this._tabs[this.initialSelectedIndex].disabled ? this._tabs[this.initialSelectedIndex].tabGroupActions?.select() : this._enabledTabs()[0]?.tabGroupActions?.select();
-    }
-    _onTabAttributesChange(t) {
-      for (const e of t) {
-        if (e.type !== "attributes")
-          return;
-        const i = e.target;
-        e.attributeName === "disabled" && (i.hasAttribute("disabled") && i !== this._selectedTab ? i.tabGroupActions?.disable() : i.disabled && i.tabGroupActions?.enable()), e.attributeName === "active" && (i.hasAttribute("active") && !i.disabled ? i.tabGroupActions?.select() : i === this._selectedTab && i.toggleAttribute("active", !0));
+      const t = this.labels[this.initialSelectedIndex];
+      if (t && (customElements.upgrade(t), this.initialSelectedIndex >= 0 && this.initialSelectedIndex < this.labels.length && !t.disabled)) {
+        t.activate();
+        return;
       }
+      this._enabledTabs()[0]?.activate();
     }
     _onTabGroupElementResize(t) {
       for (const e of t) {
-        const i = e.target.firstElementChild.assignedElements();
-        for (const l of i)
-          l.toggleAttribute("data-has-divider", l === i[0] || l.offsetLeft === i[0].offsetLeft), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
+        const n = e.target.firstElementChild.assignedElements();
+        for (const b of n)
+          b.toggleAttribute("data-has-divider", b === n[0] || b.offsetLeft === n[0].offsetLeft), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
       }
     }
     _onTabContentElementResize(t) {
       if (this._tabContentElement)
         for (const e of t) {
-          const i = Math.floor(e.contentRect.height);
-          this._tabContentElement.style.height = `${i}px`;
-        }
-    }
-    _configure(t) {
-      t.tabGroupActions = {
-        activate: () => {
-          t.toggleAttribute("active", !0), t.active = !0, t.tabIndex = 0, t.setAttribute("aria-selected", "true"), t.tab?.toggleAttribute("active", !0);
-        },
-        deactivate: () => {
-          t.removeAttribute("active"), t.active = !1, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), t.tab?.removeAttribute("active");
-        },
-        disable: () => {
-          t.disabled || (t.hasAttribute("disabled") || t.toggleAttribute("disabled", !0), t.disabled = !0, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), t.tab?.removeAttribute("active"), t.active && (t.removeAttribute("active"), t.active = !1, this._enabledTabs()[0]?.tabGroupActions?.select()));
-        },
-        enable: () => {
-          t.disabled && (t.removeAttribute("disabled"), t.disabled = !1);
-        },
-        select: () => {
-          if (t !== this._selectedTab && !t.disabled) {
-            const e = this._selectedTab;
-            e && (e.tabGroupActions?.deactivate(), this._tabContentResizeObserver.unobserve(e.tab)), t.tabGroupActions?.activate(), this._selectedTab = t, this._tabContentResizeObserver.observe(t.tab);
-            const i = this._tabs;
-            this.dispatchEvent(new CustomEvent("tabchange", {
-              bubbles: !0,
-              composed: !0,
-              detail: {
-                activeIndex: i.findIndex((l) => l === t),
-                activeTabLabel: t,
-                activeTab: t.tab,
-                previousIndex: i.findIndex((l) => l === e),
-                previousTabLabel: e,
-                previousTab: e?.tab
-              }
-            }));
-          }
+          const n = Math.floor(e.contentRect.height);
+          this._tabContentElement.style.height = `${n}px`;
         }
-      }, t.nextElementSibling?.localName === "sbb-tab" && (t.tab = t.nextElementSibling, t.tab.id = this._assignId(), t.tab instanceof M && (t.tab.tabIndex = 0, t.tab.configure())), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("aria-selected", String(t.active)), t.addEventListener("click", () => {
-        t.tabGroupActions?.select();
-      }), t.tab && (t.setAttribute("aria-controls", t.tab.id), t.tab.toggleAttribute("active", t.active)), this._tabAttributeObserver.observe(t), t.slot = "tab-bar";
     }
     _handleKeyDown(t) {
       const e = this._enabledTabs();
       if (!(!e || // don't trap nested handling
-      t.target !== this && t.target.parentElement !== this) && R(t)) {
-        const i = e.findIndex((S) => S.active), l = O(t, i, e.length);
-        e[l]?.tabGroupActions?.select(), e[l]?.focus(), t.preventDefault();
+      t.target !== this && t.target.parentElement !== this) && G(t)) {
+        const n = e.findIndex((I) => I.active), b = L(t, n, e.length);
+        e[b]?.activate(), e[b]?.focus(), t.preventDefault();
       }
     }
     render() {
-      return C`
+      return w`
       <div
-        class="tab-group"
+        class="sbb-tab-group"
         role="tablist"
-        ${k((t) => this._tabGroupElement = t)}
+        ${T((t) => this._tabGroupElement = t)}
       >
-        <slot name="tab-bar" @slotchange=${this._onTabsSlotChange}></slot>
+        <slot name="tab-bar" @slotchange=${this._onLabelSlotChange}></slot>
       </div>
-
-      <div class="tab-content">
-        <slot @slotchange=${N(this._onContentSlotChange, 150)}></slot>
+      <div
+        class="sbb-tab-group-content"
+        ${T((t) => this._tabContentElement = t)}
+      >
+        <slot @slotchange=${O(this._onContentSlotChange, 150)}></slot>
       </div>
     `;
     }
-  }, c = new WeakMap(), r = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    m = [I()], _ = [$(), I({ attribute: "initial-selected-index", type: Number })], u(o, null, m, { kind: "setter", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, set: (e, i) => {
-      e.size = i;
-    } }, metadata: t }, null, f), u(o, null, _, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, i) => {
-      e.initialSelectedIndex = i;
-    } }, metadata: t }, v, p), u(null, a = { value: r }, s, { kind: "class", name: r.name, metadata: t }, null, n), r = a.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = P, o.events = {
+  }, r = new WeakMap(), l = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    f = [S()], p = [$(), S({ attribute: "initial-selected-index", type: Number })], h(o, null, f, { kind: "setter", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, set: (e, n) => {
+      e.size = n;
+    } }, metadata: t }, null, m), h(o, null, p, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, n) => {
+      e.initialSelectedIndex = n;
+    } }, 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 });
+  })(), o.styles = K, o.events = {
     tabchange: "tabchange"
-  }, b(r, n), r;
+  }, c(l, s), l;
 })();
 export {
-  it as SbbTabGroupElement
+  V as SbbTabGroupElement
 };

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

@@ -1,5 +1,7 @@
-import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+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;
 /**
  * Combined with a `sbb-tab-group`, it displays a tab's title.
@@ -11,15 +13,32 @@ declare const SbbTabLabelElement_base: import('../../core/mixins.js').AbstractCo
 export declare class SbbTabLabelElement extends SbbTabLabelElement_base {
     static role: string;
     static styles: CSSResultGroup;
+    /** Whether the tab is selected. */
+    private _selected;
     /**
      * 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.
      */
     accessor level: SbbTitleLevel;
-    /** Active tab state */
+    /** Active tab state. */
     accessor active: boolean;
     /** Amount displayed inside the tab. */
     accessor amount: string;
+    /** Get the `sbb-tab` related to the `sbb-tab-label`. */
+    get tab(): SbbTabElement | null;
+    /** Get the parent `sbb-tab-group`. */
+    get group(): SbbTabGroupElement | null;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /** Deactivate the tab. */
+    deactivate(): void;
+    /** Select the tab, deactivating the current selected one, and dispatch the tabchange event. */
+    activate(): void;
+    /**
+     * @internal
+     */
+    protected linkToTab(): void;
     protected render(): TemplateResult;
 }
 declare global {

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,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAOjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAIpD;;;;;;GAMG;AACH,qBAGM,kBAAmB,SAAQ,uBAEhC;IACC,OAAuB,IAAI,SAAS;IACpC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAA4B,KAAK,EAAE,aAAa,CAAO;IAEvD,uBAAuB;IACvB,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,uCAAuC;IACvC,SAEgB,MAAM,EAAE,MAAM,CAAM;cAEjB,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;AAOjC,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,qBAGM,kBAAmB,SAAQ,uBAEhC;IACC,OAAuB,IAAI,SAAS;IACpC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,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;IAuB5E,0BAA0B;IACnB,UAAU,IAAI,IAAI;IAMzB,+FAA+F;IACxF,QAAQ,IAAI,IAAI;IAiCvB;;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,56 +1,98 @@
-var I = (t) => {
-  throw TypeError(t);
+var E = (a) => {
+  throw TypeError(a);
 };
-var E = (t, a, s) => a.has(t) || I("Cannot " + s);
-var m = (t, a, s) => (E(t, a, "read from private field"), s ? s.call(t) : a.get(t)), d = (t, a, s) => a.has(t) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, s), f = (t, a, s, l) => (E(t, a, "write to private field"), l ? l.call(t, s) : a.set(t, s), s);
-import { __esDecorate as h, __runInitializers as i } from "tslib";
-import { css as D, LitElement as M } from "lit";
-import { customElement as G, property as u } from "lit/decorators.js";
-import { unsafeStatic as B, html as N } from "lit/static-html.js";
-import { slotState as j, forceType as $, omitEmptyConverter as A } from "../../core/decorators.js";
-import { SbbDisabledMixin as L, SbbElementInternalsMixin as O } from "../../core/mixins.js";
-import { SbbIconNameMixin as C } from "../../icon.js";
-const P = D`*,:before,:after{box-sizing:border-box}: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: 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(:is([data-active],: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([data-slot-names~=icon],[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-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host([data-size=s]) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host([data-size=xl]) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-font-size-text-xl);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host(:not([data-slot-names~=unnamed])) .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-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:not([data-slot-names~=amount],[amount])) .sbb-tab-label__amount{display:none}:host([data-size=s]) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([data-size=xl]) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-font-size-text-xl);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}`;
-let W = (() => {
-  var n, r, c, o;
-  let t = [G("sbb-tab-label"), j()], a, s = [], l, p = L(C(O(M))), g, x = [], _ = [], y, z = [], w = [], k, S = [], T = [];
-  return o = class extends p {
+var S = (a, b, s) => b.has(a) || E("Cannot " + s);
+var h = (a, b, s) => (S(a, b, "read from private field"), s ? s.call(a) : b.get(a)), m = (a, b, s) => b.has(a) ? E("Cannot add the same private member more than once") : b instanceof WeakSet ? b.add(a) : b.set(a, s), n = (a, b, s, o) => (S(a, b, "write to private field"), o ? o.call(a, s) : b.set(a, s), s);
+import { __esDecorate as u, __runInitializers as r } from "tslib";
+import { css as B, LitElement as C } from "lit";
+import { customElement as A, property as f } from "lit/decorators.js";
+import { unsafeStatic as L, html as D } from "lit/static-html.js";
+import { slotState as M, forceType as $, omitEmptyConverter as N } from "../../core/decorators.js";
+import { SbbDisabledMixin as G, SbbElementInternalsMixin as j } from "../../core/mixins.js";
+import { SbbIconNameMixin as O } from "../../icon.js";
+const U = B`*,:before,:after{box-sizing:border-box}: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: 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(:is([data-active],: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([data-slot-names~=icon],[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-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host([data-size=s]) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host([data-size=xl]) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-font-size-text-xl);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host(:not([data-slot-names~=unnamed])) .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-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:not([data-slot-names~=amount],[amount])) .sbb-tab-label__amount{display:none}:host([data-size=s]) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([data-size=xl]) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-font-size-text-xl);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}`;
+let X = (() => {
+  var c, v, d, i;
+  let a = [A("sbb-tab-label"), M()], b, s = [], o, p = G(O(j(C))), g, x = [], _ = [], y, z = [], w = [], k, T = [], I = [];
+  return i = class extends p {
     constructor() {
-      super(...arguments);
-      d(this, n, i(this, x, "1"));
-      d(this, r, (i(this, _), i(this, z, !1)));
-      d(this, c, (i(this, w), i(this, S, "")));
-      i(this, T);
+      super();
+      m(this, c);
+      m(this, v);
+      m(this, d);
+      this._selected = !1, n(this, c, r(this, x, "1")), n(this, v, (r(this, _), r(this, z, !1))), n(this, d, (r(this, w), r(this, T, ""))), r(this, I), this.addEventListener("click", () => this.activate());
     }
     /**
      * 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.
      */
     get level() {
-      return m(this, n);
+      return h(this, c);
     }
-    set level(b) {
-      f(this, n, b);
+    set level(t) {
+      n(this, c, t);
     }
-    /** Active tab state */
+    /** Active tab state. */
     get active() {
-      return m(this, r);
+      return h(this, v);
     }
-    set active(b) {
-      f(this, r, b);
+    set active(t) {
+      n(this, v, t);
     }
     /** Amount displayed inside the tab. */
     get amount() {
-      return m(this, c);
+      return h(this, d);
     }
-    set amount(b) {
-      f(this, c, b);
+    set amount(t) {
+      n(this, d, t);
+    }
+    /** Get the `sbb-tab` related to the `sbb-tab-label`. */
+    get tab() {
+      return this.nextElementSibling?.localName === "sbb-tab" ? this.nextElementSibling : null;
+    }
+    /** Get the parent `sbb-tab-group`. */
+    get group() {
+      return this.closest("sbb-tab-group");
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.slot = "tab-bar", this.tabIndex = this.active ? 0 : -1;
+    }
+    willUpdate(t) {
+      super.willUpdate(t), t.has("active") && (this.internals.ariaSelected = `${this.active}`, this.tab?.toggleAttribute("data-active", this.active), this.active && !this.disabled ? this.activate() : this.deactivate()), t.has("disabled") && this.disabled && (this.tabIndex = -1, this.active && (this.deactivate(), this.group?.activateTab(0)));
+    }
+    /** Deactivate the tab. */
+    deactivate() {
+      this.active = !1, this._selected = !1, this.tabIndex = -1;
+    }
+    /** Select the tab, deactivating the current selected one, and dispatch the tabchange event. */
+    activate() {
+      if (this.disabled)
+        return;
+      const t = this.group?.labels || [], e = t.find((l) => l._selected);
+      e !== this && (e?.deactivate(), this.active = !0, this._selected = !0, this.tabIndex = 0, this.tab?.dispatchEvent(new Event("active", { bubbles: !0, composed: !0 })), this.group?.dispatchEvent(new CustomEvent("tabchange", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          activeIndex: t.findIndex((l) => l === this),
+          activeTabLabel: this,
+          activeTab: this.tab,
+          previousIndex: t.findIndex((l) => l === e),
+          previousTabLabel: e,
+          previousTab: e?.tab
+        }
+      })));
+    }
+    /**
+     * @internal
+     */
+    linkToTab() {
+      this.tab && (this.internals.ariaControlsElements = [this.tab]);
     }
     render() {
-      const b = `h${Number(this.level) < 7 ? this.level : "1"}`;
-      return N`
+      const t = `h${Number(this.level) < 7 ? this.level : "1"}`;
+      return D`
       <div class="sbb-tab-label__wrapper">
-        <${B(b)} class="sbb-tab-label">
+        <${L(t)} class="sbb-tab-label">
           <span class="sbb-tab-label__icon">
             ${this.renderIconSlot()}
           </span>
@@ -60,21 +102,21 @@ let W = (() => {
           <span class="sbb-tab-label__amount">
             <slot name="amount">${this.amount}</slot>
           </span>
-        </${B(b)}>
+        </${L(t)}>
       </div>
     `;
     }
-  }, n = new WeakMap(), r = new WeakMap(), c = new WeakMap(), l = o, (() => {
-    const b = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-    g = [u()], y = [$(), u({ reflect: !0, type: Boolean })], k = [$(), u({ reflect: !0, converter: A })], h(o, null, g, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (e) => "level" in e, get: (e) => e.level, set: (e, v) => {
-      e.level = v;
-    } }, metadata: b }, x, _), h(o, null, y, { kind: "accessor", name: "active", static: !1, private: !1, access: { has: (e) => "active" in e, get: (e) => e.active, set: (e, v) => {
-      e.active = v;
-    } }, metadata: b }, z, w), h(o, null, k, { kind: "accessor", name: "amount", static: !1, private: !1, access: { has: (e) => "amount" in e, get: (e) => e.amount, set: (e, v) => {
-      e.amount = v;
-    } }, metadata: b }, S, T), h(null, a = { value: l }, t, { kind: "class", name: l.name, metadata: b }, null, s), l = a.value, b && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: b });
-  })(), o.role = "tab", o.styles = P, i(l, s), l;
+  }, c = new WeakMap(), v = new WeakMap(), d = new WeakMap(), o = i, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+    g = [f()], y = [$(), f({ reflect: !0, type: Boolean })], k = [$(), f({ reflect: !0, converter: N })], u(i, null, g, { 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 }, x, _), 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) => {
+      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) => {
+      e.amount = l;
+    } }, metadata: t }, T, I), u(null, b = { value: o }, a, { kind: "class", name: o.name, metadata: t }, null, s), o = b.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), i.role = "tab", i.styles = U, r(o, s), o;
 })();
 export {
-  W as SbbTabLabelElement
+  X as SbbTabLabelElement
 };