@odx/ui 5.2.2 → 5.2.4

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

@@ -110,14 +110,13 @@
     @include dimensions.margin(math.div(4, 24), left);
 
     background-color: var(--odx-c-highlight);
-    bottom: 0;
+    bottom: -1px;
     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/components/toast-item.component.scss

@@ -43,8 +43,6 @@
   }
 
   &__close {
-    @include utils.interactive(true);
-
     background-color: transparent;
     color: var(--odx-c-text);
     margin: 0;
@@ -73,12 +71,6 @@
     --odx-c-text: var(--odx-c-error-text);
     --odx-v-scrollbar-thumb-color: var(--odx-c-text);
     --odx-v-scrollbar-thumb-color-hover: var(--red-800);
-
-    color: var(--odx-c-text);
-
-    #{$root}__close {
-      color: inherit;
-    }
   }
 
   &--danger-strong {

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

@@ -10,9 +10,8 @@
 
   @include dimensions.height(2, 1.5);
   @include dimensions.padding-x(math.div(6, 24));
-  @include motion.transition(background-color outline-color);
+  @include motion.transition(background-color);
   @include utils.center-content(true);
-  @include utils.with-outline();
 
   border-radius: var(--odx-v-border-radius-controls);
   column-gap: dimensions.get-size(math.div(6, 24));
@@ -20,11 +19,12 @@
   z-index: var(--odx-v-layer-1);
 
   &__indicator {
-    @include utils.with-outline();
+    @include utils.with-outline(var(--odx-v-outline-width-bold));
 
     background-color: var(--odx-c-highlight);
     block-size: dimensions.get-size(math.div(28, 24));
     border-radius: var(--odx-toggle-button-border-radius);
+    outline-width: var(--odx-v-outline-width-bold);
 
     #{$root}.is-disabled & {
       background-color: var(--odx-c-secondary-disabled);
@@ -41,7 +41,8 @@
     }
 
     #{$root}:focus-within:has(:focus-visible) & {
-      outline-color: var(--odx-c-highlight-active);
+      box-shadow: inset 0 0 0 calc(var(--odx-v-outline-width-bold) + var(--odx-v-outline-box-shadow-width)) var(--odx-c-focus-inner);
+      outline-color: var(--odx-c-focus-outline);
     }
   }
 
@@ -56,8 +57,6 @@
   }
 
   &.is-active {
-    @include utils.focus-state($focus-within: true);
-
     &:not(.is-disabled, .is-readonly):hover {
       background-color: var(--blue-700-5);
     }

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

@@ -37,7 +37,7 @@
   }
 
   &__indicator {
-    @include motion.transition(background-color outline-color);
+    @include motion.transition(background-color);
     @include dimensions.padding-x(math.div(1, 3));
     @include utils.vertical-center-content();
 
@@ -53,9 +53,7 @@
     }
 
     #{$root}-group:not(.is-active) & {
-      @include utils.interactive($focus-within: true);
-
-      background-color: var(--blue-700-5);
+      @include utils.focus-state($focus-within: true, $focus-within-selector: 'input');
     }
   }
 

package/scss/components/wizard-step.component.scss

@@ -19,6 +19,8 @@
   overflow: hidden;
 
   .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+    @include dimensions.padding(math.div(2, 24), 'top');
+
     gap: dimensions.get-size(math.div(8, 24));
     min-width: var(--odx-horizontal-wizard-width);
   }
