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

package/core/mixins/named-slot-list-mixin.js

@@ -1,7 +1,7 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, nothing as r } from "lit";
 import { state as i } from "lit/decorators.js";
-import { SbbScreenReaderOnlyElement as a } from "../screen-reader-only/screen-reader-only.component.js";
+import { screenReaderOnlyStyles as a } from "../styles/styles.js";
 //#region src/elements/core/mixins/named-slot-list-mixin.ts
 var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
 	let l = c, u, d = [], f = [];
@@ -9,7 +9,7 @@ var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
 		constructor() {
 			super(...arguments), this.#e = t(this, d, []), this._handleSlotchange = (t(this, f), () => {
 				let e = Array.from(this.children ?? []).filter((e) => this.listChildLocalNames.includes(e.localName));
-				e.length === this.listChildren.length && this.listChildren.every((t, n) => e[n] === t) || (this.listChildren.filter((t) => !e.includes(t)).forEach((e) => e.removeAttribute("slot")), this.listChildren = e, this.listChildren.forEach((e, t) => e.setAttribute("slot", `${s}-${t}`)), this.removeAttribute(o));
+				e.length === this.listChildren.length && this.listChildren.every((t, n) => e[n] === t) || (this.listChildren.filter((t) => !e.includes(t)).forEach((e) => e.removeAttribute("slot")), this.listChildren = e, this.removeAttribute(o));
 			});
 		}
 		static {
@@ -35,7 +35,10 @@ var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
 			});
 		}
 		static {
-			this.elementDependencies = [a];
+			this.elementDependencies = [];
+		}
+		static {
+			this.styles = [a];
 		}
 		#e;
 		get listChildren() {
@@ -50,6 +53,9 @@ var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
 		disconnectedCallback() {
 			super.disconnectedCallback(), this.shadowRoot?.removeEventListener("slotchange", this._handleSlotchange);
 		}
+		updated(e) {
+			super.updated(e), e.has("listChildren") && this.listChildren.forEach((e, t) => e.setAttribute("slot", `${s}-${t}`));
+		}
 		renderList(e = {}, t = {}) {
 			let i = this.listSlotEntries(t);
 			return i.length >= 2 ? n`
@@ -65,7 +71,7 @@ var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
               `)}
           </ul>
           ${this.renderHiddenSlot()}
-        ` : i.length === 1 ? n`<sbb-screen-reader-only>${e.ariaLabel}</sbb-screen-reader-only>
+        ` : i.length === 1 ? n`<span class="sbb-screen-reader-only">${e.ariaLabel}</span>
           <span class=${e.class || this.localName}>
             <span><slot name=${i[0].name}></slot></span>
           </span>

package/core/mixins/panel-mixin.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../panel-mixin-By8Uy5yz.js";
-export { t as SbbPanelMixin, e as panelCommonStyle };
+import { t as e } from "../../panel-mixin-CcbyRemy.js";
+export { e as SbbPanelMixin };

package/core/overlay/overlay-trigger-attributes.js

