rsuite 6.0.0-canary-20250416 → 6.0.0-canary-20250424

package/DateRangePicker/styles/index.css

@@ -111,8 +111,7 @@
   --rs-bg-active: var(--rs-primary-500);
   --rs-state-hover-bg: var(--rs-primary-50);
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) r g b / 25%);
   --rs-btn-default-bg: var(--rs-gray-50);
   --rs-btn-default-text: var(--rs-gray-800);
   --rs-btn-default-border-color: var(--rs-gray-200);
@@ -154,7 +153,6 @@
   --rs-listbox-option-group-bg: var(--rs-gray-0);
   --rs-listbox-option-hover-bg: rgb(from var(--rs-primary-100) r g b / 50%);
   --rs-listbox-option-hover-text: var(--rs-primary-700);
-  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-picker-value: var(--rs-primary-700);
   --rs-picker-count-bg: var(--rs-primary-500);
   --rs-picker-count-text: #fff;
@@ -171,7 +169,6 @@
   :root,
   .rs-theme-light {
     --rs-color-focus-ring: rgba(52, 152, 255, 0.25);
-    --rs-state-focus-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
     --rs-loader-ring: rgba(247, 247, 250, 0.8);
     --rs-loader-backdrop: rgba(255, 255, 255, 0.9);
     --rs-loader-ring-inverse: rgba(247, 247, 250, 0.3);
@@ -263,9 +260,8 @@
   --rs-bg-well: var(--rs-gray-900);
   --rs-bg-active: var(--rs-primary-700);
   --rs-state-hover-bg: var(--rs-gray-600);
-  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-color-focus-ring: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) r g b / 25%);
   --rs-btn-default-bg: var(--rs-gray-600);
   --rs-btn-default-text: var(--rs-gray-50);
   --rs-btn-default-border-color: var(--rs-gray-700);
@@ -307,7 +303,6 @@
   --rs-listbox-option-group-bg: var(--rs-gray-700);
   --rs-listbox-option-hover-bg: var(--rs-gray-600);
   --rs-listbox-option-hover-text: currentColor;
-  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-picker-value: var(--rs-primary-500);
   --rs-picker-count-bg: var(--rs-primary-700);
   --rs-picker-count-text: #fff;
@@ -320,8 +315,7 @@
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
-    --rs-color-focus-ring: 0 0 0 3px rgba(52, 195, 255, 0.25);
-    --rs-state-focus-shadow: 0 0 0 3px rgba(52, 195, 255, 0.25);
+    --rs-color-focus-ring: 0 0 0 2px rgba(52, 195, 255, 0.25);
     --rs-loader-ring: rgba(233, 235, 240, 0.3);
     --rs-loader-backdrop: rgba(15, 19, 26, 0.83);
     --rs-loader-ring-inverse: rgba(233, 235, 240, 0.8);
@@ -414,8 +408,7 @@
   --rs-bg-active: var(--rs-primary-500);
   --rs-state-hover-bg: var(--rs-gray-600);
   --rs-color-focus-ring: var(--rs-gray-0);
-  --rs-state-focus-shadow: 0 0 0 3px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) r g b / 25%);
   --rs-btn-default-bg: transparent;
   --rs-btn-default-text: var(--rs-primary-500);
   --rs-btn-default-border-color: var(--rs-primary-500);
@@ -458,7 +451,6 @@
   --rs-listbox-option-group-bg: var(--rs-gray-800);
   --rs-listbox-option-hover-bg: transparent;
   --rs-listbox-option-hover-text: var(--rs-primary-500);
-  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-picker-value: var(--rs-primary-500);
   --rs-picker-count-bg: var(--rs-primary-500);
   --rs-picker-count-text: var(--rs-gray-900);
