naive-ui 2.18.1 → 2.19.2

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

@@ -57,6 +57,14 @@ declare const _default: import("vue").DefineComponent<{
     onPatternInput: PropType<(e: InputEvent) => void>;
     renderLabel: PropType<RenderLabel>;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelection", {
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
         borderRadius: string;
         textColor: string;
         textColorDisabled: string;
@@ -97,16 +105,9 @@ declare const _default: import("vue").DefineComponent<{
         clearColor: string;
         clearColorHover: string;
         clearColorPressed: string;
-        heightTiny: string;
-        heightSmall: string;
-        heightMedium: string;
-        heightLarge: string;
-        fontSizeTiny: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
         paddingSingle: string;
         clearSize: string;
+        arrowSize: string;
     }, {
         Popover: import("../../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -124,6 +125,14 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>;
     themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"InternalSelection", {
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
         borderRadius: string;
         textColor: string;
         textColorDisabled: string;
@@ -164,16 +173,9 @@ declare const _default: import("vue").DefineComponent<{
         clearColor: string;
         clearColorHover: string;
         clearColorPressed: string;
-        heightTiny: string;
-        heightSmall: string;
-        heightMedium: string;
-        heightLarge: string;
-        fontSizeTiny: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
         paddingSingle: string;
         clearSize: string;
+        arrowSize: string;
     }, {
         Popover: import("../../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -191,6 +193,14 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
     builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"InternalSelection", {
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
         borderRadius: string;
         textColor: string;
         textColorDisabled: string;
@@ -231,16 +241,9 @@ declare const _default: import("vue").DefineComponent<{
         clearColor: string;
         clearColorHover: string;
         clearColorPressed: string;
-        heightTiny: string;
-        heightSmall: string;
-        heightMedium: string;
-        heightLarge: string;
-        fontSizeTiny: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
         paddingSingle: string;
         clearSize: string;
+        arrowSize: string;
     }, {
         Popover: import("../../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -359,6 +362,14 @@ declare const _default: import("vue").DefineComponent<{
             name: "common";
         };
         self: {
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
             borderRadius: string;
             textColor: string;
             textColorDisabled: string;
@@ -399,16 +410,9 @@ declare const _default: import("vue").DefineComponent<{
             clearColor: string;
             clearColorHover: string;
             clearColorPressed: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            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;
@@ -578,6 +583,14 @@ declare const _default: import("vue").DefineComponent<{
     onClick?: ((e: MouseEvent) => void) | undefined;
     placeholder?: string | undefined;
     theme?: import("../../../_mixins").Theme<"InternalSelection", {
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
         borderRadius: string;
         textColor: string;
         textColorDisabled: string;
@@ -618,16 +631,9 @@ declare const _default: import("vue").DefineComponent<{
         clearColor: string;
         clearColorHover: string;
         clearColorPressed: string;
-        heightTiny: string;
-        heightSmall: string;
-        heightMedium: string;
-        heightLarge: string;
-        fontSizeTiny: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
         paddingSingle: string;
         clearSize: string;
+        arrowSize: string;
     }, {
         Popover: import("../../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -645,6 +651,14 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }> | undefined;
     themeOverrides?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"InternalSelection", {
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
         borderRadius: string;
         textColor: string;
         textColorDisabled: string;
@@ -685,16 +699,9 @@ declare const _default: import("vue").DefineComponent<{
         clearColor: string;
         clearColorHover: string;
         clearColorPressed: string;
-        heightTiny: string;
-        heightSmall: string;
-        heightMedium: string;
-        heightLarge: string;
-        fontSizeTiny: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
         paddingSingle: string;
         clearSize: string;
+        arrowSize: string;
     }, {
         Popover: import("../../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -712,6 +719,14 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>> | undefined;
     builtinThemeOverrides?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"InternalSelection", {
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
         borderRadius: string;
         textColor: string;
         textColorDisabled: string;
@@ -752,16 +767,9 @@ declare const _default: import("vue").DefineComponent<{
         clearColor: string;
         clearColorHover: string;
         clearColorPressed: string;
-        heightTiny: string;
-        heightSmall: string;
-        heightMedium: string;
-        heightLarge: string;
-        fontSizeTiny: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        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));
             }
         }

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

@@ -20,6 +20,7 @@ import { c, cB, cE, cM, cNotM, insideFormItem } from '../../../../_utils/cssr';
 // --text-color
 // --text-color-disabled
 // --arrow-color
+// --arrow-size
 // --loading-color
 // ...clear vars
 // ...form item vars
@@ -34,13 +35,10 @@ export default c([cB('base-selection', `
  vertical-align: bottom;
  border-radius: var(--border-radius);
  min-height: var(--height);
- line-height: var(--height);
+ line-height: 1.5;
  font-size: var(--font-size);
  `, [cB('base-loading', `
  color: var(--loading-color);
- `), cB('base-selection-label', `
- height: var(--height);
- line-height: var(--height);
  `), cB('base-selection-tags', {
   minHeight: 'var(--height)'
 }), cE('border, state-border', `
@@ -65,13 +63,14 @@ export default c([cB('base-selection', `
  transform: translateY(-50%);
  right: 10px;
  `, [cE('arrow', `
+ font-size: var(--arrow-size);
  color: var(--arrow-color);
  transition: color .3s var(--bezier);
- `)]), cB('base-render-dom', `
+ `)]), cB('base-selection-overlay', `
+ display: flex;
+ align-items: center;
  white-space: nowrap;
  overflow: hidden;
- height: var(--height);
- line-height: var(--height);
  pointer-events: none;
  position: absolute;
  top: 0;
@@ -101,7 +100,8 @@ export default c([cB('base-selection', `
  box-shadow .3s var(--bezier),
  background-color .3s var(--bezier);
  `), cB('base-selection-label', `
- display: inline-block;
+ height: var(--height);
+ display: inline-flex;
  width: 100%;
  vertical-align: bottom;
  cursor: pointer;
@@ -115,22 +115,24 @@ export default c([cB('base-selection', `
  background-color .3s var(--bezier);
  border-radius: inherit;
  background-color: var(--color);
- `, [cE('input', `
+ align-items: center;
+ `, [cB('base-selection-input', `
  line-height: inherit;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
- text-overflow: ellipsis;
- overflow: hidden;
  border:none;
  width: 100%;
- white-space: nowrap;
  padding: var(--padding-single);
  background-color: #0000;
  color: var(--text-color);
  transition: color .3s var(--bezier);
  caret-color: var(--caret-color);
- `), cE('render-label', `
+ `, [cE('content', `
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap; 
+ `)]), cE('render-label', `
  color: var(--text-color);
  `)]), cNotM('disabled', [c('&:hover', [cE('state-border', `
  box-shadow: var(--box-shadow-hover);
@@ -152,7 +154,7 @@ export default c([cB('base-selection', `
  `), cB('base-selection-label', `
  cursor: not-allowed;
  background-color: var(--color-disabled);
- `, [cE('input', `
+ `, [cB('base-selection-input', `
  cursor: not-allowed;
  color: var(--text-color-disabled);
  `), cE('render-label', `

package/es/_internal/selection/styles/_common.d.ts

@@ -1,13 +1,6 @@
 declare const _default: {
-    heightTiny: string;
-    heightSmall: string;
-    heightMedium: string;
-    heightLarge: string;
-    fontSizeTiny: string;
-    fontSizeSmall: string;
-    fontSizeMedium: string;
-    fontSizeLarge: string;
     paddingSingle: string;
     clearSize: string;
+    arrowSize: string;
 };
 export default _default;

package/es/_internal/selection/styles/_common.js

@@ -1,12 +1,5 @@
 export default {
-    heightTiny: '22px',
-    heightSmall: '28px',
-    heightMedium: '34px',
-    heightLarge: '40px',
-    fontSizeTiny: '12px',
-    fontSizeSmall: '14px',
-    fontSizeMedium: '14px',
-    fontSizeLarge: '15px',
     paddingSingle: '0 26px 0 14px',
-    clearSize: '16px'
+    clearSize: '16px',
+    arrowSize: '16px'
 };

package/es/_internal/selection/styles/dark.js

@@ -9,8 +9,16 @@ const internalSelectionDark = {
         Popover: popoverDark
     },
     self(vars) {
-        const { borderRadius, textColor2, textColorDisabled, inputColor, inputColorDisabled, primaryColor, primaryColorHover, warningColor, warningColorHover, errorColor, errorColorHover, iconColor, iconColorDisabled, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled } = vars;
-        return Object.assign(Object.assign({}, commonVars), { borderRadius: borderRadius, 
+        const { borderRadius, textColor2, textColorDisabled, inputColor, inputColorDisabled, primaryColor, primaryColorHover, warningColor, warningColorHover, errorColor, errorColorHover, iconColor, iconColorDisabled, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightTiny, heightSmall, heightMedium, heightLarge } = vars;
+        return Object.assign(Object.assign({}, commonVars), { fontSizeTiny,
+            fontSizeSmall,
+            fontSizeMedium,
+            fontSizeLarge,
+            heightTiny,
+            heightSmall,
+            heightMedium,
+            heightLarge,
+            borderRadius, 
             // default
             textColor: textColor2, textColorDisabled,
             placeholderColor,

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

@@ -1,5 +1,13 @@
 import type { ThemeCommonVars } from '../../../_styles/common';
 declare const self: (vars: ThemeCommonVars) => {
+    fontSizeTiny: string;
+    fontSizeSmall: string;
+    fontSizeMedium: string;
+    fontSizeLarge: string;
+    heightTiny: string;
+    heightSmall: string;
+    heightMedium: string;
+    heightLarge: string;
     borderRadius: string;
     textColor: string;
     textColorDisabled: string;
@@ -40,19 +48,20 @@ declare const self: (vars: ThemeCommonVars) => {
     clearColor: string;
     clearColorHover: string;
     clearColorPressed: string;
-    heightTiny: string;
-    heightSmall: string;
-    heightMedium: string;
-    heightLarge: string;
-    fontSizeTiny: string;
-    fontSizeSmall: string;
-    fontSizeMedium: string;
-    fontSizeLarge: string;
     paddingSingle: string;
     clearSize: string;
+    arrowSize: string;
 };
 export declare type InternalSelectionThemeVars = ReturnType<typeof self>;
 declare const internalSelectionLight: import("../../../_mixins").Theme<"InternalSelection", {
+    fontSizeTiny: string;
+    fontSizeSmall: string;
+    fontSizeMedium: string;
+    fontSizeLarge: string;
+    heightTiny: string;
+    heightSmall: string;
+    heightMedium: string;
+    heightLarge: string;
     borderRadius: string;
     textColor: string;
     textColorDisabled: string;
@@ -93,16 +102,9 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     clearColor: string;
     clearColorHover: string;
     clearColorPressed: string;
-    heightTiny: string;
-    heightSmall: string;
-    heightMedium: string;
-    heightLarge: string;
-    fontSizeTiny: string;
-    fontSizeSmall: string;
-    fontSizeMedium: string;
-    fontSizeLarge: string;
     paddingSingle: string;
     clearSize: string;
+    arrowSize: string;
 }, {
     Popover: import("../../../_mixins").Theme<"Popover", {
         fontSize: string;

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

@@ -4,8 +4,16 @@ import { popoverLight } from '../../../popover/styles';
 import commonVariables from './_common';
 import { createTheme } from '../../../_mixins';
 const self = (vars) => {
-    const { borderRadius, textColor2, textColorDisabled, inputColor, inputColorDisabled, primaryColor, primaryColorHover, warningColor, warningColorHover, errorColor, errorColorHover, borderColor, iconColor, iconColorDisabled, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { borderRadius: borderRadius, 
+    const { borderRadius, textColor2, textColorDisabled, inputColor, inputColorDisabled, primaryColor, primaryColorHover, warningColor, warningColorHover, errorColor, errorColorHover, borderColor, iconColor, iconColorDisabled, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightTiny, heightSmall, heightMedium, heightLarge } = vars;
+    return Object.assign(Object.assign({}, commonVariables), { fontSizeTiny,
+        fontSizeSmall,
+        fontSizeMedium,
+        fontSizeLarge,
+        heightTiny,
+        heightSmall,
+        heightMedium,
+        heightLarge,
+        borderRadius, 
         // default
         textColor: textColor2, textColorDisabled,
         placeholderColor,

package/es/_mixins/use-rtl.js

@@ -23,7 +23,7 @@ export default function useRtl(mountId, rtlStateRef, clsPrefixRef) {
             // if it already exists, we only need to watch clsPrefix, although in most
             // of time it's unnecessary... However we can at least listen less
             // handlers, which is great.
-            if (exists(id))
+            if (exists(id, ssrAdapter))
                 return;
             const { value: componentRtlState } = componentRtlStateRef;
             if (!componentRtlState)

package/es/_styles/common/light.js

@@ -87,7 +87,7 @@ const derived = Object.assign(Object.assign({ name: 'common' }, commonVariables)
     // close
     closeColor: neutral(Number(base.alphaClose)), closeColorHover: neutral(Number(base.alphaClose) * 1.25), closeColorPressed: neutral(Number(base.alphaClose) * 0.8), closeColorDisabled: neutral(base.alpha4), 
     // clear
-    clearColor: neutral(base.alpha4), clearColorHover: scaleColor(neutral(base.alpha4), { lightness: 0.75 }), clearColorPressed: scaleColor(neutral(base.alpha4), { lightness: 0.9 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: neutral(base.alphaProgressRail), railColor: 'rgb(219, 219, 223)', popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: 'rgb(250, 250, 252)', avatarColor: neutral(base.alphaAvatar), invertedColor: 'rgb(0, 20, 40)', inputColor: neutral(base.alphaInput), codeColor: 'rgb(244, 244, 248)', tabColor: 'rgb(250, 250, 252)', actionColor: 'rgb(250, 250, 252)', tableHeaderColor: 'rgb(250, 250, 252)', hoverColor: 'rgb(243, 243, 245)', 
+    clearColor: neutral(base.alpha4), clearColorHover: scaleColor(neutral(base.alpha4), { lightness: 0.75 }), clearColorPressed: scaleColor(neutral(base.alpha4), { lightness: 0.9 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: neutral(base.alphaProgressRail), railColor: 'rgb(219, 219, 223)', popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: 'rgb(250, 250, 252)', avatarColor: neutral(base.alphaAvatar), invertedColor: 'rgb(0, 20, 40)', inputColor: neutral(base.alphaInput), codeColor: 'rgb(244, 244, 248)', tabColor: 'rgb(247, 247, 250)', actionColor: 'rgb(250, 250, 252)', tableHeaderColor: 'rgb(250, 250, 252)', hoverColor: 'rgb(243, 243, 245)', 
     // use color with alpha since it can be nested with header filter & sorter effect
     tableColorHover: 'rgba(0, 0, 100, 0.02)', pressedColor: 'rgb(237, 237, 239)', opacityDisabled: base.alphaDisabled, inputColorDisabled: 'rgb(250, 250, 252)', boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });
 export default derived;

package/es/_utils/naive/mutable.d.ts

@@ -1,3 +1,3 @@
-export declare type Mutable<T> = {
+export declare type Mutable<T> = T extends Record<string, unknown> ? {
     -readonly [P in keyof T]: T[P] extends ReadonlyArray<infer U> ? Array<Mutable<U>> : Mutable<T[P]>;
-};
+} : T;

package/es/alert/src/Alert.js

@@ -96,20 +96,20 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
         return (h(NFadeInExpandTransition, { onAfterLeave: this.handleAfterLeave }, {
-            default: () => this.visible
-                ? h('div', mergeProps(this.$attrs, {
+            default: () => {
+                const { mergedClsPrefix, $slots } = this;
+                const attrs = {
                     class: [
                         `${mergedClsPrefix}-alert`,
-                        {
-                            [`${mergedClsPrefix}-alert--show-icon`]: this.showIcon
-                        }
+                        this.showIcon && `${mergedClsPrefix}-alert--show-icon`
                     ],
-                    style: this.cssVars
-                }), [
-                    this.closable ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-alert__close`, onClick: this.handleCloseClick })) : null,
-                    this.showIcon ? (h("div", { class: `${mergedClsPrefix}-alert__icon` }, this.$slots.icon ? (renderSlot(this.$slots, 'icon')) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                    style: this.cssVars,
+                    role: 'alert'
+                };
+                return this.visible ? (h("div", Object.assign({}, mergeProps(this.$attrs, attrs)),
+                    this.closable && (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-alert__close`, onClick: this.handleCloseClick })),
+                    this.showIcon && (h("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, $slots.icon ? ($slots.icon()) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
                         default: () => {
                             switch (this.type) {
                                 case 'success':
@@ -124,14 +124,13 @@ export default defineComponent({
                                     return null;
                             }
                         }
-                    })))) : null,
+                    })))),
                     h("div", { class: `${mergedClsPrefix}-alert-body` },
-                        this.title !== undefined ? (h("div", { class: `${mergedClsPrefix}-alert-body__title` }, renderSlot(this.$slots, 'header', undefined, () => [
+                        this.title !== undefined && (h("div", { class: `${mergedClsPrefix}-alert-body__title` }, renderSlot($slots, 'header', undefined, () => [
                             this.title
-                        ]))) : null,
-                        this.$slots.default ? (h("div", { class: `${mergedClsPrefix}-alert-body__content` }, this.$slots)) : null)
-                ])
-                : null
+                        ]))),
+                        $slots.default && (h("div", { class: `${mergedClsPrefix}-alert-body__content` }, $slots))))) : null;
+            }
         }));
     }
 });