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

package/core/mixins/selection-panel-mixin.js

@@ -9,7 +9,7 @@ var t = (t) => {
 			return this.querySelector?.("sbb-radio-button-panel, sbb-checkbox-panel") ?? null;
 		}
 		constructor(...t) {
-			super(t), this._propertyWatcher = new e(this, () => this.panel, {
+			super(t), this._previousSize = null, this._propertyWatcher = new e(this, () => this.panel, {
 				checked: (e) => {
 					this.toggleState("checked", e.checked), this.onInputStateChange?.();
 				},

package/core/overlay/overlay-option-panel.js

@@ -2,14 +2,15 @@ import { getElementPosition as e } from "./position.js";
 //#region src/elements/core/overlay/overlay-option-panel.ts
 function t(t, n, r, i, a, o = "auto") {
 	if (!t || !n) return;
-	a.style.setProperty("--sbb-options-panel-width", `${n.offsetWidth}px`), a.style.setProperty("--sbb-options-panel-origin-height", `${n.offsetHeight}px`);
-	let s = e(r, n, i, {
+	let s = n.getBoundingClientRect();
+	a.style.setProperty("--sbb-options-panel-width", `${n.offsetWidth}px`), a.style.setProperty("--sbb-options-panel-origin-height", `${n.offsetHeight}px`), a.style.setProperty("--sbb-options-panel-origin-position-x", `${s.left}px`), a.style.setProperty("--sbb-options-panel-origin-position-y", `${s.top}px`);
+	let c = e(r, n, i, {
 		forceBelow: o === "below",
 		forceAbove: o === "above"
 	});
-	a.style.setProperty("--sbb-options-panel-position-x", `${s.left}px`), a.style.setProperty("--sbb-options-panel-position-y", `${s.top}px`), a.style.setProperty("--sbb-options-panel-max-height-calculated", s.maxHeight);
-	let c = s.alignment.vertical === "above";
-	a.toggleState?.("options-panel-position-above", c), a.toggleState?.("options-panel-position-below", !c), n.setAttribute("data-options-panel-position", s.alignment.vertical);
+	a.style.setProperty("--sbb-options-panel-position-x", `${c.left}px`), a.style.setProperty("--sbb-options-panel-position-y", `${c.top}px`), a.style.setProperty("--sbb-options-panel-max-height-calculated", c.maxHeight);
+	let l = c.alignment.vertical === "above";
+	a.toggleState?.("options-panel-position-above", l), a.toggleState?.("options-panel-position-below", !l), n.setAttribute("data-options-panel-position", c.alignment.vertical);
 }
 //#endregion
 export { t as setOverlayPosition };

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

@@ -13,7 +13,6 @@
 @forward './mixins/layout';
 @forward './mixins/link';
 @forward './mixins/lists';
-@forward './mixins/overlay';
 @forward './mixins/panel';
 @forward './mixins/pearl-chain-bullet';
 @forward './mixins/popover';

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

@@ -10,7 +10,6 @@ $theme: 'standard' !default;
 @use './mixins/font-face';
 @use './mixins/helpers';
 @use './mixins/inputs';
-@use './mixins/overlay' as overlay-mixin;
 @use './mixins/popover';
 @use './mixins/scrollbar';
 @use './mixins/typo';
@@ -196,12 +195,18 @@ $theme: 'standard' !default;
 @use '../../option/option-hint/option-hint.global' as option-hint with (
   $theme: $theme
 );
+@use './option-panel-common.global' as option-panel with (
+  $theme: $theme
+);
 @use '../../overlay/overlay.global' as overlay with (
   $theme: $theme
 );
 @use '../../option/optgroup/optgroup.global' as optgroup with (
   $theme: $theme
 );
+@use '../../paginator/common/paginator-common.global' as paginator-common with (
+  $theme: $theme
+);
 @use '../../paginator/paginator/paginator.global' as paginator with (
   $theme: $theme
 );
@@ -254,6 +259,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 +306,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
 );
@@ -374,9 +394,10 @@ $theme: 'standard' !default;
   @include notification.base;
   @include option.base;
   @include option-hint.base;
+  @include option-panel.base;
   @include optgroup.base;
   @include overlay.base;
-  @include overlay-mixin.options-panel-overlay-variables--global($theme);
+  @include paginator-common.base;
   @include paginator.base;
   @include compact-paginator.base;
   @include popover-component.base;
@@ -393,6 +414,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 +427,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 +456,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 +471,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 +503,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 +644,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/lean-off-brand-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'lean-off-brand'
+);

package/core/styles/lean-safety-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'lean-safety'
+);

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/option-panel-common.global.scss

@@ -0,0 +1,11 @@
+$theme: 'standard' !default;
+
+@mixin base {
+  --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-2);
+  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
+  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
+  --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
+  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
+}

package/core/styles/option-panel-common.scss

@@ -0,0 +1,157 @@
+@use './mixins/a11y';
+
+:host {
+  --sbb-options-panel-position-x: 0;
+  --sbb-options-panel-position-y: 0;
+  --sbb-options-pointer-events: all;
+
+  // In order to have a valid value, we need a big integer to not fall into the minimum
+  --_sbb-options-panel-max-height: min(
+    var(--sbb-options-panel-max-height-calculated),
+    var(--sbb-options-panel-max-height, 100000em)
+  );
+  --sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);
+  --sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius)
+    var(--sbb-options-panel-border-radius);
+  --sbb-options-panel-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-4x)
+  );
+
+  // 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.
+  --sbb-focus-outline-color: light-dark(
+    var(--sbb-focus-outline-color-default),
+    var(--sbb-focus-outline-color-dark)
+  );
+  --sbb-options-panel-internal-z-index: var(
+    --sbb-select-z-index,
+    var(--sbb-overlay-default-z-index)
+  );
+
+  font-weight: normal;
+}
+
+:host([negative]) {
+  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard-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.
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+}
+
+:host(:not(:state(state-opening), :state(state-opened), :state(state-closing))),
+:host(:state(state-closed)) {
+  --sbb-options-panel-visibility: hidden;
+  --sbb-options-pointer-events: none;
+}
+
+:host(:state(state-opening)) {
+  --sbb-options-panel-animation-name: open;
+}
+
+:host(:state(state-closing)) {
+  --sbb-options-panel-animation-name: close;
+}
+
+:host(:state(options-panel-position-below)) {
+  --sbb-options-panel-animation-translate: var(--sbb-spacing-fixed-2x);
+}
+
+:host(:state(options-panel-position-above)) {
+  --sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius)
+    var(--sbb-options-panel-border-radius) 0 0;
+  --sbb-options-panel-animation-translate: calc(-1 * var(--sbb-spacing-fixed-2x));
+  --sbb-options-panel-margin-block-start: calc(-1 * var(--sbb-spacing-fixed-2x));
+}
+
+:host([preserve-icon-space]) {
+  --sbb-option-icon-container-display: block;
+}
+
+::slotted(sbb-divider) {
+  margin-block: var(--sbb-options-panel-divider-margin-block);
+}
+
+.sbb-option-panel__overlay-container {
+  position: fixed;
+  pointer-events: none;
+  inset: 0;
+  z-index: var(--sbb-options-panel-internal-z-index);
+
+  // Needed to add the box-shadow on the origin element (only if borderless)
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: var(--sbb-options-panel-origin-position-y);
+    left: var(--sbb-options-panel-origin-position-x);
+    width: var(--sbb-options-panel-width);
+    height: var(--sbb-options-panel-origin-height);
+    background-color: transparent;
+    border-radius: var(--sbb-options-panel-border-radius);
+    transition: box-shadow var(--sbb-options-panel-animation-duration)
+      var(--sbb-options-panel-animation-timing-function);
+
+    :host(:is(:state(state-opened), :state(state-opening)):state(option-panel-origin-borderless))
+      & {
+      box-shadow: var(--sbb-options-panel-box-shadow);
+    }
+  }
+}
+
+.sbb-option-panel__overlay {
+  display: block;
+  position: absolute;
+  visibility: var(--sbb-options-panel-visibility, visible);
+  border: none;
+  border-radius: var(--sbb-options-panel-border-radius);
+  top: var(--sbb-options-panel-position-y);
+  left: var(--sbb-options-panel-position-x);
+  width: var(--sbb-options-panel-width, fit-content);
+  transition: box-shadow var(--sbb-options-panel-animation-duration)
+    var(--sbb-options-panel-animation-timing-function);
+  box-shadow: var(--sbb-options-panel-box-shadow);
+  background-color: var(--sbb-options-panel-background-color);
+  margin-block-start: var(--sbb-options-panel-margin-block-start);
+  padding-block: var(--sbb-options-panel-padding-block);
+  padding-inline: 0;
+  max-height: var(--_sbb-options-panel-max-height);
+  min-height: var(--sbb-options-panel-min-height);
+  pointer-events: var(--sbb-options-pointer-events);
+  overflow: hidden auto;
+  animation: {
+    name: var(--sbb-options-panel-animation-name);
+    duration: var(--sbb-options-panel-animation-duration);
+    timing-function: var(--sbb-options-panel-animation-timing-function);
+  }
+
+  @include a11y.if-forced-colors {
+    border: var(--sbb-border-width-1x) solid CanvasText;
+  }
+}
+
+@keyframes open {
+  from {
+    translate: 0 var(--sbb-options-panel-animation-translate);
+    opacity: 0;
+  }
+
+  to {
+    translate: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes close {
+  from {
+    translate: 0;
+    opacity: 1;
+  }
+
+  to {
+    translate: 0 var(--sbb-options-panel-animation-translate);
+    opacity: 0;
+  }
+}

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 { i as e, n as t, r as n, t as r } from "../../styles-DAMaYe4p.js";
+export { r as hostScrollbarStyles, t as optionPanelStyles, n as screenReaderOnlyStyles, e as scrollbarStyles };