naive-ui 2.23.0 → 2.24.1

package/README.md

@@ -24,7 +24,7 @@
 
 ### Fairly Complete
 
-There are more than 70 components. Hope they can help you write less code.
+There are more than 80 components. Hope they can help you write less code.
 
 What's more, they are all treeshakable.
 

package/README.zh-CN.md

@@ -24,7 +24,7 @@
 
 ### 比较完整
 
-有超过 70 个组件，希望能帮你少写点代码。
+有超过 80 个组件，希望能帮你少写点代码。
 
 顺便一提，它们全都可以 treeshaking。
 

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

@@ -1,10 +1,10 @@
 import { cB, c, cE } from '../../../../_utils/cssr';
 import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch.cssr'; // vars:
-// --bezier
-// --clear-color
-// --clear-size
-// --clear-color-hover
-// --clear-color-pressed
+// --n-bezier
+// --n-clear-color
+// --n-clear-size
+// --n-clear-color-hover
+// --n-clear-color-pressed
 
 export default cB('base-clear', `
  flex-shrink: 0;
@@ -12,14 +12,14 @@ export default cB('base-clear', `
  width: 1em;
  position: relative;
 `, [c('>', [cE('clear', `
- font-size: var(--clear-size);
+ font-size: var(--n-clear-size);
  cursor: pointer;
- color: var(--clear-color);
- transition: color .3s var(--bezier);
+ color: var(--n-clear-color);
+ transition: color .3s var(--n-bezier);
  `, [c('&:hover', `
- color: var(--clear-color-hover)!important;
+ color: var(--n-clear-color-hover)!important;
  `), c('&:active', `
- color: var(--clear-color-pressed)!important;
+ color: var(--n-clear-color-pressed)!important;
  `)]), cE('placeholder', `
  display: flex;
  `), cE('clear, placeholder', `

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

@@ -1,18 +1,17 @@
-import { cB, cM, c } from '../../../../_utils/cssr'; // Note: non-prefixed color should be removed after css vars prefix migration
-// vars:
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --close-color-disabled
+import { cB, cM, c } from '../../../../_utils/cssr'; // vars:
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-close-color-disabled
 
 export default cB('base-close', `
  cursor: pointer;
- color: var(--close-color, var(--n-close-color));
+ color: var(--n-close-color);
 `, [c('&:hover', {
-  color: 'var(--close-color-hover, var(--n-close-color))'
+  color: 'var(--n-close-color-hover)'
 }), c('&:active', {
-  color: 'var(--close-color-pressed, var(--n-close-color-pressed))'
+  color: 'var(--n-close-color-pressed)'
 }), cM('disabled', {
   cursor: 'not-allowed!important',
-  color: 'var(--close-color-disabled, var(--n-close-color-disabled))'
+  color: 'var(--n-close-color-disabled)'
 })]);

package/es/_internal/icons/Close.js

@@ -1,6 +1,6 @@
 import { h } from 'vue';
 import { replaceable } from './replaceable';
-export default replaceable('close', h("svg", { viewBox: "0 0 12 12", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
+export default replaceable('close', h("svg", { viewBox: "0 0 12 12", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true },
     h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
         h("g", { fill: "currentColor", "fill-rule": "nonzero" },
             h("path", { d: "M2.08859116,2.2156945 L2.14644661,2.14644661 C2.32001296,1.97288026 2.58943736,1.95359511 2.7843055,2.08859116 L2.85355339,2.14644661 L6,5.293 L9.14644661,2.14644661 C9.34170876,1.95118446 9.65829124,1.95118446 9.85355339,2.14644661 C10.0488155,2.34170876 10.0488155,2.65829124 9.85355339,2.85355339 L6.707,6 L9.85355339,9.14644661 C10.0271197,9.32001296 10.0464049,9.58943736 9.91140884,9.7843055 L9.85355339,9.85355339 C9.67998704,10.0271197 9.41056264,10.0464049 9.2156945,9.91140884 L9.14644661,9.85355339 L6,6.707 L2.85355339,9.85355339 C2.65829124,10.0488155 2.34170876,10.0488155 2.14644661,9.85355339 C1.95118446,9.65829124 1.95118446,9.34170876 2.14644661,9.14644661 L5.293,6 L2.14644661,2.85355339 C1.97288026,2.67998704 1.95359511,2.41056264 2.08859116,2.2156945 L2.14644661,2.14644661 L2.08859116,2.2156945 Z" })))));

package/es/_internal/icons/Switcher.js

@@ -2,8 +2,7 @@ import { h, defineComponent } from 'vue';
 export default defineComponent({
     name: 'Switcher',
     render() {
-        return (h("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "enable-background": "new 0 0 512 512" },
-            h("g", null,
-                h("polygon", { points: "192,128 320,256 192,384" }))));
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" },
+            h("path", { d: "M12 8l10 8l-10 8z" })));
     }
 });

package/es/_internal/scrollbar/src/ScrollBar.d.ts

@@ -144,12 +144,12 @@ declare const Scrollbar: import("vue").DefineComponent<{
     handleYScrollMouseDown: (e: MouseEvent) => void;
     handleXScrollMouseDown: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--scrollbar-bezier': string;
-        '--scrollbar-color': string;
-        '--scrollbar-color-hover': string;
-        '--scrollbar-border-radius': string;
-        '--scrollbar-width': string;
-        '--scrollbar-height': string;
+        '--n-scrollbar-bezier': string;
+        '--n-scrollbar-color': string;
+        '--n-scrollbar-color-hover': string;
+        '--n-scrollbar-border-radius': string;
+        '--n-scrollbar-width': string;
+        '--n-scrollbar-height': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly size?: unknown;

package/es/_internal/scrollbar/src/ScrollBar.js

@@ -459,12 +459,12 @@ const Scrollbar = defineComponent({
             cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut, scrollbarBorderRadius, scrollbarHeight, scrollbarWidth }, self: { color, colorHover } } = themeRef.value;
                 return {
-                    '--scrollbar-bezier': cubicBezierEaseInOut,
-                    '--scrollbar-color': color,
-                    '--scrollbar-color-hover': colorHover,
-                    '--scrollbar-border-radius': scrollbarBorderRadius,
-                    '--scrollbar-width': scrollbarWidth,
-                    '--scrollbar-height': scrollbarHeight
+                    '--n-scrollbar-bezier': cubicBezierEaseInOut,
+                    '--n-scrollbar-color': color,
+                    '--n-scrollbar-color-hover': colorHover,
+                    '--n-scrollbar-border-radius': scrollbarBorderRadius,
+                    '--n-scrollbar-width': scrollbarWidth,
+                    '--n-scrollbar-height': scrollbarHeight
                 };
             })
         };
