naive-ui 2.18.0 → 2.19.1

package/es/_internal/clear/src/Clear.d.ts

@@ -4,10 +4,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-    show: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    show: BooleanConstructor;
     onClear: PropType<(e: MouseEvent) => void>;
 }, {
     NConfigProvider: import("../../../config-provider/src/internal-interface").ConfigProviderInjection | null;

package/es/_internal/clear/src/Clear.js

@@ -11,10 +11,7 @@ export default defineComponent({
             type: String,
             required: true
         },
-        show: {
-            type: Boolean,
-            default: false
-        },
+        show: Boolean,
         onClear: Function
     },
     setup(props) {

package/es/_internal/icons/Checkmark.js

@@ -2,7 +2,8 @@ import { h, defineComponent } from 'vue';
 export default defineComponent({
     name: 'Checkmark',
     render() {
-        return (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            h("path", { d: "M13.8639 3.65609C14.0533 3.85704 14.0439 4.17348 13.8429 4.36288L5.91309 11.8368C5.67573 12.0605 5.30311 12.0536 5.07417 11.8213L2.39384 9.10093C2.20003 8.90422 2.20237 8.58765 2.39907 8.39384C2.59578 8.20003 2.91235 8.20237 3.10616 8.39908L5.51192 10.8407L13.1571 3.63517C13.358 3.44577 13.6745 3.45513 13.8639 3.65609Z", fill: "currentColor" })));
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
+            h("g", { fill: "none" },
+                h("path", { d: "M14.046 3.486a.75.75 0 0 1-.032 1.06l-7.93 7.474a.85.85 0 0 1-1.188-.022l-2.68-2.72a.75.75 0 1 1 1.068-1.053l2.234 2.267l7.468-7.038a.75.75 0 0 1 1.06.032z", fill: "currentColor" }))));
     }
 });

package/es/_internal/select-menu/src/SelectMenu.d.ts

