@sbb-esta/lyne-elements 4.9.0 → 4.10.0

package/tab-label.component-CD56RH1Z.js

@@ -0,0 +1,165 @@
+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 } from "./core/base-elements.js";
+import { forceType as a, omitEmptyConverter as o } from "./core/decorators.js";
+import { SbbDisabledMixin as s } from "./core/mixins.js";
+import { boxSizingStyles as c } from "./core/styles.js";
+import { html as l, unsafeStatic as u } from "lit/static-html.js";
+import { SbbPropertyWatcherController as d } from "./core/controllers.js";
+import { tabLabelCommonStyles as f } from "./tabs/common/styles.js";
+import { SbbIconNameMixin as p } from "./icon.pure.js";
+//#region src/elements/tabs/tab-label/tab-label.scss?inline
+var 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}", h = (() => {
+	let h = s(p(i)), 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 = [a(), r({
+				reflect: !0,
+				type: Boolean
+			})], S = [a(), r({
+				reflect: !0,
+				converter: o
+			})], 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 = [
+				c,
+				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 d(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);
+			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
+			})), this.group?.dispatchEvent(new CustomEvent("tabchange", {
+				bubbles: !0,
+				composed: !0,
+				detail: {
+					activeIndex: e.findIndex((e) => e === this),
+					activeTabLabel: this,
+					activeTab: this.tab,
+					previousIndex: e.findIndex((e) => e === t),
+					previousTabLabel: t,
+					previousTab: t?.tab
+				}
+			})));
+		}
+		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-UOqFJjhe.js → tab-nav-bar.component-7mG-Dk6g.js}

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

package/{tab.component-BpUsS18w.js → tab.component-rEJAbgtn.js}

@@ -1,8 +1,8 @@
-import { css as e, html as t } from "lit";
+import { html as e, unsafeCSS as t } from "lit";
 import { SbbElement as n } from "./core/base-elements.js";
 import { ResizeController as r } from "@lit-labs/observers/resize-controller.js";