@@ -474,18 +474,19 @@ const Scrollbar = defineComponent({
         if (!this.scrollable)
             return renderSlot($slots, 'default');
         const createChildren = () => h('div', mergeProps(this.$attrs, {
+            role: 'none',
             ref: 'wrapperRef',
             class: `${mergedClsPrefix}-scrollbar`,
             style: this.cssVars,
             onMouseenter: this.handleMouseEnterWrapper,
             onMouseleave: this.handleMouseLeaveWrapper
         }), [
-            this.container ? (renderSlot($slots, 'default')) : (h("div", { ref: "containerRef", class: [
+            this.container ? (renderSlot($slots, 'default')) : (h("div", { role: "none", ref: "containerRef", class: [
                     `${mergedClsPrefix}-scrollbar-container`,
                     this.containerClass
                 ], style: this.containerStyle, onScroll: this.handleScroll, onWheel: this.onWheel },
                 h(VResizeObserver, { onResize: this.handleContentResize }, {
-                    default: () => (h("div", { ref: "contentRef", style: [
+                    default: () => (h("div", { ref: "contentRef", role: "none", style: [
                             {
                                 width: this.xScrollable ? 'fit-content' : null
                             },
@@ -495,14 +496,14 @@ const Scrollbar = defineComponent({
                             this.contentClass
                         ] }, $slots))
                 }))),
-            h("div", { ref: "yRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`, style: [this.horizontalRailStyle] },
+            h("div", { ref: "yRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`, style: this.horizontalRailStyle, "aria-hidden": true },
                 h(Transition, { name: "fade-in-transition" }, {
                     default: () => this.needYBar && this.isShowYBar && !this.isIos ? (h("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                             height: this.yBarSizePx,
                             top: this.yBarTopPx
                         }, onMousedown: this.handleYScrollMouseDown })) : null
                 })),
-            h("div", { ref: "xRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`, style: [this.verticalRailStyle] },
+            h("div", { ref: "xRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`, style: this.verticalRailStyle, "aria-hidden": true },
                 h(Transition, { name: "fade-in-transition" }, {
                     default: () => this.needXBar && this.isShowXBar && !this.isIos ? (h("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                             width: this.xBarSizePx,

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

@@ -1,11 +1,11 @@
 import { cB, c, cM, cE } from '../../../../_utils/cssr';
 import fadeInTransition from '../../../../_styles/transitions/fade-in.cssr'; // vars:
-// --scrollbar-bezier
-// --scrollbar-color
-// --scrollbar-color-hover
-// --scrollbar-width
-// --scrollbar-height
-// --scrollbar-border-radius
+// --n-scrollbar-bezier
+// --n-scrollbar-color
+// --n-scrollbar-color-hover
+// --n-scrollbar-width
+// --n-scrollbar-height
+// --n-scrollbar-border-radius
 
 export default cB('scrollbar', `
  overflow: hidden;
@@ -34,19 +34,19 @@ export default cB('scrollbar', `
  left: 2px;
  right: 2px;
  bottom: 4px;
- height: var(--scrollbar-height);
+ height: var(--n-scrollbar-height);
  `, [c('>', [cE('scrollbar', `
- height: var(--scrollbar-height);
- border-radius: var(--scrollbar-border-radius);
+ height: var(--n-scrollbar-height);
+ border-radius: var(--n-scrollbar-border-radius);
  right: 0;
  `)])]), cM('vertical', `
  right: 4px;
  top: 2px;
  bottom: 2px;
- width: var(--scrollbar-width);
+ width: var(--n-scrollbar-width);
  `, [c('>', [cE('scrollbar', `
- width: var(--scrollbar-width);
- border-radius: var(--scrollbar-border-radius);
+ width: var(--n-scrollbar-width);
+ border-radius: var(--n-scrollbar-border-radius);
  bottom: 0;
  `)])]), cM('disabled', [c('>', [cE('scrollbar', {
   pointerEvents: 'none'
@@ -54,8 +54,8 @@ export default cB('scrollbar', `
  position: absolute;
  cursor: pointer;
  pointer-events: all;
- background-color: var(--scrollbar-color);
- transition: background-color .2s var(--scrollbar-bezier);
+ background-color: var(--n-scrollbar-color);
+ transition: background-color .2s var(--n-scrollbar-bezier);
  `, [fadeInTransition(), c('&:hover', {
-  backgroundColor: 'var(--scrollbar-color-hover)'
+  backgroundColor: 'var(--n-scrollbar-color-hover)'
 })])])])])]);

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

@@ -392,27 +392,27 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
     } | null>;
     style: import("vue").ComputedRef<({
-        '--height': string;
-        '--action-divider-color': string;
-        '--action-text-color': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--color': string;
-        '--option-font-size': string;
-        '--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;
-        '--option-text-color-active': string;
-        '--option-text-color-disabled': string;
-        '--option-text-color-pressed': string;
-        '--option-padding': string;
-        '--option-padding-left': string;
-        '--loading-color': string;
-        '--loading-size': string;
+        '--n-height': string;
+        '--n-action-divider-color': string;
+        '--n-action-text-color': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-color': string;
+        '--n-option-font-size': string;
+        '--n-group-header-text-color': string;
+        '--n-option-check-color': string;
+        '--n-option-color-pending': string;
+        '--n-option-color-active': string;
+        '--n-option-height': string;
+        '--n-option-opacity-disabled': string;
+        '--n-option-text-color': string;
+        '--n-option-text-color-active': string;
+        '--n-option-text-color-disabled': string;
+        '--n-option-text-color-pressed': string;
+        '--n-option-padding': string;
+        '--n-option-padding-left': string;
+        '--n-loading-color': string;
+        '--n-loading-size': string;
     } | {
         width: string | undefined;
     })[]>;

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

@@ -222,27 +222,27 @@ export default defineComponent({
             const { size } = props;
             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,
-                '--action-text-color': actionTextColor,
-                '--bezier': cubicBezierEaseInOut,
-                '--border-radius': borderRadius,
-                '--color': color,
-                '--option-font-size': fontSize,
-                '--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,
-                '--option-text-color-active': optionTextColorActive,
-                '--option-text-color-disabled': optionTextColorDisabled,
-                '--option-text-color-pressed': optionTextColorPressed,
-                '--option-padding': optionPadding,
-                '--option-padding-left': getPadding(optionPadding, 'left'),
-                '--loading-color': loadingColor,
-                '--loading-size': loadingSize
+                '--n-height': height,
+                '--n-action-divider-color': actionDividerColor,
+                '--n-action-text-color': actionTextColor,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-color': color,
+                '--n-option-font-size': fontSize,
+                '--n-group-header-text-color': groupHeaderTextColor,
+                '--n-option-check-color': optionCheckColor,
+                '--n-option-color-pending': optionColorPending,
+                '--n-option-color-active': optionColorActive,
+                '--n-option-height': optionHeight,
+                '--n-option-opacity-disabled': optionOpacityDisabled,
+                '--n-option-text-color': optionTextColor,
+                '--n-option-text-color-active': optionTextColorActive,
+                '--n-option-text-color-disabled': optionTextColorDisabled,
+                '--n-option-text-color-pressed': optionTextColorPressed,
+                '--n-option-padding': optionPadding,
+                '--n-option-padding-left': getPadding(optionPadding, 'left'),
+                '--n-loading-color': loadingColor,
+                '--n-loading-size': loadingSize
             };
         });
         const exposedProps = {

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

@@ -1,26 +1,26 @@
 import { c, cB, cE, cM, cNotM } from '../../../../_utils/cssr';
-import fadeInScaleUpTransition from '../../../../_styles/transitions/fade-in-scale-up.cssr'; // --loading-color
-// --loading-size
+import fadeInScaleUpTransition from '../../../../_styles/transitions/fade-in-scale-up.cssr'; // --n-loading-color
+// --n-loading-size
 
 export default cB('base-select-menu', `
  line-height: 1.5;
  outline: none;
  z-index: 0;
  position: relative;
- border-radius: var(--border-radius);
+ border-radius: var(--n-border-radius);
  transition:
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
- background-color: var(--color);
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
+ background-color: var(--n-color);
 `, [cM('multiple', [cB('base-select-option', `
  padding-right: 28px;
  `)]), cB('scrollbar', `
- max-height: var(--height);
+ max-height: var(--n-height);
  `), cB('virtual-list', `
- max-height: var(--height);
+ max-height: var(--n-height);
  `), cB('base-select-option', `
- min-height: var(--option-height);
- font-size: var(--option-font-size);
+ min-height: var(--n-option-height);
+ font-size: var(--n-option-font-size);
  display: flex;
  align-items: center;
  `, [cE('content', `
@@ -28,7 +28,7 @@ export default cB('base-select-menu', `
  text-overflow: ellipsis;
  overflow: hidden;
  `)]), cB('base-select-group-header', `
- min-height: var(--option-height);
+ min-height: var(--n-option-height);
  font-size: .93em;
  display: flex;
  align-items: center;
@@ -41,54 +41,54 @@ export default cB('base-select-menu', `
  flex: 1;
  justify-content: center;
  `), cE('loading', `
- color: var(--loading-color);
- font-size: var(--loading-size);
+ color: var(--n-loading-color);
+ font-size: var(--n-loading-size);
  `), cE('action', `
- padding: 8px var(--option-padding-left);
- font-size: var(--option-font-size);
+ padding: 8px var(--n-option-padding-left);
+ font-size: var(--n-option-font-size);
  transition: 
- color .3s var(--bezier);
- border-color .3s var(--bezier);
- border-top: 1px solid var(--action-divider-color);
- color: var(--action-text-color);
+ color .3s var(--n-bezier);
+ border-color .3s var(--n-bezier);
+ border-top: 1px solid var(--n-action-divider-color);
+ color: var(--n-action-text-color);
  `), cB('base-select-group-header', `
  position: relative;
  cursor: default;
- padding: var(--option-padding);
- color: var(--group-header-text-color);
+ padding: var(--n-option-padding);
+ color: var(--n-group-header-text-color);
  `), cB('base-select-option', `
  cursor: pointer;
  position: relative;
- padding: var(--option-padding);
+ padding: var(--n-option-padding);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier),
- opacity .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier);
  box-sizing: border-box;
- color: var(--option-text-color);
+ color: var(--n-option-text-color);
  opacity: 1;
  `, [c('&:active', `
- color: var(--option-text-color-pressed);
+ color: var(--n-option-text-color-pressed);
  `), cM('grouped', `
- padding-left: calc(var(--option-padding-left) * 1.5);
+ padding-left: calc(var(--n-option-padding-left) * 1.5);
  `), cM('pending', `
- background-color: var(--option-color-pending);
+ background-color: var(--n-option-color-pending);
  `), cM('selected', `
- color: var(--option-text-color-active);
- background-color: var(--option-color-active);
+ color: var(--n-option-text-color-active);
+ background-color: var(--n-option-color-active);
  `), cM('disabled', `
  cursor: not-allowed;
  `, [cNotM('selected', `
- color: var(--option-text-color-disabled);
+ color: var(--n-option-text-color-disabled);
  `), cM('selected', `
- opacity: var(--option-opacity-disabled);
+ opacity: var(--n-option-opacity-disabled);
  `)]), cE('check', `
  font-size: 16px;
  position: absolute;
  right: 8px;
  top: calc(50% - 7px);
- color: var(--option-check-color);
- transition: color .3s var(--bezier);
+ color: var(--n-option-check-color);
+ transition: color .3s var(--n-bezier);
  `, [fadeInScaleUpTransition({
   enterScale: '0.5'
 })])])]);

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

@@ -1,5 +1,5 @@
 export default {
-    height: 'calc(var(--option-height) * 7.6)',
+    height: 'calc(var(--n-option-height) * 7.6)',
     paddingSmall: '4px 0',
     paddingMedium: '4px 0',
     paddingLarge: '4px 0',

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

@@ -489,50 +489,50 @@ declare const _default: import("vue").DefineComponent<{
     getTail: () => HTMLElement | null;
     renderLabel: RenderLabelImpl;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--border': string;
-        '--border-active': string;
-        '--border-focus': string;
-        '--border-hover': string;
-        '--border-radius': string;
-        '--box-shadow-active': string;
-        '--box-shadow-focus': string;
-        '--box-shadow-hover': null;
-        '--caret-color': string;
-        '--color': string;
-        '--color-active': string;
-        '--color-disabled': string;
-        '--font-size': string;
-        '--height': string;
-        '--padding-single': string;
-        '--placeholder-color': string;
-        '--placeholder-color-disabled': string;
-        '--text-color': string;
-        '--text-color-disabled': string;
-        '--arrow-color': string;
-        '--arrow-color-disabled': string;
-        '--loading-color': string;
-        '--color-active-warning': string;
-        '--box-shadow-focus-warning': string;
-        '--box-shadow-active-warning': string;
-        '--box-shadow-hover-warning': null;
-        '--border-warning': string;
-        '--border-focus-warning': string;
-        '--border-hover-warning': string;
-        '--border-active-warning': string;
-        '--color-active-error': string;
-        '--box-shadow-focus-error': string;
-        '--box-shadow-active-error': string;
-        '--box-shadow-hover-error': null;
-        '--border-error': string;
-        '--border-focus-error': string;
-        '--border-hover-error': string;
-        '--border-active-error': string;
-        '--clear-size': string;
-        '--clear-color': string;
-        '--clear-color-hover': string;
-        '--clear-color-pressed': string;
-        '--arrow-size': string;
+        '--n-bezier': string;
+        '--n-border': string;
+        '--n-border-active': string;
+        '--n-border-focus': string;
+        '--n-border-hover': string;
+        '--n-border-radius': string;
+        '--n-box-shadow-active': string;
+        '--n-box-shadow-focus': string;
+        '--n-box-shadow-hover': null;
+        '--n-caret-color': string;
+        '--n-color': string;
+        '--n-color-active': string;
+        '--n-color-disabled': string;
+        '--n-font-size': string;
+        '--n-height': string;
+        '--n-padding-single': string;
+        '--n-placeholder-color': string;
+        '--n-placeholder-color-disabled': string;
+        '--n-text-color': string;
+        '--n-text-color-disabled': string;
+        '--n-arrow-color': string;
+        '--n-arrow-color-disabled': string;
+        '--n-loading-color': string;
+        '--n-color-active-warning': string;
+        '--n-box-shadow-focus-warning': string;
+        '--n-box-shadow-active-warning': string;
+        '--n-box-shadow-hover-warning': null;
+        '--n-border-warning': string;
+        '--n-border-focus-warning': string;
+        '--n-border-hover-warning': string;
+        '--n-border-active-warning': string;
+        '--n-color-active-error': string;
+        '--n-box-shadow-focus-error': string;
+        '--n-box-shadow-active-error': string;
+        '--n-box-shadow-hover-error': null;
+        '--n-border-error': string;
+        '--n-border-focus-error': string;
+        '--n-border-hover-error': string;
+        '--n-border-active-error': string;
+        '--n-clear-size': string;
+        '--n-clear-color': string;
+        '--n-clear-color-hover': string;
+        '--n-clear-color-pressed': string;
+        '--n-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;