@sbb-esta/lyne-elements 5.0.0-next.2 → 5.0.0

package/{tab-group.component-BGDY-hvA.js → tab-group.component-Dx0xldWI.js}

@@ -1,24 +1,49 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, unsafeCSS as r } from "lit";
 import { property as i } from "lit/decorators.js";
-import { SbbElement as a, forceType as o, getNextElementIndex as s, isArrowKeyPressed as c, isLean as l, ɵstateController as u } from "./core.js";
-import { ResizeController as d } from "@lit-labs/observers/resize-controller.js";
-import { ref as f } from "lit/directives/ref.js";
-import { tabGroupCommonStyles as p } from "./tabs/common/styles.js";
+import { SbbElement as a, forceType as o, getNextElementIndex as s, isArrowKeyPressed as c, ɵstateController as l } from "./core.js";
+import { ResizeController as u } from "@lit-labs/observers/resize-controller.js";
+import { ref as d } from "lit/directives/ref.js";
+import { tabGroupCommonStyles as f } from "./tabs/common/styles.js";
 //#region src/elements/tabs/tab-group/tab-group.scss?inline
-var m = ":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}", h = (() => {
-	let h = a, g, _ = [], v = [], y, b = [], x = [], S, C = [], w = [];
-	return class extends h {
+var p = ":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}", m = class extends Event {
+	get activeIndex() {
+		return this._activeIndex;
+	}
+	get activeTabLabel() {
+		return this._activeTabLabel;
+	}
+	get activeTab() {
+		return this._activeTab;
+	}
+	get previousIndex() {
+		return this._previousIndex;
+	}
+	get previousTabLabel() {
+		return this._previousTabLabel;
+	}
+	get previousTab() {
+		return this._previousTab;
+	}
+	constructor({ activeIndex: e, activeTabLabel: t, activeTab: n, previousIndex: r, previousTabLabel: i, previousTab: a }) {
+		super("tabchange", {
+			bubbles: !0,
+			composed: !0
+		}), this._activeIndex = e, this._activeTabLabel = t, this._activeTab = n, this._previousIndex = r, this._previousTabLabel = i, this._previousTab = a;
+	}
+}, h = (() => {
+	let m = a, h, g = [], _ = [], v, y = [], b = [], x, S = [], C = [];
+	return class extends m {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-			g = [i()], y = [o(), i({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+			h = [i({ reflect: !0 })], v = [o(), i({
 				attribute: "initial-selected-index",
 				type: Number
-			})], S = [o(), i({
+			})], x = [o(), i({
 				attribute: "fixed-height",
 				type: Boolean,
 				reflect: !0
-			})], e(this, null, g, {
+			})], e(this, null, h, {
 				kind: "accessor",
 				name: "size",
 				static: !1,
@@ -31,7 +56,7 @@ var m = ":host{--sbb-tab-group-animation-duration: 0s;gap:var(--sbb-tab-group-co
 					}
 				},
 				metadata: t
-			}, _, v), e(this, null, y, {
+			}, g, _), e(this, null, v, {
 				kind: "accessor",
 				name: "initialSelectedIndex",
 				static: !1,
@@ -44,7 +69,7 @@ var m = ":host{--sbb-tab-group-animation-duration: 0s;gap:var(--sbb-tab-group-co
 					}
 				},
 				metadata: t
-			}, b, x), e(this, null, S, {
+			}, y, b), e(this, null, x, {
 				kind: "accessor",
 				name: "fixedHeight",
 				static: !1,
@@ -57,7 +82,7 @@ var m = ":host{--sbb-tab-group-animation-duration: 0s;gap:var(--sbb-tab-group-co
 					}
 				},
 				metadata: t
-			}, C, w), t && Object.defineProperty(this, Symbol.metadata, {
+			}, S, C), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -68,7 +93,7 @@ var m = ":host{--sbb-tab-group-animation-duration: 0s;gap:var(--sbb-tab-group-co
 			this.elementName = "sbb-tab-group";
 		}
 		static {
-			this.styles = [p, r(m)];
+			this.styles = [f, r(p)];
 		}
 		static {
 			this.events = { tabchange: "tabchange" };
@@ -101,11 +126,11 @@ var m = ":host{--sbb-tab-group-animation-duration: 0s;gap:var(--sbb-tab-group-co
 			return Array.from(this.children ?? []).filter((e) => /^sbb-tab$/u.test(e.localName));
 		}
 		constructor() {
-			super(), this._tabGroupResizeObserver = new d(this, {
+			super(), this._tabGroupResizeObserver = new u(this, {
 				target: null,
 				skipInitial: !0,
 				callback: () => this._onTabGroupElementResize()
-			}), this.#e = t(this, _, l() ? "s" : "l"), this.#t = (t(this, v), t(this, b, 0)), this.#n = (t(this, x), t(this, C, !1)), t(this, w), this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
+			}), this.#e = t(this, g, null), this.#t = (t(this, _), t(this, y, 0)), this.#n = (t(this, b), t(this, S, !1)), t(this, C), this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
 		}
 		firstUpdated(e) {
 			super.firstUpdated(e), this.labels.forEach((e) => e.linkToTab()), this._initSelection(), Promise.resolve().then(() => this.internals.states.add("initialized")), this._tabGroupResizeObserver.observe(this._tabGroupElement);
@@ -144,7 +169,7 @@ var m = ":host{--sbb-tab-group-animation-duration: 0s;gap:var(--sbb-tab-group-co
 		_onTabGroupElementResize() {
 			let e = this.labels;
 			e.forEach((t) => {
-				u(t)?.toggle("has-divider", t === e[0] || t.offsetLeft === e[0].offsetLeft);
+				l(t)?.toggle("has-divider", t === e[0] || t.offsetLeft === e[0].offsetLeft);
 			}), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
 		}
 		_handleKeyDown(e) {
@@ -162,7 +187,7 @@ var m = ":host{--sbb-tab-group-animation-duration: 0s;gap:var(--sbb-tab-group-co
       <div
         class="sbb-tab-group"
         role="tablist"
-        ${f((e) => this._tabGroupElement = e)}
+        ${d((e) => this._tabGroupElement = e)}
       >
         <slot name="tab-bar" @slotchange=${this._onLabelSlotChange}></slot>
       </div>
@@ -176,4 +201,4 @@ var m = ":host{--sbb-tab-group-animation-duration: 0s;gap:var(--sbb-tab-group-co
 	};
 })();
 //#endregion
