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

package/core/overlay/position.js

@@ -31,10 +31,10 @@ function n(t, n, r, i) {
 		vertical: "below"
 	}, y = `${m - a}px`;
 	i?.centered && u - 16 + c.width / 2 > l.offsetWidth / 2 && f - 16 > _ / 2 && (h -= _ /= 2, v.horizontal = "center"), f < _ && u > _ && (h -= _, v.horizontal = "end"), o && v.horizontal !== "center" && c.width / 2 < o && (h += o * (v.horizontal === "start" ? -1 : 1)), (u < _ && f < _ || document.documentElement.clientWidth < l.offsetWidth) && (h = document.documentElement.clientWidth / 2 - l.offsetWidth / 2);
-	let b = m - a < l.scrollHeight && p - a > (s ? l.clientHeight : l.scrollHeight) || p > m && m - a < l.clientHeight && !s;
-	!i?.forceBelow && (i?.forceAbove || b) && (g = p < l.scrollHeight ? g - c.height - p - a : d - l.clientHeight - a, y = `${p - a}px`, v.vertical = "above");
-	let x = r.getBoundingClientRect();
-	return x.left < 0 && (h -= x.left), x.top < 0 && (g -= x.top), {
+	let b = m - a >= l.scrollHeight, x = p - a >= (s ? l.clientHeight : l.scrollHeight), S = !b && (x || p > m);
+	!i?.forceBelow && (i?.forceAbove || S) && (g = p < l.scrollHeight ? g - c.height - p - a : d - l.clientHeight - a, y = `${p - a}px`, v.vertical = "above");
+	let C = r.getBoundingClientRect();
+	return C.left < 0 && (h -= C.left), C.top < 0 && (g -= C.top), {
 		top: g,
 		left: h,
 		maxHeight: y,

package/core/styles/a11y.scss

@@ -1,15 +1,10 @@
 @use './mixins/a11y';
+@use './screen-reader-only';
 
-.sbb-screen-reader-only {
-  @include a11y.screen-reader-only;
-}
-
-.sbb-focus-outline:focus-visible {
+:is(.sbb-focus-outline, .sbb-focus-outline-dark):focus-visible {
   @include a11y.focus-outline;
 }
 
 .sbb-focus-outline-dark:focus-visible {
-  @include a11y.focus-outline;
-
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
 }

package/core/styles/core.scss

@@ -254,6 +254,15 @@ $theme: 'standard' !default;
 @use '../../tabs/common/tab-group-common.global' as tab-group-common with (
   $theme: $theme
 );
+@use '../../train/train-blocked-passage/train-blocked-passage.global' as train-blocked-passage with (
+  $theme: $theme
+);
+@use '../../train/train-formation/train-formation.global' as train-formation with (
+  $theme: $theme
+);
+@use '../../train/train-wagon-common.global' as train-wagon-common with (
+  $theme: $theme
+);
 @use '../../tabs/common/tab-label-common.global' as tab-label-common with (
   $theme: $theme
 );
@@ -292,6 +301,12 @@ $theme: 'standard' !default;
 @use '../../time-input/time-input.global' as time-input with (
   $theme: $theme
 );
+@use '../../title/title-common.global' as title-common with (
+  $theme: $theme
+);
+@use '../../title/title.global' as title with (
+  $theme: $theme
+);
 @use '../../toggle-check/toggle-check.global' as toggle-check with (
   $theme: $theme
 );
@@ -393,6 +408,9 @@ $theme: 'standard' !default;
   @include stepper.base;
   @include tab-group-common.base;
   @include tab-label-common.base;
+  @include train-blocked-passage.base;
+  @include train-formation.base;
+  @include train-wagon-common.base;
   @include tag.base;
   @include teaser.base;
   @include teaser-hero.base;
@@ -403,6 +421,8 @@ $theme: 'standard' !default;
   @include timetable-form-field.base;
   @include timetable-occupancy.base;
   @include time-input.base;
+  @include title-common.base;
+  @include title.base;
   @include toggle-check.base;
   @include toggle.base;
   @include toggle-option.base;
@@ -430,13 +450,11 @@ $theme: 'standard' !default;
     @include tag.base-forced-colors;
     @include toggle-check.base-forced-colors;
     @include toggle.base-forced-colors;
+    @include train-blocked-passage.forced-colors;
+    @include train-formation.forced-colors;
+    @include train-wagon-common.forced-colors;
   }
 
-  // Train formation
-  --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
-  --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
-  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
-
   // Overlay
   --sbb-overlay-default-z-index: 1000;
 
@@ -447,31 +465,6 @@ $theme: 'standard' !default;
   // Infinity border radius, can be used to achieve rounded border on start and end
   --sbb-border-radius-infinity: calc(infinity * 1px);
 
-  // TODO: Remove complete block when new lean theme is complete
-  // TODO: Also remove all occurrences of the variables in lyne-components (e.g. --sbb-title-font-size-level-1-lean)
-  // Only render the block in standard theme as fallback for CSS class usage
-  @if not string.index($theme, 'lean') {
-    &.sbb-lean {
-      --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
-      --sbb-title-font-size-level-2-lean: var(--sbb-heading-font-size-3);
-      --sbb-title-font-size-level-3-lean: var(--sbb-heading-font-size-4);
-      --sbb-title-font-size-level-4-lean: var(--sbb-heading-font-size-5);
-      --sbb-title-font-size-level-5-lean: var(--sbb-heading-font-size-6);
-      --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-75x);
-      --sbb-heading-margin-block-1-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-fixed-3x);
-      --sbb-heading-margin-block-2-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-fixed-3x);
-      --sbb-heading-margin-block-3-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-responsive-xxxs);
-      --sbb-heading-margin-block-4-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-fixed-2x);
-      --sbb-heading-margin-block-5-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-fixed-1x);
-      --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
-    }
-  }
-
   // When the input modality is either mouse or touch,
   // the focus outline should be hidden.
   // We achieve this by setting the outline style to none.
