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

package/standard-theme.css

@@ -226,6 +226,7 @@ slot[name=error]::slotted(*) {
   transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
   font-size: var(--sbb-tab-label-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
+  line-height: var(--sbb-typo-line-height-text);
   font-weight: var(--sbb-tab-label-font-weight);
   text-decoration: var(--sbb-tab-label-text-decoration);
 }
@@ -1087,6 +1088,12 @@ slot[name=error]::slotted(*) {
   --sbb-color-4-negative: var(--sbb-color-cloud);
   --sbb-color-4-negative-inverted: var(--sbb-color-iron);
   --sbb-color-5: var(--sbb-color-smoke);
+  --sbb-color-6: var(--sbb-color-anthracite);
+  --sbb-color-6: light-dark(var(--sbb-color-anthracite), var(--sbb-color-platinum));
+  --sbb-color-6-inverted: var(--sbb-color-platinum);
+  --sbb-color-6-inverted: light-dark(var(--sbb-color-platinum), var(--sbb-color-anthracite));
+  --sbb-color-6-negative: var(--sbb-color-platinum);
+  --sbb-color-6-negative-inverted: var(--sbb-color-anthracite);
   --sbb-border-color-1: var(--sbb-color-midnight);
   --sbb-border-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
   --sbb-border-color-1-inverted: var(--sbb-color-white);
@@ -1112,6 +1119,12 @@ slot[name=error]::slotted(*) {
   --sbb-border-color-4-negative: var(--sbb-color-cloud);
   --sbb-border-color-4-negative-inverted: var(--sbb-color-iron);
   --sbb-border-color-5: var(--sbb-color-smoke);
+  --sbb-border-color-6: var(--sbb-color-anthracite);
+  --sbb-border-color-6: light-dark(var(--sbb-color-anthracite), var(--sbb-color-platinum));
+  --sbb-border-color-6-inverted: var(--sbb-color-platinum);
+  --sbb-border-color-6-inverted: light-dark(var(--sbb-color-platinum), var(--sbb-color-anthracite));
+  --sbb-border-color-6-negative: var(--sbb-color-platinum);
+  --sbb-border-color-6-negative-inverted: var(--sbb-color-anthracite);
   --sbb-shadow-color-soft-1: color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent);
   --sbb-shadow-color-soft-1: light-dark(
     color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent),
@@ -1266,6 +1279,20 @@ slot[name=error]::slotted(*) {
   --sbb-size-element-s: var(--sbb-size-element-s-zero);
   --sbb-size-element-m: var(--sbb-size-element-m-zero);
   --sbb-size-element-l: var(--sbb-size-element-l-zero);
+  --sbb-alert-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-alert-border-radius: var(--sbb-border-radius-4x);
+  --sbb-alert-color: var(--sbb-color-aluminium);
+  --sbb-alert-color: light-dark(var(--sbb-color-aluminium), var(--sbb-color-anthracite));
+  --sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);
+  --sbb-alert-timing-function: ease-in;
+  --sbb-alert-icon-size: 1.25rem;
+  --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
+  --sbb-alert-title-margin-block: 0;
+  --sbb-alert-font-size: var(--sbb-text-font-size-s);
+  --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
+  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
+  --sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-alert-group-border-radius: var(--sbb-border-radius-4x);
   --sbb-breadcrumb-color: var(--sbb-color-granite);
   --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
@@ -1306,12 +1333,12 @@ slot[name=error]::slotted(*) {
   --sbb-button-min-height-size-l: var(--sbb-size-element-m);
   --sbb-button-min-height-size-m: var(--sbb-size-element-s);
   --sbb-button-min-height-size-s: var(--sbb-size-element-xs);
-  --sbb-button-min-height: var(--sbb-button-min-height-size-l);
+  --sbb-button-min-height: var(--sbb-button-min-height-size-m);
   --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
   --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-8x);
   --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-5x);
   --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-4x);
-  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);
+  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m);
   --sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
   --sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
   --sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
