@odx/ui 1.0.0-rc.4 → 1.0.0-rc.6

package/scss/cdk/active-indicator.scss

@@ -0,0 +1,25 @@
+@use '../abstract/motion';
+
+.odx-cdk-active-indicator {
+  @include motion.transition(all);
+
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transform-origin: 0 0;
+  z-index: 0;
+
+  &--horizontal {
+    left: 0;
+    width: 0;
+  }
+
+  &--vertical {
+    height: 0;
+    top: 0;
+  }
+
+  &--is-active {
+    opacity: 1;
+  }
+}

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/area-header.component.scss

@@ -41,14 +41,14 @@
 
   &__title {
     @extend .odx-title;
-    @extend .odx-title--6;
+    @extend .odx-title-6;
 
     color: var(--odx-area-header-title-color);
   }
 
   &__subtitle {
     @extend .odx-subtitle;
-    @extend .odx-title--6;
+    @extend .odx-subtitle-6;
 
     color: var(--odx-area-header-subtitle-color);
   }
@@ -94,7 +94,7 @@
     }
 
     .odx-area-header__title {
-      @extend .odx-title--5;
+      @extend .odx-title-5;
     }
   }
 
@@ -106,7 +106,7 @@
     }
 
     .odx-area-header__title {
-      @extend .odx-title--4;
+      @extend .odx-title-4;
 
       @include breakpoints.down(tablet) {
         @include dimensions.line-height(1);
@@ -132,11 +132,11 @@
     }
 
     .odx-area-header__title {
-      @extend .odx-title--2;
+      @extend .odx-title-2;
     }
 
     .odx-area-header__subtitle {
-      @extend .odx-title--5;
+      @extend .odx-subtitle-5;
     }
 
     .odx-avatar {

package/scss/components/button.component.scss

@@ -19,6 +19,7 @@
   @include typography.font-weight(medium);
   @include utils.center-content(true);
   @include utils.interactive($with-background: false);
+  @include utils.with-outline-bold;
 
   border-radius: var(--odx-v-border-radius-controls);
   min-width: dimensions.get-size(1.5);
@@ -71,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/form-field.component.scss

@@ -21,7 +21,7 @@ $form-field-inner-padding: math.div(8, 24);
 
 .odx-form-field {
   $root: &;
-  $control-selector: '> *:not(.odx-form-field__prefix, .odx-form-field__suffix)';
+  $control-selector: '.odx-form-field-control';
 
   @include dimensions.padding($form-field-label-height, top);
 
@@ -88,7 +88,7 @@ $form-field-inner-padding: math.div(8, 24);
     @include dimensions.min-height(1.5);
     @include motion.transition(background-color color outline-color);
     @include utils.with-outline();
-    @include utils.focus-state(true, true, $focus-within-selector: $control-selector);
+    @include utils.focus-state(true, true, $control-selector);
 
     background-color: var(--odx-input-control-background-color);
     border-radius: var(--odx-v-border-radius-controls);
@@ -121,8 +121,8 @@ $form-field-inner-padding: math.div(8, 24);
       &::placeholder {
         @include typography.font-weight(normal);
 
-        color: var(--odx-input-control-placeholder-color);
-        opacity: 1;
+        color: var(--odx-input-control-color);
+        opacity: 0.65;
       }
     }
 
@@ -169,6 +169,10 @@ $form-field-inner-padding: math.div(8, 24);
 
       #{$control-selector} {
         @include utils.non-interactive;
+
+        &::placeholder {
+          color: var(--odx-input-control-color-disabled);
+        }
       }
     }
 
@@ -190,9 +194,9 @@ $form-field-inner-padding: math.div(8, 24);
   }
 }
 
-.odx-form-group,
-.odx-form-field {
-  &.is-readonly .odx-form-field__info {
+.odx-form-field.is-readonly,
+.odx-form-group:has(.odx-form-field.is-readonly) {
+  .odx-form-field__info {
     @include utils.non-interactive();
 
     opacity: 0;

package/scss/components/header.component.scss

@@ -24,7 +24,7 @@
 
   &__title {
     @extend .odx-title;
-    @extend .odx-title--6;
+    @extend .odx-title-6;
     @include typography.prevent-text-overflow();
   }
 

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

@@ -0,0 +1,106 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/motion';
+@use '../abstract/typography';
+
+.odx-list-item {
+  $root: &;
+
+  @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 utils.interactive(false);
+  @include utils.vertical-center-content();
+
+  border-radius: var(--odx-v-border-radius-controls);
+  gap: dimensions.get-size(math.div(1, 3));
+  position: relative;
+
+  > [odxListSuffix] {
+    margin-left: auto;
+  }
+
+  &:not(.is-disabled) {
+    cursor: pointer;
+  }
+
+  &::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;
+    }
+  }
+
+  &:hover {
+    background-color: var(--blue-700-5);
+  }
+
+  &--danger + &::before,
+  &--selected + &::before,
+  &:hover + &::before {
+    border-color: transparent;
+  }
+
+  &.is-disabled {
+    color: var(--odx-control-color-disabled);
+    pointer-events: none;
+  }
+
+  &--danger {
+    --odx-c-focus: var(--odx-c-danger);
+
+    @include utils.with-outline-bold;
+
+    background-color: var(--odx-c-danger);
+    color: var(--odx-c-danger-text);
+
+    &::before {
+      border-bottom-color: transparent;
+    }
+
+    &:hover {
+      background-color: var(--odx-c-danger-hover);
+    }
+
+    &.is-disabled {
+      color: var(--odx-c-danger-text-disabled);
+    }
+  }
+
+  &--selected {
+    background-color: var(--odx-c-selected);
+
+    &::before {
+      border-bottom-color: transparent;
+    }
+
+    &:hover {
+      background-color: var(--odx-c-selected-hover);
+    }
+
+    &#{$root}--danger {
+      background-color: var(--odx-c-danger-active);
+
+      &:hover {
+        background-color: var(--red-800);
+      }
+
+      &.is-disabled {
+        color: var(--odx-c-danger-text);
+      }
+    }
+  }
+}

package/scss/components/list.component.scss

@@ -0,0 +1,3 @@
+.odx-list {
+  display: block;
+}

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

@@ -16,7 +16,7 @@
   @include dimensions.height(3, math.div(7, 3));
   @include dimensions.padding-x(math.div(2, 3));
   @include motion.transition(color background-color outline);
-  @include utils.interactive();
+  @include utils.interactive(false);
   @include utils.vertical-center-content();
   @include typography.font-weight(medium);
   @include typography.prevent-text-overflow();

package/scss/components/modal.component.scss

@@ -15,7 +15,6 @@
   display: block;
   height: 100%;
   left: 0;
-  overflow: auto;
   overscroll-behavior: contain;
   position: fixed;
   top: 0;
@@ -27,8 +26,13 @@
     --odx-modal-margin-x: #{dimensions.get-size(1)};
   }
 