-export { h as t };
+export { h as n, m as t };

package/tab-label.component-C5HCrNFB.js

@@ -0,0 +1,158 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { unsafeCSS as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { SbbDisabledMixin as i, SbbElement as a, SbbPropertyWatcherController as o, forceType as s, omitEmptyConverter as c } from "./core.js";
+import { html as l, unsafeStatic as u } from "lit/static-html.js";
+import { SbbIconNameMixin as d } from "./icon.pure.js";
+import { tabLabelCommonStyles as f } from "./tabs/common/styles.js";
+import { SbbTabChangeEvent as p } from "./tabs/tab-group/tab-group.component.js";
+//#region src/elements/tabs/tab-label/tab-label.scss?inline
+var m = ":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}", h = (() => {
+	let h = i(d(a)), g, _ = [], v = [], y, b = [], x = [], S, C = [], w = [];
+	return class extends h {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+			g = [r()], y = [s(), r({
+				reflect: !0,
+				type: Boolean
+			})], S = [s(), r({
+				reflect: !0,
+				converter: c
+			})], e(this, null, g, {
+				kind: "accessor",
+				name: "level",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "level" in e,
+					get: (e) => e.level,
+					set: (e, t) => {
+						e.level = t;
+					}
+				},
+				metadata: t
+			}, _, v), e(this, null, y, {
+				kind: "accessor",
+				name: "active",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "active" in e,
+					get: (e) => e.active,
+					set: (e, t) => {
+						e.active = t;
+					}
+				},
+				metadata: t
+			}, b, x), e(this, null, S, {
+				kind: "accessor",
+				name: "amount",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "amount" in e,
+					get: (e) => e.amount,
+					set: (e, t) => {
+						e.amount = t;
+					}
+				},
+				metadata: t
+			}, C, w), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-tab-label";
+		}
+		static {
+			this.role = "tab";
+		}
+		static {
+			this.styles = [f, n(m)];
+		}
+		#e;
+		get level() {
+			return this.#e;
+		}
+		set level(e) {
+			this.#e = e;
+		}
+		#t;
+		get active() {
+			return this.#t;
+		}
+		set active(e) {
+			this.#t = e;
+		}
+		#n;
+		get amount() {
+			return this.#n;
+		}
+		set amount(e) {
+			this.#n = e;
+		}
+		get tab() {
+			return this.nextElementSibling?.localName === "sbb-tab" ? this.nextElementSibling : null;
+		}
+		get group() {
+			return this.closest("sbb-tab-group");
+		}
+		constructor() {
+			super(), this._selected = !1, this._previousSize = null, this.#e = t(this, _, "1"), this.#t = (t(this, v), t(this, b, !1)), this.#n = (t(this, x), t(this, C, "")), t(this, w), this.addEventListener("click", () => this.activate()), this.addController(new o(this, () => this.group, { size: (e) => {
+				this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = e.size ?? null, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
+			} }));
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.slot = "tab-bar", this.tabIndex = this.active ? 0 : -1;
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("active") && (this.internals.ariaSelected = `${this.active}`, this.active && !this.disabled ? this.activate() : this.deactivate()), e.has("disabled") && this.disabled && (this.tabIndex = -1, this.active && (this.deactivate(), this.group?.activateTab(0)));
+		}
+		deactivate() {
+			this.active = !1, this.tab?.deactivate(), this._selected = !1, this.tabIndex = -1;
+		}
+		activate() {
+			if (this.disabled) return;
+			let e = this.group?.labels || [], t = e.find((e) => e._selected);
+			if (t !== this) {
+				t?.deactivate(), this.active = !0, this.tab?.activate(), this._selected = !0, this.tabIndex = 0, this.tab?.dispatchEvent(new Event("active", {
+					bubbles: !0,
+					composed: !0
+				}));
+				let n = {
+					activeIndex: e.findIndex((e) => e === this),
+					activeTabLabel: this,
+					activeTab: this.tab,
+					previousIndex: e.findIndex((e) => e === t),
+					previousTabLabel: t,
+					previousTab: t?.tab
+				};
+				this.group?.dispatchEvent(new p(n));
+			}
+		}
+		linkToTab() {
+			this.tab && (this.internals.ariaControlsElements = [this.tab]);
+		}
+		render() {
+			let e = `h${Number(this.level) < 7 ? this.level : "1"}`;
+			return l`
+        <${u(e)} 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>
+        </${u(e)}>
+    `;
+		}
+	};
+})();
+//#endregion
+export { h as t };