@@ -535,10 +527,8 @@
   border-color: var(--rs-btn-default-border-color);
 }
 .rs-btn:focus-visible {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-btn:focus-visible {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-btn:hover {
   color: var(--rs-btn-default-hover-text);
@@ -1198,15 +1188,12 @@
 .rs-input::placeholder {
   color: var(--rs-text-secondary);
 }
-.rs-input:focus,
-.rs-input:hover:not(:disabled) {
-  border-color: var(--rs-input-focus-border);
-}
 .rs-input:focus {
-  outline: 3px solid var(--rs-color-focus-ring);
+  border-color: var(--rs-input-focus-border);
 }
-.rs-theme-high-contrast .rs-input:focus {
-  outline-offset: 2px;
+.rs-input:focus-visible {
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-input:disabled {
   background-color: var(--rs-input-disabled-bg);
@@ -1291,18 +1278,14 @@
 .rs-theme-high-contrast .rs-input-group {
   transition: none;
 }
-.rs-input-group:not(.rs-input-group-disabled):hover,
 .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
 .rs-input-group:focus-within {
   border-color: var(--rs-input-focus-border);
 }
 .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
 .rs-input-group:focus-within {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
-.rs-theme-high-contrast .rs-input-group:focus-within {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-input-group .rs-input-group {
   outline: none !important;
@@ -1311,7 +1294,7 @@
 .rs-input-group .rs-input-group-btn {
   height: var(--rs-input-group-input-height);
 }
-.rs-input-group .rs-input-number,
+.rs-input-group .rs-number-input,
 .rs-input-group .rs-input-group-addon,
 .rs-input-group .rs-input-group-btn,
 .rs-input-group .rs-picker[data-picker='date'] .rs-picker-toggle {
@@ -1453,12 +1436,10 @@
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle {
   cursor: not-allowed;
 }
-.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active {
   background: none;
 }
-.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover::after,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus::after,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active::after {
   display: none;
@@ -2083,15 +2064,13 @@
   color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-calendar-time-dropdown-cell:hover {
-  outline: 3px solid var(--rs-color-focus-ring);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
   outline-offset: -3px;
   outline-width: 2px;
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-calendar-time-dropdown-cell:hover {
-  outline-offset: 2px;
-}
 .rs-calendar-time-dropdown-cell.rs-calendar-time-dropdown-cell-active {
   background-color: var(--rs-bg-active);
   color: var(--rs-calendar-date-selected-text);
@@ -2101,15 +2080,13 @@
   color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-theme-high-contrast .rs-calendar-time-dropdown-cell.rs-calendar-time-dropdown-cell-active:hover {
-  outline: 3px solid var(--rs-color-focus-ring);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
   outline-offset: -3px;
   outline-width: 2px;
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-theme-high-contrast .rs-calendar-time-dropdown-cell.rs-calendar-time-dropdown-cell-active:hover {
-  outline-offset: 2px;
-}
 .rs-calendar-time-dropdown-cell.rs-calendar-time-dropdown-cell-disabled {
   color: var(--rs-text-disabled);
   background: none;
@@ -2286,20 +2263,12 @@
 .rs-btn-close .rs-icon {
   vertical-align: bottom;
 }
-.rs-btn-close:hover,
-.rs-btn-close:focus {
-  color: var(--rs-close-button-hover-color);
-}
-.rs-btn-close:hover svg path,
-.rs-btn-close:focus svg path {
-  stroke: var(--rs-close-button-hover-color);
-  stroke-width: 1;
-}
 .rs-picker {
   --rs-picker-value-count-margin: var(--rs-spacing);
   --rs-picker-loader-size: 20px;
   --rs-picker-toggle-border-width: 1px;
   --rs-picker-toggle-bg: var(--rs-input-bg);
+  --rs-picker-toggle-border-color: var(--rs-border-primary);
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
@@ -2319,6 +2288,9 @@
 .rs-picker[data-disabled='true'] .rs-picker-value-count {
   opacity: 0.5;
 }
+.rs-picker[data-disabled='true'] .rs-picker-toggle {
+  pointer-events: none;
+}
 .rs-picker-toggle .rs-picker-toggle-placeholder {
   color: var(--rs-text-secondary);
 }
@@ -2341,13 +2313,14 @@
 .rs-picker-value-separator {
   margin: 0 var(--rs-spacing) 0 0;
 }
-.rs-picker:not([data-disabled='true']):hover,
 .rs-picker.rs-picker-focused {
   border-color: var(--rs-input-focus-border);
 }
 .rs-picker-toggle-active,
 .rs-picker.rs-picker-focused {
-  box-shadow: var(--rs-state-focus-shadow);
+  --rs-picker-toggle-border-color: var(--rs-input-focus-border);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
@@ -2456,12 +2429,13 @@
 }
 [data-variant='default'] .rs-picker-toggle {
   color: var(--rs-text-primary);
-  border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
+  border-width: var(--rs-picker-toggle-border-width);
+  border-color: var(--rs-picker-toggle-border-color);
+  border-style: solid;
 }
 [data-disabled='true'] .rs-picker-toggle {
   cursor: not-allowed;
 }
-.rs-picker-toggle [data-variant='default']:not([data-disabled='true']):hover,
 .rs-picker-toggle [data-variant='default']:not([data-disabled='true']):focus {
   border-color: var(--rs-input-focus-border);
 }
@@ -2473,12 +2447,10 @@
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle {
   cursor: not-allowed;
 }
-.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active {
   background: none;
 }
-.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover::after,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus::after,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active::after {
   display: none;
@@ -2531,12 +2503,7 @@
 .rs-theme-high-contrast .rs-picker-toggle {
   transition: none;
 }
-.rs-picker-toggle .rs-picker[data-variant='default']:hover,
-:not([data-disabled='true']) .rs-picker-toggle:hover,
-.rs-picker-toggle .rs-picker[data-variant='default']:focus,
-:not([data-disabled='true']) .rs-picker-toggle:focus,
-.rs-picker-toggle .rs-picker[data-variant='default']-active,
-:not([data-disabled='true']) .rs-picker-toggle-active {
+.rs-picker-toggle .rs-picker[data-variant='default']:focus {
   border-color: var(--rs-input-focus-border);
 }
 .rs-picker[data-variant='subtle'] .rs-picker-toggle {
@@ -2597,15 +2564,13 @@
   align-items: center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  font-size: var(--rs-font-size-sm);
-  background: inherit;
   color: var(--rs-text-secondary);
   transition: 0.2s color linear;
   cursor: pointer;
 }
+.rs-picker-toggle-indicator .rs-picker-clean:hover {
+  color: var(--rs-text-primary);
+}
 .rs-picker-toggle-indicator .rs-picker-clean.rs-btn-close {
   padding: 0;
 }
@@ -2643,17 +2608,13 @@
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,
 .rs-theme-high-contrast .rs-check-item.rs-check-item-focus {
-  outline: 3px solid var(--rs-color-focus-ring);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
   outline-offset: -3px;
   outline-width: 2px;
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-check-item:focus,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-check-item.rs-check-item-focus {
-  outline-offset: 2px;
-}
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover .rs-check-tree-node-text-wrapper,
 .rs-theme-high-contrast .rs-check-item:focus .rs-check-tree-node-text-wrapper,
 .rs-theme-high-contrast .rs-check-item.rs-check-item-focus .rs-check-tree-node-text-wrapper {
@@ -2779,15 +2740,13 @@
   color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-cell-content:hover {
-  outline: 3px solid var(--rs-color-focus-ring);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
   outline-offset: -3px;
   outline-width: 2px;
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-cell-content:hover {
-  outline-offset: 2px;
-}
 .rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-cell-active .rs-calendar-month-dropdown-cell-content:hover {
   background-color: var(--rs-calendar-cell-selected-hover-bg);
   color: var(--rs-calendar-date-selected-text);
@@ -2809,15 +2768,13 @@
   color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-picker-popup .rs-calendar .rs-calendar-table-cell:hover .rs-calendar-table-cell-content {
-  outline: 3px solid var(--rs-color-focus-ring);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
   outline-offset: -3px;
   outline-width: 2px;
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-popup .rs-calendar .rs-calendar-table-cell:hover .rs-calendar-table-cell-content {
-  outline-offset: 2px;
-}
 .rs-picker-popup .rs-calendar .rs-calendar-table-cell-selected:hover .rs-calendar-table-cell-content {
   background-color: var(--rs-calendar-cell-selected-hover-bg);
   color: var(--rs-calendar-date-selected-text);

package/Dropdown/styles/index.css

@@ -219,7 +219,7 @@
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-secondary: var(--rs-gray-700);
   --rs-bg-overlay: var(--rs-gray-700);
-  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-color-focus-ring: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-btn-default-bg: var(--rs-gray-600);
   --rs-btn-default-text: var(--rs-gray-50);
   --rs-btn-default-border-color: var(--rs-gray-700);
@@ -261,7 +261,7 @@
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
-    --rs-color-focus-ring: 0 0 0 3px rgba(52, 195, 255, 0.25);
+    --rs-color-focus-ring: 0 0 0 2px rgba(52, 195, 255, 0.25);
     --rs-loader-ring: rgba(233, 235, 240, 0.3);
     --rs-loader-ring-inverse: rgba(233, 235, 240, 0.8);
     --rs-menuitem-bg-active: rgba(0, 97, 153, 0.2);
@@ -445,10 +445,8 @@
   border-color: var(--rs-btn-default-border-color);
 }
 .rs-btn:focus-visible {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-btn:focus-visible {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-btn:hover {
   color: var(--rs-btn-default-hover-text);
@@ -1130,10 +1128,8 @@
   outline: 0;
 }
 .rs-dropdown-menu:focus-visible {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-dropdown-menu:focus-visible {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-dropdown .rs-dropdown-menu {
   position: absolute;

package/FormControl/styles/index.css

@@ -17,7 +17,7 @@
 .rs-form-stack-fluid .rs-form-control-wrapper {
   width: 100%;
 }
-.rs-form-stack-fluid .rs-form-control-wrapper > .rs-input-number,
+.rs-form-stack-fluid .rs-form-control-wrapper > .rs-number-input,
 .rs-form-stack-fluid .rs-form-control-wrapper > .rs-input {
   width: 100%;
 }
@@ -27,7 +27,7 @@
 .rs-form-control-wrapper {
   position: relative;
 }
-.rs-form-control-wrapper > .rs-input-number,
+.rs-form-control-wrapper > .rs-number-input,
 .rs-form-control-wrapper > .rs-input {
   width: 300px;
 }

package/FormControl/styles/index.less

@@ -5,7 +5,7 @@
   .rs-form-control-wrapper {
     width: 100%;
 
-    > .rs-input-number,
+    > .rs-number-input,
     > .rs-input {
       width: 100%;
     }
@@ -23,7 +23,7 @@
   // Used to provide relation for error message
   position: relative;
 
-  > .rs-input-number,
+  > .rs-number-input,
   > .rs-input {
     width: @form-control-width;
   }

package/IconButton/styles/index.css

@@ -223,7 +223,7 @@
   --rs-violet-700: #531ba8;
   --rs-violet-800: #470c99;
   --rs-violet-900: #390085;
-  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-color-focus-ring: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-btn-default-bg: var(--rs-gray-600);
   --rs-btn-default-text: var(--rs-gray-50);
   --rs-btn-default-border-color: var(--rs-gray-700);
@@ -265,7 +265,7 @@
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
-    --rs-color-focus-ring: 0 0 0 3px rgba(52, 195, 255, 0.25);
+    --rs-color-focus-ring: 0 0 0 2px rgba(52, 195, 255, 0.25);
     --rs-loader-ring: rgba(233, 235, 240, 0.3);
     --rs-loader-ring-inverse: rgba(233, 235, 240, 0.8);
   }
@@ -455,10 +455,8 @@
   border-color: var(--rs-btn-default-border-color);
 }
 .rs-btn:focus-visible {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-btn:focus-visible {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-btn:hover {
   color: var(--rs-btn-default-hover-text);

package/Input/styles/index.css

@@ -60,14 +60,14 @@
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
-  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-color-focus-ring: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-input-bg: var(--rs-gray-800);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
-    --rs-color-focus-ring: 0 0 0 3px rgba(52, 195, 255, 0.25);
+    --rs-color-focus-ring: 0 0 0 2px rgba(52, 195, 255, 0.25);
   }
 }
 .rs-theme-high-contrast {
@@ -132,15 +132,12 @@
 .rs-input::placeholder {
   color: var(--rs-text-secondary);
 }
-.rs-input:focus,
-.rs-input:hover:not(:disabled) {
-  border-color: var(--rs-input-focus-border);
-}
 .rs-input:focus {
-  outline: 3px solid var(--rs-color-focus-ring);
+  border-color: var(--rs-input-focus-border);
 }
-.rs-theme-high-contrast .rs-input:focus {
-  outline-offset: 2px;
+.rs-input:focus-visible {
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-input:disabled {
   background-color: var(--rs-input-disabled-bg);

package/Input/styles/mixin.less

@@ -23,12 +23,11 @@
     color: var(--rs-text-secondary);
   }
 
-  &:focus,
-  &:hover:not(:disabled) {
+  &:focus {
     border-color: var(--rs-input-focus-border);
   }
 
-  &:focus {
+  &:focus-visible {
     .focus-ring();
   }
 

package/InputGroup/styles/index.css

@@ -209,7 +209,7 @@
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
-  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-color-focus-ring: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-btn-default-bg: var(--rs-gray-600);
   --rs-btn-default-text: var(--rs-gray-50);
   --rs-btn-default-border-color: var(--rs-gray-700);
@@ -248,7 +248,7 @@
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
-    --rs-color-focus-ring: 0 0 0 3px rgba(52, 195, 255, 0.25);
+    --rs-color-focus-ring: 0 0 0 2px rgba(52, 195, 255, 0.25);
     --rs-loader-ring: rgba(233, 235, 240, 0.3);
     --rs-loader-ring-inverse: rgba(233, 235, 240, 0.8);
   }
@@ -425,10 +425,8 @@
   border-color: var(--rs-btn-default-border-color);
 }
 .rs-btn:focus-visible {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-btn:focus-visible {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-btn:hover {
   color: var(--rs-btn-default-hover-text);
@@ -1101,18 +1099,14 @@
 .rs-theme-high-contrast .rs-input-group {
   transition: none;
 }
-.rs-input-group:not(.rs-input-group-disabled):hover,
 .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
 .rs-input-group:focus-within {
   border-color: var(--rs-input-focus-border);
 }
 .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
 .rs-input-group:focus-within {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
-.rs-theme-high-contrast .rs-input-group:focus-within {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-input-group .rs-input-group {
   outline: none !important;
@@ -1121,7 +1115,7 @@
 .rs-input-group .rs-input-group-btn {
   height: var(--rs-input-group-input-height);
 }
-.rs-input-group .rs-input-number,
+.rs-input-group .rs-number-input,
 .rs-input-group .rs-input-group-addon,
 .rs-input-group .rs-input-group-btn,
 .rs-input-group .rs-picker[data-picker='date'] .rs-picker-toggle {

package/InputGroup/styles/index.less

@@ -57,9 +57,8 @@
     transition: none;
   });
 
-  // Hover and Focus States
-  // Apply special styles when the input group is hovered or focused
-  &:not(.rs-input-group-disabled):hover,
+  // Focus States
+  // Apply special styles when the input group is focused
   &:not(.rs-input-group-disabled).rs-input-group-focus,
   &:focus-within {
     border-color: var(--rs-input-focus-border);
@@ -83,7 +82,7 @@
 
   // Child Component Styles
   // Remove borders and border radius from child components
-  .rs-input-number,
+  .rs-number-input,
   .rs-input-group-addon,
   .rs-input-group-btn,
   .rs-picker[data-picker='date'] .rs-picker-toggle {