+  &--sidesheet {
+    backdrop-filter: unset;
+    background-color: unset;
+  }
+
   &__container {
-    @include dimensions.padding-x(math.div(16, 24));
+    @include dimensions.padding-x(1);
 
     background-color: var(--odx-c-background-content);
     border-radius: var(--odx-v-border-radius);
@@ -47,6 +51,14 @@
     #{$root}--large & {
       --odx-modal-max-width: #{dimensions.get-size(50)};
     }
+
+    #{$root}--sidesheet & {
+      height: 100%;
+      left: unset;
+      margin-right: dimensions.get-size(0.5);
+      max-height: calc(100vh - var(--odx-modal-margin-y) - #{dimensions.get-size(1)});
+      right: 0;
+    }
   }
 
   &__header,
@@ -73,6 +85,10 @@
 
     display: block;
     overflow: auto;
+
+    #{$root}--sidesheet & {
+      flex: 1;
+    }
   }
 
   &__footer {

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

@@ -0,0 +1,60 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/breakpoints';
+@use '../abstract//utils';
+
+.odx-rail-navigation-item {
+  @include motion.transition(outline-color background-color color);
+  @include dimensions.padding(math.div(8, 24));
+  @include utils.interactive(false);
+
+  align-items: center;
+  background-color: unset;
+  border-radius: dimensions.get-size(math.div(3, 24));
+  box-sizing: border-box;
+  display: flex;
+  text-align: left;
+
+  &:hover {
+    background-color: var(--blue-700-5);
+  }
+
+  &.is-selected {
+    background-color: var(--odx-c-selected);
+
+    &:hover {
+      background-color: var(--odx-c-selected-hover);
+    }
+  }
+
+  &.is-disabled {
+    background-color: transparent;
+    color: var(--odx-control-color-disabled);
+    pointer-events: none;
+  }
+
+  &__container {
+    @include typography.prevent-text-overflow();
+    @include motion.transition(width padding-left opacity);
+
+    opacity: 0;
+    overflow: hidden;
+    padding-left: 0;
+    width: 0;
+
+    .odx-rail-navigation.is-open & {
+      &:not(:empty) {
+        @include dimensions.padding(math.div(8, 24), left);
+
+        opacity: 1;
+        width: calc(var(--odx-rail-navigation-max-width) - dimensions.get-size(math.div(64, 24)));
+      }
+    }
+  }
+
+  > .odx-icon {
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,32 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/breakpoints';
+
+.odx-rail-navigation {
+  --odx-rail-navigation-max-width: 230px;
+
+  @include motion.transition(max-width);
+
+  align-items: flex-start;
+  display: inline-flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+  padding: dimensions.get-size(1) dimensions.get-size(math.div(8, 24));
+
+  &__expand > .odx-icon {
+    @include motion.transition(transform);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: dimensions.get-size(math.div(12, 24));
+    overflow: auto;
+  }
+
+  &.is-open &__expand > .odx-icon {
+    transform: rotateY(180deg);
+  }
+}

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/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 {
@@ -91,8 +91,7 @@
       content: '';
       display: block;
       height: $track-size;
-      outline: var(--odx-v-outline);
-      outline-color: var(--odx-c-background-content);
+      outline: 1px solid var(--odx-c-background-content);
       position: absolute;
       top: calc(#{$track-size} / -2 + 50%);
       transform: translateX(-1px);

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

@@ -4,22 +4,59 @@
 @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);
   column-gap: dimensions.get-size(math.div(6, 24));
+  position: relative;
+
+  &__indicator {
+    @include dimensions.height(2, 1);
+    @include utils.with-outline;
+
+    background-color: var(--odx-c-highlight);
+    border-radius: var(--odx-toggle-button-border-radius);
+
+    #{$root}.is-disabled & {
+      background-color: var(--odx-c-secondary-disabled);
+    }
+
+    #{$root}.is-readonly & {
+      background-color: transparent;
+      outline-color: currentcolor;
+    }
+
+    #{$root}.is-readonly.is-disabled & {
+      background-color: transparent;
+      outline-color: var(--odx-c-secondary-disabled);
+    }
+
+    #{$root}:focus-within:has(:focus-visible) & {
+      outline-color: var(--odx-c-highlight-active);
+    }
+  }
+
+  .odx-toggle-button {
+    z-index: 1;
+  }
 
   &.has-error:not(.is-disabled, .is-readonly) {
     background-color: var(--odx-c-error);
     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);
+    }
   }
 }