@@ -1478,12 +1505,12 @@ slot[name=error]::slotted(*) {
   --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
   --sbb-dialog-color-negative: var(--sbb-color-2-negative);
   --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
-  --sbb-dialog-width: 100%;
+  --sbb-dialog-width: auto;
   --sbb-dialog-max-width: 100%;
-  --sbb-dialog-max-width-default: 55.75rem;
-  --sbb-dialog-height: 100%;
-  --sbb-dialog-max-height: 100%;
-  --sbb-dialog-inset: 0 auto auto 0;
+  --sbb-dialog-height: auto;
+  --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
+  --sbb-dialog-inset-block: 0 auto;
+  --sbb-dialog-inset-inline: 0 auto;
   --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
   --sbb-dialog-animation-easing: ease;
   --sbb-dialog-pointer-events: none;
@@ -1523,6 +1550,14 @@ slot[name=error]::slotted(*) {
   --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
   --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
   --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
+  --sbb-file-selector-color: var(--sbb-color-2);
+  --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
+  --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --sbb-file-selector-background-color: var(--sbb-background-color-1);
+  --sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
+  --_sbb-file-selector-dropzone-icon-medium-display: block;
+  --_sbb-file-selector-dropzone-icon-small-display: none;
   --sbb-flip-card-background-color: var(--sbb-background-color-4);
   --sbb-flip-card-border: var(--sbb-border-width-2x);
   --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
@@ -1636,6 +1671,54 @@ slot[name=error]::slotted(*) {
   --sbb-message-subtitle-color: var(--sbb-color-granite);
   --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
   --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+  --sbb-navigation-grid-column: 1 / -1;
+  --sbb-navigation-animation-easing: ease-in;
+  --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);
+  --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);
+  --sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);
+  --sbb-navigation-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 70%, transparent);
+  --sbb-navigation-backdrop-animation-name: backdrop-open;
+  --sbb-navigation-background-color: var(--sbb-background-color-1-negative);
+  --sbb-navigation-color: var(--sbb-color-1-negative);
+  --sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);
+  --sbb-navigation-expanded-width: 100%;
+  --sbb-navigation-inset: 0 auto auto 0;
+  --sbb-navigation-translate: -100% 0;
+  --sbb-navigation-content-gap: var(--sbb-spacing-responsive-xxl);
+  --sbb-navigation-content-translate: 0;
+  --sbb-navigation-width: 100%;
+  --sbb-navigation-height: 100dvh;
+  --sbb-navigation-action-color: var(--sbb-color-4-negative);
+  --sbb-navigation-action-icon-display: none;
+  --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
+  --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
+  --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-navigation-list-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-navigation-list-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-navigation-list-margin-block: var(--sbb-spacing-fixed-1x);
+  --sbb-navigation-list-padding-block-end: var(--sbb-spacing-fixed-2x);
+  --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
+  --sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);
+  --sbb-navigation-marker-position-y: unset;
+  --sbb-navigation-marker-width: 1.0625rem;
+  --sbb-navigation-marker-border: var(--sbb-border-width-1x);
+  --sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);
+  --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
+  --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
+  --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);
+  --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-navigation-section-column: 1 / -1;
+  --sbb-navigation-section-position: fixed;
+  --sbb-navigation-section-pointer-events: none;
+  --sbb-navigation-section-animation-easing: ease-out;
+  --sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);
+  --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-navigation-section-translate: 100%;
+  --sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);
+  --sbb-navigation-section-width: 100dvw;
+  --sbb-navigation-section-height: 100dvh;
+  --sbb-navigation-section-font-size: var(--sbb-heading-font-size-4);
   --sbb-mini-calendar-day-animation-easing: var(--sbb-animation-easing);
   --sbb-mini-calendar-day-dimensions: 0.375rem;
   --sbb-mini-calendar-day-scale: 1.333;
