naive-ui 2.18.0 → 2.19.1

package/es/upload/src/styles/index.cssr.js

@@ -1,41 +1,56 @@
 import { c, cM, cB, cE } from '../../../_utils/cssr';
 import fadeInHeightExpand from '../../../_styles/transitions/fade-in-height-expand.cssr';
 import createIconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr';
-export default cB('upload', [cE('file-input', `
+export default c([cB('upload', [cM('dragger-inside', [cE('trigger', `
  display: block;
- width: 0;
- height: 0;
- opacity: 0;
- `), cE('trigger', `
- display: inline-block;
- box-sizing: border-box;
- `, [cM('image-card', [cB('upload-dragger', `
- padding: 0;
- height: 100%;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- `)])]), cM('dragger-inside', [cE('trigger', `
- display: block;
- `)]), cB('upload-dragger', `
+ `)]), cM('drag-over', [cB('upload-dragger', `
+ border: var(--dragger-border-hover);
+ `)])]), cB('upload-dragger', `
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  border-radius: var(--border-radius);
  padding: 24px;
+ opacity: 1;
  transition:
+ opacity .3s var(--bezier),
  border-color .3s var(--bezier),
  background-color .3s var(--bezier);
  background-color: var(--dragger-color);
  border: var(--dragger-border);
  `, [c('&:hover', `
  border: var(--dragger-border-hover);
- `)]), cB('upload-file-list', `
+ `), cM('disabled', `
+ opacity: var(--item-disabled-opacity);
+ cursor: not-allowed;
+ `)]), cB('upload-trigger', `
+ display: inline-block;
+ box-sizing: border-box;
+ opacity: 1;
+ transition: opacity .3s var(--bezier);
+ `, [cM('disabled', `
+ opacity: var(--item-disabled-opacity);
+ cursor: not-allowed;
+ `), cM('image-card', `
+ width: 96px;
+ height: 96px;
+ `, [cB('upload-dragger', `
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ `)])]), cB('upload-file-list', `
  margin-top: 8px;
  line-height: var(--line-height);
- `, [cM('grid', `
+ opacity: 1;
+ transition: opacity .3s var(--bezier);
+ `, [cM('disabled', `
+ opacity: var(--item-disabled-opacity);
+ cursor: not-allowed;
+ `, [cB('upload-file', 'cursor: not-allowed;')]), cM('grid', `
  display: grid;
  grid-template-columns: repeat(auto-fill, 96px);
  grid-gap: 8px;
@@ -200,16 +215,9 @@ export default cB('upload', [cE('file-input', `
  `, [c('a', `
  color: inherit;
  text-decoration: underline;
- `)])])])]), cM('disabled', `
- opacity: var(--item-disabled-opacity);
- `, [cE('trigger', `
- cursor: not-allowed;
- `), cB('upload-file', `
- cursor: not-allowed;
- `), cB('upload-file-list', `
- cursor: not-allowed;
- `), cB('upload-dragger', `
- cursor: not-allowed;
- `)]), cM('drag-over', [cB('upload-dragger', `
- border: var(--dragger-border-hover);
- `)])]);
+ `)])])])]), cB('upload-file-input', `
+ display: block;
+ width: 0;
+ height: 0;
+ opacity: 0;
+ `)]);

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.18.0";
+declare const _default: "2.19.1";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.18.0';
+export default '2.19.1';

package/lib/_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/lib/_internal/clear/src/Clear.js

@@ -13,10 +13,7 @@ exports.default = (0, vue_1.defineComponent)({
             type: String,
             required: true
         },
-        show: {
-            type: Boolean,
-            default: false
-        },
+        show: Boolean,
         onClear: Function
     },
     setup(props) {

package/lib/_internal/icons/Checkmark.js

@@ -4,7 +4,8 @@ const vue_1 = require("vue");
 exports.default = (0, vue_1.defineComponent)({
     name: 'Checkmark',
     render() {
-        return ((0, vue_1.h)("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            (0, vue_1.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 ((0, vue_1.h)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
+            (0, vue_1.h)("g", { fill: "none" },
+                (0, vue_1.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/lib/_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/lib/_internal/select-menu/src/SelectMenu.js

@@ -222,7 +222,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { size } = props;
-            const { common: { cubicBezierEaseInOut }, self: { height, borderRadius, color, groupHeaderTextColor, actionDividerColor, optionTextColorPressed, optionTextColor, optionTextColorDisabled, optionTextColorActive, optionOpacityDisabled, optionCheckColor, actionTextColor, optionColorPending, loadingColor, loadingSize, [(0, cssr_1.createKey)('optionFontSize', size)]: fontSize, [(0, cssr_1.createKey)('optionHeight', size)]: optionHeight, [(0, cssr_1.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, [(0, cssr_1.createKey)('optionFontSize', size)]: fontSize, [(0, cssr_1.createKey)('optionHeight', size)]: optionHeight, [(0, cssr_1.createKey)('optionPadding', size)]: optionPadding } } = themeRef.value;
             return {
                 '--height': height,
                 '--action-divider-color': actionDividerColor,
@@ -234,6 +234,7 @@ exports.default = (0, vue_1.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,
@@ -252,7 +253,7 @@ exports.default = (0, vue_1.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;
@@ -271,15 +272,15 @@ exports.default = (0, vue_1.defineComponent)({
             handleVirtualListScroll }, exposedProps);
     },
     render() {
-        const { $slots, virtualScroll, clsPrefix } = this;
+        const { $slots, virtualScroll, clsPrefix, mergedTheme } = this;
         return ((0, vue_1.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 ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__loading` },