@@ -504,14 +497,6 @@ $theme: 'standard' !default;
     @include teaser-panel.base-breakpoint-large;
     @include teaser-product-common.base-breakpoint-large;
     @include time-input.base-breakpoint-large;
-
-    // TODO: Remove complete block when new lean theme is complete
-    // Only render the block in standard theme as fallback for CSS class usage
-    @if not string.index($theme, 'lean') {
-      &.sbb-lean {
-        --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
-      }
-    }
   }
 
   @include mediaqueries.mq($from: ultra) {
@@ -653,39 +638,6 @@ img {
   }
 }
 
-// TODO: move to train formation after CSS refactoring
-sbb-train-formation:has(sbb-train[direction-label]) {
-  --sbb-train-formation-reserve-spacing-display: block;
-}
-
-// TODO: move to train formation after CSS refactoring
-sbb-train-formation:has(sbb-train-wagon[sector]) {
-  --sbb-train-formation-show-sectors-gap: 1;
-}
-
-// TODO: move to train formation after CSS refactoring
-sbb-train-formation:not(:has(sbb-train-wagon[label])) {
-  --sbb-train-formation-wagon-label-display: none;
-}
-
-// TODO: Move to sbb-train-wagon after CSS refactoring
-sbb-train-formation[view='side'] sbb-train-wagon {
-  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M12.5,0.5 h55 a12,12 0 0 1 12,12 v15 a12,12 0 0 1 -12,12 h-55 a12,12 0 0 1 -12,-12 v-15 a12,12 0 0 1 12,-12 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
-  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='11.5' stroke='%23000000'/%3E%3Cpath d='M76 4L4 36' stroke='%23000000'/%3E%3Cpath d='M76 36L4 4' stroke='%23000000'/%3E%3C/svg%3E");
-  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H68C74.3513 0.5 79.5 5.64873 79.5 12V28C79.5 34.3513 74.3513 39.5 68 39.5H11.922C2.93614 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
-  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0639 39.5 68.078 39.5H11.922C2.93615 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
-  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0638 39.5 68.0779 39.5H12C5.64873 39.5 0.5 34.3513 0.5 28V12Z' stroke='%23000000'/%3E%3C/svg%3E");
-}
-
-// TODO: Move to sbb-train-wagon after CSS refactoring
-sbb-train-formation[view='top'] sbb-train-wagon {
-  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h63 a8,8 0 0 1 8,8 v23 a8,8 0 0 1 -8,8 h-63 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
-  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='7.5' stroke='%23000000'/%3E%3Cpath d='M77.5 2.5L2.5 37.5' stroke='%23000000'/%3E%3Cpath d='M77.5 37.5L2.5 2.5' stroke='%23000000'/%3E%3C/svg%3E");
-  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath transform='translate(80,40) rotate(180)' d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
-  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
-  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;

package/core/styles/mixins/card.scss

@@ -155,9 +155,6 @@
     var(--sbb-focus-outline-color-default),
     var(--sbb-focus-outline-color-dark)
   );