@@ -68,6 +68,7 @@ declare const _default: import("vue").DefineComponent<{
         optionOpacityDisabled: string;
         optionCheckColor: string;
         optionColorPending: string;
+        optionColorActive: string;
         actionTextColor: string;
         loadingColor: string;
         height: string;
@@ -119,6 +120,7 @@ declare const _default: import("vue").DefineComponent<{
         optionOpacityDisabled: string;
         optionCheckColor: string;
         optionColorPending: string;
+        optionColorActive: string;
         actionTextColor: string;
         loadingColor: string;
         height: string;
@@ -170,6 +172,7 @@ declare const _default: import("vue").DefineComponent<{
         optionOpacityDisabled: string;
         optionCheckColor: string;
         optionColorPending: string;
+        optionColorActive: string;
         actionTextColor: string;
         loadingColor: string;
         height: string;
@@ -206,6 +209,172 @@ declare const _default: import("vue").DefineComponent<{
     getPendingTmNode: () => TreeNode<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>> | null;
     prev: () => void;
     next: () => void;
+    mergedTheme: import("vue").ComputedRef<{
+        common: {
+            baseColor: string;
+            primaryColor: string;
+            primaryColorHover: string;
+            primaryColorPressed: string;
+            primaryColorSuppl: string;
+            infoColor: string;
+            infoColorHover: string;
+            infoColorPressed: string;
+            infoColorSuppl: string;
+            successColor: string;
+            successColorHover: string;
+            successColorPressed: string;
+            successColorSuppl: string;
+            warningColor: string;
+            warningColorHover: string;
+            warningColorPressed: string;
+            warningColorSuppl: string;
+            errorColor: string;
+            errorColorHover: string;
+            errorColorPressed: string;
+            errorColorSuppl: string;
+            textColorBase: string;
+            textColor1: string;
+            textColor2: string;
+            textColor3: string;
+            textColorDisabled: string;
+            placeholderColor: string;
+            placeholderColorDisabled: string;
+            iconColor: string;
+            iconColorHover: string;
+            iconColorPressed: string;
+            iconColorDisabled: string;
+            opacity1: string;
+            opacity2: string;
+            opacity3: string;
+            opacity4: string;
+            opacity5: string;
+            dividerColor: string;
+            borderColor: string;
+            closeColor: string;
+            closeColorHover: string;
+            closeColorPressed: string;
+            closeColorDisabled: string;
+            clearColor: string;
+            clearColorHover: string;
+            clearColorPressed: string;
+            scrollbarColor: string;
+            scrollbarColorHover: string;
+            scrollbarWidth: string;
+            scrollbarHeight: string;
+            scrollbarBorderRadius: string;
+            progressRailColor: string;
+            railColor: string;
+            popoverColor: string;
+            tableColor: string;
+            cardColor: string;
+            modalColor: string;
+            bodyColor: string;
+            tagColor: string;
+            avatarColor: string;
+            invertedColor: string;
+            inputColor: string;
+            codeColor: string;
+            tabColor: string;
+            actionColor: string;
+            tableHeaderColor: string;
+            hoverColor: string;
+            tableColorHover: string;
+            pressedColor: string;
+            opacityDisabled: string;
+            inputColorDisabled: string;
+            boxShadow1: string;
+            boxShadow2: string;
+            boxShadow3: string;
+            fontFamily: string;
+            fontFamilyMono: string;
+            fontWeight: string;
+            fontWeightStrong: string;
+            cubicBezierEaseInOut: string;
+            cubicBezierEaseOut: string;
+            cubicBezierEaseIn: string;
+            borderRadius: string;
+            borderRadiusSmall: string;
+            fontSize: string;
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            lineHeight: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
+            heightHuge: string;
+            transformDebounceScale: string;
+            name: "common";
+        };
+        self: {
+            optionFontSizeSmall: string;
+            optionFontSizeMedium: string;
+            optionFontSizeLarge: string;
+            optionFontSizeHuge: string;
+            optionHeightSmall: string;
+            optionHeightMedium: string;
+            optionHeightLarge: string;
+            optionHeightHuge: string;
+            borderRadius: string;
+            color: string;
+            groupHeaderTextColor: string;
+            actionDividerColor: string;
+            optionTextColor: string;
+            optionTextColorPressed: string;
+            optionTextColorDisabled: string;
+            optionTextColorActive: string;
+            optionOpacityDisabled: string;
+            optionCheckColor: string;
+            optionColorPending: string;
+            optionColorActive: string;
+            actionTextColor: string;
+            loadingColor: string;
+            height: string;
+            paddingSmall: string;
+            paddingMedium: string;
+            paddingLarge: string;
+            paddingHuge: string;
+            optionPaddingSmall: string;
+            optionPaddingMedium: string;
+            optionPaddingLarge: string;
+            optionPaddingHuge: string;
+            loadingSize: string;
+        };
+        peers: {
+            Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+                color: string;
+                colorHover: string;
+            }, any>;
+            Empty: import("../../../_mixins").Theme<"Empty", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                fontSizeHuge: string;
+                textColor: string;
+                iconColor: string;
+                extraTextColor: string;
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
+            }, any>;
+        };
+        peerOverrides: {
+            Scrollbar?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+            Empty?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+        };
+    }>;
     virtualListRef: import("vue").Ref<{
         listElRef: HTMLElement;
         itemsElRef: HTMLElement | null;
@@ -229,6 +398,7 @@ declare const _default: import("vue").DefineComponent<{
         '--group-header-text-color': string;
         '--option-check-color': string;
         '--option-color-pending': string;
+        '--option-color-active': string;
         '--option-height': string;
         '--option-opacity-disabled': string;
         '--option-text-color': string;
@@ -326,6 +496,7 @@ declare const _default: import("vue").DefineComponent<{
         optionOpacityDisabled: string;
         optionCheckColor: string;
         optionColorPending: string;
+        optionColorActive: string;
         actionTextColor: string;
         loadingColor: string;
         height: string;
@@ -377,6 +548,7 @@ declare const _default: import("vue").DefineComponent<{
         optionOpacityDisabled: string;
         optionCheckColor: string;
         optionColorPending: string;
+        optionColorActive: string;
         actionTextColor: string;
         loadingColor: string;
         height: string;
@@ -428,6 +600,7 @@ declare const _default: import("vue").DefineComponent<{
         optionOpacityDisabled: string;
         optionCheckColor: string;
         optionColorPending: string;
+        optionColorActive: string;
         actionTextColor: string;
         loadingColor: string;
         height: string;

package/es/_internal/select-menu/src/SelectMenu.js

@@ -220,7 +220,7 @@ export default defineComponent({
         });
         const cssVarsRef = computed(() => {
             const { size } = props;
-            const { common: { cubicBezierEaseInOut }, self: { height, borderRadius, color, groupHeaderTextColor, actionDividerColor, optionTextColorPressed, optionTextColor, optionTextColorDisabled, optionTextColorActive, optionOpacityDisabled, optionCheckColor, actionTextColor, optionColorPending, loadingColor, loadingSize, [createKey('optionFontSize', size)]: fontSize, [createKey('optionHeight', size)]: optionHeight, [createKey('optionPadding', size)]: optionPadding } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { height, borderRadius, color, groupHeaderTextColor, actionDividerColor, optionTextColorPressed, optionTextColor, optionTextColorDisabled, optionTextColorActive, optionOpacityDisabled, optionCheckColor, actionTextColor, optionColorPending, optionColorActive, loadingColor, loadingSize, [createKey('optionFontSize', size)]: fontSize, [createKey('optionHeight', size)]: optionHeight, [createKey('optionPadding', size)]: optionPadding } } = themeRef.value;
             return {
                 '--height': height,
                 '--action-divider-color': actionDividerColor,
@@ -232,6 +232,7 @@ export default defineComponent({
                 '--group-header-text-color': groupHeaderTextColor,
                 '--option-check-color': optionCheckColor,
                 '--option-color-pending': optionColorPending,
+                '--option-color-active': optionColorActive,
                 '--option-height': optionHeight,
                 '--option-opacity-disabled': optionOpacityDisabled,
                 '--option-text-color': optionTextColor,
@@ -250,7 +251,7 @@ export default defineComponent({
             prev,
             getPendingTmNode
         };
-        return Object.assign({ virtualListRef,
+        return Object.assign({ mergedTheme: themeRef, virtualListRef,
             scrollbarRef, style: styleRef, itemSize: itemSizeRef, padding: paddingRef, flattenedNodes: flattenedNodesRef, empty: emptyRef, virtualListContainer() {
                 const { value } = virtualListRef;
                 return value === null || value === void 0 ? void 0 : value.listElRef;
@@ -269,15 +270,15 @@ export default defineComponent({
             handleVirtualListScroll }, exposedProps);
     },
     render() {
-        const { $slots, virtualScroll, clsPrefix } = this;
+        const { $slots, virtualScroll, clsPrefix, mergedTheme } = this;
         return (h("div", { ref: "selfRef", tabindex: this.focusable ? 0 : -1, class: [
                 `${clsPrefix}-base-select-menu`,
                 this.multiple && `${clsPrefix}-base-select-menu--multiple`
             ], style: this.style, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onKeyup: this.handleKeyUp, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
             this.loading ? (h("div", { class: `${clsPrefix}-base-select-menu__loading` },
-                h(NInternalLoading, { clsPrefix: clsPrefix, strokeWidth: 20 }))) : !this.empty ? (h(NScrollbar, { ref: "scrollbarRef", scrollable: this.scrollable, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, onScroll: virtualScroll ? undefined : this.doScroll }, {
+                h(NInternalLoading, { clsPrefix: clsPrefix, strokeWidth: 20 }))) : !this.empty ? (h(NScrollbar, { ref: "scrollbarRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, scrollable: this.scrollable, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, onScroll: virtualScroll ? undefined : this.doScroll }, {
                 default: () => {
-                    return virtualScroll ? (h(VirtualList, { ref: "virtualListRef", class: `${clsPrefix}-virtual-list`, items: this.flattenedNodes, itemSize: this.itemSize, showScrollbar: false, paddingTop: this.padding.top, paddingBottom: this.padding.bottom, onResize: this.handleVirtualListResize, onScroll: this.handleVirtualListScroll }, {
+                    return virtualScroll ? (h(VirtualList, { ref: "virtualListRef", class: `${clsPrefix}-virtual-list`, items: this.flattenedNodes, itemSize: this.itemSize, showScrollbar: false, paddingTop: this.padding.top, paddingBottom: this.padding.bottom, onResize: this.handleVirtualListResize, onScroll: this.handleVirtualListScroll, itemResizable: true }, {
                         default: ({ item: tmNode }) => {
                             return tmNode.isGroup ? (h(NSelectGroupHeader, { key: tmNode.key, clsPrefix: clsPrefix, tmNode: tmNode })) : tmNode.ignored ? null : (h(NSelectOption, { clsPrefix: clsPrefix, key: tmNode.key, tmNode: tmNode }));
                         }
@@ -286,7 +287,9 @@ export default defineComponent({
                             paddingBottom: this.padding.bottom
                         } }, this.flattenedNodes.map((tmNode) => tmNode.isGroup ? (h(NSelectGroupHeader, { key: tmNode.key, clsPrefix: clsPrefix, tmNode: tmNode })) : (h(NSelectOption, { clsPrefix: clsPrefix, key: tmNode.key, tmNode: tmNode })))));
                 }
-            })) : (h("div", { class: `${clsPrefix}-base-select-menu__empty` }, renderSlot($slots, 'empty', undefined, () => [h(NEmpty, null)]))),
+            })) : (h("div", { class: `${clsPrefix}-base-select-menu__empty` }, renderSlot($slots, 'empty', undefined, () => [
+                h(NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
+            ]))),
             $slots.action && (h("div", { class: `${clsPrefix}-base-select-menu__action`, "data-action": true }, renderSlot($slots, 'action'))),
             $slots.action && h(NFocusDetector, { onFocus: this.onTabOut })));
     }

package/es/_internal/select-menu/src/SelectOption.js

@@ -98,7 +98,8 @@ export default defineComponent({
                     [`${clsPrefix}-base-select-option--grouped`]: isGrouped,
                     [`${clsPrefix}-base-select-option--pending`]: isPending
                 }
-            ], style: rawNode.style, onClick: handleClick, onMouseenter: handleMouseEnter, onMousemove: handleMouseMove }, children));
+            ], style: rawNode.style, onClick: handleClick, onMouseenter: handleMouseEnter, onMousemove: handleMouseMove },
+            h("div", { class: `${clsPrefix}-base-select-option__content` }, children)));
         return rawNode.render
             ? rawNode.render({ node, option: rawNode, selected: isSelected })
             : renderOption

package/es/_internal/select-menu/src/styles/index.cssr.js

@@ -3,6 +3,7 @@ import fadeInScaleUpTransition from '../../../../_styles/transitions/fade-in-sca
 // --loading-size
 
 export default cB('base-select-menu', `
+ line-height: 1.5;
  outline: none;
  z-index: 0;
  position: relative;
@@ -16,13 +17,19 @@ export default cB('base-select-menu', `
  `), cB('virtual-list', `
  max-height: var(--height);
  `), cB('base-select-option', `
- height: var(--option-height);
- line-height: var(--option-height);
+ min-height: var(--option-height);
  font-size: var(--option-font-size);
- `), cB('base-select-group-header', `
- height: var(--option-height);
- line-height: var(--option-height);
+ display: flex;
+ align-items: center;
+ `, [cE('content', `
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ `)]), cB('base-select-group-header', `
+ min-height: var(--option-height);
  font-size: .93em;
+ display: flex;
+ align-items: center;
  `), cB('base-select-menu-option-wrapper', `
  position: relative;
  width: 100%;
@@ -51,40 +58,37 @@ export default cB('base-select-menu', `
  cursor: pointer;
  position: relative;
  padding: var(--option-padding);
- white-space: nowrap;
  transition:
  background-color .3s var(--bezier),
  color .3s var(--bezier),
  opacity .3s var(--bezier);
- text-overflow: ellipsis;
- overflow: hidden;
  box-sizing: border-box;
  color: var(--option-text-color);
  opacity: 1;
- `, [c('&:active', {
-  color: 'var(--option-text-color-pressed)'
-}), cM('grouped', {
-  paddingLeft: 'calc(var(--option-padding-left) * 1.5)'
-}), cM('selected', {
-  color: 'var(--option-text-color-active)'
-}), cM('disabled', {
-  cursor: 'not-allowed'
-}, [cNotM('selected', {
-  color: 'var(--option-text-color-disabled)'
-}), cM('selected', {
-  opacity: 'var(--option-opacity-disabled)'
-})]), cM('pending', {
-  backgroundColor: 'var(--option-color-pending)'
-}), cE('check', `
- font-size: 14px;
+ `, [c('&:active', `
+ color: var(--option-text-color-pressed);
+ `), cM('grouped', `
+ padding-left: calc(var(--option-padding-left) * 1.5);
+ `), cM('pending', `
+ background-color: var(--option-color-pending);
+ `), cM('selected', `
+ color: var(--option-text-color-active);
+ background-color: var(--option-color-active);
+ `), cM('disabled', `
+ cursor: not-allowed;
+ `, [cNotM('selected', `
+ color: var(--option-text-color-disabled);
+ `), cM('selected', `
+ opacity: var(--option-opacity-disabled);
+ `)]), cE('check', `
+ font-size: 16px;
  position: absolute;
  right: 8px;
- top: calc(var(--option-height) / 2 - 7px);
+ top: calc(50% - 7px);
  color: var(--option-check-color);
  transition: color .3s var(--bezier);
  `, [fadeInScaleUpTransition({
   enterScale: '0.5'
-})])]), cM('multiple', [cB('base-select-option', `
- position: relative;
+})]), cM('multiple', [cB('base-select-option', `
  padding-right: 28px;
- `)])]);
+ `)])])]);

package/es/_internal/select-menu/styles/light.d.ts

@@ -19,6 +19,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     optionOpacityDisabled: string;
     optionCheckColor: string;
     optionColorPending: string;
+    optionColorActive: string;
     actionTextColor: string;
     loadingColor: string;
     height: string;
@@ -53,6 +54,7 @@ declare const internalSelectMenuLight: import("../../../_mixins").Theme<"Interna
     optionOpacityDisabled: string;
     optionCheckColor: string;
     optionColorPending: string;
+    optionColorActive: string;
     actionTextColor: string;
     loadingColor: string;
     height: string;

package/es/_internal/select-menu/styles/light.js

@@ -5,7 +5,7 @@ import commonVariables from './_common';
 import { createTheme } from '../../../_mixins';
 export const self = (vars) => {
     const { borderRadius, popoverColor, textColor3, dividerColor, textColor2, primaryColorPressed, textColorDisabled, primaryColor, opacityDisabled, hoverColor, fontSizeSmall, fontSizeMedium, fontSizeLarge, fontSizeHuge, heightSmall, heightMedium, heightLarge, heightHuge } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { optionFontSizeSmall: fontSizeSmall, optionFontSizeMedium: fontSizeMedium, optionFontSizeLarge: fontSizeLarge, optionFontSizeHuge: fontSizeHuge, optionHeightSmall: heightSmall, optionHeightMedium: heightMedium, optionHeightLarge: heightLarge, optionHeightHuge: heightHuge, borderRadius: borderRadius, color: popoverColor, groupHeaderTextColor: textColor3, actionDividerColor: dividerColor, optionTextColor: textColor2, optionTextColorPressed: primaryColorPressed, optionTextColorDisabled: textColorDisabled, optionTextColorActive: primaryColor, optionOpacityDisabled: opacityDisabled, optionCheckColor: primaryColor, optionColorPending: hoverColor, actionTextColor: textColor2, loadingColor: primaryColor });
+    return Object.assign(Object.assign({}, commonVariables), { optionFontSizeSmall: fontSizeSmall, optionFontSizeMedium: fontSizeMedium, optionFontSizeLarge: fontSizeLarge, optionFontSizeHuge: fontSizeHuge, optionHeightSmall: heightSmall, optionHeightMedium: heightMedium, optionHeightLarge: heightLarge, optionHeightHuge: heightHuge, borderRadius: borderRadius, color: popoverColor, groupHeaderTextColor: textColor3, actionDividerColor: dividerColor, optionTextColor: textColor2, optionTextColorPressed: primaryColorPressed, optionTextColorDisabled: textColorDisabled, optionTextColorActive: primaryColor, optionOpacityDisabled: opacityDisabled, optionCheckColor: primaryColor, optionColorPending: hoverColor, optionColorActive: hoverColor, actionTextColor: textColor2, loadingColor: primaryColor });
 };
 const internalSelectMenuLight = createTheme({
     name: 'InternalSelectMenu',

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

@@ -107,6 +107,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeLarge: string;
         paddingSingle: string;
         clearSize: string;
+        arrowSize: string;
     }, {
         Popover: import("../../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -174,6 +175,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeLarge: string;
         paddingSingle: string;
         clearSize: string;
+        arrowSize: string;
     }, {
         Popover: import("../../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -241,6 +243,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeLarge: string;
         paddingSingle: string;
         clearSize: string;
+        arrowSize: string;
     }, {
         Popover: import("../../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -409,6 +412,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         };
         peers: {
             Popover: import("../../../_mixins").Theme<"Popover", {
@@ -523,6 +527,7 @@ declare const _default: import("vue").DefineComponent<{
         '--clear-color': string;
         '--clear-color-hover': string;
         '--clear-color-pressed': string;
+        '--arrow-size': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     clsPrefix?: unknown;
@@ -628,6 +633,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeLarge: string;
         paddingSingle: string;
         clearSize: string;
+        arrowSize: string;
     }, {
         Popover: import("../../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -695,6 +701,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeLarge: string;
         paddingSingle: string;
         clearSize: string;
+        arrowSize: string;
     }, {
         Popover: import("../../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -762,6 +769,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeLarge: string;
         paddingSingle: string;
         clearSize: string;
+        arrowSize: string;
     }, {
         Popover: import("../../../_mixins").Theme<"Popover", {
             fontSize: string;

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

@@ -52,9 +52,14 @@ export default defineComponent({
         });
         const filterablePlaceholderRef = computed(() => {
             return props.selectedOption
-                ? props.renderLabel
-                    ? props.renderLabel(props.selectedOption, true)
-                    : render(props.selectedOption.label, props.selectedOption, true)
+                ? props.renderTag
+                    ? props.renderTag({
+                        option: props.selectedOption,
+                        handleClose: () => { }
+                    })
+                    : props.renderLabel
+                        ? props.renderLabel(props.selectedOption, true)
+                        : render(props.selectedOption.label, props.selectedOption, true)
                 : props.placeholder;
         });
         const labelRef = computed(() => {
@@ -327,7 +332,9 @@ export default defineComponent({
                 // form error
                 colorActiveError, boxShadowFocusError, boxShadowActiveError, boxShadowHoverError, borderError, borderFocusError, borderHoverError, borderActiveError, 
                 // clear
-                clearColor, clearColorHover, clearColorPressed, clearSize, [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize } } = themeRef.value;
+                clearColor, clearColorHover, clearColorPressed, clearSize, 
+                // arrow
+                arrowSize, [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize } } = themeRef.value;
                 return {
                     '--bezier': cubicBezierEaseInOut,
                     '--border': border,
@@ -374,7 +381,9 @@ export default defineComponent({
                     '--clear-size': clearSize,
                     '--clear-color': clearColor,
                     '--clear-color-hover': clearColorHover,
-                    '--clear-color-pressed': clearColorPressed
+                    '--clear-color-pressed': clearColorPressed,
+                    // arrow-size
+                    '--arrow-size': arrowSize
                 };
             })
         };
@@ -449,7 +458,7 @@ export default defineComponent({
                     themeOverrides: this.mergedTheme.peerOverrides.Popover
                 }
                 : null;
-            const placeholder = !this.selected && !this.pattern && !this.isCompositing ? (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-render-dom` }, this.placeholder)) : null;
+            const placeholder = !this.selected && !this.pattern && !this.isCompositing ? (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay` }, this.placeholder)) : null;
             if (filterable) {
                 const popoverTrigger = (h("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-tags` },
                     tags,
@@ -480,19 +489,30 @@ export default defineComponent({
                     (this.active || !this.selected) &&
                     !this.isCompositing;
                 body = (h("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-label` },
-                    h("input", { ref: "patternInputRef", class: `${clsPrefix}-base-selection-label__input`, value: this.patternInputFocused && 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 }),
+                    h("input", { ref: "patternInputRef", class: `${clsPrefix}-base-selection-input`, value: this.patternInputFocused && 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 }),
                     showPlaceholder ? null : this.patternInputFocused &&
-                        this.active ? null : (h("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-render-dom`, key: "input" }, renderLabel
-                        ? renderLabel(this.selectedOption, true)
-                        : render(this.label, this.selectedOption, true))),
-                    showPlaceholder ? (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-render-dom`, key: "placeholder" }, this.filterablePlaceholder)) : null,
+                        this.active ? null : (h("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-selection-overlay`, key: "input" }, renderTag
+                        ? renderTag({
+                            option: this.selectedOption,
+                            handleClose: () => { }
+                        })
+                        : renderLabel
+                            ? renderLabel(this.selectedOption, true)
+                            : render(this.label, this.selectedOption, true))),
+                    showPlaceholder ? (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" }, this.filterablePlaceholder)) : null,
                     suffix));
             }
             else {
                 body = (h("div", { ref: "singleElRef", class: `${clsPrefix}-base-selection-label`, tabindex: this.disabled ? undefined : 0 },
-                    this.label !== undefined ? (h("div", { class: `${clsPrefix}-base-selection-label__input`, title: getTitleAttribute(this.label), key: "input" }, renderLabel
-                        ? renderLabel(this.selectedOption, true)
-                        : render(this.label, this.selectedOption, true))) : (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-render-dom`, key: "placeholder" }, this.placeholder)),
+                    this.label !== undefined ? (h("div", { class: `${clsPrefix}-base-selection-input`, title: getTitleAttribute(this.label), key: "input" },
+                        h("div", { class: `${clsPrefix}-base-selection-input__content` }, renderTag
+                            ? renderTag({
+                                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" }, this.placeholder)),
                     suffix));
             }
         }