@odx/ui 1.0.0-rc.8 → 1.0.0

package/scss/components/breadcrumbs.component.scss

@@ -0,0 +1,30 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+
+.odx-breadcrumbs {
+  @include dimensions.padding-x(1);
+  @include dimensions.padding-y(math.div(12, 24));
+  @include utils.vertical-center-content();
+
+  flex-wrap: wrap;
+  gap: dimensions.get-size(math.div(8, 24));
+
+  .odx-link {
+    &:last-child {
+      @include typography.font-weight(bold);
+
+      color: var(--odx-c-text);
+    }
+
+    &:visited {
+      color: var(--odx-c-link);
+    }
+  }
+
+  .odx-icon {
+    color: var(--gray-500);
+    font-size: dimensions.get-size(math.div(12, 24));
+  }
+}

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

@@ -4,6 +4,7 @@
 @mixin buttons-radius($vertical: false, $reversed: false) {
   $start: 'first';
   $end: 'last';
+
   @if $reversed {
     $start: 'last';
     $end: 'first';
@@ -12,28 +13,28 @@
   @if $vertical {
     margin: 0;
 
-    &:#{$start}-child {
+    &:#{$start}-of-type {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
 
-    &:#{$end}-child {
+    &:#{$end}-of-type {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
   } @else {
-    &:#{$start}-child {
+    &:#{$start}-of-type {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
     }
 
-    &:#{$end}-child {
+    &:#{$end}-of-type {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
   }
 
-  &:not(:first-child, :last-child) {
+  &:not(:first-of-type, :last-of-type) {
     border-radius: 0;
   }
 }
@@ -66,11 +67,11 @@
     justify-content: flex-start;
   }
 
-  &:not(#{&}--vertical, #{&}--reverse) .odx-button {
+  &:not(#{&}--vertical, #{&}--reverse) > .odx-button {
     @include buttons-radius();
   }
 
-  &:not(#{&}--vertical)#{&}--reverse .odx-button {
+  &:not(#{&}--vertical)#{&}--reverse > .odx-button {
     @include buttons-radius(false, true);
   }
 
@@ -79,19 +80,22 @@
 
     flex-direction: column;
 
-    .odx-button {
+    > .odx-button {
       @include dimensions.height(math.div(35, 24));
     }
   }
 
   &:not(#{&}--reverse)#{&}--vertical {
-    .odx-button {
+    > .odx-button {
       @include buttons-radius(true);
     }
   }
 
   &#{&}--reverse#{&}--vertical {
-    .odx-button {
+    display: inline-flex;
+    flex-direction: column-reverse;
+
+    > .odx-button {
       @include buttons-radius(true, true);
     }
   }

package/scss/components/button.component.scss

@@ -1,9 +1,12 @@
+@use 'sass:map';
 @use 'sass:math';
+@use '../abstract/breakpoints';
 @use '../abstract/dimensions';
 @use '../abstract/motion';
 @use '../abstract/typography';
 @use '../abstract/utils';
 @use 'avatar.component' as avatar;
+@use 'dropdown.component' as dropdown;
 @use 'icon.component';
 
 .odx-button {
@@ -19,7 +22,7 @@
   @include typography.font-weight(medium);
   @include utils.center-content(true);
   @include utils.interactive($with-background: false);
-  @include utils.with-outline-bold;
+  @include utils.with-outline-bold();
 
   border-radius: var(--odx-v-border-radius-controls);
   min-width: dimensions.get-size(1.5);
@@ -42,12 +45,28 @@
   }
 
   > .odx-avatar {
-    @include avatar.avatar-size(1.5, math.div(32, 24), 0, 1);
+    @include avatar.avatar-size(1.5, math.div(32, 24), -1, 1);
     @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);
+    outline-color: var(--odx-c-focus-outline-dark);
   }
 
   @each $variant in $variants {
@@ -59,6 +78,7 @@
         background-color: var(--odx-c-#{$variant}-hover);
       }
 
+      &#{dropdown.$dropdown-open-selector},
       &:active {
         background-color: var(--odx-c-#{$variant}-active);
       }
@@ -72,7 +92,7 @@
   }
 
   &--ghost {
-    @include utils.with-outline;
+    @include utils.with-outline();
 
     background-color: transparent;
     color: var(--odx-c-link);
@@ -86,6 +106,7 @@
       color: var(--odx-c-link-active);
     }
 
+    &#{dropdown.$dropdown-open-selector},
     &:focus-visible,
     &:active {
       background-color: var(--odx-c-focus);
@@ -100,6 +121,7 @@
 
   &--small {
     $icon-margin: math.div(1, 8);
+
     @include dimensions.height(1);
     @include dimensions.padding-x(2 * $icon-margin);
     @include typography.font-size(-1);

package/scss/components/card.component.scss

@@ -0,0 +1,174 @@
+@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 {
+    @include dimensions.padding-x(0.5);
+
+    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/checkbox.component.scss

@@ -57,6 +57,7 @@
 
     > .odx-icon {
       $checkmark-size: math.div(18, 24);
+
       @include dimensions.container($checkmark-size);
       @include motion.transition(opacity);
 

package/scss/components/chip.component.scss

@@ -9,6 +9,7 @@ $variants: 'secondary', 'highlight', 'success', 'danger';
 
 .odx-chip {
   $root: &;
+
   @include typography.font-weight(medium);
   @include motion.transition(background-color color);
 

package/scss/components/content-box.component.scss

@@ -17,34 +17,38 @@
   }
 
   &__header {
-    @include dimensions.padding(1, ('top', 'right', 'left'));
-    @include breakpoints.down(phone) {
-      @include dimensions.padding(0.5, ('top', 'right', 'left'));
+    @include dimensions.padding(0.5, ('top', 'right', 'left'));
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1, ('top', 'right', 'left'));
     }
   }
 
   &__footer {
-    @include dimensions.padding(1, ('right', 'bottom', 'left'));
-    @include breakpoints.down(phone) {
-      @include dimensions.padding(0.5, ('right', 'bottom', 'left'));
+    @include dimensions.padding(0.5, ('right', 'bottom', 'left'));
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1, ('right', 'bottom', 'left'));
     }
   }
 
   &__content {
-    @include dimensions.padding(1);
-    @include breakpoints.down(phone) {
-      @include dimensions.padding(0.5);
+    @include dimensions.padding(0.5);
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1);
     }
   }
 
-  .odx-area-header ~ &__content {
-    padding-top: 0;
-  }
+  > .odx-area-header {
+    @include dimensions.padding(0.5, ('top', 'bottom'));
 
-  .odx-area-header {
-    @include dimensions.padding(1, ('top', 'bottom'));
-    @include breakpoints.down(phone) {
-      @include dimensions.padding(0.5, ('top', 'bottom'));
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1, ('top', 'bottom'));
     }
   }
+
+  & > .odx-area-header ~ &__content {
+    padding-top: 0;
+  }
 }

package/scss/components/dropdown.component.scss

@@ -1,10 +1,12 @@
 @use 'sass:math';
 @use '../abstract/dimensions';
 
+$dropdown-open-selector: '.odx-dropdown-host[aria-expanded="true"]';
+
 .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);
+  box-shadow: var(--odx-v-box-shadow-layer-2);
   display: block;
   min-height: inherit;
 

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

@@ -8,7 +8,7 @@ $form-field-label-height: math.div(20, 24);
 $form-field-hint-height: math.div(16, 24);
 $form-field-inner-padding: math.div(8, 24);
 
-:root {
+body {
   --odx-form-field-hint-color: var(--gray-500);
 }
 
@@ -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} {
@@ -155,6 +155,19 @@ $form-field-inner-padding: math.div(8, 24);
       }
     }
 
+    #{$root}.has-warning & {
+      background-color: var(--odx-input-control-background-color-warning);
+      outline-color: var(--odx-input-control-outline-color-warning);
+
+      &:hover {
+        background-color: var(--odx-input-control-background-color-warning);
+      }
+
+      &::after {
+        background-color: var(--odx-input-control-color-warning);
+      }
+    }
+
     #{$root}.is-disabled &,
     #{$root}.is-readonly & {
       &::after {
@@ -168,7 +181,7 @@ $form-field-inner-padding: math.div(8, 24);
       outline-color: var(--odx-input-control-outline-color-disabled);
 
       #{$control-selector} {
-        @include utils.non-interactive;
+        @include utils.non-interactive();
 
         &::placeholder {
           color: var(--odx-input-control-color-disabled);
@@ -192,6 +205,17 @@ $form-field-inner-padding: math.div(8, 24);
     color: var(--odx-form-field-hint-color);
     text-align: right;
   }
+
+  &--simple {
+    padding: 0;
+
+    @include dimensions.margin-y(0.25);
+
+    #{$root}__label,
+    #{$root}__info {
+      display: none;
+    }
+  }
 }
 
 .odx-form-field.is-readonly,
