@uzum-tech/ui 1.0.3 → 1.1.0

package/lib/_internal/selection/src/Selection.d.ts

@@ -1,4 +1,4 @@
-import { type PropType, type InputHTMLAttributes } from 'vue';
+import { type PropType, type InputHTMLAttributes, VNodeChild } from 'vue';
 import type { RenderLabel, RenderLabelImpl } from '../../select-menu/src/interface';
 import type { SelectBaseOption } from '../../../select/src/interface';
 import type { FormValidationStatus } from '../../../form/src/interface';
@@ -27,11 +27,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     placeholder: StringConstructor;
     selectedOption: {
-        type: PropType<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)> | null>;
+        type: PropType<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => VNodeChild)> | null>;
         default: null;
     };
     selectedOptions: {
-        type: PropType<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>[] | null>;
+        type: PropType<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => VNodeChild)>[] | null>;
         default: null;
     };
     labelField: {
@@ -42,6 +42,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    tagField: StringConstructor;
     multiple: BooleanConstructor;
     filterable: BooleanConstructor;
     clearable: BooleanConstructor;
@@ -59,6 +60,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     inputProps: PropType<InputHTMLAttributes>;
     focused: BooleanConstructor;
+    filled: BooleanConstructor;
     renderTag: PropType<RenderTag>;
     onKeydown: PropType<(e: KeyboardEvent) => void>;
     onClick: PropType<(e: MouseEvent) => void>;
@@ -71,6 +73,7 @@ declare const _default: import("vue").DefineComponent<{
     onPatternFocus: PropType<(e: FocusEvent) => void>;
     onPatternBlur: PropType<(e: FocusEvent) => void>;
     renderLabel: PropType<RenderLabel>;
+    renderTagLabel: PropType<RenderLabel>;
     status: PropType<FormValidationStatus>;
     inlineThemeDisabled: BooleanConstructor;
     ignoreComposition: {
@@ -81,6 +84,7 @@ declare const _default: import("vue").DefineComponent<{
     round: BooleanConstructor;
     counter: BooleanConstructor;
     secondary: BooleanConstructor;
+    account: BooleanConstructor;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelection", {
         paddingTiny: string;
         paddingSmall: string;
@@ -122,9 +126,11 @@ declare const _default: import("vue").DefineComponent<{
         placeholderColor: string;
         placeholderColorDisabled: string;
         color: string;
+        colorFilled: string;
         colorDisabled: string;
         colorActive: string;
         border: string;
+        borderFilled: string;
         borderHover: string;
         borderActive: string;
         borderFocus: string;
@@ -245,9 +251,11 @@ declare const _default: import("vue").DefineComponent<{
         placeholderColor: string;
         placeholderColorDisabled: string;
         color: string;
+        colorFilled: string;
         colorDisabled: string;
         colorActive: string;
         border: string;
+        borderFilled: string;
         borderHover: string;
         borderActive: string;
         borderFocus: string;
@@ -368,9 +376,11 @@ declare const _default: import("vue").DefineComponent<{
         placeholderColor: string;
         placeholderColorDisabled: string;
         color: string;
+        colorFilled: string;
         colorDisabled: string;
         colorActive: string;
         border: string;
+        borderFilled: string;
         borderHover: string;
         borderActive: string;
         borderFocus: string;
@@ -603,9 +613,11 @@ declare const _default: import("vue").DefineComponent<{
             placeholderColor: string;
             placeholderColorDisabled: string;
             color: string;
+            colorFilled: string;
             colorDisabled: string;
             colorActive: string;
             border: string;
+            borderFilled: string;
             borderHover: string;
             borderActive: string;
             borderFocus: string;
@@ -696,7 +708,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     mergedClearable: import("vue").ComputedRef<boolean>;
     patternInputFocused: import("vue").Ref<boolean>;
-    filterablePlaceholder: import("vue").ComputedRef<import("vue").VNodeChild>;
+    filterablePlaceholder: import("vue").ComputedRef<VNodeChild>;
     label: import("vue").ComputedRef<unknown>;
     selected: import("vue").ComputedRef<boolean>;
     showTagsPanel: import("vue").Ref<boolean>;
@@ -740,9 +752,11 @@ declare const _default: import("vue").DefineComponent<{
     getCounter: () => HTMLElement | null;
     getTail: () => HTMLElement | null;
     renderLabel: RenderLabelImpl;
+    renderTagLabel: RenderLabelImpl;
     cssVars: import("vue").ComputedRef<{
         '--u-bezier': string;
         '--u-border': string;
+        '--u-border-filled': string;
         '--u-border-active': string;
         '--u-border-focus': string;
         '--u-border-hover': string;
@@ -753,6 +767,7 @@ declare const _default: import("vue").DefineComponent<{
         '--u-box-shadow-hover': string;
         '--u-caret-color': string;
         '--u-color': string;
+        '--u-color-filled': string;
         '--u-color-active': string;
         '--u-color-disabled': string;
         '--u-line-height': string;
@@ -847,11 +862,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     placeholder: StringConstructor;
     selectedOption: {
-        type: PropType<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)> | null>;
+        type: PropType<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => VNodeChild)> | null>;
         default: null;
     };
     selectedOptions: {
-        type: PropType<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>[] | null>;
+        type: PropType<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => VNodeChild)>[] | null>;
         default: null;
     };
     labelField: {
@@ -862,6 +877,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    tagField: StringConstructor;
     multiple: BooleanConstructor;
     filterable: BooleanConstructor;
     clearable: BooleanConstructor;
@@ -879,6 +895,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     inputProps: PropType<InputHTMLAttributes>;
     focused: BooleanConstructor;
+    filled: BooleanConstructor;
     renderTag: PropType<RenderTag>;
     onKeydown: PropType<(e: KeyboardEvent) => void>;
     onClick: PropType<(e: MouseEvent) => void>;
@@ -891,6 +908,7 @@ declare const _default: import("vue").DefineComponent<{
     onPatternFocus: PropType<(e: FocusEvent) => void>;
     onPatternBlur: PropType<(e: FocusEvent) => void>;
     renderLabel: PropType<RenderLabel>;
+    renderTagLabel: PropType<RenderLabel>;
     status: PropType<FormValidationStatus>;
     inlineThemeDisabled: BooleanConstructor;
     ignoreComposition: {
@@ -901,6 +919,7 @@ declare const _default: import("vue").DefineComponent<{
     round: BooleanConstructor;
     counter: BooleanConstructor;
     secondary: BooleanConstructor;
+    account: BooleanConstructor;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelection", {
         paddingTiny: string;
         paddingSmall: string;
@@ -942,9 +961,11 @@ declare const _default: import("vue").DefineComponent<{
         placeholderColor: string;
         placeholderColorDisabled: string;
         color: string;
+        colorFilled: string;
         colorDisabled: string;
         colorActive: string;
         border: string;
+        borderFilled: string;
         borderHover: string;
         borderActive: string;
         borderFocus: string;
@@ -1065,9 +1086,11 @@ declare const _default: import("vue").DefineComponent<{
         placeholderColor: string;
         placeholderColorDisabled: string;
         color: string;
+        colorFilled: string;
         colorDisabled: string;
         colorActive: string;
         border: string;
+        borderFilled: string;
         borderHover: string;
         borderActive: string;
         borderFocus: string;
@@ -1188,9 +1211,11 @@ declare const _default: import("vue").DefineComponent<{
         placeholderColor: string;
         placeholderColorDisabled: string;
         color: string;
+        colorFilled: string;
         colorDisabled: string;
         colorActive: string;
         border: string;
+        borderFilled: string;
         borderHover: string;
         borderActive: string;
         borderFocus: string;
@@ -1274,6 +1299,7 @@ declare const _default: import("vue").DefineComponent<{
     pattern: string;
     round: boolean;
     size: SelectSize;
+    filled: boolean;
     multiple: boolean;
     active: boolean;
     disabled: boolean;
@@ -1281,12 +1307,13 @@ declare const _default: import("vue").DefineComponent<{
     loading: boolean;
     bordered: boolean | undefined;
     inlineThemeDisabled: boolean;
+    account: boolean;
     labelField: string;
     valueField: string;
     showArrow: boolean;
     secondary: boolean;
-    selectedOption: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)> | null;
-    selectedOptions: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>[] | null;
+    selectedOption: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => VNodeChild)> | null;
+    selectedOptions: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => VNodeChild)>[] | null;
     filterable: boolean;
     clearable: boolean;
     loadingSkeleton: boolean;

package/lib/_internal/selection/src/Selection.js

@@ -36,13 +36,13 @@ exports.default = (0, vue_1.defineComponent)({
         }, labelField: { type: String, default: 'label' }, valueField: {
             type: String,
             default: 'value'
-        }, multiple: Boolean, filterable: Boolean, clearable: Boolean, disabled: Boolean, size: {
+        }, tagField: String, multiple: Boolean, filterable: Boolean, clearable: Boolean, disabled: Boolean, size: {
             type: String,
             default: 'medium'
         }, loading: Boolean, loadingSkeleton: Boolean, autofocus: Boolean, showArrow: {
             type: Boolean,
             default: true
-        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, status: String, inlineThemeDisabled: Boolean, ignoreComposition: { type: Boolean, default: true }, onResize: Function, round: Boolean, counter: Boolean, secondary: Boolean }),
+        }, inputProps: Object, focused: Boolean, filled: Boolean, renderTag: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, renderTagLabel: Function, status: String, inlineThemeDisabled: Boolean, ignoreComposition: { type: Boolean, default: true }, onResize: Function, round: Boolean, counter: Boolean, secondary: Boolean, account: Boolean }),
     setup(props) {
         const patternInputMirrorRef = (0, vue_1.ref)(null);
         const patternInputRef = (0, vue_1.ref)(null);
@@ -361,11 +361,12 @@ exports.default = (0, vue_1.defineComponent)({
             // clear
             clearColor, clearColorHover, clearColorPressed, 
             // secondary
-            arrowColorSecondary, clearColorSecondary, colorSecondary, textColorSecondary, borderSecondary, arrowColorDisabledSecondary, clearColorDisabledSecondary, colorDisabledSecondary, textColorDisabledSecondary, borderDisabledSecondary, arrowColorHoverSecondary, clearColorHoverSecondary, colorHoverSecondary, textColorHoverSecondary, borderHoverSecondary, filterCounterTextColor, filterCounterSeparatorColor, filterCounterTextColorDisabled, filterCounterSeparatorColorDisabled, caretColorSecondary, arrowColorActiveSecondary, clearColorActiveSecondary, colorActiveSecondary, textColorActiveSecondary, borderActiveSecondary, arrowColorFocusSecondary, clearColorFocusSecondary, colorFocusSecondary, textColorFocusSecondary, borderFocusSecondary, [(0, _utils_1.createKey)('clearSize', size)]: clearSize, [(0, _utils_1.createKey)('arrowSize', size)]: arrowSize, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('borderRadius', size)]: borderRadius, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('lineHeight', size)]: lineHeight } } = themeRef.value;
+            arrowColorSecondary, clearColorSecondary, colorSecondary, textColorSecondary, borderSecondary, arrowColorDisabledSecondary, clearColorDisabledSecondary, colorDisabledSecondary, textColorDisabledSecondary, borderDisabledSecondary, arrowColorHoverSecondary, clearColorHoverSecondary, colorHoverSecondary, textColorHoverSecondary, borderHoverSecondary, filterCounterTextColor, filterCounterSeparatorColor, filterCounterTextColorDisabled, filterCounterSeparatorColorDisabled, caretColorSecondary, arrowColorActiveSecondary, clearColorActiveSecondary, colorActiveSecondary, textColorActiveSecondary, borderActiveSecondary, arrowColorFocusSecondary, clearColorFocusSecondary, colorFocusSecondary, textColorFocusSecondary, borderFocusSecondary, borderFilled, colorFilled, [(0, _utils_1.createKey)('clearSize', size)]: clearSize, [(0, _utils_1.createKey)('arrowSize', size)]: arrowSize, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('borderRadius', size)]: borderRadius, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('lineHeight', size)]: lineHeight } } = themeRef.value;
             const { top: paddingTop, right: paddingRight, bottom: paddingBottom, left: paddingLeft } = (0, seemly_1.getPadding)(padding);
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-border': border,
+                '--u-border-filled': borderFilled,
                 '--u-border-active': borderActive,
                 '--u-border-focus': borderFocus,
                 '--u-border-hover': borderHover,
@@ -376,6 +377,7 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-box-shadow-hover': boxShadowHover,
                 '--u-caret-color': caretColor,
                 '--u-color': color,
+                '--u-color-filled': colorFilled,
                 '--u-color-active': colorActive,
                 '--u-color-disabled': colorDisabled,
                 '--u-line-height': lineHeight,
@@ -505,6 +507,7 @@ exports.default = (0, vue_1.defineComponent)({
             getCounter,
             getTail,
             renderLabel: props.renderLabel,
+            renderTagLabel: props.renderTagLabel,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
@@ -516,7 +519,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { status, multiple, disabled, loadingSkeleton, filterable, maxTagCount, bordered, clsPrefix, onRender, renderTag, renderLabel } = this;
+        const { status, multiple, disabled, loadingSkeleton, filterable, maxTagCount, bordered, clsPrefix, onRender, renderTag, renderLabel, tagField, renderTagLabel, account } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         const maxTagCountResponsive = maxTagCount === 'responsive';
         const maxTagCountNumeric = typeof maxTagCount === 'number';
@@ -534,18 +537,27 @@ exports.default = (0, vue_1.defineComponent)({
         let body;
         if (multiple) {
             const { labelField } = this;
-            const createTag = (option) => ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, key: option.value }, renderTag ? (renderTag({
-                option,
-                handleClose: () => {
-                    this.handleDeleteOption(option);
-                }
-            })) : ((0, vue_1.h)(tag_1.UTag, { size: this.tagSize, closable: !option.disabled, disabled: disabled, onClose: () => {
-                    this.handleDeleteOption(option);
-                }, internalCloseIsButtonTag: false, internalCloseFocusable: false }, {
-                default: () => renderLabel
-                    ? renderLabel(option, true)
-                    : (0, _utils_1.render)(option[labelField], option, true)
-            }))));
+            const createTag = (option) => {
+                const icon = option.avatar || option.icon
+                    ? () => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix }, {
+                        default: option.avatar || option.icon
+                    }))
+                    : null;
+                const selectedFunctionForLabel = renderTagLabel || renderLabel;
+                return ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, key: option.value }, renderTag ? (renderTag({
+                    option,
+                    handleClose: () => {
+                        this.handleDeleteOption(option);
+                    }
+                })) : ((0, vue_1.h)(tag_1.UTag, { size: this.tagSize, closable: !option.disabled, disabled: disabled, onClose: () => {
+                        this.handleDeleteOption(option);
+                    }, internalCloseIsButtonTag: false, internalCloseFocusable: false }, {
+                    icon: account ? icon : null,
+                    default: () => selectedFunctionForLabel
+                        ? selectedFunctionForLabel(option, true)
+                        : (0, _utils_1.render)(option[tagField || labelField], option, true)
+                }))));
+            };
             const createOriginalTagNodes = () => (maxTagCountNumeric
                 ? this.selectedOptions.slice(0, maxTagCount)
                 : this.selectedOptions).map(createTag);
@@ -621,10 +633,20 @@ exports.default = (0, vue_1.defineComponent)({
                 placeholder));
         }
         else {
+            let children;
+            if (this.label !== undefined) {
+                const label = renderLabel
+                    ? renderLabel(this.selectedOption, true)
+                    : (0, _utils_1.render)(this.label, this.selectedOption, true);
+                children =
+                    (account && ((0, vue_1.h)(_internal_1.UBaseAccountOption, Object.assign({}, this.selectedOption, { label: label })))) ||
+                        label;
+            }
             if (filterable) {
                 const hasInput = this.pattern || this.isComposing;
-                const showPlaceholder = !hasInput && !this.selected;
-                const showSelectedLabel = !hasInput && this.selected;
+                const isAccountFocused = this.patternInputFocused && this.account;
+                const showPlaceholder = !isAccountFocused && !hasInput && !this.selected;
+                const showSelectedLabel = !isAccountFocused && !hasInput && this.selected;
                 body = ((0, vue_1.h)("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-label` },
                     (0, vue_1.h)("input", Object.assign({}, this.inputProps, { ref: "patternInputRef", class: `${clsPrefix}-base-selection-input`, value: this.active ? this.pattern : '', placeholder: "", readonly: disabled, disabled: disabled, tabindex: -1, autofocus: this.autofocus, onFocus: this.handlePatternInputFocus, onBlur: this.handlePatternInputBlur, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd })),
                     showSelectedLabel ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-selection-overlay`, key: "input" },
@@ -633,9 +655,7 @@ exports.default = (0, vue_1.defineComponent)({
                                 option: this.selectedOption,
                                 handleClose: () => { }
                             })
-                            : renderLabel
-                                ? renderLabel(this.selectedOption, true)
-                                : (0, _utils_1.render)(this.label, this.selectedOption, true)))) : null,
+                            : children))) : null,
                     showPlaceholder ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" },
                         (0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-overlay__wrapper` }, this.filterablePlaceholder))) : null,
                     suffix));