@@ -1660,7 +1743,8 @@ slot[name=error]::slotted(*) {
   --sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
   --sbb-option-color: var(--sbb-color-3);
   --sbb-option-background-color: inherit;
-  --sbb-option-background-color-hover: var(--sbb-background-color-3);
+  --sbb-option-background-color-hover: var(--sbb-color-milk);
+  --sbb-option-background-color-hover: light-dark(var(--sbb-color-milk), var(--sbb-color-midnight));
   --sbb-option-background-color-active: var(--sbb-background-color-4);
   --sbb-option-disabled-border-color: var(--sbb-color-graphite);
   --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
@@ -1696,7 +1780,7 @@ slot[name=error]::slotted(*) {
   --sbb-overlay-container-display: none;
   --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: var(--sbb-spacing-fixed-2x);
   --sbb-paginator-height: var(--sbb-size-element-m);
@@ -1716,7 +1800,7 @@ slot[name=error]::slotted(*) {
   --sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));
   --sbb-popover-border-radius: var(--sbb-border-radius-8x);
   --sbb-popover-padding: var(--sbb-spacing-fixed-4x);
-  --sbb-popover-background: var(--sbb-background-color-1);
+  --sbb-popover-background: var(--sbb-background-color-2);
   --sbb-popover-animation-easing: ease-out;
   --sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
   --sbb-radio-button-label-color: var(--sbb-color-3);
@@ -1762,6 +1846,11 @@ slot[name=error]::slotted(*) {
   --sbb-signet-panel-color: var(--sbb-color-brand);
   --sbb-signet-icon-color: var(--sbb-color-white);
   --sbb-signet-aspect-ratio: 2 / 1;
+  --sbb-select-placeholder-fallback-color: var(--sbb-color-metal);
+  --sbb-select-placeholder-fallback-color: light-dark(
+    var(--sbb-color-metal),
+    var(--sbb-color-smoke)
+  );
   --sbb-slider-line-height: 0.25rem;
   --sbb-slider-knob-size: 1.75rem;
   --sbb-slider-knob-size-active: 1.9375rem;
@@ -1847,6 +1936,19 @@ slot[name=error]::slotted(*) {
   --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
   --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
   --sbb-teaser-image-width: 18.75rem;
+  --sbb-teaser-hero-link-font-weight: 400;
+  --sbb-panel-width: 13.9375rem;
+  --sbb-panel-inner-height: 10.4375rem;
+  --sbb-panel-triangle-height: 2.0625rem;
+  --sbb-panel-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
+  --sbb-panel-font-weight: 300;
+  --sbb-panel-color: var(--sbb-color-1-negative);
+  --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
+  --sbb-panel-background-color-hover: var(--sbb-color-primary);
+  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
+  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
+  --sbb-panel-animation-easing: var(--sbb-animation-easing);
   --sbb-teaser-product-background-color: var(--sbb-color-cloud);
   --sbb-teaser-product-background-color: light-dark(
     var(--sbb-color-cloud),
@@ -1869,6 +1971,80 @@ slot[name=error]::slotted(*) {
   --sbb-teaser-product-footer-font-size: var(--sbb-text-font-size-xxs);
   --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-s);
   --sbb-teaser-product-footer-padding-block-end: 0;
+  --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: 0.4375rem;
+  --sbb-timetable-occupancy-color: var(--sbb-color-2);
+  --sbb-timetable-occupancy-font-size: var(--sbb-text-font-size-s);
+  --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-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);
+  --sbb-toggle-check-background-color: var(--sbb-background-color-4);
+  --sbb-toggle-check-icon-color: var(--sbb-toggle-check-checked-color);
+  --sbb-toggle-check-circle-background-color: var(--sbb-background-color-1);
+  --sbb-toggle-check-circle-border-color: var(--sbb-border-color-5);
+  --sbb-toggle-check-circle-border-style: solid;
+  --sbb-toggle-check-circle-diameter: 1.75rem;
+  --sbb-toggle-check-height: var(--sbb-size-icon-ui-small);
+  --sbb-toggle-check-cursor: var(--sbb-cursor-pointer);
+  --sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-toggle-check-border-width: var(--sbb-border-width-1x);
+  --sbb-toggle-check-border-radius: var(--sbb-border-radius-4x);
+  --sbb-toggle-check-shadow: var(--sbb-box-shadow-level-5-hard);
+  --sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);
+  --sbb-toggle-height: var(--sbb-size-element-m);
+  --sbb-toggle-background-color: var(--sbb-background-color-4);
+  --sbb-toggle-background-inset: 0.125rem;
+  --sbb-toggle-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-toggle-font-size: var(--sbb-text-font-size-m);
+  --sbb-toggle-grid-template-columns: auto auto;
+  --sbb-toggle-selected-option-border-width: var(--sbb-border-width-1x);
+  --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: var(--sbb-color-anthracite);
+  --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);
+  --sbb-tooltip-animation-easing: ease-out;
+  --sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);
+  --sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-tooltip-color: var(--sbb-color-2-inverted);
+  --sbb-tooltip-border-color: var(--sbb-background-color-1-inverted);
+  --sbb-tooltip-border-radius: var(--sbb-border-radius-8x);
+  --sbb-tooltip-font-size: var(--sbb-text-font-size-xs);
+  --sbb-tooltip-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-tooltip-min-width: var(--sbb-spacing-fixed-8x);
+  --sbb-tooltip-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+  --sbb-overlay-position-area: block-start;
+  --sbb-overlay-position-try-fallbacks:
+    block-start span-inline-end, block-start span-inline-start, block-end,
+    block-end span-inline-end, block-end span-inline-start;
+  --sbb-toast-max-width: 25rem;
+  --sbb-toast-animation-timing-function: ease;
+  --sbb-toast-text-color: var(--sbb-color-3-inverted);
+  --sbb-toast-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-toast-margin: var(--sbb-spacing-responsive-s);
+  --sbb-toast-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-toast-padding-inline: var(--sbb-spacing-responsive-xs);
+  --sbb-toast-border-radius: var(--sbb-border-radius-4x);
+  --sbb-toast-container-position: fixed;
+  --sbb-toast-horizontal-position: initial;
+  --sbb-toast-vertical-position: initial;
+  --sbb-toast-gap: var(--sbb-spacing-fixed-2x);
   --sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
   --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
   --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
