@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779781429 → 5.0.0-next.3-dev.1779890843

package/stepper/{step-label/step-label.global.scss → _stepper.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
@@ -35,9 +35,13 @@ $theme: 'standard' !default;
       ),
       $theme
     )};
+  --sbb-stepper-orientation: row;
+  --sbb-stepper-border-width: var(--sbb-border-width-1x);
+  --sbb-stepper-marker-width: var(--sbb-border-width-3x);
+  --sbb-stepper-marker-color: var(--sbb-color-3);
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-step-label-color: ButtonText;
   --sbb-step-label-prefix-border-color: ButtonText;
 }

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/tabs/{common/tab-label-common.global.scss → _tabs.global.scss}

@@ -1,9 +1,26 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
+@mixin tab-label-amount {
+  margin: 0;
+  color: var(--sbb-tab-label-amount-color);
+  font-weight: normal;
+  text-decoration: var(--sbb-tab-label-text-decoration);
+}
+
 // These variables are shared within the `sbb-tab-label` and the `sbb-tab-nav-bar`.
 @mixin base {
+  --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
+  --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
+  --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
+  --sbb-tab-group-content-gap-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-tab-group-content-gap-size-l),
+        'lean': var(--sbb-tab-group-content-gap-size-s),
+      ),
+      $theme
+    )};
   --sbb-tab-label-height: #{sbb.theme-pattern-select(
       (
         'standard': var(--sbb-size-element-m),
@@ -36,3 +53,9 @@ $theme: 'standard' !default;
   --sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);
   --sbb-tab-label-cursor: var(--sbb-cursor-pointer);
 }
+
+@mixin rules {
+  sbb-tab-nav-bar .sbb-tab-amount {
+    @include tab-label-amount;
+  }
+}

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

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

package/tabs.js

@@ -1,5 +1,5 @@
 import { n as e, t } from "./tab-group.component-Dx0xldWI.js";
-import { t as n } from "./tab-label.component-BYssa8XI.js";
+import { t as n } from "./tab-label.component-C5HCrNFB.js";
 import { t as r } from "./tab-nav-bar.component-7j-RCq7p.js";
 import { t as i } from "./tab.component-C5xxMwwX.js";
 import { n as a, t as o } from "./styles-DGAxTLMz.js";

package/tabs.pure.js

@@ -1,5 +1,5 @@
 import { n as e, t } from "./tab-group.component-Dx0xldWI.js";
-import { t as n } from "./tab-label.component-BYssa8XI.js";
+import { t as n } from "./tab-label.component-C5HCrNFB.js";
 import { t as r } from "./tab-nav-bar.component-7j-RCq7p.js";
 import { t as i } from "./tab.component-C5xxMwwX.js";
 import { n as a, t as o } from "./styles-DGAxTLMz.js";

package/tag/{tag/tag.global.scss → _tag.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
@@ -32,7 +32,7 @@ $theme: 'standard' !default;
     )};
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-tag-amount-color: ButtonText;
   --sbb-tag-background-color: Canvas !important;
   --sbb-tag-text-color: ButtonText;

package/tag/tag/tag.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../tag.component-BrKoQeIW.js";
+import { t as e } from "../../tag.component-r8diGGP-.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-ByRxy8UG.js";
+import { t as e } from "../../tag-group.component-CJwbkP70.js";
 export { e as SbbTagGroupElement };

package/{tag-group.component-ByRxy8UG.js → tag-group.component-CJwbkP70.js}

@@ -1,30 +1,27 @@
 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, SbbNamedSlotListMixin as c, forceType as l } from "./core.js";
+import { SbbDisabledMixin as o, SbbElement as s, SbbNamedSlotListMixin as c, forceType as l, getNextElementIndex as u, isArrowKeyPressed as d } from "./core.js";
 //#region src/elements/tag/tag-group/tag-group.scss?inline