@@ -648,9 +668,7 @@ exports.default = (0, vue_1.defineComponent)({
                                 option: this.selectedOption,
                                 handleClose: () => { }
                             })
-                            : renderLabel
-                                ? renderLabel(this.selectedOption, true)
-                                : (0, _utils_1.render)(this.label, this.selectedOption, true)))) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" },
+                            : children))) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" },
                         (0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder__inner` }, this.placeholder))),
                     suffix));
             }
@@ -666,6 +684,7 @@ exports.default = (0, vue_1.defineComponent)({
                     [`${clsPrefix}-base-selection--selected`]: this.selected || (this.active && this.pattern),
                     [`${clsPrefix}-base-selection--disabled`]: this.disabled,
                     [`${clsPrefix}-base-selection--multiple`]: this.multiple,
+                    [`${clsPrefix}-base-selection--filled`]: this.filled,
                     [`${clsPrefix}-base-selection--skeleton`]: this.loadingSkeleton,
                     // focus is not controlled by selection itself since it always need
                     // to be managed together with menu. provide :focus style will cause

package/lib/_internal/selection/src/styles/index.cssr.js

@@ -195,6 +195,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  padding-top: 4px;
  padding-bottom: 4px;
  flex-wrap: wrap;
+ align-content: center;
  align-items: center;
  width: 100%;
  vertical-align: bottom;
@@ -257,7 +258,15 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  border: var(--u-border-active);
  `), (0, cssr_1.cB)('base-suffix', [(0, cssr_1.cE)('arrow', `
  color: var(--u-arrow-color-hover);
- `)]), (0, cssr_1.cB)('base-selection-label', 'background-color: var(--u-color-active);'), (0, cssr_1.cB)('base-selection-tags', 'background-color: var(--u-color-active);')])]), (0, cssr_1.cM)('skeleton', 'cursor: not-allowed;'), (0, cssr_1.cM)('disabled', 'cursor: not-allowed;', [(0, cssr_1.cE)('border', `
+ `)]), (0, cssr_1.cNotM)('filled', [(0, cssr_1.cB)('base-selection-label', 'background-color: var(--u-color-active);'), (0, cssr_1.cB)('base-selection-tags', 'background-color: var(--u-color-active);')])])]), (0, cssr_1.cM)('filled', [(0, cssr_1.cB)('base-selection-label', `
+ background-color: var(--u-color-filled);
+ `), (0, cssr_1.cB)('base-selection-tags', `
+ background-color: var(--u-color-filled);
+ `), (0, cssr_1.cE)('border', `
+ border: var(--u-border-filled);
+ `), (0, cssr_1.cE)('state-border', `
+ border: var(--u-border-filled);
+ `)]), (0, cssr_1.cM)('skeleton', 'cursor: not-allowed;'), (0, cssr_1.cM)('disabled', 'cursor: not-allowed;', [(0, cssr_1.cE)('border', `
  border: var(--u-border-disabled);
  `), (0, cssr_1.cE)('filter-counter', `
  color: var(--u-filter-counter-text-color-disabled);
@@ -283,7 +292,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  cursor: not-allowed;
  color: var(--u-placeholder-color-disabled);
  `), (0, cssr_1.cM)('secondary-selected', [generateSecondaryStates('-disabled')])]), (0, cssr_1.cB)('base-selection-input-tag', `
- line-height: calc(var(--u-height) - 12px);
+ // line-height: calc(var(--u-height) - 12px);
  outline: none;
  display: none;
  position: relative;
@@ -321,7 +330,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  caret-color: var(--u-caret-color-secondary);
  `), (0, cssr_1.cB)('base-selection-tags', `
  padding-right: calc(var(--u-padding-right) + var(--u-arrow-size) + 37px + var(--u-clear-size));
- `), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', [generateSecondaryStates('-hover'), (0, cssr_1.cB)('base-clear', '--u-clear-color-hover: var(--u-clear-color-hover-secondary)')]), (0, cssr_1.cM)('focus', [generateSecondaryStates('-focus')]), (0, cssr_1.cM)('active', [generateSecondaryStates('-active')])])]), ['warning', 'error'].map(status => (0, cssr_1.cM)(`${status}-status`, [(0, cssr_1.cE)('state-border', `border: var(--u-border-${status});`), (0, cssr_1.cNotM)('secondary-selected', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('active', [(0, cssr_1.cB)('base-selection-label', `background-color: var(--u-color-active-${status});`), (0, cssr_1.cB)('base-selection-tags', `background-color: var(--u-color-active-${status});`)])])]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('active', [(0, cssr_1.cE)('state-border', `
+ `), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', [generateSecondaryStates('-hover'), (0, cssr_1.cB)('base-clear', '--u-clear-color-hover: var(--u-clear-color-hover-secondary)')]), (0, cssr_1.cM)('focus', [generateSecondaryStates('-focus')]), (0, cssr_1.cM)('active', [generateSecondaryStates('-active')])])]), ['warning', 'error'].map(status => (0, cssr_1.cM)(`${status}-status`, [(0, cssr_1.cE)('state-border', `border: var(--u-border-${status});`), (0, cssr_1.cNotM)('secondary-selected', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.cNotM)('filled', [(0, cssr_1.cM)('active', [(0, cssr_1.cB)('base-selection-label', `background-color: var(--u-color-active-${status});`), (0, cssr_1.cB)('base-selection-tags', `background-color: var(--u-color-active-${status});`)])])])]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('active', [(0, cssr_1.cE)('state-border', `
  box-shadow: var(--u-box-shadow-active-${status});
  border: var(--u-border-active-${status});
  `)]), (0, cssr_1.cM)('focus', [(0, cssr_1.cE)('state-border', `