@@ -1891,6 +2067,8 @@ slot[name=error]::slotted(*) {
     --sbb-focus-outline-color-default: Highlight;
     --sbb-focus-outline-color-dark: Highlight;
     --sbb-focus-outline-width: var(--sbb-border-width-2x);
+    --sbb-alert-outline: var(--sbb-border-width-1x) solid CanvasText;
+    --sbb-alert-forced-color-border-radius: var(--sbb-alert-border-radius);
     --sbb-breadcrumb-color: ButtonText;
     --sbb-breadcrumb-color-active: Highlight;
     --sbb-card-border-color: CanvasText;
@@ -1931,17 +2109,20 @@ slot[name=error]::slotted(*) {
     --sbb-tag-text-color: ButtonText;
     --sbb-tag-border-color: CanvasText;
     --sbb-tag-border-width: var(--sbb-border-width-2x);
+    --sbb-toggle-check-background-color: CanvasText;
+    --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;
   }
 }
 :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-time-input-max-width: 3.625rem;
   --sbb-overlay-default-z-index: 1000;
   --sbb-cursor-default: default;
   --sbb-cursor-pointer: pointer;
-  --sbb-border-radius-infinity: 100000em;
+  --sbb-border-radius-infinity: calc(infinity * 1px);
 }
 :root.sbb-lean {
   --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
@@ -1977,7 +2158,11 @@ slot[name=error]::slotted(*) {
     --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-small);
     --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
-    --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-12x);
+    --sbb-alert-close-button-divider-display: block;
+    --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
+    --sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
+    --sbb-dialog-max-width: 90vw;
+    --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
     --sbb-footer-clock-width: 7rem;
     --sbb-notification-icon-align-self: flex-start;
     --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
@@ -2018,35 +2203,50 @@ slot[name=error]::slotted(*) {
     --sbb-size-element-s: var(--sbb-size-element-s-large);
     --sbb-size-element-m: var(--sbb-size-element-m-large);
     --sbb-size-element-l: var(--sbb-size-element-l-large);
+    --sbb-alert-icon-size: 1.75rem;
+    --sbb-alert-icon-size-l: 2.125rem;
     --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
     --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
     --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);
     --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
     --sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.875rem;
     --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
-    --sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
-    --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
     --sbb-flip-card-min-height: 20rem;
     --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
     --_sbb-form-field-floating-label-transform: 0.65625rem;
     --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
     --sbb-header-height: var(--sbb-spacing-fixed-24x);
