@uzum-tech/ui 1.0.2 → 1.1.0

package/es/_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/es/_internal/selection/src/Selection.js

@@ -8,7 +8,7 @@ import { createKey, getTitleAttribute, render, useOnResize, Wrapper } from '../.
 import Suffix from '../../suffix';
 import { internalSelectionLight } from '../styles';
 import style from './styles/index.cssr';
-import { UBaseSkeleton } from '../../../_internal';
+import { UBaseAccountOption, UBaseIcon, UBaseSkeleton } from '../../../_internal';
 import { getPadding, pxfy, depx } from 'seemly';
 import UBaseClear from '../../clear';
 export default defineComponent({
@@ -31,13 +31,13 @@ export default 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 = ref(null);
         const patternInputRef = ref(null);
@@ -356,11 +356,12 @@ export default 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, [createKey('clearSize', size)]: clearSize, [createKey('arrowSize', size)]: arrowSize, [createKey('padding', size)]: padding, [createKey('borderRadius', size)]: borderRadius, [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize, [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, [createKey('clearSize', size)]: clearSize, [createKey('arrowSize', size)]: arrowSize, [createKey('padding', size)]: padding, [createKey('borderRadius', size)]: borderRadius, [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize, [createKey('lineHeight', size)]: lineHeight } } = themeRef.value;
             const { top: paddingTop, right: paddingRight, bottom: paddingBottom, left: paddingLeft } = 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,
@@ -371,6 +372,7 @@ export default 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,
@@ -500,6 +502,7 @@ export default 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,
@@ -511,7 +514,7 @@ export default 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';
@@ -529,18 +532,27 @@ export default defineComponent({
         let body;
         if (multiple) {
             const { labelField } = this;
-            const createTag = (option) => (h("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, key: option.value }, renderTag ? (renderTag({
-                option,
-                handleClose: () => {
-                    this.handleDeleteOption(option);
-                }
-            })) : (h(UTag, { size: this.tagSize, closable: !option.disabled, disabled: disabled, onClose: () => {
-                    this.handleDeleteOption(option);
-                }, internalCloseIsButtonTag: false, internalCloseFocusable: false }, {
-                default: () => renderLabel
-                    ? renderLabel(option, true)
-                    : render(option[labelField], option, true)
-            }))));
+            const createTag = (option) => {
+                const icon = option.avatar || option.icon
+                    ? () => (h(UBaseIcon, { clsPrefix: clsPrefix }, {
+                        default: option.avatar || option.icon
+                    }))
+                    : null;
+                const selectedFunctionForLabel = renderTagLabel || renderLabel;
+                return (h("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, key: option.value }, renderTag ? (renderTag({
+                    option,
+                    handleClose: () => {
+                        this.handleDeleteOption(option);
+                    }
+                })) : (h(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)
+                        : render(option[tagField || labelField], option, true)
+                }))));
+            };
             const createOriginalTagNodes = () => (maxTagCountNumeric
                 ? this.selectedOptions.slice(0, maxTagCount)
                 : this.selectedOptions).map(createTag);
@@ -616,10 +628,20 @@ export default defineComponent({
                 placeholder));
         }
         else {
+            let children;
+            if (this.label !== undefined) {
+                const label = renderLabel
+                    ? renderLabel(this.selectedOption, true)
+                    : render(this.label, this.selectedOption, true);
+                children =
+                    (account && (h(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 = (h("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-label` },
                     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 ? (h("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-selection-overlay`, key: "input" },
@@ -628,9 +650,7 @@ export default defineComponent({
                                 option: this.selectedOption,
                                 handleClose: () => { }
                             })
-                            : renderLabel
-                                ? renderLabel(this.selectedOption, true)
-                                : render(this.label, this.selectedOption, true)))) : null,
+                            : children))) : null,
                     showPlaceholder ? (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" },
                         h("div", { class: `${clsPrefix}-base-selection-overlay__wrapper` }, this.filterablePlaceholder))) : null,
                     suffix));
@@ -643,9 +663,7 @@ export default defineComponent({
                                 option: this.selectedOption,
                                 handleClose: () => { }
                             })
