naive-ui 2.22.0 → 2.24.0

package/es/drawer/src/Drawer.js

@@ -1,9 +1,9 @@
-import { h, defineComponent, computed, provide, withDirectives, Transition } from 'vue';
+import { h, defineComponent, computed, provide, withDirectives, Transition, watchEffect } from 'vue';
 import { VLazyTeleport } from 'vueuc';
 import { zindexable } from 'vdirs';
 import { useIsMounted } from 'vooks';
 import { useTheme, useConfig } from '../../_mixins';
-import { warn, formatLength, call } from '../../_utils';
+import { formatLength, call, warnOnce } from '../../_utils';
 import { drawerLight } from '../styles';
 import NDrawerBodyWrapper from './DrawerBodyWrapper';
 import { drawerInjectionKey } from './interface';
@@ -26,56 +26,33 @@ const drawerProps = Object.assign(Object.assign({}, useTheme.props), { show: Boo
     }, nativeScrollbar: {
         type: Boolean,
         default: true
-    }, onMaskClick: Function, scrollbarProps: Object, contentStyle: [Object, String], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 
+    }, zIndex: Number, onMaskClick: Function, scrollbarProps: Object, contentStyle: [Object, String], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 
     /** @deprecated */
-    drawerStyle: {
-        type: [Object, String],
-        validator: process.env.NODE_ENV !== 'production'
-            ? () => {
-                warn('drawer', '`drawer-style` is deprecated, please use `style` instead.');
-                return true;
-            }
-            : undefined,
-        default: undefined
-    }, 
-    /** @deprecated */
-    drawerClass: {
-        type: String,
-        validator: process.env.NODE_ENV !== 'production'
-            ? () => {
-                warn('drawer', '`drawer-class` is deprecated, please use `class` instead.');
-                return true;
-            }
-            : undefined,
-        default: undefined
-    }, target: {
-        validator: process.env.NODE_ENV !== 'production'
-            ? () => {
-                warn('drawer', '`target` is deprecated, please use `to` instead.');
-                return true;
-            }
-            : undefined,
-        default: undefined
-    }, onShow: {
-        type: [Function, Array],
-        validator: () => {
-            warn('drawer', '`on-show` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    }, onHide: {
-        type: [Function, Array],
-        validator: () => {
-            warn('drawer', '`on-hide` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    } });
+    drawerStyle: [String, Object], drawerClass: String, target: null, onShow: Function, onHide: Function });
 export default defineComponent({
     name: 'Drawer',
     inheritAttrs: false,
     props: drawerProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.drawerStyle !== undefined) {
+                    warnOnce('drawer', '`drawer-style` is deprecated, please use `style` instead.');
+                }
+                if (props.drawerClass !== undefined) {
+                    warnOnce('drawer', '`drawer-class` is deprecated, please use `class` instead.');
+                }
+                if (props.target !== undefined) {
+                    warnOnce('drawer', '`target` is deprecated, please use `to` instead.');
+                }
+                if (props.onShow !== undefined) {
+                    warnOnce('drawer', '`on-show` is deprecated, please use `on-update:show` instead.');
+                }
+                if (props.onHide !== undefined) {
+                    warnOnce('drawer', '`on-hide` is deprecated, please use `on-update:show` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
         const isMountedRef = useIsMounted();
         const themeRef = useTheme('Drawer', 'Drawer', style, drawerLight, props, mergedClsPrefixRef);
@@ -110,6 +87,11 @@ export default defineComponent({
             if (onMaskClick)
                 onMaskClick(e);
         }
+        function handleKeydown(e) {
+            if (e.code === 'Escape') {
+                doUpdateShow(false);
+            }
+        }
         function doUpdateShow(show) {
             const { onHide, onUpdateShow, 'onUpdate:show': _onUpdateShow } = props;
             if (onUpdateShow)
@@ -131,29 +113,30 @@ export default defineComponent({
             namespace: namespaceRef,
             mergedBodyStyle: mergedBodyStyleRef,
             handleMaskClick,
+            handleKeydown,
             mergedTheme: themeRef,
             cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { color, textColor, boxShadow, lineHeight, headerPadding, footerPadding, bodyPadding, titleFontSize, titleTextColor, titleFontWeight, headerBorderBottom, footerBorderTop, closeColor, closeColorHover, closeColorPressed, closeSize } } = themeRef.value;
                 return {
-                    '--line-height': lineHeight,
-                    '--color': color,
-                    '--text-color': textColor,
-                    '--box-shadow': boxShadow,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--bezier-out': cubicBezierEaseOut,
-                    '--bezier-in': cubicBezierEaseIn,
-                    '--header-padding': headerPadding,
-                    '--body-padding': bodyPadding,
-                    '--footer-padding': footerPadding,
-                    '--title-text-color': titleTextColor,
-                    '--title-font-size': titleFontSize,
-                    '--title-font-weight': titleFontWeight,
-                    '--header-border-bottom': headerBorderBottom,
-                    '--footer-border-top': footerBorderTop,
-                    '--close-color': closeColor,
-                    '--close-color-hover': closeColorHover,
-                    '--close-color-pressed': closeColorPressed,
-                    '--close-size': closeSize
+                    '--n-line-height': lineHeight,
+                    '--n-color': color,
+                    '--n-text-color': textColor,
+                    '--n-box-shadow': boxShadow,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-bezier-out': cubicBezierEaseOut,
+                    '--n-bezier-in': cubicBezierEaseIn,
+                    '--n-header-padding': headerPadding,
+                    '--n-body-padding': bodyPadding,
+                    '--n-footer-padding': footerPadding,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-header-border-bottom': headerBorderBottom,
+                    '--n-footer-border-top': footerBorderTop,
+                    '--n-close-color': closeColor,
+                    '--n-close-color-hover': closeColorHover,
+                    '--n-close-color-pressed': closeColorPressed,
+                    '--n-close-size': closeSize
                 };
             }),
             isMounted: isMountedRef
@@ -163,11 +146,11 @@ export default defineComponent({
         const { mergedClsPrefix } = this;
         return (h(VLazyTeleport, { to: this.to, show: this.show }, {
             default: () => {
-                return withDirectives(h("div", { class: [`${mergedClsPrefix}-drawer-container`, this.namespace], style: this.cssVars },
+                return withDirectives(h("div", { class: [`${mergedClsPrefix}-drawer-container`, this.namespace], style: this.cssVars, onKeydown: this.handleKeydown, role: "none" },
                     h(Transition, { name: "fade-in-transition", appear: this.isMounted }, {
-                        default: () => this.show ? (h("div", { class: `${mergedClsPrefix}-drawer-mask`, onClick: this.handleMaskClick })) : null
+                        default: () => this.show ? (h("div", { "aria-hidden": true, class: `${mergedClsPrefix}-drawer-mask`, onClick: this.handleMaskClick })) : null
                     }),
-                    h(NDrawerBodyWrapper, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar }), this.$slots)), [[zindexable, { enabled: this.show }]]);
+                    h(NDrawerBodyWrapper, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar }), this.$slots)), [[zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
             }
         }));
     }

package/es/drawer/src/DrawerBodyWrapper.js

@@ -1,4 +1,5 @@
 import { h, Transition, defineComponent, ref, computed, watchEffect, provide, inject, withDirectives, vShow, mergeProps } from 'vue';
+import { VFocusTrap } from 'vueuc';
 import { NScrollbar } from '../../_internal';
 import { popoverBodyInjectionKey } from '../../popover/src/interface';
 import { modalBodyInjectionKey } from '../../modal/src/interface';
@@ -61,19 +62,26 @@ export default defineComponent({
     render() {
         const { $slots, mergedClsPrefix } = this;
         return this.displayDirective === 'show' || this.displayed || this.show
-            ? withDirectives(h("div", null,
-                h(Transition, { name: this.transitionName, appear: this.isMounted, onAfterLeave: this.handleAfterLeave }, {
-                    default: () => withDirectives(h('div', mergeProps(this.$attrs, {
-                        ref: 'bodyRef',
-                        class: [
-                            `${mergedClsPrefix}-drawer`,
-                            `${mergedClsPrefix}-drawer--${this.placement}-placement`,
-                            this.nativeScrollbar &&
-                                `${mergedClsPrefix}-drawer--native-scrollbar`
-                        ]
-                    }), [
-                        this.nativeScrollbar ? (h("div", { class: `${mergedClsPrefix}-drawer-content-wrapper`, style: this.contentStyle }, $slots)) : (h(NScrollbar, Object.assign({}, this.scrollbarProps, { contentStyle: this.contentStyle, contentClass: `${mergedClsPrefix}-drawer-content-wrapper`, theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar }), $slots))
-                    ]), [[vShow, this.show]])
+            ? withDirectives(
+            /* Keep the wrapper dom. Make sure the drawer has a host.
+              Nor the detached content will disappear without transition */
+            h("div", { role: "none" },
+                h(VFocusTrap, { active: this.show, focusFirstDescendant: true }, {
+                    default: () => (h(Transition, { name: this.transitionName, appear: this.isMounted, onAfterLeave: this.handleAfterLeave }, {
+                        default: () => withDirectives(h('div', mergeProps(this.$attrs, {
+                            role: 'dialog',
+                            ref: 'bodyRef',
+                            'aria-modal': 'true',
+                            class: [
+                                `${mergedClsPrefix}-drawer`,
+                                `${mergedClsPrefix}-drawer--${this.placement}-placement`,
+                                this.nativeScrollbar &&
+                                    `${mergedClsPrefix}-drawer--native-scrollbar`
+                            ]
+                        }), [
+                            this.nativeScrollbar ? (h("div", { class: `${mergedClsPrefix}-drawer-content-wrapper`, style: this.contentStyle, role: "none" }, $slots)) : (h(NScrollbar, Object.assign({}, this.scrollbarProps, { contentStyle: this.contentStyle, contentClass: `${mergedClsPrefix}-drawer-content-wrapper`, theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar }), $slots))
+                        ]), [[vShow, this.show]])
+                    }))
                 })), [
                 [
                     vShow,

package/es/drawer/src/DrawerContent.js

@@ -34,16 +34,16 @@ export default defineComponent({
     },
     render() {
         const { title, mergedClsPrefix, nativeScrollbar, mergedTheme, bodyStyle, bodyContentStyle, headerStyle, footerStyle, scrollbarProps, closable, $slots } = this;
-        return (h("div", { class: [
+        return (h("div", { role: "none", class: [
                 `${mergedClsPrefix}-drawer-content`,
                 nativeScrollbar &&
                     `${mergedClsPrefix}-drawer-content--native-scrollbar`
             ] },
-            $slots.header || title || closable ? (h("div", { class: `${mergedClsPrefix}-drawer-header`, style: headerStyle },
-                h("div", { class: `${mergedClsPrefix}-drawer-header__main` }, $slots.header !== undefined ? $slots.header() : title),
+            $slots.header || title || closable ? (h("div", { class: `${mergedClsPrefix}-drawer-header`, style: headerStyle, role: "none" },
+                h("div", { class: `${mergedClsPrefix}-drawer-header__main`, role: "heading", "aria-level": "1" }, $slots.header !== undefined ? $slots.header() : title),
                 closable && (h(NBaseClose, { onClick: this.handleCloseClick, clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-drawer-header__close` })))) : null,
-            nativeScrollbar ? (h("div", { class: `${mergedClsPrefix}-drawer-body`, style: bodyStyle },
-                h("div", { class: `${mergedClsPrefix}-drawer-body-content-wrapper`, style: bodyContentStyle }, $slots))) : (h(NScrollbar, Object.assign({ themeOverrides: mergedTheme.peerOverrides.Scrollbar, theme: mergedTheme.peers.Scrollbar }, scrollbarProps, { class: `${mergedClsPrefix}-drawer-body`, contentClass: `${mergedClsPrefix}-drawer-body-content-wrapper`, contentStyle: bodyContentStyle }), $slots)),
-            $slots.footer ? (h("div", { class: `${mergedClsPrefix}-drawer-footer`, style: footerStyle }, $slots.footer())) : null));
+            nativeScrollbar ? (h("div", { class: `${mergedClsPrefix}-drawer-body`, style: bodyStyle, role: "none" },
+                h("div", { class: `${mergedClsPrefix}-drawer-body-content-wrapper`, style: bodyContentStyle, role: "none" }, $slots))) : (h(NScrollbar, Object.assign({ themeOverrides: mergedTheme.peerOverrides.Scrollbar, theme: mergedTheme.peers.Scrollbar }, scrollbarProps, { class: `${mergedClsPrefix}-drawer-body`, contentClass: `${mergedClsPrefix}-drawer-body-content-wrapper`, contentStyle: bodyContentStyle }), $slots)),
+            $slots.footer ? (h("div", { class: `${mergedClsPrefix}-drawer-footer`, style: footerStyle, role: "none" }, $slots.footer())) : null));
     }
 });

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

@@ -4,36 +4,36 @@ import slideInFromLeftTransition from '../../../_styles/transitions/slide-in-fro
 import slideInFromTopTransition from '../../../_styles/transitions/slide-in-from-top';
 import slideInFromBottomTransition from '../../../_styles/transitions/slide-in-from-bottom';
 import fadeInTransition from '../../../_styles/transitions/fade-in.cssr'; // vars:
-// --line-height
-// --color
-// --text-color
-// --box-shadow
-// --bezier
-// --bezier-out
-// --bezier-in
-// --body-padding
-// --header-padding
-// --footer-padding
-// --title-font-size
-// --title-text-color
-// --title-font-weight
-// --header-border-bottom
-// --footer-border-top
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --close-size
+// --n-line-height
+// --n-color
+// --n-text-color
+// --n-box-shadow
+// --n-bezier
+// --n-bezier-out
+// --n-bezier-in
+// --n-body-padding
+// --n-header-padding
+// --n-footer-padding
+// --n-title-font-size
+// --n-title-text-color
+// --n-title-font-weight
+// --n-header-border-bottom
+// --n-footer-border-top
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-close-size
 
 export default c([cB('drawer', `
- line-height: var(--line-height);
+ line-height: var(--n-line-height);
  position: absolute;
  pointer-events: all;
- box-shadow: var(--box-shadow);
+ box-shadow: var(--n-box-shadow);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
- background-color: var(--color);
- color: var(--text-color);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ background-color: var(--n-color);
+ color: var(--n-text-color);
  box-sizing: border-box;
  `, [slideInFromRightTransition(), slideInFromLeftTransition(), slideInFromTopTransition(), slideInFromBottomTransition(), cM('native-scrollbar', [cB('drawer-content-wrapper', `
  overflow: auto;
@@ -49,30 +49,31 @@ export default c([cB('drawer', `
  overflow: auto;
  `)]), cB('drawer-body', `
  flex: 1 0 0;
+ overflow: hidden;
  `), cB('drawer-body-content-wrapper', `
  box-sizing: border-box;
- padding: var(--body-padding);
+ padding: var(--n-body-padding);
  `), cB('drawer-header', `
- font-weight: var(--title-font-weight);
+ font-weight: var(--n-title-font-weight);
  line-height: 1;
- font-size: var(--title-font-size);
- color: var(--title-text-color);
- padding: var(--header-padding);
- transition: border .3s var(--bezier);
- border-bottom: 1px solid var(--divider-color);
- border-bottom: var(--header-border-bottom);
+ font-size: var(--n-title-font-size);
+ color: var(--n-title-text-color);
+ padding: var(--n-header-padding);
+ transition: border .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-divider-color);
+ border-bottom: var(--n-header-border-bottom);
  display: flex;
  justify-content: space-between;
  align-items: center;
  `, [cE('close', `
- transition: color .3s var(--bezier);
- font-size: var(--close-size);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-close-size);
  `)]), cB('drawer-footer', `
  display: flex;
  justify-content: flex-end;
- border-top: var(--footer-border-top);
- transition: border .3s var(--bezier);
- padding: var(--footer-padding);
+ border-top: var(--n-footer-border-top);
+ transition: border .3s var(--n-bezier);
+ padding: var(--n-footer-padding);
  `)]), cM('right-placement', `
  top: 0;
  bottom: 0;
@@ -111,6 +112,6 @@ export default c([cB('drawer', `
  `, [fadeInTransition({
   enterDuration: '0.2s',
   leaveDuration: '0.2s',
-  enterCubicBezier: 'var(--bezier-in)',
-  leaveCubicBezier: 'var(--bezier-out)'
+  enterCubicBezier: 'var(--n-bezier-in)',
+  leaveCubicBezier: 'var(--n-bezier-out)'
 })])]);

package/es/dropdown/src/Dropdown.d.ts

@@ -321,6 +321,7 @@ declare const dropdownProps: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    readonly internalTrapFocus: BooleanConstructor;
     readonly onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly arrow: {
@@ -633,6 +634,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    readonly internalTrapFocus: BooleanConstructor;
     readonly onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly arrow: {
@@ -871,6 +873,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly to?: unknown;
     readonly internalSyncTargetWithParent?: unknown;
     readonly internalInheritedEventHandlers?: unknown;
+    readonly internalTrapFocus?: unknown;
     readonly onShow?: unknown;
     readonly onHide?: unknown;
     readonly arrow?: unknown;
@@ -889,6 +892,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
@@ -1146,6 +1150,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];

package/es/dropdown/src/Dropdown.js

@@ -235,46 +235,48 @@ export default defineComponent({
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                 const { padding, dividerColor, borderRadius, optionOpacityDisabled, [createKey('optionIconSuffixWidth', size)]: optionIconSuffixWidth, [createKey('optionSuffixWidth', size)]: optionSuffixWidth, [createKey('optionIconPrefixWidth', size)]: optionIconPrefixWidth, [createKey('optionPrefixWidth', size)]: optionPrefixWidth, [createKey('fontSize', size)]: fontSize, [createKey('optionHeight', size)]: optionHeight, [createKey('optionIconSize', size)]: optionIconSize } = self;
                 const vars = {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--padding': padding,
-                    '--border-radius': borderRadius,
-                    '--option-height': optionHeight,
-                    '--option-prefix-width': optionPrefixWidth,
-                    '--option-icon-prefix-width': optionIconPrefixWidth,
-                    '--option-suffix-width': optionSuffixWidth,
-                    '--option-icon-suffix-width': optionIconSuffixWidth,
-                    '--option-icon-size': optionIconSize,
-                    '--divider-color': dividerColor,
-                    '--option-opacity-disabled': optionOpacityDisabled
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-padding': padding,
+                    '--n-border-radius': borderRadius,
+                    '--n-option-height': optionHeight,
+                    '--n-option-prefix-width': optionPrefixWidth,
+                    '--n-option-icon-prefix-width': optionIconPrefixWidth,
+                    '--n-option-suffix-width': optionSuffixWidth,
+                    '--n-option-icon-suffix-width': optionIconSuffixWidth,
+                    '--n-option-icon-size': optionIconSize,
+                    '--n-divider-color': dividerColor,
+                    '--n-option-opacity-disabled': optionOpacityDisabled
                 };
                 // writing like this is the fastest method
                 if (inverted) {
-                    vars['--color'] = self.colorInverted;
-                    vars['--option-color-hover'] = self.optionColorHoverInverted;
-                    vars['--option-color-active'] = self.optionColorActiveInverted;
-                    vars['--option-text-color'] = self.optionTextColorInverted;
-                    vars['--option-text-color-hover'] = self.optionTextColorHoverInverted;
-                    vars['--option-text-color-active'] =
+                    vars['--n-color'] = self.colorInverted;
+                    vars['--n-option-color-hover'] = self.optionColorHoverInverted;
+                    vars['--n-option-color-active'] = self.optionColorActiveInverted;
+                    vars['--n-option-text-color'] = self.optionTextColorInverted;
+                    vars['--n-option-text-color-hover'] =
+                        self.optionTextColorHoverInverted;
+                    vars['--n-option-text-color-active'] =
                         self.optionTextColorActiveInverted;
-                    vars['--option-text-color-child-active'] =
+                    vars['--n-option-text-color-child-active'] =
                         self.optionTextColorChildActiveInverted;
-                    vars['--prefix-color'] = self.prefixColorInverted;
-                    vars['--suffix-color'] = self.suffixColorInverted;
-                    vars['--group-header-text-color'] = self.groupHeaderTextColorInverted;
+                    vars['--n-prefix-color'] = self.prefixColorInverted;
+                    vars['--n-suffix-color'] = self.suffixColorInverted;
+                    vars['--n-group-header-text-color'] =
+                        self.groupHeaderTextColorInverted;
                 }
                 else {
-                    vars['--color'] = self.color;
-                    vars['--option-color-hover'] = self.optionColorHover;
-                    vars['--option-color-active'] = self.optionColorActive;
-                    vars['--option-text-color'] = self.optionTextColor;
-                    vars['--option-text-color-hover'] = self.optionTextColorHover;
-                    vars['--option-text-color-active'] = self.optionTextColorActive;
-                    vars['--option-text-color-child-active'] =
+                    vars['--n-color'] = self.color;
+                    vars['--n-option-color-hover'] = self.optionColorHover;
+                    vars['--n-option-color-active'] = self.optionColorActive;
+                    vars['--n-option-text-color'] = self.optionTextColor;
+                    vars['--n-option-text-color-hover'] = self.optionTextColorHover;
+                    vars['--n-option-text-color-active'] = self.optionTextColorActive;
+                    vars['--n-option-text-color-child-active'] =
                         self.optionTextColorChildActive;
-                    vars['--prefix-color'] = self.prefixColor;
-                    vars['--suffix-color'] = self.suffixColor;
-                    vars['--group-header-text-color'] = self.groupHeaderTextColor;
+                    vars['--n-prefix-color'] = self.prefixColor;
+                    vars['--n-suffix-color'] = self.suffixColor;
+                    vars['--n-group-header-text-color'] = self.groupHeaderTextColor;
                 }
                 return vars;
             })

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

@@ -1,38 +1,38 @@
 import { c, cB, cM, cE, cNotM } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --bezier
-// --font-size
-// --padding
-// --border-radius
-// --option-height
-// --option-prefix-width
-// --option-icon-prefix-width
-// --option-suffix-width
-// --option-icon-suffix-width
-// --color
-// --option-color-hover
-// --option-color-active
-// --divider-color
-// --option-text-color
-// --option-text-color-hover
-// --option-text-color-active
-// --option-text-color-child-active
-// --prefix-color
-// --suffix-color
-// --option-icon-size
-// --option-opacity-disabled
+// --n-bezier
+// --n-font-size
+// --n-padding
+// --n-border-radius
+// --n-option-height
+// --n-option-prefix-width
+// --n-option-icon-prefix-width
+// --n-option-suffix-width
+// --n-option-icon-suffix-width
+// --n-color
+// --n-option-color-hover
+// --n-option-color-active
+// --n-divider-color
+// --n-option-text-color
+// --n-option-text-color-hover
+// --n-option-text-color-active
+// --n-option-text-color-child-active
+// --n-prefix-color
+// --n-suffix-color
+// --n-option-icon-size
+// --n-option-opacity-disabled
 // shared with popover
-// --box-shadow
+// --n-box-shadow
 
 export default cB('dropdown-menu', `
  transform-origin: inherit;
- padding: var(--padding);
- background-color: var(--color);
- border-radius: var(--border-radius);
- box-shadow: var(--box-shadow);
+ padding: var(--n-padding);
+ background-color: var(--n-color);
+ border-radius: var(--n-border-radius);
+ box-shadow: var(--n-box-shadow);
  transition:
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
 `, [fadeInScaleUpTransition(), cB('dropdown-option', `
  position: relative;
  `, [c('a', `
@@ -48,48 +48,48 @@ export default cB('dropdown-menu', `
  `)]), cB('dropdown-option-body', `
  display: flex;
  cursor: pointer;
- height: var(--option-height);
- line-height: var(--option-height);
- font-size: var(--font-size);
- color: var(--option-text-color);
+ height: var(--n-option-height);
+ line-height: var(--n-option-height);
+ font-size: var(--n-font-size);
+ color: var(--n-option-text-color);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  `, [cM('pending', [cNotM('disabled', {
-  color: 'var(--option-text-color-hover)',
-  backgroundColor: 'var(--option-color-hover)'
+  color: 'var(--n-option-text-color-hover)',
+  backgroundColor: 'var(--n-option-color-hover)'
 }), cE('prefix, suffix', {
-  color: 'var(--option-text-color-hover)'
+  color: 'var(--n-option-text-color-hover)'
 })]), cM('active', [cNotM('disabled', {
-  color: 'var(--option-text-color-active)',
-  backgroundColor: 'var(--option-color-active)'
+  color: 'var(--n-option-text-color-active)',
+  backgroundColor: 'var(--n-option-color-active)'
 }), cE('prefix, suffix', {
-  color: 'var(--option-text-color-active)'
+  color: 'var(--n-option-text-color-active)'
 })]), cM('disabled', {
   cursor: 'not-allowed',
-  opacity: 'var(--option-opacity-disabled)'
+  opacity: 'var(--n-option-opacity-disabled)'
 }), cM('child-active', {
-  color: 'var(--option-text-color-child-active)'
+  color: 'var(--n-option-text-color-child-active)'
 }, [cE('prefix, suffix', {
-  color: 'var(--option-text-color-child-active)'
+  color: 'var(--n-option-text-color-child-active)'
 })]), cM('group', {
-  fontSize: 'calc(var(--font-size) - 1px)',
-  color: 'var(--group-header-text-color)'
+  fontSize: 'calc(var(--n-font-size) - 1px)',
+  color: 'var(--n-group-header-text-color)'
 }, [cE('prefix', {
-  width: 'calc(var(--option-prefix-width) / 2)'
+  width: 'calc(var(--n-option-prefix-width) / 2)'
 }, [cM('show-icon', {
-  width: 'calc(var(--option-icon-prefix-width) / 2)'
+  width: 'calc(var(--n-option-icon-prefix-width) / 2)'
 })])]), cE('prefix', `
- width: var(--option-prefix-width);
+ width: var(--n-option-prefix-width);
  display: flex;
  justify-content: center;
  align-items: center;
- color: var(--prefix-color);
- transition: color .3s var(--bezier);
+ color: var(--n-prefix-color);
+ transition: color .3s var(--n-bezier);
  `, [cM('show-icon', {
-  width: 'var(--option-icon-prefix-width)'
+  width: 'var(--n-option-icon-prefix-width)'
 }), cB('icon', {
-  fontSize: 'var(--option-icon-size)'
+  fontSize: 'var(--n-option-icon-size)'
 })]), cE('label', {
   whiteSpace: 'nowrap',
   flex: 1
@@ -100,14 +100,14 @@ export default cB('dropdown-menu', `
  display: flex;
  justify-content: flex-end;
  align-items: center;
- min-width: var(--option-suffix-width);
+ min-width: var(--n-option-suffix-width);
  padding: 0 8px;
- transition: color .3s var(--bezier);
- color: var(--suffix-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-suffix-color);
  `, [cM('has-submenu', {
-  width: 'var(--option-icon-suffix-width)'
+  width: 'var(--n-option-icon-suffix-width)'
 }), cB('icon', {
-  fontSize: 'var(--option-icon-size)'
+  fontSize: 'var(--n-option-icon-size)'
 })]), cB('dropdown-menu', {
   pointerEvents: 'all'
 })]), cB('dropdown-offset-container', `
@@ -118,8 +118,8 @@ export default cB('dropdown-menu', `
  top: -4px;
  bottom: -4px;
  `)]), cB('dropdown-divider', `
- transition: background-color .3s var(--bezier);
- background-color: var(--divider-color);
+ transition: background-color .3s var(--n-bezier);
+ background-color: var(--n-divider-color);
  height: 1px;
  margin: 4px 0;
  `), cB('dropdown-menu-wrapper', `