@sbb-esta/lyne-elements 4.10.0 → 4.12.0

package/safety-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),
@@ -1523,6 +1536,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);
@@ -1660,7 +1681,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 +1718,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 +1738,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 +1784,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 +1874,7 @@ 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-teaser-product-background-color: var(--sbb-color-cloud);
   --sbb-teaser-product-background-color: light-dark(
     var(--sbb-color-cloud),
@@ -1869,6 +1897,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);
@@ -1931,17 +2033,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);
@@ -2040,13 +2145,11 @@ slot[name=error]::slotted(*) {
     --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 {
@@ -2140,6 +2243,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,6 +2289,9 @@ 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-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
@@ -2326,10 +2433,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 +2449,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 +2502,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 +2554,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 +2586,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 +2659,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 +2688,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 +2716,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;
 }
@@ -3282,10 +3386,17 @@ sup {
   --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
 }
 
-.sbb-table,
-.sbb-table-m,
-.sbb-table-s,
-.sbb-table-xs {
+:root {
+  --sbb-table-border-color: var(--sbb-color-cloud);
+  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3);
+  --sbb-table-color: var(--sbb-color-1);
+  --sbb-table-caption-color: var(--sbb-color-granite);
+  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+  --sbb-table-sticky-shadow-width: 3rem;
+  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
   --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
@@ -3293,28 +3404,16 @@ sup {
   --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
 }
-.sbb-table tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
-  background-color: var(--sbb-table-row-striped-color);
-}
+
 .sbb-table,
 .sbb-table-m,
 .sbb-table-s,
 .sbb-table-xs {
   --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
-  --sbb-table-border-color: var(--sbb-color-cloud);
-  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
-  --sbb-table-background-color: var(--sbb-background-color-1);
-  --sbb-table-row-striped-color: var(--sbb-background-color-3);
-  --sbb-table-color: var(--sbb-color-1);
-  --sbb-table-caption-color: var(--sbb-color-granite);
-  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
-  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
-  --sbb-table-sticky-shadow-width: 3rem;
-  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
-  --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
+  --sbb-table-sticky-shadow-transition-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-6x)
+  );
   border-spacing: 0;
   caption-side: bottom;
   color: var(--sbb-table-color);
@@ -3358,6 +3457,12 @@ sup {
 .sbb-table-xs :is(th, td):first-child {
   border-inline-start: var(--sbb-table-border);
 }
+.sbb-table tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-row-striped-color);
+}
 .sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
 .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
 .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
@@ -3378,7 +3483,10 @@ sup {
 .sbb-table-s caption,
 .sbb-table-xs caption {
   --sbb-table-caption-color-fallback: var(--sbb-color-granite);
-  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-color-fallback: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-cement)
+  );
   font-size: var(--sbb-text-font-size-xs);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
@@ -3433,11 +3541,15 @@ sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
+sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
+  --sbb-table-cell-color: var(--sbb-color-cloud);
+}
 .sbb-table--theme-iron tbody > tr > td {
   color: var(--sbb-table-cell-color);
 }
-.sbb-table--theme-iron.sbb-table--negative {
-  --sbb-table-cell-color: var(--sbb-color-cloud);
+
+.sbb-table-header-subtitle {
+  font-weight: normal;
 }
 
 .sbb-table-header-row:last-of-type > th {
@@ -3521,15 +3633,6 @@ sbb-table-wrapper[negative] .sbb-table,
   inset-inline-end: unset;
 }
 
-html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
-  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
-}
-
 .sbb-table-align-start {
   text-align: start;
 }
@@ -3554,10 +3657,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   text-align: right;
 }
 
