@sbb-esta/lyne-elements-dev 4.6.0-dev.1772457568 → 4.6.0-dev.1772462503

package/core/styles/core.scss

@@ -68,6 +68,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
 );
@@ -136,6 +148,8 @@ $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;
@@ -222,6 +236,7 @@ $theme: 'standard' !default;
   @include mediaqueries.mq($from: small) {
     @include sbb-css-tokens.breakpoint-small;
 
+    @include dialog.base-breakpoint-small;
     @include footer.base-breakpoint-small;
   }
 
@@ -231,6 +246,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
@@ -260,6 +276,9 @@ $theme: 'standard' !default;
 
 // Components global styles
 @include container.rules;
+@include dialog-close-button.rules;
+@include dialog-content.rules;
+@include dialog-title.rules;
 @include tab-nav-bar.rules;
 
 // TODO: discuss where to add these classes
@@ -726,49 +745,6 @@ sbb-toggle:has(:focus-visible) {
   }
 }
 
-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);

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);
@@ -1590,6 +1611,7 @@
     --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;
   }
 }
@@ -1634,6 +1656,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);
@@ -1688,6 +1712,29 @@ 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;
+}
+
 sbb-tab-nav-bar .sbb-tab-amount {
   margin: 0;
   color: var(--sbb-tab-label-amount-color);
@@ -2144,29 +2191,6 @@ sbb-toggle:has(:focus-visible) {
   --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);