@odx/ui 4.9.0 → 4.10.1

package/scss/radio-button.component.scss

@@ -0,0 +1,127 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use '../abstract/motion';
+@use '../layout/typography' as *;
+
+.odx-radio-button {
+  $root: &;
+
+  color: var(--odx-control-color);
+  display: block;
+
+  &.is-disabled {
+    color: var(--odx-control-color-disabled);
+  }
+
+  &.is-readonly {
+    @include utils.non-interactive();
+  }
+
+  &__label {
+    @include dimensions.line-height(1);
+    @include motion.transition(background-color color outline);
+    @include typography.font-size(0);
+    @include utils.interactive($focus-within: true);
+
+    border-radius: dimensions.get-size(1);
+    color: inherit;
+    display: inline-flex;
+    min-height: dimensions.get-size(1);
+    padding: 0 2px;
+    user-select: auto;
+    vertical-align: top;
+
+    #{$root}--with-label & {
+      border-bottom-right-radius: calc(2 * var(--odx-v-border-radius-controls));
+      border-top-right-radius: calc(2 * var(--odx-v-border-radius-controls));
+    }
+
+    #{$root}.is-disabled & {
+      cursor: default;
+    }
+  }
+
+  &__subtitle {
+    @extend .odx-text--small;
+  }
+
+  &__input {
+    @include utils.visually-hidden();
+  }
+
+  &__indicator {
+    @include dimensions.container(1, math.div(20, 24));
+    @include motion.transition(background-color color outline-color);
+    @include utils.center-content();
+    @include utils.with-outline();
+
+    background-color: var(--odx-control-background-color);
+    border-radius: 50%;
+    color: var(--odx-control-color-selected);
+    flex: 0 0 auto;
+    outline-color: var(--odx-control-outline-color);
+    padding: 1px;
+
+    &::before {
+      @include dimensions.container(math.div(4, 24));
+      @include motion.transition(transform);
+
+      background-color: currentcolor;
+      border-radius: 50%;
+      content: '';
+      transform: scale(0);
+    }
+
+    #{$root}:hover & {
+      background-color: var(--odx-control-background-color-hover);
+      outline-color: var(--odx-control-outline-color-hover);
+    }
+
+    #{$root}.is-active &,
+    #{$root}__input:checked ~ & {
+      background-color: var(--odx-control-background-color-selected);
+      outline-color: var(--odx-control-outline-color-selected);
+
+      &::before {
+        transform: scale(1);
+      }
+    }
+
+    #{$root}.has-error & {
+      background-color: var(--odx-control-background-color-error);
+      color: var(--odx-control-color-error);
+      outline-color: var(--odx-control-outline-color-error);
+    }
+
+    #{$root}.has-error:hover & {
+      outline-color: var(--odx-control-outline-color-error-hover);
+    }
+
+    #{$root}.is-disabled & {
+      background-color: var(--odx-control-background-color-disabled);
+      color: var(--odx-control-color-disabled);
+      outline-color: var(--odx-control-outline-color-disabled);
+    }
+
+    #{$root}.is-readonly & {
+      background-color: var(--odx-control-background-color-readonly);
+      color: var(--odx-control-color-readonly);
+      outline-color: var(--odx-control-outline-color-readonly);
+    }
+  }
+
+  &__content {
+    @include dimensions.margin(0.5, left);
+
+    display: flex;
+    flex-direction: column;
+    padding-left: 2px;
+
+    &:empty {
+      margin: 0;
+      padding: 0;
+    }
+  }
+}

package/scss/radio-group.component.scss

@@ -0,0 +1,14 @@
+@use '../abstract/dimensions';
+
+.odx-radio-group {
+  @include dimensions.padding-y(0.5);
+
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+
+  &--horizontal {
+    column-gap: dimensions.get-size(0.5);
+    flex-flow: row wrap;
+  }
+}

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

@@ -0,0 +1,99 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use './icon.component';
+
+.odx-rail-navigation-item {
+  $root: &;
+
+  @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;
+  justify-content: center;
+  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;
+    width: 0;
+
+    .odx-rail-navigation--bar & {
+      margin: auto 0;
+      opacity: unset;
+      padding: 0 !important;
+      white-space: unset;
+      width: unset !important;
+
+      @include typography.line-clamp(2);
+      @include typography.font-size(-2);
+      @include dimensions.line-height(math.div(2, 3));
+
+      @include breakpoints.up(phone) {
+        @include typography.font-size(-1);
+        @include dimensions.line-height(1);
+      }
+    }
+
+    .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;
+  }
+
+  .odx-rail-navigation--bar & {
+    flex: 1;
+    flex-direction: column;
+    text-align: center;
+
+    @include dimensions.padding-x(math.div(4, 24));
+
+    > .odx-icon {
+      @extend .odx-icon;
+    }
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding-x(math.div(8, 24));
+    }
+
+    &:has(#{$root}__container:empty) {
+      #{$root}__container {
+        display: none;
+      }
+    }
+  }
+}

package/scss/rail-navigation.component.scss

