@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

package/table.css

@@ -0,0 +1,249 @@
+.sbb-table,
+.sbb-table-m,
+.sbb-table-s,
+.sbb-table-xs {
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
+}
+.sbb-table tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-row-striped-color);
+}
+.sbb-table,
+.sbb-table-m,
+.sbb-table-s,
+.sbb-table-xs {
+  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-border-color: var(--sbb-color-cloud);
+  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3);
+  --sbb-table-color: var(--sbb-color-1);
+  --sbb-table-caption-color: var(--sbb-color-granite);
+  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+  --sbb-table-sticky-shadow-width: 3rem;
+  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
+  --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
+  border-spacing: 0;
+  caption-side: bottom;
+  color: var(--sbb-table-color);
+  table-layout: auto;
+}
+.sbb-table thead > tr:last-of-type > th,
+.sbb-table-m thead > tr:last-of-type > th,
+.sbb-table-s thead > tr:last-of-type > th,
+.sbb-table-xs thead > tr:last-of-type > th {
+  border-block-end: var(--sbb-table-border);
+}
+.sbb-table thead > tr:first-of-type > th,
+.sbb-table-m thead > tr:first-of-type > th,
+.sbb-table-s thead > tr:first-of-type > th,
+.sbb-table-xs thead > tr:first-of-type > th {
+  border-block-start: var(--sbb-table-border);
+}
+.sbb-table thead > tr > th,
+.sbb-table-m thead > tr > th,
+.sbb-table-s thead > tr > th,
+.sbb-table-xs thead > tr > th {
+  font-size: var(--sbb-table-header-cell-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-weight: bold;
+  background-color: var(--sbb-table-background-color);
+  border-inline-end: var(--sbb-table-border);
+  padding-block: var(--sbb-table-header-padding-block);
+  padding-inline: var(--sbb-table-header-padding-inline);
+  text-align: left;
+}
+.sbb-table thead > tr > th:first-of-type,
+.sbb-table-m thead > tr > th:first-of-type,
+.sbb-table-s thead > tr > th:first-of-type,
+.sbb-table-xs thead > tr > th:first-of-type {
+  border-inline-start: var(--sbb-table-border);
+}
+.sbb-table tbody > tr > td,
+.sbb-table-m tbody > tr > td,
+.sbb-table-s tbody > tr > td,
+.sbb-table-xs tbody > tr > td {
+  font-size: var(--sbb-table-data-cell-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
+  border-inline-end: var(--sbb-table-border);
+  padding-block: var(--sbb-table-cell-padding-block);
+  padding-inline: var(--sbb-table-cell-padding-inline);
+}
+.sbb-table tbody > tr > td:first-of-type,
+.sbb-table-m tbody > tr > td:first-of-type,
+.sbb-table-s tbody > tr > td:first-of-type,
+.sbb-table-xs tbody > tr > td:first-of-type {
+  border-inline-start: var(--sbb-table-border);
+}
+.sbb-table caption,
+.sbb-table-m caption,
+.sbb-table-s caption,
+.sbb-table-xs caption {
+  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
+  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  font-size: var(--sbb-text-font-size-xs);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
+  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
+  text-align: left;
+}
+.sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
+.sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
+.sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
+.sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
+  border-block-start: var(--sbb-table-border);
+}
+
+.sbb-table-m {
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
+}
+
+.sbb-table-s {
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
+}
+
+.sbb-table-xs {
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-header-padding-block: 0;
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-block: 0;
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
+}
+
+sbb-table-wrapper[negative] .sbb-table,
+.sbb-table--negative {
+  --sbb-table-border-color: var(--sbb-color-anthracite);
+  --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-color: var(--sbb-color-1-negative);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
+  --sbb-table-caption-color: var(--sbb-color-cement);
+}
+
+.sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-row-striped-color);
+}
+
+.sbb-table--unstriped tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-background-color);
+}
+
+.sbb-table--theme-iron {
+  --sbb-table-cell-color: var(--sbb-color-4);
+}
+.sbb-table--theme-iron tbody > tr > td {
+  color: var(--sbb-table-cell-color);
+}
+.sbb-table--theme-iron.sbb-table--negative {
+  --sbb-table-cell-color: var(--sbb-color-cloud);
+}
+
+.sbb-table-header-row:last-of-type > th {
+  border-block-end: var(--sbb-table-border);
+}
+
+.sbb-table-header-cell {
+  font-size: var(--sbb-table-header-cell-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-weight: bold;
+  background-color: var(--sbb-table-background-color);
+  border-inline-end: var(--sbb-table-border);
+  padding-block: var(--sbb-table-header-padding-block);
+  padding-inline: var(--sbb-table-header-padding-inline);
+  text-align: left;
+}
+
+.sbb-table-row--striped {
+  background-color: var(--sbb-table-row-striped-color);
+}
+
+.sbb-table-data-cell {
+  font-size: var(--sbb-table-data-cell-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
+  border-inline-end: var(--sbb-table-border);
+  padding-block: var(--sbb-table-cell-padding-block);
+  padding-inline: var(--sbb-table-cell-padding-inline);
+}
+
+.sbb-table-caption {
+  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
+  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  font-size: var(--sbb-text-font-size-xs);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
+  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
+  text-align: left;
+}
+
+.sbb-table-filter {
+  padding-block-start: 0 !important;
+}
+
+.sbb-table-sticky {
+  position: sticky !important;
+}
+
+:is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
+  content: "";
+  transition-timing-function: var(--sbb-table-sticky-shadow-transition-easing);
+  transition-duration: var(--sbb-table-sticky-shadow-transition-duration);
+  transition-property: visibility, opacity;
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  width: var(--sbb-table-sticky-shadow-width);
+  inset: 0;
+}
+
+:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-left {
+  border-inline-end: var(--sbb-table-border);
+}
+:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-left::after {
+  visibility: visible;
+  opacity: 1;
+  background-image: linear-gradient(-270deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
+  inset-inline-start: unset;
+  inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+}
+
+:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right {
+  border-inline-start: var(--sbb-table-border);
+}
+:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right::after {
+  visibility: visible;
+  opacity: 1;
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
+  inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+  inset-inline-end: unset;
+}
+
+html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
+}

package/table.js

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

package/tabs/common.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 {
+  t as tabGroupCommonStyles,
+  s as tabLabelCommonStyles
+};

package/tabs/tab/tab.component.js

@@ -0,0 +1,52 @@
+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;
+})();
+export {
+  E as SbbTabElement
+};

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

