@dynamic-framework/ui-react 1.5.0 → 1.7.0

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

@@ -0,0 +1,191 @@
+.btn {
+  --#{$prefix}btn-padding-x: #{$btn-padding-x};
+  --#{$prefix}btn-padding-y: #{$btn-padding-y};
+  --#{$prefix}btn-font-family: #{$btn-font-family};
+  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
+  --#{$prefix}btn-font-weight: #{$btn-font-weight};
+  --#{$prefix}btn-line-height: #{$btn-line-height};
+  --#{$prefix}btn-color: #{$btn-color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-width: #{$btn-border-width};
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-border-radius: var(--#{$prefix}btn-component-border-radius, #{$btn-border-radius});
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
+
+  --#{$prefix}btn-link-padding-y: #{$btn-link-padding-y};
+  --#{$prefix}btn-link-padding-x: #{$btn-link-padding-x};
+  @include rfs($btn-link-font-size-sm, --#{$prefix}btn-link-font-size-sm);
+
+  --#{$prefix}btn-lg-padding-y: #{$btn-padding-y-lg};
+  --#{$prefix}btn-lg-padding-x: #{$btn-padding-x-lg};
+  --#{$prefix}btn-lg-font-size: #{$btn-font-size-lg};
+  --#{$prefix}btn-lg-border-radius: var(--#{$prefix}btn-component-lg-border-radius, #{$btn-border-radius-lg});
+
+  --#{$prefix}btn-sm-padding-y: #{$btn-padding-y-sm};
+  --#{$prefix}btn-sm-padding-x: #{$btn-padding-x-sm};
+  --#{$prefix}btn-sm-font-size: #{$btn-font-size-sm};
+  --#{$prefix}btn-sm-border-radius: var(--#{$prefix}btn-component-sm-border-radius, #{$btn-border-radius-sm});
+
+
+  display: flex;
+  flex-direction: row;
+  gap: var(--#{$prefix}btn-gap, $spacer-2);
+  align-items: center;
+  justify-content: center;
+  padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
+  font-family: var(--#{$prefix}btn-font-family);
+  @include font-size(var(--#{$prefix}btn-font-size));
+  font-weight: var(--#{$prefix}btn-font-weight);
+  line-height: var(--#{$prefix}btn-line-height);
+  color: var(--#{$prefix}btn-color);
+  text-align: center;
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: $btn-white-space;
+  vertical-align: middle;
+  cursor: if($enable-button-pointers, pointer, null);
+  user-select: none;
+  border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
+  @include border-radius(var(--#{$prefix}btn-border-radius));
+  @include gradient-bg(var(--#{$prefix}btn-bg));
+  @include box-shadow(var(--#{$prefix}btn-box-shadow));
+  @include transition($btn-transition);
+
+  // hover selectors
+  &:hover,
+  &.hover {
+    color: var(--#{$prefix}btn-hover-color);
+    text-decoration: if($link-hover-decoration == underline, none, null);
+    background-color: var(--#{$prefix}btn-hover-bg);
+    border-color: var(--#{$prefix}btn-hover-border-color);
+  }
+
+  .btn-check + &:hover {
+    // override for the checkbox/radio buttons
+    color: var(--#{$prefix}btn-color);
+    background-color: var(--#{$prefix}btn-bg);
+    border-color: var(--#{$prefix}btn-border-color);
+  }
+
+  // focus selectors
+  .btn-check:focus-visible + &,
+  &:focus-visible,
+  &.focus-visible {
+    // copy of .btn:focus bootstrap + focus var
+    color: var(var(--#{$prefix}btn-focus-color), var(--#{$prefix}btn-hover-color));
+    @include gradient-bg(var(var(--#{$prefix}btn-focus-bg), var(--#{$prefix}btn-hover-bg)));
+    border-color: var(var(--#{$prefix}btn-focus-border-color), var(--#{$prefix}btn-hover-border-color));
+    // end copy
+
+    outline: var(--#{$prefix}btn-focus-border-width, var(--#{$prefix}btn-border-width)) solid var(--#{$prefix}btn-focus-outline-color, var(--#{$prefix}focus-ring-color));
+    outline-offset: var(--#{$prefix}btn-focus-outline-offset, var(--#{$prefix}btn-border-width));
+  }
+
+  .btn-check:checked + &,
+  :not(.btn-check) + &:active,
+  &:first-child:active,
+  &.active,
+  &.show {
+    color: var(--#{$prefix}btn-active-color);
+    background-color: var(--#{$prefix}btn-active-bg);
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$prefix}btn-active-border-color);
+    @include box-shadow(var(--#{$prefix}btn-active-shadow));
+
+    &:focus-visible {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+      } @else {
+        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+      }
+    }
+  }
+
+  &:disabled,
+  &.disabled,
+  fieldset:disabled & {
+    color: var(--#{$prefix}btn-disabled-color);
+    pointer-events: none;
+    background-color: var(--#{$prefix}btn-disabled-bg);
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$prefix}btn-disabled-border-color);
+    opacity: var(--#{$prefix}btn-disabled-opacity);
+    @include box-shadow(none);
+  }
+
+  .d-icon {
+    --#{$prefix}icon-size: var(--#{$prefix}btn-font-size);
+  }
+}
+
+@each $color, $value in map-remove($theme-colors, "light", "dark") {
+  .btn-#{$color} {
+    @include df-button-variant($color);
+  }
+
+  .btn-outline-#{$color} {
+    @include df-button-outline-variant($color);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-link-#{$color} {
+    @if $color == "light" {
+      @include df-button-link-variant(
+        $color,
+        $text-color-100: var(--#{$prefix}light),
+        $text-color-500: var(--#{$prefix}light),
+        $text-color-700: var(--#{$prefix}light),
+        $text-color-900: var(--#{$prefix}light),
+      );
+    } @else if $color == "dark" {
+      @include df-button-link-variant(
+        $color,
+        $text-color-100: var(--#{$prefix}dark),
+        $text-color-500: var(--#{$prefix}dark),
+        $text-color-700: var(--#{$prefix}dark),
+        $text-color-900: var(--#{$prefix}dark),
+      );
+    } @else {
+      @include df-button-link-variant($color);
+    }
+  }
+}
+
+.btn-lg {
+  @include button-size(
+    var(--#{$prefix}btn-lg-padding-y),
+    var(--#{$prefix}btn-lg-padding-x),
+    var(--#{$prefix}btn-lg-font-size),
+    var(--#{$prefix}btn-lg-border-radius),
+  );
+}
+
+.btn-sm {
+  @include button-size(
+    var(--#{$prefix}btn-sm-padding-y),
+    var(--#{$prefix}btn-sm-padding-x),
+    var(--#{$prefix}btn-sm-font-size),
+    var(--#{$prefix}btn-sm-border-radius),
+  );
+}
+
+[class^="btn-link"] {
+  text-decoration: var(--#{$prefix}link-decoration);
+
+  > span {
+    text-decoration: var(--#{$prefix}link-decoration);
+  }
+
+  &.btn-sm {
+    @include font-size(var(--#{$prefix}btn-link-font-size-sm));
+  }
+
+  @if $enable-gradients {
+    background-image: none;
+  }
+}

package/src/style/components/_d-card-account.scss

@@ -1,8 +1,8 @@
 .d-card-account {
   // Card
-  --#{$prefix}card-border-width: 0px;
-  --#{$prefix}card-spacer-y: #{$spacer};
-  --#{$prefix}card-spacer-x: #{$spacer};
+  --#{$prefix}card-border-width: 0;
+  --#{$prefix}card-spacer-y: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}card-spacer-x: var(--#{$prefix}ref-spacer-3);
   --#{$prefix}card-color: var(--#{$prefix}body-color);
   // Card body
   --#{$prefix}card-body-gap: #{$spacer};

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

@@ -0,0 +1,52 @@
+.d-chip {
+  --#{$prefix}chip-bg: #{$chip-bg};
+  --#{$prefix}chip-gap: #{$chip-gap};
+  --#{$prefix}chip-color: #{$chip-color};
+  --#{$prefix}chip-border-radius: #{$chip-border-radius};
+  --#{$prefix}chip-padding-x: #{$chip-padding-x};
+  --#{$prefix}chip-padding-y: #{$chip-padding-y};
+  --#{$prefix}chip-font-size: #{$chip-font-size};
+  --#{$prefix}chip-font-weight: #{$chip-font-weight};
+  --#{$prefix}chip-line-height: #{$chip-line-height};
+
+  display: flex;
+  flex-direction: row;
+  gap: var(--#{$prefix}chip-gap);
+  align-items: center;
+  padding: var(--#{$prefix}chip-padding-y) var(--#{$prefix}chip-padding-x);
+  font-size: var(--#{$prefix}chip-font-size);
+  font-weight: var(--#{$prefix}chip-font-weight);
+  line-height: var(--#{$prefix}chip-line-height);
+  color: var(--#{$prefix}chip-color);
+  background-color: var(--#{$prefix}chip-bg);
+  border-radius: var(--#{$prefix}chip-border-radius);
+
+  .d-icon {
+    --#{$prefix}icon-size: var(--#{$prefix}chip-font-size);
+  }
+
+  .d-chip-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--#{$prefix}chip-line-height);
+    height: var(--#{$prefix}chip-line-height);
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: 0;
+  }
+
+  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
+    $color: color-contrast($value);
+    &.d-chip-#{$theme} {
+      --#{$prefix}chip-color: var(--#{$prefix}#{$theme}-700);
+      --#{$prefix}chip-bg: var(--#{$prefix}#{$theme}-100);
+    }
+  }
+
+  &.d-chip-light {
+    --#{$prefix}chip-color: var(--#{$prefix}gray);
+    --#{$prefix}chip-bg: var(--#{$prefix}gray-100);
+  }
+}

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

@@ -0,0 +1,32 @@
+.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-padding: var(--#{$prefix}icon-component-padding, 0);
+  --#{$prefix}icon-loading-duration: var(--#{$prefix}icon-component-loading-duration, 1.8);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--#{$prefix}icon-size);
+  height: var(--#{$prefix}icon-size);
+  padding: var(--#{$prefix}icon-padding);
+  font-size: var(--#{$prefix}icon-size);
+  color: var(--#{$prefix}icon-color);
+  background-color: var(--#{$prefix}icon-bg-color);
+  border-radius: var(--#{$prefix}icon-padding);
+}
+
+.d-icon-loading {
+  animation: loading-icon var(--#{$prefix}icon-loading-duration) infinite linear;
+}
+
+@keyframes loading-icon {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,20 @@
+.form-check-input {
+  &:hover {
+    border-color: $form-check-input-hover-border-color;
+  }
+
+  &:focus {
+    border-color: $form-check-input-focus-border-color;
+    outline: $form-check-input-focus-outline;
+    outline-offset: $form-check-input-focus-outline-offset;
+  }
+
+  &:checked {
+    border-color: $form-check-input-checked-border-color;
+  }
+
+  &:disabled {
+    background-color: $form-check-input-disabled-bg;
+    border-color: $form-check-input-disabled-border-color;
+  }
+}

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

@@ -0,0 +1,121 @@
+.d-input-pin {
+  --#{$prefix}input-pin-gap: #{$spacer-2};
+
+  --#{$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};
+
+  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 {
+      .d-icon {
+        --#{$prefix}icon-color: var(--#{$prefix}focus-ring-color);
+      }
+    }
+  }
+
+  .d-input-pin-controls {
+    display: flex;
+    flex-direction: row;
+    gap: var(--#{$prefix}input-pin-form-control-gap);
+    width: 100%;
+  }
+
+  .form-control {
+    width: var(--#{$prefix}input-pin-form-control-width);
+    height: var(--#{$prefix}input-pin-form-control-height);
+    text-align: center;
+    box-shadow: none;
+  }
+
+  .form-control::-webkit-inner-spin-button,
+  .form-control::-webkit-outer-spin-button {
+    margin: 0;
+    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 {
+      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 {
+      border-color: var(--#{$prefix}input-pin-form-control-focus-border-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");
+
+    &:has(.form-control.is-#{$state}){
+      .form-control {
+        border-color: $tooltip-bg-color;
+      }
+
+      .form-text {
+        color: $border-color;
+      }
+
+      .d-input-pin-validation-icon {
+        .d-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);
+  }
+}

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

@@ -0,0 +1,20 @@
+.d-input {
+  &:has(.form-select:not(:disabled)) {
+    --#{$prefix}input-group-border-color: var(--#{$prefix}input-group-hover-border-color);
+  }
+
+  .form-select {
+    text-align: var(--#{$prefix}input-form-control-text-align);
+    border-width: 0;
+    box-shadow: none;
+
+    &:not(:last-child) {
+      padding-right: $form-select-padding-x * 2;
+      background-position: right center;
+    }
+
+    &:not(:first-child) {
+      padding-left: 0;
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+.form-switch {
+  --#{$prefix}input-switch-bg: var(--#{$prefix}gray-300);
+  --#{$prefix}input-switch-border-color: var(--#{$prefix}gray-500);
+  --#{$prefix}input-switch-dot: #{escape-svg($form-switch-bg-image)};
+  --#{$prefix}input-switch-hover-border-color: var(--#{$prefix}focus-ring-color);
+  --#{$prefix}input-switch-focus-outline-color: var(--#{$prefix}focus-ring-color);
+  --#{$prefix}input-switch-active-border-color: var(--#{$prefix}focus-ring-color);
+  --#{$prefix}input-switch-active-bg: var(--#{$prefix}focus-ring-color);
+  --#{$prefix}input-switch-disabled-border-color: var(--#{$prefix}gray-300);
+  --#{$prefix}input-switch-disabled-bg: var(--#{$prefix}gray-100);
+  --#{$prefix}input-switch-disabled-dot: #{escape-svg($form-switch-disabled-bg-image)};
+  --#{$prefix}input-switch-label-color: #{$form-switch-label-color};
+  --#{$prefix}input-switch-active-label-color: #{$form-switch-active-label-color};
+
+  .form-check-label {
+    color: var(--#{$prefix}input-switch-label-color);
+  }
+
+  .form-check-input:checked ~ .form-check-label {
+    color: var(--#{$prefix}input-switch-active-label-color);
+  }
+
+  .form-check-input {
+    background-color: var(--#{$prefix}input-switch-bg);
+    background-image: var(--#{$prefix}input-switch-dot);
+    border: 1px solid var(--#{$prefix}input-switch-border-color);
+
+    &:checked {
+      background-color: var(--#{$prefix}input-switch-active-bg);
+      border-color: var(--#{$prefix}input-switch-active-border-color);
+    }
+
+    &[disabled]:not(:checked),
+    &:disabled:not(:checked) {
+      background-color: var(--#{$prefix}input-switch-disabled-bg);
+      background-image: var(--#{$prefix}input-switch-disabled-dot);
+      border-color: var(--#{$prefix}input-switch-disabled-border-color);
+    }
+  }
+
+  &:hover {
+    &.form-switch {
+      .form-check-input:not([disabled]),
+      .form-check-input:not(:disabled) {
+        border-color: var(--#{$prefix}input-switch-hover-border-color);
+      }
+    }
+  }
+
+  &:focus-within {
+    &.form-switch {
+      .form-check-input {
+        outline: 2px solid var(--#{$prefix}input-switch-focus-outline-color);
+        outline-offset: 2px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,168 @@
+.d-input {
+  --#{$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};
+  // label if input has value
+  --#{$prefix}input-label-has-value-color: #{$form-label-has-value-color};
+
+  // 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-form-control-text-align: var(--#{$prefix}input-component-form-control-text-align, "left");
+
+  // 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};
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}input-gap);
+  align-items: flex-start;
+
+  // focus
+  &:focus-within {
+    .input-group {
+      border-color: var(--#{$prefix}input-group-focus-border-color);
+      box-shadow: var(--#{$prefix}input-group-focus-box-shadow);
+
+      &:hover:has(.form-control:not(:placeholder-shown:disabled)),
+      &:hover {
+        border-color: var(--#{$prefix}input-group-focus-border-color);
+      }
+    }
+  }
+
+  // form-control container
+  .d-input-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;
+    padding: var(--#{$prefix}input-label-padding-y) var(--#{$prefix}input-label-padding-x);
+    font-size: var(--#{$prefix}input-label-font-size);
+    font-weight: var(--#{$prefix}input-label-font-weight);
+    color: var(--#{$prefix}input-label-color);
+
+    .d-input-icon {
+      .d-icon {
+        --#{$prefix}icon-color: var(--#{$prefix}focus-ring-color);
+      }
+    }
+  }
+
+  // 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);
+  }
+
+  // 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");
+
+    &:has(.form-control.is-#{$state}){
+      .input-group {
+        border-color: $border-color;
+      }
+
+      .input-group ~ .form-text {
+        color: $border-color;
+      }
+
+      .d-input-validation-icon {
+        .d-icon {
+          --#{$prefix}icon-color: #{$tooltip-bg-color};
+        }
+      }
+    }
+  }
+
+  // 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);
+  }
+
+  // input element
+  .form-control {
+    text-align: var(--#{$prefix}input-form-control-text-align);
+    border-width: 0;
+    box-shadow: none;
+
+    &:not(:last-child) {
+      padding-right: 0;
+    }
+
+    &:not(:first-child) {
+      padding-left: 0;
+    }
+  }
+
+  .form-control::-webkit-inner-spin-button,
+  .form-control::-webkit-outer-spin-button {
+    margin: 0;
+    appearance: none;
+  }
+
+  // input addons
+  .input-group-text {
+    border: 0;
+    outline: 0;
+  }
+
+  // input disabled
+  .form-control:disabled {
+    background: var(--#{$prefix}input-group-disabled-bg);
+  }
+
+
+  &:has(.form-control:disabled) {
+    // input addons disabled
+    .input-group-text {
+      background: var(--#{$prefix}input-group-disabled-bg);
+    }
+
+    // icon disabled
+    .d-input-icon {
+      .d-icon {
+        color: var(--#{$prefix}input-group-disabled-color);
+      }
+    }
+
+    // input with elements disabled
+    .input-group {
+      border-color: var(--#{$prefix}input-group-disabled-border-color);
+    }
+  }
+}