-                (0, vue_1.h)(loading_1.default, { clsPrefix: clsPrefix, strokeWidth: 20 }))) : !this.empty ? ((0, vue_1.h)(scrollbar_1.NScrollbar, { ref: "scrollbarRef", scrollable: this.scrollable, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, onScroll: virtualScroll ? undefined : this.doScroll }, {
+                (0, vue_1.h)(loading_1.default, { clsPrefix: clsPrefix, strokeWidth: 20 }))) : !this.empty ? ((0, vue_1.h)(scrollbar_1.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 ? ((0, vue_1.h)(vueuc_1.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 ? ((0, vue_1.h)(vueuc_1.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 ? ((0, vue_1.h)(SelectGroupHeader_1.default, { key: tmNode.key, clsPrefix: clsPrefix, tmNode: tmNode })) : tmNode.ignored ? null : ((0, vue_1.h)(SelectOption_1.default, { clsPrefix: clsPrefix, key: tmNode.key, tmNode: tmNode }));
                         }
@@ -288,7 +289,9 @@ exports.default = (0, vue_1.defineComponent)({
                             paddingBottom: this.padding.bottom
                         } }, this.flattenedNodes.map((tmNode) => tmNode.isGroup ? ((0, vue_1.h)(SelectGroupHeader_1.default, { key: tmNode.key, clsPrefix: clsPrefix, tmNode: tmNode })) : ((0, vue_1.h)(SelectOption_1.default, { clsPrefix: clsPrefix, key: tmNode.key, tmNode: tmNode })))));
                 }
-            })) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__empty` }, (0, vue_1.renderSlot)($slots, 'empty', undefined, () => [(0, vue_1.h)(empty_1.NEmpty, null)]))),
+            })) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__empty` }, (0, vue_1.renderSlot)($slots, 'empty', undefined, () => [
+                (0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
+            ]))),
             $slots.action && ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__action`, "data-action": true }, (0, vue_1.renderSlot)($slots, 'action'))),
             $slots.action && (0, vue_1.h)(focus_detector_1.default, { onFocus: this.onTabOut })));
     }

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

@@ -100,7 +100,8 @@ exports.default = (0, vue_1.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 },
+            (0, vue_1.h)("div", { class: `${clsPrefix}-base-select-option__content` }, children)));
         return rawNode.render
             ? rawNode.render({ node, option: rawNode, selected: isSelected })
             : renderOption

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

@@ -11,6 +11,7 @@ const fade_in_scale_up_cssr_1 = require("../../../../_styles/transitions/fade-in
 
 
 exports.default = (0, cssr_1.cB)('base-select-menu', `
