@odx/ui 4.10.0 → 4.10.1

package/scss/spinbox.component.scss

@@ -0,0 +1,128 @@
+@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;
+
+    &::before {
+      position: static;
+    }
+
+    &: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/switch.component.scss

@@ -0,0 +1,175 @@
+@use 'sass:math';
+@use '../layout/helpers';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use '../abstract/motion';
+
+@mixin indicator-color($background, $stroke: null) {
+  background-color: $background;
+
+  @if $stroke {
+    border-color: $stroke;
+  } @else {
+    border-color: $background;
+  }
+}
+
+.odx-switch {
+  $root: &;
+
+  color: var(--odx-c-text);
+  display: inline-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-color);
+    @include typography.font-size(0);
+    @include utils.interactive($focus-within: true);
+
+    align-items: center;
+    border-radius: dimensions.get-size(0.5);
+    color: inherit;
+    display: inline-flex;
+    min-height: dimensions.get-size(1);
+    padding: 0 2px;
+    user-select: auto;
+    user-select: none;
+    vertical-align: top;
+
+    #{$root}.is-disabled & {
+      cursor: default;
+    }
+
+    &:has(#{$root}__content:not(:empty)) {
+      border-bottom-right-radius: var(--odx-v-border-radius-controls);
+      border-top-right-radius: var(--odx-v-border-radius-controls);
+    }
+  }
+
+  &__input {
+    @include utils.visually-hidden();
+
+    &:focus-visible {
+      ~ #{$root}__indicator:before {
+        box-shadow: 0 0 0 1px var(--odx-c-background-content);
+        outline-color: var(--odx-c-focus);
+      }
+    }
+  }
+
+  &__indicator {
+    $indicator-width: dimensions.get-size(1.5);
+    $indicator-height: dimensions.get-size(math.div(1, 6));
+    $track-size: dimensions.get-size(math.div(20, 24));
+    $border: 1px solid var(--odx-control-outline-color);
+
+    @include motion.transition(background-color color outline-color);
+
+    background-color: var(--odx-control-background-color);
+    border: $border;
+    border-radius: calc(#{$indicator-height} / 2);
+    color: var(--odx-control-color-selected);
+    height: $indicator-height;
+    position: relative;
+    width: $indicator-width;
+
+    &::before {
+      @include motion.transition(background-color transform border-color outline-color);
+
+      background-color: var(--odx-control-background-color);
+      border: $border;
+      border-radius: 50%;
+      box-sizing: border-box;
+      content: '';
+      display: block;
+      height: $track-size;
+      outline: 1px solid var(--odx-c-background-content);
+      position: absolute;
+      top: calc(#{$track-size} / -2 + 50%);
+      transform: translateX(-1px);
+      width: $track-size;
+    }
+
+    #{$root}:hover &::before {
+      background-color: var(--odx-control-background-color-hover);
+    }
+
+    #{$root}.is-active:not(.is-disabled):hover &::before {
+      @include indicator-color(var(--odx-c-highlight-hover));
+    }
+
+    #{$root}.is-active &,
+    #{$root}__input:indeterminate ~ &,
+    #{$root}__input:checked ~ & {
+      @include indicator-color(var(--odx-control-background-color-selected));
+
+      &::before {
+        @include indicator-color(var(--odx-control-background-color-selected));
+
+        transform: translateX(calc((#{$indicator-width} - #{$track-size}) - 1px));
+      }
+    }
+
+    #{$root}.has-error & {
+      @include indicator-color(var(--odx-control-background-color-error));
+
+      &::before {
+        @include indicator-color(var(--odx-control-background-color-error));
+      }
+    }
+
+    #{$root}.has-error:hover & {
+      outline-color: var(--odx-control-outline-color-error-hover);
+    }
+
+    #{$root}.is-disabled & {
+      @include indicator-color(var(--odx-c-secondary-disabled));
+
+      &::before {
+        @include indicator-color(var(--odx-c-secondary-disabled));
+
+        outline-color: transparent;
+      }
+    }
+
+    #{$root}.is-disabled:not(.is-active) & {
+      @include indicator-color(var(--odx-control-background-color-disabled));
+
+      &::before {
+        @include indicator-color(var(--odx-control-background-color-disabled));
+      }
+    }
+  }
+
+  &__content {
+    @include dimensions.margin(0.5, left);
+
+    padding-left: 2px;
+
+    &:empty {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &__required {
+    @include typography.font-size(0);
+
+    color: var(--odx-c-error-text);
+    margin-left: 2px;
+    vertical-align: top;
+
+    #{$root}.is-disabled & {
+      color: var(--odx-control-color-disabled);
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract//utils';
+
+.odx-tab-bar-item {
+  @include dimensions.height(2, math.div(32, 24));
+  @include dimensions.padding-x(math.div(4, 24));
+  @include utils.vertical-center-content();
+  @include utils.with-outline();
+  @include motion.transition(background-color outline-color);
+
+  align-items: center;
+  background-color: transparent;
+  border-radius: var(--odx-v-border-radius-controls);
+  cursor: pointer;
+  min-inline-size: dimensions.get-size(math.div(72, 24));
+  user-select: none;
+
+  &__label {
+    flex: 1;
+  }
+
+  &:hover {
+    background-color: var(--blue-700-5);
+  }
+
+  .odx-icon {
+    @include dimensions.container(1, 1);
+    @include dimensions.margin-x(math.div(4, 24));
+
+    font-size: dimensions.get-size(1);
+
+    &:first-child {
+      margin-inline-start: 0;
+    }
+
+    &:last-child:not(:first-child) {
+      @include motion.transition(color);
+
+      margin-inline-end: 0;
+
+      &:hover {
+        color: var(--odx-c-highlight);
+      }
+    }
+  }
+
+  &.is-disabled {
+    color: var(--odx-c-text-disabled);
+    pointer-events: none;
+
+    .odx-tab-bar-item__label {
+      pointer-events: none;
+    }
+  }
+}

package/scss/tab-bar.component.scss

@@ -0,0 +1,124 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/utils';
+
+.odx-tab-bar {
+  $root: &;
+
+  @include dimensions.height(2);
+
+  border-bottom: 1px solid;
+  border-bottom-color: var(--odx-control-outline-color-hover);
+  display: flex;
+  overflow: hidden;
+  position: relative;
+
+  &__inner {
+    $gradient-start: dimensions.get-size(1);
+    $gradient-end: dimensions.get-size(3);
+    $mask-color: #000000;
+
+    display: flex;
+    width: 100%;
+
+    #{$root}--overflow-left & {
+      mask-image: linear-gradient(to right, transparent $gradient-start, $mask-color $gradient-end);
+    }
+
+    #{$root}--overflow-right & {
+      mask-image: linear-gradient(to right, $mask-color calc(100% - $gradient-end), transparent calc(100% - $gradient-start));
+    }
+
+    #{$root}--overflow-left#{$root}--overflow-right & {
+      mask-image: linear-gradient(
+        to right,
+        transparent $gradient-start,
+        $mask-color $gradient-end,
+        $mask-color calc(100% - $gradient-end),
+        transparent calc(100% - $gradient-start)
+      );
+    }
+  }
+
+  &__panel {
+    @include motion.transition(transform);
+    @include dimensions.padding-x(math.div(12, 24));
+
+    display: flex;
+    flex: 0 0 auto;
+    gap: dimensions.get-size(math.div(8, 24));
+    position: relative;
+  }
+
+  &__action {
+    @include dimensions.height(2);
+    @include motion.transition(opacity width padding);
+    @include utils.center-content();
+
+    background-color: transparent;
+    cursor: pointer;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    user-select: none;
+    width: 0;
+    z-index: var(--odx-v-layer-1);
+
+    &.is-active {
+      @include dimensions.padding(math.div(8, 24), (right, left));
+
+      opacity: 1;
+      pointer-events: all;
+      transform: scaleX(1);
+      width: dimensions.get-size(1.5);
+    }
+
+    .odx-icon {
+      @include dimensions.container(1, 1);
+
+      align-items: center;
+      color: var(--odx-c-highlight);
+      display: flex;
+      font-size: dimensions.get-size(math.div(32, 24));
+      justify-content: center;
+    }
+
+    &--prev {
+      justify-content: flex-start;
+      left: 0;
+      transform-origin: center left;
+    }
+
+    &--next {
+      justify-content: flex-end;
+      right: 0;
+      transform-origin: center right;
+    }
+
+    &:hover {
+      .odx-icon {
+        color: var(--odx-c-highlight-hover);
+      }
+    }
+  }
+
+  .odx-tab-bar__indicator {
+    @include dimensions.margin(math.div(8, 24), left);
+
+    background-color: var(--odx-c-highlight);
+    bottom: 0;
+    height: dimensions.get-size(math.div(4, 24));
+    width: dimensions.get-size(2) !important;
+  }
+
+  &:focus-visible {
+    .odx-tab-bar-item.is-active {
+      background-color: var(--odx-c-focus);
+      outline-color: var(--odx-c-focus-outline);
+    }
+  }
+}