package/{tab-nav-bar.component-Cwrqhb-2.js → tab-nav-bar.component-7j-RCq7p.js}

@@ -1,22 +1,22 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { unsafeCSS as n } from "lit";
 import { property as r } from "lit/decorators.js";
-import { SbbElement as i, SbbNamedSlotListMixin as a, isLean as o } from "./core.js";
-import { ResizeController as s } from "@lit-labs/observers/resize-controller.js";
-import { tabGroupCommonStyles as c, tabLabelCommonStyles as l } from "./tabs/common/styles.js";
+import { SbbElement as i, SbbNamedSlotListMixin as a } from "./core.js";
+import { ResizeController as o } from "@lit-labs/observers/resize-controller.js";
+import { tabGroupCommonStyles as s, tabLabelCommonStyles as c } from "./tabs/common/styles.js";
 //#region src/elements/tabs/tab-nav-bar/tab-nav-bar.scss?inline
-var u = ":host{margin-block-end:var(--sbb-tab-group-content-gap)}.sbb-tab-nav-bar{list-style:none;margin:0;padding:0;font-size:inherit}", d = (() => {
-	let d = a(i), f, p = [], m = [];
-	return class extends d {
+var l = ":host{margin-block-end:var(--sbb-tab-group-content-gap)}", u = (() => {
+	let u = a(i), d, f = [], p = [];
+	return class extends u {
 		constructor() {
-			super(...arguments), this.listChildLocalNames = ["a"], this.#e = t(this, p, o() ? "s" : "l"), this._resizeController = (t(this, m), new s(this, {
+			super(...arguments), this.listChildLocalNames = ["a"], this.#e = t(this, f, null), this._resizeController = (t(this, p), new o(this, {
 				target: null,
 				callback: () => this._onTabGroupElementResize()
 			})), this._listElement = null;
 		}
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-			f = [r({ reflect: !0 })], e(this, null, f, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+			d = [r({ reflect: !0 })], e(this, null, d, {
 				kind: "accessor",
 				name: "size",
 				static: !1,
@@ -29,7 +29,7 @@ var u = ":host{margin-block-end:var(--sbb-tab-group-content-gap)}.sbb-tab-nav-ba
 					}
 				},
 				metadata: t
-			}, p, m), t && Object.defineProperty(this, Symbol.metadata, {
+			}, f, p), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -41,9 +41,9 @@ var u = ":host{margin-block-end:var(--sbb-tab-group-content-gap)}.sbb-tab-nav-ba
 		}
 		static {
 			this.styles = [
-				l,
 				c,
-				n(u)
+				s,
+				n(l)
 			];
 		}
 		static {
@@ -74,4 +74,4 @@ var u = ":host{margin-block-end:var(--sbb-tab-group-content-gap)}.sbb-tab-nav-ba
 	};
 })();
 //#endregion
