amis-ui 6.13.0-beta.15 → 6.13.0-beta.17

package/lib/themes/default.css

@@ -3643,7 +3643,7 @@
   --select-multiple-paddingLeft: var(--sizes-size-3);
   --select-multiple-paddingRight: var(--sizes-size-3);
   --select-multiple-marginTop: var(--sizes-size-0);
-  --select-multiple-marginBottom: var(--sizes-size-0);
+  --select-multiple-marginBottom: var(--sizes-size-3);
   --select-multiple-marginLeft: var(--sizes-size-0);
   --select-multiple-marginRight: var(--sizes-size-3);
   --select-multiple-color: var(--colors-neutral-text-2);
@@ -3735,11 +3735,11 @@
   --Form-selectValue-borderColor: var(--colors-brand-7);
   --Form-selectValue-color: var(--colors-brand-5);
   --Form-selectValue-fontSize: var(--select-multiple-fontSize);
-  --Form-selectValue-onDisable-bg: hsl(211.0588235294, 102.5%, 95%);
+  --Form-selectValue-onDisable-bg: var(--colors-neutral-fill-10);
   --Form-selectValue-onHover-bg: hsl(211.0588235294, 102.5%, 85%);
   --Form-selectValue-onDisabled-color: var(--Form-select-caret-iconColor);
   --Form-selectValue-onInvalid-color: var(--danger);
-  --Form-valueLabel-maxWidth: 7.5rem;
+  --Form-valueLabel-maxWidth: 12.5rem;
   --Form-select-onFocus-boxShadow: none;
   --ResultBox-tag-height: 1.375rem;
   --ResultBox-tag-marginBottom: var(--select-multiple-marginBottom);
