@sbb-esta/lyne-elements-dev 4.7.0-dev.1773149675 → 4.7.0-dev.1773159918

package/stepper/stepper/stepper.component.js

@@ -1,47 +1,47 @@
-var q = (s) => {
+var M = (s) => {
   throw TypeError(s);
 };
-var T = (s, r, a) => r.has(s) || q("Cannot " + a);
-var f = (s, r, a) => (T(s, r, "read from private field"), a ? a.call(s) : r.get(s)), v = (s, r, a) => r.has(s) ? q("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, a), d = (s, r, a, n) => (T(s, r, "write to private field"), n ? n.call(s, a) : r.set(s, a), a);
-import { __esDecorate as c, __runInitializers as o } from "tslib";
-import { IntersectionController as H } from "@lit-labs/observers/intersection-controller.js";
-import { css as R, LitElement as B, html as D } from "lit";
-import { customElement as U, property as u } from "lit/decorators.js";
-import { isArrowKeyPressed as Q, getNextElementIndex as $ } from "../../core/a11y.js";
-import { SbbMediaQueryBreakpointUltraAndAbove as j, SbbMediaQueryBreakpointLargeAndAbove as K, SbbMediaQueryBreakpointSmallAndAbove as N, SbbMediaQueryBreakpointZeroAndAbove as P, SbbMediaMatcherController as V } from "../../core/controllers/media-matchers-controller.js";
-import { forceType as W } from "../../core/decorators.js";
-import { isLean as Z } from "../../core/dom.js";
-import { SbbHydrationMixin as G, SbbElementInternalsMixin as J } from "../../core/mixins.js";
-import { boxSizingStyles as X } from "../../core/styles.js";
-const Y = R`:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-3);display:block;position:relative;counter-reset:step-label}@media(forced-colors:active){:host{--sbb-stepper-marker-color: ButtonText}}:host(:is(:state(disable-animation),[state--disable-animation])){--sbb-disable-animation-duration: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:start;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-responsive-m);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`, A = 150, C = {
-  zero: P,
-  small: N,
-  large: K,
-  ultra: j
+var O = (s, i, a) => i.has(s) || M("Cannot " + a);
+var f = (s, i, a) => (O(s, i, "read from private field"), a ? a.call(s) : i.get(s)), m = (s, i, a) => i.has(s) ? M("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, a), o = (s, i, a, n) => (O(s, i, "write to private field"), n ? n.call(s, a) : i.set(s, a), a);
+import { __esDecorate as p, __runInitializers as d } from "tslib";
+import { IntersectionController as q } from "@lit-labs/observers/intersection-controller.js";
+import { css as T, html as A } from "lit";
+import { property as u } from "lit/decorators.js";
+import { isArrowKeyPressed as C, getNextElementIndex as H } from "../../core/a11y.js";
+import { SbbElement as R } from "../../core/base-elements.js";
+import { SbbMediaQueryBreakpointUltraAndAbove as B, SbbMediaQueryBreakpointLargeAndAbove as U, SbbMediaQueryBreakpointSmallAndAbove as D, SbbMediaQueryBreakpointZeroAndAbove as N, SbbMediaMatcherController as Q } from "../../core/controllers/media-matchers-controller.js";
+import { forceType as $ } from "../../core/decorators.js";
+import { isLean as j } from "../../core/dom.js";
+import { boxSizingStyles as K } from "../../core/styles.js";
+const P = T`:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-3);display:block;position:relative;counter-reset:step-label}@media(forced-colors:active){:host{--sbb-stepper-marker-color: ButtonText}}:host(:is(:state(disable-animation),[state--disable-animation])){--sbb-disable-animation-duration: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:start;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-responsive-m);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`, F = 150, L = {
+  zero: N,
+  small: D,
+  large: U,
+  ultra: B
 };
-class ee extends Event {
-  constructor(r, a, n, _) {
-    super("stepchange", { bubbles: !0, composed: !0 }), this.selectedIndex = r, this.previousIndex = a, this.selectedStep = n, this.previousStep = _;
+class V extends Event {
+  constructor(i, a, n, _) {
+    super("stepchange", { bubbles: !0, composed: !0 }), this.selectedIndex = i, this.previousIndex = a, this.selectedStep = n, this.previousStep = _;
   }
 }
-let ue = (() => {
-  var h, b, p, l;
-  let s = [U("sbb-stepper")], r, a = [], n, _ = G(J(B)), m = [], x, z = [], S = [], k, I, y = [], E = [], w, M = [], L = [], O, F;
-  return l = class extends _ {
+let ne = (() => {
+  var h, c, b, l;
+  let s = R, i = [], a, n = [], _ = [], g, x, z = [], k = [], S, I = [], y = [], w, E;
+  return l = class extends s {
     constructor() {
       super();
-      v(this, h);
-      v(this, b);
-      v(this, p);
-      this._observer = (o(this, m), new H(this, {
+      m(this, h);
+      m(this, c);
+      m(this, b);
+      this._observer = (d(this, i), new q(this, {
         target: null,
         callback: (e) => {
           e.forEach((t) => {
             t.intersectionRatio > 0 && (this._setStepperHeight(this.selected), this._setMarkerSize());
           });
         }
-      })), d(this, h, o(this, z, !1)), this._horizontalFrom = (o(this, S), null), d(this, b, o(this, y, "horizontal")), d(this, p, (o(this, E), o(this, M, Z() ? "s" : "m"))), this._requestedSelected = (o(this, L), null), this._requestedSelectedIndex = null, this._loaded = !1, this._resizeObserverTimeout = null, this._mediaMatcher = new V(this, {}), this._onStepperResize = () => {
-        this._checkOrientation(), this._setStepperHeight(this.selected), clearTimeout(this._resizeObserverTimeout), this.internals.states.add("disable-animation"), this._resizeObserverTimeout = setTimeout(() => this.internals.states.delete("disable-animation"), A);
+      })), o(this, h, d(this, n, !1)), this._horizontalFrom = (d(this, _), null), o(this, c, d(this, z, "horizontal")), o(this, b, (d(this, k), d(this, I, j() ? "s" : "m"))), this._requestedSelected = (d(this, y), null), this._requestedSelectedIndex = null, this._loaded = !1, this._resizeObserverTimeout = null, this._mediaMatcher = new Q(this, {}), this._onStepperResize = () => {
+        this._checkOrientation(), this._setStepperHeight(this.selected), clearTimeout(this._resizeObserverTimeout), this.internals.states.add("disable-animation"), this._resizeObserverTimeout = setTimeout(() => this.internals.states.delete("disable-animation"), F);
       }, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e)), this.addEventListener?.("resizechange", (e) => this._onSelectedStepResize(e));
     }
     /** If set to true, only the current and previous labels can be clicked and selected. */
@@ -49,31 +49,31 @@ let ue = (() => {
       return f(this, h);
     }
     set linear(e) {
-      d(this, h, e);
+      o(this, h, e);
     }
     /** Overrides the behavior of `orientation` property. */
     set horizontalFrom(e) {
-      this._horizontalFrom = e && C[e] ? e : null, this._horizontalFrom && this._loaded && this._checkOrientation();
+      this._horizontalFrom = e && L[e] ? e : null, this._horizontalFrom && this._loaded && this._checkOrientation();
     }
     get horizontalFrom() {
       return this._horizontalFrom;
     }
     /** Steps orientation, either horizontal or vertical. */
     get orientation() {
-      return f(this, b);
+      return f(this, c);
     }
     set orientation(e) {
-      d(this, b, e);
+      o(this, c, e);
     }
     /**
      * Size variant, either s or m.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return f(this, p);
+      return f(this, b);
     }
     set size(e) {
-      d(this, p, e);
+      o(this, b, e);
     }
     /** The currently selected step. */
     set selected(e) {
@@ -118,15 +118,15 @@ let ue = (() => {
     _select(e) {
       if (!this._isSelectable(e) || e === this.selected)
         return;
-      const t = this.selectedIndex, i = this.selected, g = {
+      const t = this.selectedIndex, r = this.selected, v = {
         currentIndex: t,
-        currentStep: i,
+        currentStep: r,
         nextIndex: this.selectedIndex !== null ? this.selectedIndex + 1 : null,
         nextStep: this.selectedIndex !== null ? this.steps[this.selectedIndex + 1] : null
       };
-      if (this.selected && !this.selected.validate(g))
+      if (this.selected && !this.selected.validate(v))
         return;
-      this.selected?.deselect(), e.select(), this.dispatchEvent(new ee(this.selectedIndex, t, this.selected, i)), this._setMarkerSize(), this._setStepperHeight(e), this._configureLinearMode(), document.activeElement?.closest("sbb-stepper") === this && this.selected?.label?.focus();
+      this.selected?.deselect(), e.select(), this.dispatchEvent(new V(this.selectedIndex, t, this.selected, r)), this._setMarkerSize(), this._setStepperHeight(e), this._configureLinearMode(), document.activeElement?.closest("sbb-stepper") === this && this.selected?.label?.focus();
     }
     _setMarkerSize() {
       if (!this._loaded || !this.selected || this.selectedIndex === void 0 || !this.selected.label)
@@ -158,8 +158,8 @@ let ue = (() => {
       this._setStepperHeight(e.target);
     }
     _configure() {
-      this.steps.forEach((e, t, i) => {
-        e.configure(this._loaded), e.label?.configure(t + 1, i.length, this._loaded);
+      this.steps.forEach((e, t, r) => {
+        e.configure(this._loaded), e.label?.configure(t + 1, r.length, this._loaded);
       }), this._select(this.selected || this._enabledSteps[0]);
     }
     _updateLabels() {
@@ -168,7 +168,7 @@ let ue = (() => {
       });
     }
     _checkOrientation() {
-      this.horizontalFrom && (this.orientation = this._mediaMatcher.matches(C[this.horizontalFrom]) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
+      this.horizontalFrom && (this.orientation = this._mediaMatcher.matches(L[this.horizontalFrom]) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
     }
     _configureLinearMode() {
       this.steps.forEach((e, t) => {
@@ -185,7 +185,7 @@ let ue = (() => {
     }
     firstUpdated(e) {
       super.firstUpdated(e), this.updateComplete.then(() => {
-        this._loaded = !0, this._configure(), this._requestedSelected && this.steps.indexOf(this._requestedSelected) !== -1 ? this.selectedIndex = this.steps.indexOf(this._requestedSelected) : this._requestedSelectedIndex ? this.selectedIndex = this._requestedSelectedIndex : this.selectedIndex = 0, this._observer.observe(this), this._checkOrientation(), setTimeout(() => this.internals.states.delete("disable-animation"), A);
+        this._loaded = !0, this._configure(), this._requestedSelected && this.steps.indexOf(this._requestedSelected) !== -1 ? this.selectedIndex = this.steps.indexOf(this._requestedSelected) : this._requestedSelectedIndex ? this.selectedIndex = this._requestedSelectedIndex : this.selectedIndex = 0, this._observer.observe(this), this._checkOrientation(), setTimeout(() => this.internals.states.delete("disable-animation"), F);
       });
     }
     willUpdate(e) {
@@ -194,13 +194,13 @@ let ue = (() => {
     _handleKeyDown(e) {
       const t = this._enabledSteps;
       if (!(!t || // don't trap nested handling
-      e.target !== this && e.target.parentElement !== this) && Q(e)) {
-        const i = t.indexOf(this.selected), g = $(e, i, t.length);
-        this._select(t[g]), e.preventDefault();
+      e.target !== this && e.target.parentElement !== this) && C(e)) {
+        const r = t.indexOf(this.selected), v = H(e, r, t.length);
+        this._select(t[v]), e.preventDefault();
       }
     }
     render() {
-      return D`
+      return A`
       <div class="sbb-stepper">
         <div class="sbb-stepper__labels" role="tablist">
           <slot name="step-label" @slotchange=${this._configure}></slot>
@@ -211,26 +211,26 @@ let ue = (() => {
       </div>
     `;
     }
-  }, h = new WeakMap(), b = new WeakMap(), p = new WeakMap(), n = l, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
-    x = [W(), u({ type: Boolean })], k = [u({ attribute: "horizontal-from", reflect: !0 })], I = [u({ reflect: !0 })], w = [u({ reflect: !0 })], O = [u({ attribute: !1 })], F = [u({ attribute: "selected-index", type: Number })], c(l, null, x, { kind: "accessor", name: "linear", static: !1, private: !1, access: { has: (t) => "linear" in t, get: (t) => t.linear, set: (t, i) => {
-      t.linear = i;
-    } }, metadata: e }, z, S), c(l, null, k, { kind: "setter", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, set: (t, i) => {
-      t.horizontalFrom = i;
-    } }, metadata: e }, null, m), c(l, null, I, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, i) => {
-      t.orientation = i;
-    } }, metadata: e }, y, E), c(l, null, w, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, i) => {
-      t.size = i;
-    } }, metadata: e }, M, L), c(l, null, O, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, i) => {
-      t.selected = i;
-    } }, metadata: e }, null, m), c(l, null, F, { kind: "setter", name: "selectedIndex", static: !1, private: !1, access: { has: (t) => "selectedIndex" in t, set: (t, i) => {
-      t.selectedIndex = i;
-    } }, metadata: e }, null, m), c(null, r = { value: n }, s, { kind: "class", name: n.name, metadata: e }, null, a), n = r.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), l.styles = [X, Y], l.events = {
+  }, h = new WeakMap(), c = new WeakMap(), b = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    a = [$(), u({ type: Boolean })], g = [u({ attribute: "horizontal-from", reflect: !0 })], x = [u({ reflect: !0 })], S = [u({ reflect: !0 })], w = [u({ attribute: !1 })], E = [u({ attribute: "selected-index", type: Number })], p(l, null, a, { kind: "accessor", name: "linear", static: !1, private: !1, access: { has: (t) => "linear" in t, get: (t) => t.linear, set: (t, r) => {
+      t.linear = r;
+    } }, metadata: e }, n, _), p(l, null, g, { kind: "setter", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, set: (t, r) => {
+      t.horizontalFrom = r;
+    } }, metadata: e }, null, i), p(l, null, x, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, r) => {
+      t.orientation = r;
+    } }, metadata: e }, z, k), p(l, null, S, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, r) => {
+      t.size = r;
+    } }, metadata: e }, I, y), p(l, null, w, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, r) => {
+      t.selected = r;
+    } }, metadata: e }, null, i), p(l, null, E, { kind: "setter", name: "selectedIndex", static: !1, private: !1, access: { has: (t) => "selectedIndex" in t, set: (t, r) => {
+      t.selectedIndex = r;
+    } }, metadata: e }, null, i), e && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.elementName = "sbb-stepper", l.styles = [K, P], l.events = {
     stepchange: "stepchange"
-  }, o(n, a), n;
+  }, l;
 })();
 export {
-  ee as SbbStepChangeEvent,
-  ue as SbbStepperElement
+  V as SbbStepChangeEvent,
+  ne as SbbStepperElement
 };

package/stepper/stepper.js

@@ -1,5 +1,9 @@
-import { SbbStepChangeEvent as b, SbbStepperElement as p } from "./stepper/stepper.component.js";
+import { SbbStepperElement as e } from "./stepper/stepper.component.js";
+import { SbbStepChangeEvent as r } from "./stepper/stepper.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/stepper/stepper.js' has been deprecated.
+Use either '@sbb-esta/elements/stepper.js' or '@sbb-esta/elements/stepper.pure.js' instead.`);
 export {
-  b as SbbStepChangeEvent,
-  p as SbbStepperElement
+  r as SbbStepChangeEvent,
+  e as SbbStepperElement
 };

package/stepper.js

@@ -1,9 +1,13 @@
-import { SbbStepElement as b } from "./stepper/step/step.component.js";
-import { SbbStepLabelElement as S } from "./stepper/step-label/step-label.component.js";
-import { SbbStepChangeEvent as m, SbbStepperElement as o } from "./stepper/stepper/stepper.component.js";
+import { SbbStepLabelElement as e } from "./stepper/step-label/step-label.component.js";
+import { SbbStepElement as t } from "./stepper/step/step.component.js";
+import { SbbStepperElement as m } from "./stepper/stepper/stepper.component.js";
+import { SbbStepChangeEvent as S } from "./stepper/stepper/stepper.component.js";
+t.define();
+e.define();
+m.define();
 export {
-  m as SbbStepChangeEvent,
-  b as SbbStepElement,
-  S as SbbStepLabelElement,
-  o as SbbStepperElement
+  S as SbbStepChangeEvent,
+  t as SbbStepElement,
+  e as SbbStepLabelElement,
+  m as SbbStepperElement
 };

package/stepper.pure.js

@@ -0,0 +1,9 @@
+import { SbbStepLabelElement as b } from "./stepper/step-label/step-label.component.js";
+import { SbbStepElement as S } from "./stepper/step/step.component.js";
+import { SbbStepChangeEvent as m, SbbStepperElement as o } from "./stepper/stepper/stepper.component.js";
+export {
+  m as SbbStepChangeEvent,
+  S as SbbStepElement,
+  b as SbbStepLabelElement,
+  o as SbbStepperElement
+};

package/tab-label-common-D6k40yRU.js

@@ -0,0 +1,6 @@
+import { css as b } from "lit";
+const t = b`:host{display:flex;flex-direction:column}:host(:not([size])){--sbb-tab-group-content-gap: var(--sbb-tab-group-content-gap-default)}:host([size=s]){--sbb-tab-group-content-gap: var(--sbb-tab-group-content-gap-size-s)}:host([size=l]){--sbb-tab-group-content-gap: var(--sbb-tab-group-content-gap-size-l)}:host([size=xl]){--sbb-tab-group-content-gap: var(--sbb-tab-group-content-gap-size-xl)}.sbb-tab-group,.sbb-tab-nav-bar{display:flex;flex-wrap:wrap}`, s = b`:host{--sbb-tab-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-tab-label-outline-border-radius-internal: calc( var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset) )}:host(:is(:is(:state(size-s),[state--size-s]),[size=s])){--sbb-tab-label-height: var(--sbb-size-element-xs);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);--sbb-tab-label-font-size: var(--sbb-text-font-size-s)}:host(:is(:is(:state(size-l),[state--size-l]),[size=l])){--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size: var(--sbb-text-font-size-m)}:host(:is(:is(:state(size-xl),[state--size-xl]),[size=xl])){--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size: var(--sbb-text-font-size-xl)}:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){pointer-events:var(--sbb-tab-label-pointer-events, unset)}@media(forced-colors:active){:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a),:host(sbb-tab-label) .sbb-tab-label{position:relative;display:flex;align-items:center;gap:var(--sbb-tab-label-gap);color:var(--sbb-tab-label-color);margin:0;padding-inline:var(--sbb-tab-label-inline-padding);min-height:var(--sbb-tab-label-height);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);font-size:var(--sbb-tab-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);font-weight:var(--sbb-tab-label-font-weight);text-decoration:var(--sbb-tab-label-text-decoration)}:host(sbb-tab-nav-bar) ::slotted(a):after,:host(sbb-tab-label) .sbb-tab-label:after{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:var(--sbb-tab-label-marker-thickness);background-color:var(--sbb-tab-label-color);scale:var(--sbb-tab-label-marker-scale, 0);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:scale,background-color}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider],:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])){position:relative}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider]:before,:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])):before{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)}:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-text-decoration: line-through}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-color: GrayText;--sbb-tab-label-amount-color: GrayText}}:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[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-scale: 1}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[active]:not([disabled])){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}@media(any-hover:hover){:host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),:host(sbb-tab-label:hover:not([disabled])){--sbb-tab-label-marker-scale: 1}}:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color: var(--sbb-color-3)}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a:focus-visible),:host(sbb-tab-label:focus-visible) .sbb-tab-label{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-tab-label-outline-border-radius-internal)}`;
+export {
+  s as a,
+  t
+};

package/table/table-wrapper/table-wrapper.component.js

@@ -1,23 +1,24 @@
-var h = (t) => {
+var c = (t) => {
   throw TypeError(t);
 };
-var d = (t, e, l) => e.has(t) || h("Cannot " + l);
-var p = (t, e, l) => (d(t, e, "read from private field"), l ? l.call(t) : e.get(t)), m = (t, e, l) => e.has(t) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, l), v = (t, e, l, a) => (d(t, e, "write to private field"), a ? a.call(t, l) : e.set(t, l), l);
-import { __esDecorate as _, __runInitializers as c } from "tslib";
-import { ResizeController as S } from "@lit-labs/observers/resize-controller.js";
-import { css as w, LitElement as y, isServer as L, html as g } from "lit";
-import { customElement as x, property as z } from "lit/decorators.js";
-import { forceType as C } from "../../core/decorators.js";
-import { SbbNegativeMixin as E, SbbElementInternalsMixin as O } from "../../core/mixins.js";
-const A = w`:host{display:block;overflow:auto}: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)}::slotted(.sbb-table){width:100%}`;
-let B = (() => {
-  var o, i;
-  let t = [x("sbb-table-wrapper")], e, l = [], a, b = E(O(y)), n, f = [], u = [];
-  return i = class extends b {
+var b = (t, s, e) => s.has(t) || c("Cannot " + e);
+var f = (t, s, e) => (b(t, s, "read from private field"), e ? e.call(t) : s.get(t)), n = (t, s, e) => s.has(t) ? c("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), u = (t, s, e, r) => (b(t, s, "write to private field"), r ? r.call(t, e) : s.set(t, e), e);
+import { __esDecorate as p, __runInitializers as h } from "tslib";
+import { ResizeController as m } from "@lit-labs/observers/resize-controller.js";
+import { css as v, isServer as k, html as _ } from "lit";
+import { property as S } from "lit/decorators.js";
+import { SbbElement as w } from "../../core/base-elements.js";
+import { forceType as y } from "../../core/decorators.js";
+import { SbbNegativeMixin as g } from "../../core/mixins.js";
+const L = v`:host{display:block;overflow:auto}: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)}::slotted(.sbb-table){width:100%}`;
+let U = (() => {
+  var o, l;
+  let t = g(w), s, e = [], r = [];
+  return l = class extends t {
     constructor() {
       super();
-      m(this, o, c(this, f, !1));
-      c(this, u), this.addController(new S(this, {
+      n(this, o, h(this, e, !1));
+      h(this, r), this.addController(new m(this, {
         skipInitial: !0,
         callback: () => this._checkHorizontalScrollbarOffset()
       })), this.addEventListener?.("scroll", () => this._checkHorizontalScrollbarOffset(), {
@@ -26,44 +27,44 @@ let B = (() => {
     }
     /** Whether the table wrapper is focusable. */
     get focusable() {
-      return p(this, o);
+      return f(this, o);
     }
-    set focusable(s) {
-      v(this, o, s);
+    set focusable(i) {
+      u(this, o, i);
     }
     connectedCallback() {
       super.connectedCallback(), this._updateScrollbarClass();
     }
-    willUpdate(s) {
-      super.willUpdate(s), s.has("focusable") && (this.focusable ? this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex")), s.has("negative") && this._updateScrollbarClass();
+    willUpdate(i) {
+      super.willUpdate(i), i.has("focusable") && (this.focusable ? this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex")), i.has("negative") && this._updateScrollbarClass();
     }
     _updateScrollbarClass() {
-      L || (this.negative ? (this.classList.remove("sbb-scrollbar-thick-track-visible"), this.classList.add("sbb-scrollbar-thick-negative-track-visible")) : (this.classList.remove("sbb-scrollbar-thick-negative-track-visible"), this.classList.add("sbb-scrollbar-thick-track-visible")));
+      k || (this.negative ? (this.classList.remove("sbb-scrollbar-thick-track-visible"), this.classList.add("sbb-scrollbar-thick-negative-track-visible")) : (this.classList.remove("sbb-scrollbar-thick-negative-track-visible"), this.classList.add("sbb-scrollbar-thick-track-visible")));
     }
     /**
      *  Calculates whether the table is horizontally scrolled and adds the
      *  corresponding class `sbb-table-wrapper-offset-${none | left | right | both}`
      */
     _checkHorizontalScrollbarOffset() {
-      const s = this._calculateScrollOffset();
-      this.classList.remove("sbb-table-wrapper-offset-none", "sbb-table-wrapper-offset-left", "sbb-table-wrapper-offset-right", "sbb-table-wrapper-offset-both"), this.classList.add(`sbb-table-wrapper-offset-${s}`);
+      const i = this._calculateScrollOffset();
+      this.classList.remove("sbb-table-wrapper-offset-none", "sbb-table-wrapper-offset-left", "sbb-table-wrapper-offset-right", "sbb-table-wrapper-offset-both"), this.classList.add(`sbb-table-wrapper-offset-${i}`);
     }
     _calculateScrollOffset() {
       if (this.scrollWidth === this.offsetWidth)
         return "none";
-      const s = this.scrollLeft === 0, r = this.scrollWidth - this.scrollLeft - this.offsetWidth <= 1;
-      return s ? r ? "none" : "right" : r ? "left" : "both";
+      const i = this.scrollLeft === 0, a = this.scrollWidth - this.scrollLeft - this.offsetWidth <= 1;
+      return i ? a ? "none" : "right" : a ? "left" : "both";
     }
     render() {
-      return g`<slot></slot>`;
+      return _`<slot></slot>`;
     }
-  }, o = new WeakMap(), a = i, (() => {
-    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    n = [C(), z({ reflect: !0, type: Boolean })], _(i, null, n, { kind: "accessor", name: "focusable", static: !1, private: !1, access: { has: (r) => "focusable" in r, get: (r) => r.focusable, set: (r, k) => {
-      r.focusable = k;
-    } }, metadata: s }, f, u), _(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: s }, null, l), a = e.value, s && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
-  })(), i.role = "section", i.styles = A, c(a, l), a;
+  }, o = new WeakMap(), (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    s = [y(), S({ reflect: !0, type: Boolean })], p(l, null, s, { kind: "accessor", name: "focusable", static: !1, private: !1, access: { has: (a) => "focusable" in a, get: (a) => a.focusable, set: (a, d) => {
+      a.focusable = d;
+    } }, metadata: i }, e, r), i && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), l.elementName = "sbb-table-wrapper", l.role = "section", l.styles = L, l;
 })();
 export {
-  B as SbbTableWrapperElement
+  U as SbbTableWrapperElement
 };

package/table/table-wrapper.js

@@ -1,4 +1,7 @@
-import { SbbTableWrapperElement as b } from "./table-wrapper/table-wrapper.component.js";
+import { SbbTableWrapperElement as e } from "./table-wrapper/table-wrapper.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/table/table-wrapper.js' has been deprecated.
+Use either '@sbb-esta/elements/table.js' or '@sbb-esta/elements/table.pure.js' instead.`);
 export {
-  b as SbbTableWrapperElement
+  e as SbbTableWrapperElement
 };

package/table.js

@@ -1,4 +1,5 @@
-import { SbbTableWrapperElement as b } from "./table/table-wrapper/table-wrapper.component.js";
+import { SbbTableWrapperElement as e } from "./table/table-wrapper/table-wrapper.component.js";
+e.define();
 export {
-  b as SbbTableWrapperElement
+  e as SbbTableWrapperElement
 };

package/table.pure.js

@@ -0,0 +1,4 @@
+import { SbbTableWrapperElement as b } from "./table/table-wrapper/table-wrapper.component.js";
+export {
+  b as SbbTableWrapperElement
+};

package/tabs/common/styles.js

@@ -0,0 +1,5 @@
+import { t, a as m } from "../../tab-label-common-D6k40yRU.js";
+export {
+  t as tabGroupCommonStyles,
+  m as tabLabelCommonStyles
+};

package/tabs/common.js

@@ -1,6 +1,7 @@
-import { css as b } from "lit";
-const t = b`:host{display:flex;flex-direction:column}:host(:not([size])){--sbb-tab-group-content-gap: var(--sbb-tab-group-content-gap-default)}:host([size=s]){--sbb-tab-group-content-gap: var(--sbb-tab-group-content-gap-size-s)}:host([size=l]){--sbb-tab-group-content-gap: var(--sbb-tab-group-content-gap-size-l)}:host([size=xl]){--sbb-tab-group-content-gap: var(--sbb-tab-group-content-gap-size-xl)}.sbb-tab-group,.sbb-tab-nav-bar{display:flex;flex-wrap:wrap}`, s = b`:host{--sbb-tab-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-tab-label-outline-border-radius-internal: calc( var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset) )}:host(:is(:is(:state(size-s),[state--size-s]),[size=s])){--sbb-tab-label-height: var(--sbb-size-element-xs);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);--sbb-tab-label-font-size: var(--sbb-text-font-size-s)}:host(:is(:is(:state(size-l),[state--size-l]),[size=l])){--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size: var(--sbb-text-font-size-m)}:host(:is(:is(:state(size-xl),[state--size-xl]),[size=xl])){--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size: var(--sbb-text-font-size-xl)}:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){pointer-events:var(--sbb-tab-label-pointer-events, unset)}@media(forced-colors:active){:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a),:host(sbb-tab-label) .sbb-tab-label{position:relative;display:flex;align-items:center;gap:var(--sbb-tab-label-gap);color:var(--sbb-tab-label-color);margin:0;padding-inline:var(--sbb-tab-label-inline-padding);min-height:var(--sbb-tab-label-height);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);font-size:var(--sbb-tab-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);font-weight:var(--sbb-tab-label-font-weight);text-decoration:var(--sbb-tab-label-text-decoration)}:host(sbb-tab-nav-bar) ::slotted(a):after,:host(sbb-tab-label) .sbb-tab-label:after{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:var(--sbb-tab-label-marker-thickness);background-color:var(--sbb-tab-label-color);scale:var(--sbb-tab-label-marker-scale, 0);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:scale,background-color}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider],:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])){position:relative}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider]:before,:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])):before{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)}:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-text-decoration: line-through}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-color: GrayText;--sbb-tab-label-amount-color: GrayText}}:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[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-scale: 1}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[active]:not([disabled])){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}@media(any-hover:hover){:host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),:host(sbb-tab-label:hover:not([disabled])){--sbb-tab-label-marker-scale: 1}}:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color: var(--sbb-color-3)}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a:focus-visible),:host(sbb-tab-label:focus-visible) .sbb-tab-label{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-tab-label-outline-border-radius-internal)}`;
+import { t, a } from "../tab-label-common-D6k40yRU.js";
+console.warn(`The entrypoint '@sbb-esta/elements/tabs/common.js' has been deprecated.
+Use either '@sbb-esta/elements/tabs.js' or '@sbb-esta/elements/tabs.pure.js' instead.`);
 export {
   t as tabGroupCommonStyles,
-  s as tabLabelCommonStyles
+  a as tabLabelCommonStyles
 };

package/tabs/tab/tab.component.js

@@ -1,52 +1,46 @@
-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 d } from "../../core/mixins.js";
-const v = c`@charset "UTF-8";: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(:not(:is(:state(active),[state--active]))){display:none!important}: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-property:opacity,height;transition-behavior:allow-discrete}@starting-style{:host(:is(:state(active),[state--active])){opacity:0}}`;
-let p = 0, E = (() => {
-  var t;
-  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,
-        skipInitial: !0,
-        callback: () => this._onTabContentElementResize()
-      });
-    }
-    /** The `sbb-tab-label` associated with the tab. */
-    get label() {
-      return this.previousElementSibling?.localName === "sbb-tab-label" ? this.previousElementSibling : null;
-    }
-    /** Get the parent `sbb-tab-group`. */
-    get group() {
-      return this.closest("sbb-tab-group");
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-tab-${p++}`, this.tabIndex = 0, this.classList.add("sbb-scrollbar");
-    }
-    /** @internal */
-    activate() {
-      this.internals.states.add("active"), this._tabContentResizeObserver.observe(this);
-    }
-    /** @internal */
-    deactivate() {
-      this._tabContentResizeObserver.unobserve(this), this.internals.states.delete("active");
-    }
-    _onTabContentElementResize() {
-      this.group?.setTabContentHeight(Math.floor(this.getBoundingClientRect().height));
-    }
-    render() {
-      return h`<slot></slot>`;
-    }
-  }, e = t, (() => {
-    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;
-})();
+import { ResizeController as s } from "@lit-labs/observers/resize-controller.js";
+import { css as i, html as a } from "lit";
+import { SbbElement as o } from "../../core/base-elements.js";
+const n = i`@charset "UTF-8";: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(:not(:is(:state(active),[state--active]))){display:none!important}: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-property:opacity,height;transition-behavior:allow-discrete}@starting-style{:host(:is(:state(active),[state--active])){opacity:0}}`;
+let r = 0;
+const t = class t extends o {
+  constructor() {
+    super(...arguments), this._tabContentResizeObserver = new s(this, {
+      target: null,
+      skipInitial: !0,
+      callback: () => this._onTabContentElementResize()
+    });
+  }
+  /** The `sbb-tab-label` associated with the tab. */
+  get label() {
+    return this.previousElementSibling?.localName === "sbb-tab-label" ? this.previousElementSibling : null;
+  }
+  /** Get the parent `sbb-tab-group`. */
+  get group() {
+    return this.closest("sbb-tab-group");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.id ||= `sbb-tab-${r++}`, this.tabIndex = 0, this.classList.add("sbb-scrollbar");
+  }
+  /** @internal */
+  activate() {
+    this.internals.states.add("active"), this._tabContentResizeObserver.observe(this);
+  }
+  /** @internal */
+  deactivate() {
+    this._tabContentResizeObserver.unobserve(this), this.internals.states.delete("active");
+  }
+  _onTabContentElementResize() {
+    this.group?.setTabContentHeight(Math.floor(this.getBoundingClientRect().height));
+  }
+  render() {
+    return a`<slot></slot>`;
+  }
+};
+t.elementName = "sbb-tab", t.role = "tabpanel", t.styles = n, t.events = {
+  active: "active"
+};
+let e = t;
 export {
-  E as SbbTabElement
+  e as SbbTabElement
 };