@odx/ui 1.0.0-rc.5 → 1.0.0-rc.7

package/package.json

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

package/scss/cdk/connected-overlay.scss

@@ -0,0 +1,36 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-cdk-connected-overlay {
+  @include motion.transition(opacity visibility);
+
+  display: block;
+  position: fixed;
+  z-index: 1337;
+
+  &.is-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &__content {
+    left: 0 !important;
+    position: relative !important;
+    top: 0 !important;
+
+    > * {
+      max-height: inherit;
+    }
+  }
+}
+
+.odx-cdk-connected-overlay-arrow {
+  height: dimensions.get-size(0.5);
+  position: fixed;
+  transform: rotate(45deg);
+  width: dimensions.get-size(0.5);
+  z-index: 0;
+}

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

@@ -7,17 +7,15 @@
 .odx-accordion-item {
   $root: &;
 
-  @include dimensions.padding(math.div(1, 6), 'bottom');
+  @include motion.transition(color);
+  @include dimensions.padding(math.div(6, 24), top);
+  @include dimensions.padding(math.div(5, 24), bottom);
 
   border-bottom: 1px solid var(--odx-input-control-outline-color);
   display: block;
 
-  &:not(:last-child) {
-    @include dimensions.margin(1, 'bottom');
-  }
-
   &__panel {
-    @include dimensions.padding-x(math.div(4, 24));
+    @include dimensions.padding-x(math.div(8, 24));
     @include dimensions.line-height(1.5, 1);
     @include motion.transition(background-color outline-color);
     @include utils.interactive(true);
@@ -46,8 +44,7 @@
   }
 
   &__slot {
-    @include dimensions.padding-x(math.div(4, 24));
-    @include dimensions.padding-y(math.div(8, 24));
+    @include dimensions.padding(math.div(8, 24));
 
     overflow: hidden;
   }

package/scss/components/button.component.scss

@@ -72,9 +72,10 @@
   }
 
   &--ghost {
+    @include utils.with-outline;
+
     background-color: transparent;
     color: var(--odx-c-link);
-    outline-width: 1px;
 
     &:hover {
       background-color: var(--blue-700-5);

package/scss/components/checkbox.component.scss

@@ -12,7 +12,7 @@
   display: inline-block;
 
   &.is-disabled {
-    color: var(--odx-input-control-color-disabled);
+    color: var(--odx-control-color-disabled);
   }
 
   &.is-readonly {

package/scss/components/dropdown.component.scss

@@ -0,0 +1,20 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+
+.odx-dropdown {
+  background-color: var(--odx-c-background-content);
+  border-radius: var(--odx-v-border-radius);
+  box-shadow: var(--odx-v-backdrop-box-shadow-layer-2);
+  display: block;
+  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;
+    overflow: auto;
+  }
+}

package/scss/components/inline-message.component.scss

@@ -0,0 +1,33 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+
+.odx-inline-message {
+  --odx-c-default: var(--blue-50);
+  --odx-c-warning: var(--yellow-50);
+  --odx-c-danger: var(--red-00);
+  --odx-c-success: var(--green-00);
+
+  $variants: default, warning, danger, success;
+
+  @include dimensions.padding(math.div(10, 24));
+
+  display: flex;
+  gap: dimensions.get-size(math.div(10, 24));
+
+  @each $variant in $variants {
+    &--#{$variant} {
+      background-color: var(--odx-c-#{$variant});
+    }
+  }
+
+  &--danger {
+    color: var(--red-700);
+  }
+
+  &__content {
+    @include typography.font-size(-1);
+
+    overflow: hidden;
+  }
+}

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

@@ -10,11 +10,10 @@
   @include dimensions.padding-x(math.div(1, 3));
   @include dimensions.line-height(2, 1);
   @include motion.transition(border-bottom-color background-color outline-color color);
-  @include typography.prevent-text-overflow();
   @include utils.interactive(false);
   @include utils.vertical-center-content();
 
-  border-radius: var(--odx-v-border-radius);
+  border-radius: var(--odx-v-border-radius-controls);
   gap: dimensions.get-size(math.div(1, 3));
   position: relative;
 
@@ -30,16 +29,16 @@
     @include motion.transition(border-color);
 
     border-bottom: 1px solid var(--gray-200);
-    bottom: 0;
     content: '';
     display: block;
     position: absolute;
-    width: calc(100% - #{dimensions.get-size(math.div(2, 3))});
+    top: 0;
+    width: calc(100% - #{dimensions.get-size(math.div(14, 24))});
   }
 
   &:hover,
   &:focus-visible,
-  &:last-child {
+  &:first-child {
     &::before {
       border-bottom-color: transparent;
     }
@@ -49,8 +48,14 @@
     background-color: var(--blue-700-5);
   }
 
+  &--danger + &::before,
+  &--selected + &::before,
+  &:hover + &::before {
+    border-color: transparent;
+  }
+
   &.is-disabled {
-    color: var(--odx-input-control-color-disabled);
+    color: var(--odx-control-color-disabled);
     pointer-events: none;
   }
 

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

@@ -48,6 +48,7 @@
   }
 
   &-parent {
+    overflow: hidden;
     user-select: none;
   }
 }

package/scss/components/radio-button.component.scss

@@ -11,7 +11,7 @@
   display: block;
 
   &.is-disabled {
-    color: var(--odx-input-control-color-disabled);
+    color: var(--odx-control-color-disabled);
   }
 
   &.is-readonly {

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

@@ -31,7 +31,7 @@
 
   &.is-disabled {
     background-color: transparent;
-    color: var(--odx-input-control-color-disabled);
+    color: var(--odx-control-color-disabled);
     pointer-events: none;
   }
 

package/scss/components/select.component.scss

@@ -0,0 +1,107 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+:root {
+  --odx-select-max-height: 220px;
+}
+
+.odx-select {
+  $root: &;
+
+  &__trigger {
+    @include utils.vertical-center-content();
+
+    cursor: pointer;
+    flex: 1 1 100%;
+    gap: dimensions.get-size(math.div(6, 24));
+    height: 100%;
+    width: 100%;
+
+    #{$root}.is-readonly & {
+      cursor: text;
+      user-select: unset;
+    }
+  }
+
+  &__placeholder,
+  &__value {
+    @include dimensions.padding-y(math.div(4, 24));
+    @include typography.prevent-text-overflow();
+
+    flex: 1 1 auto;
+    gap: dimensions.get-size(math.div(4, 24));
+    user-select: none;
+  }
+
+  &__placeholder {
+    @include typography.font-weight(normal);
+
+    color: var(--odx-input-control-color);
+    opacity: 0.65;
+  }
+
+  &__search {
+    height: 100%;
+    outline: inherit;
+    padding: 0 !important;
+  }
+
+  &__indicator {
+    @include motion.transition(transform opacity);
+    @include dimensions.margin(math.div(-2, 24), right);
+
+    margin-left: auto;
+
+    #{$root}.is-open & {
+      transform: rotateX(180deg);
+    }
+
+    #{$root}.is-readonly & {
+      opacity: 0;
+    }
+  }
+}
+
+.odx-select-dropdown {
+  display: flex;
+  flex-direction: column;
+  max-height: var(--odx-select-max-height);
+  min-height: dimensions.get-size(1.5);
+}
+
+.odx-option {
+  @include dimensions.line-height(1.5, 1);
+  @include dimensions.margin(math.div(4, 24), bottom);
+  @include dimensions.padding-x(0.5);
+  @include motion.transition(background-color color outline-color);
+  @include typography.font-weight(normal);
+
+  border-radius: var(--odx-v-border-radius-controls);
+  cursor: pointer;
+  user-select: none;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.is-active,
+  &:hover {
+    background-color: var(--gray-50);
+  }
+
+  &.is-selected {
+    background-color: var(--cyan-500-15);
+  }
+
+  &.is-disabled {
+    color: var(--odx-control-color-disabled);
+    pointer-events: none;
+  }
+
+  > .odx-checkbox {
+    @include dimensions.margin(math.div(8, 24), right);
+  }
+}

