@sbb-esta/lyne-elements-dev 4.7.0-dev.1773219716 → 4.7.0-dev.1773234121

package/core/styles/core.scss

@@ -104,6 +104,15 @@ $theme: 'standard' !default;
 @use '../../flip-card/flip-card-summary/flip-card-summary.global' as flip-card-summary with (
   $theme: $theme
 );
+@use '../../header/common/header-action.global' as header-common with (
+  $theme: $theme
+);
+@use '../../header/header-environment/header-environment.global' as header-environment with (
+  $theme: $theme
+);
+@use '../../header/header/header.global' as header with (
+  $theme: $theme
+);
 @use '../../footer/footer.global' as footer with (
   $theme: $theme
 );
@@ -193,6 +202,9 @@ $theme: 'standard' !default;
   @include flip-card-details.base;
   @include footer.base;
   @include form-field.base;
+  @include header.base;
+  @include header-common.base;
+  @include header-environment.base;
   @include icon-sidebar.base;
   @include lead-container.base;
   @include option.base;
@@ -214,6 +226,7 @@ $theme: 'standard' !default;
     @include breadcrumb.base-forced-colors;
     @include card.base-forced-colors;
     @include card-badge.base-forced-colors;
+    @include header-common.base-forced-colors;
     @include expansion-panel-header.base-forced-colors;
     @include form-field.base-forced-colors;
     @include visual-checkbox.base-forced-colors;
@@ -225,9 +238,6 @@ $theme: 'standard' !default;
   --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
   --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
 
-  // Header
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
-
   // Time Input
   --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
 
@@ -267,10 +277,6 @@ $theme: 'standard' !default;
     }
   }
 
-  &:has(sbb-header[size='s']) {
-    --sbb-header-height: #{functions.px-to-rem-build(52)};
-  }
-
   // When the input modality is either mouse or touch,
   // the focus outline should be hidden.
   // We achieve this by setting the outline style to none.
@@ -295,6 +301,7 @@ $theme: 'standard' !default;
     @include dialog.base-breakpoint-large;
     @include flip-card.base-breakpoint-large;
     @include form-field.base-breakpoint-large;
+    @include header.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
@@ -304,15 +311,8 @@ $theme: 'standard' !default;
       }
     }
 
-    // Header
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
-
     // Time Input
     --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
-
-    &:has(sbb-header[size='s']) {
-      --sbb-header-height: var(--sbb-spacing-fixed-14x);
-    }
   }
 
   @include mediaqueries.mq($from: ultra) {
@@ -332,6 +332,7 @@ $theme: 'standard' !default;
 @include dialog-title.rules;
 @include flip-card-summary.rules;
 @include form-field.rules;
+@include header.rules;
 @include icon-sidebar.rules;
 @include lead-container.rules;
 @include option.rules;
@@ -606,11 +607,6 @@ sbb-sidebar:has(sbb-sidebar-title) {
   --sbb-sidebar__padding-block-start: 0;
 }
 
-// Move container below header
-sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
-  margin-block-start: var(--sbb-header-height);
-}
-
 // We set some dimension to the selects trigger element in order that the screen reader's outline box looks more accurate.
 .sbb-select-trigger {
   width: 100%;

package/core.css

@@ -1500,6 +1500,26 @@
   --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
   --_sbb-form-field-floating-label-transform: 0.53125rem;
   --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
+  --sbb-header-background: var(--sbb-background-color-1);
+  --sbb-header-box-shadow: var(--sbb-box-shadow-level-9-soft);
+  --sbb-header-inset-inline-end: 0;
+  --sbb-header-position: fixed;
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+  --sbb-header-action-color: var(--sbb-color-1);
+  --sbb-header-action-background-color: transparent;
+  --sbb-header-action-min-height: var(--sbb-size-element-s);
+  --sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);
+  --sbb-header-action-transition-easing: var(--sbb-animation-easing);
+  --sbb-header-action-border-color: transparent;
+  --sbb-header-action-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);
+  --sbb-header-action-active-border-width: var(--sbb-border-width-2x);
+  --sbb-header-action-active-border-color: var(--sbb-header-action-color);
+  --sbb-header-first-item-icon-shift: 0.125rem;
+  --sbb-header-environment-background-color: var(--sbb-color-granite);
+  --sbb-header-environment-color: var(--sbb-color-1-negative);
+  --sbb-header-environment-size: 2.375rem;
+  --sbb-header-environment-rotate: 45deg;
   --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
   --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
   --sbb-lead-container-background-color: var(--sbb-background-color-1);
@@ -1630,6 +1650,9 @@
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-header-action-border-color: CanvasText;
+    --sbb-header-action-color: LinkText;
+    --sbb-header-action-active-border-width: 0;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
     --sbb-visual-checkbox-selection-color: Canvas;
@@ -1649,7 +1672,6 @@
   --sbb-train-formation-wagon-width: 5rem;
   --sbb-train-formation-wagon-height: 2.5rem;
   --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
   --sbb-time-input-max-width: 3.625rem;
   --sbb-overlay-default-z-index: 1000;
   --sbb-cursor-default: default;
@@ -1675,9 +1697,6 @@
     var(--sbb-spacing-fixed-1x);
   --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
 }
-:root:has(sbb-header[size=s]) {
-  --sbb-header-height: 3.25rem;
-}
 :root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
   --sbb-focus-outline-style: none;
 }
@@ -1744,17 +1763,14 @@
     --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
     --_sbb-form-field-floating-label-transform: 0.65625rem;
     --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
   }
   :root {
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
     --sbb-time-input-max-width: 4.0625rem;
   }
-  :root:has(sbb-header[size=s]) {
-    --sbb-header-height: var(--sbb-spacing-fixed-14x);
-  }
 }
 @media (min-width: calc(90rem)) {
   :root {
@@ -2007,6 +2023,26 @@ 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);
+}
+
+:root:has(sbb-header[size=s]) {
+  --sbb-header-height: 3.25rem;
+}
+
+@media (min-width: calc(64rem)) {
+  :root:has(sbb-header[size=m]) {
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+  }
+  :root:has(sbb-header[size=s]) {
+    --sbb-header-height: var(--sbb-spacing-fixed-14x);
+  }
+}
 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;
 }
@@ -2257,10 +2293,6 @@ sbb-sidebar:has(sbb-sidebar-title) {
   --sbb-sidebar__padding-block-start: 0;
 }
 
-sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
-  margin-block-start: var(--sbb-header-height);
-}
-
 .sbb-select-trigger {
   width: 100%;
   height: var(--sbb-size-element-xs);