@sbb-esta/lyne-elements 4.6.0 → 4.7.0

package/core/styles/core.scss

@@ -10,6 +10,7 @@ $theme: 'standard' !default;
 @use './mixins/font-face';
 @use './mixins/helpers';
 @use './mixins/inputs';
+@use './mixins/overlay' as overlay;
 @use './mixins/popover';
 @use './mixins/scrollbar';
 @use './mixins/typo';
@@ -68,6 +69,18 @@ $theme: 'standard' !default;
 @use '../../container/sticky-bar/sticky-bar.global' as sticky-bar with (
   $theme: $theme
 );
+@use '../../dialog/dialog/dialog.global' as dialog with (
+  $theme: $theme
+);
+@use '../../dialog/dialog-close-button/dialog-close-button.global' as dialog-close-button with (
+  $theme: $theme
+);
+@use '../../dialog/dialog-content/dialog-content.global' as dialog-content with (
+  $theme: $theme
+);
+@use '../../dialog/dialog-title/dialog-title.global' as dialog-title with (
+  $theme: $theme
+);
 @use '../../divider/divider.global' as divider with (
   $theme: $theme
 );
@@ -82,6 +95,18 @@ $theme: 'standard' !default;
   expansion-panel-header with (
   $theme: $theme
 );
+@use '../../footer/footer.global' as footer with (
+  $theme: $theme
+);
+@use '../../option/option/option.global' as option with (
+  $theme: $theme
+);
+@use '../../option/option-hint/option-hint.global' as option-hint with (
+  $theme: $theme
+);
+@use '../../option/optgroup/optgroup.global' as optgroup with (
+  $theme: $theme
+);
 @use '../../radio-button/common/radio-button-common.global' as radio-button-common with (
   $theme: $theme
 );
@@ -95,6 +120,9 @@ $theme: 'standard' !default;
   with (
   $theme: $theme
 );
+@use '../../status/status.global' as status with (
+  $theme: $theme
+);
 @use '../../tabs/common/tab-group-common.global' as tab-group-common with (
   $theme: $theme
 );
@@ -133,14 +161,22 @@ $theme: 'standard' !default;
   @include container.base;
   @include sticky-bar.base;
   @include clock.base;
+  @include dialog.base;
+  @include dialog-close-button.base;
   @include divider.base;
   @include expansion-panel.base;
   @include expansion-panel-content.base;
   @include expansion-panel-header.base;
+  @include footer.base;
+  @include option.base;
+  @include option-hint.base;
+  @include optgroup.base;
+  @include overlay.options-panel-overlay-variables--global($theme);
   @include radio-button-common.base;
   @include radio-button-group.base;
   @include selection-action-panel.base;
   @include selection-expansion-panel.base;
+  @include status.base;
   @include tab-group-common.base;
   @include tab-label-common.base;
   @include visual-checkbox.base;