@@ -22867,7 +22867,6 @@ input[type=button].cxd-Button--block {
 }
 .cxd-Page {
   width: 100%;
-  height: 100%;
   background: var(--Page-main-bg);
   display: flex;
   flex-direction: row;
@@ -23268,6 +23267,35 @@ input[type=button].cxd-Button--block {
   position: relative;
   top: var(--Audio-svg-top);
 }
+.cxd-AutoFoldedList {
+  white-space: nowrap !important;
+  flex-wrap: nowrap !important;
+}
+.cxd-AutoFoldedList-more {
+  display: inline-block;
+}
+.cxd-AutoFoldedList-more:empty {
+  display: none;
+}
+.cxd-AutoFoldedList-more > span {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem);
+  display: inline-block;
+  vertical-align: middle;
+  font-size: var(--Form-selectValue-fontSize);
+  font-weight: var(--select-multiple-fontWeight);
+  color: var(--select-multiple-color);
+  background: var(--Form-select-value-bgColor);
+  border: 0.0625rem solid var(--Form-select-value-borderColor);
+  border-radius: var(--select-multiple-top-left-border-radius) var(--select-multiple-top-right-border-radius) var(--select-multiple-bottom-right-border-radius) var(--select-multiple-bottom-left-border-radius);
+  padding: var(--select-multiple-paddingTop) var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom) var(--select-multiple-paddingLeft);
+}
+.cxd-AutoFoldedList-more > span:hover {
+  background-color: var(--Form-selectValue-onHover-bgColor);
+}
 .cxd-Panel {
   margin: var(--Panel-marginTop) var(--Panel-marginRight) var(--Panel-marginBottom) var(--Panel-marginLeft);
   background: var(--Panel-bg-color);
@@ -24628,6 +24656,7 @@ input[type=button].cxd-Button--block {
 }
 .cxd-CBGroup-toolbarCondition .cxd-Select-valueWrap {
   padding-right: 0;
+  justify-content: center;
 }
 .cxd-CBGroup-toolbarCondition .cxd-Select-arrow {
   display: none;
@@ -25349,6 +25378,20 @@ input[type=button].cxd-Button--block {
   gap: var(--gap-xs);
   line-height: 1;
 }
+.cxd-Crud-selection > .cxd-AutoFoldedList-more > span {
+  line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem);
+  font-size: var(--Pick-base-value-fontSize);
+  color: var(--Pick-base-value-color);
+  font-weight: var(--Pick-base-value-fontWeight);
+  background: var(--Pick-base-value-bgColor);
+  border-width: var(--Pick-base-value-top-border-width) var(--Pick-base-value-right-border-width) var(--Pick-base-value-bottom-border-width) var(--Pick-base-value-left-border-width);
+  border-style: var(--Pick-base-value-top-border-style) var(--Pick-base-value-right-border-style) var(--Pick-base-value-bottom-border-style) var(--Pick-base-value-left-border-style);
+  border-color: var(--Pick-base-value-top-border-color) var(--Pick-base-value-right-border-color) var(--Pick-base-value-bottom-border-color) var(--Pick-base-value-left-border-color);
+  border-radius: var(--Pick-base-top-left-border-radius) var(--Pick-base-top-right-border-radius) var(--Pick-base-bottom-right-border-radius) var(--Pick-base-bottom-left-border-radius);
+}
+.cxd-Crud-selection > .cxd-AutoFoldedList-more > span:hover {
+  background: var(--Form-selectValue-onHover-bg);
+}
 .cxd-Crud-selection-overflow-wrapper {
   display: flex;
   flex-wrap: wrap;
@@ -25382,6 +25425,7 @@ input[type=button].cxd-Button--block {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex-shrink: 0;
 }
 .cxd-Crud-selection-overflow-wrapper .cxd-Crud-value:hover {
   background: var(--Form-selectValue-onHover-bg);
@@ -25434,6 +25478,7 @@ input[type=button].cxd-Button--block {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex-shrink: 0;
 }
 .cxd-Crud .cxd-Crud-value:hover {
   background: var(--Form-selectValue-onHover-bg);
@@ -25591,6 +25636,7 @@ input[type=button].cxd-Button--block {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex-shrink: 0;
 }
 .cxd-Crud2 .cxd-Crud-value:hover {
   background: var(--Form-selectValue-onHover-bg);
@@ -31797,7 +31843,6 @@ input[type=button].cxd-Button--block {
   color: var(--Form-input-placeholderColor);
 }
 .cxd-ResultBox {
-  flex-wrap: nowrap;
   padding: 0 0.75rem;
   min-height: var(--Form-input-height);
   align-items: center;
@@ -31822,6 +31867,7 @@ input[type=button].cxd-Button--block {
   font-size: var(--Form-input-fontSize);
   flex-wrap: wrap;
   justify-content: flex-start;
+  flex-wrap: nowrap;
 }
 .cxd-ResultBox input {
   flex-basis: 1.875rem;
@@ -31854,6 +31900,9 @@ input[type=button].cxd-Button--block {
 .cxd-ResultBox--borderNone {
   border-color: transparent !important;
 }
+.cxd-ResultBox input {
+  flex-shrink: 0;
+}
 .cxd-ResultBox.is-error {
   border-color: var(--Form-input-onError-borderColor);
   background: var(--Form-input-onError-bg);
@@ -31904,6 +31953,13 @@ input[type=button].cxd-Button--block {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  gap: var(--sizes-size-3);
+}
+.cxd-ResultBox-value-wrap > .cxd-AutoFoldedList {
+  flex-grow: 5;
+  display: flex;
+  align-items: center;
+  gap: var(--sizes-size-3);
 }
 .cxd-ResultBox-actions {
   margin-left: 0.25rem;
@@ -31985,7 +32041,6 @@ input[type=button].cxd-Button--block {
   display: inline-flex;
   align-items: center;
   padding: var(--select-multiple-paddingTop) var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom) var(--select-multiple-paddingLeft);
-  margin: var(--select-multiple-marginTop) var(--select-multiple-marginRight) var(--ResultBox-tag-marginBottom) var(--select-multiple-marginLeft);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -34740,6 +34795,7 @@ input.cxd-TextControl-input-password {
           user-select: none;
 }
 .cxd-GroupedSelection-item > .cxd-Checkbox {
+  margin-top: 0;
   margin-right: 0.625rem;
 }
 .cxd-GroupedSelection-item:hover {
@@ -34946,6 +35002,7 @@ input.cxd-TextControl-input-password {
           user-select: none;
 }
 .cxd-ChainedSelection-item > .cxd-Checkbox {
+  margin-top: 0;
   margin-right: 0;
 }
 .cxd-ChainedSelection-item.is-active {
@@ -35817,12 +35874,17 @@ input.cxd-TextControl-input-password {
           user-select: none;
   position: relative;
   flex-grow: 1;
+  min-width: 0;
   width: auto;
   max-width: 100%;
   overflow: hidden;
   padding-right: 0.25rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--select-multiple-marginRight);
 }
 .cxd-Select-valuesNoWrap {
+  flex-wrap: nowrap;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -35865,6 +35927,7 @@ input.cxd-TextControl-input-password {
 .cxd-Select--multi .cxd-Select-value {
   position: static;
   white-space: normal;
+  flex-shrink: 0;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -35878,9 +35941,11 @@ input.cxd-TextControl-input-password {
   border: 0.0625rem solid var(--Form-select-value-borderColor);
   border-radius: var(--select-multiple-top-left-border-radius) var(--select-multiple-top-right-border-radius) var(--select-multiple-bottom-right-border-radius) var(--select-multiple-bottom-left-border-radius);
   padding: var(--select-multiple-paddingTop) var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom) var(--select-multiple-paddingLeft);
-  margin: var(--select-multiple-marginTop) var(--select-multiple-marginRight) var(--ResultBox-tag-marginBottom) var(--select-multiple-marginLeft);
 }
-.cxd-Select--multi .cxd-Select-value:hover {
+.cxd-Select--multi .cxd-Select-value.is-disabled {
+  background-color: var(--Form-selectValue-onDisable-bg);
+}
+.cxd-Select--multi .cxd-Select-value:not(.is-disabled):hover {
   background-color: var(--Form-selectValue-onHover-bgColor);
 }
 .cxd-Select--multi .cxd-Select-valueLabel {
@@ -36157,6 +36222,7 @@ input.cxd-TextControl-input-password {
 .cxd-Select-overflow-wrapper .cxd-Select-value {
   position: static;
   white-space: normal;
+  flex-shrink: 0;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -36170,9 +36236,11 @@ input.cxd-TextControl-input-password {
   border: 0.0625rem solid var(--Form-select-value-borderColor);
   border-radius: var(--select-multiple-top-left-border-radius) var(--select-multiple-top-right-border-radius) var(--select-multiple-bottom-right-border-radius) var(--select-multiple-bottom-left-border-radius);
   padding: var(--select-multiple-paddingTop) var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom) var(--select-multiple-paddingLeft);
-  margin: var(--select-multiple-marginTop) var(--select-multiple-marginRight) var(--ResultBox-tag-marginBottom) var(--select-multiple-marginLeft);
 }
-.cxd-Select-overflow-wrapper .cxd-Select-value:hover {
+.cxd-Select-overflow-wrapper .cxd-Select-value.is-disabled {
+  background-color: var(--Form-selectValue-onDisable-bg);
+}
+.cxd-Select-overflow-wrapper .cxd-Select-value:not(.is-disabled):hover {
   background-color: var(--Form-selectValue-onHover-bgColor);
 }
 .cxd-Select-overflow-wrapper .cxd-Select-valueLabel {
@@ -36193,6 +36261,9 @@ input.cxd-TextControl-input-password {
 .cxd-Select-overflow.cxd-Tooltip--dark .cxd-Select-overflow-wrapper .cxd-Select-value .cxd-Select-valueIcon {
   color: var(--Form-select-valueIcon-color--dark);
 }
+.cxd-Select-overflow-wrapper .cxd-Select-value {
+  margin-bottom: var(--gap-xs);
+}
 .cxd-Select-popover {
   background: var(--Form-select-menu-bg);
   color: var(--Form-select-menu-color);
@@ -39622,6 +39693,14 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-Combo-items:empty + .cxd-Combo-toolbar {
   padding-top: calc((var(--Form-input-height) - var(--Combo-addBtn-height)) / 2);
 }
+.cxd-Combo-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cxd-Combo-toolbar:empty {
+  display: none;
+}
 .cxd-Combo-item {
   background: var(--combo-bg-color);
 }
@@ -40112,6 +40191,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
 }
 .cxd-Picker-valueWrap {
   flex-grow: 1;
+  min-width: 0;
   position: relative;
   padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
 }
@@ -40119,6 +40199,20 @@ td.rdtQuarter.rdtDisabled:hover > span {
   width: 1rem;
   display: inline-block;
 }
+.cxd-Picker-valueWrap > .cxd-AutoFoldedList-more > span {
+  line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem);
+  font-size: var(--Pick-base-value-fontSize);
+  color: var(--Pick-base-value-color);
+  font-weight: var(--Pick-base-value-fontWeight);
+  background: var(--Pick-base-value-bgColor);
+  border-width: var(--Pick-base-value-top-border-width) var(--Pick-base-value-right-border-width) var(--Pick-base-value-bottom-border-width) var(--Pick-base-value-left-border-width);
+  border-style: var(--Pick-base-value-top-border-style) var(--Pick-base-value-right-border-style) var(--Pick-base-value-bottom-border-style) var(--Pick-base-value-left-border-style);
+  border-color: var(--Pick-base-value-top-border-color) var(--Pick-base-value-right-border-color) var(--Pick-base-value-bottom-border-color) var(--Pick-base-value-left-border-color);
+  border-radius: var(--Pick-base-top-left-border-radius) var(--Pick-base-top-right-border-radius) var(--Pick-base-bottom-right-border-radius) var(--Pick-base-bottom-left-border-radius);
+}
+.cxd-Picker-valueWrap > .cxd-AutoFoldedList-more > span:hover {
+  background: var(--Form-selectValue-onHover-bg);
+}
 .cxd-Picker .cxd-Picker-valueWrap {
   display: flex;
   flex-wrap: wrap;
@@ -40146,6 +40240,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex-shrink: 0;
 }
 .cxd-Picker .cxd-Picker-value:hover {
   background: var(--Form-selectValue-onHover-bg);
@@ -40254,6 +40349,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex-shrink: 0;
 }
 .cxd-Picker-overflow-wrapper .cxd-Picker-value:hover {
   background: var(--Form-selectValue-onHover-bg);

package/lib/utils/vectorComputed.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.13.0-beta.15
+ * amis-ui v6.13.0-beta.17
  * Copyright 2018-2025 fex
  */
 

package/lib/withRemoteConfig.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.13.0-beta.15
+ * amis-ui v6.13.0-beta.17
  * Copyright 2018-2025 fex
  */
 

package/lib/withStore.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.13.0-beta.15
+ * amis-ui v6.13.0-beta.17
  * Copyright 2018-2025 fex
  */
 

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "6.13.0-beta.15",
+  "version": "6.13.0-beta.17",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && cross-env NODE_ENV=production rollup -c ",
@@ -28,7 +28,11 @@
       "import": "./esm/index.js"
     },
     "./scss/": "./scss/",
-    "./lib/themes/": "./lib/themes/",
+    "./lib/themes/": {
+      "style": "./lib/themes/",
+      "require": "./lib/themes/",
+      "import": "./esm/themes/"
+    },
     "./lib/*": {
       "require": "./lib/*.js",
       "import": "./esm/*.js"
@@ -36,8 +40,8 @@
   },
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-core": "^6.13.0-beta.15",
-    "amis-formula": "^6.13.0-beta.15",
+    "amis-core": "^6.13.0-beta.17",
+    "amis-formula": "^6.13.0-beta.17",
     "animate.css": "4.1.1",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",

package/scss/_components.scss

@@ -2874,7 +2874,7 @@
   --select-multiple-paddingLeft: var(--sizes-size-3);
   --select-multiple-paddingRight: var(--sizes-size-3);
   --select-multiple-marginTop: var(--sizes-size-0);
-  --select-multiple-marginBottom: var(--sizes-size-0);
+  --select-multiple-marginBottom: var(--sizes-size-3);
   --select-multiple-marginLeft: var(--sizes-size-0);
   --select-multiple-marginRight: var(--sizes-size-3);
   --select-multiple-color: var(--colors-neutral-text-2);
@@ -2970,17 +2970,14 @@
   --Form-selectValue-borderColor: var(--colors-brand-7);
   --Form-selectValue-color: var(--colors-brand-5);
   --Form-selectValue-fontSize: var(--select-multiple-fontSize);
-  --Form-selectValue-onDisable-bg: #{color.adjust(
-      color.adjust(color.adjust($info, $lightness: 40%), $saturation: 2.5%),
-      $lightness: 5%
-    )};
+  --Form-selectValue-onDisable-bg: var(--colors-neutral-fill-10);
   --Form-selectValue-onHover-bg: #{color.adjust(
       color.adjust(color.adjust($info, $lightness: 40%), $saturation: 2.5%),
       $lightness: -5%
     )};
   --Form-selectValue-onDisabled-color: var(--Form-select-caret-iconColor);
   --Form-selectValue-onInvalid-color: var(--danger);
-  --Form-valueLabel-maxWidth: #{px2rem(120px)};
+  --Form-valueLabel-maxWidth: #{px2rem(200px)};
   --Form-select-onFocus-boxShadow: none;
   --ResultBox-tag-height: #{px2rem(22px)};
   --ResultBox-tag-marginBottom: var(--select-multiple-marginBottom);

package/scss/_mixins.scss

@@ -687,6 +687,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    flex-shrink: 0;
 
     &:hover {
       background: var(--Form-selectValue-onHover-bg);

package/scss/components/_auto-folder.scss

@@ -0,0 +1,40 @@
+.#{$ns}AutoFoldedList {
+  white-space: nowrap !important;
+  flex-wrap: nowrap !important;
+
+  &-more {
+    display: inline-block;
+
+    &:empty {
+      display: none;
+    }
+
+    > span {
+      user-select: none;
+      cursor: pointer;
+      line-height: calc(
+        var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
+            2px
+          )}
+      );
+      display: inline-block;
+      vertical-align: middle;
+      font-size: var(--Form-selectValue-fontSize);
+      font-weight: var(--select-multiple-fontWeight);
+      color: var(--select-multiple-color);
+      background: var(--Form-select-value-bgColor);
+      border: px2rem(1px) solid var(--Form-select-value-borderColor);
+      border-radius: var(--select-multiple-top-left-border-radius)
+        var(--select-multiple-top-right-border-radius)
+        var(--select-multiple-bottom-right-border-radius)
+        var(--select-multiple-bottom-left-border-radius);
+      padding: var(--select-multiple-paddingTop)
+        var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom)
+        var(--select-multiple-paddingLeft);
+
+      &:hover {
+        background-color: var(--Form-selectValue-onHover-bgColor);
+      }
+    }
+  }
+}

package/scss/components/_condition-builder.scss

@@ -79,6 +79,7 @@
 
       &-valueWrap {
         padding-right: 0;
+        justify-content: center;
       }
 
       &-arrow {

package/scss/components/_crud.scss

@@ -14,6 +14,38 @@
     gap: var(--gap-xs);
     line-height: 1;
 
+    > .#{$ns}AutoFoldedList-more > span {
+      line-height: calc(
+        var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
+            2px
+          )}
+      );
+      font-size: var(--Pick-base-value-fontSize);
+      color: var(--Pick-base-value-color);
+      font-weight: var(--Pick-base-value-fontWeight);
+      background: var(--Pick-base-value-bgColor);
+      border-width: var(--Pick-base-value-top-border-width)
+        var(--Pick-base-value-right-border-width)
+        var(--Pick-base-value-bottom-border-width)
+        var(--Pick-base-value-left-border-width);
+      border-style: var(--Pick-base-value-top-border-style)
+        var(--Pick-base-value-right-border-style)
+        var(--Pick-base-value-bottom-border-style)
+        var(--Pick-base-value-left-border-style);
+      border-color: var(--Pick-base-value-top-border-color)
+        var(--Pick-base-value-right-border-color)
+        var(--Pick-base-value-bottom-border-color)
+        var(--Pick-base-value-left-border-color);
+      border-radius: var(--Pick-base-top-left-border-radius)
+        var(--Pick-base-top-right-border-radius)
+        var(--Pick-base-bottom-right-border-radius)
+        var(--Pick-base-bottom-left-border-radius);
+
+      &:hover {
+        background: var(--Form-selectValue-onHover-bg);
+      }
+    }
+
     &-overflow {
       &-wrapper {
         display: flex;

package/scss/components/_page.scss

@@ -1,6 +1,5 @@
 .#{$ns}Page {
   width: 100%;
-  height: 100%;
   background: var(--Page-main-bg);
   display: flex;
   flex-direction: row;

package/scss/components/_result-box.scss

@@ -1,5 +1,4 @@
 .#{$ns}ResultBox {
-  flex-wrap: nowrap;
   padding: 0 px2rem(12px);
   min-height: var(--Form-input-height);
   align-items: center;
@@ -24,6 +23,13 @@
 
   @include input-input();
   @include input-border();
+
+  flex-wrap: nowrap;
+
+  input {
+    flex-shrink: 0;
+  }
+
   &.is-error {
     border-color: var(--Form-input-onError-borderColor);
     background: var(--Form-input-onError-bg);
@@ -121,6 +127,14 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
+    gap: var(--sizes-size-3);
+
+    > .#{$ns}AutoFoldedList {
+      flex-grow: 5;
+      display: flex;
+      align-items: center;
+      gap: var(--sizes-size-3);
+    }
   }
 
   &-actions {
@@ -197,8 +211,6 @@
     padding: var(--select-multiple-paddingTop)
       var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom)
       var(--select-multiple-paddingLeft);
-    margin: var(--select-multiple-marginTop) var(--select-multiple-marginRight)
-      var(--ResultBox-tag-marginBottom) var(--select-multiple-marginLeft);
     user-select: none;
     border-radius: var(--select-multiple-top-left-border-radius)
       var(--select-multiple-top-right-border-radius)

package/scss/components/form/_combo.scss

@@ -70,6 +70,19 @@
     margin-bottom: var(--Combo-items-marginBottom);
   }
 
+  &-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    &:empty {
+      display: none;
+    }
+  }
+
+  // &-pager {
+
+  // }
+
   &-item {
     background: var(--combo-bg-color);
   }

package/scss/components/form/_picker.scss

@@ -107,6 +107,7 @@
 
   &-valueWrap {
     flex-grow: 1;
+    min-width: 0;
     position: relative;
     padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
 
@@ -114,6 +115,38 @@
       width: px2rem(16px);
       display: inline-block;
     }
+
+    > .#{$ns}AutoFoldedList-more > span {
+      line-height: calc(
+        var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
+            2px
+          )}
+      );
+      font-size: var(--Pick-base-value-fontSize);
+      color: var(--Pick-base-value-color);
+      font-weight: var(--Pick-base-value-fontWeight);
+      background: var(--Pick-base-value-bgColor);
+      border-width: var(--Pick-base-value-top-border-width)
+        var(--Pick-base-value-right-border-width)
+        var(--Pick-base-value-bottom-border-width)
+        var(--Pick-base-value-left-border-width);
+      border-style: var(--Pick-base-value-top-border-style)
+        var(--Pick-base-value-right-border-style)
+        var(--Pick-base-value-bottom-border-style)
+        var(--Pick-base-value-left-border-style);
+      border-color: var(--Pick-base-value-top-border-color)
+        var(--Pick-base-value-right-border-color)
+        var(--Pick-base-value-bottom-border-color)
+        var(--Pick-base-value-left-border-color);
+      border-radius: var(--Pick-base-top-left-border-radius)
+        var(--Pick-base-top-right-border-radius)
+        var(--Pick-base-bottom-right-border-radius)
+        var(--Pick-base-bottom-left-border-radius);
+
+      &:hover {
+        background: var(--Form-selectValue-onHover-bg);
+      }
+    }
   }
 
   .#{$ns}Picker-valueWrap {

package/scss/components/form/_select.scss

@@ -6,6 +6,7 @@
     .#{$ns}Select-value {
       position: static;
       white-space: normal;
+      flex-shrink: 0;
       user-select: none;
       line-height: calc(
         var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
@@ -26,11 +27,12 @@
       padding: var(--select-multiple-paddingTop)
         var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom)
         var(--select-multiple-paddingLeft);
-      margin: var(--select-multiple-marginTop)
-        var(--select-multiple-marginRight) var(--ResultBox-tag-marginBottom)
-        var(--select-multiple-marginLeft);
 
-      &:hover {
+      &.is-disabled {
+        background-color: var(--Form-selectValue-onDisable-bg);
+      }
+
+      &:not(.is-disabled):hover {
         background-color: var(--Form-selectValue-onHover-bgColor);
       }
     }
@@ -178,12 +180,17 @@
     user-select: none;
     position: relative;
     flex-grow: 1;
+    min-width: 0;
     width: auto;
     max-width: 100%;
     overflow: hidden;
     padding-right: px2rem(4px);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--select-multiple-marginRight);
   }
   &-valuesNoWrap {
+    flex-wrap: nowrap;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -587,6 +594,12 @@
   }
 }
 
+.#{$ns}Select-overflow-wrapper {
+  .#{$ns}Select-value {
+    margin-bottom: var(--gap-xs);
+  }
+}
+
 .#{$ns}Select-popover {
   background: var(--Form-select-menu-bg);
   color: var(--Form-select-menu-color);

package/scss/components/form/_selection.scss

@@ -76,6 +76,7 @@
     flex-direction: row;
 
     > .#{$ns}Checkbox {
+      margin-top: 0;
       margin-right: px2rem(10px);
     }
     cursor: pointer;
@@ -330,6 +331,7 @@
     flex-direction: row;
 
     > .#{$ns}Checkbox {
+      margin-top: 0;
       margin-right: 0;
     }
     cursor: pointer;