@odx/ui 3.3.0 → 3.4.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @odx/ui
 
+## 3.4.1
+
+### Patch Changes
+
+- 523fde7: Fix z-index layer position of tooltips
+- 8348bdb: Fix text overflow for tile menu items and card titles
+
+## 3.4.0
+
+### Minor Changes
+
+- 40bef6d: Added header navigation component
+- b18ae5a: Allow any content in header. The content is projected into it's own area inside the header
+- 49f971d: Add footer component
+
+### Patch Changes
+
+- 17bed8a: Align main menu title with corperate guidelines
+
 ## 3.3.0
 
 ### Minor Changes

package/core-theme.css

@@ -2226,7 +2226,7 @@ html body .odx-fs-italic {
   justify-content: center;
   font-weight: var(--odx-typography-font-weight-medium);
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
-  overflow: hidden;
+  overflow-x: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   background-color: var(--blue-700-10);
@@ -2388,6 +2388,8 @@ html body .odx-fs-italic {
           appearance: none;
   border-radius: var(--odx-v-border-radius-controls);
   min-width: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  overflow-wrap: anywhere;
+  overflow-y: clip;
   vertical-align: middle;
 }
 .odx-button:focus-visible {
@@ -2722,7 +2724,7 @@ html body .odx-fs-italic {
   color: var(--odx-area-header-title-color);
 }
 .odx-area-header__subtitle {
-  overflow: hidden;
+  overflow-x: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--odx-area-header-subtitle-color);
@@ -3054,7 +3056,7 @@ html body .odx-fs-italic {
 }
 
 .odx-brand-logo {
-  color: var(--odx-c-text);
+  color: inherit;
   display: inline-block;
   font-weight: var(--odx-typography-font-weight-bold);
   letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
@@ -3151,11 +3153,14 @@ html body .odx-fs-italic {
   }
 }
 .odx-card--launch-tile .odx-card__title, .odx-card--launch-tile-centered .odx-card__title {
-  font-weight: var(--odx-typography-font-weight-medium);
-  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
-  display: block;
   font-size: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1.25);
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+  -webkit-box-orient: block-axis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  overflow-y: clip;
 }
 @media (min-width: 480px) {
   .odx-card--launch-tile .odx-card__title, .odx-card--launch-tile-centered .odx-card__title {
@@ -3554,7 +3559,7 @@ html body .odx-fs-italic {
           user-select: none;
 }
 .odx-chip__content {
-  overflow: hidden;
+  overflow-x: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -3787,10 +3792,10 @@ html body .odx-fs-italic {
   text-align: center;
 }
 .odx-error-page__icon-container {
-  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 2);
+  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 1);
 }
 .odx-error-page__actions {
-  margin-top: calc(var(--odx-vertical-rythm-base-size) * 2);
+  margin-top: calc(var(--odx-vertical-rythm-base-size) * 1);
   display: flex;
   flex-wrap: wrap;
   gap: var(--odx-grid-gutter);
@@ -3798,7 +3803,7 @@ html body .odx-fs-italic {
   width: 100%;
 }
 .odx-error-page__footer {
-  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 2);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 1);
   text-align: center;
 }
 
@@ -3836,6 +3841,87 @@ html body .odx-fs-italic {
   transform: scaleY(-1);
 }
 
+:root {
+  --odx-footer-min-height: calc(var(--odx-vertical-rythm-base-size) * 10);
+  --odx-footer-background-color: var(--odx-c-background-content);
+  --odx-footer-text-color: var(--odx-c-text);
+  --odx-footer-description-color: var(--odx-c-text-disabled);
+}
+:root .odx-footer--dark {
+  --odx-footer-background-color: var(--odx-c-primary);
+  --odx-footer-text-color: var(--odx-c-primary-text);
+  --odx-footer-description-color: var(--odx-footer-text-color);
+}
+
+:root:has([odxTheme=dark]) .odx-footer--dark,
+:root:has(.odx-theme-dark) .odx-footer--dark {
+  --odx-footer-background-color: var(--blue-800);
+  --odx-footer-text-color: var(--black);
+  --odx-footer-description-color: var(--black);
+}
+
+.odx-footer {
+  background-color: var(--odx-footer-background-color);
+  box-sizing: border-box;
+  color: var(--odx-footer-text-color);
+  display: flex;
+  margin-block-start: auto;
+  min-height: var(--odx-footer-min-height);
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 1);
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 1);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 1);
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 1);
+}
+.odx-footer__inner, .odx-footer__navigation {
+  row-gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+}
+.odx-footer__content {
+  grid-area: content;
+}
+.odx-footer__inner {
+  -moz-column-gap: var(--odx-grid-gutter);
+       column-gap: var(--odx-grid-gutter);
+  display: grid;
+  grid-template-areas: "content" "navigation" "meta";
+  grid-template-rows: 1fr repeat(2, auto);
+  margin-inline: auto;
+  max-width: var(--odx-v-max-page-width, 100%);
+  width: 100%;
+}
+.odx-footer__navigation {
+  align-items: center;
+  -moz-column-gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+       column-gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+  display: flex;
+  flex-wrap: wrap;
+  grid-area: navigation;
+  grid-template-rows: 1fr auto;
+}
+.odx-footer__navigation > .odx-link {
+  color: var(--odx-footer-text-color);
+}
+@media (min-width: 480px) {
+  .odx-footer__navigation {
+    justify-content: flex-end;
+    text-align: right;
+  }
+}
+.odx-footer__description {
+  color: var(--odx-footer-description-color);
+  grid-area: meta;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  outline-color: transparent;
+  pointer-events: none;
+  font-size: calc(var(--odx-typography-base-size) * (1*1/var(--odx-typography-negative-font-scaling-factor)));
+}
+@media (min-width: 480px) {
+  .odx-footer__description {
+    text-align: right;
+  }
+}
+
 :root {
   --odx-form-field-hint-color: var(--gray-500);
 }
