naive-ui 2.23.1 → 2.24.2

package/es/layout/src/Layout.d.ts

@@ -1,6 +1,6 @@
-import { PropType, CSSProperties, InjectionKey, ExtractPropTypes } from 'vue';
+import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
 import type { ScrollbarProps } from '../../_internal';
-import type { ExtractPublicPropTypes } from '../../_utils';
+import { ExtractPublicPropTypes } from '../../_utils';
 declare const layoutProps: {
     readonly embedded: BooleanConstructor;
     readonly position: {
@@ -24,7 +24,28 @@ declare const layoutProps: {
     };
 };
 export declare type LayoutProps = ExtractPublicPropTypes<typeof layoutProps>;
-export declare const layoutInjectionKey: InjectionKey<ExtractPropTypes<typeof layoutProps>>;
+export declare const layoutInjectionKey: import("vue").InjectionKey<ExtractPropTypes<{
+    readonly embedded: BooleanConstructor;
+    readonly position: {
+        readonly type: PropType<"static" | "absolute">;
+        readonly default: "static";
+    };
+    readonly nativeScrollbar: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly scrollbarProps: PropType<Partial<ScrollbarProps>>;
+    readonly onScroll: PropType<(e: Event) => void>;
+    readonly contentStyle: {
+        readonly type: PropType<string | CSSProperties>;
+        readonly default: "";
+    };
+    readonly hasSider: BooleanConstructor;
+    readonly siderPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "left";
+    };
+}>>;
 export declare function createLayoutComponent(isContent: boolean): import("vue").DefineComponent<{
     embedded: BooleanConstructor;
     position: {
@@ -141,11 +162,14 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
     mergedClsPrefix: import("vue").ComputedRef<string>;
     scrollableElRef: import("vue").Ref<HTMLElement | null>;
     scrollbarInstRef: import("vue").Ref<{
-        scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
-        sync: () => void;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
     } | null>;
     hasSiderStyle: CSSProperties;
     mergedTheme: import("vue").ComputedRef<{
@@ -292,32 +316,32 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-color': string;
+        '--n-text-color': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    embedded?: unknown;
-    position?: unknown;
-    nativeScrollbar?: unknown;
-    scrollbarProps?: unknown;
-    onScroll?: unknown;
-    contentStyle?: unknown;
-    hasSider?: unknown;
-    siderPlacement?: unknown;
-    theme?: unknown;
-    themeOverrides?: unknown;
-    builtinThemeOverrides?: unknown;
-} & {
-    position: "static" | "absolute";
-    contentStyle: string | CSSProperties;
-    embedded: boolean;
-    nativeScrollbar: boolean;
-    hasSider: boolean;
-    siderPlacement: "left" | "right";
-} & {
-    onScroll?: ((e: Event) => void) | undefined;
-    theme?: import("../../_mixins").Theme<"Layout", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    embedded: BooleanConstructor;
+    position: {
+        readonly type: PropType<"static" | "absolute">;
+        readonly default: "static";
+    };
+    nativeScrollbar: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    scrollbarProps: PropType<Partial<ScrollbarProps>>;
+    onScroll: PropType<(e: Event) => void>;
+    contentStyle: {
+        readonly type: PropType<string | CSSProperties>;
+        readonly default: "";
+    };
+    hasSider: BooleanConstructor;
+    siderPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "left";
+    };
+    theme: PropType<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -346,8 +370,8 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
             color: string;
             colorHover: string;
         }, any>;
-    }> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
+    }>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -376,8 +400,8 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
+    }>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -406,9 +430,8 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    scrollbarProps?: Partial<ScrollbarProps> | undefined;
-}>, {
+    }>>>;
+}>>, {
     position: "static" | "absolute";
     contentStyle: string | CSSProperties;
     embedded: boolean;
@@ -532,11 +555,14 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     scrollableElRef: import("vue").Ref<HTMLElement | null>;
     scrollbarInstRef: import("vue").Ref<{
-        scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
-        sync: () => void;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
     } | null>;
     hasSiderStyle: CSSProperties;
     mergedTheme: import("vue").ComputedRef<{
@@ -683,32 +709,32 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-color': string;
+        '--n-text-color': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    embedded?: unknown;
-    position?: unknown;
-    nativeScrollbar?: unknown;
-    scrollbarProps?: unknown;
-    onScroll?: unknown;
-    contentStyle?: unknown;
-    hasSider?: unknown;
-    siderPlacement?: unknown;
-    theme?: unknown;
-    themeOverrides?: unknown;
-    builtinThemeOverrides?: unknown;
-} & {
-    position: "static" | "absolute";
-    contentStyle: string | CSSProperties;
-    embedded: boolean;
-    nativeScrollbar: boolean;
-    hasSider: boolean;
-    siderPlacement: "left" | "right";
-} & {
-    onScroll?: ((e: Event) => void) | undefined;
-    theme?: import("../../_mixins").Theme<"Layout", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    embedded: BooleanConstructor;
+    position: {
+        readonly type: PropType<"static" | "absolute">;
+        readonly default: "static";
+    };
+    nativeScrollbar: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    scrollbarProps: PropType<Partial<ScrollbarProps>>;
+    onScroll: PropType<(e: Event) => void>;
+    contentStyle: {
+        readonly type: PropType<string | CSSProperties>;
+        readonly default: "";
+    };
+    hasSider: BooleanConstructor;
+    siderPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "left";
+    };
+    theme: PropType<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -737,8 +763,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
+    }>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -767,8 +793,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
+    }>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -797,9 +823,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    scrollbarProps?: Partial<ScrollbarProps> | undefined;
-}>, {
+    }>>>;
+}>>, {
     position: "static" | "absolute";
     contentStyle: string | CSSProperties;
     embedded: boolean;

package/es/layout/src/Layout.js

@@ -4,6 +4,7 @@ import { useConfig, useTheme } from '../../_mixins';
 import { layoutLight } from '../styles';
 import style from './styles/layout.cssr';
 import { positionProp } from './interface';
+import { createInjectionKey } from '../../_utils';
 const layoutProps = {
     embedded: Boolean,
     position: positionProp,
@@ -23,7 +24,7 @@ const layoutProps = {
         default: 'left'
     }
 };
-export const layoutInjectionKey = Symbol('layout');
+export const layoutInjectionKey = createInjectionKey('n-layout');
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createLayoutComponent(isContent) {
     return defineComponent({
@@ -68,9 +69,9 @@ export function createLayoutComponent(isContent) {
                 hasSiderStyle, mergedTheme: themeRef, cssVars: computed(() => {
                     const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                     return {
-                        '--bezier': cubicBezierEaseInOut,
-                        '--color': props.embedded ? self.colorEmbedded : self.color,
-                        '--text-color': self.textColor
+                        '--n-bezier': cubicBezierEaseInOut,
+                        '--n-color': props.embedded ? self.colorEmbedded : self.color,
+                        '--n-text-color': self.textColor
                     };
                 }) }, exposedMethods);
         },

package/es/layout/src/LayoutContent.d.ts

@@ -114,11 +114,14 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     scrollableElRef: import("vue").Ref<HTMLElement | null>;
     scrollbarInstRef: import("vue").Ref<{
-        scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
-        sync: () => void;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
     } | null>;
     hasSiderStyle: import("vue").CSSProperties;
     mergedTheme: import("vue").ComputedRef<{
@@ -265,32 +268,32 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-color': string;
+        '--n-text-color': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    embedded?: unknown;
-    position?: unknown;
-    nativeScrollbar?: unknown;
-    scrollbarProps?: unknown;
-    onScroll?: unknown;
-    contentStyle?: unknown;
-    hasSider?: unknown;
-    siderPlacement?: unknown;
-    theme?: unknown;
-    themeOverrides?: unknown;
-    builtinThemeOverrides?: unknown;
-} & {
-    position: "static" | "absolute";
-    contentStyle: string | import("vue").CSSProperties;
-    embedded: boolean;
-    nativeScrollbar: boolean;
-    hasSider: boolean;
-    siderPlacement: "left" | "right";
-} & {
-    onScroll?: ((e: Event) => void) | undefined;
-    theme?: import("../../_mixins").Theme<"Layout", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    embedded: BooleanConstructor;
+    position: {
+        readonly type: import("vue").PropType<"static" | "absolute">;
+        readonly default: "static";
+    };
+    nativeScrollbar: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    scrollbarProps: import("vue").PropType<Partial<import("../../_internal").ScrollbarProps>>;
+    onScroll: import("vue").PropType<(e: Event) => void>;
+    contentStyle: {
+        readonly type: import("vue").PropType<string | import("vue").CSSProperties>;
+        readonly default: "";
+    };
+    hasSider: BooleanConstructor;
+    siderPlacement: {
+        readonly type: import("vue").PropType<"left" | "right">;
+        readonly default: "left";
+    };
+    theme: import("vue").PropType<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -319,8 +322,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
+    }>>;
+    themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -349,8 +352,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
+    }>>>;
+    builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -379,9 +382,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    scrollbarProps?: Partial<import("../../_internal").ScrollbarProps> | undefined;
-}>, {
+    }>>>;
+}>>, {
     position: "static" | "absolute";
     contentStyle: string | import("vue").CSSProperties;
     embedded: boolean;

package/es/layout/src/LayoutFooter.d.ts

@@ -198,19 +198,14 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    inverted?: unknown;
-    position?: unknown;
-    bordered?: unknown;
-    theme?: unknown;
-    themeOverrides?: unknown;
-    builtinThemeOverrides?: unknown;
-} & {
-    position: "static" | "absolute";
-    bordered: boolean;
-    inverted: boolean;
-} & {
-    theme?: import("../../_mixins").Theme<"Layout", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    inverted: BooleanConstructor;
+    position: {
+        readonly type: import("vue").PropType<"static" | "absolute">;
+        readonly default: "static";
+    };
+    bordered: BooleanConstructor;
+    theme: import("vue").PropType<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -239,8 +234,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
+    }>>;
+    themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -269,8 +264,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
+    }>>>;
+    builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -299,8 +294,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-}>, {
+    }>>>;
+}>>, {
     position: "static" | "absolute";
     bordered: boolean;
     inverted: boolean;

package/es/layout/src/LayoutFooter.js

@@ -15,17 +15,17 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                 const vars = {
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-bezier': cubicBezierEaseInOut
                 };
                 if (props.inverted) {
-                    vars['--color'] = self.footerColorInverted;
-                    vars['--text-color'] = self.textColorInverted;
-                    vars['--border-color'] = self.footerBorderColorInverted;
+                    vars['--n-color'] = self.footerColorInverted;
+                    vars['--n-text-color'] = self.textColorInverted;
+                    vars['--n-border-color'] = self.footerBorderColorInverted;
                 }
                 else {
-                    vars['--color'] = self.footerColor;
-                    vars['--text-color'] = self.textColor;
-                    vars['--border-color'] = self.footerBorderColor;
+                    vars['--n-color'] = self.footerColor;
+                    vars['--n-text-color'] = self.textColor;
+                    vars['--n-border-color'] = self.footerBorderColor;
                 }
                 return vars;
             })

