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

package/{toggle-option.component-BF95HWOF.js → toggle-option.component-BP9QEwh9.js}

@@ -1,19 +1,19 @@
 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 { SbbDisabledMixin as a, SbbElement as o, boxSizingStyles as s, forceType as c } from "./core.js";
-import { SbbIconNameMixin as l } from "./icon.pure.js";
-import { ResizeController as u } from "@lit-labs/observers/resize-controller.js";
+import { SbbDisabledMixin as a, SbbElement as o, forceType as s } from "./core.js";
+import { SbbIconNameMixin as c } from "./icon.pure.js";
+import { ResizeController as l } from "@lit-labs/observers/resize-controller.js";
 //#region src/elements/toggle/toggle-option/toggle-option.scss?inline
-var d = ":host{--sbb-toggle-option-cursor: var(--sbb-cursor-pointer);--sbb-toggle-option-color: var(--sbb-color-anthracite);--sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));--sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);display:inline-block;overflow:hidden;outline:none!important}:host([checked]){--sbb-toggle-option-color: var(--sbb-color-2)}:host([disabled]){--sbb-toggle-option-cursor: unset;--sbb-toggle-option-color: var(--sbb-color-anthracite);--sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud))}.sbb-toggle-option{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;display:flex;justify-content:center;align-items:center;gap:var(--sbb-spacing-fixed-1x);height:var(--sbb-toggle-height);padding-inline:var(--sbb-toggle-padding-inline);color:var(--sbb-toggle-option-color);cursor:var(--sbb-toggle-option-cursor)}.sbb-toggle-option__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sbb-icon,::slotted(sbb-icon){min-width:var(--sbb-toggle-option-icon-min-size);min-height:var(--sbb-toggle-option-icon-min-size)}", f = (() => {
-	let f = a(l(o)), p, m = [], h = [], g, _ = [], v = [];
-	return class extends f {
+var u = ":host{display:flex;justify-content:center;align-items:center;gap:var(--sbb-toggle-option-gap);height:var(--sbb-toggle-height);padding-inline:var(--sbb-toggle-padding-inline);color:var(--sbb-toggle-option-color);cursor:var(--sbb-toggle-option-cursor, var(--sbb-cursor-pointer));overflow:hidden;font-size:var(--sbb-toggle-option-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);font-weight:700;outline:none!important}:host([checked]){--sbb-toggle-option-color: var(--sbb-color-2)}:host([disabled]){--sbb-toggle-option-cursor: unset;--sbb-toggle-option-color: var(--sbb-color-anthracite);--sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud))}.sbb-toggle-option__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sbb-icon,::slotted(sbb-icon){min-width:var(--sbb-toggle-option-icon-min-size);min-height:var(--sbb-toggle-option-icon-min-size)}", d = (() => {
+	let d = a(c(o)), f, p = [], m = [], h, g = [], _ = [];
+	return class extends d {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-			p = [c(), i({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+			f = [s(), i({
 				reflect: !0,
 				type: Boolean
-			})], g = [i()], e(this, null, p, {
+			})], h = [i()], e(this, null, f, {
 				kind: "accessor",
 				name: "checked",
 				static: !1,
@@ -26,7 +26,7 @@ var d = ":host{--sbb-toggle-option-cursor: var(--sbb-cursor-pointer);--sbb-toggl
 					}
 				},
 				metadata: t
-			}, m, h), e(this, null, g, {
+			}, p, m), e(this, null, h, {
 				kind: "accessor",
 				name: "value",
 				static: !1,
@@ -39,7 +39,7 @@ var d = ":host{--sbb-toggle-option-cursor: var(--sbb-cursor-pointer);--sbb-toggl
 					}
 				},
 				metadata: t
-			}, _, v), t && Object.defineProperty(this, Symbol.metadata, {
+			}, g, _), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -53,7 +53,7 @@ var d = ":host{--sbb-toggle-option-cursor: var(--sbb-cursor-pointer);--sbb-toggl
 			this.role = "radio";
 		}
 		static {
-			this.styles = [s, r(d)];
+			this.styles = [r(u)];
 		}
 		#e;
 		get checked() {
@@ -70,12 +70,12 @@ var d = ":host{--sbb-toggle-option-cursor: var(--sbb-cursor-pointer);--sbb-toggl
 			this.#t = e;
 		}
 		constructor() {
-			super(), this.#e = t(this, m, !1), this.#t = (t(this, h), t(this, _, null)), this._toggle = (t(this, v), null), this.addEventListener?.("input", () => this._handleInput()), this.addEventListener?.("click", () => {
+			super(), this.#e = t(this, p, !1), this.#t = (t(this, m), t(this, g, null)), this._toggle = (t(this, _), null), this.addEventListener?.("input", () => this._handleInput()), this.addEventListener?.("click", () => {
 				!this.disabled && !this.checked && this.dispatchEvent(new InputEvent("input", {
 					bubbles: !0,
 					composed: !0
 				}));
-			}), this.addController(new u(this, {
+			}), this.addController(new l(this, {
 				skipInitial: !0,
 				callback: () => this._toggle?.updatePillPosition?.(!0)
 			}));
@@ -106,15 +106,13 @@ var d = ":host{--sbb-toggle-option-cursor: var(--sbb-cursor-pointer);--sbb-toggl
 		}
 		render() {
 			return n`
-      <div class="sbb-toggle-option">
-        ${this.renderIconSlot()}
-        <span class="sbb-toggle-option__label">
-          <slot></slot>
-        </span>
-      </div>
+      ${this.renderIconSlot()}
+      <span class="sbb-toggle-option__label">
+        <slot></slot>
+      </span>
     `;
 		}
 	};
 })();
 //#endregion