-var u = ":host{display:block}.sbb-tag-group__list{display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-3x)}.sbb-tag-group__list>:is(li,span){display:flex;max-width:100%}", d = (() => {
-	let d = o(c(s)), f = [], p, m = [], h = [], g, _ = [], v = [], y, b = [], x = [], S;
-	return class extends d {
-		constructor() {
-			super(...arguments), this.listChildLocalNames = (t(this, f), ["sbb-tag", "div"]), this.#e = t(this, m, ""), this.#t = (t(this, h), t(this, _, !1)), this.#n = (t(this, v), t(this, b, null)), this._value = (t(this, x), null);
-		}
+var f = ":host{display:block}.sbb-tag-group__list{display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-3x)}.sbb-tag-group__list>:is(li,span){display:flex;max-width:100%}", p = (() => {
+	let p = o(c(s)), m = [], h, g = [], _ = [], v, y = [], b = [], x, S = [], C = [], w;
+	return class extends p {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-			p = [l(), a({ attribute: "list-accessibility-label" })], g = [l(), a({ type: Boolean })], y = [a({ reflect: !0 })], S = [a()], e(this, null, p, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+			h = [l(), a({ attribute: "accessibility-label" })], v = [l(), a({ type: Boolean })], x = [a({ reflect: !0 })], w = [a()], e(this, null, h, {
 				kind: "accessor",
-				name: "listAccessibilityLabel",
+				name: "accessibilityLabel",
 				static: !1,
 				private: !1,
 				access: {
-					has: (e) => "listAccessibilityLabel" in e,
-					get: (e) => e.listAccessibilityLabel,
+					has: (e) => "accessibilityLabel" in e,
+					get: (e) => e.accessibilityLabel,
 					set: (e, t) => {
-						e.listAccessibilityLabel = t;
+						e.accessibilityLabel = t;
 					}
 				},
 				metadata: t
-			}, m, h), e(this, null, g, {
+			}, g, _), e(this, null, v, {
 				kind: "accessor",
 				name: "multiple",
 				static: !1,
@@ -37,7 +34,7 @@ var u = ":host{display:block}.sbb-tag-group__list{display:flex;flex-wrap:wrap;ga
 					}
 				},
 				metadata: t
-			}, _, v), e(this, null, y, {
+			}, y, b), e(this, null, x, {
 				kind: "accessor",
 				name: "size",
 				static: !1,
@@ -50,7 +47,7 @@ var u = ":host{display:block}.sbb-tag-group__list{display:flex;flex-wrap:wrap;ga
 					}
 				},
 				metadata: t
-			}, b, x), e(this, null, S, {
+			}, S, C), e(this, null, w, {
 				kind: "setter",
 				name: "value",
 				static: !1,
@@ -62,7 +59,7 @@ var u = ":host{display:block}.sbb-tag-group__list{display:flex;flex-wrap:wrap;ga
 					}
 				},
 				metadata: t
-			}, null, f), t && Object.defineProperty(this, Symbol.metadata, {
+			}, null, m), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -73,13 +70,13 @@ var u = ":host{display:block}.sbb-tag-group__list{display:flex;flex-wrap:wrap;ga
 			this.elementName = "sbb-tag-group";
 		}
 		static {
-			this.styles = [i(u)];
+			this.styles = [i(f)];
 		}
 		#e;
