naive-ui 2.23.1 → 2.23.2

package/es/table/src/Table.js

@@ -28,27 +28,27 @@ export default defineComponent({
                 const { size } = props;
                 const { self: { borderColor, tdColor, tdColorModal, tdColorPopover, thColor, thColorModal, thColorPopover, thTextColor, tdTextColor, borderRadius, thFontWeight, lineHeight, borderColorModal, borderColorPopover, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [createKey('fontSize', size)]: fontSize, [createKey('tdPadding', size)]: tdPadding, [createKey('thPadding', size)]: thPadding }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--td-color': tdColor,
-                    '--td-color-modal': tdColorModal,
-                    '--td-color-popover': tdColorPopover,
-                    '--td-text-color': tdTextColor,
-                    '--border-color': borderColor,
-                    '--border-color-modal': borderColorModal,
-                    '--border-color-popover': borderColorPopover,
-                    '--border-radius': borderRadius,
-                    '--font-size': fontSize,
-                    '--th-color': thColor,
-                    '--th-color-modal': thColorModal,
-                    '--th-color-popover': thColorPopover,
-                    '--th-font-weight': thFontWeight,
-                    '--th-text-color': thTextColor,
-                    '--line-height': lineHeight,
-                    '--td-padding': tdPadding,
-                    '--th-padding': thPadding,
-                    '--td-color-striped': tdColorStriped,
-                    '--td-color-striped-modal': tdColorStripedModal,
-                    '--td-color-striped-popover': tdColorStripedPopover
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-td-color': tdColor,
+                    '--n-td-color-modal': tdColorModal,
+                    '--n-td-color-popover': tdColorPopover,
+                    '--n-td-text-color': tdTextColor,
+                    '--n-border-color': borderColor,
+                    '--n-border-color-modal': borderColorModal,
+                    '--n-border-color-popover': borderColorPopover,
+                    '--n-border-radius': borderRadius,
+                    '--n-font-size': fontSize,
+                    '--n-th-color': thColor,
+                    '--n-th-color-modal': thColorModal,
+                    '--n-th-color-popover': thColorPopover,
+                    '--n-th-font-weight': thFontWeight,
+                    '--n-th-text-color': thTextColor,
+                    '--n-line-height': lineHeight,
+                    '--n-td-padding': tdPadding,
+                    '--n-th-padding': thPadding,
+                    '--n-td-color-striped': tdColorStriped,
+                    '--n-td-color-striped-modal': tdColorStripedModal,
+                    '--n-td-color-striped-popover': tdColorStripedPopover
                 };
             })
         };

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

@@ -1,73 +1,73 @@
 import { c, cB, cM, cNotM, insideModal, insidePopover } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --td-color