-
-  // Propagate card text color to title text color to ensure correct color in forced colors mode
-  --sbb-title-text-color-normal-override: var(--sbb-card-color);
   --sbb-card-animation-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-1x)
@@ -183,6 +180,11 @@
     border-radius: var(--sbb-card-border-radius);
     pointer-events: none;
   }
+
+  @include a11y.if-forced-colors {
+    // Propagate card text color to title text color to ensure correct color in forced colors mode
+    --sbb-title-color: var(--sbb-card-color);
+  }
 }
 
 @mixin card--hover {

package/core/styles/mixins/scrollbar.scss

@@ -80,10 +80,6 @@
   --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
 }
 
-@mixin scrollbar-variables--track-invisible {
-  --sbb-scrollbar-track-color: transparent;
-}
-
 @mixin scrollbar-variables($size: thin, $negative: false, $track-visible: false) {
   --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 
@@ -103,8 +99,6 @@
     @include scrollbar-variables--color-negative-track-visible;
   } @else if $track-visible {
     @include scrollbar-variables--color-positive-track-visible;
-  } @else {
-    @include scrollbar-variables--track-invisible;
   }
 }
 

package/core/styles/mixins/typo.scss

@@ -13,70 +13,52 @@
 }
 
 @mixin title--level-1 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-1-lean, var(--sbb-heading-font-size-1));
+  --sbb-title-font-size: var(--sbb-heading-font-size-1);
 }
 
 @mixin title--level-1-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-1-lean,
-    var(--sbb-heading-margin-block-1)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-1);
 }
 
 @mixin title--level-2 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-2-lean, var(--sbb-heading-font-size-2));
+  --sbb-title-font-size: var(--sbb-heading-font-size-2);
 }
 
 @mixin title--level-2-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-2-lean,
-    var(--sbb-heading-margin-block-2)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-2);
 }
 
 @mixin title--level-3 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-3-lean, var(--sbb-heading-font-size-3));
+  --sbb-title-font-size: var(--sbb-heading-font-size-3);
 }
 
 @mixin title--level-3-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-3-lean,
-    var(--sbb-heading-margin-block-3)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-3);
 }
 
 @mixin title--level-4 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4));
+  --sbb-title-font-size: var(--sbb-heading-font-size-4);
 }
 
 @mixin title--level-4-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-4-lean,
-    var(--sbb-heading-margin-block-4)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-4);
 }
 
 @mixin title--level-5 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-5-lean, var(--sbb-heading-font-size-5));
+  --sbb-title-font-size: var(--sbb-heading-font-size-5);
 }
 
 @mixin title--level-5-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-5-lean,
-    var(--sbb-heading-margin-block-5)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-5);
 }
 
 @mixin title--level-6 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));
+  --sbb-title-font-size: var(--sbb-heading-font-size-6);
   --sbb-title-line-height: var(--sbb-typo-line-height-text);
 }
 
 @mixin title--level-6-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-6-lean,
-    var(--sbb-heading-margin-block-6)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-6);
 }
 
 @mixin title-1($exclude-spacing: false) {
@@ -128,7 +110,7 @@
 }
 
 @mixin title--negative {
-  --sbb-title-text-color-normal: var(--sbb-color-3-negative);
+  --sbb-title-color: var(--sbb-color-3-negative);
 }
 
 // ----------------------------------------------------------------------------------------------------

package/core/styles/screen-reader-only.scss

@@ -0,0 +1,5 @@
+@use './mixins/a11y';
+
+.sbb-screen-reader-only {
+  @include a11y.screen-reader-only;
+}