@@ -206,3 +230,7 @@ $form-field-inner-padding: math.div(8, 24);
 .odx-form-field-error {
   color: var(--odx-input-control-color-error);
 }
+
+.odx-form-field.has-warning .odx-form-field-error {
+  color: var(--odx-input-control-color-warning);
+}

package/scss/components/header.component.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '../abstract/breakpoints';
 @use '../abstract/dimensions';
 @use '../abstract/utils';
 @use '../abstract/typography';
@@ -17,8 +18,8 @@
     margin-right: dimensions.get-size(0.5);
   }
 
-  &__title,
-  .odx-logo {
+  > .odx-logo,
+  &__title {
     margin-right: auto;
   }
 
@@ -34,7 +35,12 @@
     padding-right: dimensions.get-size(0.5);
   }
 
-  &__title ~ .odx-logo {
+  &:has(.odx-title) > .odx-logo {
     display: none;
+    margin-right: dimensions.get-size(0.5);
+
+    @include breakpoints.up(tablet) {
+      display: block;
+    }
   }
 }

package/scss/components/icon.component.scss

@@ -2,18 +2,14 @@
 @use '../abstract/dimensions';
 @use '../abstract/utils';
 
-$icon-sizes: (small math.div(2, 3) 1, large math.div(4, 3) 2);
+$icon-sizes: (small math.div(16, 24) 1, large math.div(32, 24) 2, xlarge math.div(48, 24) 2);
 
 .odx-icon {
   @include dimensions.container(1);
   @include utils.center-content(true);
 
-  direction: ltr;
+  flex: 0 0 auto;
   font-size: dimensions.get-size(1);
-  text-rendering: auto;
-  text-transform: none;
-  user-select: none;
-  white-space: nowrap;
 
   @each $size, $size_factor, $factor in $icon-sizes {
     &--#{$size} {
@@ -27,9 +23,8 @@ $icon-sizes: (small math.div(2, 3) 1, large math.div(4, 3) 2);
     @include dimensions.margin-y(0);
 
     font-size: inherit;
-    height: auto;
-    line-height: inherit;
-    vertical-align: -0.15em;
-    width: auto;
+    height: 0.8em;
+    line-height: 0.8em;
+    width: 0.8em;
   }
 }