package/lib/_internal/selection/styles/light.d.ts

@@ -40,9 +40,11 @@ export declare const self: (vars: ThemeCommonVars) => {
     placeholderColor: string;
     placeholderColorDisabled: string;
     color: string;
+    colorFilled: string;
     colorDisabled: string;
     colorActive: string;
     border: string;
+    borderFilled: string;
     borderHover: string;
     borderActive: string;
     borderFocus: string;
@@ -149,9 +151,11 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     placeholderColor: string;
     placeholderColorDisabled: string;
     color: string;
+    colorFilled: string;
     colorDisabled: string;
     colorActive: string;
     border: string;
+    borderFilled: string;
     borderHover: string;
     borderActive: string;
     borderFocus: string;

package/lib/_internal/selection/styles/light.js

@@ -49,9 +49,11 @@ const self = (vars) => {
         placeholderColor: textSecondary,
         placeholderColorDisabled: textSecondary,
         color: elementsSecondary,
+        colorFilled: elementsTertiary,
         colorDisabled: elementsTertiary,
         colorActive: elementsSecondary,
         border: `2px solid ${elementsQuaternary}`,
+        borderFilled: 'none',
         borderHover: `2px solid ${elementsPrimary}`,
         borderActive: `2px solid ${elementsPrimary}`,
         borderFocus: `2px solid ${elementsPrimary}`,

package/lib/badge/src/Badge.d.ts

@@ -5,7 +5,7 @@ export declare const badgeProps: {
     readonly max: NumberConstructor;
     readonly dot: BooleanConstructor;
     readonly type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "prime">;
         readonly default: "default";
     };
     readonly show: {
@@ -15,30 +15,52 @@ export declare const badgeProps: {
     readonly showZero: BooleanConstructor;
     readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
+    readonly textColor: StringConstructor;
     readonly offset: PropType<readonly [string | number, string | number]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
+        colorPrime: string;
         colorInfo: string;
         colorSuccess: string;
         colorError: string;
         colorWarning: string;
         fontSize: string;
+        textColor: string;
+        textColorPrime: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorError: string;
+        textColorWarning: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
+        colorPrime: string;
         colorInfo: string;
         colorSuccess: string;
         colorError: string;
         colorWarning: string;
         fontSize: string;
+        textColor: string;
+        textColorPrime: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorError: string;
+        textColorWarning: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
+        colorPrime: string;
         colorInfo: string;
         colorSuccess: string;
         colorError: string;
         colorWarning: string;
         fontSize: string;
+        textColor: string;
+        textColorPrime: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorError: string;
+        textColorWarning: string;
     }, any>>>;
 };
 export type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>;
@@ -47,7 +69,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly max: NumberConstructor;
     readonly dot: BooleanConstructor;
     readonly type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "prime">;
         readonly default: "default";
     };
     readonly show: {
@@ -57,30 +79,52 @@ declare const _default: import("vue").DefineComponent<{
     readonly showZero: BooleanConstructor;
     readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
+    readonly textColor: StringConstructor;
     readonly offset: PropType<readonly [string | number, string | number]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
+        colorPrime: string;
         colorInfo: string;
         colorSuccess: string;
         colorError: string;
         colorWarning: string;
         fontSize: string;
+        textColor: string;
+        textColorPrime: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorError: string;
+        textColorWarning: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
+        colorPrime: string;
         colorInfo: string;
         colorSuccess: string;
         colorError: string;
         colorWarning: string;
         fontSize: string;
+        textColor: string;
+        textColorPrime: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorError: string;
+        textColorWarning: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
+        colorPrime: string;
         colorInfo: string;
         colorSuccess: string;
         colorError: string;
         colorWarning: string;
         fontSize: string;
+        textColor: string;
+        textColorPrime: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorError: string;
+        textColorWarning: string;
     }, any>>>;
 }, {
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
@@ -95,6 +139,7 @@ declare const _default: import("vue").DefineComponent<{
         '--u-ripple-color': string;
         '--u-bezier': string;
         '--u-ripple-bezier': string;
+        '--u-text-color': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -106,7 +151,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly max: NumberConstructor;
     readonly dot: BooleanConstructor;
     readonly type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "prime">;
         readonly default: "default";
     };
     readonly show: {
@@ -116,33 +161,55 @@ declare const _default: import("vue").DefineComponent<{
     readonly showZero: BooleanConstructor;
     readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
+    readonly textColor: StringConstructor;
     readonly offset: PropType<readonly [string | number, string | number]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
+        colorPrime: string;
         colorInfo: string;
         colorSuccess: string;
         colorError: string;
         colorWarning: string;
         fontSize: string;
+        textColor: string;
+        textColorPrime: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorError: string;
+        textColorWarning: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
+        colorPrime: string;
         colorInfo: string;
         colorSuccess: string;
         colorError: string;
         colorWarning: string;
         fontSize: string;
+        textColor: string;
+        textColorPrime: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorError: string;
+        textColorWarning: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
+        colorPrime: string;
         colorInfo: string;
         colorSuccess: string;
         colorError: string;
         colorWarning: string;
         fontSize: string;
+        textColor: string;
+        textColorPrime: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorError: string;
+        textColorWarning: string;
     }, any>>>;
 }>>, {
-    readonly type: "default" | "error" | "info" | "success" | "warning";
+    readonly type: "default" | "error" | "info" | "success" | "warning" | "prime";
     readonly show: boolean;
     readonly dot: boolean;
     readonly showZero: boolean;