-		get listAccessibilityLabel() {
+		get accessibilityLabel() {
 			return this.#e;
 		}
-		set listAccessibilityLabel(e) {
+		set accessibilityLabel(e) {
 			this.#e = e;
 		}
 		#t;
@@ -109,8 +106,26 @@ var u = ":host{display:block}.sbb-tag-group__list{display:flex;flex-wrap:wrap;ga
 		get tags() {
 			return Array.from(this.querySelectorAll?.("sbb-tag") ?? []);
 		}
+		constructor() {
+			super(), this.listChildLocalNames = (t(this, m), ["sbb-tag", "div"]), this.#e = t(this, g, ""), this.#t = (t(this, _), t(this, y, !1)), this.#n = (t(this, b), t(this, S, null)), this._value = (t(this, C), null), this.addEventListener?.("keydown", (e) => this._handleArrowKeyDown(e));
+		}
 		willUpdate(e) {
-			super.willUpdate(e), e.has("value") && !this.hasUpdated && this._value && this._applyValueToTags(this.value), e.has("disabled") && this.tags.forEach((e) => e.requestUpdate?.("disabled")), (e.has("listChildren") || e.has("multiple")) && !this.multiple && this.tags.filter((e) => e.checked).slice(1).forEach((e) => e.checked = !1), e.has("listAccessibilityLabel") && (this.internals.role = this.listAccessibilityLabel ? null : "group");
+			super.willUpdate(e), e.has("value") && !this.hasUpdated && this._value && this._applyValueToTags(this.value), e.has("disabled") && this.tags.forEach((e) => e.requestUpdate?.("disabled")), (e.has("listChildren") || e.has("multiple")) && (this.multiple ? e.has("multiple") && this._enabledTags().forEach((e) => e.tabIndex = 0) : (this.tags.filter((e) => e.checked).slice(1).forEach((e) => e.checked = !1), this.updateExclusiveTabIndex())), (e.has("accessibilityLabel") || e.has("multiple")) && (this.multiple ? (this.internals.role = this.accessibilityLabel ? null : "group", this.internals.ariaLabel = null) : (this.internals.role = "radiogroup", this.internals.ariaLabel = this.accessibilityLabel));
+		}
+		_enabledTags() {
+			return this.tags.filter((e) => !e.disabled);
+		}
+		updateExclusiveTabIndex() {
+			let e = this._enabledTags(), t = e.find((e) => e.checked) ?? e[0];
+			e.forEach((e) => e.tabIndex = e === t ? 0 : -1);
+		}
+		_handleArrowKeyDown(e) {
+			if (this.multiple || !d(e)) return;
+			e.preventDefault();
+			let t = this._enabledTags(), n = t.indexOf(e.target);
+			if (n === -1) return;
+			let r = t[u(e, n, t.length)];
+			t.forEach((e) => e.tabIndex = e === r ? 0 : -1), r.focus();
 		}
 		_applyValueToTags(e) {
 			let t = this.tags;
@@ -127,11 +142,11 @@ var u = ":host{display:block}.sbb-tag-group__list{display:flex;flex-wrap:wrap;ga
 			return n`
       ${this.renderList({
 				class: "sbb-tag-group__list",
-				ariaLabel: this.listAccessibilityLabel
+				ariaLabel: this.multiple ? this.accessibilityLabel : void 0
 			})}
     `;
 		}
 	};
 })();
 //#endregion
-export { d as t };
+export { p as t };

package/{tag.component-BrKoQeIW.js → tag.component-r8diGGP-.js}

@@ -116,13 +116,20 @@ var d = ":host{--sbb-tag-animation-duration: var( --sbb-disable-animation-durati
 			this.#r = e;
 		}
 		constructor() {
-			super(), t(this, w), this.addEventListener?.("click", () => this._handleClick()), this.addController(new s(this, () => this._tagGroup(), { size: (e) => {
-				this.size = e.size;
-			} }));
+			super(), t(this, w), this.addEventListener?.("click", () => this._handleClick()), this.addController(new s(this, () => this._tagGroup(), {
+				multiple: () => this._updateAriaRole(),
+				size: (e) => {
+					this.size = e.size;
+				}
+			}));
 		}
 		_tagGroup() {
 			return this.closest?.("sbb-tag-group") ?? null;
 		}