@@ -1,9 +1,9 @@
 //#region src/elements/core/overlay/overlay-trigger-attributes.ts
 function e(e, t, n, r) {
-	e && (e.setAttribute("aria-haspopup", t), e.setAttribute("aria-controls", n), e.setAttribute("aria-expanded", `${r === "opening" || r === "opened"}`));
+	t && (t.ariaHasPopup = n, t.ariaControlsElements = [e], t.ariaExpanded = `${r === "opening" || r === "opened"}`);
 }
 function t(e) {
-	e && (e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-expanded"));
+	e && (e.ariaHasPopup = null, e.ariaControlsElements = null, e.ariaExpanded = null);
 }
 function n(e, t, n, r = "listbox") {
 	e && (e.setAttribute("autocomplete", "off"), e.setAttribute("role", "combobox"), e.setAttribute("aria-autocomplete", "list"), e.setAttribute("aria-haspopup", r), e.setAttribute("aria-controls", t), e.setAttribute("aria-owns", t), e.setAttribute("aria-expanded", `${n}`));
@@ -12,4 +12,4 @@ function r(e) {
 	e && (e.removeAttribute("autocomplete"), e.removeAttribute("role"), e.removeAttribute("aria-autocomplete"), e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-owns"), e.removeAttribute("aria-expanded"));
 }
 //#endregion
-export { r as removeAriaComboBoxAttributes, t as removeAriaOverlayTriggerAttributes, n as setAriaComboBoxAttributes, e as setAriaOverlayTriggerAttributes };
+export { r as removeAriaComboBoxAttributes, t as removeAriaOverlayTriggerProperties, n as setAriaComboBoxAttributes, e as setAriaOverlayTriggerProperties };

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/_index.scss

@@ -6,7 +6,6 @@
 @forward './mixins/badge';
 @forward './mixins/buttons';
 @forward './mixins/card';
-@forward './mixins/chip';
 @forward './mixins/font-face';
 @forward './mixins/helpers';
 @forward './mixins/image';

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

@@ -39,6 +39,12 @@ $theme: 'standard' !default;
 @use '../../card/card/card.global' as card with (
   $theme: $theme
 );
+@use '../../alert/alert/alert.global' as alert with (
+  $theme: $theme
+);
+@use '../../alert/alert-group/alert-group.global' as alert-group with (
+  $theme: $theme
+);
 @use '../../chip-label/chip-label.global' as chip-label with (
   $theme: $theme
 );
@@ -98,6 +104,9 @@ $theme: 'standard' !default;
   expansion-panel-header with (
   $theme: $theme
 );
+@use '../../file-selector/common/file-selector.global' as file-selector with (
+  $theme: $theme
+);
 @use '../../flip-card/flip-card/flip-card.global' as flip-card with (
   $theme: $theme
 );
@@ -163,6 +172,21 @@ $theme: 'standard' !default;
   with (
   $theme: $theme
 );
+@use '../../navigation/navigation/navigation.global' as navigation with (
+  $theme: $theme
+);
+@use '../../navigation/common/navigation-action.global' as navigation-action with (
+  $theme: $theme
+);
+@use '../../navigation/navigation-list/navigation-list.global' as navigation-list with (
+  $theme: $theme
+);
+@use '../../navigation/navigation-marker/navigation-marker.global' as navigation-marker with (
+  $theme: $theme
+);
+@use '../../navigation/navigation-section/navigation-section.global' as navigation-section with (
+  $theme: $theme
+);
 @use '../../notification/notification.global' as notification with (
   $theme: $theme
 );
@@ -212,6 +236,9 @@ $theme: 'standard' !default;
 @use '../../signet/signet.global' as signet with (
   $theme: $theme
 );
+@use '../../select/select.global' as select with (
+  $theme: $theme
+);
 @use '../../slider/slider.global' as slider with (
   $theme: $theme
 );
@@ -227,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
 );
@@ -239,6 +275,12 @@ $theme: 'standard' !default;
 @use '../../teaser/teaser.global' as teaser with (
   $theme: $theme
 );
+@use '../../teaser-hero/teaser-hero.global' as teaser-hero with (
+  $theme: $theme
+);
+@use '../../teaser-panel/teaser-panel.global' as teaser-panel with (
+  $theme: $theme
+);
 @use '../../teaser-product/common/teaser-product-common.global' as teaser-product-common with (
   $theme: $theme
 );
@@ -256,9 +298,30 @@ $theme: 'standard' !default;
 @use '../../timetable-occupancy/timetable-occupancy.global' as timetable-occupancy with (
   $theme: $theme
 );
+@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
+);
+@use '../../toggle/toggle/toggle.global' as toggle with (
+  $theme: $theme
+);
+@use '../../toggle/toggle-option/toggle-option.global' as toggle-option with (
+  $theme: $theme
+);
 @use '../../tooltip/tooltip.global' as tooltip with (
   $theme: $theme
 );
+@use '../../toast/toast.global' as toast with (
+  $theme: $theme
+);
 @use '../../visual-checkbox/visual-checkbox.global' as visual-checkbox with (
   $theme: $theme
 );
@@ -270,6 +333,8 @@ $theme: 'standard' !default;
   // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
   @include sbb-css-tokens.base;
 
+  @include alert.base;
+  @include alert-group.base;
   @include breadcrumb.base;
   @include breadcrumb-group.base;
   @include button.base;
@@ -296,6 +361,7 @@ $theme: 'standard' !default;
   @include expansion-panel.base;
   @include expansion-panel-content.base;
   @include expansion-panel-header.base;
+  @include file-selector.base;
   @include flip-card.base;
   @include flip-card-details.base;
   @include footer.base;
@@ -313,6 +379,11 @@ $theme: 'standard' !default;
   @include menu.base;
   @include menu-action.base;
   @include message.base;
+  @include navigation.base;
+  @include navigation-action.base;
+  @include navigation-list.base;
+  @include navigation-marker.base;
+  @include navigation-section.base;
   @include mini-calendar-day.base;
   @include mini-calendar-month.base;
   @include notification.base;
@@ -330,25 +401,39 @@ $theme: 'standard' !default;
   @include selection-expansion-panel.base;
   @include sidebar.base;
   @include signet.base;
+  @include select.base;
   @include slider.base;
   @include status.base;
   @include step-label.base;
   @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;
+  @include teaser-panel.base;
   @include teaser-product-common.base;
   @include timetable-form.base;
   @include timetable-form-details.base;
   @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;
   @include tooltip.base;
+  @include toast.base;
   @include visual-checkbox.base;
 
   @include a11y.if-forced-colors {
     @include sbb-css-tokens.forced-colors;
 
+    @include alert.base-forced-colors;
     @include breadcrumb.base-forced-colors;
     @include card.base-forced-colors;
     @include card-badge.base-forced-colors;
@@ -363,16 +448,13 @@ $theme: 'standard' !default;
     @include slider.base-forced-colors;
     @include step-label.base-forced-colors;
     @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);
-
-  // Time Input
-  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
-
   // Overlay
   --sbb-overlay-default-z-index: 1000;
 
@@ -381,33 +463,7 @@ $theme: 'standard' !default;
   --sbb-cursor-pointer: pointer;
 
   // Infinity border radius, can be used to achieve rounded border on start and end
-  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
-  --sbb-border-radius-infinity: 100000em;
-
-  // 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;
-    }
-  }
+  --sbb-border-radius-infinity: calc(infinity * 1px);
 
   // When the input modality is either mouse or touch,
   // the focus outline should be hidden.
