@dynamic-framework/ui-react 1.16.1 → 1.17.0

package/src/style/components/_d-datepicker.scss

@@ -6,26 +6,26 @@
   --#{$prefix}datepicker-font-family: var(--#{$prefix}font-sans-serif);
   --#{$prefix}datepicker-border: 0px;
   --#{$prefix}datepicker-box-shadow: var(--#{$prefix}box-shadow);
-  --#{$prefix}datepicker-font-size: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}datepicker-font-size: var(--#{$prefix}ref-spacer-4);
 
   // Header variables
-  --#{$prefix}datepicker-header-gap: var(--#{$prefix}ref-spacer-3);
-  --#{$prefix}datepicker-header-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}datepicker-header-gap: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}datepicker-header-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-6);
   --#{$prefix}datepicker-header-background-color: var(--#{$prefix}secondary-soft);
   --#{$prefix}datepicker-header-border: 0;
   --#{$prefix}datepicker-header-font-size: var(--#{$prefix}ref-fs-6);
 
   --#{$prefix}datepicker-day-names-margin: 0;
-  --#{$prefix}datepicker-day-names-font-size: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}datepicker-day-names-font-size: var(--#{$prefix}ref-spacer-4);
 
   --#{$prefix}datepicker-day-name-weight: var(--#{$prefix}ref-fw-bold);
   --#{$prefix}datepicker-day-name-margin: 0;
-  --#{$prefix}datepicker-day-name-size: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}datepicker-day-name-size: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}datepicker-day-name-color: var(--#{$prefix}gray-500);
 
   // Calendar variables
   --#{$prefix}datepicker-month-gap: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}datepicker-month-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}datepicker-month-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-6) var(--#{$prefix}ref-spacer-6);
   --#{$prefix}datepicker-month-margin: 0;
   --#{$prefix}datepicker-month-color: var(--#{$prefix}white);
 
@@ -34,8 +34,8 @@
   // Day variables
   --#{$prefix}datepicker-day-margin: 0;
   --#{$prefix}datepicker-day-font-size: var(--#{$prefix}ref-fs-small);
-  --#{$prefix}datepicker-day-size: var(--#{$prefix}ref-spacer-3);
-  --#{$prefix}datepicker-day-padding: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}datepicker-day-size: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}datepicker-day-padding: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}datepicker-day-radius: 100%;
 
   --#{$prefix}datepicker-day-bg-hover: var(--#{$prefix}body);
@@ -59,7 +59,7 @@
   --#{$prefix}datepicker-time-input-margin: 0;
   --#{$prefix}datepicker-time-input-align: center;
 
-  --#{$prefix}datepicker-time-input-padding: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}datepicker-time-input-padding: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}datepicker-time-input-gap: var(--#{$prefix}ref-spacer-2);
   --#{$prefix}datepicker-time-input-label-weight: var(--#{$prefix}ref-fw-bold);
   --#{$prefix}datepicker-time-input-label-color: var(--#{$prefix}gray-700);

package/src/style/components/_d-icon.scss

@@ -1,7 +1,7 @@
 .d-icon {
   --#{$prefix}icon-color: var(--#{$prefix}icon-component-color, inherit);
   --#{$prefix}icon-bg-color: var(--#{$prefix}icon-component-bg-color, inherit);
-  --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, 1.5rem);
+  --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, $spacer-6);
   --#{$prefix}icon-padding: var(--#{$prefix}icon-component-padding, 0);
   --#{$prefix}icon-loading-duration: var(--#{$prefix}icon-component-loading-duration, 1.8);
 

package/src/style/components/_d-input-pin.scss

