@odx/ui 3.0.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @odx/ui
 
+## 3.2.0
+
+### Minor Changes
+
+- 3ebfb3c: Add brand-logo component which can be used to display the ODX brand logo
+
+### Patch Changes
+
+- c357174: Use CSS only icons for breadcrumb separator icons
+- 753c400: Add missing odx-v-layer-6 CSS variable
+
+## 3.1.0
+
+### Minor Changes
+
+- e9ca1be: Added `muted` state to list item component
+
+### Patch Changes
+
+- c618486: Fixed z-layer stacking issues
+
+  Fixed over position calculation by using CSS variables
+
+  WithTabIndex directive now applies tabindex correctly
+
+  Fixed various linting errors
+
+- a62275c: Reduce buffer size of used `shareReplay` operators in order to reduce runtime memory consumption
+
 ## 3.0.0
 
 ### Major Changes

package/core-theme.css

@@ -312,6 +312,7 @@
 }
 
 :root {
+  --odx-v-max-page-width: 1440px;
   --odx-v-border-radius: calc(var(--odx-typography-base-size) * 0.375);
   --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
   --odx-v-backdrop-blur: 3px;
@@ -322,6 +323,7 @@
   --odx-v-layer-3: 20;
   --odx-v-layer-4: 9000;
   --odx-v-layer-5: 9500;
+  --odx-v-layer-6: 9900;
   --odx-v-transition-duration: 250ms;
   --odx-v-transition-easing-fn: ease;
   --odx-v-outline-width: 1px;
@@ -2068,11 +2070,15 @@ html body .odx-fs-italic {
 }
 .odx-cdk-connected-overlay__content {
   left: 0 !important;
+  max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
+  max-width: var(--odx-cdk-connected-overlay-max-width-modified, var(--odx-cdk-connected-overlay-max-width, unset));
+  min-height: var(--odx-cdk-connected-overlay-min-height-modified, var(--odx-cdk-connected-overlay-min-height, unset));
+  min-width: var(--odx-cdk-connected-overlay-min-width-modified, var(--odx-cdk-connected-overlay-min-width, unset));
   position: relative !important;
   top: 0 !important;
 }
 .odx-cdk-connected-overlay__content > * {
-  max-height: inherit;
+  max-height: var(--odx-cdk-connected-overlay-max-height, inherit);
 }
 
 .odx-cdk-connected-overlay-arrow {
@@ -2330,15 +2336,15 @@ html body .odx-fs-italic {
   border-radius: var(--odx-v-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
-  min-height: inherit;
+  min-height: var(--odx-cdk-connected-overlay-min-height, inherit);
 }
 .odx-dropdown__inner {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   border-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5) solid transparent;
   border-top: calc(var(--odx-vertical-rythm-base-size) * 0.5) solid transparent;
-  max-height: inherit;
-  min-height: inherit;
+  max-height: var(--odx-cdk-connected-overlay-max-height, inherit);
+  min-height: var(--odx-cdk-connected-overlay-min-height, inherit);
   overflow: auto;
   overscroll-behavior: contain;
 }
@@ -2917,20 +2923,29 @@ html body .odx-fs-italic {
   flex-wrap: wrap;
   gap: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
 }
-.odx-breadcrumbs .odx-link:last-child {
-  font-weight: var(--odx-typography-font-weight-bold);
-  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
-  color: var(--odx-c-text);
+.odx-breadcrumbs .odx-link {
+  white-space: nowrap;
 }
-.odx-breadcrumbs .odx-link:visited {
-  color: var(--odx-c-link);
+.odx-breadcrumbs .odx-link:not(:last-child) {
+  margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
 }
-.odx-breadcrumbs .odx-icon {
+.odx-breadcrumbs .odx-link:not(:last-child)::after {
   color: var(--gray-500);
+  content: "\f158";
+  display: inline-block;
+  font-family: "core-icons";
   font-size: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  pointer-events: none;
+  position: absolute;
+  margin-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
 }
-.odx-breadcrumbs .odx-icon::before {
-  position: unset;
+.odx-breadcrumbs .odx-link:visited {
+  color: var(--odx-c-link);
+}
+.odx-breadcrumbs .odx-link:last-child, .odx-breadcrumbs .odx-link:last-child:visited {
+  font-weight: var(--odx-typography-font-weight-bold);
+  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
+  color: var(--odx-c-text);
 }
 
 .odx-button-group {
@@ -3020,6 +3035,20 @@ html body .odx-fs-italic {
   border-radius: 0;
 }
 
+.odx-brand-logo {
+  color: var(--odx-c-text);
+  display: inline-block;
+  font-weight: var(--odx-typography-font-weight-bold);
+  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
+}
+.odx-brand-logo::before {
+  color: var(--odx-c-highlight);
+  content: "O";
+}
+.odx-brand-logo::after {
+  content: "DX";
+}
+
 :root {
   --odx-card-avatar-size: 64px;
   --odx-card-content-vertical-alignment: center;
@@ -4087,12 +4116,12 @@ html body .odx-fs-italic {
   margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
 }
-.odx-header:has(.odx-title, .odx-header__title) > .odx-logo {
+.odx-header:has(> .odx-title, > .odx-header__title) > .odx-logo {
   display: none;
   margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
 }
 @media (min-width: 768px) {
-  .odx-header:has(.odx-title, .odx-header__title) > .odx-logo {
+  .odx-header:has(> .odx-title, > .odx-header__title) > .odx-logo {
     display: block;
   }
 }
@@ -4303,8 +4332,11 @@ html body .odx-fs-italic {
 .odx-list-item > [odxListItemSuffix] {
   margin-left: auto;
 }
-.odx-list-item:not(.is-disabled) {
-  cursor: pointer;
+.odx-list-item.odx-list-item--muted {
+  cursor: default;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
 }
 .odx-list-item::before {
   transition-delay: 0ms;
@@ -4319,16 +4351,16 @@ html body .odx-fs-italic {
   top: 0;
   width: calc(100% - calc(var(--odx-vertical-rythm-base-size) * 0.6667));
 }
-.odx-list-item:focus-visible {
+.odx-list-item:focus-visible:not(.odx-list-item--muted) {
   --separator-color: transparent !important;
 }
 @media (hover: hover){
-.odx-list-item:hover {
+.odx-list-item:hover:not(.odx-list-item--muted) {
   --separator-color: transparent !important;
 }
 }
 @media (hover: hover){
-.odx-list-item:hover {
+.odx-list-item:hover:not(.odx-list-item--muted) {
   background-color: var(--odx-c-ghost-hover);
 }
 }
@@ -4336,7 +4368,7 @@ html body .odx-fs-italic {
   --separator-color: transparent !important;
 }
 @media (hover: hover){
-.odx-list-item:hover+.odx-list-item {
+.odx-list-item:hover:not(.odx-list-item--muted)+.odx-list-item {
   --separator-color: transparent !important;
 }
 }
@@ -4351,7 +4383,7 @@ html body .odx-fs-italic {
   color: var(--odx-c-danger-text);
 }
 @media (hover: hover){
-.odx-list-item--danger:hover {
+.odx-list-item--danger:hover:not(.odx-list-item--muted) {
   background-color: var(--odx-c-danger-hover);
 }
 }
@@ -4363,7 +4395,7 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-selected);
 }
 @media (hover: hover){
-.odx-list-item.is-selected:hover {
+.odx-list-item.is-selected:hover:not(.odx-list-item--muted) {
   background-color: var(--odx-c-selected-hover);
 }
 }
@@ -4371,7 +4403,7 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-danger-active);
 }
 @media (hover: hover){
-.odx-list-item.is-selected.odx-list-item--danger:hover {
+.odx-list-item.is-selected.odx-list-item--danger:hover:not(.odx-list-item--muted) {
   background-color: var(--red-800);
 }
 }
@@ -4690,7 +4722,7 @@ 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);
-  z-index: var(--odx-v-layer-5);
+  z-index: var(--odx-v-layer-6);
 }
 .odx-main-menu__inner {
   background-color: var(--odx-main-menu-background-color);
@@ -4850,7 +4882,7 @@ html body .odx-fs-italic {
   position: fixed;
   top: 0;
   width: 100dvw;
-  z-index: var(--odx-v-layer-4);
+  z-index: var(--odx-v-layer-5);
 }
 @media (min-width: 480px) {
   .odx-modal {

package/package.json

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

package/scss/cdk/connected-overlay.scss

@@ -22,11 +22,15 @@
 
   &__content {
     left: 0 !important;
+    max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
+    max-width: var(--odx-cdk-connected-overlay-max-width-modified, var(--odx-cdk-connected-overlay-max-width, unset));
+    min-height: var(--odx-cdk-connected-overlay-min-height-modified, var(--odx-cdk-connected-overlay-min-height, unset));
+    min-width: var(--odx-cdk-connected-overlay-min-width-modified, var(--odx-cdk-connected-overlay-min-width, unset));
     position: relative !important;
     top: 0 !important;
 
     > * {
-      max-height: inherit;
+      max-height: var(--odx-cdk-connected-overlay-max-height, inherit);
     }
   }
 }

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

@@ -0,0 +1,17 @@
+@use '../abstract/typography';
+
+.odx-brand-logo {
+  color: var(--odx-c-text);
+  display: inline-block;
+
+  @include typography.font-weight(bold);
+
+  &::before {
+    color: var(--odx-c-highlight);
+    content: 'O';
+  }
+
+  &::after {
+    content: 'DX';
+  }
+}

package/scss/components/breadcrumbs.component.scss

@@ -2,6 +2,7 @@
 @use '../abstract/dimensions';
 @use '../abstract/utils';
 @use '../abstract/typography';
+@use '@odx/icons/core/core-utils' as icons;
 
 .odx-breadcrumbs {
   @include dimensions.padding-x(1);
@@ -12,23 +13,33 @@
   gap: dimensions.get-size(math.div(8, 24));
 
   .odx-link {
-    &:last-child {
-      @include typography.font-weight(bold);
+    white-space: nowrap;
 
-      color: var(--odx-c-text);
+    &:not(:last-child) {
+      @include dimensions.margin(math.div(20, 24), right);
+
+      &::after {
+        color: var(--gray-500);
+        content: icons.get-icon-glyph('chevron-right');
+        display: inline-block;
+        font-family: icons.get-font-family();
+        font-size: dimensions.get-size(math.div(12, 24));
+        pointer-events: none;
+        position: absolute;
+
+        @include dimensions.margin(math.div(12, 24), left);
+      }
     }
 
     &:visited {
       color: var(--odx-c-link);
     }
-  }
 
-  .odx-icon {
-    color: var(--gray-500);
-    font-size: dimensions.get-size(math.div(12, 24));
+    &:last-child,
+    &:last-child:visited {
+      @include typography.font-weight(bold);
 
-    &::before {
-      position: unset;
+      color: var(--odx-c-text);
     }
   }
 }

package/scss/components/dropdown.component.scss

@@ -8,15 +8,15 @@ $dropdown-open-selector: '.odx-dropdown-host[aria-expanded="true"]';
   border-radius: var(--odx-v-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
-  min-height: inherit;
+  min-height: var(--odx-cdk-connected-overlay-min-height, inherit);
 
   &__inner {
     @include dimensions.padding-x(0.5);
 
     border-bottom: dimensions.get-size(0.5) solid transparent;
     border-top: dimensions.get-size(0.5) solid transparent;
-    max-height: inherit;
-    min-height: inherit;
+    max-height: var(--odx-cdk-connected-overlay-max-height, inherit);
+    min-height: var(--odx-cdk-connected-overlay-min-height, inherit);
     overflow: auto;
     overscroll-behavior: contain;
   }

package/scss/components/header.component.scss

@@ -35,7 +35,7 @@
     padding-right: dimensions.get-size(0.5);
   }
 
-  &:has(.odx-title) > .odx-logo {
+  &:has(> .odx-title) > .odx-logo {
     display: none;
     margin-right: dimensions.get-size(0.5);
 

package/scss/components/list-item.component.scss

@@ -6,6 +6,7 @@
 
 .odx-list-item {
   $root: &;
+  $muted-selector: #{$root}--muted;
 
   --separator-color: var(--odx-c-separator);
 
@@ -26,8 +27,9 @@
     margin-left: auto;
   }
 
-  &:not(.is-disabled) {
-    cursor: pointer;
+  &#{$muted-selector} {
+    cursor: default;
+    user-select: text;
   }
 
   &::before {
@@ -44,16 +46,18 @@
 
   &:hover,
   &:focus-visible {
-    --separator-color: transparent !important;
+    &:not(#{$muted-selector}) {
+      --separator-color: transparent !important;
+    }
   }
 
-  &:hover {
+  &:hover:not(#{$muted-selector}) {
     background-color: var(--odx-c-ghost-hover);
   }
 
   &--danger + &,
   &.is-selected + &,
-  &:hover + & {
+  &:hover:not(#{$muted-selector}) + & {
     --separator-color: transparent !important;
   }
 
@@ -69,7 +73,7 @@
     background-color: var(--odx-c-danger);
     color: var(--odx-c-danger-text);
 
-    &:hover {
+    &:hover:not(#{$muted-selector}) {
       background-color: var(--odx-c-danger-hover);
     }
 
@@ -83,14 +87,14 @@
 
     background-color: var(--odx-c-selected);
 
-    &:hover {
+    &:hover:not(#{$muted-selector}) {
       background-color: var(--odx-c-selected-hover);
     }
 
     &#{$root}--danger {
       background-color: var(--odx-c-danger-active);
 
-      &:hover {
+      &:hover:not(#{$muted-selector}) {
         background-color: var(--red-800);
       }
 

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

@@ -28,7 +28,7 @@
   --odx-area-header-title-color: var(--odx-main-menu-highlight-color);
   --odx-area-header-subtitle-color: var(--odx-c-text-inverse);
 
-  z-index: var(--odx-v-layer-5);
+  z-index: var(--odx-v-layer-6);
 
   &__inner {
     background-color: var(--odx-main-menu-background-color);

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-4);
+  z-index: var(--odx-v-layer-5);
 
   @include breakpoints.up(phone) {
     --odx-modal-margin-y: #{dimensions.get-size(3)};

package/scss/core.scss

@@ -40,6 +40,7 @@ Layout
 @use 'components/breadcrumbs.component';
 @use 'components/button-group.component';
 @use 'components/button.component';
+@use 'components/brand-logo.component';
 @use 'components/card.component';
 @use 'components/calendar.component';
 @use 'components/checkbox.component';

package/scss/variables/_visuals.scss

@@ -1,4 +1,5 @@
 :root {
+  --odx-v-max-page-width: 1440px;
   --odx-v-border-radius: calc(var(--odx-typography-base-size) * 0.375);
   --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
 
@@ -12,6 +13,7 @@
   --odx-v-layer-3: 20;
   --odx-v-layer-4: 9000;
   --odx-v-layer-5: 9500;
+  --odx-v-layer-6: 9900;
 
   --odx-v-transition-duration: 250ms;
   --odx-v-transition-easing-fn: ease;