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

package/standard-theme.css

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

package/status/status.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../status.component-5SKEusnj.js";
+import { t as e } from "../status.component-BkBUOZC5.js";
 export { e as SbbStatusElement };

package/{status.component-5SKEusnj.js → status.component-BkBUOZC5.js}

@@ -1,15 +1,15 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, unsafeCSS as r } from "lit";
 import { property as i } from "lit/decorators.js";
-import { SbbElement as a, boxSizingStyles as o } from "./core.js";
-import { SbbIconNameMixin as s } from "./icon.pure.js";
+import { SbbElement as a } from "./core.js";
+import { SbbIconNameMixin as o } from "./icon.pure.js";
 //#region src/elements/status/status.scss?inline
-var c = ":host{--sbb-status-text-color: var(--sbb-status-color);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}:host([type=error]){--sbb-status-color: var(--sbb-color-error)}:host([type=success]){--sbb-status-color: var(--sbb-color-success)}:host([type=warning]){--sbb-status-color: var(--sbb-color-2)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-5);--sbb-status-text-color: var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-title-font-size: var(--sbb-heading-font-size-5);--_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-color);margin-block-start:calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__content-slot{display:inline;margin:0;padding:0}::slotted(sbb-title){margin-block:0}", l = (() => {
-	let l = s(a), u, d = [], f = [];
-	return class extends l {
+var s = ":host{--sbb-status-text-color: var(--sbb-status-color);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}:host([type=error]){--sbb-status-color: var(--sbb-color-error)}:host([type=success]){--sbb-status-color: var(--sbb-color-success)}:host([type=warning]){--sbb-status-color: var(--sbb-color-2)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-5);--sbb-status-text-color: var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-title-font-size: var(--sbb-heading-font-size-5);--_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-color);margin-block-start:calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__content-slot{display:inline;margin:0;padding:0}::slotted(sbb-title){margin-block:0}", c = (() => {
+	let c = o(a), l, u = [], d = [];
+	return class extends c {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-			u = [i({ reflect: !0 })], e(this, null, u, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+			l = [i({ reflect: !0 })], e(this, null, l, {
 				kind: "accessor",
 				name: "type",
 				static: !1,
@@ -22,7 +22,7 @@ var c = ":host{--sbb-status-text-color: var(--sbb-status-color);display:flex;gap
 					}
 				},
 				metadata: t
-			}, d, f), t && Object.defineProperty(this, Symbol.metadata, {
+			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -33,7 +33,7 @@ var c = ":host{--sbb-status-text-color: var(--sbb-status-color);display:flex;gap
 			this.elementName = "sbb-status";
 		}
 		static {
-			this.styles = [o, r(c)];
+			this.styles = [r(s)];
 		}
 		#e;
 		get type() {
@@ -74,9 +74,9 @@ var c = ":host{--sbb-status-text-color: var(--sbb-status-color);display:flex;gap
 				["incomplete", "circle-dotted-part-x-small"],
 				["not-started", "circle-dotted-small"],
 				["in-progress", "circle-dotted-part-small"]
-			]), this.#e = t(this, d, "info"), t(this, f);
+			]), this.#e = t(this, u, "info"), t(this, d);
 		}
 	};
 })();
 //#endregion
-export { l as t };
+export { c as t };

package/status.js

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

package/status.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./status.component-5SKEusnj.js";
+import { t as e } from "./status.component-BkBUOZC5.js";
 export { e as SbbStatusElement };

package/{step-label.component-DM7lQw8b.js → step-label.component-BkiOyF7s.js}

@@ -1,8 +1,8 @@
 import { html as e, unsafeCSS as t } from "lit";
-import { SbbButtonBaseElement as n, SbbDisabledMixin as r, SbbPropertyWatcherController as i, appendAriaElements as a, boxSizingStyles as o, removeAriaElements as s } from "./core.js";
-import { SbbIconNameMixin as c } from "./icon.pure.js";
+import { SbbButtonBaseElement as n, SbbDisabledMixin as r, SbbPropertyWatcherController as i, appendAriaElements as a, removeAriaElements as o } from "./core.js";
+import { SbbIconNameMixin as s } from "./icon.pure.js";
 //#region src/elements/stepper/step-label/step-label.scss?inline
