naive-ui 2.25.1 → 2.25.2

package/es/_internal/selection/styles/light.js

@@ -17,19 +17,19 @@ const self = (vars) => {
         // default
         textColor: textColor2, textColorDisabled,
         placeholderColor,
-        placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: inputColor, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: null, boxShadowActive: `0 0 0 2px ${changeColor(primaryColor, {
+        placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: inputColor, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: 'none', boxShadowActive: `0 0 0 2px ${changeColor(primaryColor, {
             alpha: 0.2
         })}`, boxShadowFocus: `0 0 0 2px ${changeColor(primaryColor, {
             alpha: 0.2
         })}`, caretColor: primaryColor, arrowColor: iconColor, arrowColorDisabled: iconColorDisabled, loadingColor: primaryColor, 
         // warning
-        borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: null, boxShadowActiveWarning: `0 0 0 2px ${changeColor(warningColor, {
+        borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: 'none', boxShadowActiveWarning: `0 0 0 2px ${changeColor(warningColor, {
             alpha: 0.2
         })}`, boxShadowFocusWarning: `0 0 0 2px ${changeColor(warningColor, {
             alpha: 0.2
         })}`, colorActiveWarning: inputColor, caretColorWarning: warningColor, 
         // error
-        borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: null, boxShadowActiveError: `0 0 0 2px ${changeColor(errorColor, {
+        borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: 'none', boxShadowActiveError: `0 0 0 2px ${changeColor(errorColor, {
             alpha: 0.2
         })}`, boxShadowFocusError: `0 0 0 2px ${changeColor(errorColor, {
             alpha: 0.2

package/es/_mixins/index.d.ts

@@ -6,4 +6,4 @@ export { default as useLocale } from './use-locale';
 export { default as useStyle } from './use-style';
 export { default as useHljs } from './use-hljs';
 export type { Hljs } from './use-hljs';
-export { useCssVarsClass } from './use-css-vars-class';
+export { useThemeClass, emptyThemeClassHandle } from './use-css-vars-class';

package/es/_mixins/index.js

@@ -4,4 +4,4 @@ export { default as useConfig, defaultClsPrefix } from './use-config';
 export { default as useLocale } from './use-locale';
 export { default as useStyle } from './use-style';
 export { default as useHljs } from './use-hljs';
-export { useCssVarsClass } from './use-css-vars-class';
+export { useThemeClass, emptyThemeClassHandle } from './use-css-vars-class';

package/es/_mixins/use-css-vars-class.d.ts

@@ -1,4 +1,11 @@
 import { ComputedRef, Ref } from 'vue';
-export declare function useCssVarsClass(componentName: string, hashRef: Ref<string> | undefined, cssVarsRef: ComputedRef<Record<string, string>> | undefined, props: {
+export declare function useThemeClass(componentName: string, hashRef: Ref<string> | undefined, cssVarsRef: ComputedRef<Record<string, string>> | undefined, props: {
     themeOverrides?: unknown;
-}): Ref<string>;
+}): {
+    themeClass: Ref<string>;
+    onRender: () => void;
+};
+export declare const emptyThemeClassHandle: {
+    themeClass?: Ref<string>;
+    onRender?: () => void;
+};

package/es/_mixins/use-css-vars-class.js

@@ -1,20 +1,18 @@
 import { ref, inject, watchEffect } from 'vue';
 import { hash } from 'css-render';
+import { useSsrAdapter } from '@css-render/vue3-ssr';
 import { configProviderInjectionKey } from '../config-provider/src/context';
 import { throwError } from '../_utils';
 import { c } from '../_utils/cssr';
-export function useCssVarsClass(componentName, hashRef, cssVarsRef, props) {
+export function useThemeClass(componentName, hashRef, cssVarsRef, props) {
     var _a;
     if (!cssVarsRef)
-        throwError('useCssVarsClass', 'cssVarsRef is not passed');
+        throwError('useThemeClass', 'cssVarsRef is not passed');
     const mergedThemeHashRef = (_a = inject(configProviderInjectionKey, null)) === null || _a === void 0 ? void 0 : _a.mergedThemeHashRef;
-    const cssVarsClassRef = ref('');
+    const themeClassRef = ref('');
+    const ssrAdapter = useSsrAdapter();
+    let renderCallback;
     const mountStyle = () => {
-        const cssVars = cssVarsRef.value;
-        let style = '';
-        for (const key in cssVars) {
-            style += `${key}: ${cssVars[key]};`;
-        }
         let finalThemeHash = componentName;
         const hashValue = hashRef ? hashRef.value : undefined;
         const themeHash = mergedThemeHashRef === null || mergedThemeHashRef === void 0 ? void 0 : mergedThemeHashRef.value;
@@ -25,13 +23,31 @@ export function useCssVarsClass(componentName, hashRef, cssVarsRef, props) {
         if (props.themeOverrides) {
             finalThemeHash += '-' + hash(JSON.stringify(props.themeOverrides));
         }
-        cssVarsClassRef.value = finalThemeHash;
-        c(`.${finalThemeHash}`, style).mount({
-            id: finalThemeHash
-        });
+        themeClassRef.value = finalThemeHash;
+        renderCallback = () => {
+            const cssVars = cssVarsRef.value;
+            let style = '';
+            for (const key in cssVars) {
+                style += `${key}: ${cssVars[key]};`;
+            }
+            c(`.${finalThemeHash}`, style).mount({
+                id: finalThemeHash,
+                ssr: ssrAdapter
+            });
+            renderCallback = undefined;
+        };
     };
     watchEffect(() => {
         mountStyle();
     });
-    return cssVarsClassRef;
+    return {
+        themeClass: themeClassRef,
+        onRender: () => {
+            renderCallback === null || renderCallback === void 0 ? void 0 : renderCallback();
+        }
+    };
 }
+export const emptyThemeClassHandle = {
+    themeClass: undefined,
+    onRender: undefined
+};

package/es/_mixins/use-form-item.d.ts

@@ -1,5 +1,5 @@
 import { ComputedRef, Ref } from 'vue';
-import { FormValidationStatus } from '../form/src/interface';
+import type { FormValidationStatus } from '../form/src/interface';
 declare type FormItemSize = 'small' | 'medium' | 'large';
 declare type AllowedSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge' | number;
 export interface FormItemInjection {

package/es/_utils/css/color-to-class.d.ts

@@ -0,0 +1 @@
+export declare function color2Class(color: string): string;

package/es/_utils/css/color-to-class.js

@@ -0,0 +1,3 @@
+export function color2Class(color) {
+    return color.replace(/#|\(|\)|,|\s/g, '_');
+}

package/es/_utils/css/format-length.d.ts

@@ -3,5 +3,5 @@ interface FormatLengthOptions {
     offset?: number;
     attachPx?: boolean;
 }
-declare function formatLength<T extends number | string | null | undefined | any>(length: T, { c, offset, attachPx }?: FormatLengthOptions): T extends null ? null : T extends undefined ? undefined : T extends string | number ? string : T;
-export default formatLength;
+export declare function formatLength<T extends number | string | null | undefined | any>(length: T, { c, offset, attachPx }?: FormatLengthOptions): T extends null ? null : T extends undefined ? undefined : T extends string | number ? string : T;
+export {};

package/es/_utils/css/format-length.js

@@ -1,6 +1,6 @@
 const pureNumberRegex = /^(\d|\.)+$/;
 const numberRegex = /(\d|\.)+/;
-function formatLength(length, { c = 1, offset = 0, attachPx = true } = {}) {
+export function formatLength(length, { c = 1, offset = 0, attachPx = true } = {}) {
     if (typeof length === 'number') {
         const result = (length + offset) * c;
         if (result === 0)
@@ -28,4 +28,3 @@ function formatLength(length, { c = 1, offset = 0, attachPx = true } = {}) {
     }
     return length;
 }
-export default formatLength;

package/es/_utils/css/index.d.ts

@@ -1 +1,2 @@
-export { default as formatLength } from './format-length';
+export { formatLength } from './format-length';
+export { color2Class } from './color-to-class';

package/es/_utils/css/index.js

@@ -1 +1,2 @@
-export { default as formatLength } from './format-length';
+export { formatLength } from './format-length';
+export { color2Class } from './color-to-class';

package/es/_utils/index.d.ts

@@ -2,6 +2,6 @@ export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, g
 export type { MaybeArray } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute } from './naive';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes, Mutable } from './naive';
-export { formatLength } from './css';
+export { formatLength, color2Class } from './css';
 export { createKey } from './cssr';
 export * from './composable';

package/es/_utils/index.js

@@ -1,5 +1,5 @@
 export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, getFirstSlotVNode, createDataKey, createRefSetter, createInjectionKey, resolveSlot, resolveSlotWithProps, resolveWrappedSlot, isSlotEmpty } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute } from './naive';
-export { formatLength } from './css';
+export { formatLength, color2Class } from './css';
 export { createKey } from './cssr';
 export * from './composable';

package/es/_utils/vue/resolve-slot.js

@@ -23,7 +23,6 @@ export function resolveSlot(slot, fallback) {
     return (slot && ensureValidVNode(slot())) || fallback();
 }
 export function resolveSlotWithProps(slot, props, fallback) {
-    console.log(slot && ensureValidVNode(slot(props)));
     return (slot && ensureValidVNode(slot(props))) || fallback(props);
 }
 export function resolveWrappedSlot(slot, wrapper) {

package/es/alert/src/Alert.d.ts

@@ -10,7 +10,7 @@ declare const alertProps: {
         default: boolean;
     };
     type: {
-        type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
     closable: {
@@ -192,7 +192,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     type: {
-        type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
     closable: {
@@ -559,7 +559,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     type: {
-        type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
     closable: {
@@ -730,7 +730,7 @@ declare const _default: import("vue").DefineComponent<{
         padding: string;
     }, any>>>;
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
     onAfterLeave: Function;
     title: string;
     showIcon: boolean;

package/es/auto-complete/src/AutoComplete.d.ts

@@ -1486,8 +1486,8 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean | undefined;
     to: string | boolean | HTMLElement;
     options: AutoCompleteOptions;
-    bordered: boolean | undefined;
     loading: boolean;
+    bordered: boolean | undefined;
     placement: FollowerPlacement;
     clearable: boolean;
     defaultValue: string | null;

package/es/badge/src/Badge.d.ts

@@ -8,7 +8,7 @@ declare const badgeProps: {
         readonly default: false;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly show: {
@@ -61,7 +61,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: false;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly show: {
@@ -126,7 +126,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: false;
     };
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly show: {
@@ -170,7 +170,7 @@ declare const _default: import("vue").DefineComponent<{
         fontFamily: string;
     }, any>>>;
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
     show: boolean;
     dot: boolean;
     showZero: boolean;

package/es/button/src/Button.d.ts

@@ -1320,6 +1320,8 @@ declare const Button: import("vue").DefineComponent<{
         rippleDuration: string;
     }, any>>>;
 }, {
+    themeClass?: import("vue").Ref<string> | undefined;
+    onRender?: (() => void) | undefined;
     selfElRef: import("vue").Ref<HTMLElement | null>;
     waveElRef: import("vue").Ref<{
         play: () => void;
@@ -1342,7 +1344,6 @@ declare const Button: import("vue").DefineComponent<{
         '--n-border-color-focus': string;
         '--n-border-color-disabled': string;
     } | null>;
-    themeClass: import("vue").Ref<string> | undefined;
     cssVars: import("vue").ComputedRef<{
         '--n-width': string;
         '--n-height': string;
@@ -2043,8 +2044,8 @@ declare const Button: import("vue").DefineComponent<{
     disabled: boolean;
     focusable: boolean;
     strong: boolean;
-    bordered: boolean;
     loading: boolean;
+    bordered: boolean;
     tertiary: boolean;
     keyboard: boolean;
     ghost: boolean;

package/es/button/src/Button.js

@@ -1,9 +1,9 @@
 import { h, ref, computed, inject, onMounted, defineComponent, watchEffect } from 'vue';
 import { useMemo } from 'vooks';
 import { createHoverColor, createPressedColor } from '../../_utils/color/index';
-import { useConfig, useFormItem, useTheme, useCssVarsClass } from '../../_mixins';
+import { emptyThemeClassHandle, useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins';
 import { NFadeInExpandTransition, NIconSwitchTransition, NBaseLoading, NBaseWave } from '../../_internal';
-import { call, createKey, warnOnce } from '../../_utils';
+import { call, color2Class, createKey, warnOnce } from '../../_utils';
 import { buttonLight } from '../styles';
 import { buttonGroupInjectionKey } from './ButtonGroup';
 import style from './styles/button.cssr';
@@ -360,8 +360,8 @@ const Button = defineComponent({
             };
             return Object.assign(Object.assign(Object.assign(Object.assign({ '--n-bezier': cubicBezierEaseInOut, '--n-bezier-ease-out': cubicBezierEaseOut, '--n-ripple-duration': rippleDuration, '--n-opacity-disabled': opacityDisabled, '--n-wave-opacity': waveOpacity }, fontProps), colorProps), borderProps), sizeProps);
         });
-        const themeClassRef = disableInlineTheme
-            ? useCssVarsClass('button', computed(() => {
+        const themeClassHandle = disableInlineTheme
+            ? useThemeClass('button', computed(() => {
                 let hash = '';
                 const { dashed, type, ghost, text, color, round, circle, textColor, secondary, tertiary, quaternary, strong } = props;
                 if (dashed)
@@ -383,30 +383,21 @@ const Button = defineComponent({
                 if (strong)
                     hash += 'i';
                 if (color)
-                    hash += 'j' + color.replace(/#|\(|\)|,|\s/g, '_');
+                    hash += 'j' + color2Class(color);
                 if (textColor)
-                    hash += 'k' + textColor.replace(/#|\(|\)|,|\s/g, '_');
+                    hash += 'k' + color2Class(textColor);
                 const { value: size } = mergedSizeRef;
                 hash += 'l' + size[0];
                 hash += 'm' + type[0];
                 return hash;
             }), cssVarsRef, props)
-            : undefined;
-        return {
-            selfElRef,
-            waveElRef,
-            mergedClsPrefix: mergedClsPrefixRef,
-            mergedFocusable: mergedFocusableRef,
-            mergedSize: mergedSizeRef,
-            showBorder: showBorderRef,
-            enterPressed: enterPressedRef,
-            rtlEnabled: rtlEnabledRef,
-            handleMousedown,
+            : emptyThemeClassHandle;
+        return Object.assign({ selfElRef,
+            waveElRef, mergedClsPrefix: mergedClsPrefixRef, mergedFocusable: mergedFocusableRef, mergedSize: mergedSizeRef, showBorder: showBorderRef, enterPressed: enterPressedRef, rtlEnabled: rtlEnabledRef, handleMousedown,
             handleKeydown,
             handleBlur,
             handleKeyup,
-            handleClick,
-            customColorCssVars: computed(() => {
+            handleClick, customColorCssVars: computed(() => {
                 const { color } = props;
                 if (!color)
                     return null;
@@ -418,13 +409,11 @@ const Button = defineComponent({
                     '--n-border-color-focus': hoverColor,
                     '--n-border-color-disabled': color
                 };
-            }),
-            themeClass: themeClassRef,
-            cssVars: disableInlineTheme ? undefined : cssVarsRef
-        };
+            }), cssVars: disableInlineTheme ? undefined : cssVarsRef }, themeClassHandle);
     },
     render() {
-        const { $slots, mergedClsPrefix, tag: Component } = this;
+        const { $slots, mergedClsPrefix, tag: Component, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h(Component, { ref: "selfElRef", class: [
                 this.themeClass,
                 `${mergedClsPrefix}-button`,

package/es/button/styles/index.d.ts

@@ -1,4 +1,4 @@
 export { default as buttonDark } from './dark';
 export { default as buttonLight } from './light';
-export { default as buttonRtl } from './rtl';
+export { buttonRtl } from './rtl';
 export type { ButtonThemeVars, ButtonTheme } from './light';

package/es/button/styles/index.js

@@ -1,3 +1,3 @@
 export { default as buttonDark } from './dark';
 export { default as buttonLight } from './light';
-export { default as buttonRtl } from './rtl';
+export { buttonRtl } from './rtl';

package/es/button/styles/rtl.d.ts

@@ -1,5 +1,2 @@
-declare const _default: {
-    name: string;
-    style: import("css-render").CNode;
-};
-export default _default;
+import { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const buttonRtl: RtlItem;

package/es/button/styles/rtl.js

@@ -1,5 +1,5 @@
 import rtlStyle from '../src/styles/button-rtl.cssr';
-export default {
+export const buttonRtl = {
     name: 'Button',
     style: rtlStyle
 };

package/es/card/src/Card.d.ts

@@ -274,6 +274,8 @@ declare const _default: import("vue").DefineComponent<{
         closeSize: string;
     }, any>>>;
 }, {
+    themeClass?: import("vue").Ref<string> | undefined;
+    onRender?: (() => void) | undefined;
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedTheme: import("vue").ComputedRef<{
@@ -440,7 +442,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-font-size': string;
         '--n-title-font-size': string;
         '--n-close-size': string;
-    }>;
+    }> | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;

package/es/card/src/Card.js

@@ -1,6 +1,6 @@
 import { h, defineComponent, computed } from 'vue';
 import { getPadding } from 'seemly';
-import { useConfig, useTheme } from '../../_mixins';
+import { emptyThemeClassHandle, useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { call, createKey, keysOf } from '../../_utils';
 import { NBaseClose } from '../../_internal';
 import { cardLight } from '../styles';
@@ -45,49 +45,52 @@ export default defineComponent({
                 call(onClose);
         };
         const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
+        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
         const themeRef = useTheme('Card', '-card', style, cardLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl('Card', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
-        return {
-            rtlEnabled: rtlEnabledRef,
-            mergedClsPrefix: mergedClsPrefixRef,
-            mergedTheme: themeRef,
-            handleCloseClick,
-            cssVars: computed(() => {
-                const { size } = props;
-                const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, closeSize, boxShadow, colorPopover, colorEmbedded, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = getPadding(padding);
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border-radius': borderRadius,
-                    '--n-color': props.embedded ? colorEmbedded : color,
-                    '--n-color-modal': colorModal,
-                    '--n-color-popover': colorPopover,
-                    '--n-color-target': colorTarget,
-                    '--n-text-color': textColor,
-                    '--n-line-height': lineHeight,
-                    '--n-action-color': actionColor,
-                    '--n-title-text-color': titleTextColor,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-close-color': closeColor,
-                    '--n-close-color-hover': closeColorHover,
-                    '--n-close-color-pressed': closeColorPressed,
-                    '--n-border-color': borderColor,
-                    '--n-box-shadow': boxShadow,
-                    // size
-                    '--n-padding-top': paddingTop,
-                    '--n-padding-bottom': paddingBottom,
-                    '--n-padding-left': paddingLeft,
-                    '--n-font-size': fontSize,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-close-size': closeSize
-                };
-            })
-        };
+        const cssVarsRef = computed(() => {
+            const { size } = props;
+            const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, closeSize, boxShadow, colorPopover, colorEmbedded, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = getPadding(padding);
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-color': props.embedded ? colorEmbedded : color,
+                '--n-color-modal': colorModal,
+                '--n-color-popover': colorPopover,
+                '--n-color-target': colorTarget,
+                '--n-text-color': textColor,
+                '--n-line-height': lineHeight,
+                '--n-action-color': actionColor,
+                '--n-title-text-color': titleTextColor,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-close-color': closeColor,
+                '--n-close-color-hover': closeColorHover,
+                '--n-close-color-pressed': closeColorPressed,
+                '--n-border-color': borderColor,
+                '--n-box-shadow': boxShadow,
+                // size
+                '--n-padding-top': paddingTop,
+                '--n-padding-bottom': paddingBottom,
+                '--n-padding-left': paddingLeft,
+                '--n-font-size': fontSize,
+                '--n-title-font-size': titleFontSize,
+                '--n-close-size': closeSize
+            };
+        });
+        const themeClassHandle = disableInlineTheme
+            ? useThemeClass('card', computed(() => {
+                return props.size[0];
+            }), cssVarsRef, props)
+            : emptyThemeClassHandle;
+        return Object.assign({ rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, handleCloseClick, cssVars: disableInlineTheme ? undefined : cssVarsRef }, themeClassHandle);
     },
     render() {
-        const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, $slots } = this;
+        const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, onRender, $slots } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { class: [
                 `${mergedClsPrefix}-card`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-card--rtl`]: rtlEnabled,
                     [`${mergedClsPrefix}-card--content${typeof segmented !== 'boolean' && segmented.content === 'soft'

package/es/card/styles/index.d.ts

@@ -1,4 +1,4 @@
 export { default as cardDark } from './dark';
 export { default as cardLight } from './light';
-export { default as cardRtl } from './rtl';
+export { cardRtl } from './rtl';
 export type { CardTheme, CardThemeVars } from './light';

package/es/card/styles/index.js

@@ -1,3 +1,3 @@
 export { default as cardDark } from './dark';
 export { default as cardLight } from './light';
-export { default as cardRtl } from './rtl';
+export { cardRtl } from './rtl';

package/es/card/styles/rtl.d.ts

@@ -1,5 +1,2 @@
-declare const _default: {
-    name: string;
-    style: import("css-render").CNode;
-};
-export default _default;
+import { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const cardRtl: RtlItem;

package/es/card/styles/rtl.js

@@ -1,5 +1,5 @@
 import rtlStyle from '../src/styles/rtl.cssr';
-export default {
+export const cardRtl = {
     name: 'Card',
     style: rtlStyle
 };