naive-ui 2.22.0 → 2.24.0

package/lib/table/src/Table.d.ts

@@ -211,27 +211,27 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--td-color': string;
-        '--td-color-modal': string;
-        '--td-color-popover': string;
-        '--td-text-color': string;
-        '--border-color': string;
-        '--border-color-modal': string;
-        '--border-color-popover': string;
-        '--border-radius': string;
-        '--font-size': string;
-        '--th-color': string;
-        '--th-color-modal': string;
-        '--th-color-popover': string;
-        '--th-font-weight': string;
-        '--th-text-color': string;
-        '--line-height': string;
-        '--td-padding': string;
-        '--th-padding': string;
-        '--td-color-striped': string;
-        '--td-color-striped-modal': string;
-        '--td-color-striped-popover': string;
+        '--n-bezier': string;
+        '--n-td-color': string;
+        '--n-td-color-modal': string;
+        '--n-td-color-popover': string;
+        '--n-td-text-color': string;
+        '--n-border-color': string;
+        '--n-border-color-modal': string;
+        '--n-border-color-popover': string;
+        '--n-border-radius': string;
+        '--n-font-size': string;
+        '--n-th-color': string;
+        '--n-th-color-modal': string;
+        '--n-th-color-popover': string;
+        '--n-th-font-weight': string;
+        '--n-th-text-color': string;
+        '--n-line-height': string;
+        '--n-td-padding': string;
+        '--n-th-padding': string;
+        '--n-td-color-striped': string;
+        '--n-td-color-striped-modal': string;
+        '--n-td-color-striped-popover': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     bordered?: unknown;

package/lib/table/src/Table.js