package/core/styles/scrollbar.scss

@@ -10,37 +10,32 @@
   .sbb-scrollbar-thick-track-visible,
   .sbb-scrollbar-thick-negative-track-visible
 ) {
+  @include scrollbar.scrollbar-variables;
   @include scrollbar.scrollbar-rules;
 }
 
-.sbb-scrollbar {
-  @include scrollbar.scrollbar-variables($size: thin, $negative: false, $track-visible: false);
-}
-
-.sbb-scrollbar-negative {
-  @include scrollbar.scrollbar-variables($size: thin, $negative: true, $track-visible: false);
-}
-
-.sbb-scrollbar-thick {
-  @include scrollbar.scrollbar-variables($size: thick, $negative: false, $track-visible: false);
-}
-
-.sbb-scrollbar-thick-negative {
-  @include scrollbar.scrollbar-variables($size: thick, $negative: true, $track-visible: false);
-}
-
-.sbb-scrollbar-track-visible {
-  @include scrollbar.scrollbar-variables($size: thin, $negative: false, $track-visible: true);
+:is(
+  .sbb-scrollbar-negative,
+  .sbb-scrollbar-thick-negative,
+  .sbb-scrollbar-negative-track-visible,
+  .sbb-scrollbar-thick-negative-track-visible
+) {
+  @include scrollbar.scrollbar-variables--color-negative;
 }
 
-.sbb-scrollbar-negative-track-visible {
-  @include scrollbar.scrollbar-variables($size: thin, $negative: true, $track-visible: true);
+:is(
+  .sbb-scrollbar-thick-negative,
+  .sbb-scrollbar-thick,
+  .sbb-scrollbar-thick-track-visible,
+  .sbb-scrollbar-thick-negative-track-visible
+) {
+  @include scrollbar.scrollbar-variables--size-thick;
 }
 
-.sbb-scrollbar-thick-track-visible {
-  @include scrollbar.scrollbar-variables($size: thick, $negative: false, $track-visible: true);
+:is(.sbb-scrollbar-track-visible, .sbb-scrollbar-thick-track-visible) {
+  @include scrollbar.scrollbar-variables--color-positive-track-visible;
 }
 
-.sbb-scrollbar-thick-negative-track-visible {
-  @include scrollbar.scrollbar-variables($size: thick, $negative: true, $track-visible: true);
+:is(.sbb-scrollbar-negative-track-visible, .sbb-scrollbar-thick-negative-track-visible) {
+  @include scrollbar.scrollbar-variables--color-negative-track-visible;
 }

package/core/styles/styles.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../styles-swTeDfst.js";
-export { t as boxSizingStyles, e as hostScrollbarStyles };
+import { n as e, r as t, t as n } from "../../styles-OHFAsnJq.js";
+export { n as hostScrollbarStyles, e as screenReaderOnlyStyles, t as scrollbarStyles };

package/core.css

@@ -1812,6 +1812,59 @@ slot[name=error]::slotted(*) {
   --sbb-tab-label-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);
   --sbb-tab-label-cursor: var(--sbb-cursor-pointer);
+  --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: 0.625rem;
+  --sbb-train-blocked-passage-icon-bar-height: 0.25rem;
+  --sbb-train-blocked-passage-icon-bar-border-radius: var(--sbb-border-radius-1x);
+  --sbb-train-formation-wagon-dimension-short: 2.25rem;
+  --sbb-train-formation-wagon-dimension-long: 5.25rem;
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-train-formation-sector-line-color: var(--sbb-color-cement);
+  --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: 1rem;
+  --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: 0.125rem;
+  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-3x);
+  --sbb-train-wagon-border-width: var(--sbb-border-width-1x);
+  --sbb-train-wagon-main-icon-height: 1.25rem;
+  --sbb-train-wagon-attribute-icon-gap: 0.125rem;
+  --sbb-train-wagon-attribute-icon-height: 0.875rem;
+  --sbb-train-wagon-attribute-icon-color: var(--sbb-color-1);
+  --sbb-train-wagon-attributes-max-width: 3.4375rem;
+  --sbb-train-wagon-attributes-mean-width: 1.75rem;
+  --sbb-train-wagon-occupancy-height: 0.75rem;
+  --sbb-train-wagon-background-color-hover: var(--sbb-background-color-3);
+  --sbb-train-wagon-background-color-active: var(--sbb-background-color-4);
+  --sbb-train-wagon-border-radius: var(--sbb-border-radius-6x);
+  --sbb-train-wagon-information-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-train-wagon-information-min-width: 1.875rem;
+  --sbb-train-wagon-class-dimension: 1.125rem;
+  --sbb-train-wagon-class-color: var(--sbb-color-anthracite);
+  --sbb-train-wagon-class-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-graphite));
+  --sbb-train-wagon-class-background-color: var(--sbb-background-color-3);
+  --sbb-train-wagon-class-border-width: var(--sbb-border-width-1x);
+  --sbb-train-wagon-class-border: var(--sbb-train-wagon-class-border-width) solid
+    var(--sbb-color-graphite);
+  --sbb-train-wagon-class-border: var(--sbb-train-wagon-class-border-width) solid
+    light-dark(var(--sbb-color-graphite), var(--sbb-color-anthracite));
+  --sbb-train-wagon-class-border-radius: var(--sbb-border-radius-2x);
+  --sbb-train-wagon-class-font-weight: bold;
+  --sbb-train-wagon-class-first-thickness: 0.25rem;
+  --sbb-train-wagon-class-first-color: var(--sbb-color-lemon);
+  --sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
   --sbb-tag-animation-easing: var(--sbb-animation-easing);
   --sbb-tag-background-color: var(--sbb-background-color-1);
   --sbb-tag-border-color: var(--sbb-border-color-4-inverted);
@@ -1884,6 +1937,9 @@ slot[name=error]::slotted(*) {
   --sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
   --sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
   --sbb-time-input-max-width: 3.625rem;
+  --sbb-title-font-size: var(--sbb-heading-font-size-1);
+  --sbb-title-color: var(--sbb-color-3);
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-1);
   --sbb-toggle-check-font-size: var(--sbb-text-font-size-s);
   --sbb-toggle-check-color: var(--sbb-color-2);
   --sbb-toggle-check-checked-color: var(--sbb-color-primary);
@@ -2009,36 +2065,18 @@ slot[name=error]::slotted(*) {
     --sbb-toggle-check-circle-background-color: Canvas;
     --sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
     --sbb-toggle-selected-option-border-color: Highlight;
+    --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;
   }
 }
 :root {
-  --sbb-train-formation-wagon-width: 5rem;
-  --sbb-train-formation-wagon-height: 2.5rem;
-  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
   --sbb-overlay-default-z-index: 1000;
   --sbb-cursor-default: default;
   --sbb-cursor-pointer: pointer;
   --sbb-border-radius-infinity: calc(infinity * 1px);
 }