-var l = ":host{--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--_sbb-step-label-inset-block-start: var(--sbb-step-label-inset-block-start-size-m);--_sbb-step-label-inset-inline-start: calc(var(--sbb-step-label-prefix-size) / 2);--_sbb-step-label-translate-y: calc( -50% + var(--sbb-step-label-translate-y-content-hover, 0rem) );--_sbb-step-label-prefix-inset-block-start: calc( 1em * (var(--sbb-typo-line-height-text) / 2) + (var(--sbb-border-width-1x) / 2) - (var(--sbb-step-label-prefix-size) / 2) );position:relative;display:flex;min-width:0;max-width:fit-content;gap:var(--sbb-step-label-gap);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);font-size:var(--sbb-step-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}:host:before{position:absolute;top:50%;left:50%;translate:-50% -50%;font-size:var(--sbb-text-font-size-xxs);font-weight:var(--sbb-step-label-font-weight-selected, normal);inset-block-start:var(--_sbb-step-label-inset-block-start);inset-inline-start:var(--_sbb-step-label-inset-inline-start);line-height:1;z-index:1;translate:-50% var(--_sbb-step-label-translate-y);transition:translate var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(selected),[state--selected])){--sbb-step-label-color: var(--sbb-color-3);--sbb-step-label-font-weight-selected: bold}@media(forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color: Highlight !important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs);--sbb-step-label-font-size: var(--sbb-text-font-size-m);--_sbb-step-label-inset-block-start: var(--sbb-step-label-inset-block-start-size-s)}:host(:disabled){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-step-label-prefix-border-style: dashed}@media(forced-colors:active){:host(:disabled){--sbb-step-label-color: GrayText !important}}@media(any-hover:hover){:host(:hover:not(:disabled)){--sbb-step-label-cursor: var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color: var(--sbb-background-color-3);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(: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);border-radius:var(--sbb-border-radius-1x)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:var(--_sbb-step-label-prefix-inset-block-start)}.sbb-step-label__prefix:before{content:\"\";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}.sbb-step-label__text{font-weight:700}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);translate:0 var(--sbb-step-label-translate-y-content-hover, 0rem);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,translate}", u = class extends c(r(n)) {
+var c = ":host{--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--_sbb-step-label-inset-block-start: var(--sbb-step-label-inset-block-start-size-m);--_sbb-step-label-inset-inline-start: calc(var(--sbb-step-label-prefix-size) / 2);--_sbb-step-label-translate-y: calc( -50% + var(--sbb-step-label-translate-y-content-hover, 0rem) );--_sbb-step-label-prefix-inset-block-start: calc( 1em * (var(--sbb-typo-line-height-text) / 2) + (var(--sbb-border-width-1x) / 2) - (var(--sbb-step-label-prefix-size) / 2) );position:relative;display:flex;min-width:0;max-width:fit-content;gap:var(--sbb-step-label-gap);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);font-size:var(--sbb-step-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}:host:before{position:absolute;top:50%;left:50%;translate:-50% -50%;font-size:var(--sbb-text-font-size-xxs);font-weight:var(--sbb-step-label-font-weight-selected, normal);inset-block-start:var(--_sbb-step-label-inset-block-start);inset-inline-start:var(--_sbb-step-label-inset-inline-start);line-height:1;z-index:1;translate:-50% var(--_sbb-step-label-translate-y);transition:translate var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(selected),[state--selected])){--sbb-step-label-color: var(--sbb-color-3);--sbb-step-label-font-weight-selected: bold}@media(forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color: Highlight !important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs);--sbb-step-label-font-size: var(--sbb-text-font-size-m);--_sbb-step-label-inset-block-start: var(--sbb-step-label-inset-block-start-size-s)}:host(:disabled){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-step-label-prefix-border-style: dashed}@media(forced-colors:active){:host(:disabled){--sbb-step-label-color: GrayText !important}}@media(any-hover:hover){:host(:hover:not(:disabled)){--sbb-step-label-cursor: var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color: var(--sbb-background-color-3);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(: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);border-radius:var(--sbb-border-radius-1x)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:var(--_sbb-step-label-prefix-inset-block-start)}.sbb-step-label__prefix:before{content:\"\";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}.sbb-step-label__text{font-weight:700}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);translate:0 var(--sbb-step-label-translate-y-content-hover, 0rem);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,translate}", l = class extends s(r(n)) {
 	static {
 		this.elementName = "sbb-step-label";
 	}
@@ -10,7 +10,7 @@ var l = ":host{--sbb-step-label-animation-duration: var( --sbb-disable-animation
 		this.role = "tab";
 	}
 	static {
-		this.styles = [o, t(l)];
+		this.styles = [t(c)];
 	}
 	get step() {
 		return this._step;
@@ -61,7 +61,7 @@ var l = ":host{--sbb-step-label-animation-duration: var( --sbb-disable-animation
 		let e = this.nextElementSibling;
 		for (; e && e.localName !== "sbb-step";) e = e.nextElementSibling;
 		let t = e;
-		this.internals.ariaControlsElements = s(this.internals.ariaControlsElements, this._step), this._step = t instanceof Element ? t : null, this.internals.ariaControlsElements = a(this.internals.ariaControlsElements, this._step);
+		this.internals.ariaControlsElements = o(this.internals.ariaControlsElements, this._step), this._step = t instanceof Element ? t : null, this.internals.ariaControlsElements = a(this.internals.ariaControlsElements, this._step);
 	}
 	disable(e) {
 		super.disabled = e;
@@ -74,4 +74,4 @@ var l = ":host{--sbb-step-label-animation-duration: var( --sbb-disable-animation
 	}
 };
 //#endregion