-export { f as t };
+export { d as t };

package/toggle.component-BFsrJ98d.js

@@ -0,0 +1,152 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, isServer as r, unsafeCSS as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbDisabledMixin as o, SbbElement as s, SbbFormAssociatedMixin as c, forceType as l, interactivityChecker as u, isLean as d } from "./core.js";
+//#region src/elements/toggle/toggle/toggle.scss?inline
+var f = ":host{--_sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 4 + var(--sbb-size-icon-ui-small) );--sbb-toggle-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );display:grid;grid-template-columns:var(--sbb-toggle-grid-template-columns);grid-template-areas:\"start end\";align-items:center;height:var(--sbb-toggle-height);width:var(--sbb-toggle-width, fit-content);min-width:var(--_sbb-toggle-min-width);max-width:100%;border-radius:var(--sbb-toggle-border-radius);font-size:var(--sbb-toggle-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;line-height:var(--sbb-typo-line-height-text)}:host:before{content:\"\";display:block;grid-area:start/start/end/end;margin-inline:var(--sbb-toggle-option-left, 0) var(--sbb-toggle-option-right, 0);background-color:var(--sbb-toggle-selected-option-background-color);border-radius:var(--sbb-toggle-border-radius);max-width:100%;height:100%;border:var(--sbb-toggle-selected-option-border-width) var(--sbb-toggle-selected-option-border-style) var(--sbb-toggle-selected-option-border-color);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:margin-inline-start,margin-inline-end}:host:after{content:\"\";grid-area:start/start/end/end;order:-1;background:var(--sbb-toggle-background-color);margin-inline:var(--sbb-toggle-background-inset);height:calc(100% - 2 * var(--sbb-toggle-background-inset));border-radius:var(--sbb-toggle-border-radius)}@media(forced-colors:active){:host:after{border:var(--sbb-border-width-1x) solid CanvasText}}:host([even]){--sbb-toggle-width: 100%;--sbb-toggle-grid-template-columns: 50% 50%}:host(:disabled){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-selected-option-border-color: light-dark( var(--sbb-color-graphite), var(--sbb-color-smoke) );--sbb-toggle-selected-option-border-style: dashed}@media(forced-colors:active){:host(:disabled){--sbb-toggle-selected-option-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-height: var(--sbb-size-element-m)}:host([size=s]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-height: var(--sbb-size-element-xxs)}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(disable-animation-on-resizing),[state--disable-animation-on-resizing]))){--sbb-disable-animation-duration: 0s}::slotted(sbb-toggle-option:first-of-type){grid-area:start}::slotted(sbb-toggle-option:last-of-type){grid-area:end}", p = (() => {
+	let p = o(c(s)), m = [], h, g = [], _ = [], v, y = [], b = [], x;
+	return class extends p {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+			h = [l(), a({
+				reflect: !0,
+				type: Boolean
+			})], v = [a({ reflect: !0 })], x = [a()], e(this, null, h, {
+				kind: "accessor",
+				name: "even",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "even" in e,
+					get: (e) => e.even,
+					set: (e, t) => {
+						e.even = t;
+					}
+				},
+				metadata: t
+			}, g, _), e(this, null, v, {
+				kind: "accessor",
+				name: "size",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "size" in e,
+					get: (e) => e.size,
+					set: (e, t) => {
+						e.size = t;
+					}
+				},
+				metadata: t
+			}, y, b), e(this, null, x, {
+				kind: "setter",
+				name: "value",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "value" in e,
+					set: (e, t) => {
+						e.value = t;
+					}
+				},
+				metadata: t
+			}, null, m), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-toggle";
+		}
+		static {
+			this.role = "radiogroup";
+		}
+		static {
+			this.styles = [i(f)];
+		}
+		static {
+			this.events = { change: "change" };
+		}
+		#e;
+		get even() {
+			return this.#e;
+		}
+		set even(e) {
+			this.#e = e;
+		}
+		#t;
+		get size() {
+			return this.#t;
+		}
+		set size(e) {
+			this.#t = e;
+		}
+		set value(e) {
+			r || !this.hasUpdated ? this._fallbackValue = e : this._valueChanged(e);
+		}
+		get value() {
+			return r ? this._fallbackValue ?? null : this.options.find((e) => e.checked)?.value ?? this.options[0]?.value ?? null;
+		}
+		get options() {
+			return Array.from(this.querySelectorAll?.("sbb-toggle-option") ?? []);
+		}
+		constructor() {
+			super(), this.#e = (t(this, m), t(this, g, !1)), this.#t = (t(this, _), t(this, y, d() ? "s" : "m")), this._fallbackValue = (t(this, b), null), this.addEventListener?.("input", () => this._handleInput(), { passive: !0 }), this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
+		}
+		willUpdate(e) {
+			super.willUpdate(e), (e.has("disabled") || e.has("formDisabled")) && this._updateDisabled(), this.hasUpdated || this._valueChanged(this._fallbackValue);
+		}
+		statusChanged() {
+			this.updateFormValue(), this.updatePillPosition();
+		}
+		formResetCallback() {
+			this.value = this.hasAttribute("value") ? this.getAttribute("value") : null;
+		}
+		formStateRestoreCallback(e, t) {
+			typeof e == "string" || e == null ? this.value = e ?? null : e instanceof FormData && this._readFormData(e).then((e) => {
+				this.value = e;
+			});
+		}
+		async _readFormData(e) {
+			let t = e.get(this.name);
+			return t instanceof Blob ? JSON.parse(await t.text()) : t;
+		}
+		updatePillPosition(e = !1) {
+			let t = this.options;
+			if (t.length < 2 || t.every((e) => !e.checked) || t.every((e) => !e.clientWidth)) return;
+			this.toggleState("disable-animation-on-resizing", e);
+			let n = t[0], r = n.checked, i = r ? "0px" : `${n.clientWidth}px`, a = r ? `${this.clientWidth - n.clientWidth}px` : "0px";
+			a === "0px" && i === "0px" || (this.style?.setProperty("--sbb-toggle-option-left", i), this.style?.setProperty("--sbb-toggle-option-right", a), this.offsetWidth, this.internals.states.add("initialized"));
+		}
+		_updateToggle() {
+			this._valueChanged(this.value), this._updateDisabled();
+		}
+		_valueChanged(e) {
+			let t = this.options, n = t.find((t) => e === t.value) ?? t.find((e) => e.checked) ?? t[0];
+			n && (n.checked = !0, this.statusChanged());
+		}
+		_updateDisabled() {
+			for (let e of this.options) e.disabled = this.disabled || this.formDisabled;
+		}
+		_handleInput() {
+			this.statusChanged(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		}
+		_handleKeyDown(e) {
+			if (!this.options.filter((e) => !e.disabled && u.isVisible(e)) || e.target !== this && e.target.parentElement !== this) return;
+			let t = this.options, n = this.matches(":dir(rtl)"), r = t.findIndex((e) => e.checked) ?? t[0], i = t.slice(r + 1).concat(t.slice(0, r)).filter((e) => !e.disabled && u.isVisible(e));
+			(n ? e.key === "ArrowLeft" : e.key === " " || e.key === "ArrowRight") ? (this._selectAndFocusOption(i[0]), e.preventDefault()) : (n ? e.key === " " || e.key === "ArrowRight" : e.key === "ArrowLeft") && (this._selectAndFocusOption(i.at(-1)), e.preventDefault());
+		}
+		_selectAndFocusOption(e) {
+			!e || e.disabled || e.checked || (e.checked = !0, e.focus(), e.dispatchEvent(new InputEvent("input", {
+				bubbles: !0,
+				composed: !0
+			})));
+		}
+		render() {
+			return n` <slot @slotchange=${this._updateToggle}></slot> `;
+		}
+	};
+})();
+//#endregion
+export { p as t };