-                            : renderLabel
-                                ? renderLabel(this.selectedOption, true)
-                                : render(this.label, this.selectedOption, true)))) : (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" },
+                            : children))) : (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" },
                         h("div", { class: `${clsPrefix}-base-selection-placeholder__inner` }, this.placeholder))),
                     suffix));
             }
@@ -661,6 +679,7 @@ export default 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/es/_internal/selection/src/styles/index.cssr.js

@@ -190,6 +190,7 @@ export default c([cB('base-selection', `
  padding-top: 4px;
  padding-bottom: 4px;
  flex-wrap: wrap;
+ align-content: center;
  align-items: center;
  width: 100%;
  vertical-align: bottom;
@@ -252,7 +253,15 @@ export default c([cB('base-selection', `
  border: var(--u-border-active);
  `), cB('base-suffix', [cE('arrow', `
  color: var(--u-arrow-color-hover);
- `)]), cB('base-selection-label', 'background-color: var(--u-color-active);'), cB('base-selection-tags', 'background-color: var(--u-color-active);')])]), cM('skeleton', 'cursor: not-allowed;'), cM('disabled', 'cursor: not-allowed;', [cE('border', `
+ `)]), cNotM('filled', [cB('base-selection-label', 'background-color: var(--u-color-active);'), cB('base-selection-tags', 'background-color: var(--u-color-active);')])])]), cM('filled', [cB('base-selection-label', `
+ background-color: var(--u-color-filled);
+ `), cB('base-selection-tags', `
+ background-color: var(--u-color-filled);
+ `), cE('border', `
+ border: var(--u-border-filled);
+ `), cE('state-border', `
+ border: var(--u-border-filled);
+ `)]), cM('skeleton', 'cursor: not-allowed;'), cM('disabled', 'cursor: not-allowed;', [cE('border', `
  border: var(--u-border-disabled);
  `), cE('filter-counter', `
  color: var(--u-filter-counter-text-color-disabled);
@@ -278,7 +287,7 @@ export default c([cB('base-selection', `
  cursor: not-allowed;
  color: var(--u-placeholder-color-disabled);
  `), cM('secondary-selected', [generateSecondaryStates('-disabled')])]), 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;
@@ -316,7 +325,7 @@ export default c([cB('base-selection', `
  caret-color: var(--u-caret-color-secondary);
  `), cB('base-selection-tags', `
  padding-right: calc(var(--u-padding-right) + var(--u-arrow-size) + 37px + var(--u-clear-size));
- `), cNotM('disabled', [c('&:hover', [generateSecondaryStates('-hover'), cB('base-clear', '--u-clear-color-hover: var(--u-clear-color-hover-secondary)')]), cM('focus', [generateSecondaryStates('-focus')]), cM('active', [generateSecondaryStates('-active')])])]), ['warning', 'error'].map(status => cM(`${status}-status`, [cE('state-border', `border: var(--u-border-${status});`), cNotM('secondary-selected', [cNotM('disabled', [cM('active', [cB('base-selection-label', `background-color: var(--u-color-active-${status});`), cB('base-selection-tags', `background-color: var(--u-color-active-${status});`)])])]), cNotM('disabled', [cM('active', [cE('state-border', `
+ `), cNotM('disabled', [c('&:hover', [generateSecondaryStates('-hover'), cB('base-clear', '--u-clear-color-hover: var(--u-clear-color-hover-secondary)')]), cM('focus', [generateSecondaryStates('-focus')]), cM('active', [generateSecondaryStates('-active')])])]), ['warning', 'error'].map(status => cM(`${status}-status`, [cE('state-border', `border: var(--u-border-${status});`), cNotM('secondary-selected', [cNotM('disabled', [cNotM('filled', [cM('active', [cB('base-selection-label', `background-color: var(--u-color-active-${status});`), cB('base-selection-tags', `background-color: var(--u-color-active-${status});`)])])])]), cNotM('disabled', [cM('active', [cE('state-border', `
  box-shadow: var(--u-box-shadow-active-${status});
  border: var(--u-border-active-${status});
  `)]), cM('focus', [cE('state-border', `

package/es/_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/es/_internal/selection/styles/light.js

@@ -46,9 +46,11 @@ export 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/es/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;