+    --sbb-navigation-grid-column: 1 / 5;
+    --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);
+    --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;
+    --sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);
+    --sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);
+    --sbb-navigation-section-column: 5 / 13;
+    --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);
+    --sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x)
+      var(--sbb-layout-base-offset-responsive);
+    --sbb-navigation-section-position: relative;
+    --sbb-navigation-section-translate: 0;
+    --sbb-navigation-section-content-padding-inline-start: 0;
+    --sbb-navigation-section-font-size: var(--sbb-heading-font-size-2);
     --sbb-menu-max-width: 20rem;
     --sbb-menu-min-width: 11.25rem;
     --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
+    --sbb-panel-width: 20.0625rem;
+    --sbb-panel-inner-height: 15.006875rem;
+    --sbb-panel-triangle-height: 2.965625rem;
+    --sbb-panel-font-size: var(--sbb-typo-scale-2x);
     --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;
     --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-xs);
     --sbb-teaser-product-footer-padding-block-end: var(--sbb-spacing-responsive-xs);
     --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);
   }
-  :root {
-    --sbb-time-input-max-width: 4.0625rem;
-  }
 }
 @media (min-width: calc(90rem)) {
   :root {
@@ -2064,6 +2264,16 @@ slot[name=error]::slotted(*) {
     --sbb-lead-container-image-ratio: 21 / 9;
     --sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
     --sbb-map-container-sidebar-width: 30rem;
+    --sbb-navigation-grid-column: 1 / 6;
+    --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl);
+    --sbb-navigation-section-column: 6 / 17;
+    --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl)
+      var(--sbb-spacing-responsive-l);
+    --sbb-panel-width: 26.75rem;
+    --sbb-panel-inner-height: 20.02375rem;
+    --sbb-panel-triangle-height: 3.956875rem;
+    --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
+    --sbb-panel-line-height: 1.2;
   }
 }
 
@@ -2140,6 +2350,7 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
   background-color: transparent;
   padding: 0;
   appearance: none;
+  display: flex;
   outline: none !important;
   overflow: var(--sbb-form-field-overflow, hidden);
   width: 100%;
@@ -2185,7 +2396,11 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
   line-height: 1 !important;
   margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25));
 }
+:is(sbb-form-field, sbb-timetable-form-field)[size=s] > :not(sbb-chip-group):has(input, sbb-date-input, sbb-time-input, select, sbb-select) {
+  margin-block-end: -0.125rem;
+}
 :is(sbb-form-field, sbb-timetable-form-field) :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;
@@ -2200,7 +2415,6 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
     color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
   );
   --sbb-scrollbar-track-color: transparent;
-  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 }
 :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
@@ -2241,13 +2455,13 @@ 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;
-  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 }
 :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
@@ -2326,10 +2540,6 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
   }
 }
 
-sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
-  margin-block-start: var(--sbb-header-height);
-}
-
 :root:has(sbb-header[size=m]) {
   --sbb-header-height: var(--sbb-spacing-fixed-14x);
 }
@@ -2346,6 +2556,26 @@ sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
     --sbb-header-height: var(--sbb-spacing-fixed-14x);
   }
 }
+sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
+  margin-block-start: var(--sbb-header-height);
+}
+
+.sbb-header-info {
+  display: flex;
+  padding-inline: var(--sbb-spacing-fixed-4x);
+  gap: var(--sbb-spacing-fixed-1x);
+  align-items: baseline;
+  color: var(--sbb-color-1);
+  font-size: var(--sbb-text-font-size-xs);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+}
+.sbb-header-info strong + * {
+  font-size: var(--sbb-text-font-size-xxs);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  color: var(--sbb-color-granite);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+}
+
 sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
   --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
 }
@@ -2379,6 +2609,20 @@ sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
 }
 
+.sbb-options-nowrap {
+  --sbb-option-text-overflow: ellipsis;
+  --sbb-option-overflow: hidden;
+  --sbb-option-white-space: nowrap;
+}
+
+.sbb-select-trigger {
+  width: 100%;
+  height: var(--sbb-size-element-xs);
+}
+sbb-form-field .sbb-select-trigger {
+  top: 0;
+}
+
 sbb-sidebar:has(sbb-sidebar-title) {
   --_sbb-sidebar-padding-block-start: 0;
 }
@@ -2417,6 +2661,29 @@ sbb-tab-nav-bar .sbb-tab-amount {
   text-decoration: var(--sbb-tab-label-text-decoration);
 }
 