package/es/layout/src/LayoutHeader.d.ts

@@ -114,19 +114,17 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    position?: unknown;
-    inverted?: unknown;
-    bordered?: unknown;
-    theme?: unknown;
-    themeOverrides?: unknown;
-    builtinThemeOverrides?: unknown;
-} & {
-    position: "static" | "absolute";
-    bordered: boolean;
-    inverted: boolean;
-} & {
-    theme?: import("../../_mixins").Theme<"Layout", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    position: {
+        readonly type: import("vue").PropType<"static" | "absolute">;
+        readonly default: "static";
+    };
+    inverted: BooleanConstructor;
+    bordered: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    theme: import("vue").PropType<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -155,8 +153,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
+    }>>;
+    themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -185,8 +183,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
+    }>>>;
+    builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Layout", {
         textColor: string;
         textColorInverted: string;
         color: string;
@@ -215,8 +213,8 @@ declare const _default: import("vue").DefineComponent<{
             color: string;
             colorHover: string;
         }, any>;
-    }>> | undefined;
-}>, {
+    }>>>;
+}>>, {
     position: "static" | "absolute";
     bordered: boolean;
     inverted: boolean;

package/es/layout/src/LayoutHeader.js

@@ -22,17 +22,17 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                 const vars = {
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-bezier': cubicBezierEaseInOut
                 };
                 if (props.inverted) {
-                    vars['--color'] = self.headerColorInverted;
-                    vars['--text-color'] = self.textColorInverted;
-                    vars['--border-color'] = self.headerBorderColorInverted;
+                    vars['--n-color'] = self.headerColorInverted;
+                    vars['--n-text-color'] = self.textColorInverted;
+                    vars['--n-border-color'] = self.headerBorderColorInverted;
                 }
                 else {
-                    vars['--color'] = self.headerColor;
-                    vars['--text-color'] = self.textColor;
-                    vars['--border-color'] = self.headerBorderColor;
+                    vars['--n-color'] = self.headerColor;
+                    vars['--n-text-color'] = self.textColor;
+                    vars['--n-border-color'] = self.headerBorderColor;
                 }
                 return vars;
             })