@@ -420,6 +476,7 @@ $theme: 'standard' !default;
   @include mediaqueries.mq($from: small) {
     @include sbb-css-tokens.breakpoint-small;
 
+    @include alert.base-breakpoint-small;
     @include dialog.base-breakpoint-small;
     @include footer.base-breakpoint-small;
     @include notification.base-breakpoint-small;
@@ -428,26 +485,18 @@ $theme: 'standard' !default;
   @include mediaqueries.mq($from: large) {
     @include sbb-css-tokens.breakpoint-large;
 
+    @include alert.base-breakpoint-large;
     @include button.base-breakpoint-large;
-
     @include chip-group.base-breakpoint-large;
-    @include dialog.base-breakpoint-large;
     @include flip-card.base-breakpoint-large;
     @include form-field.base-breakpoint-large;
     @include header.base-breakpoint-large;
+    @include navigation.base-breakpoint-large;
+    @include navigation-section.base-breakpoint-large;
     @include menu.base-breakpoint-large;
+    @include teaser-panel.base-breakpoint-large;
     @include teaser-product-common.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);
-      }
-    }
-
-    // Time Input
-    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+    @include time-input.base-breakpoint-large;
   }
 
   @include mediaqueries.mq($from: ultra) {
@@ -455,6 +504,9 @@ $theme: 'standard' !default;
 
     @include lead-container.base-breakpoint-ultra;
     @include map-container.base-breakpoint-ultra;
+    @include navigation.base-breakpoint-ultra;
+    @include navigation-section.base-breakpoint-ultra;
+    @include teaser-panel.base-breakpoint-ultra;
   }
 }
 
@@ -473,11 +525,15 @@ $theme: 'standard' !default;
 @include lead-container.rules;
 @include message.rules;
 @include option.rules;
+@include select.rules;
 @include sidebar.rules;
 @include sidebar-close-button.rules;
 @include sidebar-container.rules;
 @include tab-nav-bar.rules;
+@include teaser.rules;
+@include teaser-hero.rules;
 @include teaser-product-common.rules;