package/scss/components/slider.component.scss

@@ -0,0 +1,130 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+
+.odx-slider {
+  --odx-control-outline-color: var(--gray-200);
+  --odx-control-background-color: var(--gray-100);
+  --odx-control-background-color-hover: var(--cyan-600);
+  $root: &;
+  $thumb-size: dimensions.get-size(math.div(20, 24));
+  $track-height: dimensions.get-size(math.div(4, 24));
+
+  appearance: none;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+
+  @mixin track-container() {
+    background-color: var(--odx-control-background-color);
+    border-radius: 2px;
+    outline: 1px solid var(--odx-control-outline-color);
+    outline-offset: -1px;
+  }
+
+  @mixin track-progress() {
+    border-radius: 2px;
+    height: $track-height;
+    position: relative;
+  }
+
+  @mixin thumb() {
+    @include motion.transition(background-color outline-color);
+
+    appearance: none;
+    background-color: var(--odx-control-background-color-selected);
+    border-radius: 50%;
+    height: $thumb-size;
+    margin-top: calc(#{$thumb-size} / -2 + #{$track-height} / 2);
+    outline: 1px solid var(--white);
+    width: $thumb-size;
+  }
+
+  &::-webkit-slider-container {
+    @include track-container();
+
+    margin: calc((#{$thumb-size} - #{$track-height}) / 2) 0;
+  }
+
+  &::-moz-range-track {
+    @include track-container();
+
+    height: $track-height;
+  }
+
+  &::-webkit-slider-runnable-track {
+    @include track-progress();
+
+    background: linear-gradient(var(--odx-control-background-color-selected), var(--odx-control-background-color-selected)) 0 / var(--odx-slider-filled) 100%
+        no-repeat,
+      transparent;
+  }
+
+  &::-moz-range-progress {
+    @include track-progress();
+
+    background: var(--odx-control-background-color-selected);
+  }
+
+  &::-webkit-slider-thumb {
+    @include thumb();
+
+    position: relative;
+  }
+
+  &::-moz-range-thumb {
+    @include thumb();
+
+    border: unset;
+  }
+
+  &.is-disabled {
+    &::-webkit-slider-container {
+      background-color: var(--odx-control-background-color-disabled);
+      outline: 1px solid transparent;
+    }
+
+    &::-moz-range-track {
+      background-color: var(--odx-control-background-color-disabled);
+      outline: 1px solid transparent;
+    }
+
+    &::-webkit-slider-thumb {
+      background-color: var(--odx-c-text-disabled);
+      outline: 1px solid transparent;
+    }
+
+    &::-moz-range-thumb {
+      background-color: var(--odx-c-text-disabled);
+      outline: 1px solid transparent;
+    }
+
+    &::-webkit-slider-runnable-track {
+      background-image: linear-gradient(var(--odx-c-text-disabled), var(--odx-c-text-disabled));
+    }
+
+    &::-moz-range-progress {
+      background-image: linear-gradient(var(--odx-c-text-disabled), var(--odx-c-text-disabled));
+    }
+  }
+
+  &:focus-visible {
+    &::-webkit-slider-thumb {
+      outline: 2px solid var(--odx-c-highlight-active);
+    }
+
+    &::-moz-range-thumb {
+      outline: 2px solid var(--odx-c-highlight-active);
+    }
+  }
+
+  &:hover:not(.is-disabled) {
+    &::-webkit-slider-thumb {
+      background-color: var(--odx-control-background-color-hover);
+    }
+
+    &::-moz-range-thumb {
+      background-color: var(--odx-control-background-color-hover);
+    }
+  }
+}

package/scss/components/spinbox.component.scss

@@ -0,0 +1,124 @@
+@use 'sass:math';
+@use '../layout/helpers';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use '../abstract/motion';
+
+.odx-form-field__control:has(.odx-spinbox) {
+  background-color: transparent !important;
+  outline-color: transparent !important;
+
+  .odx-form-field-control {
+    padding: 0;
+  }
+
+  &::after {
+    content: none;
+  }
+
+  &.has-error & {
+    background-color: transparent;
+    outline-color: transparent;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+.odx-spinbox {
+  $root: &;
+
+  align-items: stretch;
+  display: flex;
+  flex: 1;
+  gap: 1px;
+
+  &__input {
+    @include typography.font-weight(medium);
+    @include dimensions.padding-x(math.div(8, 24));
+
+    appearance: textfield;
+    text-align: center;
+    width: 100%;
+
+    &::placeholder {
+      @include typography.font-weight(normal);
+
+      color: var(--odx-input-control-color);
+      opacity: 0.65;
+    }
+
+    &::-webkit-inner-spin-button {
+      appearance: none;
+    }
+  }
+
+  &__input,
+  &__action {
+    @include motion.transition(background-color border-color color);
+
+    background-color: var(--odx-input-control-background-color);
+    border: 1px solid var(--odx-input-control-outline-color);
+
+    #{$root}.has-error & {
+      background-color: var(--odx-input-control-background-color-error);
+      border-color: var(--odx-input-control-outline-color-error) !important;
+    }
+
+    #{$root} &:hover {
+      background-color: var(--odx-input-control-background-color-hover);
+      border-color: var(--odx-input-control-outline-color-hover);
+    }
+
+    #{$root} &:active {
+      background-color: var(--odx-input-control-outline-color-hover);
+      border-color: var(--odx-input-control-outline-color-hover);
+    }
+
+    #{$root}.is-readonly & {
+      background-color: var(--odx-input-control-outline-color-disabled);
+      border-color: var(--odx-input-control-outline-color-readonly) !important;
+    }
+
+    #{$root} &:focus-visible {
+      background-color: var(--odx-c-focus);
+      border-color: var(--odx-c-focus-outline) !important;
+    }
+
+    #{$root}.is-disabled & {
+      @include utils.non-interactive();
+
+      background-color: var(--odx-input-control-background-color-disabled);
+      border-color: var(--odx-input-control-outline-color-disabled) !important;
+      color: var(--odx-input-control-color-disabled);
+    }
+  }
+
+  &__action {
+    border-radius: var(--odx-v-border-radius-controls);
+    flex: 0 0 dimensions.get-size(math.div(36, 24));
+    height: 100%;
+    margin: 0;
+    outline: none;
+
+    &:first-child {
+      border-bottom-right-radius: 0;
+      border-right: unset;
+      border-top-right-radius: 0;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: 0;
+      border-left: unset;
+      border-top-left-radius: 0;
+    }
+
+    #{$root}.is-readonly & {
+      @include utils.non-interactive();
+
+      color: var(--odx-input-control-color-disabled);
+    }
+  }
+}

