@sbb-esta/lyne-elements-dev 5.0.0-next-dev.1777034079 → 5.0.0-next-dev.1777038043

package/core/styles/core.scss

@@ -172,6 +172,21 @@ $theme: 'standard' !default;
   with (
   $theme: $theme
 );
+@use '../../navigation/navigation/navigation.global' as navigation with (
+  $theme: $theme
+);
+@use '../../navigation/common/navigation-action.global' as navigation-action with (
+  $theme: $theme
+);
+@use '../../navigation/navigation-list/navigation-list.global' as navigation-list with (
+  $theme: $theme
+);
+@use '../../navigation/navigation-marker/navigation-marker.global' as navigation-marker with (
+  $theme: $theme
+);
+@use '../../navigation/navigation-section/navigation-section.global' as navigation-section with (
+  $theme: $theme
+);
 @use '../../notification/notification.global' as notification with (
   $theme: $theme
 );
@@ -346,6 +361,11 @@ $theme: 'standard' !default;
   @include menu.base;
   @include menu-action.base;
   @include message.base;
+  @include navigation.base;
+  @include navigation-action.base;
+  @include navigation-list.base;
+  @include navigation-marker.base;
+  @include navigation-section.base;
   @include mini-calendar-day.base;
   @include mini-calendar-month.base;
   @include notification.base;
@@ -474,6 +494,8 @@ $theme: 'standard' !default;
     @include flip-card.base-breakpoint-large;
     @include form-field.base-breakpoint-large;
     @include header.base-breakpoint-large;
+    @include navigation.base-breakpoint-large;
+    @include navigation-section.base-breakpoint-large;
     @include menu.base-breakpoint-large;
     @include teaser-panel.base-breakpoint-large;
     @include teaser-product-common.base-breakpoint-large;
@@ -493,6 +515,8 @@ $theme: 'standard' !default;
 
     @include lead-container.base-breakpoint-ultra;
     @include map-container.base-breakpoint-ultra;
+    @include navigation.base-breakpoint-ultra;
+    @include navigation-section.base-breakpoint-ultra;
     @include teaser-panel.base-breakpoint-ultra;
   }
 }

package/core.css

@@ -1555,6 +1555,54 @@ slot[name=error]::slotted(*) {
   --sbb-message-subtitle-color: var(--sbb-color-granite);
   --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
   --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+  --sbb-navigation-grid-column: 1 / -1;
+  --sbb-navigation-animation-easing: ease-in;
+  --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);
+  --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);
+  --sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);
+  --sbb-navigation-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 70%, transparent);
+  --sbb-navigation-backdrop-animation-name: backdrop-open;
+  --sbb-navigation-background-color: var(--sbb-background-color-1-negative);
+  --sbb-navigation-color: var(--sbb-color-1-negative);
+  --sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);
+  --sbb-navigation-expanded-width: 100%;
+  --sbb-navigation-inset: 0 auto auto 0;
+  --sbb-navigation-translate: -100% 0;
+  --sbb-navigation-content-gap: var(--sbb-spacing-responsive-xxl);
+  --sbb-navigation-content-translate: 0;
+  --sbb-navigation-width: 100%;
+  --sbb-navigation-height: 100dvh;
+  --sbb-navigation-action-color: var(--sbb-color-4-negative);
+  --sbb-navigation-action-icon-display: none;
+  --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
+  --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
+  --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-navigation-list-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-navigation-list-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-navigation-list-margin-block: var(--sbb-spacing-fixed-1x);
+  --sbb-navigation-list-padding-block-end: var(--sbb-spacing-fixed-2x);
+  --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
+  --sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);
+  --sbb-navigation-marker-position-y: unset;
+  --sbb-navigation-marker-width: 1.0625rem;
+  --sbb-navigation-marker-border: var(--sbb-border-width-1x);
+  --sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);
+  --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
+  --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
+  --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);
+  --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-navigation-section-column: 1 / -1;
+  --sbb-navigation-section-position: fixed;
+  --sbb-navigation-section-pointer-events: none;
+  --sbb-navigation-section-animation-easing: ease-out;
+  --sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);
+  --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-navigation-section-translate: 100%;
+  --sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);
+  --sbb-navigation-section-width: 100dvw;
+  --sbb-navigation-section-height: 100dvh;
+  --sbb-navigation-section-font-size: var(--sbb-heading-font-size-4);
   --sbb-mini-calendar-day-animation-easing: var(--sbb-animation-easing);
   --sbb-mini-calendar-day-dimensions: 0.375rem;
   --sbb-mini-calendar-day-scale: 1.333;
@@ -2039,6 +2087,19 @@ slot[name=error]::slotted(*) {
     --_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);
+    --sbb-navigation-grid-column: 1 / 5;
+    --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);
+    --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;
+    --sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);
+    --sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);
+    --sbb-navigation-section-column: 5 / 13;
+    --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);
+    --sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x)
+      var(--sbb-layout-base-offset-responsive);
+    --sbb-navigation-section-position: relative;
+    --sbb-navigation-section-translate: 0;
+    --sbb-navigation-section-content-padding-inline-start: 0;
+    --sbb-navigation-section-font-size: var(--sbb-heading-font-size-2);
     --sbb-menu-max-width: 20rem;
     --sbb-menu-min-width: 11.25rem;
     --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
@@ -2074,6 +2135,11 @@ slot[name=error]::slotted(*) {
     --sbb-lead-container-image-ratio: 21 / 9;
     --sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
     --sbb-map-container-sidebar-width: 30rem;
+    --sbb-navigation-grid-column: 1 / 6;
+    --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl);
+    --sbb-navigation-section-column: 6 / 17;
+    --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl)
+      var(--sbb-spacing-responsive-l);
     --sbb-panel-width: 26.75rem;
     --sbb-panel-inner-height: 20.02375rem;
     --sbb-panel-triangle-height: 3.956875rem;