+@include toggle.rules;
 
 // TODO: discuss where to add these classes
 .sbb-dark {
@@ -545,22 +601,6 @@ html {
   pointer-events: all;
 }
 
-// Helper class for the application name and version in sbb-header.
-.sbb-header-info {
-  @include typo.text-xs--regular;
-
-  display: flex;
-  padding-inline: var(--sbb-spacing-fixed-4x);
-  gap: var(--sbb-spacing-fixed-1x);
-  align-items: baseline;
-  color: var(--sbb-color-1);
-
-  strong + * {
-    font-size: var(--sbb-text-font-size-xxs);
-    color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  }
-}
-
 // 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.
 // To prevent the mistakenly large gap, we reset the paragraph space.
@@ -576,7 +616,6 @@ img {
 
 // 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
-// TODO: Move back to the teaser components when the global CSS refactoring happens
 :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(
@@ -599,92 +638,8 @@ img {
   }
 }
 
-sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-object-fit: cover;
-  --sbb-image-aspect-ratio: 4 / 3;
-
-  transition-property: filter, scale;
-  will-change: filter, scale;
-  scale: var(--sbb-teaser-scale, 1);
-}
-
-// TODO: Move back to the teaser-hero components when the global CSS refactoring happens
-sbb-teaser-hero {
-  :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: 1 / 1;
-
-    border-radius: 0;
-
-    @include mediaqueries.mq($from: small) {
-      --sbb-image-aspect-ratio: 16 / 9;
-    }
-  }
-
-  img:not(.sbb-figure-overlap-image) {
-    display: block;
-    align-self: stretch;
-    width: 100%;
-  }
-}
-
-// 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");
-}
-
-// We set some dimension to the selects trigger element in order that the screen reader's outline box looks more accurate.
-.sbb-select-trigger {
-  width: 100%;
-
-  // We set the smallest possible height (zero breakpoint, size s)
-  height: var(--sbb-size-element-xs);
-
-  sbb-form-field & {
-    top: 0;
-  }
-}
-
-sbb-toggle:has(:focus-visible) {
-  @include a11y.focus-outline;
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;
   pointer-events: none;
 }
-
-// Sets ellipsis on all sbb-option child elements
-.sbb-options-nowrap {
-  --sbb-option-text-overflow: ellipsis;
-  --sbb-option-overflow: hidden;
-  --sbb-option-white-space: nowrap;
-}

package/core/styles/host-scrollbar.scss

@@ -0,0 +1,6 @@
+@use './mixins/scrollbar';
+
+:host {
+  @include scrollbar.scrollbar-variables;
+  @include scrollbar.scrollbar-rules;
+}

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/helpers.scss

@@ -8,19 +8,19 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  translate: -50% -50%;
 }
 
 @mixin absolute-center-x {
   position: absolute;
   left: 50%;
-  transform: translateX(-50%);
+  translate: -50% 0;
 }
 
 @mixin absolute-center-y {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
+  translate: 0 -50%;
 }
 
 // This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element.

package/core/styles/mixins/overlay.scss

@@ -4,7 +4,7 @@
 @mixin options-panel-overlay-variables--global($theme: 'standard') {
   --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
   --sbb-options-panel-animation-timing-function: ease;
-  --sbb-options-panel-background-color: var(--sbb-background-color-1);
+  --sbb-options-panel-background-color: var(--sbb-background-color-2);
   --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
   --sbb-options-panel-padding-block: #{functions.theme-pattern-select(
       (
@@ -48,7 +48,7 @@
 @mixin options-panel-overlay-negative-variables {
   @include scrollbar.scrollbar-variables--color-negative;
 
-  --sbb-options-panel-background-color: var(--sbb-background-color-1-negative);
+  --sbb-options-panel-background-color: var(--sbb-background-color-2-negative);
 
   // As the overlays have always a white background, we have to fix the focus outline color
   // to default color for cases where the overlays are used in a negative context.

package/core/styles/mixins/panel.scss

@@ -5,7 +5,9 @@
 // ----------------------------------------------------------------------------------------------------
 // Panel Mixins: Achieve the styling of a panel
 // ----------------------------------------------------------------------------------------------------
+// TODO: delete this file within the next major;
 
+// @deprecated
 @mixin panel-variables {
   --sbb-panel-width: #{functions.px-to-rem-build(223)};
   --sbb-panel-inner-height: #{functions.px-to-rem-build(167)};
@@ -31,7 +33,7 @@
     --sbb-panel-font-size: var(--sbb-typo-scale-2x);
   }
 
-  @include mediaqueries.mq($from: large) {
+  @include mediaqueries.mq($from: ultra) {
     --sbb-panel-width: #{functions.px-to-rem-build(428)};
     --sbb-panel-inner-height: #{functions.px-to-rem-build(320.38)};
     --sbb-panel-triangle-height: #{functions.px-to-rem-build(63.31)};
@@ -40,6 +42,7 @@
   }
 }
 
+// @deprecated
 @mixin panel {
   position: relative;
   display: flex;
@@ -66,6 +69,7 @@
   }
 }
 
+// @deprecated
 @mixin panel-text {
   font-family: var(--sbb-typo-font-family);
   font-size: var(--sbb-panel-font-size);