@@ -0,0 +1,166 @@
+var k = (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 _ {
+    constructor() {
+      super();
+      u(this, h);
+      u(this, c);
+      u(this, d);
+      this._tabGroupResizeObserver = new D(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), () => {
+        this.labels.forEach((t) => t.linkToTab()), this.labels.find((t) => t.active)?.activate();
+      }), this._onLabelSlotChange = () => {
+        this.labels.forEach((t) => t.linkToTab()), this._ensureActiveTab();
+      }, this.addEventListener?.("keydown", (t) => this._handleKeyDown(t));
+    }
+    /**
+     * Size variant, either s, l or xl.
+     * @default 'l' / 's' (lean)
+     */
+    get size() {
+      return m(this, h);
+    }
+    set size(t) {
+      o(this, h, 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);
+    }
+    set initialSelectedIndex(t) {
+      o(this, c, t);
+    }
+    /**
+     * If set to true, the `sbb-tab` elements take 100% height of the `sbb-tab-group`.
+     * It enables controlling the height on the `sbb-tab-group` element.
+     * The content becomes scrollable on overflow.
+     */
+    get fixedHeight() {
+      return m(this, d);
+    }
+    set fixedHeight(t) {
+      o(this, d, t);
+    }
+    /** Gets the slotted `sbb-tab-label`s. */
+    get labels() {
+      return Array.from(this.children ?? []).filter((t) => /^sbb-tab-label$/u.test(t.localName));
+    }
+    /** Gets the slotted `sbb-tab`s. */
+    get tabs() {
+      return Array.from(this.children ?? []).filter((t) => /^sbb-tab$/u.test(t.localName));
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), this.labels.forEach((e) => e.linkToTab()), this._initSelection(), Promise.resolve().then(() => this.internals.states.add("initialized")), this._tabGroupResizeObserver.observe(this._tabGroupElement);
+    }
+    /**
+     * Disables a tab by index.
+     * @param index The index of the tab you want to disable.
+     */
+    disableTab(t) {
+      this.labels[t] && (this.labels[t].disabled = !0);
+    }
+    /**
+     * Enables a tab by index.
+     * @param index The index of the tab you want to enable.
+     */
+    enableTab(t) {
+      this.labels[t] && (this.labels[t].disabled = !1);
+    }
+    /**
+     * Activates a tab by index.
+     * @param index The index of the tab you want to activate.
+     */
+    activateTab(t) {
+      this.labels[t]?.activate();
+    }
+    _enabledTabs() {
+      return this.labels.filter((t) => (customElements.upgrade(t), !t.disabled));
+    }
+    _ensureActiveTab() {
+      this.internals.states.has("initialized") && !this.labels.some((t) => t.active) && this._initSelection();
+    }
+    _initSelection() {
+      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() {
+      const t = this.labels;
+      t.forEach((e) => {
+        B(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();
+      }
+    }
+    /**
+     * @internal
+     */
+    setTabContentHeight(t) {
+      this.style.setProperty("--sbb-tab-content-height", `${t}px`);
+    }
+    render() {
+      return g`
+      <div
+        class="sbb-tab-group"
+        role="tablist"
+        ${N((t) => this._tabGroupElement = t)}
+      >
+        <slot name="tab-bar" @slotchange=${this._onLabelSlotChange}></slot>
+      </div>
+      ${this.fixedHeight ? g`<slot @slotchange=${w(this._onContentSlotChange, 150)}></slot>` : g`
+            <div class="sbb-tab-group-content">
+              <slot @slotchange=${w(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 = {
+    tabchange: "tabchange"
+  }, b(n, a), n;
+})();
+export {
+  ot as SbbTabGroupElement
+};

package/tabs/tab-group.js

@@ -0,0 +1,4 @@
+import { SbbTabGroupElement as o } from "./tab-group/tab-group.component.js";
+export {
+  o as SbbTabGroupElement
+};

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

@@ -0,0 +1,127 @@
+var I = (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 {
+    constructor() {
+      super();
+      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, {
+        size: (t) => {
+          this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = t?.size || null, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
+        }
+      }));
+    }
+    /**
+     * The level will correspond to the heading tag generated in the title.
+     * Use this property to generate the appropriate header tag, taking SEO into consideration.
+     */
+    get level() {
+      return v(this, c);
+    }
+    set level(t) {
+      n(this, c, t);
+    }
+    /** Active tab state. */
+    get active() {
+      return v(this, d);
+    }
+    set active(t) {
+      n(this, d, t);
+    }
+    /** Amount displayed inside the tab. */
+    get amount() {
+      return v(this, h);
+    }
+    set amount(t) {
+      n(this, h, 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.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.tab?.deactivate(), 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.tab?.activate(), 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 t = `h${Number(this.level) < 7 ? this.level : "1"}`;
+      return M`
+        <${C(t)} class="sbb-tab-label">
+          <span class="sbb-tab-label__icon">
+            ${this.renderIconSlot()}
+          </span>
+          <span class="sbb-tab-label__text">
+            <slot></slot>
+          </span>
+          <p class="sbb-tab-label__amount">
+            <slot name="amount">${this.amount}</slot>
+          </p>
+        </${C(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) => {
+      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) => {
+      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) => {
+      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;
+})();
+export {
+  et as SbbTabLabelElement
+};

package/tabs/tab-label.js

@@ -0,0 +1,4 @@
+import { SbbTabLabelElement as a } from "./tab-label/tab-label.component.js";
+export {
+  a as SbbTabLabelElement
+};