package/toggle.js

@@ -1,5 +1,5 @@
-import { t as e } from "./toggle-option.component-BF95HWOF.js";
-import { t } from "./toggle.component-2e_7FeR4.js";
+import { t as e } from "./toggle-option.component-BP9QEwh9.js";
+import { t } from "./toggle.component-BFsrJ98d.js";
 import "./toggle.pure.js";
 t.define(), e.define();
 //#endregion

package/toggle.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./toggle-option.component-BF95HWOF.js";
-import { t } from "./toggle.component-2e_7FeR4.js";
+import { t as e } from "./toggle-option.component-BP9QEwh9.js";
+import { t } from "./toggle.component-BFsrJ98d.js";
 export { t as SbbToggleElement, e as SbbToggleOptionElement };

package/tooltip/tooltip.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../tooltip.component-C5y6zCtF.js";
+import { t as e } from "../tooltip.component-BrXCWlQB.js";
 export { e as SbbTooltipElement };

package/{tooltip.component-C5y6zCtF.js → tooltip.component-BrXCWlQB.js}

@@ -1,23 +1,23 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, isServer as r, unsafeCSS as i } from "lit";
 import { property as a } from "lit/decorators.js";
-import { SbbDisabledMixin as o, SbbEscapableOverlayController as s, SbbOpenCloseBaseElement as c, SbbOverlayPositionController as l, appendAriaElements as u, boxSizingStyles as d, idReference as f, isAndroid as p, isIOS as m, isZeroAnimationDuration as h, queueDomContentLoaded as g, readConfig as _, removeAriaElements as v, sbbOverlayOutsidePointerEventListener as y } from "./core.js";
+import { SbbDisabledMixin as o, SbbEscapableOverlayController as s, SbbOpenCloseBaseElement as c, SbbOverlayPositionController as l, appendAriaElements as u, idReference as d, isAndroid as f, isIOS as p, isZeroAnimationDuration as m, queueDomContentLoaded as h, readConfig as g, removeAriaElements as _, sbbOverlayOutsidePointerEventListener as v } from "./core.js";
 //#region src/elements/tooltip/tooltip.scss?inline