-// --td-color-modal
-// --td-color-popover
-// --td-text-color
-// --border-color
-// --border-color-modal
-// --border-color-popover
-// --border-radius
-// --font-size
-// --th-color
-// --th-color-modal
-// --th-color-popover
-// --th-font-weight
-// --th-text-color
-// --line-height
-// --td-padding
-// --th-padding
+// --n-bezier
+// --n-td-color
+// --n-td-color-modal
+// --n-td-color-popover
+// --n-td-text-color
+// --n-border-color
+// --n-border-color-modal
+// --n-border-color-popover
+// --n-border-radius
+// --n-font-size
+// --n-th-color
+// --n-th-color-modal
+// --n-th-color-popover
+// --n-th-font-weight
+// --n-th-text-color
+// --n-line-height
+// --n-td-padding
+// --n-th-padding
 
 export default c([cB('table', `
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  font-variant-numeric: tabular-nums;
- line-height: var(--line-height);
+ line-height: var(--n-line-height);
  width: 100%;
- border-radius: var(--border-radius) var(--border-radius) 0 0;
+ border-radius: var(--n-border-radius) var(--n-border-radius) 0 0;
  text-align: left;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
- background-color: var(--td-color);
+ background-color: var(--n-td-color);
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier),
- color .3s var(--bezier);
- --merged-border-color: var(--border-color);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ --n-merged-border-color: var(--n-border-color);
  `, [c('th', `
  white-space: nowrap;
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier),
- color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  text-align: inherit;
- padding: var(--th-padding);
+ padding: var(--n-th-padding);
  vertical-align: inherit;
  text-transform: none;
  border: none;
- font-weight: var(--th-font-weight);
- color: var(--th-text-color);
- background-color: var(--th-color);
- border-color: var(--merged-border-color);
- border-bottom: 1px solid var(--merged-border-color);
- border-right: 1px solid var(--merged-border-color);
+ font-weight: var(--n-th-font-weight);
+ color: var(--n-th-text-color);
+ background-color: var(--n-th-color);
+ border-color: var(--n-merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
+ border-right: 1px solid var(--n-merged-border-color);
  `, [c('&:last-child', `
  border-right: none;
  `)]), c('td', `
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier),
- color .3s var(--bezier);
- padding: var(--td-padding);
- color: var(--td-text-color);
- background-color: var(--td-color);
- border-right: 1px solid var(--merged-border-color);
- border-bottom: 1px solid var(--merged-border-color);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ padding: var(--n-td-padding);
+ color: var(--n-td-text-color);
+ background-color: var(--n-td-color);
+ border-right: 1px solid var(--n-merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
  `, [c('&:last-child', `
  border-right: none;
  `)]), cM('bordered', `
- border: 1px solid var(--merged-border-color);
- border-radius: var(--border-radius);
+ border: 1px solid var(--n-merged-border-color);
+ border-radius: var(--n-border-radius);
  `, [c('tr', [c('&:last-child', [c('td', `
  border-bottom: none;
  `)])])]), cM('single-line', [c('th', `
@@ -76,20 +76,20 @@ export default c([cB('table', `
  border-right: none;
  `)]), cM('single-column', [c('tr', [c('&:not(:last-child)', [c('td', `
  border-bottom: none;
- `)])])]), cM('striped', [c('tr:nth-of-type(even)', [c('td', 'background-color: var(--td-color-striped)')])]), cNotM('bottom-bordered', [c('tr', [c('&:last-child', [c('td', `
+ `)])])]), cM('striped', [c('tr:nth-of-type(even)', [c('td', 'background-color: var(--n-td-color-striped)')])]), cNotM('bottom-bordered', [c('tr', [c('&:last-child', [c('td', `
  border-bottom: none;
  `)])])])]), insideModal(cB('table', `
- background-color: var(--td-color-modal);
- --merged-border-color: var(--border-color-modal);
+ background-color: var(--n-td-color-modal);
+ --n-merged-border-color: var(--n-border-color-modal);
  `, [c('th', `
- background-color: var(--th-color-modal);
+ background-color: var(--n-th-color-modal);
  `), c('td', `
- background-color: var(--td-color-modal);
+ background-color: var(--n-td-color-modal);
  `)])), insidePopover(cB('table', `
- background-color: var(--td-color-popover);
- --merged-border-color: var(--border-color-popover);
+ background-color: var(--n-td-color-popover);
+ --n-merged-border-color: var(--n-border-color-popover);
  `, [c('th', `
- background-color: var(--th-color-popover);
+ background-color: var(--n-th-color-popover);
  `), c('td', `
- background-color: var(--td-color-popover);
+ background-color: var(--n-td-color-popover);
  `)]))]);

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

@@ -51,8 +51,11 @@ export default cB('tabs', `
  justify-content: center;
  `, [cM('active', `
  font-weight: var(--font-weight-strong);
+ color: var(--tab-text-color-active);
  background-color: var(--tab-color-segment);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .08);
+ `), c('&:hover', `
+ color: var(--tab-text-color-hover);
  `)])])]), cM('flex', [cB('tabs-nav', {
   width: '100%'
 }, [cB('tabs-wrapper', {
@@ -196,7 +199,7 @@ export default cB('tabs', `
  padding-right: 8px;
  font-size: 16px;
  `, [cNotM('disabled', [c('&:hover', `
- color: var(--tab-text-color-active);
+ color: var(--tab-text-color-hover);
  `)])]), cM('closable', 'padding-right: 6px;'), cM('active', `
  border-bottom: 1px solid #0000;
  background-color: #0000;

package/es/tabs/styles/light.js

@@ -2,7 +2,7 @@ import sizeVariables from './_common';
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
     const { textColor2, primaryColor, textColorDisabled, closeColor, closeColorHover, closeColorPressed, tabColor, baseColor, dividerColor, fontWeight, textColor1, borderRadius, fontSize, fontWeightStrong } = vars;
-    return Object.assign(Object.assign({}, sizeVariables), { colorSegment: tabColor, tabFontSizeCard: fontSize, tabTextColorLine: textColor1, tabTextColorActiveLine: primaryColor, tabTextColorHoverLine: primaryColor, tabTextColorDisabledLine: textColorDisabled, tabTextColorSegment: textColor1, tabTextColorActiveSegment: primaryColor, tabTextColorHoverSegment: primaryColor, tabTextColorDisabledSegment: textColorDisabled, tabTextColorBar: textColor1, tabTextColorActiveBar: primaryColor, tabTextColorHoverBar: primaryColor, tabTextColorDisabledBar: textColorDisabled, tabTextColorCard: textColor1, tabTextColorHoverCard: textColor1, tabTextColorActiveCard: primaryColor, tabTextColorDisabledCard: textColorDisabled, barColor: primaryColor, closeColor,
+    return Object.assign(Object.assign({}, sizeVariables), { colorSegment: tabColor, tabFontSizeCard: fontSize, tabTextColorLine: textColor1, tabTextColorActiveLine: primaryColor, tabTextColorHoverLine: primaryColor, tabTextColorDisabledLine: textColorDisabled, tabTextColorSegment: textColor1, tabTextColorActiveSegment: textColor2, tabTextColorHoverSegment: textColor2, tabTextColorDisabledSegment: textColorDisabled, tabTextColorBar: textColor1, tabTextColorActiveBar: primaryColor, tabTextColorHoverBar: primaryColor, tabTextColorDisabledBar: textColorDisabled, tabTextColorCard: textColor1, tabTextColorHoverCard: textColor1, tabTextColorActiveCard: primaryColor, tabTextColorDisabledCard: textColorDisabled, barColor: primaryColor, closeColor,
         closeColorHover,
         closeColorPressed,
         tabColor, tabColorSegment: baseColor, tabBorderColor: dividerColor, tabFontWeightActive: fontWeight, tabFontWeight: fontWeight, tabBorderRadius: borderRadius, paneTextColor: textColor2, fontWeightStrong });

package/es/tag/src/Tag.d.ts

@@ -465,6 +465,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-close-color': string;
         '--n-close-color-hover': string;
         '--n-close-color-pressed': string;
+        '--n-close-color-disabled': string;
         '--n-close-margin': string;
         '--n-close-margin-rtl': string;
         '--n-close-size': string;

package/es/tag/src/Tag.js

@@ -78,6 +78,7 @@ export default defineComponent({
                     '--n-close-color': closeColor,
                     '--n-close-color-hover': closeColorHover,
                     '--n-close-color-pressed': closeColorPressed,
+                    '--n-close-color-disabled': closeColor,
                     '--n-close-margin': closeMargin,
                     '--n-close-margin-rtl': closeMarginRtl,
                     '--n-close-size': closeSize,

package/es/thing/src/Thing.js

@@ -15,11 +15,11 @@ export default defineComponent({
         const cssVarsRef = computed(() => {
             const { self: { titleTextColor, textColor, titleFontWeight, fontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
-                '--bezier': cubicBezierEaseInOut,
-                '--font-size': fontSize,
-                '--text-color': textColor,
-                '--title-font-weight': titleFontWeight,
-                '--title-text-color': titleTextColor
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-font-size': fontSize,
+                '--n-text-color': textColor,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-title-text-color': titleTextColor
             };
         });
         return () => {

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

@@ -1,15 +1,15 @@
 import { c, cB, cE } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --font-size
-// --text-color
-// --title-font-weight
-// --title-text-color
+// --n-bezier
+// --n-font-size
+// --n-text-color
+// --n-title-font-weight
+// --n-title-text-color
 
 export default cB('thing', `
  display: flex;
- transition: color .3s var(--bezier);
- font-size: var(--font-size);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
 `, [cB('thing-avatar', `
  margin-right: 12px;
  margin-top: 2px;
@@ -27,9 +27,9 @@ export default cB('thing', `
  align-items: center;
  `, [cE('title', `
  font-size: 16px;
- font-weight: var(--title-font-weight);
- transition: color .3s var(--bezier);
- color: var(--title-text-color);
+ font-weight: var(--n-title-font-weight);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-title-text-color);
  `)]), cE('description', [c('&:not(:last-child)', `
  margin-bottom: 4px;
  `)]), cE('content', [c('&:not(:first-child)', `

package/es/time-picker/src/TimePicker.d.ts

@@ -2400,10 +2400,10 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     format: string;
     placement: string;
+    showIcon: boolean;
     clearable: boolean;
     defaultValue: number | null;
     stateful: boolean;
-    showIcon: boolean;
     inputReadonly: boolean;
     use12Hours: boolean;
 } & {
@@ -3290,11 +3290,11 @@ declare const _default: import("vue").DefineComponent<{
     format: string;
     to: string | boolean | HTMLElement;
     placement: string;
+    showIcon: boolean;
     bordered: boolean | undefined;
     clearable: boolean;
     defaultValue: number | null;
     stateful: boolean;
-    showIcon: boolean;
     inputReadonly: boolean;
     use12Hours: boolean;
 }>;

package/es/transfer/src/Transfer.d.ts

@@ -2564,27 +2564,27 @@ declare const _default: import("vue").DefineComponent<{
     handleTgtFilterUpdateValue: (value: string | null) => void;
     handleSrcFilterUpdateValue: (value: string | null) => void;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--bezier-ease-in': string;
-        '--bezier-ease-out': string;
-        '--border-color': string;
-        '--border-radius': string;
-        '--extra-font-size': string;
-        '--filter-divider-color': string;
-        '--font-size': string;
-        '--header-color': string;
-        '--header-extra-text-color': string;
-        '--header-font-weight': string;
-        '--header-text-color': string;
-        '--header-text-color-disabled': string;
-        '--item-color-pending': string;
-        '--item-height': string;
-        '--item-text-color': string;
-        '--item-text-color-disabled': string;
-        '--list-color': string;
-        '--width': string;
-        '--icon-color': string;
-        '--icon-color-disabled': string;
+        '--n-bezier': string;
+        '--n-bezier-ease-in': string;
+        '--n-bezier-ease-out': string;
+        '--n-border-color': string;
+        '--n-border-radius': string;
+        '--n-extra-font-size': string;
+        '--n-filter-divider-color': string;
+        '--n-font-size': string;
+        '--n-header-color': string;
+        '--n-header-extra-text-color': string;
+        '--n-header-font-weight': string;
+        '--n-header-text-color': string;
+        '--n-header-text-color-disabled': string;
+        '--n-item-color-pending': string;
+        '--n-item-height': string;
+        '--n-item-text-color': string;
+        '--n-item-text-color-disabled': string;
+        '--n-list-color': string;
+        '--n-width': string;
+        '--n-icon-color': string;
+        '--n-icon-color-disabled': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly value?: unknown;

package/es/transfer/src/Transfer.js

@@ -159,27 +159,27 @@ export default defineComponent({
                 const { value: size } = mergedSizeRef;
                 const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { width, borderRadius, borderColor, listColor, headerColor, titleTextColor, titleTextColorDisabled, extraTextColor, filterDividerColor, itemTextColor, itemColorPending, itemTextColorDisabled, extraFontSize, titleFontWeight, iconColor, iconColorDisabled, [createKey('fontSize', size)]: fontSize, [createKey('itemHeight', size)]: itemHeight } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--bezier-ease-in': cubicBezierEaseIn,
-                    '--bezier-ease-out': cubicBezierEaseOut,
-                    '--border-color': borderColor,
-                    '--border-radius': borderRadius,
-                    '--extra-font-size': extraFontSize,
-                    '--filter-divider-color': filterDividerColor,
-                    '--font-size': fontSize,
-                    '--header-color': headerColor,
-                    '--header-extra-text-color': extraTextColor,
-                    '--header-font-weight': titleFontWeight,
-                    '--header-text-color': titleTextColor,
-                    '--header-text-color-disabled': titleTextColorDisabled,
-                    '--item-color-pending': itemColorPending,
-                    '--item-height': itemHeight,
-                    '--item-text-color': itemTextColor,
-                    '--item-text-color-disabled': itemTextColorDisabled,
-                    '--list-color': listColor,
-                    '--width': width,
-                    '--icon-color': iconColor,
-                    '--icon-color-disabled': iconColorDisabled
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-bezier-ease-in': cubicBezierEaseIn,
+                    '--n-bezier-ease-out': cubicBezierEaseOut,
+                    '--n-border-color': borderColor,
+                    '--n-border-radius': borderRadius,
+                    '--n-extra-font-size': extraFontSize,
+                    '--n-filter-divider-color': filterDividerColor,
+                    '--n-font-size': fontSize,
+                    '--n-header-color': headerColor,
+                    '--n-header-extra-text-color': extraTextColor,
+                    '--n-header-font-weight': titleFontWeight,
+                    '--n-header-text-color': titleTextColor,
+                    '--n-header-text-color-disabled': titleTextColorDisabled,
+                    '--n-item-color-pending': itemColorPending,
+                    '--n-item-height': itemHeight,
+                    '--n-item-text-color': itemTextColor,
+                    '--n-item-text-color-disabled': itemTextColorDisabled,
+                    '--n-list-color': listColor,
+                    '--n-width': width,
+                    '--n-icon-color': iconColor,
+                    '--n-icon-color-disabled': iconColorDisabled
                 };
             })
         };

package/es/transfer/src/TransferList.js

@@ -70,24 +70,22 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedTheme, mergedClsPrefix, syncVLScroller } = this;
+        const { mergedTheme, mergedClsPrefix, virtualScroll, syncVLScroller } = this;
         return (h(Fragment, null,
-            this.virtualScroll ? (h(NScrollbar, { ref: "scrollerInstRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, container: this.scrollContainer, content: this.scrollContent }, {
-                default: () => (h(VirtualList, { ref: "srcVlInstRef", style: { height: '100%' }, class: `${mergedClsPrefix}-transfer-list-content`, items: this.options, itemSize: this.itemSize, showScrollbar: false, onResize: syncVLScroller, onScroll: syncVLScroller, keyField: "value" }, {
+            h(NScrollbar, { ref: "scrollerInstRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, container: virtualScroll ? this.scrollContainer : undefined, content: virtualScroll ? this.scrollContent : undefined }, {
+                default: () => virtualScroll ? (h(VirtualList, { ref: "vlInstRef", style: { height: '100%' }, class: `${mergedClsPrefix}-transfer-list-content`, items: this.options, itemSize: this.itemSize, showScrollbar: false, onResize: syncVLScroller, onScroll: syncVLScroller, keyField: "value" }, {
                     default: ({ item }) => {
                         const { source, disabled } = this;
                         return (h(NTransferListItem, { source: source, key: item.value, value: item.value, disabled: item.disabled || disabled, label: item.label }));
                     }
-                }))
-            })) : (h(NScrollbar, { theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
-                default: () => (h("div", { class: `${mergedClsPrefix}-transfer-list-content` },
+                })) : (h("div", { class: `${mergedClsPrefix}-transfer-list-content` },
                     h(TransitionGroup, { name: "item", appear: this.isMounted, css: !this.isInputing }, {
                         default: () => {
                             const { source, disabled } = this;
                             return this.options.map((option) => (h(NTransferListItem, { source: source, key: option.value, value: option.value, disabled: option.disabled || disabled, label: option.label })));
                         }
                     })))
-            })),
+            }),
             h(Transition, { name: "fade-in-transition", appear: this.isMounted, css: !this.isInputing }, {
                 default: () => this.options.length ? null : (h(NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }))
             })));

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

@@ -30,7 +30,7 @@ const animation = c([c('@keyframes transfer-slide-in-from-left', `
  }
  `), c('@keyframes transfer-height-collapse', `
  0% {
- max-height: var(--item-height);
+ max-height: var(--n-item-height);
  }
  100% {
  max-height: 0;
@@ -40,21 +40,21 @@ const animation = c([c('@keyframes transfer-slide-in-from-left', `
  max-height: 0;
  }
  100% {
- max-height: var(--item-height);
+ max-height: var(--n-item-height);
  }
  `)]);
 export default c([cB('transfer', `
  display: flex;
- width: var(--width);
- font-size: var(--font-size);
+ width: var(--n-width);
+ font-size: var(--n-font-size);
  height: 240px;
  display: flex;
  flex-wrap: nowrap;
  `, [cB('transfer-icon', `
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  `), cM('disabled', [cB('transfer-icon', {
-  color: 'var(--icon-color-disabled)'
+  color: 'var(--n-icon-color-disabled)'
 })]), cB('transfer-list', `
  height: inherit;
  display: flex;
@@ -62,12 +62,12 @@ export default c([cB('transfer', `
  background-clip: padding-box;
  width: calc(50% - 36px);
  position: relative;
- transition: background-color .3s var(--bezier);
- border-radius: var(--border-radius);
- background-color: var(--list-color);
+ transition: background-color .3s var(--n-bezier);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-list-color);
  `, [cE('border', `
- border: 1px solid var(--border-color);
- transition: border-color .3s var(--bezier);
+ border: 1px solid var(--n-border-color);
+ transition: border-color .3s var(--n-bezier);
  pointer-events: none;
  border-radius: inherit;
  position: absolute;
@@ -76,7 +76,7 @@ export default c([cB('transfer', `
  top: 0;
  bottom: 0;
  `), cB('transfer-list-header', `
- height: calc(var(--item-height) + 4px);
+ height: calc(var(--n-item-height) + 4px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
@@ -84,10 +84,10 @@ export default c([cB('transfer', `
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
- background-color: var(--header-color);
+ background-color: var(--n-header-color);
  transition:
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `, [cE('checkbox', `
  display: flex;
  align-items: center;
@@ -96,18 +96,18 @@ export default c([cB('transfer', `
  `), cE('header', `
  flex: 1;
  line-height: 1;
- font-weight: var(--header-font-weight);
- transition: color .3s var(--bezier);
- color: var(--header-text-color);
+ font-weight: var(--n-header-font-weight);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-header-text-color);
  `, [cM('disabled', {
-  color: 'var(--header-text-color-disabled)'
+  color: 'var(--n-header-text-color-disabled)'
 })]), cE('extra', `
- transition: color .3s var(--bezier);
- font-size: var(--extra-font-size);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-extra-font-size);
  justify-self: flex-end;
  margin-right: 14px;
  white-space: nowrap;
- color: var(--header-extra-text-color);
+ color: var(--n-header-extra-text-color);
  `)]), cB('transfer-list-body', `
  flex-basis: 0;
  flex-grow: 1;
@@ -122,11 +122,11 @@ export default c([cB('transfer', `
  `, [cB('transfer-filter', `
  padding: 0 8px 8px 8px;
  box-sizing: border-box;
- background-color: var(--header-color);
+ background-color: var(--n-header-color);
  transition:
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
- border-bottom: 1px solid var(--filter-divider-color);
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-filter-divider-color);
  `), cB('transfer-list-flex-container', `
  flex: 1;
  position: relative;
@@ -151,18 +151,18 @@ export default c([cB('transfer', `
  `, [cM('transition-disabled', [cB('transfer-list-item', {
   animation: 'none !important'
 })]), cB('transfer-list-item', `
- height: var(--item-height);
- max-height: var(--item-height);
+ height: var(--n-item-height);
+ max-height: var(--n-item-height);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
- color: var(--item-text-color);
+ color: var(--n-item-text-color);
  `, [cNotM('disabled', [c('&:hover', {
-  backgroundColor: 'var(--item-color-pending)'
+  backgroundColor: 'var(--n-item-color-pending)'
 })]), cE('extra', `
  text-overflow: ellipsis;
  overflow: hidden;
@@ -176,19 +176,19 @@ export default c([cB('transfer', `
  `), cM('disabled', `
  cursor: not-allowed
  background-color: #0000;
- color: var(--item-text-color-disabled);
+ color: var(--n-item-text-color-disabled);
  `), cM('source', {
   animationFillMode: 'forwards'
 }, [c('&.item-enter-active', `
  transform: translateX(150%);
  animation-duration: .25s, .25s;
- animation-timing-function: var(--bezier), var(--bezier-ease-out);
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-out);
  animation-delay: 0s, .25s;
  animation-name: transfer-height-expand, transfer-slide-in-from-right;
  `), c('&.item-leave-active', `
  transform: translateX(-150%);
  animation-duration: .25s, .25s;
- animation-timing-function: var(--bezier), var(--bezier-ease-in);
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-in);
  animation-delay: .25s, 0s;
  animation-name: transfer-height-collapse, transfer-slide-out-to-right;
  `)]), cM('target', {
@@ -196,13 +196,13 @@ export default c([cB('transfer', `
 }, [c('&.item-enter-active', `
  transform: translateX(-150%);
  animation-duration: .25s, .25s;
- animation-timing-function: var(--bezier), var(--bezier-ease-out);
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-out);
  animation-delay: 0s, .25s;
  animation-name: transfer-height-expand, transfer-slide-in-from-left;
  `), c('&.item-leave-active', `
  transform: translateX(150%);
  animation-duration: .25s, .25s;
- animation-timing-function: var(--bezier), var(--bezier-ease-in);
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-in);
  animation-delay: .25s, 0s;
  animation-name: transfer-height-collapse, transfer-slide-out-to-left;
  `)])])])])])]), cB('transfer-gap', {