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

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

@@ -1,35 +1,36 @@
-var k = (i) => {
+var T = (i) => {
   throw TypeError(i);
 };
-var G = (i, s, a) => s.has(i) || k("Cannot " + a);
-var m = (i, s, a) => (G(i, s, "read from private field"), a ? a.call(i) : s.get(i)), u = (i, s, a) => s.has(i) ? k("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), o = (i, s, a, n) => (G(i, s, "write to private field"), n ? n.call(i, a) : s.set(i, a), a);
-import { __esDecorate as f, __runInitializers as b } from "tslib";
-import { ResizeController as D } from "@lit-labs/observers/resize-controller.js";
-import { css as A, LitElement as P, html as g } from "lit";
-import { customElement as R, property as p } from "lit/decorators.js";
-import { ref as N } from "lit/directives/ref.js";
-import { isArrowKeyPressed as O, getNextElementIndex as K } from "../../core/a11y.js";
-import { forceType as $ } from "../../core/decorators.js";
-import { isLean as j } from "../../core/dom.js";
-import { throttle as w } from "../../core/eventing.js";
-import { SbbElementInternalsMixin as M, SbbHydrationMixin as U, ɵstateController as B } from "../../core/mixins.js";
-import { boxSizingStyles as W } from "../../core/styles.js";
-import { tabGroupCommonStyles as q } from "../common.js";
-const F = A`:host{--sbb-tab-group-animation-duration: 0s;gap:var(--sbb-tab-group-content-gap)}:host(:is(:state(initialized),[state--initialized])){--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) )}.sbb-tab-group-content{height:var(--sbb-tab-content-height);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}:host([fixed-height]) ::slotted(sbb-tab){height:100%;overflow:auto}`;
-let ot = (() => {
-  var h, c, d, l;
-  let i = [R("sbb-tab-group")], s, a = [], n, _ = M(U(P)), x, v = [], S = [], z, y = [], I = [], T, E = [], C = [];
-  return l = class extends _ {
+var C = (i, s, a) => s.has(i) || T("Cannot " + a);
+var f = (i, s, a) => (C(i, s, "read from private field"), a ? a.call(i) : s.get(i)), m = (i, s, a) => s.has(i) ? T("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), r = (i, s, a, c) => (C(i, s, "write to private field"), c ? c.call(i, a) : s.set(i, a), a);
+import { __esDecorate as g, __runInitializers as b } from "tslib";
+import { ResizeController as $ } from "@lit-labs/observers/resize-controller.js";
+import { css as w, html as u } from "lit";
+import { property as p } from "lit/decorators.js";
+import { ref as L } from "lit/directives/ref.js";
+import { isArrowKeyPressed as A, getNextElementIndex as N } from "../../core/a11y.js";
+import { SbbElement as P } from "../../core/base-elements.js";
+import { forceType as H } from "../../core/decorators.js";
+import { isLean as R } from "../../core/dom.js";
+import { throttle as E } from "../../core/eventing.js";
+import { ɵstateController as D } from "../../core/mixins.js";
+import { boxSizingStyles as O } from "../../core/styles.js";
+import { tabGroupCommonStyles as G } from "../common/styles.js";
+const K = w`:host{--sbb-tab-group-animation-duration: 0s;gap:var(--sbb-tab-group-content-gap)}:host(:is(:state(initialized),[state--initialized])){--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) )}.sbb-tab-group-content{height:var(--sbb-tab-content-height);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}:host([fixed-height]) ::slotted(sbb-tab){height:100%;overflow:auto}`;
+let it = (() => {
+  var o, h, d, l;
+  let i = P, s, a = [], c = [], _, x = [], v = [], z, S = [], y = [];
+  return l = class extends i {
     constructor() {
       super();
-      u(this, h);
-      u(this, c);
-      u(this, d);
-      this._tabGroupResizeObserver = new D(this, {
+      m(this, o);
+      m(this, h);
+      m(this, d);
+      this._tabGroupResizeObserver = new $(this, {
         target: null,
         skipInitial: !0,
         callback: () => this._onTabGroupElementResize()
-      }), o(this, h, b(this, v, j() ? "s" : "l")), o(this, c, (b(this, S), b(this, y, 0))), o(this, d, (b(this, I), b(this, E, !1))), this._onContentSlotChange = (b(this, C), () => {
+      }), r(this, o, b(this, a, R() ? "s" : "l")), r(this, h, (b(this, c), b(this, x, 0))), r(this, d, (b(this, v), b(this, S, !1))), this._onContentSlotChange = (b(this, y), () => {
         this.labels.forEach((t) => t.linkToTab()), this.labels.find((t) => t.active)?.activate();
       }), this._onLabelSlotChange = () => {
         this.labels.forEach((t) => t.linkToTab()), this._ensureActiveTab();
@@ -40,20 +41,20 @@ let ot = (() => {
      * @default 'l' / 's' (lean)
      */
     get size() {
-      return m(this, h);
+      return f(this, o);
     }
     set size(t) {
-      o(this, h, t);
+      r(this, o, t);
     }
     /**
      * Sets the initial tab. If it matches a disabled tab or exceeds the length of
      * the tab group, the first enabled tab will be selected.
      */
     get initialSelectedIndex() {
-      return m(this, c);
+      return f(this, h);
     }
     set initialSelectedIndex(t) {
-      o(this, c, t);
+      r(this, h, t);
     }
     /**
      * If set to true, the `sbb-tab` elements take 100% height of the `sbb-tab-group`.
@@ -61,10 +62,10 @@ let ot = (() => {
      * The content becomes scrollable on overflow.
      */
     get fixedHeight() {
-      return m(this, d);
+      return f(this, d);
     }
     set fixedHeight(t) {
-      o(this, d, t);
+      r(this, d, t);
     }
     /** Gets the slotted `sbb-tab-label`s. */
     get labels() {
@@ -115,15 +116,15 @@ let ot = (() => {
     _onTabGroupElementResize() {
       const t = this.labels;
       t.forEach((e) => {
-        B(e)?.toggle("has-divider", e === t[0] || e.offsetLeft === t[0].offsetLeft);
+        D(e)?.toggle("has-divider", e === t[0] || e.offsetLeft === t[0].offsetLeft);
       }), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
     }
     _handleKeyDown(t) {
       const e = this._enabledTabs();
       if (!(!e || // don't trap nested handling
-      t.target !== this && t.target.parentElement !== this) && O(t)) {
-        const r = e.findIndex((L) => L.active), H = K(t, r, e.length);
-        e[H]?.activate(), e[H]?.focus(), t.preventDefault();
+      t.target !== this && t.target.parentElement !== this) && A(t)) {
+        const n = e.findIndex((k) => k.active), I = N(t, n, e.length);
+        e[I]?.activate(), e[I]?.focus(), t.preventDefault();
       }
     }
     /**
@@ -133,34 +134,34 @@ let ot = (() => {
       this.style.setProperty("--sbb-tab-content-height", `${t}px`);
     }
     render() {
-      return g`
+      return u`
       <div
         class="sbb-tab-group"
         role="tablist"
-        ${N((t) => this._tabGroupElement = t)}
+        ${L((t) => this._tabGroupElement = t)}
       >
         <slot name="tab-bar" @slotchange=${this._onLabelSlotChange}></slot>
       </div>
-      ${this.fixedHeight ? g`<slot @slotchange=${w(this._onContentSlotChange, 150)}></slot>` : g`
+      ${this.fixedHeight ? u`<slot @slotchange=${E(this._onContentSlotChange, 150)}></slot>` : u`
             <div class="sbb-tab-group-content">
-              <slot @slotchange=${w(this._onContentSlotChange, 150)}></slot>
+              <slot @slotchange=${E(this._onContentSlotChange, 150)}></slot>
             </div>
           `}
     `;
     }
-  }, h = new WeakMap(), c = new WeakMap(), d = new WeakMap(), n = l, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
-    x = [p()], z = [$(), p({ attribute: "initial-selected-index", type: Number })], T = [$(), p({ attribute: "fixed-height", type: Boolean, reflect: !0 })], f(l, null, x, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, r) => {
-      e.size = r;
-    } }, metadata: t }, v, S), f(l, null, z, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, r) => {
-      e.initialSelectedIndex = r;
-    } }, metadata: t }, y, I), f(l, null, T, { kind: "accessor", name: "fixedHeight", static: !1, private: !1, access: { has: (e) => "fixedHeight" in e, get: (e) => e.fixedHeight, set: (e, r) => {
-      e.fixedHeight = r;
-    } }, metadata: t }, E, C), f(null, s = { value: n }, i, { kind: "class", name: n.name, metadata: t }, null, a), n = s.value, t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.styles = [W, q, F], l.events = {
+  }, o = new WeakMap(), h = new WeakMap(), d = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    s = [p()], _ = [H(), p({ attribute: "initial-selected-index", type: Number })], z = [H(), p({ attribute: "fixed-height", type: Boolean, reflect: !0 })], g(l, null, s, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, n) => {
+      e.size = n;
+    } }, metadata: t }, a, c), g(l, null, _, { 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 }, x, v), g(l, null, z, { kind: "accessor", name: "fixedHeight", static: !1, private: !1, access: { has: (e) => "fixedHeight" in e, get: (e) => e.fixedHeight, set: (e, n) => {
+      e.fixedHeight = n;
+    } }, metadata: t }, S, y), t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.elementName = "sbb-tab-group", l.styles = [O, G, K], l.events = {
     tabchange: "tabchange"
-  }, b(n, a), n;
+  }, l;
 })();
 export {
-  ot as SbbTabGroupElement
+  it as SbbTabGroupElement
 };

package/tabs/tab-group.js

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

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

@@ -1,29 +1,30 @@
-var I = (a) => {
+var k = (a) => {
   throw TypeError(a);
 };
-var E = (a, s, b) => s.has(a) || I("Cannot " + b);
-var v = (a, s, b) => (E(a, s, "read from private field"), b ? b.call(a) : s.get(a)), u = (a, s, b) => s.has(a) ? I("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, b), n = (a, s, b, o) => (E(a, s, "write to private field"), o ? o.call(a, b) : s.set(a, b), b);
-import { __esDecorate as m, __runInitializers as r } from "tslib";
-import { css as $, LitElement as B } from "lit";
-import { customElement as D, property as p } from "lit/decorators.js";
-import { unsafeStatic as C, html as M } from "lit/static-html.js";
-import { SbbPropertyWatcherController as N } from "../../core/controllers.js";
-import { forceType as L, omitEmptyConverter as A } from "../../core/decorators.js";
-import { SbbDisabledMixin as G, SbbElementInternalsMixin as j } from "../../core/mixins.js";
-import { boxSizingStyles as O } from "../../core/styles.js";
-import { SbbIconNameMixin as U } from "../../icon.js";
-import { tabLabelCommonStyles as W } from "../common.js";
-const q = $`: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)}:host{display:inline-block;max-width:100%;outline:none!important}.sbb-tab-label{cursor:var(--sbb-tab-label-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-tab-label__icon{display:flex;flex-shrink:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-tab-label__text{display:none}.sbb-tab-label__amount{margin:0;color:var(--sbb-tab-label-amount-color);font-weight:400;text-decoration:var(--sbb-tab-label-text-decoration)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tab-label__amount{display:none}`;
-let et = (() => {
-  var c, d, h, i;
-  let a = [D("sbb-tab-label")], s, b = [], o, f = G(U(j(B))), _, x = [], g = [], z, y = [], S = [], k, w = [], T = [];
-  return i = class extends f {
+var w = (a, s, b) => s.has(a) || k("Cannot " + b);
+var v = (a, s, b) => (w(a, s, "read from private field"), b ? b.call(a) : s.get(a)), u = (a, s, b) => s.has(a) ? k("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, b), o = (a, s, b, h) => (w(a, s, "write to private field"), h ? h.call(a, b) : s.set(a, b), b);
+import { __esDecorate as m, __runInitializers as d } from "tslib";
+import { property as p } from "lit/decorators.js";
+import { unsafeStatic as S, html as T } from "lit/static-html.js";
+import { SbbElement as C } from "../../core/base-elements.js";
+import { SbbPropertyWatcherController as $ } from "../../core/controllers.js";
+import { forceType as I, omitEmptyConverter as B } from "../../core/decorators.js";
+import { SbbDisabledMixin as E } from "../../core/mixins.js";
+import { boxSizingStyles as N } from "../../core/styles.js";
+import { SbbIconNameMixin as A } from "../../icon.pure.js";
+import { tabLabelCommonStyles as G } from "../common/styles.js";
+import { css as M } from "lit";
+const j = M`: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)}:host{display:inline-block;max-width:100%;outline:none!important}.sbb-tab-label{cursor:var(--sbb-tab-label-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-tab-label__icon{display:flex;flex-shrink:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-tab-label__text{display:none}.sbb-tab-label__amount{margin:0;color:var(--sbb-tab-label-amount-color);font-weight:400;text-decoration:var(--sbb-tab-label-text-decoration)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tab-label__amount{display:none}`;
+let V = (() => {
+  var n, r, c, i;
+  let a = E(A(C)), s, b = [], h = [], f, g = [], x = [], _, z = [], y = [];
+  return i = class extends a {
     constructor() {
       super();
+      u(this, n);
+      u(this, r);
       u(this, c);
-      u(this, d);
-      u(this, h);
-      this._selected = !1, this._previousSize = null, n(this, c, r(this, x, "1")), n(this, d, (r(this, g), r(this, y, !1))), n(this, h, (r(this, S), r(this, w, ""))), r(this, T), this.addEventListener("click", () => this.activate()), this.addController(new N(this, () => this.group, {
+      this._selected = !1, this._previousSize = null, o(this, n, d(this, b, "1")), o(this, r, (d(this, h), d(this, g, !1))), o(this, c, (d(this, x), d(this, z, ""))), d(this, y), this.addEventListener("click", () => this.activate()), this.addController(new $(this, () => this.group, {
         size: (t) => {
           this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = t?.size || null, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
         }
@@ -34,24 +35,24 @@ let et = (() => {
      * Use this property to generate the appropriate header tag, taking SEO into consideration.
      */
     get level() {
-      return v(this, c);
+      return v(this, n);
     }
     set level(t) {
-      n(this, c, t);
+      o(this, n, t);
     }
     /** Active tab state. */
     get active() {
-      return v(this, d);
+      return v(this, r);
     }
     set active(t) {
-      n(this, d, t);
+      o(this, r, t);
     }
     /** Amount displayed inside the tab. */
     get amount() {
-      return v(this, h);
+      return v(this, c);
     }
     set amount(t) {
-      n(this, h, t);
+      o(this, c, t);
     }
     /** Get the `sbb-tab` related to the `sbb-tab-label`. */
     get tab() {
@@ -97,8 +98,8 @@ let et = (() => {
     }
     render() {
       const t = `h${Number(this.level) < 7 ? this.level : "1"}`;
-      return M`
-        <${C(t)} class="sbb-tab-label">
+      return T`
+        <${S(t)} class="sbb-tab-label">
           <span class="sbb-tab-label__icon">
             ${this.renderIconSlot()}
           </span>
@@ -108,20 +109,20 @@ let et = (() => {
           <p class="sbb-tab-label__amount">
             <slot name="amount">${this.amount}</slot>
           </p>
-        </${C(t)}>
+        </${S(t)}>
     `;
     }
-  }, c = new WeakMap(), d = new WeakMap(), h = new WeakMap(), o = i, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    _ = [p()], z = [L(), p({ reflect: !0, type: Boolean })], k = [L(), p({ reflect: !0, converter: A })], m(i, null, _, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (e) => "level" in e, get: (e) => e.level, set: (e, l) => {
+  }, n = new WeakMap(), r = new WeakMap(), c = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    s = [p()], f = [I(), p({ reflect: !0, type: Boolean })], _ = [I(), p({ reflect: !0, converter: B })], m(i, null, s, { 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, g), m(i, null, z, { kind: "accessor", name: "active", static: !1, private: !1, access: { has: (e) => "active" in e, get: (e) => e.active, set: (e, l) => {
+    } }, metadata: t }, b, h), m(i, null, f, { 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 }, y, S), m(i, null, k, { kind: "accessor", name: "amount", static: !1, private: !1, access: { has: (e) => "amount" in e, get: (e) => e.amount, set: (e, l) => {
+    } }, metadata: t }, g, x), m(i, null, _, { 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 }, w, T), m(null, s = { value: o }, a, { kind: "class", name: o.name, metadata: t }, null, b), o = s.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), i.role = "tab", i.styles = [O, W, q], r(o, b), o;
+    } }, metadata: t }, z, y), t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), i.elementName = "sbb-tab-label", i.role = "tab", i.styles = [N, G, j], i;
 })();
 export {
-  et as SbbTabLabelElement
+  V as SbbTabLabelElement
 };

package/tabs/tab-label.js

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

package/tabs/tab-nav-bar/tab-nav-bar.component.js

@@ -1,25 +1,26 @@
-var u = (e) => {
-  throw TypeError(e);
+var h = (t) => {
+  throw TypeError(t);
 };
-var _ = (e, s, i) => s.has(e) || u("Cannot " + i);
-var p = (e, s, i) => (_(e, s, "read from private field"), i ? i.call(e) : s.get(e)), f = (e, s, i) => s.has(e) ? u("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, i), o = (e, s, i, l) => (_(e, s, "write to private field"), l ? l.call(e, i) : s.set(e, i), i);
-import { __runInitializers as m, __esDecorate as z } from "tslib";
-import { ResizeController as E } from "@lit-labs/observers/resize-controller.js";
-import { css as v, LitElement as y } from "lit";
-import { customElement as S, property as C } from "lit/decorators.js";
-import { isLean as L } from "../../core/dom/lean-context.js";
-import { SbbNamedSlotListMixin as x, SbbElementInternalsMixin as w } from "../../core/mixins.js";
-import { boxSizingStyles as O } from "../../core/styles.js";
-import { tabLabelCommonStyles as R, tabGroupCommonStyles as k } from "../common.js";
-const I = v`:host{margin-block-end:var(--sbb-tab-group-content-gap)}.sbb-tab-nav-bar{list-style:none;margin:0;padding:0;font-size:inherit}`;
-let q = (() => {
-  var a, r;
-  let e = [S("sbb-tab-nav-bar")], s, i = [], l, h = x(w(y)), b, c = [], d = [];
-  return r = class extends h {
+var m = (t, s, i) => s.has(t) || h("Cannot " + i);
+var d = (t, s, i) => (m(t, s, "read from private field"), i ? i.call(t) : s.get(t)), c = (t, s, i) => s.has(t) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, i), n = (t, s, i, o) => (m(t, s, "write to private field"), o ? o.call(t, i) : s.set(t, i), i);
+import { __runInitializers as u, __esDecorate as p } from "tslib";
+import { ResizeController as f } from "@lit-labs/observers/resize-controller.js";
+import { property as _ } from "lit/decorators.js";
+import { SbbElement as z } from "../../core/base-elements.js";
+import { isLean as g } from "../../core/dom/lean-context.js";
+import { SbbNamedSlotListMixin as y } from "../../core/mixins.js";
+import { boxSizingStyles as v } from "../../core/styles.js";
+import { tabLabelCommonStyles as E, tabGroupCommonStyles as C } from "../common/styles.js";
+import { css as S } from "lit";
+const L = S`:host{margin-block-end:var(--sbb-tab-group-content-gap)}.sbb-tab-nav-bar{list-style:none;margin:0;padding:0;font-size:inherit}`;
+let $ = (() => {
+  var l, r;
+  let t = y(z), s, i = [], o = [];
+  return r = class extends t {
     constructor() {
       super(...arguments);
-      f(this, a);
-      this.listChildLocalNames = ["a"], o(this, a, m(this, c, L() ? "s" : "l")), this._resizeController = (m(this, d), new E(this, {
+      c(this, l);
+      this.listChildLocalNames = ["a"], n(this, l, u(this, i, g() ? "s" : "l")), this._resizeController = (u(this, o), new f(this, {
         target: null,
         callback: () => this._onTabGroupElementResize()
       })), this._listElement = null;
@@ -29,38 +30,38 @@ let q = (() => {
      * @default 'l' / 's' (lean)
      */
     get size() {
-      return p(this, a);
+      return d(this, l);
     }
-    set size(t) {
-      o(this, a, t);
+    set size(e) {
+      n(this, l, e);
     }
     _onTabGroupElementResize() {
-      this.listChildren.forEach((t) => {
-        t.assignedSlot?.parentElement?.toggleAttribute("data-has-divider", t === this.listChildren[0] || t.offsetLeft === this.listChildren[0].offsetLeft);
+      this.listChildren.forEach((e) => {
+        e.assignedSlot?.parentElement?.toggleAttribute("data-has-divider", e === this.listChildren[0] || e.offsetLeft === this.listChildren[0].offsetLeft);
       }), this.style.setProperty("--sbb-tab-group-width", `${this._listElement?.clientWidth}px`);
     }
-    firstUpdated(t) {
-      super.firstUpdated(t), this._updateWidthObserver(), this.shadowRoot?.addEventListener("slotchange", () => this._updateWidthObserver());
+    firstUpdated(e) {
+      super.firstUpdated(e), this._updateWidthObserver(), this.shadowRoot?.addEventListener("slotchange", () => this._updateWidthObserver());
     }
     _updateWidthObserver() {
-      const t = this.shadowRoot?.querySelector(`.${this.localName}`);
-      t && this._listElement !== t ? (this._listElement && this._resizeController.unobserve(this._listElement), this._listElement = t, this._resizeController.observe(t)) : !t && this._listElement && (this._resizeController.unobserve(this._listElement), this._listElement = null);
+      const e = this.shadowRoot?.querySelector(`.${this.localName}`);
+      e && this._listElement !== e ? (this._listElement && this._resizeController.unobserve(this._listElement), this._listElement = e, this._resizeController.observe(e)) : !e && this._listElement && (this._resizeController.unobserve(this._listElement), this._listElement = null);
     }
     render() {
       return this.renderList();
     }
-  }, a = new WeakMap(), l = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    b = [C({ reflect: !0 })], z(r, null, b, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (n) => "size" in n, get: (n) => n.size, set: (n, g) => {
-      n.size = g;
-    } }, metadata: t }, c, d), z(null, s = { value: l }, e, { kind: "class", name: l.name, metadata: t }, null, i), l = s.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = [
-    O,
-    R,
-    k,
-    I
-  ], r.role = "navigation", m(l, i), l;
+  }, l = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    s = [_({ reflect: !0 })], p(r, null, s, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, b) => {
+      a.size = b;
+    } }, metadata: e }, i, o), e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.elementName = "sbb-tab-nav-bar", r.styles = [
+    v,
+    E,
+    C,
+    L
+  ], r.role = "navigation", r;
 })();
 export {
-  q as SbbTabNavBarElement
+  $ as SbbTabNavBarElement
 };

package/tabs/tab-nav-bar.js

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

package/tabs/tab.js

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

package/tabs.js

@@ -1,10 +1,17 @@
-import { SbbTabElement as r } from "./tabs/tab/tab.component.js";
-import { SbbTabGroupElement as m } from "./tabs/tab-group/tab-group.component.js";
-import { SbbTabLabelElement as a } from "./tabs/tab-label/tab-label.component.js";
-import { SbbTabNavBarElement as p } from "./tabs/tab-nav-bar/tab-nav-bar.component.js";
+import { SbbTabGroupElement as e } from "./tabs/tab-group/tab-group.component.js";
+import { SbbTabLabelElement as m } from "./tabs/tab-label/tab-label.component.js";
+import { SbbTabNavBarElement as o } from "./tabs/tab-nav-bar/tab-nav-bar.component.js";
+import { SbbTabElement as b } from "./tabs/tab/tab.component.js";
+import { t as l, a as p } from "./tab-label-common-D6k40yRU.js";
+b.define();
+e.define();
+m.define();
+o.define();
 export {
-  r as SbbTabElement,
-  m as SbbTabGroupElement,
-  a as SbbTabLabelElement,
-  p as SbbTabNavBarElement
+  b as SbbTabElement,
+  e as SbbTabGroupElement,
+  m as SbbTabLabelElement,
+  o as SbbTabNavBarElement,
+  l as tabGroupCommonStyles,
+  p as tabLabelCommonStyles
 };

package/tabs.pure.js

@@ -0,0 +1,13 @@
+import { SbbTabGroupElement as o } from "./tabs/tab-group/tab-group.component.js";
+import { SbbTabLabelElement as a } from "./tabs/tab-label/tab-label.component.js";
+import { SbbTabNavBarElement as r } from "./tabs/tab-nav-bar/tab-nav-bar.component.js";
+import { SbbTabElement as p } from "./tabs/tab/tab.component.js";
+import { t as S, a as f } from "./tab-label-common-D6k40yRU.js";
+export {
+  p as SbbTabElement,
+  o as SbbTabGroupElement,
+  a as SbbTabLabelElement,
+  r as SbbTabNavBarElement,
+  S as tabGroupCommonStyles,
+  f as tabLabelCommonStyles
+};