@@ -33,16 +35,14 @@
 
   &__label {
     @include typography.prevent-text-overflow();
-    @include utils.with-outline-bold();
-    @include motion.transition(background-color outline-color);
+    @include utils.with-outline(var(--odx-v-outline-width-bold));
+    @include motion.transition(background-color);
 
     align-self: center;
     border-radius: var(--odx-v-border-radius-controls);
     color: var(--odx-c-text-disabled);
     margin: 0 auto;
-    outline-color: transparent;
-    outline-style: solid;
-    padding: dimensions.get-size(math.div(4, 24));
+    padding: 0 var(--odx-v-outline-width-bold);
     user-select: none;
 
     :is(#{$root}--valid, #{$root}--passed) & {

package/scss/form-field.component.scss

@@ -91,16 +91,17 @@ $form-field-inner-padding: math.div(8, 24);
 
   &__control {
     @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');
-    @include utils.focus-state(true, true, 'textarea');
-    @include utils.focus-state(true, true, '.odx-select');
+    @include motion.transition(background-color color);
+    @include utils.focus-state($focus-within: true, $focus-within-selector: 'input');
+    @include utils.focus-state($focus-within: true, $focus-within-selector: 'textarea');
+    @include utils.focus-state($focus-within: true, $focus-within-selector: '.odx-select');
 
     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);
+    outline-offset: calc(-1 * var(--odx-v-outline-width));
+    outline-width: var(--odx-v-outline-width);
     overflow: hidden;
     position: relative;
 

package/scss/link.component.scss

@@ -2,12 +2,12 @@
 @use '../abstract/utils';
 
 .odx-link {
-  @include motion.transition(color background-color outline);
-  @include utils.interactive();
+  @include motion.transition(color background-color);
+  @include utils.interactive($with-box-shadow: false);
 
   border-radius: var(--odx-v-border-radius-controls);
   color: var(--odx-c-link);
-  padding: 0 2px;
+  padding: 0 calc(var(--odx-v-outline-width-bold) + var(--odx-v-outline-box-shadow-width));
   position: relative;
   user-select: auto;
 

package/scss/list-item.component.scss

@@ -13,9 +13,8 @@
 
   @include dimensions.padding-x(math.div(8, 24));
   @include dimensions.line-height(2, 1);
-  @include motion.transition(border-bottom-color background-color outline-color color);
-  @include utils.interactive(false);
-  @include utils.with-outline-bold();
+  @include motion.transition(border-bottom-color background-color color box-shadow);
+  @include utils.interactive();
   @include utils.vertical-center-content();
 
   background-color: transparent;
@@ -43,10 +42,12 @@
     right: dimensions.get-size(math.div(8, 24));
     top: 0;
     width: calc(100% - #{dimensions.get-size(math.div(16, 24))});
+    z-index: -1;
   }
 
   &:hover,
   &:focus-visible {
+    z-index: 1;
     &:not(#{$muted-selector}) {
       --separator-color: transparent !important;
     }

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

@@ -19,8 +19,8 @@
 
 .odx-main-menu-item {
   @include dimensions.padding(math.div(2, 3));
-  @include motion.transition(color background-color outline);
-  @include utils.interactive(false);
+  @include motion.transition(color background-color);
+  @include utils.interactive();
   @include typography.font-weight(medium);
   @include typography.prevent-text-overflow();
 

package/scss/main-menu.component.scss

@@ -12,7 +12,6 @@
   --odx-main-menu-max-width: 100dvw;
   --odx-main-menu-background-color: var(--odx-c-primary);
   --odx-main-menu-text-color: var(--odx-c-primary-text);
-  --odx-main-menu-highlight-color: var(--odx-c-highlight);
 
   @include breakpoints.up(phone) {
     --odx-main-menu-max-width: min(100dvw, 384px);
@@ -20,12 +19,17 @@
 }
 
 @include utils.theme-selector(dark) {
-  --odx-main-menu-background-color: var(--blue-800);
+  --odx-main-menu-background-color: var(--cyan-50);
   --odx-main-menu-text-color: var(--black);
-  --odx-main-menu-highlight-color: var(--cyan-500);
+
+  .odx-main-menu {
+    --odx-c-focus-inner: var(--cyan-50);
+  }
 }
 
 .odx-main-menu {
+  --odx-c-focus-inner: var(--blue-700);
+
   --odx-area-header-title-color: var(--odx-main-menu-text-color);
   --odx-area-header-subtitle-color: var(--odx-main-menu-text-color);
 
@@ -83,6 +87,7 @@
     --odx-v-scrollbar-thumb-color-hover: var(--blue-500);
 
     @include dimensions.padding-x(0.5);
+    @include dimensions.padding-y(math.div(2, 24));
     @include dimensions.margin(1, top);
 
     display: flex;

package/scss/mainfilter-group.component.scss

@@ -2,6 +2,7 @@
 @use '../abstract/dimensions';
 @use '../abstract/typography';
 @use '../abstract/utils';
+@use '../abstract/motion';
 
 @include utils.theme-selector(dark) {
   .odx-mainfilter-group {
@@ -74,16 +75,15 @@
   }
 
   .odx-button {
+    @include utils.interactive();
+    @include motion.transition(box-shadow);
+
     margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
     outline-offset: -1px;
     outline-width: var(--odx-v-outline-width);
     overflow: visible;
     position: relative;
 
-    &:focus-visible {
-      background-color: var(--odx-c-focus);
-    }
-
     &::before {
       @include dimensions.padding-x(math.div(3, 24));
       @include dimensions.padding-y(math.div(2, 24));

package/scss/menu.component.scss

@@ -5,6 +5,8 @@
   display: block;
 
   > .odx-action-group {
+    @include dimensions.padding-y(math.div(2, 24));
+
     display: flex;
     flex-direction: column;
     height: auto;

package/scss/navigation-back.component.scss

@@ -8,9 +8,9 @@
   height: dimensions.get-size(1.5);
   width: dimensions.get-size(1.5);
 
-  @include motion.transition(background-color outline);
+  @include motion.transition(background-color);
   @include utils.center-content(true);
-  @include utils.interactive($with-background: true);
+  @include utils.interactive();
 
   &:hover {
     background-color: var(--blue-700-5);

package/scss/option.component.scss

@@ -7,7 +7,7 @@
   @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 motion.transition(background-color color);
   @include typography.font-weight(normal);
 
   border-radius: var(--odx-v-border-radius-controls);

package/scss/radio-button.component.scss

@@ -21,9 +21,8 @@
 
   &__label {
     @include dimensions.line-height(1);
-    @include motion.transition(background-color color outline);
+    @include motion.transition(background-color color);
     @include typography.font-size(0);
-    @include utils.interactive($focus-within: true);
 
     border-radius: dimensions.get-size(1);
     color: inherit;
@@ -41,6 +40,15 @@
     #{$root}.is-disabled & {
       cursor: default;
     }
+
+    &:focus-within:has(:focus-visible) {
+      #{$root}__indicator {
+        border-color: transparent;
+        outline-color: var(--odx-c-focus-outline);
+        outline-offset: var(--odx-v-outline-box-shadow-width);
+        outline-width: var(--odx-v-outline-width-bold);
+      }
+    }
   }
 
   &__subtitle {
@@ -53,15 +61,16 @@
 
   &__indicator {
     @include dimensions.container(1, math.div(20, 24));
-    @include motion.transition(background-color color outline-color);
+    @include motion.transition(background-color color border-color);
     @include utils.center-content();
-    @include utils.with-outline();
 
     background-color: var(--odx-control-background-color);
+    border: transparent solid var(--odx-v-outline-width);
     border-radius: 50%;
+    box-shadow: inset 0 0 0 0 var(--odx-c-focus-inner);
     color: var(--odx-control-color-selected);
     flex: 0 0 auto;
-    outline-color: var(--odx-control-outline-color);
+    outline: var(--odx-v-outline-width-bold) solid transparent;
     padding: 1px;
 
     &::before {
@@ -76,13 +85,13 @@
 
     #{$root}:hover & {
       background-color: var(--odx-control-background-color-hover);
-      outline-color: var(--odx-control-outline-color-hover);
+      border-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);
+      border-color: var(--odx-control-outline-color-selected);
 
       &::before {
         transform: scale(1);
@@ -91,12 +100,12 @@
 
     #{$root}.has-error & {
       background-color: var(--odx-control-background-color-error);
+      border-color: var(--odx-control-outline-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);
+      border-color: var(--odx-control-outline-color-error-hover);
     }
 
     #{$root}.is-disabled.is-active & {
@@ -106,14 +115,14 @@
 
     #{$root}.is-disabled & {
       background-color: var(--odx-control-background-color-disabled);
+      border-color: var(--odx-control-outline-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);
+      border-color: var(--odx-control-outline-color);
       color: var(--odx-control-color-readonly);
-      outline-color: var(--odx-control-outline-color-readonly);
     }
   }
 

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

@@ -9,9 +9,9 @@
 .odx-rail-navigation-item {
   $root: &;
 
-  @include motion.transition(outline-color background-color color);
+  @include motion.transition(background-color color);
   @include dimensions.padding(math.div(8, 24));
-  @include utils.interactive(false);
+  @include utils.interactive();
 
   align-items: center;
   background-color: unset;

package/scss/rail-navigation.component.scss

@@ -18,6 +18,8 @@
   @include dimensions.padding-y(1);
 
   &__content {
+    @include dimensions.padding(math.div(2, 24));
+
     display: flex;
     flex-direction: column;
     gap: dimensions.get-size(math.div(12, 24));

package/scss/search-bar.component.scss

@@ -6,14 +6,15 @@
 
 .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');
+  @include motion.transition(background-color color);
+  @include utils.focus-state($focus-within: true, $focus-within-selector: '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);
+  outline-offset: calc(-1 * var(--odx-v-outline-width));
+  outline-width: var(--odx-v-outline-width);
   overflow: hidden;
   position: relative;
 

package/scss/slider.component.scss

@@ -1,6 +1,7 @@
 @use 'sass:math';
 @use '../abstract/dimensions';
 @use '../abstract/motion';
+@use '../abstract/utils';
 
 .odx-slider {
   --odx-control-outline-color: var(--gray-200);
@@ -18,10 +19,12 @@
   width: 100%;
 
   @mixin track-container() {
+    @include utils.with-outline() {
+      outline-color: var(--odx-control-outline-color);
+    }
+
     background-color: var(--odx-control-background-color);
     border-radius: 2px;
-    outline: 1px solid var(--odx-control-outline-color);
-    outline-offset: -1px;
   }
 
   @mixin track-progress() {
@@ -31,17 +34,27 @@
   }
 
   @mixin thumb() {
-    @include motion.transition(background-color outline-color);
+    @include motion.transition(background-color);
+
+    @include utils.with-outline() {
+      outline-color: var(--white);
+    }
 
     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;
   }
 
+  @mixin thumb-focus() {
+    border: solid 2px var(--odx-c-focus-inner);
+    outline-color: var(--odx-c-focus-outline);
+    outline-offset: 0;
+    outline-width: var(--odx-v-outline-width-bold);
+  }
+
   &::-webkit-slider-container {
     @include track-container();
 
@@ -57,8 +70,8 @@
   &::-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,
+    background:
+      linear-gradient(var(--odx-control-background-color-selected), var(--odx-control-background-color-selected)) 0 / var(--odx-slider-filled) 100% no-repeat,
       transparent;
   }
 
@@ -112,11 +125,11 @@
 
   &:focus-visible {
     &::-webkit-slider-thumb {
-      outline: 2px solid var(--odx-c-highlight-active);
+      @include thumb-focus();
     }
 
     &::-moz-range-thumb {
-      outline: 2px solid var(--odx-c-highlight-active);
+      @include thumb-focus();
     }
   }
 

package/scss/spinbox.component.scss

@@ -10,7 +10,7 @@
   outline-color: transparent !important;
 
   .odx-form-field-control {
-    padding: 0;
+    @include dimensions.padding(math.div(2, 24));
   }
 
   &::after {
@@ -58,9 +58,11 @@
   &__input,
   &__action {
     @include motion.transition(background-color border-color color);
+    @include utils.with-outline();
 
     background-color: var(--odx-input-control-background-color);
     border: 1px solid var(--odx-input-control-outline-color);
+    position: relative;
 
     #{$root}.has-error & {
       background-color: var(--odx-input-control-background-color-error);
@@ -83,8 +85,11 @@
     }
 
     #{$root} &:focus-visible {
-      background-color: var(--odx-c-focus);
-      border-color: var(--odx-c-focus-outline) !important;
+      border-radius: var(--odx-v-border-radius-controls);
+      border-width: 0;
+      box-shadow: inset 0 0 0 calc(var(--odx-v-outline-width-bold) + var(--odx-v-outline-box-shadow-width)) var(--odx-c-focus-inner);
+      outline-color: var(--odx-c-focus-outline);
+      z-index: 1;
     }
 
     #{$root}.is-disabled & {
@@ -101,7 +106,6 @@
     flex: 0 0 dimensions.get-size(math.div(36, 24));
     height: 100%;
     margin: 0;
-    outline: none;
 
     &::before {
       position: static;

package/scss/switch.component.scss

@@ -31,9 +31,8 @@
 
   &__label {
     @include dimensions.line-height(1);
-    @include motion.transition(background-color color outline-color);
+    @include motion.transition(background-color color);
     @include typography.font-size(0);
-    @include utils.interactive($focus-within: true);
 
     align-items: center;
     border-radius: dimensions.get-size(0.5);
@@ -60,8 +59,11 @@
 
     &:focus-visible {
       ~ #{$root}__indicator:before {
-        box-shadow: 0 0 0 1px var(--odx-c-background-content);
-        outline-color: var(--odx-c-focus);
+        border-width: 0;
+        box-shadow: inset 0 0 0 calc(var(--odx-v-outline-box-shadow-width)) var(--odx-c-focus-inner);
+        outline-color: var(--odx-c-focus-outline);
+        outline-offset: 0;
+        outline-width: var(--odx-v-outline-width-bold);
       }
     }
   }
@@ -72,18 +74,21 @@
     $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);
+    @include motion.transition(background-color 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);
+      @include motion.transition(background-color transform border-color);
+
+      @include utils.with-outline() {
+        outline-color: var(--odx-c-background-content);
+      }
 
       align-items: center;
       background-color: var(--odx-control-background-color);
@@ -94,7 +99,7 @@
       font-size: dimensions.get-size(math.div(12, 24));
       height: $track-size;
       justify-content: center;
-      outline: 1px solid var(--odx-c-background-content);
+      position: absolute;
       top: calc(#{$track-size} / -2 + 50%);
       transform: translateX(-1px);
       width: $track-size;
@@ -116,6 +121,7 @@
       &::before {
         @include indicator-color(var(--odx-control-background-color-selected));
 
+        color: var(--odx-control-color-selected);
         transform: translateX(calc((#{$indicator-width} - #{$track-size}) - 1px));
       }
     }

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

@@ -8,8 +8,8 @@
   @include dimensions.height(2, math.div(32, 24));
   @include dimensions.padding-x(math.div(4, 24));
   @include utils.vertical-center-content();
+  @include motion.transition(background-color);
   @include utils.with-outline();
-  @include motion.transition(background-color outline-color);
 
   align-items: center;
   background-color: transparent;

package/scss/tab-bar.component.scss

@@ -110,14 +110,13 @@
     @include dimensions.margin(math.div(4, 24), left);
 
     background-color: var(--odx-c-highlight);
-    bottom: 0;
+    bottom: -1px;
     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);
     }
   }