package/scss/table.component.scss

@@ -0,0 +1,95 @@
+@use 'sass:math';
+@use '../layout/helpers';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use '../abstract/motion';
+
+.odx-table {
+  --odx-table-background-color: var(--white);
+  --odx-table-head-border-color: var(--gray-900);
+  --odx-table-cell-border-color: var(--gray-200);
+  --odx-table-cell-background-color-hover: var(--blue-700-5);
+  --odx-table-cell-background-color-striped: var(--gray-50);
+  --odx-table-cell-background-color-active: var(--cyan-500-15);
+
+  $root: &;
+
+  background: var(--odx-table-background-color);
+  border: 0;
+  border-spacing: 0;
+  min-width: 100%;
+  table-layout: auto;
+  white-space: normal;
+
+  &__header-cell,
+  &__cell {
+    @include dimensions.padding-x(0.5);
+
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    text-align: left;
+  }
+
+  &__cell {
+    border-bottom-color: var(--odx-table-cell-border-color);
+    height: dimensions.get-size(2);
+    vertical-align: middle;
+  }
+
+  &__header-cell-title {
+    align-items: center;
+    display: flex;
+    gap: dimensions.get-size(math.div(8, 24));
+    height: dimensions.get-size(2);
+    user-select: none;
+
+    &.sortable {
+      cursor: pointer;
+
+      > svg {
+        display: inline-block;
+        height: auto;
+        width: dimensions.get-size(math.div(16, 24));
+      }
+    }
+  }
+
+  &__header-cell {
+    @include typography.font-weight(medium);
+
+    border-bottom-color: var(--odx-table-head-border-color);
+    vertical-align: top;
+
+    .odx-form-field {
+      height: dimensions.get-size(2);
+      justify-content: center;
+      padding: 0;
+
+      &__info {
+        display: none;
+      }
+    }
+  }
+
+  &--striped {
+    .odx-table__row:nth-child(odd) {
+      background-color: var(--odx-table-cell-background-color-striped);
+    }
+  }
+
+  &__body {
+    /* stylelint-disable-next-line no-descending-specificity */
+    .odx-table__row {
+      @include motion.transition(background-color);
+
+      &:hover {
+        background-color: var(--odx-table-cell-background-color-hover);
+      }
+
+      &:focus-visible {
+        background-color: var(--odx-table-cell-background-color-active);
+      }
+    }
+  }
+}