@@ -0,0 +1,53 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/breakpoints';
+
+.odx-rail-navigation {
+  $root: &;
+
+  --odx-rail-navigation-max-width: 230px;
+
+  align-items: flex-start;
+  display: inline-flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+
+  @include dimensions.padding-x(math.div(8, 24));
+  @include dimensions.padding-y(1);
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: dimensions.get-size(math.div(12, 24));
+    overflow: auto;
+
+    #{$root}--bar & {
+      flex-direction: row;
+      gap: 0;
+      width: 100%;
+    }
+  }
+
+  &__expand {
+    > .odx-icon {
+      @include motion.transition(transform);
+
+      #{$root}.is-open & {
+        transform: rotateY(180deg);
+      }
+    }
+
+    #{$root}--bar & {
+      display: none;
+    }
+  }
+
+  &--bar {
+    background-color: var(--odx-c-background-content);
+    display: flex;
+
+    @include dimensions.padding(math.div(4, 24), top bottom);
+  }
+}

package/scss/rich-list-item-header.component.scss

@@ -0,0 +1,25 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-rich-list-item-header {
+  $root: &;
+
+  align-items: center;
+  column-gap: dimensions.get-size(math.div(16, 24));
+  display: flex;
+  flex: 1;
+  user-select: none;
+
+  &__title {
+    @include typography.font-size(-1);
+    @include dimensions.line-height(math.div(20, 24));
+
+    flex: 1;
+    max-height: dimensions.get-size(math.div(36, 24));
+    overflow: hidden;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,59 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-rich-list-item {
+  $root: &;
+  $parent: odx-rich-list;
+
+  @include dimensions.padding-x(math.div(8, 24));
+
+  .#{$parent}:not(.#{$parent}--condensed) > & {
+    @include dimensions.padding-y(math.div(8, 24));
+  }
+
+  border-bottom: 1px solid var(--odx-input-control-outline-color);
+  display: block;
+
+  &.is-disabled {
+    .odx-rich-list-item-header {
+      color: var(--odx-c-text-disabled);
+
+      .odx-avatar {
+        color: var(--odx-c-text-disabled);
+        filter: saturate(0);
+      }
+    }
+  }
+
+  &__header {
+    column-gap: dimensions.get-size(math.div(16, 24));
+    display: flex;
+  }
+
+  &__slot {
+    @include dimensions.margin(math.div(8, 24), top);
+    @include dimensions.padding(math.div(16, 24));
+
+    overflow: hidden;
+  }
+
+  &--empty {
+    #{$root}__expand-button {
+      display: none;
+    }
+  }
+
+  &__icon {
+    @include motion.transition(transform);
+
+    position: relative;
+    transform: rotate(0);
+
+    #{$root}--expanded & {
+      transform: rotateX(180deg);
+    }
+  }
+}

package/scss/rich-list.component.scss

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

package/scss/search-bar.component.scss

@@ -0,0 +1,47 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use '../abstract/motion';
+
+.odx-search-bar {
+  @include dimensions.min-height(1.5);
+  @include motion.transition(background-color color outline-color);
+  @include utils.with-outline();
+  @include utils.focus-state(true, true, 'input');
+
+  background-color: var(--odx-input-control-background-color);
+  border-radius: var(--odx-v-border-radius-controls);
+  display: flex;
+  outline-color: var(--odx-input-control-outline-color);
+  overflow: hidden;
+  position: relative;
+
+  &:not(:has(input[odxSearchBarControl])) {
+    display: none;
+  }
+
+  &__prefix {
+    @include dimensions.height(1.5);
+    @include motion.transition(color);
+    @include utils.vertical-center-content(true);
+    @include dimensions.padding(math.div(8, 24), 'inline-start');
+
+    flex: 0 0 auto;
+  }
+
+  &__input {
+    @include dimensions.padding-x(math.div(8, 24));
+    @include typography.font-weight(medium);
+
+    vertical-align: middle;
+    width: 100%;
+
+    &::placeholder {
+      @include typography.font-weight(normal);
+
+      color: var(--odx-input-control-color);
+      opacity: 0.65;
+    }
+  }
+}

package/scss/select.component.scss

@@ -0,0 +1,75 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+:root {
+  --odx-select-max-height: 220px;
+  --odx-select-max-width: 100%;
+}
+
+.odx-select {
+  $root: &;
+
+  &__trigger {
+    @include utils.vertical-center-content();
+
+    cursor: pointer;
+    flex: 1 1 100%;
+    gap: dimensions.get-size(math.div(1, 3));
+    height: 100%;
+    max-width: var(--odx-select-max-width);
+    width: 100%;
+
+    #{$root}.is-readonly & {
+      #{$root}__value {
+        cursor: text;
+        user-select: unset;
+      }
+    }
+  }
+
+  &__clear {
+    margin-inline-start: auto;
+  }
+
+  &__placeholder,
+  &__value {
+    @include dimensions.padding-y(math.div(4, 24));
+    @include typography.prevent-text-overflow();
+
+    display: flex;
+    flex: 1 1 auto;
+    gap: dimensions.get-size(math.div(4, 24));
+    overflow: hidden;
+    user-select: none;
+  }
+
+  &__placeholder {
+    @include typography.font-weight(normal);
+
+    color: var(--odx-input-control-color);
+    opacity: 0.65;
+
+    #{$root}.is-disabled & {
+      color: inherit;
+    }
+  }
+
+  &__control {
+    height: 100%;
+    width: 100%;
+  }
+
+  &__indicator {
+    @include motion.transition(transform opacity);
+    @include dimensions.margin(math.div(-2, 24), right);
+
+    margin-left: auto;
+
+    #{$root}.is-readonly & {
+      opacity: 0;
+    }
+  }
+}

package/scss/slider.component.scss

@@ -0,0 +1,132 @@
+@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;
+  cursor: pointer;
+  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);
+    }
+  }
+}