@@ -217,6 +253,9 @@ $theme: 'standard' !default;
 
   @include mediaqueries.mq($from: small) {
     @include sbb-css-tokens.breakpoint-small;
+
+    @include dialog.base-breakpoint-small;
+    @include footer.base-breakpoint-small;
   }
 
   @include mediaqueries.mq($from: large) {
@@ -225,6 +264,7 @@ $theme: 'standard' !default;
     @include button.base-breakpoint-large;
 
     @include chip-group.base-breakpoint-large;
+    @include dialog.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
     // Only render the block in standard theme as fallback for CSS class usage
@@ -253,7 +293,12 @@ $theme: 'standard' !default;
 @include font-face.font-declarations;
 
 // Components global styles
+@include breadcrumb-group.rules;
 @include container.rules;
+@include dialog-close-button.rules;
+@include dialog-content.rules;
+@include dialog-title.rules;
+@include option.rules;
 @include tab-nav-bar.rules;
 
 // TODO: discuss where to add these classes
@@ -432,13 +477,6 @@ html {
   @include popover.popover-reset;
 }
 
-// Ensure stable breadcrumb height during hydrating
-sbb-breadcrumb-group:not(:defined) {
-  display: block;
-  height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
-  overflow: hidden;
-}
-
 // Every element in the Light DOM of a sbb-card which is focusable should receive this attribute.
 // This style enables accessing focusable elements inside an sbb-card.
 :is(sbb-card, sbb-flip-card) .sbb-action {
@@ -704,65 +742,6 @@ sbb-toggle:has(:focus-visible) {
   @include a11y.focus-outline;
 }
 
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size='s'] {
-  :where(sbb-option, sbb-autocomplete-grid-option) {
-    --sbb-option-min-height: var(--sbb-size-element-xxs);
-    --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
-    --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
-  }
-
-  sbb-optgroup {
-    --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
-  }
-
-  sbb-option-hint {
-    --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
-  }
-}
-
-sbb-dialog-title {
-  // Hide margin on the right side. Distance to button is defined by flex gap already.
-  sbb-dialog:has(> sbb-dialog-close-button) > &,
-  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-close-button) > * > & {
-    padding-inline-end: 0;
-  }
-}
-
-sbb-dialog-content {
-  // If there is a title, remove top spacing for the content
-  sbb-dialog:has(> sbb-dialog-title) > &,
-  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title) > * > & {
-    padding-block-start: var(--sbb-spacing-fixed-1x);
-  }
-
-  // Set the negative scrollbar colors for dialog content when dialog is negative
-  sbb-dialog[negative] > &,
-  sbb-dialog[negative]:state(has-intermediate-element) > * > & {
-    @include scrollbar.scrollbar-variables--color-negative;
-  }
-}
-
-sbb-dialog-close-button {
-  // If there is no dialog title, the close button should be positioned absolute
-  sbb-dialog:not(:has(> sbb-dialog-title)) > &,
-  sbb-dialog:state(has-intermediate-element):not(:has(> * > sbb-dialog-title)) > * > & {
-    position: absolute;
-    z-index: 1;
-  }
-
-  // The close button positioning needs the current dialog title size
-  sbb-dialog:has(> sbb-dialog-title[visual-level='3']) > &,
-  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='3']) > * > & {
-    --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
-  }
-
-  // The close button positioning needs the current dialog title size
-  sbb-dialog:has(> sbb-dialog-title[visual-level='5']) > &,
-  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='5']) > * > & {
-    --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
-  }
-}
-
 sbb-notification:has(sbb-title) {
   --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
   --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
@@ -773,13 +752,6 @@ sbb-notification:has(sbb-title) {
   }
 }
 
-sbb-status:has(sbb-title) {
-  --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
-  --_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);
-  --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;

package/core/styles/mixins/overlay.scss

@@ -1,5 +1,20 @@
+@use '../core/functions';
 @use './scrollbar';
 
+@mixin options-panel-overlay-variables--global($theme: 'standard') {
+  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-options-panel-animation-timing-function: ease;
+  --sbb-options-panel-background-color: var(--sbb-background-color-1);
+  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
+  --sbb-options-panel-padding-block: #{functions.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-2x),
+        'lean': var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+}
+
 @mixin options-panel-overlay-variables {
   @include scrollbar.scrollbar-variables;
 
@@ -12,24 +27,15 @@
     var(--sbb-options-panel-max-height, 100000em)
   );
   --sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);
-  --sbb-options-panel-visibility: visible;
-  --sbb-options-panel-width: fit-content;
-  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
   --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-animation-timing-function: ease;
-  --sbb-options-panel-gap-fix-opacity: 0;
-  --sbb-options-panel-gap-fix-transform: none;
   --sbb-options-panel-gap-fix-top: calc(
     var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius)
   );
-  --sbb-options-panel-background-color: var(--sbb-background-color-1);
-  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
-  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
 
   // As the overlays have always a white background, we have to fix the focus outline color
   // to default color for cases where the overlays are used in a negative context.
@@ -53,6 +59,10 @@
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
 }
 
