@dynamic-framework/ui-react 1.35.1 → 1.36.0

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

@@ -1,4 +1,4 @@
-/* stylelint-disable */
+// stylelint-disable
 .react-datepicker-wrapper {
   display: inline-block;
   padding: 0;
@@ -11,16 +11,18 @@
   // General
   --#{$prefix}datepicker-bg: #{$datepicker-bg};
   --#{$prefix}datepicker-border-color: #{$datepicker-border-color};
-  --#{$prefix}datepicker-border: 1px solid #{$datepicker-border-color};
+  --#{$prefix}datepicker-border: 0px solid #{$datepicker-border-color};
   --#{$prefix}datepicker-border-radius: #{$datepicker-border-radius};
+  --#{$prefix}datepicker-box-shadow: var(--#{$prefix}box-shadow);
 
   // Header
   --#{$prefix}datepicker-header-bg: #{$datepicker-header-bg};
-  --#{$prefix}datepicker-header-border-bottom: 1px solid #{$datepicker-border-color};
+  --#{$prefix}datepicker-header-border-bottom: 0px solid #{$datepicker-border-color};
   --#{$prefix}datepicker-header-padding: #{$datepicker-header-padding};
   --#{$prefix}datepicker-header-font-weight: #{$datepicker-header-font-weight};
   --#{$prefix}datepicker-day-names-color: #{$datepicker-day-names-color};
   --#{$prefix}datepicker-day-names-font-size: #{$datepicker-day-names-font-size};
+  --#{$prefix}datepicker-day-names-font-weight: var(--#{$prefix}fw-bold);
 
   // Body
   --#{$prefix}datepicker-body-margin: #{$datepicker-body-margin};
@@ -42,6 +44,7 @@
   --#{$prefix}datepicker-day-bg: #{$datepicker-day-bg};
   --#{$prefix}datepicker-day-hover-bg: #{$datepicker-day-hover-bg};
   --#{$prefix}datepicker-day-width: #{$datepicker-day-width};
+  --#{$prefix}datepicker-day-color: #{$datepicker-day-color};
 
   // Day selected
   --#{$prefix}datepicker-day-selected-color: #{$datepicker-day-selected-color};
@@ -70,12 +73,15 @@
   --#{$prefix}datepicker-in-range-disabled-color: #{$datepicker-in-range-disabled-color};
   --#{$prefix}datepicker-in-range-disabled-bg: #{$datepicker-in-range-disabled-bg};
 
-  // Portal
-  --#{$prefix}datepicker-portal-bg: #{$datepicker-portal-bg};
+  // Time
+  --#{$prefix}datepicker-time-list-item-width: 85px;
+  --#{$prefix}datepicker-time-list-item-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-1);
+
 
   background-color: var(--#{$prefix}datepicker-bg);
   border: var(--#{$prefix}datepicker-border);
   border-radius: var(--#{$prefix}datepicker-border-radius);
+  box-shadow: var(--#{$prefix}datepicker-box-shadow);
   display: inline-block;
   position: relative;
   line-height: initial;
@@ -98,13 +104,13 @@
   line-height: 0;
 
   .react-datepicker__triangle {
-    --#{$prefix}datepicker-border-color: var(--#{$prefix}gray-400);
+    --#{$prefix}datepicker-border-color: var(--#{$prefix}gray-100);
     stroke: var(--#{$prefix}datepicker-border-color);
   }
 
   &[data-placement^="bottom"] {
     .react-datepicker__triangle {
-      --#{$prefix}datepicker-header-bg: var(--#{$prefix}gray-100);
+      --#{$prefix}datepicker-header-bg: var(--#{$prefix}secondary-soft);
       fill: var(--#{$prefix}datepicker-header-bg);
       color: var(--#{$prefix}datepicker-header-bg);
     }
@@ -148,10 +154,10 @@
 
     .d-select {
       --#{$prefix}select-option-selected-bg: var(--#{$prefix}datepicker-bg);
-      --#{$prefix}select-option-selected-color: var(--#{$prefix}datepicker-text-color);
 
       .d-select__control {
         padding: var(--#{$prefix}ref-spacer-1) var(--#{$prefix}ref-spacer-2);
+        flex-wrap: nowrap;
       }
 
       .d-select__menu-list {
@@ -222,6 +228,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  color: var(--#{$prefix}datepicker-day-names-color);
 }
 
 .react-datepicker__month-container {
@@ -270,111 +277,59 @@
     width: 6ch;
   }
 }
+// START TODO: Revisar con Mati diseño del time
+.react-datepicker__time-container {
+  float: right;
+  border-left: 1px solid var(--#{$prefix}gray-100);
+  width: var(--#{$prefix}datepicker-time-list-item-width);
+
+  .react-datepicker__time {
+    position: relative;
+    background: var(--#{$prefix}datepicker-bg);
+    border-bottom-right-radius: var(--#{$prefix}datepicker-border-radius);
 
-// .react-datepicker__input-time-container {
-//   clear: both;
-//   width: 100%;
-//   float: left;
-//   margin: var(--#{$prefix}ref-spacer-2);
-//   text-align: left;
-
-//   .react-datepicker-time__caption {
-//     display: inline-block;
-//   }
-
-//   .react-datepicker-time__input-container {
-//     display: inline-block;
-
-//     .react-datepicker-time__input {
-//       display: inline-block;
-//       margin-left: var(--#{$prefix}ref-spacer-2);
-
-//       input {
-//         width: auto;
-//       }
-
-//       input[type="time"]::-webkit-inner-spin-button,
-//       input[type="time"]::-webkit-outer-spin-button {
-//         -webkit-appearance: none;
-//         margin: 0;
-//       }
-
-//       input[type="time"] {
-//         -moz-appearance: textfield;
-//       }
-//     }
-//   }
-// }
+    .react-datepicker__time-box {
+      width: var(--#{$prefix}datepicker-time-list-item-width);
+      overflow-x: hidden;
+      margin: 0 auto;
+      text-align: center;
+      border-bottom-right-radius: var(--#{$prefix}datepicker-border-radius);
+
+      ul.react-datepicker__time-list {
+        list-style: none;
+        margin: 0;
+        height: calc(195px + (32px / 2));
+        overflow-y: scroll;
+        padding-right: 0;
+        padding-left: 0;
+        width: 100%;
+        box-sizing: border-box;
+
+        li.react-datepicker__time-list-item {
+          padding: var(--#{$prefix}datepicker-time-list-item-padding);
+          white-space: nowrap;
+          display: block;
 
-// .react-datepicker__time-container {
-//   float: right;
-//   border-left: $datepicker__border;
-//   width: 85px;
-
-//   &--with-today-button {
-//     display: inline;
-//     border: 1px solid #aeaeae;
-//     border-radius: 0.3rem;
-//     position: absolute;
-//     right: -87px;
-//     top: 0;
-//   }
-
-//   .react-datepicker__time {
-//     position: relative;
-//     background: white;
-//     border-bottom-right-radius: 0.3rem;
-
-//     .react-datepicker__time-box {
-//       width: 85px;
-//       overflow-x: hidden;
-//       margin: 0 auto;
-//       text-align: center;
-//       border-bottom-right-radius: 0.3rem;
-
-//       ul.react-datepicker__time-list {
-//         list-style: none;
-//         margin: 0;
-//         height: calc(195px + (#{$datepicker__item-size} / 2));
-//         overflow-y: scroll;
-//         padding-right: 0;
-//         padding-left: 0;
-//         width: 100%;
-//         box-sizing: content-box;
-
-//         li.react-datepicker__time-list-item {
-//           height: 30px;
-//           padding: 5px 10px;
-//           white-space: nowrap;
-
-//           &:hover {
-//             cursor: pointer;
-//             background-color: $datepicker__background-color;
-//           }
-
-//           &--selected {
-//             background-color: $datepicker__selected-color;
-//             color: white;
-//             font-weight: bold;
-
-//             &:hover {
-//               background-color: $datepicker__selected-color;
-//             }
-//           }
-
-//           &--disabled {
-//             color: $datepicker__muted-color;
-
-//             &:hover {
-//               cursor: default;
-//               background-color: transparent;
-//             }
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
+          &:hover {
+            cursor: pointer;
+            background-color: var(--#{$prefix}datepicker-day-hover-bg);
+          }
+
+          &--selected, &--selected:hover {
+            background-color: var(--#{$prefix}datepicker-day-selected-bg);
+            color: var(--#{$prefix}datepicker-day-selected-color);
+          }
+
+          &--disabled, &--disabled:hover {
+            cursor: default;
+            color: var(--#{$prefix}datepicker-day-disabled-color);
+            background-color: unset;
+          }
+        }
+      }
+    }
+  }
+}
 // END TODO: Revisar con Mati diseño del time
 
 .react-datepicker__week-number {
@@ -403,12 +358,6 @@
   }
 }
 
-.react-datepicker__day-names {
-  white-space: nowrap;
-  display: inline-flex;
-  gap: var(--#{$prefix}datepicker-body-gap);
-}
-
 .react-datepicker__week {
   white-space: nowrap;
   display: inline-flex;
@@ -420,13 +369,24 @@
 .react-datepicker__day-name,
 .react-datepicker__day,
 .react-datepicker__time-name {
-  color: var(--#{$prefix}datepicker-day-names-color);
   display: inline-block;
   text-align: center;
   width: var(--#{$prefix}datepicker-day-width);
   line-height: var(--#{$prefix}datepicker-day-width);
   font-size: var(--#{$prefix}datepicker-day-names-font-size);
+}
 
+.react-datepicker__day-names {
+  white-space: nowrap;
+  display: inline-flex;
+  gap: var(--#{$prefix}datepicker-body-gap);
+  color: var(--#{$prefix}datepicker-day-names-color);
+  font-weight: var(--#{$prefix}datepicker-day-names-font-weight);
+}
+
+.react-datepicker__day,
+.react-datepicker__time-name {
+  color: var(--#{$prefix}datepicker-day-color);
 }
 
 .react-datepicker__day--outside-month {
@@ -584,39 +544,6 @@ react-datepicker__navigation
 //   clear: left;
 // }
 
-.react-datepicker__portal {
-  --#{$prefix}datepicker-portal-bg: rgba(var(--#{$prefix}black-rgb), 0.3);
-
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--#{$prefix}datepicker-portal-bg);
-  left: 0;
-  top: 0;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  z-index: 1060;
-
-  .react-datepicker__day-name,
-  .react-datepicker__day,
-  .react-datepicker__time-name {
-    width: 3rem;
-    line-height: 3rem;
-  }
-
-  @media (max-width: 400px),
-  (max-height: 550px) {
-
-    .react-datepicker__day-name,
-    .react-datepicker__day,
-    .react-datepicker__time-name {
-      width: 2rem;
-      line-height: 2rem;
-    }
-  }
-}
-
 .react-datepicker__children-container {
   width: 13.8rem;
   margin: 0.4rem;
@@ -637,4 +564,4 @@ react-datepicker__navigation
   white-space: nowrap;
 }
 
-/* stylelint-enable */
+// stylelint-enable

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

@@ -0,0 +1,286 @@
+// stylelint-disable selector-class-pattern
+// stylelint-disable scss/selector-no-union-class-name
+
+.d-input-phone {
+  // General sizes
+  --#{$prefix}input-phone-height: #{$input-phone-height};
+  --#{$prefix}input-phone-font-size: #{$input-phone-font-size};
+  --#{$prefix}input-phone-border-radius: #{$input-phone-border-radius};
+
+  // Base and state colors
+  --#{$prefix}input-phone-border-color: #{$input-phone-border-color};
+  --#{$prefix}input-phone-background-color: #{$input-phone-background-color};
+  --#{$prefix}input-phone-text-color: #{$input-phone-text-color};
+  --#{$prefix}input-phone-disabled-background-color: #{$input-phone-disabled-background-color};
+  --#{$prefix}input-phone-disabled-text-color: #{$input-phone-disabled-text-color};
+
+  // Country selector
+  --#{$prefix}input-phone-country-selector-border-color: #{$input-phone-country-selector-border-color};
+  --#{$prefix}input-phone-country-selector-background-color: #{$input-phone-country-selector-background-color};
+  --#{$prefix}input-phone-country-selector-background-color-hover: #{$input-phone-country-selector-background-color-hover};
+  --#{$prefix}input-phone-disabled-country-selector-background-color: #{$input-phone-disabled-country-selector-background-color};
+
+  // Country selector arrow
+  --#{$prefix}input-phone-country-selector-arrow-size: #{$input-phone-country-selector-arrow-size};
+  --#{$prefix}input-phone-country-selector-arrow-color: #{$input-phone-country-selector-arrow-color};
+  --#{$prefix}input-phone-disabled-country-selector-arrow-color: #{$input-phone-disabled-country-selector-arrow-color};
+
+  // Flag
+  --#{$prefix}input-phone-flag-width: #{$input-phone-flag-width};
+  --#{$prefix}input-phone-flag-height: #{$input-phone-flag-height};
+
+  // Dropdown (country list)
+  --#{$prefix}input-phone-dropdown-top: #{$input-phone-dropdown-top};
+  --#{$prefix}input-phone-dropdown-left: #{$input-phone-dropdown-left};
+  --#{$prefix}input-phone-dropdown-border-radius: #{$input-phone-dropdown-border-radius};
+  --#{$prefix}input-phone-dropdown-border: #{$input-phone-dropdown-border};
+  --#{$prefix}input-phone-dropdown-shadow: #{$input-phone-dropdown-shadow};
+
+  // Dropdown items
+  --#{$prefix}input-phone-dropdown-item-height: #{$input-phone-dropdown-item-height};
+  --#{$prefix}input-phone-dropdown-item-padding: #{$input-phone-dropdown-item-padding};
+  --#{$prefix}input-phone-dropdown-item-font-size: #{$input-phone-dropdown-item-font-size};
+  --#{$prefix}input-phone-dropdown-item-font-weight: #{$input-phone-dropdown-item-font-weight};
+  --#{$prefix}input-phone-dropdown-item-background-color: #{$input-phone-dropdown-item-background-color};
+  --#{$prefix}input-phone-dropdown-item-text-color: #{$input-phone-dropdown-item-text-color};
+  --#{$prefix}input-phone-dropdown-item-dial-code-color: #{$input-phone-dropdown-item-dial-code-color};
+
+  // Selected / hover items
+  --#{$prefix}input-phone-hover-dropdown-item-background-color: #{$input-phone-hover-dropdown-item-background-color};
+  --#{$prefix}input-phone-selected-dropdown-item-background-color: #{$input-phone-selected-dropdown-item-background-color};
+  --#{$prefix}input-phone-selected-dropdown-item-color: #{$input-phone-selected-dropdown-item-color};
+  --#{$prefix}input-phone-selected-dropdown-item-font-weight: #{$input-phone-selected-dropdown-item-font-weight};
+  --#{$prefix}input-phone-selected-dropdown-item-dial-code-color: #{$input-phone-selected-dropdown-item-dial-code-color};
+
+  // Preferred list
+  --#{$prefix}input-phone-dropdown-preferred-list-item-background-color: #{$input-phone-dropdown-preferred-list-item-background-color};
+
+  // Preferred list separator
+  --#{$prefix}input-phone-dropdown-preferred-list-divider-margin: #{$input-phone-dropdown-preferred-list-divider-margin};
+  --#{$prefix}input-phone-dropdown-preferred-list-divider-color: #{$input-phone-dropdown-preferred-list-divider-color};
+
+  // Country code preview
+  --#{$prefix}input-phone-dial-code-preview-border-color: #{$input-phone-dial-code-preview-border-color};
+  --#{$prefix}input-phone-dial-code-preview-background-color: #{$input-phone-dial-code-preview-background-color};
+  --#{$prefix}input-phone-dial-code-preview-text-color: #{$input-phone-dial-code-preview-text-color};
+  --#{$prefix}input-phone-dial-code-preview-font-size: #{$input-phone-dial-code-preview-font-size};
+  --#{$prefix}input-phone-dial-code-preview-disabled-background-color: #{$input-phone-dial-code-preview-disabled-background-color};
+  --#{$prefix}input-phone-dial-code-preview-disabled-text-color: #{$input-phone-dial-code-preview-disabled-text-color};
+
+  :has(:disabled, .disabled) {
+    --#{$prefix}input-phone-background-color: var(--#{$prefix}input-phone-disabled-background-color);
+  }
+
+  .react-international-phone-country-selector {
+    position: relative;
+
+    &.input-group-text {
+      padding-block: 0;
+    }
+  }
+
+  .react-international-phone-country-selector-button {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--#{$prefix}input-phone-height);
+    padding: 0;
+    margin: 0;
+    text-transform: none;
+    appearance: button;
+    cursor: pointer;
+    user-select: none;
+    background-color: var(--#{$prefix}input-phone-country-selector-background-color, var(--#{$prefix}input-phone-background-color));
+    border: 0;
+
+    &:hover {
+      background-color: var(--#{$prefix}input-phone-country-selector-background-color-hover);
+    }
+
+    &--hide-dropdown {
+      cursor: auto;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &__button-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__flag-emoji {
+      margin: 0 4px;
+
+      &--disabled {
+        opacity: .75;
+      }
+    }
+
+    &__dropdown-arrow {
+      margin-right: 4px;
+      border-top: var(--#{$prefix}input-phone-country-selector-arrow-size) solid var(--#{$prefix}input-phone-country-selector-arrow-color);
+      border-right: var(--#{$prefix}input-phone-country-selector-arrow-size) solid transparent;
+      border-left: var(--#{$prefix}input-phone-country-selector-arrow-size) solid transparent;
+      transition: all .1s ease-out;
+
+      &--active {
+        transform: rotateX(180deg);
+      }
+
+      &--disabled {
+        border-top-color: var(--#{$prefix}input-phone-disabled-country-selector-arrow-color);
+      }
+    }
+
+    &--disabled {
+      cursor: auto;
+      background-color: var(--#{$prefix}input-phone-disabled-country-selector-background-color, var(--#{$prefix}input-phone-disabled-background-color));
+
+      &:hover {
+        background-color: var(--#{$prefix}input-phone-disabled-country-selector-background-color, var(--#{$prefix}input-phone-disabled-background-color));
+      }
+    }
+  }
+
+  .react-international-phone-flag-emoji {
+    box-sizing: border-box;
+    width: var(--#{$prefix}input-phone-flag-width);
+    height: var(--#{$prefix}input-phone-flag-height);
+  }
+
+  .react-international-phone-country-selector-dropdown {
+    position: absolute;
+    top: var(--#{$prefix}input-phone-dropdown-top);
+    left: var(--#{$prefix}input-phone-dropdown-left);
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    width: 300px;
+    max-height: 200px;
+    padding: 0;
+    margin: 0;
+    overflow-y: scroll;
+    color: var(--#{$prefix}input-phone-dropdown-item-text-color, var(--#{$prefix}input-phone-text-color));
+    list-style: none;
+    background-color: var(--#{$prefix}input-phone-dropdown-item-background-color, var(--#{$prefix}input-phone-background-color));
+    border: var(--#{$prefix}input-phone-dropdown-border);
+    border-radius: var(--#{$prefix}input-phone-dropdown-border-radius);
+    outline: 0;
+    box-shadow: var(--#{$prefix}input-phone-dropdown-shadow);
+  }
+
+  .react-international-phone-country-selector-dropdown__list-item--preferred {
+    background-color: var(--#{$prefix}input-phone-dropdown-preferred-list-item-background-color);
+  }
+
+  .react-international-phone-country-selector-dropdown__preferred-list-divider {
+    height: 1px;
+    margin: var(--#{$prefix}input-phone-dropdown-preferred-list-divider-margin);
+    background: var(--#{$prefix}input-phone-dropdown-preferred-list-divider-color, var(--#{$prefix}input-phone-border-color));
+    border: 0;
+  }
+
+  .react-international-phone-country-selector-dropdown__list-item {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    min-height: var(--#{$prefix}input-phone-dropdown-item-height);
+    padding: var(--#{$prefix}input-phone-dropdown-item-padding);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--#{$prefix}input-phone-hover-dropdown-item-background-color);
+    }
+
+    &-flag-emoji {
+      margin-right: 8px;
+    }
+
+    &-country-name {
+      margin-right: 8px;
+      overflow: hidden;
+      font-size: var(--#{$prefix}input-phone-dropdown-item-font-size);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-dial-code {
+      font-size: var(--#{$prefix}input-phone-dropdown-item-font-size);
+      font-weight: var(--#{$prefix}input-phone-dropdown-item-font-weight);
+      color: var(--#{$prefix}input-phone-dropdown-item-dial-code-color);
+    }
+
+    &--selected,
+    &--focused {
+      font-weight: var(--#{$prefix}input-phone-selected-dropdown-item-font-weight);
+      color: var(--#{$prefix}input-phone-selected-dropdown-item-color, var(--#{$prefix}input-phone-text-color));
+      background-color: var(--#{$prefix}input-phone-selected-dropdown-item-background-color);
+
+      .react-international-phone-country-selector-dropdown__list-item-dial-code {
+        --#{$prefix}input-phone-dropdown-item-font-weight: var(--#{$prefix}input-phone-selected-dropdown-item-font-weight);
+        --#{$prefix}input-phone-dropdown-item-dial-code-color: var(--#{$prefix}input-phone-selected-dropdown-item-dial-code-color);
+      }
+    }
+
+    &--focused {
+      background-color: var(--#{$prefix}input-phone-selected-dropdown-item-background-color);
+    }
+  }
+
+  .react-international-phone-dial-code-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    margin-right: -1px;
+    font-size: var(--#{$prefix}input-phone-dial-code-preview-font-size, var(--#{$prefix}input-phone-font-size));
+    color: var(--#{$prefix}input-phone-dial-code-preview-text-color, var(--#{$prefix}input-phone-text-color));
+    background-color: var(--#{$prefix}input-phone-dial-code-preview-background-color, var(--#{$prefix}input-phone-background-color));
+    border: 1px solid var(--#{$prefix}input-phone-dial-code-preview-border-color, var(--#{$prefix}input-phone-border-color));
+
+    &--disabled {
+      color: var(--#{$prefix}input-phone-dial-code-preview-disabled-text-color, var(--#{$prefix}input-phone-disabled-text-color));
+      background-color: var(--#{$prefix}input-phone-dial-code-preview-disabled-background-color, var(--#{$prefix}input-phone-disabled-background-color));
+    }
+  }
+
+  .react-international-phone-input-container {
+    display: flex;
+
+    .react-international-phone-country-selector-button {
+      margin-right: -1px;
+      border-radius: var(--#{$prefix}input-phone-border-radius);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .react-international-phone-input {
+      box-sizing: border-box;
+      height: var(--#{$prefix}input-phone-height);
+      padding: 0 8px;
+      margin: 0;
+      overflow: visible;
+      font-family: inherit;
+      font-size: var(--#{$prefix}input-phone-font-size);
+      color: var(--#{$prefix}input-phone-text-color);
+      background-color: var(--#{$prefix}input-phone-background-color);
+      border: 1px solid var(--#{$prefix}input-phone-border-color);
+      border-radius: var(--#{$prefix}input-phone-border-radius);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+
+      &:focus {
+        outline: 0;
+      }
+
+      .react-international-phone-input--disabled {
+        color: var(--#{$prefix}input-phone-disabled-text-color);
+        background-color: var(--#{$prefix}input-phone-disabled-background-color);
+      }
+    }
+  }
+}

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

@@ -8,7 +8,8 @@
   --#{$prefix}select-menu-z-index: #{$zindex-dropdown};
   --#{$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-selected-bg: unset;
+  --#{$prefix}select-option-selected-font-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}select-option-is-checkbox-font-size: var(--#{$prefix}body-font-size);
   --#{$prefix}select-option-is-checkbox-font-weight: var(--#{$prefix}fw-normal);
   --#{$prefix}select-option-is-checkbox-color: var(--#{$prefix}gray-900);
@@ -42,6 +43,20 @@
     gap: var(--#{$prefix}select-gap);
   }
 
+  &.d-select-floating {
+    label {
+      position: absolute;
+      top: 8px;
+      left: 16px;
+      z-index: 10;
+      font-size: calc(var(--#{$prefix}body-font-size) * .85);
+      color: rgba(var(--#{$prefix}body-color-rgb), .65);
+    }
+    .d-select__value-container {
+      padding-top: 1rem;
+    }
+  }
+
   // input with elements
   .input-group {
     border: var(--#{$prefix}input-border-width) solid var(--#{$prefix}input-border-color);
@@ -86,7 +101,7 @@
     width: 100%;
     padding: $input-padding-y $input-padding-x;
     font-family: $input-font-family;
-    @include rfs($input-font-size, $input-font-size);
+    @include rfs($input-font-size);
     font-weight: $input-font-weight;
     line-height: $input-line-height;
     color: $input-color;
@@ -138,8 +153,13 @@
   }
 
   .d-select__option--is-selected {
+    font-weight: var(--#{$prefix}select-option-selected-font-weight);
     color: var(--#{$prefix}select-option-selected-color);
     background: var(--#{$prefix}select-option-selected-bg);
+
+    &:hover {
+      --#{$prefix}select-option-selected-bg: var(--#{$prefix}gray-100);
+    }
   }
 
   // select option with checkbox