package/scss/components/switch.component.scss

@@ -21,7 +21,7 @@
   display: inline-block;
 
   &.is-disabled {
-    color: var(--odx-input-control-color-disabled);
+    color: var(--odx-control-color-disabled);
   }
 
   &.is-readonly {

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

@@ -4,41 +4,42 @@
 @use '../abstract/utils';
 
 .odx-toggle-button-group {
+  --odx-toggle-button-border-radius: 2px;
+
   $root: &;
   @include dimensions.height(2, 1.5);
   @include dimensions.padding-x(math.div(6, 24));
-  @include motion.transition(background-color);
+  @include motion.transition(background-color outline-color);
   @include utils.center-content(true);
-  @include utils.with-outline();
+  @include utils.with-outline;
 
   border-radius: var(--odx-v-border-radius-controls);
-  color: var(--odx-control-color);
   column-gap: dimensions.get-size(math.div(6, 24));
   position: relative;
 
   &__indicator {
     @include dimensions.height(2, 1);
-    @include utils.with-outline();
+    @include utils.with-outline;
 
     background-color: var(--odx-c-highlight);
-    border-radius: 2px;
+    border-radius: var(--odx-toggle-button-border-radius);
 
     #{$root}.is-disabled & {
-      background-color: var(--odx-control-background-color-disabled);
+      background-color: var(--odx-c-secondary-disabled);
     }
 
     #{$root}.is-readonly & {
-      background-color: var(--odx-control-background-color-readonly);
-      outline-color: var(--odx-control-outline-color-readonly);
+      background-color: transparent;
+      outline-color: currentcolor;
     }
 
     #{$root}.is-readonly.is-disabled & {
       background-color: transparent;
-      outline-color: var(--odx-control-color-disabled);
+      outline-color: var(--odx-c-secondary-disabled);
     }
 
     #{$root}:focus-within:has(:focus-visible) & {
-      outline-color: var(--odx-control-outline-color-selected-focus);
+      outline-color: var(--odx-c-highlight-active);
     }
   }
 
@@ -51,8 +52,11 @@
     outline-color: var(--odx-c-error-outline);
   }
 
-  &:not(.is-disabled, .is-readonly):hover,
-  &:focus-within:has(:focus-visible) {
-    background-color: var(--blue-700-5);
+  &.is-active {
+    @include utils.focus-state($focus-within: true);
+
+    &:not(.is-disabled, .is-readonly):hover {
+      background-color: var(--blue-700-5);
+    }
   }
 }