@@ -33,27 +33,27 @@ exports.default = (0, vue_1.defineComponent)({
                 const { size } = props;
                 const { self: { borderColor, tdColor, tdColorModal, tdColorPopover, thColor, thColorModal, thColorPopover, thTextColor, tdTextColor, borderRadius, thFontWeight, lineHeight, borderColorModal, borderColorPopover, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding, [(0, _utils_1.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/lib/table/src/styles/index.cssr.js

@@ -5,76 +5,76 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_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
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.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);
  `, [(0, cssr_1.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);
  `, [(0, cssr_1.c)('&:last-child', `
  border-right: none;
  `)]), (0, cssr_1.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);
  `, [(0, cssr_1.c)('&:last-child', `
  border-right: none;
  `)]), (0, cssr_1.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);
  `, [(0, cssr_1.c)('tr', [(0, cssr_1.c)('&:last-child', [(0, cssr_1.c)('td', `
  border-bottom: none;
  `)])])]), (0, cssr_1.cM)('single-line', [(0, cssr_1.c)('th', `
@@ -83,20 +83,20 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('table', `
  border-right: none;
  `)]), (0, cssr_1.cM)('single-column', [(0, cssr_1.c)('tr', [(0, cssr_1.c)('&:not(:last-child)', [(0, cssr_1.c)('td', `
  border-bottom: none;
- `)])])]), (0, cssr_1.cM)('striped', [(0, cssr_1.c)('tr:nth-of-type(even)', [(0, cssr_1.c)('td', 'background-color: var(--td-color-striped)')])]), (0, cssr_1.cNotM)('bottom-bordered', [(0, cssr_1.c)('tr', [(0, cssr_1.c)('&:last-child', [(0, cssr_1.c)('td', `
+ `)])])]), (0, cssr_1.cM)('striped', [(0, cssr_1.c)('tr:nth-of-type(even)', [(0, cssr_1.c)('td', 'background-color: var(--n-td-color-striped)')])]), (0, cssr_1.cNotM)('bottom-bordered', [(0, cssr_1.c)('tr', [(0, cssr_1.c)('&:last-child', [(0, cssr_1.c)('td', `
  border-bottom: none;
  `)])])])]), (0, cssr_1.insideModal)((0, cssr_1.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);
  `, [(0, cssr_1.c)('th', `
- background-color: var(--th-color-modal);
+ background-color: var(--n-th-color-modal);
  `), (0, cssr_1.c)('td', `
- background-color: var(--td-color-modal);
+ background-color: var(--n-td-color-modal);
  `)])), (0, cssr_1.insidePopover)((0, cssr_1.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);
  `, [(0, cssr_1.c)('th', `
- background-color: var(--th-color-popover);
+ background-color: var(--n-th-color-popover);
  `), (0, cssr_1.c)('td', `
- background-color: var(--td-color-popover);
+ background-color: var(--n-td-color-popover);
  `)]))]);

package/lib/tabs/index.d.ts

@@ -4,3 +4,4 @@ export { default as NTabPane } from './src/TabPane';
 export type { TabPaneProps } from './src/TabPane';
 export { default as NTab } from './src/Tab';
 export type { TabProps } from './src/Tab';
+export type { TabsInst } from './src/interface';

package/lib/tabs/src/Tabs.d.ts

@@ -2,8 +2,7 @@
 import { PropType, CSSProperties, ComponentPublicInstance, nextTick } from 'vue';
 import { VXScrollInst } from 'vueuc';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
-import { Addable, OnClose, OnBeforeLeave, TabsType } from './interface';
-import type { OnUpdateValue } from './interface';
+import type { Addable, OnClose, OnBeforeLeave, TabsType, OnUpdateValue } from './interface';
 declare const tabsProps: {
     readonly value: PropType<string | number>;
     readonly defaultValue: PropType<string | number>;
@@ -437,6 +436,7 @@ declare const _default: import("vue").DefineComponent<{
         panePaddingLarge: string;
     }, any>>>;
 }, {
+    syncBarPosition: () => void;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedValue: import("vue").ComputedRef<string | number | null>;
     renderedNames: Set<string | number>;

package/lib/tabs/src/Tabs.js

@@ -11,8 +11,8 @@ const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const interface_1 = require("./interface");
-const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const Tab_1 = __importDefault(require("./Tab"));
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const tabsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: [String, Number], defaultValue: [String, Number], type: {
         type: String,
         default: 'bar'
@@ -59,9 +59,6 @@ exports.default = (0, vue_1.defineComponent)({
             : null));
         const mergedValueRef = (0, vooks_1.useMergedState)(compitableValueRef, uncontrolledValueRef);
         const tabChangeIdRef = { id: 0 };
-        (0, vue_1.watch)(mergedValueRef, () => {
-            tabChangeIdRef.id = 0;
-        });
         const tabWrapperStyleRef = (0, vue_1.computed)(() => {
             if (!props.justifyContent || props.type === 'card')
                 return undefined;
@@ -71,6 +68,7 @@ exports.default = (0, vue_1.defineComponent)({
             };
         });
         (0, vue_1.watch)(mergedValueRef, () => {
+            tabChangeIdRef.id = 0;
             updateCurrentBarStyle();
         });
         function getCurrentEl() {
@@ -235,22 +233,17 @@ exports.default = (0, vue_1.defineComponent)({
                 el.classList.add(shadowAfterClass);
             }
         });
-        return {
-            mergedClsPrefix: mergedClsPrefixRef,
-            mergedValue: mergedValueRef,
-            renderedNames: new Set(),
-            tabsElRef,
+        const exposedMethods = {
+            syncBarPosition: () => {
+                updateCurrentBarStyle();
+            }
+        };
+        return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, mergedValue: mergedValueRef, renderedNames: new Set(), tabsElRef,
             barElRef,
             addTabInstRef,
             xScrollInstRef,
-            scrollWrapperElRef,
-            addTabFixed: addTabFixedRef,
-            tabWrapperStyle: tabWrapperStyleRef,
-            handleNavResize,
-            mergedSize: compitableSizeRef,
-            handleScroll,
-            handleTabsResize,
-            cssVars: (0, vue_1.computed)(() => {
+            scrollWrapperElRef, addTabFixed: addTabFixedRef, tabWrapperStyle: tabWrapperStyleRef, handleNavResize, mergedSize: compitableSizeRef, handleScroll,
+            handleTabsResize, cssVars: (0, vue_1.computed)(() => {
                 const { value: size } = compitableSizeRef;
                 const { type } = props;
                 const typeSuffix = {
@@ -285,8 +278,7 @@ exports.default = (0, vue_1.defineComponent)({
                     '--font-weight-strong': fontWeightStrong,
                     '--tab-color-segment': tabColorSegment
                 };
-            })
-        };
+            }) }, exposedMethods);
     },
     render() {
         const { mergedClsPrefix, type, addTabFixed, addable, mergedSize, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
@@ -344,7 +336,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     mergedJustifyContent ? null : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } })),
                                     showPane
                                         ? tabPaneChildren.map((tabPaneVNode, index) => {
-                                            return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { internalLeftPadded: index !== 0 && !mergedJustifyContent }), tabPaneVNode.children
+                                            return justifyTabDynamicProps((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { internalLeftPadded: index !== 0 && !mergedJustifyContent }), tabPaneVNode.children
                                                 ? {
                                                     default: tabPaneVNode.children.tab
                                                 }
@@ -353,10 +345,10 @@ exports.default = (0, vue_1.defineComponent)({
                                         : tabChildren.map((tabVNode, index) => {
                                             if (index !== 0 &&
                                                 !mergedJustifyContent) {
-                                                return createLeftPaddedTabVNode(tabVNode);
+                                                return justifyTabDynamicProps(createLeftPaddedTabVNode(tabVNode));
                                             }
                                             else {
-                                                return tabVNode;
+                                                return justifyTabDynamicProps(tabVNode);
                                             }
                                         }),
                                     !addTabFixed && addable && isCard
@@ -422,3 +414,14 @@ function createLeftPaddedTabVNode(tabVNode) {
     }
     return modifiedVNode;
 }
+function justifyTabDynamicProps(tabVNode) {
+    if (Array.isArray(tabVNode.dynamicProps)) {
+        if (!tabVNode.dynamicProps.includes('internalLeftPadded')) {
+            tabVNode.dynamicProps.push('internalLeftPadded');
+        }
+    }
+    else {
+        tabVNode.dynamicProps = ['internalLeftPadded'];
+    }
+    return tabVNode;
+}

package/lib/tabs/src/interface.d.ts

@@ -26,3 +26,6 @@ export declare type Addable = boolean | {
     disabled?: boolean;
 };
 export declare const tabsInjectionKey: InjectionKey<TabsInjection>;
+export interface TabsInst {
+    syncBarPosition: () => void;
+}

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

@@ -58,8 +58,11 @@ exports.default = (0, cssr_1.cB)('tabs', `
  justify-content: center;
  `, [(0, cssr_1.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);
+ `), (0, cssr_1.c)('&:hover', `
+ color: var(--tab-text-color-hover);
  `)])])]), (0, cssr_1.cM)('flex', [(0, cssr_1.cB)('tabs-nav', {
   width: '100%'
 }, [(0, cssr_1.cB)('tabs-wrapper', {
@@ -203,7 +206,7 @@ exports.default = (0, cssr_1.cB)('tabs', `
  padding-right: 8px;
  font-size: 16px;
  `, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', `
- color: var(--tab-text-color-active);
+ color: var(--tab-text-color-hover);
  `)])]), (0, cssr_1.cM)('closable', 'padding-right: 6px;'), (0, cssr_1.cM)('active', `
  border-bottom: 1px solid #0000;
  background-color: #0000;

package/lib/tabs/styles/light.js

@@ -8,7 +8,7 @@ const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
     const { textColor2, primaryColor, textColorDisabled, closeColor, closeColorHover, closeColorPressed, tabColor, baseColor, dividerColor, fontWeight, textColor1, borderRadius, fontSize, fontWeightStrong } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { 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({}, _common_1.default), { 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/lib/tag/src/Tag.d.ts

@@ -458,32 +458,33 @@ declare const _default: import("vue").DefineComponent<{
     handleClick: (e: MouseEvent) => void;
     handleCloseClick: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--avatar-size-override': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--border': string;
-        '--close-color': string;
-        '--close-color-hover': string;
-        '--close-color-pressed': string;
-        '--close-margin': string;
-        '--close-margin-rtl': string;
-        '--close-size': string;
-        '--color': string;
-        '--color-checkable': string;
-        '--color-checked': string;
-        '--color-checked-hover': string;
-        '--color-checked-pressed': string;
-        '--color-hover-checkable': string;
-        '--color-pressed-checkable': string;
-        '--font-size': string;
-        '--height': string;
-        '--opacity-disabled': string;
-        '--padding': string;
-        '--text-color': string;
-        '--text-color-checkable': string;
-        '--text-color-checked': string;
-        '--text-color-hover-checkable': string;
-        '--text-color-pressed-checkable': string;
+        '--n-avatar-size-override': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-border': string;
+        '--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;
+        '--n-color': string;
+        '--n-color-checkable': string;
+        '--n-color-checked': string;
+        '--n-color-checked-hover': string;
+        '--n-color-checked-pressed': string;
+        '--n-color-hover-checkable': string;
+        '--n-color-pressed-checkable': string;
+        '--n-font-size': string;
+        '--n-height': string;
+        '--n-opacity-disabled': string;
+        '--n-padding': string;
+        '--n-text-color': string;
+        '--n-text-color-checkable': string;
+        '--n-text-color-checked': string;
+        '--n-text-color-hover-checkable': string;
+        '--n-text-color-pressed-checkable': string;
     }>;
     setTextContent: (textContent: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

package/lib/tag/src/Tag.js

@@ -77,32 +77,33 @@ exports.default = (0, vue_1.defineComponent)({
                 const { type, size, color: { color, textColor } = {} } = props;
                 const { common: { cubicBezierEaseInOut }, self: { padding, closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, [(0, _utils_1.createKey)('closeSize', size)]: closeSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('color', type)]: typedColor, [(0, _utils_1.createKey)('textColor', type)]: typeTextColor, [(0, _utils_1.createKey)('border', type)]: border, [(0, _utils_1.createKey)('closeColor', type)]: closeColor, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
                 return {
-                    '--avatar-size-override': `calc(${height} - 8px)`,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--border': border,
-                    '--close-color': closeColor,
-                    '--close-color-hover': closeColorHover,
-                    '--close-color-pressed': closeColorPressed,
-                    '--close-margin': closeMargin,
-                    '--close-margin-rtl': closeMarginRtl,
-                    '--close-size': closeSize,
-                    '--color': color || typedColor,
-                    '--color-checkable': colorCheckable,
-                    '--color-checked': colorChecked,
-                    '--color-checked-hover': colorCheckedHover,
-                    '--color-checked-pressed': colorCheckedPressed,
-                    '--color-hover-checkable': colorHoverCheckable,
-                    '--color-pressed-checkable': colorPressedCheckable,
-                    '--font-size': fontSize,
-                    '--height': height,
-                    '--opacity-disabled': opacityDisabled,
-                    '--padding': padding,
-                    '--text-color': textColor || typeTextColor,
-                    '--text-color-checkable': textColorCheckable,
-                    '--text-color-checked': textColorChecked,
-                    '--text-color-hover-checkable': textColorHoverCheckable,
-                    '--text-color-pressed-checkable': textColorPressedCheckable
+                    '--n-avatar-size-override': `calc(${height} - 8px)`,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-border': border,
+                    '--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,
+                    '--n-color': color || typedColor,
+                    '--n-color-checkable': colorCheckable,
+                    '--n-color-checked': colorChecked,
+                    '--n-color-checked-hover': colorCheckedHover,
+                    '--n-color-checked-pressed': colorCheckedPressed,
+                    '--n-color-hover-checkable': colorHoverCheckable,
+                    '--n-color-pressed-checkable': colorPressedCheckable,
+                    '--n-font-size': fontSize,
+                    '--n-height': height,
+                    '--n-opacity-disabled': opacityDisabled,
+                    '--n-padding': padding,
+                    '--n-text-color': textColor || typeTextColor,
+                    '--n-text-color-checkable': textColorCheckable,
+                    '--n-text-color-checked': textColorChecked,
+                    '--n-text-color-hover-checkable': textColorHoverCheckable,
+                    '--n-text-color-pressed-checkable': textColorPressedCheckable
                 };
             }) });
     },