rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250403

package/TagPicker/styles/index.css

@@ -1631,7 +1631,7 @@ textarea.rs-input {
 .rs-input-group .rs-input-number,
 .rs-input-group .rs-input-group-addon,
 .rs-input-group .rs-input-group-btn,
-.rs-input-group .rs-picker-date .rs-picker-toggle {
+.rs-input-group .rs-picker[data-picker='date'] .rs-picker-toggle {
   border: none;
   border-radius: var(--rs-radius-none);
   outline: none;
@@ -1792,25 +1792,23 @@ textarea.rs-input {
   --rs-picker-loader-size: 20px;
   --rs-picker-toggle-border-width: 1px;
   --rs-picker-toggle-bg: var(--rs-input-bg);
-}
-.rs-picker-toggle-wrapper {
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
 }
-.rs-picker-block {
+.rs-picker[data-block='true'] {
   display: block;
   width: 100%;
 }
-.rs-picker-disabled {
+.rs-picker[data-disabled='true'] {
   cursor: not-allowed;
 }
-.rs-picker-disabled .rs-picker-toggle-value,
-.rs-picker-disabled .rs-picker-toggle-indicator,
-.rs-picker-disabled .rs-picker-tag-list .rs-tag {
+.rs-picker[data-disabled='true'] .rs-picker-toggle-value,
+.rs-picker[data-disabled='true'] .rs-picker-toggle-indicator,
+.rs-picker[data-disabled='true'] .rs-picker-tag-list .rs-tag {
   color: var(--rs-text-disabled) !important;
 }
-.rs-picker-disabled .rs-picker-value-count {
+.rs-picker[data-disabled='true'] .rs-picker-value-count {
   opacity: 0.5;
 }
 .rs-picker-toggle .rs-picker-toggle-placeholder {
@@ -1820,10 +1818,6 @@ textarea.rs-input {
 .rs-picker-has-value .rs-picker-toggle .rs-picker-toggle-value {
   color: var(--rs-picker-value);
 }
-.rs-picker-countable .rs-picker-toggle-value {
-  display: flex;
-  align-items: center;
-}
 .rs-picker-value-list {
   flex: 0 1 auto;
   overflow: hidden;
@@ -1834,11 +1828,12 @@ textarea.rs-input {
   margin-inline: var(--rs-picker-value-count-margin);
   background-color: var(--rs-picker-count-bg);
   color: var(--rs-picker-count-text);
+  flex-shrink: 0;
 }
 .rs-picker-value-separator {
   margin: 0 var(--rs-spacing) 0 0;
 }
-.rs-picker:not(.rs-picker-disabled):hover,
+.rs-picker:not([data-disabled='true']):hover,
 .rs-picker.rs-picker-focused {
   border-color: var(--rs-input-focus-border);
 }
@@ -1874,6 +1869,7 @@ textarea.rs-input {
   --rs-picker-popup-shadow: var(--rs-shadow-md);
   --rs-picker-popup-position-x: var(--rs-position-x);
   --rs-picker-popup-position-y: var(--rs-position-y);
+  --rs-picker-min-width: 0;
   position: absolute;
   top: var(--rs-picker-popup-position-y);
   left: var(--rs-picker-popup-position-x) /* rtl:ignore */;
@@ -1887,6 +1883,7 @@ textarea.rs-input {
   background-color: var(--rs-bg-overlay);
   box-shadow: var(--rs-picker-popup-shadow);
   padding-block: var(--rs-picker-popup-border-radius);
+  min-width: var(--rs-picker-min-width);
 }
 .rs-theme-high-contrast .rs-picker-popup {
   border: 1px solid var(--rs-border-primary);
@@ -1912,37 +1909,74 @@ textarea.rs-input {
   color: var(--rs-text-secondary);
   cursor: default;
 }
-.rs-picker-default .rs-picker-toggle {
+.rs-picker-popup .rs-picker-listbox {
+  max-height: var(--rs-picker-listbox-max-height);
+}
+.rs-picker-popup[data-breakpoint='xs'] {
+  min-width: unset;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-picker-listbox {
+  height: unset;
+  max-height: unset;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-tree,
+.rs-picker-popup[data-breakpoint='xs'] .rs-check-tree {
+  display: flex;
+  flex-direction: column;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-tree-view,
+.rs-picker-popup[data-breakpoint='xs'] .rs-check-tree-view {
+  max-height: unset;
+  flex: 1 1 auto;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-calendar-table {
+  width: 100%;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-picker-box {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.rs-picker-popup[data-breakpoint='xs'].rs-picker-popup-date .rs-calendar,
+.rs-picker-popup[data-breakpoint='xs'] .rs-picker-daterange-panel-only-time .rs-calendar {
+  height: 348px;
+}
+[data-variant='default'] .rs-picker-toggle {
   color: var(--rs-text-primary);
   border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
 }
-.rs-picker-disabled .rs-picker-toggle {
+[data-disabled='true'] .rs-picker-toggle {
   cursor: not-allowed;
 }
-.rs-picker-toggle .rs-picker-default:not(.rs-picker-disabled):hover,
-.rs-picker-toggle .rs-picker-default:not(.rs-picker-disabled):focus {
+.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);
 }
-.rs-picker-subtle .rs-picker-toggle {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle {
   --rs-picker-toggle-border-width: 0px;
   position: relative;
   z-index: 5;
 }
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle {
   cursor: not-allowed;
 }
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:hover,
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:focus,
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:active {
+.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-subtle.rs-picker-disabled .rs-picker-toggle:hover::after,
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:focus::after,
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:active::after {
+.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;
 }
 .rs-picker-toggle-label {
-  color: var(--rs-text-primary);
+  color: var(--rs-text-secondary);
 }
 .rs-picker-toggle .rs-picker-toggle-stack {
   flex: 1 1 auto;
@@ -1981,44 +2015,67 @@ textarea.rs-input {
 .rs-picker-toggle-read-only {
   opacity: 0;
 }
-.rs-picker-default .rs-picker-toggle {
+.rs-picker-toggle .rs-picker[data-variant='default'],
+.rs-picker-toggle {
   transition: border-color ease-in-out 0.15s;
 }
-.rs-theme-high-contrast .rs-picker-default .rs-picker-toggle {
+.rs-theme-high-contrast .rs-picker-toggle .rs-picker[data-variant='default'],
+.rs-theme-high-contrast .rs-picker-toggle {
   transition: none;
 }
-.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:hover,
-.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:focus,
-.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle-active {
+.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 {
   border-color: var(--rs-input-focus-border);
 }
-.rs-picker-subtle .rs-picker-toggle {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle {
   color: var(--rs-btn-subtle-text);
   background-color: transparent;
   transition: none;
 }
-.rs-picker-subtle .rs-picker-toggle:hover {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle:hover {
   color: var(--rs-btn-subtle-hover-text);
   background-color: var(--rs-btn-subtle-hover-bg);
 }
-.rs-picker-subtle .rs-picker-toggle:active,
-.rs-picker-subtle .rs-picker-toggle.rs-btn-active {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle:active,
+.rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-active {
   color: var(--rs-btn-subtle-active-text);
   background-color: var(--rs-btn-subtle-active-bg);
 }
-.rs-picker-subtle .rs-picker-toggle:disabled,
-.rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle:disabled,
+.rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-disabled {
   color: var(--rs-btn-subtle-disabled-text);
   background: none;
 }
-.rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle:disabled,
-.rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
+.rs-theme-high-contrast .rs-picker[data-variant='subtle'] .rs-picker-toggle:disabled,
+.rs-theme-high-contrast .rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-disabled {
   border-color: var(--rs-btn-default-disabled-boreder-color);
 }
-.rs-picker-subtle .rs-picker-toggle-active {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle-active {
   background-color: var(--rs-btn-subtle-hover-bg);
   color: var(--rs-btn-subtle-hover-text);
 }
+.rs-picker-toggle[data-size='lg'] .rs-picker-clean .rs-icon {
+  width: 16px;
+  height: 16px;
+}
+.rs-picker-toggle[data-size='sm'] .rs-picker-clean {
+  height: 18px;
+}
+.rs-picker-toggle[data-size='xs'] .rs-picker-clean {
+  height: 18px;
+}
+.rs-picker-toggle[data-size='xs'] .rs-picker-clean .rs-icon {
+  width: 12px;
+  height: 12px;
+}
+.rs-picker-toggle[data-countable='true'] .rs-picker-toggle-value {
+  display: flex;
+  align-items: center;
+}
 .rs-picker-toggle.rs-btn {
   text-align: start;
   display: inline-flex;
@@ -2052,18 +2109,18 @@ textarea.rs-input {
   font-size: var(--rs-font-size-md);
   color: var(--rs-text-secondary);
 }
-.rs-picker-default .rs-btn,
+.rs-picker[data-variant='default'] .rs-btn,
 .rs-picker-input .rs-btn,
-.rs-picker-default .rs-picker-toggle,
+.rs-picker[data-variant='default'] .rs-picker-toggle,
 .rs-picker-input .rs-picker-toggle {
   background-color: var(--rs-picker-toggle-bg);
 }
-.rs-picker-default.rs-picker-disabled,
-.rs-picker-input.rs-picker-disabled {
+.rs-picker[data-variant='default'][data-disabled='true'],
+.rs-picker-input[data-disabled='true'] {
   --rs-picker-toggle-bg: var(--rs-input-disabled-bg);
 }
-.rs-picker-default.rs-picker-disabled .rs-input-group,
-.rs-picker-input.rs-picker-disabled .rs-input-group {
+.rs-picker[data-variant='default'][data-disabled='true'] .rs-input-group,
+.rs-picker-input[data-disabled='true'] .rs-input-group {
   pointer-events: none;
 }
 .rs-check-item {
@@ -2140,7 +2197,7 @@ textarea.rs-input {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rs-picker-input {
+.rs-picker[data-picker='input'] {
   --rs-picker-textbox-margin-inline: var(--rs-picker-input-height);
   position: relative;
   border: 1px solid var(--rs-border-primary);
@@ -2149,44 +2206,45 @@ textarea.rs-input {
   background-color: var(--rs-input-bg);
   overflow: hidden;
 }
-.rs-picker-input .rs-picker-toggle {
+.rs-picker[data-picker='input'] .rs-picker-toggle {
   border: none !important;
   height: var(--rs-picker-input-height);
   cursor: text;
 }
-.rs-picker-input:not(.rs-picker-disabled) .rs-picker-toggle {
+.rs-picker[data-picker='input']:not([data-disabled='true']) .rs-picker-toggle {
   position: absolute !important;
 }
-.rs-picker-input.rs-picker-input-xs {
+.rs-picker[data-picker='input'][data-size='xs'] {
   --rs-picker-input-height: calc(var(--rs-btn-size-xs) - 2px);
   --rs-picker-search-input-font-size: var(--rs-input-font-size-xs);
   --rs-picker-search-input-line-height: var(--rs-input-line-height-xs);
   --rs-picker-search-input-padding-block: var(--rs-input-padding-block-xs);
   --rs-picker-search-input-padding-inline: var(--rs-input-padding-inline-xs);
 }
-.rs-picker-input.rs-picker-input-sm {
+.rs-picker[data-picker='input'][data-size='sm'] {
   --rs-picker-input-height: calc(var(--rs-btn-size-sm) - 2px);
   --rs-picker-search-input-font-size: var(--rs-input-font-size-sm);
   --rs-picker-search-input-line-height: var(--rs-input-line-height-sm);
   --rs-picker-search-input-padding-block: var(--rs-input-padding-block-sm);
   --rs-picker-search-input-padding-inline: var(--rs-input-padding-inline-sm);
 }
-.rs-picker-input.rs-picker-input-md {
+.rs-picker[data-picker='input'][data-size='md'] {
   --rs-picker-input-height: calc(var(--rs-btn-size-md) - 2px);
   --rs-picker-search-input-font-size: var(--rs-input-font-size-md);
   --rs-picker-search-input-line-height: var(--rs-input-line-height-md);
   --rs-picker-search-input-padding-block: var(--rs-input-padding-block-md);
   --rs-picker-search-input-padding-inline: var(--rs-input-padding-inline-md);
 }
-.rs-picker-input.rs-picker-input-lg {
+.rs-picker[data-picker='input'][data-size='lg'] {
   --rs-picker-input-height: calc(var(--rs-btn-size-lg) - 2px);
   --rs-picker-search-input-font-size: var(--rs-input-font-size-lg);
   --rs-picker-search-input-line-height: var(--rs-input-line-height-lg);
   --rs-picker-search-input-padding-block: var(--rs-input-padding-block-lg);
   --rs-picker-search-input-padding-inline: var(--rs-input-padding-inline-lg);
 }
-.rs-picker-input .rs-picker-textbox {
+.rs-picker[data-picker='input'] .rs-picker-textbox {
   margin-inline-end: var(--rs-picker-textbox-margin-inline);
+  height: var(--rs-picker-input-height);
 }
 .rs-picker-search {
   border: none;
@@ -2400,90 +2458,100 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-picker-check-menu-items .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
   font-weight: bold;
 }
-.rs-picker-subtle .picker-subtle-toggle {
+.rs-picker[data-variant='subtle'] .picker-subtle-toggle {
   --rs-picker-toggle-border-width: 0px;
   position: relative;
   z-index: 5;
 }
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle {
   cursor: not-allowed;
 }
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:hover,
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:focus,
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:active {
+.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-subtle.rs-picker-disabled .picker-subtle-toggle:hover::after,
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:focus::after,
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:active::after {
+.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;
 }
-.rs-picker-tag {
+.rs-picker[data-picker='tag'] {
   --rs-tag-picker-input-font-size-xs: var(--rs-font-size-xs);
   --rs-tag-picker-input-font-size-sm: var(--rs-font-size-sm);
   --rs-tag-picker-input-font-size-md: var(--rs-font-size-sm);
   --rs-tag-picker-input-font-size-lg: var(--rs-font-size-md);
   --rs-tag-border-radius: var(--rs-radius-sm);
   --rs-tag-picker-padding-block: calc(8px - 1px);
+  position: relative;
+  border: 1px solid var(--rs-border-primary);
+  border-radius: var(--rs-radius-md);
+  transition: border-color ease-in-out 0.15s;
+  background-color: var(--rs-input-bg);
+  overflow: hidden;
 }
-.rs-picker-tag .rs-picker-toggle {
+.rs-picker[data-picker='tag'] .rs-picker-toggle {
+  position: absolute;
+  height: 100%;
+  border: none !important;
+  height: var(--rs-picker-input-height);
   inset-inline-start: 0;
   cursor: text;
   box-shadow: none;
   padding-block: var(--rs-tag-picker-padding-block);
 }
-.rs-picker-tag.rs-picker-disabled .rs-picker-toggle {
-  position: absolute;
-  height: 100%;
+.rs-picker[data-picker='tag'] .rs-picker-textbox {
+  min-width: calc(20 * 0.5875rem);
+  margin-inline-end: var(--rs-picker-textbox-min-height);
 }
-.rs-picker-tag .rs-tag {
+.rs-picker[data-picker='tag'] .rs-tag {
   vertical-align: top;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rs-picker-tag .rs-picker-search > input {
+.rs-picker[data-picker='tag'] .rs-picker-search > input {
   background: none;
   outline: none;
   border: none;
   width: 100%;
 }
-.rs-picker-tag .rs-picker-search,
-.rs-picker-tag .rs-picker-search-input,
-.rs-picker-tag .rs-picker-search-input > input {
+.rs-picker[data-picker='tag'] .rs-picker-search,
+.rs-picker[data-picker='tag'] .rs-picker-search-input,
+.rs-picker[data-picker='tag'] .rs-picker-search-input > input {
   display: inline-block;
   width: auto;
   min-width: 14px;
 }
-.rs-picker-tag .rs-picker-search-input > input {
+.rs-picker[data-picker='tag'] .rs-picker-search-input > input {
   padding: 0;
   border: transparent;
   background: transparent;
 }
-.rs-picker-tag .rs-picker-textbox {
+.rs-picker[data-picker='tag'] .rs-picker-textbox {
   min-height: var(--rs-picker-textbox-min-height, 34px);
-  margin-inline-end: var(--rs-picker-textbox-min-height);
   position: relative;
   z-index: 6;
 }
-.rs-picker-tag .rs-picker-textbox .rs-picker-search-input {
+.rs-picker[data-picker='tag'] .rs-picker-textbox .rs-picker-search-input {
   font-size: var(--rs-tag-picker-input-font-size, 0.875rem);
   padding: var(--rs-tag-picker-input-padding, 2px 4px);
 }
-.rs-picker-tag .rs-picker-tag-list {
+.rs-picker[data-picker='tag'] .rs-picker-tag-list {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: var(--rs-tag-spacing, 4px);
   padding: var(--rs-tag-list-padding, 4px);
+  padding-inline-end: 0;
 }
-.rs-picker-tag .rs-picker-tag-list .rs-tag {
+.rs-picker[data-picker='tag'] .rs-picker-tag-list .rs-tag {
   border-radius: var(--rs-tag-border-radius);
 }
 .rs-plaintext .rs-tag {
   margin: 0;
 }
-.rs-picker-tag-lg {
+.rs-picker[data-picker='tag'][data-size='lg'] {
   --rs-tag-spacing: 5px;
   --rs-tag-list-padding: 5px;
   --rs-picker-textbox-min-height: 40px;
@@ -2491,7 +2559,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   --rs-tag-picker-input-padding: 3px 5px;
   --rs-tag-picker-padding-block: var(--rs-btn-padding-block-lg);
 }
-.rs-picker-tag-md {
+.rs-picker[data-picker='tag'][data-size='md'] {
   --rs-tag-spacing: 5px;
   --rs-tag-list-padding: 5px;
   --rs-picker-textbox-min-height: 34px;
@@ -2499,7 +2567,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   --rs-tag-picker-input-padding: 2px 4px;
   --rs-tag-picker-padding-block: var(--rs-btn-padding-block-md);
 }
-.rs-picker-tag-sm {
+.rs-picker[data-picker='tag'][data-size='sm'] {
   --rs-tag-spacing: 4px;
   --rs-tag-list-padding: 4px;
   --rs-picker-textbox-min-height: 28px;
@@ -2507,7 +2575,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   --rs-tag-picker-input-padding: 0 2px;
   --rs-tag-picker-padding-block: var(--rs-btn-padding-block-sm);
 }
-.rs-picker-tag-xs {
+.rs-picker[data-picker='tag'][data-size='xs'] {
   --rs-tag-spacing: 2px;
   --rs-tag-list-padding: 1px;
   --rs-picker-textbox-min-height: 22px;

package/TagPicker/styles/index.less

@@ -3,7 +3,7 @@
 @import '../../CheckPicker/styles/index.less';
 @import '../../internals/Picker/styles/mixin.less';
 
-.rs-picker-tag {
+.rs-picker[data-picker='tag'] {
   --rs-tag-picker-input-font-size-xs: var(--rs-font-size-xs);
   --rs-tag-picker-input-font-size-sm: var(--rs-font-size-sm);
   --rs-tag-picker-input-font-size-md: var(--rs-font-size-sm);
@@ -11,19 +11,29 @@
   --rs-tag-border-radius: var(--rs-radius-sm);
   --rs-tag-picker-padding-block: calc(@padding-y - 1px);
 
+  position: relative;
+  border: 1px solid var(--rs-border-primary);
+  border-radius: var(--rs-radius-md);
+  transition: @picker-transition;
+  background-color: var(--rs-input-bg);
+  overflow: hidden;
+
   .rs-picker-toggle {
-    // Make sure align with input
+    position: absolute;
+    height: 100%;
+    border: none !important;
+    height: var(--rs-picker-input-height);
     inset-inline-start: 0;
     cursor: text;
     box-shadow: none;
     padding-block: var(--rs-tag-picker-padding-block);
   }
 
-  &.rs-picker-disabled {
-    .rs-picker-toggle {
-      position: absolute;
-      height: 100%;
-    }
+  .rs-picker-textbox {
+    // Set the minimum width of the text box according to the default 20 characters in the browser
+    // Consistent with InputPicker
+    min-width: calc(20 * 0.5875rem);
+    margin-inline-end: var(--rs-picker-textbox-min-height);
   }
 
   .rs-tag {
@@ -56,7 +66,6 @@
 
   .rs-picker-textbox {
     min-height: var(--rs-picker-textbox-min-height, 34px);
-    margin-inline-end: var(--rs-picker-textbox-min-height);
     position: relative;
     // make sure tag in front of toggle
     z-index: @zindex-picker-toggle + 1;
@@ -73,6 +82,7 @@
     align-items: flex-start;
     gap: var(--rs-tag-spacing, 4px);
     padding: var(--rs-tag-list-padding, 4px);
+    padding-inline-end: 0;
 
     .rs-tag {
       border-radius: var(--rs-tag-border-radius);
@@ -86,40 +96,41 @@
 
 // Tag Picker Size
 // --------------------------------------------------
+.rs-picker[data-picker='tag'] {
+  &[data-size='lg'] {
+    --rs-tag-spacing: 5px;
+    --rs-tag-list-padding: 5px;
+    --rs-picker-textbox-min-height: 40px;
+    --rs-tag-picker-input-font-size: var(--rs-tag-picker-input-font-size-lg);
+    --rs-tag-picker-input-padding: 3px 5px;
+    --rs-tag-picker-padding-block: var(--rs-btn-padding-block-lg);
+  }
 
-.rs-picker-tag-lg {
-  --rs-tag-spacing: 5px;
-  --rs-tag-list-padding: 5px;
-  --rs-picker-textbox-min-height: 40px;
-  --rs-tag-picker-input-font-size: var(--rs-tag-picker-input-font-size-lg);
-  --rs-tag-picker-input-padding: 3px 5px;
-  --rs-tag-picker-padding-block: var(--rs-btn-padding-block-lg);
-}
-
-// Default size
-.rs-picker-tag-md {
-  --rs-tag-spacing: 5px;
-  --rs-tag-list-padding: 5px;
-  --rs-picker-textbox-min-height: 34px;
-  --rs-tag-picker-input-font-size: var(--rs-tag-picker-input-font-size-md);
-  --rs-tag-picker-input-padding: 2px 4px;
-  --rs-tag-picker-padding-block: var(--rs-btn-padding-block-md);
-}
+  // Default size
+  &[data-size='md'] {
+    --rs-tag-spacing: 5px;
+    --rs-tag-list-padding: 5px;
+    --rs-picker-textbox-min-height: 34px;
+    --rs-tag-picker-input-font-size: var(--rs-tag-picker-input-font-size-md);
+    --rs-tag-picker-input-padding: 2px 4px;
+    --rs-tag-picker-padding-block: var(--rs-btn-padding-block-md);
+  }
 
-.rs-picker-tag-sm {
-  --rs-tag-spacing: 4px;
-  --rs-tag-list-padding: 4px;
-  --rs-picker-textbox-min-height: 28px;
-  --rs-tag-picker-input-font-size: var(--rs-tag-picker-input-font-size-sm);
-  --rs-tag-picker-input-padding: 0 2px;
-  --rs-tag-picker-padding-block: var(--rs-btn-padding-block-sm);
-}
+  &[data-size='sm'] {
+    --rs-tag-spacing: 4px;
+    --rs-tag-list-padding: 4px;
+    --rs-picker-textbox-min-height: 28px;
+    --rs-tag-picker-input-font-size: var(--rs-tag-picker-input-font-size-sm);
+    --rs-tag-picker-input-padding: 0 2px;
+    --rs-tag-picker-padding-block: var(--rs-btn-padding-block-sm);
+  }
 
-.rs-picker-tag-xs {
-  --rs-tag-spacing: 2px;
-  --rs-tag-list-padding: 1px;
-  --rs-picker-textbox-min-height: 22px;
-  --rs-tag-picker-input-font-size: var(--rs-tag-picker-input-font-size-xs);
-  --rs-tag-picker-input-padding: 0 1px;
-  --rs-tag-picker-padding-block: var(--rs-btn-padding-block-xs);
+  &[data-size='xs'] {
+    --rs-tag-spacing: 2px;
+    --rs-tag-list-padding: 1px;
+    --rs-picker-textbox-min-height: 22px;
+    --rs-tag-picker-input-font-size: var(--rs-tag-picker-input-font-size-xs);
+    --rs-tag-picker-input-padding: 0 1px;
+    --rs-tag-picker-padding-block: var(--rs-btn-padding-block-xs);
+  }
 }