+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);
+}
+
+sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-aspect-ratio: 1 / 1;
+  border-radius: 0;
+}
+@media (min-width: calc(37.5rem)) {
+  sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+    --sbb-image-aspect-ratio: 16 / 9;
+  }
+}
+sbb-teaser-hero img:not(.sbb-figure-overlap-image) {
+  display: block;
+  align-self: stretch;
+  width: 100%;
+}
+
 :is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   border-radius: 0;
   --sbb-image-object-fit: cover;
@@ -2426,6 +2693,11 @@ sbb-tab-nav-bar .sbb-tab-amount {
   place-self: stretch;
 }
 
+sbb-toggle:has(:focus-visible) {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
+}
+
 .sbb-dark {
   color-scheme: dark;
 }
@@ -2494,25 +2766,6 @@ sbb-toast) {
   pointer-events: all;
 }
 
-.sbb-header-info {
-  --sbb-text-font-size: var(--sbb-text-font-size-xs);
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-size: var(--sbb-text-font-size);
-  display: flex;
-  padding-inline: var(--sbb-spacing-fixed-4x);
-  gap: var(--sbb-spacing-fixed-1x);
-  align-items: baseline;
-  color: var(--sbb-color-1);
-}
-.sbb-header-info strong + * {
-  font-size: var(--sbb-text-font-size-xxs);
-  color: var(--sbb-color-granite);
-  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-}
-
 sbb-title + p {
   margin-block-start: 0;
 }
@@ -2542,29 +2795,6 @@ img {
   transition: filter 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;
-  transition-property: filter, scale;
-  will-change: filter, scale;
-  scale: var(--sbb-teaser-scale, 1);
-}
-
-sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-aspect-ratio: 1 / 1;
-  border-radius: 0;
-}
-@media (min-width: calc(37.5rem)) {
-  sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: 16 / 9;
-  }
-}
-sbb-teaser-hero img:not(.sbb-figure-overlap-image) {
-  display: block;
-  align-self: stretch;
-  width: 100%;
-}
-
 sbb-train-formation:has(sbb-train[direction-label]) {
   --sbb-train-formation-reserve-spacing-display: block;
 }
@@ -2593,31 +2823,12 @@ sbb-train-formation[view=top] sbb-train-wagon {
   --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-select-trigger {
-  width: 100%;
-  height: var(--sbb-size-element-xs);
-}
-sbb-form-field .sbb-select-trigger {
-  top: 0;
-}
-
-sbb-toggle:has(:focus-visible) {
-  outline-offset: var(--sbb-focus-outline-offset);
-  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;
   pointer-events: none;
 }
 
-.sbb-options-nowrap {
-  --sbb-option-text-overflow: ellipsis;
-  --sbb-option-overflow: hidden;
-  --sbb-option-white-space: nowrap;
-}
-
 sub {
   bottom: -0.36em;
 }
@@ -3091,94 +3302,85 @@ sup {
   }
 }
 