+@mixin options-panel-overlay-size-m-variables {
+  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
+}
+
 @mixin options-panel-overlay-container {
   position: fixed;
   pointer-events: none;
@@ -64,14 +74,14 @@
   display: flex;
   justify-content: space-between;
   position: fixed;
-  visibility: var(--sbb-options-panel-visibility);
-  opacity: var(--sbb-options-panel-gap-fix-opacity);
+  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);
+  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);
+  transform: var(--sbb-options-panel-gap-fix-transform, none);
   transition: opacity var(--sbb-options-panel-animation-duration)
     var(--sbb-options-panel-animation-timing-function);
 }
@@ -79,14 +89,14 @@
 @mixin options-panel-overlay {
   display: block;
   position: absolute;
-  visibility: var(--sbb-options-panel-visibility);
+  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);
+  width: var(--sbb-options-panel-width, fit-content);
   transition: box-shadow var(--sbb-options-panel-animation-duration)
     var(--sbb-options-panel-animation-timing-function);
 

package/core/styles/mixins/pearl-chain-bullet.scss

@@ -6,6 +6,7 @@
 // ----------------------------------------------------------------------------------------------------
 
 @mixin pearl-chain-bullet-variables {
+  --sbb-pearl-chain-position-color: var(--sbb-color-primary);
   --sbb-pearl-chain-bullet-size-start-end: #{functions.px-to-rem-build(10)};
   --sbb-pearl-chain-bullet-size-stop: #{functions.px-to-rem-build(8)};
   --sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);
@@ -14,7 +15,7 @@
     var(--sbb-color-metal),
     var(--sbb-color-granite)
   );
-  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-primary);
+  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-error);
   --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);
   --sbb-pearl-chain-bullet-animation-duration: 1920ms;
   --sbb-pearl-chain-bullet-animation-easing: ease-out;
@@ -107,24 +108,29 @@
 @mixin pearl-chain-bullet-position {
   @include pearl-chain-bullet-start-end;
   @include pearl-chain-bullet;
-  @include pearl-chain-bullet-disruption;
+
+  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-position-color);
+
+  @include a11y.if-forced-colors {
+    --sbb-pearl-chain-position-color: Highlight;
+  }
 
   @keyframes pearl-chain-bullet-position-pulse {
     0% {
-      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);
     }
 
     25% {
-      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);
     }
 
     50% {
       box-shadow: 0 0 0 #{functions.px-to-rem-build(3)}
-        color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);
+        color-mix(in srgb, var(--sbb-pearl-chain-position-color) 20%, transparent);
     }
 
     100% {
-      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);
     }
   }
 

package/core.css

@@ -1412,6 +1412,27 @@
   --sbb-clock-seconds-hand-color: var(--sbb-color-brand);
   --sbb-clock-face-color: var(--sbb-color-1);
   --sbb-clock-background-color: var(--sbb-background-color-1);
+  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-5x);
+  --sbb-dialog-color: var(--sbb-color-2);
+  --sbb-dialog-background-color: var(--sbb-background-color-1);
+  --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
+  --sbb-dialog-color-negative: var(--sbb-color-2-negative);
+  --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
+  --sbb-dialog-width: 100%;
+  --sbb-dialog-max-width: 100%;
+  --sbb-dialog-max-width-default: 55.75rem;
+  --sbb-dialog-height: 100%;
+  --sbb-dialog-max-height: 100%;
+  --sbb-dialog-inset: 0 auto auto 0;
+  --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
+  --sbb-dialog-animation-easing: ease;
+  --sbb-dialog-pointer-events: none;
+  --sbb-dialog-backdrop-visibility: hidden;
+  --sbb-dialog-backdrop-pointer-events: none;
+  --sbb-dialog-backdrop-color: transparent;
+  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
+  --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
+  --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
   --sbb-divider-color: var(--sbb-background-color-4);
   --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
@@ -1439,6 +1460,48 @@
   --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-footer-background-color: var(--sbb-background-color-3);