-:root.sbb-lean {
-  --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
-  --sbb-title-font-size-level-2-lean: var(--sbb-heading-font-size-3);
-  --sbb-title-font-size-level-3-lean: var(--sbb-heading-font-size-4);
-  --sbb-title-font-size-level-4-lean: var(--sbb-heading-font-size-5);
-  --sbb-title-font-size-level-5-lean: var(--sbb-heading-font-size-6);
-  --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-75x);
-  --sbb-heading-margin-block-1-lean: var(--sbb-spacing-responsive-s)
-    var(--sbb-spacing-fixed-3x);
-  --sbb-heading-margin-block-2-lean: var(--sbb-spacing-responsive-s)
-    var(--sbb-spacing-fixed-3x);
-  --sbb-heading-margin-block-3-lean: var(--sbb-spacing-responsive-s)
-    var(--sbb-spacing-responsive-xxxs);
-  --sbb-heading-margin-block-4-lean: var(--sbb-spacing-responsive-s)
-    var(--sbb-spacing-fixed-2x);
-  --sbb-heading-margin-block-5-lean: var(--sbb-spacing-responsive-s)
-    var(--sbb-spacing-fixed-1x);
-  --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
-}
 :root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
   --sbb-focus-outline-style: none;
 }
@@ -2140,9 +2178,6 @@ slot[name=error]::slotted(*) {
     --sbb-teaser-product-footer-min-height: var(--sbb-teaser-product-container-spacing);
     --sbb-time-input-max-width: 4.0625rem;
   }