-var b = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spacing-fixed-2x)) );--sbb-tooltip-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );position-area:var(--sbb-overlay-position-area);position-try-fallbacks:var(--sbb-overlay-position-try-fallbacks);display:none;position:fixed;background-color:transparent;pointer-events:var(--sbb-tooltip-pointer-events, all);z-index:var(--sbb-tooltip-z-index, var(--sbb-overlay-default-z-index));animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing);font-size:var(--sbb-tooltip-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);border:none;inset:initial;padding:0;margin:0}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-tooltip-animation-name: open;display:block}:host(:is(:state(state-closing),[state--state-closing])){--sbb-tooltip-animation-name: close;--sbb-tooltip-pointer-events: none}:host(:is([data-position~=block-end],[data-position~=bottom],[data-position^=end])){padding-block-start:var(--sbb-tooltip-gap)}:host(:is([data-position~=block-start],[data-position~=top],[data-position^=start])){padding-block-end:var(--sbb-tooltip-gap)}:host(:is([data-position~=inline-start],[data-position~=inline-end],[data-position~=left],[data-position~=right],[data-position$=\" start\"],[data-position$=\" end\"])){padding-inline:var(--sbb-tooltip-gap)}.sbb-tooltip{box-shadow:var(--sbb-box-shadow-level-5-soft);border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);min-width:var(--sbb-tooltip-min-width);max-width:var(--sbb-tooltip-max-width)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}", x = 500, S = p || m, C = /* @__PURE__ */ new WeakMap(), w = 0, T = (() => {
-	let p = o(c), m = [], T, E = [], D = [], O, k, A;
-	return class extends p {
+var y = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spacing-fixed-2x)) );--sbb-tooltip-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );position-area:var(--sbb-overlay-position-area);position-try-fallbacks:var(--sbb-overlay-position-try-fallbacks);display:none;position:fixed;background-color:transparent;pointer-events:var(--sbb-tooltip-pointer-events, all);z-index:var(--sbb-tooltip-z-index, var(--sbb-overlay-default-z-index));animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing);font-size:var(--sbb-tooltip-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);border:none;inset:initial;padding:0;margin:0}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-tooltip-animation-name: open;display:block}:host(:is(:state(state-closing),[state--state-closing])){--sbb-tooltip-animation-name: close;--sbb-tooltip-pointer-events: none}:host(:is([data-position~=block-end],[data-position~=bottom],[data-position^=end])){padding-block-start:var(--sbb-tooltip-gap)}:host(:is([data-position~=block-start],[data-position~=top],[data-position^=start])){padding-block-end:var(--sbb-tooltip-gap)}:host(:is([data-position~=inline-start],[data-position~=inline-end],[data-position~=left],[data-position~=right],[data-position$=\" start\"],[data-position$=\" end\"])){padding-inline:var(--sbb-tooltip-gap)}.sbb-tooltip{box-shadow:var(--sbb-box-shadow-level-5-soft);border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);min-width:var(--sbb-tooltip-min-width);max-width:var(--sbb-tooltip-max-width)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}", b = 500, x = f || p, S = /* @__PURE__ */ new WeakMap(), C = (() => {
+	let f = o(c), p = [], C, w = [], T = [], E, D, O;
+	return class extends f {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-			T = [f(), a()], O = [a({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+			C = [d(), a()], E = [a({
 				attribute: "open-delay",
 				type: Number
-			})], k = [a({
+			})], D = [a({
 				attribute: "close-delay",
 				type: Number
-			})], A = [a({
+			})], O = [a({
 				attribute: "long-press-close-delay",
 				type: Number
-			})], e(this, null, T, {
+			})], e(this, null, C, {
 				kind: "accessor",
 				name: "trigger",
 				static: !1,
@@ -30,7 +30,7 @@ var b = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spaci
 					}
 				},
 				metadata: t
-			}, E, D), e(this, null, O, {
+			}, w, T), e(this, null, E, {
 				kind: "setter",
 				name: "openDelay",
 				static: !1,
@@ -42,7 +42,7 @@ var b = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spaci
 					}
 				},
 				metadata: t
-			}, null, m), e(this, null, k, {
+			}, null, p), e(this, null, D, {
 				kind: "setter",
 				name: "closeDelay",
 				static: !1,
@@ -54,7 +54,7 @@ var b = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spaci
 					}
 				},
 				metadata: t
-			}, null, m), e(this, null, A, {
+			}, null, p), e(this, null, O, {
 				kind: "setter",
 				name: "longPressCloseDelay",
 				static: !1,
@@ -66,7 +66,7 @@ var b = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spaci
 					}
 				},
 				metadata: t
-			}, null, m), t && Object.defineProperty(this, Symbol.metadata, {
+			}, null, p), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -80,10 +80,10 @@ var b = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spaci
 			this.role = "tooltip";
 		}
 		static {
-			this.styles = [d, i(b)];
+			this.styles = [i(y)];
 		}
 		static {
-			r || g(() => this._initializeTooltipOutlet());
+			r || h(() => this._initializeTooltipOutlet());
 		}
 		#e;
 		get trigger() {
@@ -96,22 +96,22 @@ var b = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spaci
 			this._openDelay = e;
 		}
 		get openDelay() {
-			return this._openDelay ?? _().tooltip?.openDelay ?? 0;
+			return this._openDelay ?? g().tooltip?.openDelay ?? 0;
 		}
 		set closeDelay(e) {
 			this._closeDelay = e;
 		}
 		get closeDelay() {
-			return this._closeDelay ?? _().tooltip?.closeDelay ?? 0;
+			return this._closeDelay ?? g().tooltip?.closeDelay ?? 0;
 		}
 		set longPressCloseDelay(e) {
 			this._longPressCloseDelay = +e;
 		}
 		get longPressCloseDelay() {
-			return this._longPressCloseDelay ?? _().tooltip?.longPressCloseDelay ?? 1500;
+			return this._longPressCloseDelay ?? g().tooltip?.longPressCloseDelay ?? 1500;
 		}
 		constructor() {
-			super(), this.#e = (t(this, m), t(this, E, null)), this._openDelay = (t(this, D), null), this._closeDelay = null, this._triggerElement = null, this._escapableOverlayController = new s(this), this._overlayController = new l(this), this.addEventListener("mouseleave", (e) => {
+			super(), this.#e = (t(this, p), t(this, w, null)), this._openDelay = (t(this, T), null), this._closeDelay = null, this._triggerElement = null, this._escapableOverlayController = new s(this), this._overlayController = new l(this), this.addEventListener("mouseleave", (e) => {
 				(this.state === "opened" || this.state === "opening") && (!e.relatedTarget || !this._triggerElement?.contains(e.relatedTarget)) && this._delayedClose();
 			}, { passive: !0 }), this.addEventListener("overlayOutsidePointer", () => this.close(), { passive: !0 }), this.addEventListener("animationend", (e) => this._onTooltipAnimationEnd(e), { passive: !0 });
 		}