@@ -3882,7 +3968,7 @@ html body .odx-fs-italic {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
 }
 .odx-form-field:not(.odx-form-field--horizontal) .odx-form-field-label {
-  overflow: hidden;
+  overflow-x: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -4112,31 +4198,43 @@ html body .odx-fs-italic {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
-  height: calc(var(--odx-vertical-rythm-base-size) * 2);
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 2);
   display: flex;
   align-items: center;
   background-color: var(--odx-c-background-content);
 }
 .odx-header .odx-main-menu-button {
-  margin-left: calc(var(--odx-vertical-rythm-base-size) * -0.3333);
-  margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  margin-inline-end: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  margin-inline-start: calc(var(--odx-vertical-rythm-base-size) * -0.3333);
+}
+.odx-header > * {
+  margin-block: 0;
+  min-height: auto;
+}
+.odx-header__content {
+  margin-inline-end: auto;
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
 }
-.odx-header > .odx-logo, .odx-header__title {
-  margin-right: auto;
+@media (min-width: 768px) {
+  .odx-header__content {
+    padding-right: calc(var(--odx-vertical-rythm-base-size) * 1);
+    padding-left: calc(var(--odx-vertical-rythm-base-size) * 1);
+  }
 }
 .odx-header__title {
-  overflow: hidden;
+  overflow-x: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .odx-header .odx-action-group:not(:last-child) {
-  border-right: 1px solid var(--odx-c-separator);
-  margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  border-inline-end: 1px solid var(--odx-c-separator);
+  margin-inline-end: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  padding-inline-end: calc(var(--odx-vertical-rythm-base-size) * 0.5);
 }
 .odx-header:has(> .odx-title, > .odx-header__title) > .odx-logo {
   display: none;
-  margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  margin-inline-end: calc(var(--odx-vertical-rythm-base-size) * 0.5);
 }
 @media (min-width: 768px) {
   .odx-header:has(> .odx-title, > .odx-header__title) > .odx-logo {
@@ -4144,6 +4242,31 @@ html body .odx-fs-italic {
   }
 }
 
+.odx-header-navigation {
+  background-color: var(--odx-c-background-content);
+  border-block-start: 1px solid var(--odx-c-separator);
+  display: block;
+  margin-block-start: -1px;
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+}
+.odx-header-navigation__inner {
+  flex-wrap: wrap;
+  height: auto;
+  margin: 0;
+}
+.odx-header-navigation--centered .odx-header-navigation__inner {
+  display: flex;
+  justify-content: center;
+  margin-inline: auto;
+  max-width: var(--odx-v-max-page-width);
+}
+.odx-header-navigation__inner > .odx-button {
+  margin-block: 0;
+}
+
 .odx-inline-message {
   --odx-c-default: var(--blue-50);
   --odx-c-warning: var(--yellow-50);
@@ -4599,7 +4722,7 @@ html body .odx-fs-italic {
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.125);
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
-  overflow: hidden;
+  overflow-x: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   background-color: var(--odx-input-control-background-color);
@@ -4684,7 +4807,7 @@ html body .odx-fs-italic {
   align-items: center;
   font-weight: var(--odx-typography-font-weight-medium);
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
-  overflow: hidden;
+  overflow-x: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   background-color: transparent;
@@ -4738,8 +4861,8 @@ html body .odx-fs-italic {
 }
 
 .odx-main-menu {
-  --odx-area-header-title-color: var(--odx-main-menu-highlight-color);
-  --odx-area-header-subtitle-color: var(--odx-c-text-inverse);
+  --odx-area-header-title-color: var(--odx-main-menu-text-color);
+  --odx-area-header-subtitle-color: var(--odx-main-menu-text-color);
   z-index: var(--odx-v-layer-6);
 }
 .odx-main-menu__inner {
@@ -4754,7 +4877,7 @@ html body .odx-fs-italic {
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: var(--odx-v-layer-4);
+  z-index: var(--odx-v-layer-6);
 }
 .odx-main-menu__overlay {
   -webkit-backdrop-filter: blur(var(--odx-v-backdrop-blur));
@@ -4765,7 +4888,7 @@ html body .odx-fs-italic {
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: calc(var(--odx-v-layer-4) - 1);
+  z-index: calc(var(--odx-v-layer-6) - 1);
 }
 .odx-main-menu__actions {
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
@@ -4881,7 +5004,6 @@ html body .odx-fs-italic {
   height: unset;
   line-height: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
   padding: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
-  white-space: unset;
   width: calc(var(--odx-vertical-rythm-base-size) * 4.1667);
 }
 
@@ -4900,7 +5022,7 @@ html body .odx-fs-italic {
   position: fixed;
   top: 0;
   width: 100dvw;
-  z-index: var(--odx-v-layer-5);
+  z-index: var(--odx-v-layer-4);
 }
 @media (min-width: 480px) {
   .odx-modal {
@@ -5508,7 +5630,7 @@ html body .odx-fs-italic {
   pointer-events: none;
 }
 .odx-rail-navigation-item__container {
-  overflow: hidden;
+  overflow-x: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   transition-delay: 0ms;
@@ -5519,14 +5641,15 @@ html body .odx-fs-italic {
   width: 0;
 }
 .odx-rail-navigation--bar .odx-rail-navigation-item__container {
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
   margin: auto 0;
   opacity: unset;
   padding: 0 !important;
   white-space: unset;
   width: unset !important;
+  -webkit-box-orient: block-axis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  overflow-y: clip;
   font-size: calc(var(--odx-typography-base-size) * (1*1/var(--odx-typography-negative-font-scaling-factor)*1/var(--odx-typography-negative-font-scaling-factor)));
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
@@ -5652,7 +5775,7 @@ html body .odx-fs-italic {
 .odx-select__placeholder, .odx-select__value {
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
-  overflow: hidden;
+  overflow-x: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex: 1 1 auto;
@@ -6659,7 +6782,7 @@ html body .odx-fs-italic {
   display: inline-flex;
 }
 .odx-wizard-step__label {
-  overflow: hidden;
+  overflow-x: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: var(--odx-v-outline-width) solid transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/abstract/_typography.scss

@@ -22,8 +22,15 @@
   letter-spacing: var(--odx-typography-font-weight-#{$value}-letter-spacing);
 }
 
+@mixin line-clamp($value) {
+  -webkit-box-orient: block-axis;
+  display: -webkit-box;
+  -webkit-line-clamp: $value;
+  overflow-y: clip;
+}
+
 @mixin prevent-text-overflow() {
-  overflow: hidden;
+  overflow-x: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

package/scss/components/brand-logo.component.scss

@@ -1,7 +1,7 @@
 @use '../abstract/typography';
 
 .odx-brand-logo {
-  color: var(--odx-c-text);
+  color: inherit;
   display: inline-block;
 
   @include typography.font-weight(bold);

package/scss/components/button.component.scss

@@ -26,6 +26,8 @@
   appearance: none;
   border-radius: var(--odx-v-border-radius-controls);
   min-width: dimensions.get-size(1.5);
+  overflow-wrap: anywhere;
+  overflow-y: clip;
   vertical-align: middle;
 
   &:not(:has(> .odx-icon, > .odx-avatar)) {

package/scss/components/card.component.scss

@@ -84,12 +84,12 @@
     }
 
     #{$root}__title {
-      @include typography.font-weight(medium);
-
-      display: block;
       font-size: dimensions.get-size(math.div(20, 24));
       line-height: dimensions.get-size(math.div(30, 24));
 
+      @include typography.font-weight(medium);
+      @include typography.line-clamp(3);
+
       @include breakpoints.up(phone) {
         @include dimensions.margin-y(math.div(9, 24));
 

package/scss/components/error-page.component.scss

@@ -25,11 +25,11 @@
   }
 
   &__icon-container {
-    @include dimensions.margin(2, bottom);
+    @include dimensions.margin(1, bottom);
   }
 
   &__actions {
-    @include dimensions.margin(2, top);
+    @include dimensions.margin(1, top);
 
     display: flex;
     flex-wrap: wrap;
@@ -39,7 +39,7 @@
   }
 
   &__footer {
-    @include dimensions.padding(2, bottom);
+    @include dimensions.padding(1, bottom);
 
     text-align: center;
   }

package/scss/components/footer.component.scss

@@ -0,0 +1,86 @@
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+:root {
+  --odx-footer-min-height: #{dimensions.get-size(10)};
+  --odx-footer-background-color: var(--odx-c-background-content);
+  --odx-footer-text-color: var(--odx-c-text);
+  --odx-footer-description-color: var(--odx-c-text-disabled);
+
+  .odx-footer--dark {
+    --odx-footer-background-color: var(--odx-c-primary);
+    --odx-footer-text-color: var(--odx-c-primary-text);
+    --odx-footer-description-color: var(--odx-footer-text-color);
+  }
+}
+
+@include utils.theme-selector(dark) {
+  .odx-footer--dark {
+    --odx-footer-background-color: var(--blue-800);
+    --odx-footer-text-color: var(--black);
+    --odx-footer-description-color: var(--black);
+  }
+}
+
+.odx-footer {
+  background-color: var(--odx-footer-background-color);
+  box-sizing: border-box;
+  color: var(--odx-footer-text-color);
+  display: flex;
+  margin-block-start: auto;
+  min-height: var(--odx-footer-min-height);
+
+  @include dimensions.padding(1);
+
+  &__inner,
+  &__navigation {
+    row-gap: #{dimensions.get-size(0.25)};
+  }
+
+  &__content {
+    grid-area: content;
+  }
+
+  &__inner {
+    column-gap: var(--odx-grid-gutter);
+    display: grid;
+    grid-template-areas: 'content' 'navigation' 'meta';
+    grid-template-rows: 1fr repeat(2, auto);
+    margin-inline: auto;
+    max-width: var(--odx-v-max-page-width, 100%);
+    width: 100%;
+  }
+
+  &__navigation {
+    align-items: center;
+    column-gap: #{dimensions.get-size(1)};
+    display: flex;
+    flex-wrap: wrap;
+    grid-area: navigation;
+    grid-template-rows: 1fr auto;
+
+    > .odx-link {
+      color: var(--odx-footer-text-color);
+    }
+
+    @include breakpoints.up(phone) {
+      justify-content: flex-end;
+      text-align: right;
+    }
+  }
+
+  &__description {
+    color: var(--odx-footer-description-color);
+    grid-area: meta;
+    user-select: none;
+
+    @include utils.non-interactive();
+    @include typography.font-size(-1);
+
+    @include breakpoints.up(phone) {
+      text-align: right;
+    }
+  }
+}

package/scss/components/header-navigation.component.scss

@@ -0,0 +1,35 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use '../layout/typography' as *;
+
+.odx-header-navigation {
+  $root: &;
+
+  background-color: var(--odx-c-background-content);
+  border-block-start: 1px solid var(--odx-c-separator);
+  display: block;
+  margin-block-start: -1px;
+
+  @include dimensions.padding-x(0.5);
+  @include dimensions.padding-y(0.25);
+
+  &__inner {
+    flex-wrap: wrap;
+    height: auto;
+    margin: 0;
+
+    #{$root}--centered & {
+      display: flex;
+      justify-content: center;
+      margin-inline: auto;
+      max-width: var(--odx-v-max-page-width);
+    }
+
+    > .odx-button {
+      margin-block: 0;
+    }
+  }
+}

package/scss/components/header.component.scss

@@ -8,19 +8,29 @@
 .odx-header {
   @include dimensions.padding(math.div(20, 24), 'left');
   @include dimensions.padding(0.5, 'right');
-  @include dimensions.height(2);
+  @include dimensions.min-height(2);
   @include utils.vertical-center-content();
 
   background-color: var(--odx-c-background-content);
 
   .odx-main-menu-button {
-    margin-left: dimensions.get-size(-1 * math.div(1, 3));
-    margin-right: dimensions.get-size(0.5);
+    margin-inline-end: dimensions.get-size(0.5);
+    margin-inline-start: dimensions.get-size(-1 * math.div(1, 3));
   }
 
-  > .odx-logo,
-  &__title {
-    margin-right: auto;
+  > * {
+    margin-block: 0;
+    min-height: auto;
+  }
+
+  &__content {
+    margin-inline-end: auto;
+
+    @include dimensions.padding-x(0.5);
+
+    @include breakpoints.up(tablet) {
+      @include dimensions.padding-x(1);
+    }
   }
 
   &__title {
@@ -30,14 +40,14 @@
   }
 
   .odx-action-group:not(:last-child) {
-    border-right: 1px solid var(--odx-c-separator);
-    margin-right: dimensions.get-size(0.5);
-    padding-right: dimensions.get-size(0.5);
+    border-inline-end: 1px solid var(--odx-c-separator);
+    margin-inline-end: dimensions.get-size(0.5);
+    padding-inline-end: dimensions.get-size(0.5);
   }
 
   &:has(> .odx-title) > .odx-logo {
     display: none;
-    margin-right: dimensions.get-size(0.5);
+    margin-inline-end: dimensions.get-size(0.5);
 
     @include breakpoints.up(tablet) {
       display: block;

package/scss/components/main-menu.component.scss

@@ -25,8 +25,8 @@
 }
 
 .odx-main-menu {
-  --odx-area-header-title-color: var(--odx-main-menu-highlight-color);
-  --odx-area-header-subtitle-color: var(--odx-c-text-inverse);
+  --odx-area-header-title-color: var(--odx-main-menu-text-color);
+  --odx-area-header-subtitle-color: var(--odx-main-menu-text-color);
 
   z-index: var(--odx-v-layer-6);
 
@@ -42,7 +42,7 @@
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: var(--odx-v-layer-4);
+    z-index: var(--odx-v-layer-6);
   }
 
   &__overlay {
@@ -53,7 +53,7 @@
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: calc(var(--odx-v-layer-4) - 1);
+    z-index: calc(var(--odx-v-layer-6) - 1);
   }
 
   &__actions {

package/scss/components/menu.component.scss

@@ -44,7 +44,6 @@
         height: unset;
         line-height: dimensions.get-size(math.div(20, 24));
         padding: $grid-gap;
-        white-space: unset;
         width: dimensions.get-size(math.div(100, 24));
       }
     }

package/scss/components/modal.component.scss

@@ -23,7 +23,7 @@ $modal-padding: math.div(12, 24);
   position: fixed;
   top: 0;
   width: 100dvw;
-  z-index: var(--odx-v-layer-5);
+  z-index: var(--odx-v-layer-4);
 
   @include breakpoints.up(phone) {
     --odx-modal-margin-y: #{dimensions.get-size(3)};

package/scss/components/rail-navigation-item.component.scss

@@ -47,15 +47,13 @@
     width: 0;
 
     .odx-rail-navigation--bar & {
-      -webkit-box-orient: vertical;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
       margin: auto 0;
       opacity: unset;
       padding: 0 !important;
       white-space: unset;
       width: unset !important;
 
+      @include typography.line-clamp(2);
       @include typography.font-size(-2);
       @include dimensions.line-height(math.div(2, 3));
 

package/scss/core.scss

@@ -52,8 +52,10 @@ Layout
 @use 'components/dropdown.component';
 @use 'components/error-page.component';
 @use 'components/expandable-list-item.component';
+@use 'components/footer.component';
 @use 'components/form-field.component';
 @use 'components/header.component';
+@use 'components/header-navigation.component';
 @use 'components/icon.component';
 @use 'components/inline-message.component';
 @use 'components/link.component';