-  :root.sbb-lean {
-    --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
-  }
 }
 @media (min-width: calc(90rem)) {
   :root {
@@ -2219,10 +2254,6 @@ sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button,
 sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title) > * > sbb-dialog-content {
   padding-block-start: var(--sbb-spacing-fixed-1x);
 }
-sbb-dialog[negative] > sbb-dialog-content, sbb-dialog[negative]:is(:state(has-intermediate-element),[state--has-intermediate-element]) > * > sbb-dialog-content {
-  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
-  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
-}
 
 sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-close-button) > * > sbb-dialog-title {
   padding-inline-end: 0;
@@ -2310,7 +2341,6 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
     color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
     color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
   );
-  --sbb-scrollbar-track-color: transparent;
 }
 :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
@@ -2351,40 +2381,8 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
   padding-block-end: 0.34375rem;
 }
 :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
-  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
-  --sbb-scrollbar-thumb-width: 0.125rem;
-  --sbb-scrollbar-thumb-width-hover: 0.25rem;
-  --sbb-scrollbar-width-firefox: thin;
   --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
   --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
-  --sbb-scrollbar-track-color: transparent;
-}
-:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar {
-  width: var(--sbb-scrollbar-width);
-  height: var(--sbb-scrollbar-width);
-  background-color: var(--sbb-scrollbar-track-color, transparent);
-}
-:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-corner {
-  background-color: var(--sbb-scrollbar-track-color, transparent);
-}
-:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-thumb {
-  background-color: var(--sbb-scrollbar-color, currentcolor);
-  border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
-  border-radius: var(--sbb-border-radius-4x);
-  background-clip: padding-box;
-}
-:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-thumb:hover {
-  background-color: var(--sbb-scrollbar-color-hover, currentcolor);
-  border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
-}
-:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-button, :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-corner {
-  display: none;
-}
-@supports not selector(::-webkit-scrollbar) {
-  :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
-    scrollbar-width: var(--sbb-scrollbar-width-firefox);
-    scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
-  }
 }
 :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
 :is(:state(interacted),[state--interacted]):invalid,
@@ -2691,34 +2689,6 @@ img {
   transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
 
-sbb-train-formation:has(sbb-train[direction-label]) {
-  --sbb-train-formation-reserve-spacing-display: block;
-}
-
-sbb-train-formation:has(sbb-train-wagon[sector]) {
-  --sbb-train-formation-show-sectors-gap: 1;
-}
-
-sbb-train-formation:not(:has(sbb-train-wagon[label])) {
-  --sbb-train-formation-wagon-label-display: none;
-}
-
-sbb-train-formation[view=side] sbb-train-wagon {
-  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M12.5,0.5 h55 a12,12 0 0 1 12,12 v15 a12,12 0 0 1 -12,12 h-55 a12,12 0 0 1 -12,-12 v-15 a12,12 0 0 1 12,-12 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
-  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='11.5' stroke='%23000000'/%3E%3Cpath d='M76 4L4 36' stroke='%23000000'/%3E%3Cpath d='M76 36L4 4' stroke='%23000000'/%3E%3C/svg%3E");
-  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H68C74.3513 0.5 79.5 5.64873 79.5 12V28C79.5 34.3513 74.3513 39.5 68 39.5H11.922C2.93614 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
-  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0639 39.5 68.078 39.5H11.922C2.93615 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
-  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0638 39.5 68.0779 39.5H12C5.64873 39.5 0.5 34.3513 0.5 28V12Z' stroke='%23000000'/%3E%3C/svg%3E");
-}
-
-sbb-train-formation[view=top] sbb-train-wagon {
-  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h63 a8,8 0 0 1 8,8 v23 a8,8 0 0 1 -8,8 h-63 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
-  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='7.5' stroke='%23000000'/%3E%3Cpath d='M77.5 2.5L2.5 37.5' stroke='%23000000'/%3E%3Cpath d='M77.5 37.5L2.5 2.5' stroke='%23000000'/%3E%3C/svg%3E");
-  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath transform='translate(80,40) rotate(180)' d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
-  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
-  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;