@@ -134,18 +134,18 @@ var b = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spaci
 			e.querySelectorAll("[sbb-tooltip]").forEach((e) => this._handleTooltipTrigger(e));
 		}
 		static _handleTooltipTrigger(e) {
-			let t = e.getAttribute("sbb-tooltip"), n = C.get(e);
+			let t = e.getAttribute("sbb-tooltip"), n = S.get(e);
 			if (t && e.isConnected) {
-				n || (n = document.createElement("sbb-tooltip"), C.set(e, n), this._tooltipOutlet.appendChild(n), n.trigger = e), n.textContent = t, n.openDelay = e.hasAttribute("sbb-tooltip-open-delay") ? +e.getAttribute("sbb-tooltip-open-delay") : null, n.closeDelay = e.hasAttribute("sbb-tooltip-close-delay") ? +e.getAttribute("sbb-tooltip-close-delay") : null;
+				n || (n = document.createElement("sbb-tooltip"), S.set(e, n), this._tooltipOutlet.appendChild(n), n.trigger = e), n.textContent = t, n.openDelay = e.hasAttribute("sbb-tooltip-open-delay") ? +e.getAttribute("sbb-tooltip-open-delay") : null, n.closeDelay = e.hasAttribute("sbb-tooltip-close-delay") ? +e.getAttribute("sbb-tooltip-close-delay") : null;
 				let r = e.hasAttribute("sbb-tooltip-position") ? e.getAttribute("sbb-tooltip-position").split(",").map((e) => e.trim()) : e.tooltipPositions;
 				r && r.length > 0 ? (n.style.setProperty("--sbb-overlay-position-area", r[0]), n.style.setProperty("--sbb-overlay-position-try-fallbacks", r.slice(1).join(", "))) : (n.style.removeProperty("--sbb-overlay-position-area"), n.style.removeProperty("--sbb-overlay-position-try-fallbacks"));
-			} else n && (C.delete(e), n._destroy?.());
+			} else n && (S.delete(e), n._destroy?.());
 		}
 		connectedCallback() {
-			super.connectedCallback(), this.popover = "manual", this.id ||= `sbb-tooltip-${++w}`, this.state = "closed", y.connect(this), this.hasUpdated && this.trigger && this._attach(this.trigger);
+			super.connectedCallback(), this.popover = "manual", this.state = "closed", v.connect(this), this.hasUpdated && this.trigger && this._attach(this.trigger);
 		}
 		disconnectedCallback() {
-			super.disconnectedCallback(), y.disconnect(this), this._detach();
+			super.disconnectedCallback(), v.disconnect(this), this._detach();
 		}
 		requestUpdate(e, t, n) {
 			super.requestUpdate(e, t, n), !r && (!e || e === "trigger") && this.hasUpdated && this._attach(this.trigger);
@@ -178,7 +178,7 @@ var b = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spaci
 			this._triggerElement && this._detach(), this._triggerElement = e, this._triggerElement && (this._triggerElement.ariaDescribedByElements = u(this._triggerElement.ariaDescribedByElements, this), this._addTriggerEventHandlers());
 		}
 		_detach() {
-			this._triggerAbortController?.abort(), this._openStateController?.abort(), this._resetOpenCloseTimeout(), clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._triggerElement &&= (this._triggerElement.ariaDescribedByElements = v(this._triggerElement.ariaDescribedByElements, this), null);
+			this._triggerAbortController?.abort(), this._openStateController?.abort(), this._resetOpenCloseTimeout(), clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._triggerElement &&= (this._triggerElement.ariaDescribedByElements = _(this._triggerElement.ariaDescribedByElements, this), null);
 		}
 		_destroy() {
 			this._detach(), this.remove();
@@ -191,11 +191,11 @@ var b = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spaci
 				signal: this._triggerAbortController.signal,
 				passive: !0
 			};