-.sbb-scrollbar,
+:is(.sbb-scrollbar,
 .sbb-scrollbar-negative,
 .sbb-scrollbar-thick,
 .sbb-scrollbar-thick-negative,
 .sbb-scrollbar-track-visible,
 .sbb-scrollbar-negative-track-visible,
 .sbb-scrollbar-thick-track-visible,
-.sbb-scrollbar-thick-negative-track-visible {
-  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
-}
-.sbb-scrollbar::-webkit-scrollbar,
-.sbb-scrollbar-negative::-webkit-scrollbar,
-.sbb-scrollbar-thick::-webkit-scrollbar,
-.sbb-scrollbar-thick-negative::-webkit-scrollbar,
-.sbb-scrollbar-track-visible::-webkit-scrollbar,
-.sbb-scrollbar-negative-track-visible::-webkit-scrollbar,
-.sbb-scrollbar-thick-track-visible::-webkit-scrollbar,
-.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar {
+.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
   height: var(--sbb-scrollbar-width);
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-.sbb-scrollbar::-webkit-scrollbar-corner,
-.sbb-scrollbar-negative::-webkit-scrollbar-corner,
-.sbb-scrollbar-thick::-webkit-scrollbar-corner,
-.sbb-scrollbar-thick-negative::-webkit-scrollbar-corner,
-.sbb-scrollbar-track-visible::-webkit-scrollbar-corner,
-.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-corner,
-.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-corner,
-.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-corner {
+:is(.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner {
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-.sbb-scrollbar::-webkit-scrollbar-thumb,
-.sbb-scrollbar-negative::-webkit-scrollbar-thumb,
-.sbb-scrollbar-thick::-webkit-scrollbar-thumb,
-.sbb-scrollbar-thick-negative::-webkit-scrollbar-thumb,
-.sbb-scrollbar-track-visible::-webkit-scrollbar-thumb,
-.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-thumb,
-.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-thumb,
-.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-thumb {
+:is(.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible)::-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;
 }
-.sbb-scrollbar::-webkit-scrollbar-thumb:hover,
-.sbb-scrollbar-negative::-webkit-scrollbar-thumb:hover,
-.sbb-scrollbar-thick::-webkit-scrollbar-thumb:hover,
-.sbb-scrollbar-thick-negative::-webkit-scrollbar-thumb:hover,
-.sbb-scrollbar-track-visible::-webkit-scrollbar-thumb:hover,
-.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-thumb:hover,
-.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-thumb:hover,
-.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-thumb:hover {
+:is(.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible)::-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)));
 }
-.sbb-scrollbar::-webkit-scrollbar-button, .sbb-scrollbar::-webkit-scrollbar-corner,
-.sbb-scrollbar-negative::-webkit-scrollbar-button,
-.sbb-scrollbar-negative::-webkit-scrollbar-corner,
-.sbb-scrollbar-thick::-webkit-scrollbar-button,
-.sbb-scrollbar-thick::-webkit-scrollbar-corner,
-.sbb-scrollbar-thick-negative::-webkit-scrollbar-button,
-.sbb-scrollbar-thick-negative::-webkit-scrollbar-corner,
-.sbb-scrollbar-track-visible::-webkit-scrollbar-button,
-.sbb-scrollbar-track-visible::-webkit-scrollbar-corner,
-.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-button,
-.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-corner,
-.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-button,
-.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-corner,
-.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-button,
-.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-corner {
+:is(.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-button, :is(.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner {
   display: none;
 }
 @supports not selector(::-webkit-scrollbar) {
-  .sbb-scrollbar,
+  :is(.sbb-scrollbar,
   .sbb-scrollbar-negative,
   .sbb-scrollbar-thick,
   .sbb-scrollbar-thick-negative,
   .sbb-scrollbar-track-visible,
   .sbb-scrollbar-negative-track-visible,
   .sbb-scrollbar-thick-track-visible,
-  .sbb-scrollbar-thick-negative-track-visible {
+  .sbb-scrollbar-thick-negative-track-visible) {
     scrollbar-width: var(--sbb-scrollbar-width-firefox);
     scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
   }
 }
 
 .sbb-scrollbar {
+  --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;
@@ -3196,6 +3398,7 @@ sup {
 }
 
 .sbb-scrollbar-negative {
+  --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;
@@ -3205,6 +3408,7 @@ sup {
 }
 
 .sbb-scrollbar-thick {
+  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
   --sbb-scrollbar-thumb-width: 0.5rem;
   --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
   --sbb-scrollbar-width-firefox: auto;
@@ -3222,6 +3426,7 @@ sup {
 }
 
 .sbb-scrollbar-thick-negative {
+  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
   --sbb-scrollbar-thumb-width: 0.5rem;
   --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
   --sbb-scrollbar-width-firefox: auto;
@@ -3231,6 +3436,7 @@ sup {
 }
 
 .sbb-scrollbar-track-visible {
+  --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;
@@ -3248,6 +3454,7 @@ sup {
 }
 
 .sbb-scrollbar-negative-track-visible {
+  --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;
@@ -3257,6 +3464,7 @@ sup {
 }
 
 .sbb-scrollbar-thick-track-visible {
+  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
   --sbb-scrollbar-thumb-width: 0.5rem;
   --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
   --sbb-scrollbar-width-firefox: auto;
@@ -3274,6 +3482,7 @@ sup {
 }
 
 .sbb-scrollbar-thick-negative-track-visible {
+  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
   --sbb-scrollbar-thumb-width: 0.5rem;
   --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
   --sbb-scrollbar-width-firefox: auto;