@@ -1,58 +1,24 @@
 .d-input-pin {
-  --#{$prefix}input-pin-gap: #{$spacer-2};
+  --#{$prefix}input-pin-form-gap: var(--#{$prefix}ref-spacer-1);
 
-  --#{$prefix}input-pin-label-gap: #{$form-label-gap};
-  --#{$prefix}input-pin-label-focus-color: #{$input-group-focus-border-color};
-  --#{$prefix}input-pin-label-padding-x: #{$form-label-padding-x};
-  --#{$prefix}input-pin-label-padding-y: #{$form-label-padding-y};
-  --#{$prefix}input-pin-label-font-weight: #{$form-label-font-weight};
-  --#{$prefix}input-pin-label-font-size: #{$form-label-font-size};
-  --#{$prefix}input-pin-label-color: #{$form-label-color};
-
-  --#{$prefix}input-pin-form-control-gap: #{$spacer-1};
-  --#{$prefix}input-pin-form-control-width: 4rem;
-  --#{$prefix}input-pin-form-control-height: 4rem;
-  --#{$prefix}input-pin-form-control-border-color: #{$input-group-hover-border-color};
-
-  --#{$prefix}input-pin-form-control-focus-border-color: #{$input-group-focus-border-color};
-  --#{$prefix}input-pin-form-control-focus-box-shadow: #{$input-group-focus-box-shadow};
-
-  --#{$prefix}input-pin-form-control-hover-border-color: #{$input-group-hover-border-color};
-
-  --#{$prefix}input-pin-form-text-padding: #{$form-control-padding-y} #{$form-control-padding-x};
-  --#{$prefix}input-pin-form-text-gap: #{$form-control-gap};
-  --#{$prefix}input-pin-form-text-color: #{$form-control-color};
+  --#{$prefix}input-pin-form-control-size: 4rem;
+  --#{$prefix}input-pin-form-control-focus-border-color: #{$input-focus-border-color};
+  --#{$prefix}input-pin-form-control-focus-box-shadow: #{$input-focus-box-shadow};
 
   display: flex;
   flex-direction: column;
-  gap: var(--#{$prefix}input-pin-gap);
   align-items: flex-start;
 
-  label {
-    display: inline-flex;
-    flex-direction: row;
-    gap: var(--#{$prefix}input-pin-label-gap);
-    align-items: center;
-    padding: var(--#{$prefix}input-pin-label-padding-y) var(--#{$prefix}input-pin-label-padding-x);
-    font-size: var(--#{$prefix}input-pin-label-font-size);
-    font-weight: var(--#{$prefix}input-pin-label-font-weight);
-    color: var(--#{$prefix}input-pin-label-color);
-
-    .d-input-pin-icon {
-      --#{$prefix}icon-color: var(--#{$prefix}focus-ring-color);
-    }
-  }
-
-  .d-input-pin-controls {
+  form {
     display: flex;
     flex-direction: row;
-    gap: var(--#{$prefix}input-pin-form-control-gap);
+    gap: var(--#{$prefix}input-pin-form-gap);
     width: 100%;
   }
 
   .form-control {
-    width: var(--#{$prefix}input-pin-form-control-width);
-    height: var(--#{$prefix}input-pin-form-control-height);
+    width: var(--#{$prefix}input-pin-form-control-size);
+    height: var(--#{$prefix}input-pin-form-control-size);
     text-align: center;
     box-shadow: none;
   }
@@ -63,21 +29,13 @@
     appearance: none;
   }
 
-  .form-control:not(:placeholder-shown) {
-    border-color: var(--#{$prefix}input-pin-form-control-border-color);
-  }
-
-  &:has(.form-control:hover) .form-control:not(:disabled) {
-    border-color: var(--#{$prefix}input-pin-form-control-hover-border-color);
-  }
-
   &:focus-within {
-    .form-control {
+    .form-control:not(.is-invalid, .is-valid) {
       border-color: var(--#{$prefix}input-pin-form-control-focus-border-color);
       box-shadow: var(--#{$prefix}input-pin-form-control-focus-box-shadow);
     }
 
-    &:has(.form-control:hover) .form-control {
+    &:has(.form-control:hover) .form-control:not(.is-invalid, .is-valid) {
       border-color: var(--#{$prefix}input-pin-form-control-focus-border-color);
     }
   }
@@ -86,32 +44,25 @@
   @each $state, $data in $form-validation-states {
     $border-color: map-get($data, "border-color");
     $tooltip-bg-color: map-get($data, "tooltip-bg-color");
+    $box-shadow: map-get($data, "focus-box-shadow");
 
     &:has(.form-control.is-#{$state}){
       .form-control {
         border-color: $tooltip-bg-color;
+        box-shadow: $box-shadow;
       }
 
       .form-text {
         color: $border-color;
       }
 
-      .d-input-pin-validation-icon {
+      .input-group-validation-icon {
         --#{$prefix}icon-color: #{$tooltip-bg-color};
       }
     }
   }
 
   .input-group-text {
-    padding-left: var(--#{$prefix}input-pin-form-control-gap);
-  }
-
-  .form-text {
-    display: inline-flex;
-    flex-direction: row;
-    gap: var(--#{$prefix}input-pin-form-text-gap);
-    align-items: center;
-    padding: var(--#{$prefix}input-pin-form-text-padding);
-    color: var(--#{$prefix}input-pin-form-text-color);
+    padding-left: var(--#{$prefix}input-pin-form-gap);
   }
 }

package/src/style/components/_d-modal.scss

@@ -23,7 +23,7 @@
     border: 0;
 
     .d-icon {
-      --#{$prefix}icon-size: #{$spacer-3};
+      --#{$prefix}icon-size: var(--#{$prefix}ref-spacer-4);
     }
   }
 

package/src/style/components/_d-monthpicker.scss

@@ -2,13 +2,13 @@
 
 .react-datepicker.d-month-picker {
   // Month variables
-  --#{$prefix}monthpicker-header-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-2) 0;
+  --#{$prefix}monthpicker-header-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-2) 0;
   --#{$prefix}monthpicker-font-weight: var(--#{$prefix}ref-fw-normal);
   --#{$prefix}monthpicker-header-color: var(--#{$prefix}white);
   --#{$prefix}monthpicker-header-bg: var(--#{$prefix}dark);
 
   --#{$prefix}monthpicker-month-gap: 0;
-  --#{$prefix}monthpicker-month-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}monthpicker-month-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-6) var(--#{$prefix}ref-spacer-4);
   --#{$prefix}monthpicker-month-color: var(--#{$prefix}white);
   --#{$prefix}monthpicker-month-bg: var(--#{$prefix}dark);
 
@@ -25,7 +25,7 @@
   --#{$prefix}monthpicker-single-month-padding: var(--#{$prefix}ref-spacer-2);
   --#{$prefix}monthpicker-single-month-margin: 0;
   --#{$prefix}monthpicker-single-month-text-transform: capitalize;
-  --#{$prefix}monthpicker-single-month-radius: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}monthpicker-single-month-radius: var(--#{$prefix}ref-spacer-6);
   --#{$prefix}monthpicker-single-month-line-height: var(--#{$prefix}ref-fs-6);
 
   --#{$prefix}monthpicker-single-month-after-display: inline;

package/src/style/components/_d-offcanvas.scss

@@ -30,7 +30,7 @@
     border: 0;
 
     .d-icon {
-      --#{$prefix}icon-size: #{$spacer-3};
+      --#{$prefix}icon-size: var(--#{$prefix}ref-spacer-4);
     }
   }
 

package/src/style/components/_d-select.scss

@@ -1,142 +1,82 @@
 // stylelint-disable selector-class-pattern
 
 .d-select {
-  --#{$prefix}input-gap: #{$spacer-2};
-
-  // label
-  --#{$prefix}input-label-color: #{$form-label-color};
-  --#{$prefix}input-label-font-weight: #{$form-label-font-weight};
-  --#{$prefix}input-label-font-size: #{$form-label-font-size};
-  --#{$prefix}input-label-padding-x: #{$form-label-padding-x};
-  --#{$prefix}input-label-padding-y: #{$form-label-padding-y};
-  --#{$prefix}input-label-gap: #{$form-label-gap};
-
-  // input group
-  --#{$prefix}input-group-border-color: #{$input-group-border-color};
-  --#{$prefix}input-group-border-width: #{$input-group-border-width};
-  --#{$prefix}input-group-border-radius: #{$input-group-border-radius};
-  // input group hover
-  --#{$prefix}input-group-hover-border-color: #{$input-group-hover-border-color};
-  // input group focus
-  --#{$prefix}input-group-focus-border-color: #{$input-group-focus-border-color};
-  --#{$prefix}input-group-focus-box-shadow: #{$input-group-focus-box-shadow};
-
-  // input
-  --#{$prefix}input-padding-y: #{$input-padding-y};
-  --#{$prefix}input-padding-x: #{$input-padding-x};
-  --#{$prefix}input-font-family: #{$input-font-family};
-  --#{$prefix}input-font-size: #{$input-font-size};
-  --#{$prefix}input-font-weight: #{$input-font-weight};
-  --#{$prefix}input-line-height: #{$input-line-height};
-  --#{$prefix}input-color: #{$input-color};
-  --#{$prefix}input-bg: #{$input-bg};
-  --#{$prefix}input-focus-color: #{$input-focus-color};
-  --#{$prefix}input-focus-bg: #{$input-focus-bg};
-  --#{$prefix}input-placeholder-color: #{$input-placeholder-color};
-
-  // hint
-  --#{$prefix}input-form-text-padding: #{$form-control-padding-y} #{$form-control-padding-x};
-  --#{$prefix}input-form-text-gap: #{$form-control-gap};
-  --#{$prefix}input-form-text-color: #{$form-control-color};
-
-  // input disabled
-  --#{$prefix}input-group-disabled-border-color: #{$input-disabled-border-color};
-  --#{$prefix}input-group-disabled-bg: #{$input-disabled-bg};
-  --#{$prefix}input-group-disabled-color: #{$input-disabled-color};
+  --#{$prefix}select-gap: #{$spacer-2};
 
   // select
   --#{$prefix}select-menu-shadow: #{$box-shadow-sm};
-
   --#{$prefix}select-option-focus-bg: var(--#{$prefix}gray-100);
-
   --#{$prefix}select-option-selected-color: var(--#{$prefix}secondary);
   --#{$prefix}select-option-selected-bg: var(--#{$prefix}gray-100);
-
   --#{$prefix}select-option-is-checkbox-font-size: var(--#{$prefix}body-font-size);
   --#{$prefix}select-option-is-checkbox-font-weight: var(--#{$prefix}ref-fw-normal);
   --#{$prefix}select-option-is-checkbox-color: var(--#{$prefix}gray-900);
-
-  --#{$prefix}select-option-has-icon-icon-size: #{$spacer-3};
-
-  --#{$prefix}select-multi-value-padding-x: var(--#{$prefix}input-gap);
+  --#{$prefix}select-option-has-icon-icon-size: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}select-multi-value-padding-x: var(--#{$prefix}select-gap);
   --#{$prefix}select-multi-value-padding-y: 0;
-  --#{$prefix}select-multi-value-margin-right: var(--#{$prefix}input-gap);
+  --#{$prefix}select-multi-value-margin-right: var(--#{$prefix}select-gap);
   --#{$prefix}select-multi-value-background: var(--#{$prefix}gray-100);
   --#{$prefix}select-multi-value-border-radius: #{$spacer-1};
   --#{$prefix}select-multi-value-label-color: var(--#{$prefix}secondary);
 
-  --#{$prefix}select-indicator-width: #{$spacer-4};
-  --#{$prefix}select-indicator-height: #{$spacer-4};
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--#{$prefix}input-gap);
-  align-items: flex-start;
+  --#{$prefix}select-indicator-width: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}select-indicator-height: var(--#{$prefix}ref-spacer-4);
 
   // focus
   &:focus-within {
     .input-group {
-      border-color: var(--#{$prefix}input-group-focus-border-color);
-      box-shadow: var(--#{$prefix}input-group-focus-box-shadow);
+      border-color: var(--#{$prefix}input-focus-border-color);
+      box-shadow: var(--#{$prefix}input-focus-box-shadow);
     }
   }
 
   .d-select-control {
     display: flex;
     flex-direction: column;
-    gap: var(--#{$prefix}input-gap);
-    width: 100%;
-  }
-
-  label {
-    display: inline-flex;
-    flex-direction: row;
-    gap: var(--#{$prefix}input-label-gap);
-    align-items: center;
-
-    .d-select-icon {
-      .d-icon {
-        --#{$prefix}icon-color: var(--#{$prefix}focus-ring-color);
-      }
-    }
+    gap: var(--#{$prefix}select-gap);
   }
 
   // input with elements
   .input-group {
-    border: var(--#{$prefix}input-group-border-width) solid var(--#{$prefix}input-group-border-color);
-    border-radius: var(--#{$prefix}input-group-border-radius);
+    border: var(--#{$prefix}input-border-width) solid var(--#{$prefix}input-border-color);
+    border-radius: var(--#{$prefix}input-border-radius);
   }
 
-  // not empty
-  .input-group:not(.disabled):not(:focus-within):not(.has-validation):has(.d-select__value-container--has-value) {
-    border-color: var(--#{$prefix}input-group-hover-border-color);
+  // select control
+  .d-select-component {
+    border-radius: var(--#{$prefix}input-border-radius);
   }
 
-  // input hint
-  .input-group ~ .form-text {
-    display: inline-flex;
-    flex-direction: row;
-    gap: var(--#{$prefix}input-form-text-gap);
-    align-items: center;
-    padding: var(--#{$prefix}input-form-text-padding);
-    color: var(--#{$prefix}input-form-text-color);
-  }
+  // validation states
+  @each $state, $data in $form-validation-states {
+    $border-color: map-get($data, "border-color");
+    $tooltip-bg-color: map-get($data, "tooltip-bg-color");
+    $box-shadow: map-get($data, "focus-box-shadow");
 
-  // select control
-  .d-select-component {
-    border-radius: var(--#{$prefix}input-group-border-radius);
+    .input-group:has(.d-select-component.is-#{$state}) {
+      border-color: $border-color;
+      box-shadow: $box-shadow;
+
+      ~ .form-text {
+        color: $border-color;
+      }
+
+      .input-group-validation-icon {
+        --#{$prefix}icon-color: #{$tooltip-bg-color};
+      }
+    }
   }
 
   .d-select__control {
     width: 100%;
-    padding: var(--#{$prefix}input-padding-y) var(--#{$prefix}input-padding-x);
-    font-family: var(--#{$prefix}input-font-family);
-    @include rfs($input-font-size, --#{$prefix}input-font-size);
-    font-weight: var(--#{$prefix}input-font-weight);
-    line-height: var(--#{$prefix}input-line-height);
-    color: var(--#{$prefix}input-color);
+    padding: $input-padding-y $input-padding-x;
+    font-family: $input-font-family;
+    @include rfs($input-font-size, $input-font-size);
+    font-weight: $input-font-weight;
+    line-height: $input-line-height;
+    color: $input-color;
     appearance: none; // Fix appearance for date inputs in Safari
-    background-color: var(--#{$prefix}input-bg);
+    background-color: $input-bg;
     background-clip: padding-box;
     // border: $input-border-width solid $input-border-color;
 
@@ -146,23 +86,23 @@
 
     // Customize the `:focus` state to imitate native WebKit styles.
     &:focus {
-      color: var(--#{$prefix}input-focus-color);
-      background-color: var(--#{$prefix}input-focus-bg);
+      color: $input-focus-color;
+      background-color: $input-focus-bg;
       outline: 0;
     }
   }
 
   .d-select__placeholder {
-    color: var(--#{$prefix}input-placeholder-color);
+    color: $input-placeholder-color;
     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
     opacity: 1;
   }
 
   // select menu
   .d-select__menu-list {
-    top: calc(var(--#{$prefix}input-group-border-width) * 2);
-    background: var(--#{$prefix}input-bg);
-    border-radius: var(--#{$prefix}input-group-border-radius);
+    top: calc(var(--#{$prefix}input-border-width) * 2);
+    background: $input-bg;
+    border-radius: var(--#{$prefix}input-border-radius);
     box-shadow: var(--#{$prefix}select-menu-shadow);
   }
 
@@ -173,7 +113,7 @@
   // select option
   .d-select__option {
     display: block;
-    padding: var(--#{$prefix}input-padding-y) var(--#{$prefix}input-padding-x);
+    padding: $input-padding-y $input-padding-x;
   }
 
   .d-select__option--is-focused {
@@ -191,11 +131,11 @@
 
     > label {
       width: 100%;
-      padding: var(--#{$prefix}input-padding-x);
+      padding: $input-padding-x;
     }
 
     .form-check-input {
-      margin-right: var(--#{$prefix}input-padding-x);
+      margin-right: $input-padding-x;
     }
   }
 
@@ -221,7 +161,7 @@
   .d-select__option--has-icon {
     display: flex;
     flex-direction: row;
-    gap: var(--#{$prefix}input-padding-x);
+    gap: $input-padding-x;
     align-items: center;
     white-space: nowrap;
 
@@ -239,14 +179,22 @@
   }
 
   .d-select__indicator-separator {
-    width: var(--#{$prefix}input-gap);
+    width: var(--#{$prefix}select-gap);
   }
 
   &.disabled .d-select__control {
-    background: var(--#{$prefix}input-group-disabled-bg);
+    background: var(--#{$prefix}input-disabled-bg);
   }
 
   &.disabled .input-group {
-    border-color: var(--#{$prefix}input-group-disabled-border-color);
+    border-color: var(--#{$prefix}input-disabled-border-color);
+  }
+
+  &.disabled .d-select__single-value {
+    color: var(--#{$prefix}input-disabled-color);
+  }
+
+  &.disabled .d-icon {
+    --#{$prefix}icon-color: var(--#{$prefix}input-disabled-color);
   }
 }

package/src/style/components/_d-stepper-desktop.scss

@@ -2,16 +2,17 @@
   /* Icon container */
   --#{$prefix}step-icon-container-color: var(--#{$prefix}secondary);
   --#{$prefix}step-icon-container-background-color: var(--#{$prefix}white);
-  --#{$prefix}step-icon-container-size: 34px;
+  --#{$prefix}step-icon-container-size: var(--#{$prefix}ref-spacer-9);
+  --#{$prefix}step-icon-container-font-size: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}step-icon-container-border-width: 1px;
   --#{$prefix}step-icon-container-border-color: var(--#{$prefix}secondary);
   --#{$prefix}step-icon-container-border-radius: 100%;
   --#{$prefix}step-icon-container-z-index: 3;
 
   /* Base step */
-  --#{$prefix}step-label-height: 3rem;
-  --#{$prefix}step-icon-size: 1.125rem;
-  --#{$prefix}step-gap: .5rem;
+  --#{$prefix}step-label-height: var(--#{$prefix}ref-spacer-12);
+  --#{$prefix}step-icon-size: var(--#{$prefix}ref-spacer-6);
+  --#{$prefix}step-gap: var(--#{$prefix}ref-spacer-2);
   --#{$prefix}step-z-index: 2;
 
   /* Checked step */
@@ -28,8 +29,8 @@
   --#{$prefix}step-line-color: var(--#{$prefix}secondary);
 
   /* Step label */
-  --#{$prefix}step-label-padding: var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}step-vertical-label-padding: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}step-label-padding: var(--#{$prefix}ref-spacer-6);
+  --#{$prefix}step-vertical-label-padding: var(--#{$prefix}ref-spacer-4);
 
 
   position: relative;
@@ -55,7 +56,8 @@
       justify-content: center;
       width: var(--#{$prefix}step-icon-container-size);
       height: var(--#{$prefix}step-icon-container-size);
-
+      font-size: var(--#{$prefix}step-icon-container-font-size);
+      line-height: var(--#{$prefix}step-icon-container-font-size);
       color: var(--#{$prefix}step-icon-container-color);
       background-color: var(--#{$prefix}step-icon-container-background-color);
       border: var(--#{$prefix}step-icon-container-border-width) solid var(--#{$prefix}step-icon-container-border-color);
@@ -150,7 +152,9 @@
   }
 
   .d-step-icon {
+    --#{$prefix}icon-size: var(--#{$prefix}step-icon-size);
+
     display: flex;
-    font-size: var(--#{$prefix}step-icon-size);
+    font-size: inherit;
   }
 }

package/src/style/components/_d-stepper-mobile.scss

@@ -1,6 +1,6 @@
 .d-stepper {
   /* Container */
-  --#{$prefix}step-container-gap: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}step-container-gap: var(--#{$prefix}ref-spacer-4);
 
   /* Outter circle */
   --#{$prefix}step-progress-outter-size: 62px;

package/src/style/components/_d-tabs.scss

@@ -1,47 +1,40 @@
-.nav {
+.nav-pills,
+.nav-underline {
   --#{$prefix}tabs-nav-gap: #{$nav-nav-gap};
   --#{$prefix}tabs-nav-padding-x: #{$nav-nav-padding-x};
   --#{$prefix}tabs-nav-padding-y: #{$nav-nav-padding-y};
-  --#{$prefix}tabs-link-border-height: #{$nav-link-border-height};
-  --#{$prefix}tabs-link-line-height: #{$nav-link-line-height};
-  --#{$prefix}tabs-link-border-border-radius: #{$nav-link-border-border-radius};
-  --#{$prefix}tabs-link-border-active-color: #{$nav-link-border-active-color};
-  --#{$prefix}tabs-link-border-active-font-weight: #{$nav-link-border-active-font-weight};
-  --#{$prefix}tabs-link-border-active-bg: #{$nav-link-border-active-bg};
 
   gap: var(--#{$prefix}tabs-nav-gap);
   padding: var(--#{$prefix}tabs-nav-padding-y) var(--#{$prefix}tabs-nav-padding-x);
+
+  &.flex-column {
+    flex: 1 0 auto;
+
+    .nav-link {
+      width: 100%;
+    }
+  }
 }
 
 .nav-tabs {
+  --#{$prefix}tabs-link-border-active-font-weight: #{$nav-link-border-active-font-weight};
   .nav-link {
-    position: relative;
-    line-height: var(--#{$prefix}tabs-link-line-height);
-
     &.active {
       font-weight: var(--#{$prefix}tabs-link-border-active-font-weight);
-      color: var(--#{$prefix}tabs-link-border-active-color);
-
-      &::before {
-        background: var(--#{$prefix}tabs-link-border-active-bg);
-      }
+      border-bottom-color: transparent;
+    }
+    &:not(.active):is(:hover, :focus) {
+      border-color: transparent;
     }
-  }
-
-  .nav-link::before {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: var(--#{$prefix}tabs-link-border-height);
-    content: " ";
-    border-radius: var(--#{$prefix}tabs-link-border-border-radius);
   }
 }
 
-.nav-pills {
-  .nav-link {
-    position: relative;
-    line-height: var(--#{$prefix}tabs-link-line-height);
+.nav-underline .nav-link {
+  &:not(.active):hover {
+    border-bottom-color: transparent;
   }
 }
+.nav-link:focus-visible {
+  --#{$prefix}focus-ring-opacity: .25;
+  --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}secondary-rgb), var(--#{$prefix}focus-ring-opacity));
+}

package/src/style/helpers/_+import.scss

@@ -11,3 +11,5 @@
 @import "bootstrap/scss/helpers/stretched-link";
 @import "bootstrap/scss/helpers/text-truncation";
 @import "bootstrap/scss/helpers/vr";
+
+@import "overlay";

package/src/style/helpers/_overlay.scss

@@ -0,0 +1,17 @@
+.overlay {
+  &::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    border-radius: inherit;
+    opacity: var(--#{$prefix}overlay);
+  }
+
+  > * {
+    position: relative;
+  }
+
+  &.overlay-black::before {
+    background-color: var(--#{$prefix}black);
+  }
+}