-.sbb-table-header-subtitle {
-  font-weight: normal;
-}
-
 .sbb-timetable-form {
   --sbb-timetable-form-content-max-width: 46.25rem;
   position: relative;

package/select/select.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../select.component-DWLdApt_.js";
+import { t as e } from "../select.component-BT6RbERH.js";
 export { e as SbbSelectElement };

package/{select.component-DWLdApt_.js → select.component-BT6RbERH.js}

@@ -15,7 +15,7 @@ import { getNextElementIndex as re } from "./core/a11y.js";
 import { MutationController as A } from "@lit-labs/observers/mutation-controller.js";
 import { until as j } from "lit/directives/until.js";
 //#region src/elements/select/select.scss?inline
-var ie = ".sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--_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) );--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--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) );--sbb-select-placeholder-fallback-color: var(--sbb-color-metal);--sbb-select-placeholder-fallback-color: light-dark( var(--sbb-color-metal), var(--sbb-color-smoke) );display:block;font-weight:400}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host([size=m]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x)}:host([negative]){--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-options-panel-background-color: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-select-placeholder-fallback-color: var(--sbb-color-5)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility: hidden}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name: close}:host(:is(:state(state-opened),[state--state-opened])),:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-gap-fix-opacity: 1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host(:is(:state(options-panel-position-above),[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-gap-fix-top: var(--_sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text))}:host(:not(:is(:state(has-display-value),[state--has-display-value]))) .sbb-select__trigger{color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color))}.sbb-select__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__container[popover]{margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility, visible);opacity:var(--sbb-options-panel-gap-fix-opacity, 0);background-color:transparent;width:var(--sbb-options-panel-width, fit-content);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform, none);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility, \"visible\");overflow:hidden;background-color:transparent;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)}.sbb-select__panel:before,.sbb-select__panel:after{content:\"\";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-select__panel:after{display:block}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media(forced-colors:active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}", M = p, N = 0, P = (() => {
+var ie = ".sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--_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) );--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--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) );display:block;font-weight:400;line-height:var(--sbb-typo-line-height-text)}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host([size=m]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x)}:host([negative]){--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-options-panel-background-color: var(--sbb-background-color-2-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-select-placeholder-fallback-color: var(--sbb-color-5)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility: hidden}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name: close}:host(:is(:state(state-opened),[state--state-opened])),:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-gap-fix-opacity: 1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host(:is(:state(options-panel-position-above),[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-gap-fix-top: var(--_sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text))}:host(:not(:is(:state(has-display-value),[state--has-display-value]))) .sbb-select__trigger{color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color))}.sbb-select__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__container[popover]{margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility, visible);opacity:var(--sbb-options-panel-gap-fix-opacity, 0);background-color:transparent;width:var(--sbb-options-panel-width, fit-content);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform, none);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility, \"visible\");overflow:hidden;background-color:transparent;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)}.sbb-select__panel:before,.sbb-select__panel:after{content:\"\";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-9-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-9-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-select__panel:after{display:block}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-9-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-9-hard-negative)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media(forced-colors:active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}", M = p, N = 0, P = (() => {
 	let p = y(te(g(v(_(ne(ee)))))), P = [], F, I = [], L = [], R, z = [], B = [], V, H = [], U = [], W, G = [], K = [], q, J, Y = [], X = [], Z, Q = [], $ = [];
 	return class extends p {
 		static {
@@ -181,7 +181,7 @@ var ie = ".sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb
 			this.#r = e;
 		}
 		set value(e) {
-			this._value = e, this._updateOptionsFromValue(), this._isValueManuallyAssigned = !0;
+			this._value = e, this._isValueManuallyAssigned = !0, this._updateOptionsFromValue();
 		}
 		get value() {
 			return this._value;
@@ -223,7 +223,7 @@ var ie = ".sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb
 				this._isPointerDownEventOnMenu = D(this._overlay, e);
 			}, this._closeOnBackdropClick = (e) => {
 				!this._isPointerDownEventOnMenu && !D(this._overlay, e) && this.close();
-			}, this.addEventListener?.("optionselectionchange", (e) => this._onOptionChanged(e)), this.addEventListener?.("optionLabelChanged", (e) => this._onOptionLabelChanged(e)), this.addEventListener?.("ɵoptgroupslotchange", () => this._updateValueOptionState(), { capture: !0 }), this.addEventListener?.("click", (e) => {
+			}, this.addEventListener?.("optionselectionchange", (e) => this._onOptionChanged(e)), this.addEventListener?.("optionLabelChanged", (e) => this._onOptionLabelChanged(e)), this.addEventListener?.("ɵoptionvaluechange", () => this._updateValueOptionState()), this.addEventListener?.("ɵoptgroupslotchange", () => this._updateValueOptionState(), { capture: !0 }), this.addEventListener?.("click", (e) => {
 				let t = e.target;
 				t.localName === "sbb-option" ? !this.multiple && !t.disabled && (this.close(), this.focus()) : this._toggleOpening();
 			}), this.addController(new A(this, {

package/select.js

@@ -1,4 +1,4 @@
-import { t as e } from "./select.component-DWLdApt_.js";
+import { t as e } from "./select.component-BT6RbERH.js";
 import "./select.pure.js";
 //#region src/elements/select.ts
 e.define();

package/select.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./select.component-DWLdApt_.js";
+import { t as e } from "./select.component-BT6RbERH.js";
 export { e as SbbSelectElement };

package/sidebar/sidebar/sidebar.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../sidebar.component-DxOx02l6.js";
+import { t as e } from "../../sidebar.component-Dsx1FAg0.js";
 export { e as SbbSidebarElement };

package/sidebar/sidebar.js

@@ -1,4 +1,4 @@
-import { t as e } from "../sidebar.component-DxOx02l6.js";
+import { t as e } from "../sidebar.component-Dsx1FAg0.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/sidebar/sidebar.js' has been deprecated.\nUse either '@sbb-esta/elements/sidebar.js' or '@sbb-esta/elements/sidebar.pure.js' instead.");
 //#endregion
 export { e as SbbSidebarElement };

package/{sidebar.component-DxOx02l6.js → sidebar.component-Dsx1FAg0.js}

@@ -152,7 +152,9 @@ var g = ":host{--sbb-link-text-decoration-line: none;--sbb-sidebar-background-co
 			return this._container;
 		}
 		constructor() {
-			super(), this.#e = (t(this, v), t(this, b, "white")), this.#t = (t(this, x), t(this, C, "side")), this.#n = (t(this, w), t(this, E, "start")), this.#r = (t(this, D), t(this, k, !1)), this.#i = (t(this, A), t(this, M, !1)), this._container = (t(this, N), null), this._lastFocusedElement = null, this._focusTrapController = new h(this), this._escapableOverlayController = new p(this), this.addController(new m(this, {
+			super(), this.#e = (t(this, v), t(this, b, "white")), this.#t = (t(this, x), t(this, C, "side")), this.#n = (t(this, w), t(this, E, "start")), this.#r = (t(this, D), t(this, k, !1)), this.#i = (t(this, A), t(this, M, !1)), this._container = (t(this, N), null), this._lastFocusedElement = null, this._focusTrapController = new h(this), this._escapableOverlayController = new p(this), this._closeOnNavigation = () => {
+				this._isModeOver() && this.isOpen && this.close();
+			}, this.addController(new m(this, {
 				skipInitial: !0,
 				callback: () => this._updateSidebarWidth()
 			})), this.addEventListener?.("click", (e) => {
@@ -160,10 +162,10 @@ var g = ":host{--sbb-link-text-decoration-line: none;--sbb-sidebar-background-co
 			});
 		}
 		connectedCallback() {
-			super.connectedCallback(), this._container = this.closest?.("sbb-sidebar-container"), this._updateSidebarWidth(), this.isOpen && this._isModeOver() && this._takeFocus();
+			super.connectedCallback(), this._container = this.closest?.("sbb-sidebar-container"), this._updateSidebarWidth(), this.isOpen && this._isModeOver() && this._takeFocus(), r || (window.navigation ? window.navigation.addEventListener("navigate", this._closeOnNavigation) : window.addEventListener("popstate", this._closeOnNavigation));
 		}
 		disconnectedCallback() {
-			super.disconnectedCallback(), this.container?.style.removeProperty(this._buildCssWidthVar()), this._container = null;
+			super.disconnectedCallback(), this.container?.style.removeProperty(this._buildCssWidthVar()), this._container = null, r || (window.navigation ? window.navigation.removeEventListener("navigate", this._closeOnNavigation) : window.removeEventListener("popstate", this._closeOnNavigation));
 		}
 		willUpdate(e) {
 			super.willUpdate(e), e.has("opened") && (this.opened ? this.open() : this.opened || this.close()), e.has("mode") && (this.mode === "over" && this.isOpen ? this._takeFocus() : this.cedeFocus());