+		_updateAriaRole() {
+			let e = this._tagGroup();
+			e && !e.multiple ? (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`, this.internals.ariaPressed = null) : (this.internals.role = "button", this.internals.ariaChecked = null, this.internals.ariaPressed = `${this.checked}`);
+		}
 		isDisabledExternally() {
 			return this._tagGroup()?.disabled ?? !1;
 		}
@@ -135,9 +142,11 @@ var d = ":host{--sbb-tag-animation-duration: var( --sbb-disable-animation-durati
 			})), this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new Event("didChange", { bubbles: !0 })));
 		}
 		willUpdate(e) {
-			super.willUpdate(e), e.has("checked") && (this.internals.ariaPressed = `${this.checked}`, this.toggleState("checked", this.checked), this.updateFormValue());
+			super.willUpdate(e);
 			let t = this._tagGroup();
-			t && !t.multiple && e.has("checked") && this.checked && t?.tags.filter((e) => e !== this).forEach((e) => e.checked = !1);
+			e.has("checked") && (this._updateAriaRole(), this.toggleState("checked", this.checked), this.updateFormValue()), t && !t.multiple && e.has("checked") && (this.checked ? t.tags.forEach((e) => {
+				e.tabIndex = e === this ? 0 : -1, e.checked = e === this;
+			}) : t.tags.some((e) => e.checked) || t.updateExclusiveTabIndex());
 		}
 		formResetCallback() {
 			this.checked = this.hasAttribute("checked");

package/tag.js

@@ -1,5 +1,5 @@
-import { t as e } from "./tag-group.component-ByRxy8UG.js";
-import { t } from "./tag.component-BrKoQeIW.js";
+import { t as e } from "./tag-group.component-CJwbkP70.js";
+import { t } from "./tag.component-r8diGGP-.js";
 import "./tag.pure.js";
 t.define(), e.define();
 //#endregion

package/tag.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./tag-group.component-ByRxy8UG.js";
-import { t } from "./tag.component-BrKoQeIW.js";
+import { t as e } from "./tag-group.component-CJwbkP70.js";
+import { t } from "./tag.component-r8diGGP-.js";
 export { t as SbbTagElement, e as SbbTagGroupElement };

package/teaser/_teaser.global.scss

@@ -0,0 +1,51 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-teaser-scale-hover: 1.02;
+  --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
+  --sbb-teaser-flex-direction: row;
+  --sbb-teaser-align-items: center;
+  --sbb-teaser-font-size: var(--sbb-text-font-size-s);
+  --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
+  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
+  --sbb-teaser-image-width: #{sbb.px-to-rem-build(300)};
+}
+
+@mixin rules {
+  // Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
+  // Apply the brightness effect on mouse hover
+  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
+    --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
+    --sbb-teaser-image-animation-duration: var(
+      --sbb-disable-animation-duration,
+      var(--sbb-animation-duration-4x)
+    );
+    --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
+
+    &:hover {
+      @include sbb.hover-mq($hover: true) {
+        --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
+      }
+    }
+
+    :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      // Although only the teaser has a scale property, we do it here, because this rule is
+      // more specific and overrides would not be respected.
+      will-change: filter, scale;
+      filter: brightness(var(--sbb-teaser-image-brightness, 1));
+      transition:
+        filter,
+        scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
+    }
+  }
+
+  sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+    --sbb-image-object-fit: cover;
+    --sbb-image-aspect-ratio: 4 / 3;
+
+    // The transition of the scale is done by the global rules in core.scss
+    scale: var(--sbb-teaser-scale, 1);
+  }
+}

package/teaser-hero/{teaser-hero.global.scss → _teaser-hero.global.scss}

@@ -24,4 +24,6 @@ $theme: 'standard' !default;
       width: 100%;
     }
   }
+
+  // Some rules are shared with sbb-teaser and published there.
 }

package/teaser-panel/{teaser-panel.global.scss → _teaser-panel.global.scss}

@@ -17,14 +17,14 @@ $theme: 'standard' !default;
   --sbb-panel-animation-easing: var(--sbb-animation-easing);
 }
 
-@mixin base-breakpoint-large {
+@mixin breakpoint-large {
   --sbb-panel-width: #{sbb.px-to-rem-build(321)};
   --sbb-panel-inner-height: #{sbb.px-to-rem-build(240.11)};
   --sbb-panel-triangle-height: #{sbb.px-to-rem-build(47.45)};
   --sbb-panel-font-size: var(--sbb-typo-scale-2x);
 }
 
-@mixin base-breakpoint-ultra {
+@mixin breakpoint-ultra {
   --sbb-panel-width: #{sbb.px-to-rem-build(428)};
   --sbb-panel-inner-height: #{sbb.px-to-rem-build(320.38)};
   --sbb-panel-triangle-height: #{sbb.px-to-rem-build(63.31)};

package/teaser-product/{common/teaser-product-common.global.scss → _teaser-product.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
@@ -25,7 +25,7 @@ $theme: 'standard' !default;
   --sbb-teaser-product-footer-padding-block-end: 0;
 }
 
-@mixin base-breakpoint-large {
+@mixin breakpoint-large {
   --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l) 0;
   --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-xl);
   --sbb-teaser-product-content-align-content: center;
@@ -47,4 +47,6 @@ $theme: 'standard' !default;
       place-self: stretch;
     }
   }
+
+  // Some rules are shared with sbb-teaser and published there.
 }

package/time-input/{time-input.global.scss → _time-input.global.scss}

@@ -6,6 +6,6 @@ $theme: 'standard' !default;
   --sbb-time-input-max-width: #{sbb.px-to-rem-build(58)};
 }
 
-@mixin base-breakpoint-large {
+@mixin breakpoint-large {
   --sbb-time-input-max-width: #{sbb.px-to-rem-build(65)};
 }

package/timetable-form/{timetable-form/timetable-form.global.scss → _timetable-form.global.scss}

@@ -1,10 +1,20 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
 @mixin base {
   --sbb-timetable-form-background-color: var(--sbb-background-color-1);
   --sbb-timetable-form-border-radius: var(--sbb-border-radius-4x);
+  --sbb-timetable-form-details-border-block-start: var(--sbb-border-width-1x) solid
+    var(--sbb-border-color-4-inverted);
+  --sbb-timetable-form-details-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-timetable-form-details-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-timetable-form-details-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-timetable-form-details-horizontal-divider-height: 1.5rem;
+  --sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);
+  --sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1);
+  --sbb-timetable-form-field-route-via-icon-width: var(--sbb-size-icon-ui-small);
+  --sbb-timetable-form-field-route-via-after-dimension: #{sbb.px-to-rem-build(7)};
 }
 
 @mixin rules {

package/title/{title.global.scss → _title.global.scss}

@@ -2,6 +2,10 @@
 
 $theme: 'standard' !default;
 
+@mixin base {
+  --sbb-title-color: var(--sbb-color-3);
+}
+
 @mixin rules {
   // In smaller title font-sizes, the space after the title is smaller than the default paragraph space before.
   // Due to margin collapsing, the wrong paragraph space wins.

package/toggle/{toggle/toggle.global.scss → _toggle.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
@@ -30,9 +30,13 @@ $theme: 'standard' !default;
   --sbb-toggle-selected-option-border-style: solid;
   --sbb-toggle-selected-option-border-color: var(--sbb-border-color-5);
   --sbb-toggle-selected-option-background-color: var(--sbb-background-color-1);
+  --sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
+  --sbb-toggle-option-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-toggle-option-font-size: var(--sbb-text-font-size-xs);
+  --sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
   --sbb-toggle-selected-option-border-color: Highlight;
 }

package/toggle-check/{toggle-check.global.scss → _toggle-check.global.scss}

@@ -26,7 +26,7 @@ $theme: 'standard' !default;
   --sbb-toggle-check-shadow: var(--sbb-box-shadow-level-5-hard);
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-toggle-check-background-color: CanvasText;
   --sbb-toggle-check-circle-background-color: Canvas;
 }

package/train/{train-wagon-common.global.scss → _train.global.scss}

@@ -3,6 +3,27 @@
 $theme: 'standard' !default;
 
 @mixin base {
+  --sbb-train-blocked-passage-background-color: var(--sbb-color-error);
+  --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
+  --sbb-train-blocked-passage-icon-bar-width: #{sbb.px-to-rem-build(10)};
+  --sbb-train-blocked-passage-icon-bar-height: #{sbb.px-to-rem-build(4)};
+  --sbb-train-blocked-passage-icon-bar-border-radius: var(--sbb-border-radius-1x);
+  --sbb-train-formation-wagon-dimension-short: #{sbb.px-to-rem-build(36)};
+  --sbb-train-formation-wagon-dimension-long: #{sbb.px-to-rem-build(84)};
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-train-formation-sector-line-color: light-dark(
+    var(--sbb-color-cement),
+    var(--sbb-color-smoke)
+  );
+  --sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);
+  --sbb-train-formation-blocked-passage-dimension: #{sbb.px-to-rem-build(16)};
+  --sbb-train-formation-text-color: var(--sbb-color-3);
+  --sbb-train-formation-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-train-formation-sector-padding: var(--sbb-spacing-fixed-1x);
+  --sbb-train-formation-sector-margin: var(--sbb-spacing-fixed-2x);
+  --sbb-train-formation-padding: var(--sbb-spacing-fixed-1x);
+  --_sbb-train-formation-flex-direction: row;
+  --_sbb-train-formation-flex-direction-inverted: column;
   --sbb-train-wagon-font-size: var(--sbb-text-font-size-xxs);
   --sbb-train-wagon-shape-color: var(--sbb-color-3);
   --sbb-train-wagon-vertical-gap: #{sbb.px-to-rem-build(2)};
@@ -38,5 +59,8 @@ $theme: 'standard' !default;
 }
 
 @mixin forced-colors {
+  --sbb-train-blocked-passage-background-color: CanvasText;
+  --sbb-train-blocked-passage-bar-color: Canvas;
+  --sbb-train-formation-sector-line-color: CanvasText;
   --sbb-train-wagon-shape-color: CanvasText;
 }