@odx/ui 1.0.0-rc.20 → 1.0.0-rc.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "1.0.0-rc.20",
+  "version": "1.0.0-rc.22",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "files": [

package/scss/abstract/_breakpoints.scss

@@ -14,7 +14,7 @@ $breakpoints: (
   @return map.keys($breakpoints);
 }
 
-@function _get-value($breakpoint) {
+@function get-breakpoint-value($breakpoint) {
   @if $breakpoint and not map.has-key($breakpoints, $breakpoint) {
     @error "Invalid breakpoint, `#{$breakpoint}` doesn't exist.";
   }
@@ -34,13 +34,13 @@ $breakpoints: (
 }
 
 @function _get-min-value($breakpoint) {
-  $value: _get-value($breakpoint);
+  $value: get-breakpoint-value($breakpoint);
 
   @return if($value != 0, $value, null);
 }
 
 @function _get-max-value($breakpoint) {
-  $value: _get-value($breakpoint);
+  $value: get-breakpoint-value($breakpoint);
 
   @return if($value > 0, $value - 1, null);
 }

package/scss/cdk/active-indicator.scss

@@ -7,7 +7,7 @@
   pointer-events: none;
   position: absolute;
   transform-origin: 0 0;
-  z-index: 0;
+  z-index: var(--odx-v-layer-1);
 
   &--horizontal {
     left: 0;

package/scss/cdk/connected-overlay.scss

@@ -9,7 +9,7 @@
 
   display: block;
   position: fixed;
-  z-index: 1337;
+  z-index: var(--odx-v-layer-3);
 
   &.is-hidden {
     opacity: 0;
@@ -32,5 +32,5 @@
   position: fixed;
   transform: rotate(45deg);
   width: dimensions.get-size(0.5);
-  z-index: 0;
+  z-index: var(--odx-v-layer-1);
 }

package/scss/components/avatar.component.scss

@@ -59,6 +59,6 @@
     position: absolute;
     top: 0;
     width: 100%;
-    z-index: 2;
+    z-index: var(--odx-v-layer-1);
   }
 }

package/scss/components/button.component.scss

@@ -1,4 +1,6 @@
+@use 'sass:map';
 @use 'sass:math';
+@use '../abstract/breakpoints';
 @use '../abstract/dimensions';
 @use '../abstract/motion';
 @use '../abstract/typography';
@@ -47,6 +49,22 @@
     @include dimensions.margin-x(-2 * $icon-margin);
   }
 
+  &[data-breakpoint]:has(> .odx-icon, > .odx-avatar) {
+    min-width: dimensions.get-size(1.5);
+  }
+
+  @each $breakpoint in breakpoints.get-breakpoint-names() {
+    @include breakpoints.down($breakpoint) {
+      &[data-breakpoint='#{$breakpoint}'] {
+        font-size: 0;
+
+        > .odx-icon {
+          @include dimensions.margin-x(-$icon-margin);
+        }
+      }
+    }
+  }
+
   &--highlight:focus-visible {
     outline-color: var(--blue-400);
   }

package/scss/components/card.component.scss

@@ -0,0 +1,172 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-card {
+  $root: &;
+  $main-padding: dimensions.get-size(math.div(12, 24));
+
+  @include motion.transition(box-shadow outline-color, color);
+  @include utils.interactive(false);
+  @include utils.with-outline-bold();
+
+  background-color: var(--odx-c-background-content);
+  behavior: button;
+  border-radius: var(--odx-v-border-radius);
+  display: block;
+  padding: $main-padding;
+  position: relative;
+
+  &.is-disabled * {
+    color: var(--odx-c-text-disabled);
+  }
+
+  &__container {
+    display: flex;
+    gap: $main-padding;
+
+    #{$root}--default & {
+      flex-direction: column;
+    }
+
+    @include breakpoints.up(phone) {
+      #{$root}--launch-tile-centered & {
+        flex-direction: column;
+      }
+    }
+  }
+
+  &__content {
+    padding-right: dimensions.get-size(math.div(40, 24));
+  }
+
+  &--default {
+    #{$root}__title {
+      line-height: dimensions.get-size(math.div(36, 24));
+      padding-right: dimensions.get-size(math.div(36, 24));
+
+      @include typography.font-weight(medium);
+    }
+  }
+
+  &:focus-visible,
+  &:hover,
+  &:focus-within:has(:focus-visible) {
+    box-shadow: var(--odx-v-box-shadow-layer-1);
+  }
+
+  &--launch-tile,
+  &--launch-tile-centered {
+    #{$root}__container {
+      @include dimensions.padding-y(0.5);
+      @include dimensions.padding-x(math.div(8, 24));
+
+      gap: dimensions.get-size(math.div(16, 24));
+
+      @include breakpoints.up(phone) {
+        @include dimensions.padding(1, bottom);
+
+        gap: dimensions.get-size(1);
+      }
+    }
+
+    .odx-avatar {
+      @include dimensions.container(math.div(64, 24));
+      @include dimensions.margin-y(math.div(4, 24));
+
+      flex: 0 0 auto;
+
+      @include breakpoints.up(phone) {
+        @include dimensions.container(math.div(128, 24));
+
+        margin: dimensions.get-size(math.div(4, 24)) auto 0;
+      }
+    }
+
+    #{$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 breakpoints.up(phone) {
+        @include dimensions.margin-y(math.div(9, 24));
+
+        font-size: dimensions.get-size(math.div(25, 24));
+      }
+    }
+
+    #{$root}__subtitle {
+      display: block;
+    }
+
+    #{$root}__content {
+      flex: 1;
+    }
+  }
+
+  @include breakpoints.up(phone) {
+    &__content {
+      padding-right: unset;
+    }
+
+    &__title,
+    &__subtitle {
+      #{$root}--launch-tile-centered & {
+        text-align: center;
+      }
+    }
+
+    &__container {
+      padding-right: unset;
+
+      #{$root}--launch-tile & {
+        @include dimensions.padding-y(1);
+      }
+      #{$root}--launch-tile-centered & {
+        gap: dimensions.get-size(math.div(16, 24));
+      }
+    }
+  }
+
+  &__footer {
+    display: flex;
+    gap: dimensions.get-size(math.div(12, 24));
+    justify-content: flex-end;
+
+    #{$root}--default & {
+      display: block;
+      margin-top: $main-padding;
+    }
+
+    @include breakpoints.up(phone) {
+      #{$root}--launch-tile-centered & {
+        justify-content: center;
+      }
+
+      padding-bottom: dimensions.get-size(math.div(12, 24));
+    }
+
+    .odx-button {
+      margin: 0;
+    }
+  }
+
+  .odx-card-menu {
+    margin: 0;
+    position: absolute;
+    right: $main-padding;
+    top: $main-padding;
+  }
+
+  &.is-disabled {
+    .odx-avatar {
+      color: var(--odx-c-text-disabled);
+      filter: saturate(0);
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+@use 'sass:math';
+@use '../abstract/motion';
+@use '../abstract/dimensions';
+
+.odx-expandable-list-item {
+  $root: &;
+
+  position: relative;
+
+  &::before {
+    @include motion.transition(border-color);
+
+    border-bottom: 1px solid var(--gray-200);
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    width: calc(100% - #{dimensions.get-size(math.div(14, 24))});
+  }
+
+  &:hover,
+  &:focus-visible,
+  &:first-child {
+    &::before {
+      border-bottom-color: transparent;
+    }
+  }
+
+  &--danger + &::before,
+  &--expanded + &::before,
+  &:hover + &::before {
+    border-color: transparent;
+  }
+
+  &--danger {
+    &::before {
+      border-bottom-color: transparent;
+    }
+  }
+
+  &--expanded {
+    &::before {
+      border-bottom-color: transparent;
+    }
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &__expand-icon {
+    @include motion.transition(transform);
+
+    position: relative;
+
+    #{$root}--expanded & {
+      transform: scaleY(-1);
+    }
+  }
+
+  &__slot {
+    .odx-list-item__content {
+      @include dimensions.padding(math.div(36, 24), left);
+    }
+  }
+}

package/scss/components/form-field.component.scss

@@ -108,7 +108,7 @@ $form-field-inner-padding: math.div(8, 24);
       left: 0;
       position: absolute;
       width: 100%;
-      z-index: 1;
+      z-index: var(--odx-v-layer-1);
     }
 
     #{$control-selector} {

package/scss/components/loading-spinner.component.scss

@@ -15,7 +15,7 @@
     scroll-behavior: contain;
     top: 0;
     width: 100%;
-    z-index: 1;
+    z-index: var(--odx-v-layer-2);
   }
 
   &__backdrop {
@@ -32,7 +32,7 @@
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    z-index: 2;
+    z-index: var(--odx-v-layer-3);
 
     &__track {
       stroke: var(--blue-700-15);

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

@@ -8,13 +8,13 @@
 @use 'main-menu-item.component';
 
 :root {
-  --odx-main-menu-max-width: 100vw;
+  --odx-main-menu-max-width: 100dvw;
   --odx-main-menu-background-color: var(--odx-c-primary);
   --odx-main-menu-text-color: var(--odx-c-primary-text);
   --odx-main-menu-highlight-color: var(--odx-c-highlight);
 
   @include breakpoints.up(phone) {
-    --odx-main-menu-max-width: min(100vw, 384px);
+    --odx-main-menu-max-width: min(100dvw, 384px);
   }
 }
 
@@ -29,12 +29,12 @@
     grid-template-rows: auto auto 1fr auto auto;
     height: 100%;
     left: 0;
-    max-height: 100vh;
+    max-height: 100dvh;
     max-width: var(--odx-main-menu-max-width);
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: 9000;
+    z-index: var(--odx-v-layer-4);
   }
 
   &__overlay {
@@ -45,7 +45,7 @@
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: 8999;
+    z-index: calc(var(--odx-v-layer-4) - 1);
   }
 
   &__actions {

package/scss/components/mainfilter-group.component.scss

@@ -0,0 +1,80 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+
+.odx-mainfilter-group {
+  --odx-input-control-background-color: var(--gray-50);
+  --odx-input-control-outline-color: var(--blue-700);
+  --odx-c-highlight: var(--blue-700);
+  --odx-input-control-outline-color-hover: var(--blue-700);
+  --odx-input-control-background-color-hover: var(--gray-100);
+  --odx-c-secondary: var(--gray-50);
+  --odx-c-secondary-hover: var(--odx-input-control-background-color-hover);
+  --odx-c-secondary-active: var(--gray-200);
+  --odx-c-focus-outline: var(--cyan-700);
+  --odx-c-focus: var(--cyan-50);
+  --odx-c-highlight-active: var(--odx-c-focus-outline);
+
+  .odx-form-field {
+    position: relative;
+
+    &__label {
+      margin-top: 0;
+      position: absolute;
+      right: 0;
+      top: dimensions.get-size(math.div(12, 24));
+      z-index: 1;
+    }
+
+    &:has(.odx-spinbox) {
+      .odx-form-field__label {
+        right: dimensions.get-size(math.div(36, 24));
+      }
+    }
+
+    &-label {
+      @include dimensions.padding-x(math.div(3, 24));
+      @include dimensions.padding-y(math.div(2, 24));
+
+      background-color: var(--odx-input-control-background-color);
+      border-radius: var(--odx-v-border-radius-controls);
+      display: inline-block;
+      font-size: dimensions.get-size(math.div(10, 24));
+      line-height: 1;
+    }
+
+    &__hint {
+      display: none;
+    }
+  }
+
+  .odx-button {
+    outline-width: var(--odx-v-outline-width);
+
+    &:not(:focus-visible) {
+      outline-color: var(--odx-input-control-outline-color);
+    }
+
+    &:focus-visible {
+      background-color: var(--odx-c-focus);
+    }
+  }
+
+  .odx-toggle-button-group {
+    margin: 0;
+
+    &.is-active {
+      &:not(.is-disabled, .is-readonly):hover {
+        background-color: unset;
+      }
+
+      &:focus-within:has(:focus-visible) {
+        background-color: transparent;
+        outline-color: transparent;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}

package/scss/components/menu.component.scss

@@ -32,6 +32,7 @@
     }
 
     .odx-action-group {
+      align-items: flex-start;
       display: grid;
       grid-gap: $grid-gap;
       grid-template-columns: repeat(3, 1fr);
@@ -43,6 +44,7 @@
         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

@@ -16,13 +16,13 @@ $modal-padding: math.div(12, 24);
   backdrop-filter: blur(var(--odx-v-backdrop-blur));
   background-color: var(--odx-c-backdrop-dark);
   display: block;
-  height: 100%;
+  height: 100dvh;
   left: 0;
   overscroll-behavior: contain;
   position: fixed;
   top: 0;
-  width: 100%;
-  z-index: 1000;
+  width: 100dvw;
+  z-index: var(--odx-v-layer-4);
 
   @include breakpoints.up(phone) {
     --odx-modal-margin-y: #{dimensions.get-size(3)};
@@ -43,9 +43,9 @@ $modal-padding: math.div(12, 24);
     display: flex;
     flex-direction: column;
     margin: var(--odx-modal-margin-y) auto 0;
-    max-height: calc(100vh - 2 * var(--odx-modal-margin-y));
+    max-height: calc(100% - var(--odx-modal-margin-y));
     min-height: dimensions.get-size(7);
-    width: min(var(--odx-modal-max-width), calc(100vw - 2 * var(--odx-modal-margin-x)));
+    width: min(var(--odx-modal-max-width), calc(100% - 2 * var(--odx-modal-margin-x)));
 
     #{$root}--xsmall & {
       --odx-modal-max-width: #{dimensions.get-size(15)};
@@ -62,12 +62,16 @@ $modal-padding: math.div(12, 24);
     #{$root}--sidesheet & {
       height: 100%;
       left: unset;
-      max-height: calc(100vh - var(--odx-modal-margin-y) - #{dimensions.get-size(1)});
+      max-height: calc(100% - var(--odx-modal-margin-y) - #{dimensions.get-size(0.5)});
       right: 0;
 
       @include breakpoints.up(phone) {
         margin-right: dimensions.get-size(0.5);
       }
+
+      @include breakpoints.down(phone) {
+        --odx-modal-max-width: 100dvw !important;
+      }
     }
 
     #{$root}--with-component & > * {

package/scss/components/select.component.scss

@@ -21,8 +21,10 @@
     width: 100%;
 
     #{$root}.is-readonly & {
-      cursor: text;
-      user-select: unset;
+      #{$root}__value {
+        cursor: text;
+        user-select: unset;
+      }
     }
   }
 
@@ -41,6 +43,10 @@
 
     color: var(--odx-input-control-color);
     opacity: 0.65;
+
+    #{$root}.is-disabled & {
+      color: inherit;
+    }
   }
 
   &__search {

package/scss/components/tab-bar.component.scss

@@ -66,7 +66,7 @@
     top: 0;
     user-select: none;
     width: 0;
-    z-index: 50;
+    z-index: var(--odx-v-layer-1);
 
     &.is-active {
       @include dimensions.padding(math.div(8, 24), (right, left));

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

@@ -29,8 +29,6 @@
   }
 
   &__title {
-    @include typography.prevent-text-overflow();
-
     font-weight: var(--odx-typography-font-weight-bold);
   }
 

package/scss/components/toast.component.scss

@@ -9,13 +9,13 @@
   display: flex;
   flex-direction: column;
   margin-top: dimensions.get-size(math.div(4, 24));
-  max-width: min(calc(100vw - 2 * var(--odx-toast-outer-offset)), dimensions.get-size(20));
+  max-width: min(calc(100dvw - 2 * var(--odx-toast-outer-offset)), dimensions.get-size(20));
   padding-top: var(--odx-toast-outer-offset);
   position: fixed;
   right: var(--odx-toast-outer-offset);
   top: 0;
   width: 100%;
-  z-index: 10;
+  z-index: var(--odx-v-layer-4);
 
   &__counter {
     align-self: center;

package/scss/components/toggle-button-group.component.scss

@@ -46,7 +46,7 @@
 
   .odx-toggle-button {
     flex: 1 1 auto;
-    z-index: 1;
+    z-index: var(--odx-v-layer-2);
   }
 
   &.has-error:not(.is-disabled, .is-readonly) {

package/scss/components/tooltip.component.scss

@@ -28,7 +28,7 @@
   &-overlay {
     .odx-cdk-connected-overlay-arrow {
       background-color: var(--odx-tooltip-background-color);
-      z-index: -1;
+      z-index: var(--odx-v-layer-1);
     }
   }
 }

package/scss/core.scss

@@ -33,21 +33,23 @@ Layout
 @use 'components/breadcrumbs.component';
 @use 'components/button-group.component';
 @use 'components/button.component';
+@use 'components/card.component';
 @use 'components/checkbox.component';
 @use 'components/chip.component';
 @use 'components/circular-progress.component';
 @use 'components/content-box.component';
 @use 'components/dropdown.component';
+@use 'components/expandable-list-item.component';
 @use 'components/form-field.component';
 @use 'components/header.component';
 @use 'components/icon.component';
 @use 'components/inline-message.component';
-@use 'components/launch-tile.component';
 @use 'components/link.component';
 @use 'components/list.component';
 @use 'components/list-item.component';
 @use 'components/loading-spinner.component';
 @use 'components/logo.component';
+@use 'components/mainfilter-group.component';
 @use 'components/main-menu.component';
 @use 'components/menu.component';
 @use 'components/modal.component';

package/scss/reset.scss

@@ -5,6 +5,7 @@
 
 * {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 
   &:focus-visible {
     outline: none;

package/scss/variables/_visuals.scss

@@ -7,6 +7,11 @@
   --odx-v-box-shadow-layer-1: 0 2px 6px 0 var(--odx-c-box-shadow);
   --odx-v-box-shadow-layer-2: 0 4px 12px 0 var(--odx-c-box-shadow);
 
+  --odx-v-layer-1: 0;
+  --odx-v-layer-2: 10;
+  --odx-v-layer-3: 20;
+  --odx-v-layer-4: 9000;
+
   --odx-v-transition-duration: 250ms;
   --odx-v-transition-easing-fn: ease;
   --odx-v-outline-width: 1px;