-export { d as t };
+export { u as t };

package/table/_table.global.scss

@@ -0,0 +1,295 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --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: 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-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-s),
+        'lean': var(--sbb-text-font-size-xs),
+      ),
+      $theme
+    )};
+  --sbb-table-header-padding-block: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-3x),
+        'lean': var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+  --sbb-table-header-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-4x),
+        'lean': var(--sbb-spacing-fixed-2x),
+      ),
+      $theme
+    )};
+  --sbb-table-cell-padding-block: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xxxs),
+        'lean': var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+  --sbb-table-cell-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-4x),
+        'lean': var(--sbb-spacing-fixed-2x),
+      ),
+      $theme
+    )};
+}
+
+@mixin rules {
+  // Notes:
+  // We cannot use `border-collapse` because in sticky variants it gets visually broken.
+  // Therefore, we have to build the grid avoiding double borders.
+  :is(.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-sticky-shadow-transition-duration: var(
+      --sbb-disable-animation-duration,
+      var(--sbb-animation-duration-6x)
+    );
+
+    border-spacing: 0;
+    caption-side: bottom;
+    color: var(--sbb-table-color);
+    table-layout: auto;
+    text-align: left;
+
+    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-block-end: var(--sbb-table-border);
+      border-inline-end: var(--sbb-table-border);
+      padding-block: var(--sbb-table-header-padding-block);
+      padding-inline: var(--sbb-table-header-padding-inline);
+    }
+
+    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);
+    }
+
+    :is(th, td) {
+      &.sbb-table-group-with-next {
+        border-inline-end: none;
+      }
+
+      &:first-child {
+        border-inline-start: var(--sbb-table-border);
+      }
+    }
+
+    // In Angular the CDK table always adds a thead even if there are no headers.
+    // Due to this fact we have to also insert `tr` in the `:has()` selector.
+    &:has(thead tr) thead,
+    &:not(:has(thead tr)) tbody {
+      tr:first-of-type > :is(th, td) {
+        border-block-start: var(--sbb-table-border);
+      }
+    }
+
+    // Avoid borders between header rows (design specification).
+    thead > tr:has(+ tr) > :is(th, td) {
+      border-block-end: none;
+    }
+  }
+
+  :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) caption,
+  .sbb-table-caption {
+    // Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
+    --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);
+
+    // Defaults are needed for cases where the caption is used outside a table
+    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-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-s {
+    --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-m {
+    --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-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-wrapper[negative] &,
+    &.sbb-table--negative {
+      --sbb-table-cell-color: var(--sbb-color-cloud);
+    }
+
+    tbody > tr > td {
+      color: var(--sbb-table-cell-color);
+    }
+  }
+
+  .sbb-table-header-subtitle {
+    font-weight: normal;
+  }
+
+  .sbb-table-row--striped {
+    background-color: var(--sbb-table-row-striped-color);
+  }
+
+  .sbb-table-filter {
+    padding-block-start: 0 !important;
+  }
+
+  .sbb-table-caption {
+    // Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
+    --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);
+
+    // Defaults are needed for cases where the caption is used outside a table
+    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-sticky {
+    // Note that the table can either set this class or an inline style to make something sticky.
+    // We set the style as `!important` so that we get an identical specificity in both cases
+    // and to avoid cases where user styles have a higher specificity.
+    position: sticky !important;
+  }
+
+  // The `sbb-table-sticky-*` css classes are used by the Angular wrapper and CDK.
+  // Do not rename them, please.
+  :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);
+      duration: var(--sbb-table-sticky-shadow-transition-duration);
+      property: visibility, opacity;
+    }
+
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    width: var(--sbb-table-sticky-shadow-width);
+    inset: 0;
+  }
+
+  .sbb-table-sticky-border-elem-left {
+    :is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) & {
+      border-inline-end: var(--sbb-table-border);
+
+      &::after {
+        visibility: visible;
+        opacity: 1;
+        background-image: linear-gradient(-270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
+        inset-inline-start: unset;
+        inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+      }
+    }
+  }
+
+  .sbb-table-sticky-border-elem-right {
+    :is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) & {
+      border-inline-start: var(--sbb-table-border);
+
+      &::after {
+        visibility: visible;
+        opacity: 1;
+        background-image: linear-gradient(270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
+        inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+        inset-inline-end: unset;
+      }
+    }
+  }
+
+  .sbb-table-align-start {
+    text-align: start;
+  }
+
+  .sbb-table-align-center {
+    text-align: center;
+  }
+
+  .sbb-table-align-end {
+    text-align: end;
+  }
+
+  .sbb-table-align-justify {
+    text-align: justify;
+  }
+
+  // Backwards compatibility for sbb-angular
+  .sbb-table-align-left {
+    text-align: left;
+  }
+
+  // Backwards compatibility for sbb-angular
+  .sbb-table-align-right {
+    text-align: right;
+  }
+}

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

@@ -1,2 +1,2 @@
-import { t as e } from "../../table-wrapper.component-CQ76PAQl.js";
+import { t as e } from "../../table-wrapper.component-BzmzJJim.js";
 export { e as SbbTableWrapperElement };

package/table.js

@@ -1,4 +1,4 @@
-import { t as e } from "./table-wrapper.component-CQ76PAQl.js";
+import { t as e } from "./table-wrapper.component-BzmzJJim.js";
 import "./table.pure.js";
 //#region src/elements/table.ts
 e.define();

package/table.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./table-wrapper.component-CQ76PAQl.js";
+import { t as e } from "./table-wrapper.component-BzmzJJim.js";
 export { e as SbbTableWrapperElement };