-export { u as t };
+export { l as t };

package/{step.component-DuLOqjZk.js → step.component-KiTfzfTj.js}

@@ -1,8 +1,8 @@
 import { html as e, unsafeCSS as t } from "lit";
-import { SbbElement as n, SbbPropertyWatcherController as r, appendAriaElements as i, boxSizingStyles as a, removeAriaElements as o } from "./core.js";
-import { ResizeController as s } from "@lit-labs/observers/resize-controller.js";
+import { SbbElement as n, SbbPropertyWatcherController as r, appendAriaElements as i, removeAriaElements as a } from "./core.js";
+import { ResizeController as o } from "@lit-labs/observers/resize-controller.js";
 //#region src/elements/stepper/step/step.scss?inline
-var c = ":host{--sbb-step-opacity: 0;--sbb-step-margin-inline-start: var(--sbb-spacing-fixed-4x);--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );display:block}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){margin-inline-start:var(--sbb-step-margin-inline-start);opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host(:is(:state(selected),[state--selected])){--sbb-step-opacity: 1;--sbb-step-display: block;--sbb-step-height: fit-content;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}.sbb-step{position:var(--sbb-step-position, initial);width:100%;inset-block-start:var(--sbb-step-inset-block-start, unset);opacity:var(--sbb-step-opacity);display:var(--sbb-step-display, none);height:var(--sbb-step-height, 0);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay, 0);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{.sbb-step{--sbb-step-opacity: 0}}", l = class extends n {
+var s = ":host{--sbb-step-opacity: 0;--sbb-step-margin-inline-start: var(--sbb-spacing-fixed-4x);--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );display:block}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){margin-inline-start:var(--sbb-step-margin-inline-start);opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host(:is(:state(selected),[state--selected])){--sbb-step-opacity: 1;--sbb-step-display: block;--sbb-step-height: fit-content;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}.sbb-step{position:var(--sbb-step-position, initial);width:100%;inset-block-start:var(--sbb-step-inset-block-start, unset);opacity:var(--sbb-step-opacity);display:var(--sbb-step-display, none);height:var(--sbb-step-height, 0);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay, 0);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{.sbb-step{--sbb-step-opacity: 0}}", c = class extends n {
 	static {
 		this.elementName = "sbb-step";
 	}
@@ -10,7 +10,7 @@ var c = ":host{--sbb-step-opacity: 0;--sbb-step-margin-inline-start: var(--sbb-s
 		this.role = "tabpanel";
 	}
 	static {
-		this.styles = [a, t(c)];
+		this.styles = [t(s)];
 	}
 	static {
 		this.events = {
@@ -25,7 +25,7 @@ var c = ":host{--sbb-step-opacity: 0;--sbb-step-margin-inline-start: var(--sbb-s
 		return this.closest("sbb-stepper");
 	}
 	constructor() {
-		super(), this._stepResizeObserver = new s(this, {
+		super(), this._stepResizeObserver = new o(this, {
 			target: null,
 			skipInitial: !0,
 			callback: () => setTimeout(() => this._onStepElementResize())
@@ -75,7 +75,7 @@ var c = ":host{--sbb-step-opacity: 0;--sbb-step-margin-inline-start: var(--sbb-s
 		let e = this.previousElementSibling;
 		for (; e && e.localName !== "sbb-step-label";) e = e.previousElementSibling;
 		let t = e;
-		this.internals.ariaLabelledByElements = o(this.internals.ariaLabelledByElements, this._label), this._label = t instanceof Element ? t : null, this.internals.ariaLabelledByElements = i(this.internals.ariaLabelledByElements, this._label);
+		this.internals.ariaLabelledByElements = a(this.internals.ariaLabelledByElements, this._label), this._label = t instanceof Element ? t : null, this.internals.ariaLabelledByElements = i(this.internals.ariaLabelledByElements, this._label);
 	}
 	render() {
 		return e`
@@ -86,4 +86,4 @@ var c = ":host{--sbb-step-opacity: 0;--sbb-step-margin-inline-start: var(--sbb-s
 	}
 };
 //#endregion
-export { l as t };
+export { c as t };

package/stepper/step/step.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../step.component-DuLOqjZk.js";
+import { t as e } from "../../step.component-KiTfzfTj.js";
 export { e as SbbStepElement };

package/stepper/step-label/step-label.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../step-label.component-DM7lQw8b.js";
+import { t as e } from "../../step-label.component-BkiOyF7s.js";
 export { e as SbbStepLabelElement };

package/stepper/stepper/stepper.component.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../stepper.component-8IXNrdx7.js";
+import { n as e, t } from "../../stepper.component-BX3gSLpt.js";
 export { t as SbbStepChangeEvent, e as SbbStepperElement };