-			S || (e.addEventListener("mouseenter", () => this._delayedOpen(), t), e.addEventListener("mouseleave", (e) => {
+			x || (e.addEventListener("mouseenter", () => this._delayedOpen(), t), e.addEventListener("mouseleave", (e) => {
 				let t = e.relatedTarget;
 				(!t || t !== this) && this._delayedClose();
 			}, t), e.addEventListener("blur", () => this.close(), t), e.addEventListener("focus", () => this._delayedOpen(), t)), e.addEventListener("touchstart", () => {
-				clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._longPressOpenTimeout = setTimeout(() => this.open(), x);
+				clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._longPressOpenTimeout = setTimeout(() => this.open(), b);
 			}, t), e.addEventListener("touchend", () => {
 				clearTimeout(this._longPressOpenTimeout), this._longPressCloseTimeout = setTimeout(() => this.close(), this.longPressCloseDelay);
 			}, t), e.addEventListener("touchcancel", () => {
@@ -203,7 +203,7 @@ var b = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spaci
 			}, t);
 		}
 		_isZeroAnimationDuration() {
-			return h(this, "--sbb-tooltip-animation-duration");
+			return m(this, "--sbb-tooltip-animation-duration");
 		}
 		_resetOpenCloseTimeout() {
 			clearTimeout(this._openTimeout), clearTimeout(this._closeTimeout);
@@ -218,4 +218,4 @@ var b = ":host{--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spaci
 	};
 })();
 //#endregion