-//#region src/elements/tabs/tab/tab.scss?lit&inline
-var i = e`@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}}`, a = 0, o = class extends n {
+//#region src/elements/tabs/tab/tab.scss?inline
+var i = "@charset \"UTF-8\";:host:after,:host:before{content:\"\xA0\";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}}", a = 0, o = class extends n {
 	constructor() {
 		super(...arguments), this._tabContentResizeObserver = new r(this, {
 			target: null,
@@ -17,7 +17,7 @@ var i = e`@charset "UTF-8";:host:after,:host:before{content:" ";display:block;v
 		this.role = "tabpanel";
 	}
 	static {
-		this.styles = i;
+		this.styles = t(i);
 	}
 	static {
 		this.events = { active: "active" };
@@ -41,7 +41,7 @@ var i = e`@charset "UTF-8";:host:after,:host:before{content:" ";display:block;v
 		this.group?.setTabContentHeight(Math.floor(this.getBoundingClientRect().height));
 	}
 	render() {
-		return t`<slot></slot>`;
+		return e`<slot></slot>`;
 	}
 };
 //#endregion

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

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

package/table/table-wrapper.js

@@ -1,4 +1,4 @@
-import { t as e } from "../table-wrapper.component-DPUvpfK4.js";
+import { t as e } from "../table-wrapper.component-BpMpU8um.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/table/table-wrapper.js' has been deprecated.\nUse either '@sbb-esta/elements/table.js' or '@sbb-esta/elements/table.pure.js' instead.");
 //#endregion
 export { e as SbbTableWrapperElement };

package/{table-wrapper.component-DPUvpfK4.js → table-wrapper.component-BpMpU8um.js}

@@ -1,20 +1,20 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n, html as r, isServer as i } from "lit";
+import { html as n, isServer as r, unsafeCSS as i } from "lit";
 import { property as a } from "lit/decorators.js";
 import { SbbElement as o } from "./core/base-elements.js";
 import { forceType as s } from "./core/decorators.js";
 import { SbbNegativeMixin as c } from "./core/mixins.js";
 import { ResizeController as l } from "@lit-labs/observers/resize-controller.js";
-//#region src/elements/table/table-wrapper/table-wrapper.scss?lit&inline
-var u = n`:host{display:block;overflow:auto}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}::slotted(.sbb-table){width:100%}`, d = (() => {
-	let n = c(o), d, f = [], p = [];
-	return class extends n {
+//#region src/elements/table/table-wrapper/table-wrapper.scss?inline
+var u = ":host{display:block;overflow:auto}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}::slotted(.sbb-table){width:100%}", d = (() => {
+	let d = c(o), f, p = [], m = [];
+	return class extends d {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-			d = [s(), a({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+			f = [s(), a({
 				reflect: !0,
 				type: Boolean
-			})], e(this, null, d, {
+			})], e(this, null, f, {
 				kind: "accessor",
 				name: "focusable",
 				static: !1,
@@ -27,7 +27,7 @@ var u = n`:host{display:block;overflow:auto}:host(:focus-visible){outline-offset
 					}
 				},
 				metadata: t
-			}, f, p), t && Object.defineProperty(this, Symbol.metadata, {
+			}, p, m), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -41,9 +41,9 @@ var u = n`:host{display:block;overflow:auto}:host(:focus-visible){outline-offset
 			this.role = "section";
 		}
 		static {
-			this.styles = u;
+			this.styles = i(u);
 		}
-		#e = t(this, f, !1);
+		#e = t(this, p, !1);
 		get focusable() {
 			return this.#e;
 		}
@@ -51,7 +51,7 @@ var u = n`:host{display:block;overflow:auto}:host(:focus-visible){outline-offset
 			this.#e = e;
 		}
 		constructor() {
-			super(), t(this, p), this.addController(new l(this, {
+			super(), t(this, m), this.addController(new l(this, {
 				skipInitial: !0,
 				callback: () => this._checkHorizontalScrollbarOffset()
 			})), this.addEventListener?.("scroll", () => this._checkHorizontalScrollbarOffset(), { passive: !0 });
@@ -63,7 +63,7 @@ var u = n`:host{display:block;overflow:auto}:host(:focus-visible){outline-offset
 			super.willUpdate(e), e.has("focusable") && (this.focusable ? this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex")), e.has("negative") && this._updateScrollbarClass();
 		}
 		_updateScrollbarClass() {
-			i || (this.negative ? (this.classList.remove("sbb-scrollbar-thick-track-visible"), this.classList.add("sbb-scrollbar-thick-negative-track-visible")) : (this.classList.remove("sbb-scrollbar-thick-negative-track-visible"), this.classList.add("sbb-scrollbar-thick-track-visible")));
+			r || (this.negative ? (this.classList.remove("sbb-scrollbar-thick-track-visible"), this.classList.add("sbb-scrollbar-thick-negative-track-visible")) : (this.classList.remove("sbb-scrollbar-thick-negative-track-visible"), this.classList.add("sbb-scrollbar-thick-track-visible")));
 		}
 		_checkHorizontalScrollbarOffset() {
 			let e = this._calculateScrollOffset();
@@ -75,7 +75,7 @@ var u = n`:host{display:block;overflow:auto}:host(:focus-visible){outline-offset
 			return e ? t ? "none" : "right" : t ? "left" : "both";
 		}
 		render() {
-			return r`<slot></slot>`;
+			return n`<slot></slot>`;
 		}
 	};
 })();

package/table.css

@@ -35,42 +35,25 @@
   caption-side: bottom;
   color: var(--sbb-table-color);
   table-layout: auto;
+  text-align: left;
 }
-.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 {
+.sbb-table th,
+.sbb-table-m th,
+.sbb-table-s th,
+.sbb-table-xs 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);
-  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 {
+.sbb-table td,
+.sbb-table-m td,
+.sbb-table-s td,
+.sbb-table-xs 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);
@@ -79,12 +62,33 @@
   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 {
+.sbb-table :is(th, td).sbb-table-group-with-next,
+.sbb-table-m :is(th, td).sbb-table-group-with-next,
+.sbb-table-s :is(th, td).sbb-table-group-with-next,
+.sbb-table-xs :is(th, td).sbb-table-group-with-next {
+  border-inline-end: none;
+}
+.sbb-table :is(th, td):first-child,
+.sbb-table-m :is(th, td):first-child,
+.sbb-table-s :is(th, td):first-child,
+.sbb-table-xs :is(th, td):first-child {
   border-inline-start: var(--sbb-table-border);
 }
+.sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
+  border-block-start: var(--sbb-table-border);
+}
+.sbb-table thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-m thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-s thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
+  border-block-end: none;
+}
 .sbb-table caption,
 .sbb-table-m caption,
 .sbb-table-s caption,
@@ -97,12 +101,6 @@
   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);
@@ -167,10 +165,10 @@ sbb-table-wrapper[negative] .sbb-table,
   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);
-  text-align: left;
 }
 
 .sbb-table-row--striped {
@@ -246,4 +244,32 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   --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-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;
+}
+
+.sbb-table-align-left {
+  text-align: left;
+}
+
+.sbb-table-align-right {
+  text-align: right;
+}
+
+.sbb-table-header-subtitle {
+  font-weight: normal;
 }

package/table.js

@@ -1,4 +1,4 @@
-import { t as e } from "./table-wrapper.component-DPUvpfK4.js";
+import { t as e } from "./table-wrapper.component-BpMpU8um.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-DPUvpfK4.js";
+import { t as e } from "./table-wrapper.component-BpMpU8um.js";
 export { e as SbbTableWrapperElement };

package/tabs/common/styles.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../styles-DjLiBgML.js";
-export { e as tabGroupCommonStyles, t as tabLabelCommonStyles };
+import { n as e, t } from "../../styles-BUpK1iP2.js";
+export { t as tabGroupCommonStyles, e as tabLabelCommonStyles };

package/tabs/common.js

@@ -1,5 +1,5 @@
-import { n as e, t } from "../styles-DjLiBgML.js";
+import { n as e, t } from "../styles-BUpK1iP2.js";
 //#region src/elements/tabs/common.ts
 console.warn("The entrypoint '@sbb-esta/elements/tabs/common.js' has been deprecated.\nUse either '@sbb-esta/elements/tabs.js' or '@sbb-esta/elements/tabs.pure.js' instead.");
 //#endregion
-export { e as tabGroupCommonStyles, t as tabLabelCommonStyles };
+export { t as tabGroupCommonStyles, e as tabLabelCommonStyles };

package/tabs/tab/tab.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../tab.component-BpUsS18w.js";
+import { t as e } from "../../tab.component-rEJAbgtn.js";
 export { e as SbbTabElement };

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

@@ -1,2 +1,2 @@
-import { t as e } from "../../tab-group.component-BTwC9WKX.js";
+import { t as e } from "../../tab-group.component-Doy39cEh.js";
 export { e as SbbTabGroupElement };

package/tabs/tab-group.js

@@ -1,4 +1,4 @@
-import { t as e } from "../tab-group.component-BTwC9WKX.js";
+import { t as e } from "../tab-group.component-Doy39cEh.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/tabs/tab-group.js' has been deprecated.\nUse either '@sbb-esta/elements/tabs.js' or '@sbb-esta/elements/tabs.pure.js' instead.");
 //#endregion
 export { e as SbbTabGroupElement };

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

@@ -1,2 +1,2 @@
-import { t as e } from "../../tab-label.component-CsT_0RH7.js";
+import { t as e } from "../../tab-label.component-CD56RH1Z.js";
 export { e as SbbTabLabelElement };

package/tabs/tab-label.js

@@ -1,4 +1,4 @@
-import { t as e } from "../tab-label.component-CsT_0RH7.js";
+import { t as e } from "../tab-label.component-CD56RH1Z.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/tabs/tab-label.js' has been deprecated.\nUse either '@sbb-esta/elements/tabs.js' or '@sbb-esta/elements/tabs.pure.js' instead.");
 //#endregion
 export { e as SbbTabLabelElement };

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

@@ -1,2 +1,2 @@
-import { t as e } from "../../tab-nav-bar.component-UOqFJjhe.js";
+import { t as e } from "../../tab-nav-bar.component-7mG-Dk6g.js";
 export { e as SbbTabNavBarElement };

package/tabs/tab-nav-bar.js

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

package/tabs/tab.js

@@ -1,4 +1,4 @@
-import { t as e } from "../tab.component-BpUsS18w.js";
+import { t as e } from "../tab.component-rEJAbgtn.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/tabs/tab.js' has been deprecated.\nUse either '@sbb-esta/elements/tabs.js' or '@sbb-esta/elements/tabs.pure.js' instead.");
 //#endregion
 export { e as SbbTabElement };

package/tabs.js

@@ -1,9 +1,9 @@
-import { t as e } from "./tab-group.component-BTwC9WKX.js";
-import { t } from "./tab-label.component-CsT_0RH7.js";
-import { t as n } from "./tab-nav-bar.component-UOqFJjhe.js";
-import { t as r } from "./tab.component-BpUsS18w.js";
-import { n as i, t as a } from "./styles-DjLiBgML.js";
+import { t as e } from "./tab-group.component-Doy39cEh.js";
+import { t } from "./tab-label.component-CD56RH1Z.js";
+import { t as n } from "./tab-nav-bar.component-7mG-Dk6g.js";
+import { t as r } from "./tab.component-rEJAbgtn.js";
+import { n as i, t as a } from "./styles-BUpK1iP2.js";
 import "./tabs.pure.js";
 r.define(), e.define(), t.define(), n.define();
 //#endregion
-export { r as SbbTabElement, e as SbbTabGroupElement, t as SbbTabLabelElement, n as SbbTabNavBarElement, i as tabGroupCommonStyles, a as tabLabelCommonStyles };
+export { r as SbbTabElement, e as SbbTabGroupElement, t as SbbTabLabelElement, n as SbbTabNavBarElement, a as tabGroupCommonStyles, i as tabLabelCommonStyles };

package/tabs.pure.js

@@ -1,6 +1,6 @@
-import { t as e } from "./tab-group.component-BTwC9WKX.js";
-import { t } from "./tab-label.component-CsT_0RH7.js";
-import { t as n } from "./tab-nav-bar.component-UOqFJjhe.js";
-import { t as r } from "./tab.component-BpUsS18w.js";
-import { n as i, t as a } from "./styles-DjLiBgML.js";
-export { r as SbbTabElement, e as SbbTabGroupElement, t as SbbTabLabelElement, n as SbbTabNavBarElement, i as tabGroupCommonStyles, a as tabLabelCommonStyles };
+import { t as e } from "./tab-group.component-Doy39cEh.js";
+import { t } from "./tab-label.component-CD56RH1Z.js";
+import { t as n } from "./tab-nav-bar.component-7mG-Dk6g.js";
+import { t as r } from "./tab.component-rEJAbgtn.js";
+import { n as i, t as a } from "./styles-BUpK1iP2.js";
+export { r as SbbTabElement, e as SbbTabGroupElement, t as SbbTabLabelElement, n as SbbTabNavBarElement, a as tabGroupCommonStyles, i as tabLabelCommonStyles };

package/tag/tag/tag.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../tag.component-ClZ-ZKFC.js";
+import { t as e } from "../../tag.component-CzYJZuFT.js";
 export { e as SbbTagElement };

package/tag/tag-group/tag-group.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../tag-group.component-CoChkHtw.js";
+import { t as e } from "../../tag-group.component-DkQVBbQY.js";
 export { e as SbbTagGroupElement };

package/tag/tag-group.js

@@ -1,4 +1,4 @@
-import { t as e } from "../tag-group.component-CoChkHtw.js";
+import { t as e } from "../tag-group.component-DkQVBbQY.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/tag/tag-group.js' has been deprecated.\nUse either '@sbb-esta/elements/tag.js' or '@sbb-esta/elements/tag.pure.js' instead.");
 //#endregion
 export { e as SbbTagGroupElement };

package/tag/tag.js

@@ -1,4 +1,4 @@
-import { t as e } from "../tag.component-ClZ-ZKFC.js";
+import { t as e } from "../tag.component-CzYJZuFT.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/tag/tag.js' has been deprecated.\nUse either '@sbb-esta/elements/tag.js' or '@sbb-esta/elements/tag.pure.js' instead.");
 //#endregion
 export { e as SbbTagElement };