+ line-height: 1.5;
  outline: none;
  z-index: 0;
  position: relative;
@@ -24,13 +25,19 @@ exports.default = (0, cssr_1.cB)('base-select-menu', `
  `), (0, cssr_1.cB)('virtual-list', `
  max-height: var(--height);
  `), (0, cssr_1.cB)('base-select-option', `
- height: var(--option-height);
- line-height: var(--option-height);
+ min-height: var(--option-height);
  font-size: var(--option-font-size);
- `), (0, cssr_1.cB)('base-select-group-header', `
- height: var(--option-height);
- line-height: var(--option-height);
+ display: flex;
+ align-items: center;
+ `, [(0, cssr_1.cE)('content', `
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ `)]), (0, cssr_1.cB)('base-select-group-header', `
+ min-height: var(--option-height);
  font-size: .93em;
+ display: flex;
+ align-items: center;
  `), (0, cssr_1.cB)('base-select-menu-option-wrapper', `
  position: relative;
  width: 100%;
@@ -59,40 +66,37 @@ exports.default = (0, cssr_1.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;
- `, [(0, cssr_1.c)('&:active', {
-  color: 'var(--option-text-color-pressed)'
-}), (0, cssr_1.cM)('grouped', {
-  paddingLeft: 'calc(var(--option-padding-left) * 1.5)'
-}), (0, cssr_1.cM)('selected', {
-  color: 'var(--option-text-color-active)'
-}), (0, cssr_1.cM)('disabled', {
-  cursor: 'not-allowed'
-}, [(0, cssr_1.cNotM)('selected', {
-  color: 'var(--option-text-color-disabled)'
-}), (0, cssr_1.cM)('selected', {
-  opacity: 'var(--option-opacity-disabled)'
-})]), (0, cssr_1.cM)('pending', {
-  backgroundColor: 'var(--option-color-pending)'
-}), (0, cssr_1.cE)('check', `
- font-size: 14px;
+ `, [(0, cssr_1.c)('&:active', `
+ color: var(--option-text-color-pressed);
+ `), (0, cssr_1.cM)('grouped', `
+ padding-left: calc(var(--option-padding-left) * 1.5);
+ `), (0, cssr_1.cM)('pending', `
+ background-color: var(--option-color-pending);
+ `), (0, cssr_1.cM)('selected', `
+ color: var(--option-text-color-active);
+ background-color: var(--option-color-active);
+ `), (0, cssr_1.cM)('disabled', `
+ cursor: not-allowed;
+ `, [(0, cssr_1.cNotM)('selected', `
+ color: var(--option-text-color-disabled);
+ `), (0, cssr_1.cM)('selected', `
+ opacity: var(--option-opacity-disabled);
+ `)]), (0, cssr_1.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);
  `, [(0, fade_in_scale_up_cssr_1.default)({
   enterScale: '0.5'
-})])]), (0, cssr_1.cM)('multiple', [(0, cssr_1.cB)('base-select-option', `
- position: relative;
+})]), (0, cssr_1.cM)('multiple', [(0, cssr_1.cB)('base-select-option', `
  padding-right: 28px;
- `)])]);
+ `)])])]);

package/lib/_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/lib/_internal/select-menu/styles/light.js

@@ -8,7 +8,7 @@ const _common_1 = require("./_common");
 const _mixins_1 = require("../../../_mixins");
 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({}, _common_1.default), { 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({}, _common_1.default), { 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 });
 };
 exports.self = self;
 const internalSelectMenuLight = (0, _mixins_1.createTheme)({

package/lib/_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;