-export { T as t };
+export { C as t };

package/tooltip.js

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

package/tooltip.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./tooltip.component-C5y6zCtF.js";
+import { t as e } from "./tooltip.component-BrXCWlQB.js";
 export { e as SbbTooltipElement };

package/train/train/train.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../train.component-D_ysGCwu.js";
+import { t as e } from "../../train.component-BZ3jtqQ4.js";
 export { e as SbbTrainElement };

package/train/train-blocked-passage/train-blocked-passage.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../train-blocked-passage.component-EET0Kobk.js";
+import { t as e } from "../../train-blocked-passage.component-DxqSh9I8.js";
 export { e as SbbTrainBlockedPassageElement };

package/train/train-formation/train-formation.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../train-formation.component-5AASBGSX.js";
+import { t as e } from "../../train-formation.component-HM0M0FHW.js";
 export { e as SbbTrainFormationElement };

package/train/train-formation-orientation-mixin.js

@@ -0,0 +1,45 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { state as n } from "lit/decorators.js";
+import { SbbPropertyWatcherController as r } from "../core.js";
+//#region src/elements/train/train-formation-orientation-mixin.ts
+var i = (i) => (() => {
+	let a = i, o, s = [], c = [];
+	return class extends a {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+			o = [n()], e(this, null, o, {
+				kind: "accessor",
+				name: "orientation",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "orientation" in e,
+					get: (e) => e.orientation,
+					set: (e, t) => {
+						e.orientation = t;
+					}
+				},
+				metadata: t
+			}, s, c), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		#e = t(this, s, null);
+		get orientation() {
+			return this.#e;
+		}
+		set orientation(e) {
+			this.#e = e;
+		}
+		constructor(...e) {
+			super(...e), t(this, c), this.addController(new r(this, () => this.closest("sbb-train-formation"), { orientation: (e) => {
+				this.orientation && this.internals.states.delete(`orientation-${this.orientation}`), this.orientation = e.orientation, this.orientation && this.internals.states.add(`orientation-${this.orientation}`);
+			} }));
+		}
+	};
+})();
+//#endregion
+export { i as SbbTrainFormationOrientationMixin };