+  --sbb-footer-clock-width: 4.75rem;
+  --sbb-footer-color: var(--sbb-color-granite);
+  --sbb-footer-color: light-dark(var(--sbb-color-granite), var(--sbb-color-white));
+  --sbb-footer-font-size: var(--sbb-text-font-size-s);
+  --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
+  --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
+  --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
+  --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-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));
+  --sbb-option-disabled-background-color: var(--sbb-background-color-3);
+  --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-min-height: var(--sbb-size-element-s);
+  --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-justify-content: start;
+  --sbb-option-cursor: var(--sbb-cursor-pointer);
+  --sbb-option-border-radius: var(--sbb-border-radius-4x);
+  --sbb-option-icon-color: var(--sbb-color-metal);
+  --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-option-focus-outline-color: transparent;
+  --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);
+  --sbb-option-font-size: var(--sbb-text-font-size-s);
+  --sbb-option-hint-color: var(--sbb-color-metal);
+  --sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);
+  --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-optgroup-label-color: var(--sbb-color-metal);
+  --sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-2x);
+  --sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --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-divider-margin-block: var(--sbb-spacing-fixed-3x);
+  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
   --sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
   --sbb-radio-button-label-color: var(--sbb-color-3);
   --sbb-radio-button-background-color: var(--sbb-background-color-1);
@@ -1473,6 +1536,11 @@
     --sbb-selection-panel-input-padding-block-m
   );
   --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
+  --sbb-status-color: var(--sbb-color-4);
+  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-status-font-size: var(--sbb-text-font-size-s);
+  --sbb-status-title-color: var(--sbb-color-granite);
+  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
   --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
   --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
@@ -1582,6 +1650,8 @@
     --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-small);
     --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
+    --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-12x);
+    --sbb-footer-clock-width: 7rem;
   }
 }
 @media (min-width: calc(64rem)) {
@@ -1625,6 +1695,8 @@
     --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
     --sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.875rem;
     --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
+    --sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
+    --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -1671,6 +1743,12 @@
   font-display: swap;
   font-weight: 300;
 }
+sbb-breadcrumb-group:not(:defined) {
+  display: block;
+  height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
+  overflow: hidden;
+}
+
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
@@ -1679,6 +1757,41 @@ sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image)
   position: absolute;
 }
 
+sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):not(:has(> * > sbb-dialog-title)) > * > sbb-dialog-close-button {
+  position: absolute;
+  z-index: 1;
+}
+sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="3"]) > * > sbb-dialog-close-button {
+  --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
+}
+sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="5"]) > * > sbb-dialog-close-button {
+  --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
+}
+
+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;
+}
+
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
+  --sbb-option-min-height: var(--sbb-size-element-xxs);
+  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
+  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
+}
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
+  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
+}
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
+  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
+}
+
 sbb-tab-nav-bar .sbb-tab-amount {
   margin: 0;
   color: var(--sbb-tab-label-amount-color);
@@ -1924,12 +2037,6 @@ sbb-toast) {
   pointer-events: none;
 }
 
-sbb-breadcrumb-group:not(:defined) {
-  display: block;
-  height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
-  overflow: hidden;
-}
-
 :is(sbb-card, sbb-flip-card) .sbb-action {
   pointer-events: all;
 }
@@ -2123,41 +2230,6 @@ sbb-toggle:has(:focus-visible) {
   outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
 }
 
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
-  --sbb-option-min-height: var(--sbb-size-element-xxs);
-  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
-  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
-}
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
-  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
-}
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
-  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
-}
-
-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;
-}
-
-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:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):not(:has(> * > sbb-dialog-title)) > * > sbb-dialog-close-button {
-  position: absolute;
-  z-index: 1;
-}
-sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="3"]) > * > sbb-dialog-close-button {
-  --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
-}
-sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="5"]) > * > sbb-dialog-close-button {
-  --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
-}
-
 sbb-notification:has(sbb-title) {
   --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
   --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
@@ -2167,14 +2239,6 @@ sbb-notification:has(sbb-title)[size=s] {
   --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
 }
 
-sbb-status:has(sbb-title) {
-  --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
-  --_sbb-status-text-color-override: var(--sbb-color-granite);
-  --_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);
-  --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;