package/train/train-wagon/train-wagon.component.js

@@ -1,2 +1,13 @@
-import { t as e } from "../../train-wagon.component-CLMLEf6I.js";
-export { e as SbbTrainWagonElement };
+import { SbbElement as e } from "../../core.js";
+import { SbbTrainWagonMixin as t } from "../train-wagon-common.js";
+//#region src/elements/train/train-wagon/train-wagon.component.ts
+var n = class extends t(e) {
+	static {
+		this.elementName = "sbb-train-wagon";
+	}
+	render() {
+		return this.renderTemplate();
+	}
+};
+//#endregion
+export { n as SbbTrainWagonElement };

package/train/train-wagon-button/train-wagon-button.component.js

@@ -0,0 +1,10 @@
+import { SbbButtonBaseElement as e } from "../../core.js";
+import { SbbTrainWagonMixin as t } from "../train-wagon-common.js";
+//#region src/elements/train/train-wagon-button/train-wagon-button.component.ts
+var n = class extends t(e) {
+	static {
+		this.elementName = "sbb-train-wagon-button";
+	}
+};
+//#endregion
+export { n as SbbTrainWagonButtonElement };

package/train/train-wagon-common.js

@@ -0,0 +1,2 @@
+import { t as e } from "../train-wagon-common-BH9bSebN.js";
+export { e as SbbTrainWagonMixin };

package/train/train-wagon-link/train-wagon-link.component.js

@@ -0,0 +1,10 @@
+import { SbbLinkBaseElement as e } from "../../core.js";
+import { SbbTrainWagonMixin as t } from "../train-wagon-common.js";
+//#region src/elements/train/train-wagon-link/train-wagon-link.component.ts
+var n = class extends t(e) {
+	static {
+		this.elementName = "sbb-train-wagon-link";
+	}
+};
+//#endregion
+export { n as SbbTrainWagonLinkElement };

package/train-blocked-passage.component-DxqSh9I8.js

@@ -0,0 +1,14 @@
+import { unsafeCSS as e } from "lit";
+import { SbbElement as t } from "./core.js";
+import { SbbTrainFormationOrientationMixin as n } from "./train/train-formation-orientation-mixin.js";
+//#region src/elements/train/train-blocked-passage/train-blocked-passage.scss?inline
+var r = ":host{display:grid;grid-template-areas:\"icon\";align-items:center;width:var(--sbb-train-formation-blocked-passage-dimension);height:var(--_sbb-train-formation-wagon-height)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){width:var(--_sbb-train-formation-wagon-width);height:var(--sbb-train-formation-blocked-passage-dimension)}:host:before,:host:after{content:\"\";grid-area:icon;justify-self:center}:host:before{width:var(--sbb-train-formation-blocked-passage-dimension);height:var(--sbb-train-formation-blocked-passage-dimension);border-radius:50%;background-color:var(--sbb-train-blocked-passage-background-color)}:host:after{width:var(--sbb-train-blocked-passage-icon-bar-width);height:var(--sbb-train-blocked-passage-icon-bar-height);border-radius:var(--sbb-train-blocked-passage-icon-bar-border-radius);background-color:var(--sbb-train-blocked-passage-bar-color)}", i = class extends n(t) {
+	static {
+		this.elementName = "sbb-train-blocked-passage";
+	}
+	static {
+		this.styles = [e(r)];
+	}
+};
+//#endregion
+export { i as t };