naive-ui 2.25.3 → 2.25.6

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

@@ -15,8 +15,9 @@ function useThemeClass(componentName, hashRef, cssVarsRef, props) {
     const themeClassRef = (0, vue_1.ref)('');
     const ssrAdapter = (0, vue3_ssr_1.useSsrAdapter)();
     let renderCallback;
+    const hashClassPrefix = `__${componentName}`;
     const mountStyle = () => {
-        let finalThemeHash = componentName;
+        let finalThemeHash = hashClassPrefix;
         const hashValue = hashRef ? hashRef.value : undefined;
         const themeHash = mergedThemeHashRef === null || mergedThemeHashRef === void 0 ? void 0 : mergedThemeHashRef.value;
         if (themeHash)

package/lib/button/src/styles/button-rtl.cssr.js

@@ -9,9 +9,9 @@ const cssr_1 = require("../../../_utils/cssr");
 exports.default = (0, cssr_1.cB)('button', [(0, cssr_1.cM)('rtl', `
  direction: rtl;
  `, [(0, cssr_1.cE)('icon', {
-  margin: 'var(--icon-margin)',
+  margin: 'var(--n-icon-margin)',
   marginRight: 0
 }), (0, cssr_1.cE)('content', [(0, cssr_1.c)('~', [(0, cssr_1.cE)('icon', {
-  margin: 'var(--icon-margin)',
+  margin: 'var(--n-icon-margin)',
   marginLeft: 0
 })])])])]);

package/lib/cascader/src/Cascader.d.ts

@@ -235,6 +235,7 @@ declare const cascaderProps: {
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -419,6 +420,7 @@ declare const cascaderProps: {
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -603,6 +605,7 @@ declare const cascaderProps: {
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -877,6 +880,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -1061,6 +1065,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -1245,6 +1250,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -1595,6 +1601,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -1947,6 +1954,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -2131,6 +2139,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -2315,6 +2324,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;

package/lib/cascader/src/CascaderMenu.d.ts

@@ -291,6 +291,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;

package/lib/cascader/src/CascaderOption.d.ts

@@ -267,6 +267,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;

package/lib/cascader/src/CascaderSelectMenu.d.ts

@@ -279,6 +279,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;

package/lib/cascader/src/CascaderSubmenu.d.ts

@@ -260,6 +260,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -359,6 +360,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;

package/lib/cascader/styles/light.d.ts

@@ -160,6 +160,7 @@ declare const cascaderLight: import("../../_mixins").Theme<"Cascader", {
         colorHover: string;
     }, any>;
     Checkbox: import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;

package/lib/checkbox/src/Checkbox.d.ts

@@ -35,6 +35,7 @@ declare const checkboxProps: {
     privateInsideTable: BooleanConstructor;
     onChange: PropType<MaybeArray<OnUpdateChecked>>;
     theme: PropType<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -63,6 +64,7 @@ declare const checkboxProps: {
         labelPadding: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -91,6 +93,7 @@ declare const checkboxProps: {
         labelPadding: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -154,6 +157,7 @@ declare const _default: import("vue").DefineComponent<{
     privateInsideTable: BooleanConstructor;
     onChange: PropType<MaybeArray<OnUpdateChecked>>;
     theme: PropType<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -182,6 +186,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -210,6 +215,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -238,6 +244,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
 }, import("../../_mixins/use-form-item").UseFormItem<"small" | "medium" | "large"> & CheckboxInst & {
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     selfRef: import("vue").Ref<HTMLDivElement | null>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedDisabled: import("vue").ComputedRef<boolean>;
@@ -347,6 +354,7 @@ declare const _default: import("vue").DefineComponent<{
             name: "common";
         };
         self: {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -384,6 +392,7 @@ declare const _default: import("vue").DefineComponent<{
     handleKeyUp: (e: KeyboardEvent) => void;
     handleKeyDown: (e: KeyboardEvent) => void;
     cssVars: import("vue").ComputedRef<{
+        '--n-label-line-height': string;
         '--n-size': string;
         '--n-bezier': string;
         '--n-border-radius': string;
@@ -444,6 +453,7 @@ declare const _default: import("vue").DefineComponent<{
     privateInsideTable: BooleanConstructor;
     onChange: PropType<MaybeArray<OnUpdateChecked>>;
     theme: PropType<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -472,6 +482,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -500,6 +511,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;

package/lib/checkbox/src/Checkbox.js

@@ -15,6 +15,7 @@ const CheckMark_1 = __importDefault(require("./CheckMark"));
 const LineMark_1 = __importDefault(require("./LineMark"));
 const CheckboxGroup_1 = require("./CheckboxGroup");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
 const checkboxProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: String, checked: {
         type: [Boolean, String, Number],
         default: undefined
@@ -50,7 +51,7 @@ exports.default = (0, vue_1.defineComponent)({
             });
         }
         const selfRef = (0, vue_1.ref)(null);
-        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const formItem = (0, _mixins_1.useFormItem)(props, {
             mergedSize(NFormItem) {
                 const { size } = props;
@@ -167,10 +168,12 @@ exports.default = (0, vue_1.defineComponent)({
                 (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
+        const rtlEnabledRef = (0, use_rtl_1.default)('Checkbox', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { value: mergedSize } = mergedSizeRef;
-            const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderFocus, borderDisabled, borderChecked, boxShadowFocus, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.createKey)('size', mergedSize)]: size } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderFocus, borderDisabled, borderChecked, boxShadowFocus, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, labelLineHeight, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.createKey)('size', mergedSize)]: size } } = themeRef.value;
             return {
+                '--n-label-line-height': labelLineHeight,
                 '--n-size': size,
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-border-radius': borderRadius,
@@ -200,6 +203,7 @@ exports.default = (0, vue_1.defineComponent)({
             ? (0, _mixins_1.useThemeClass)('checkbox', (0, vue_1.computed)(() => mergedSizeRef.value[0]), cssVarsRef, props)
             : undefined;
         return Object.assign(formItem, exposedMethods, {
+            rtlEnabled: rtlEnabledRef,
             selfRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedDisabled: mergedDisabledRef,
@@ -221,6 +225,7 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.h)("div", { ref: "selfRef", class: [
                 `${mergedClsPrefix}-checkbox`,
                 this.themeClass,
+                this.rtlEnabled && `${mergedClsPrefix}-checkbox--rtl`,
                 renderedChecked && `${mergedClsPrefix}-checkbox--checked`,
                 mergedDisabled && `${mergedClsPrefix}-checkbox--disabled`,
                 indeterminate && `${mergedClsPrefix}-checkbox--indeterminate`,
@@ -232,11 +237,13 @@ exports.default = (0, vue_1.defineComponent)({
                     once: true
                 });
             } },
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box` },
-                (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
-                    default: () => this.indeterminate ? ((0, vue_1.h)("div", { key: "indeterminate", class: `${mergedClsPrefix}-checkbox-icon` }, LineMark_1.default)) : ((0, vue_1.h)("div", { key: "check", class: `${mergedClsPrefix}-checkbox-icon` }, CheckMark_1.default))
-                }),
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box__border` })),
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box-wrapper` },
+                "\u00A0",
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box` },
+                    (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
+                        default: () => this.indeterminate ? ((0, vue_1.h)("div", { key: "indeterminate", class: `${mergedClsPrefix}-checkbox-icon` }, LineMark_1.default)) : ((0, vue_1.h)("div", { key: "check", class: `${mergedClsPrefix}-checkbox-icon` }, CheckMark_1.default))
+                    }),
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box__border` }))),
             label !== null || $slots.default ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-checkbox__label`, id: labelId }, $slots.default ? $slots.default() : label)) : null));
     }
 });

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

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr")); // vars:
+// --n-label-line-height
 // --n-bezier
 // --n-size
 // --n-border
@@ -38,14 +39,14 @@ const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
- line-height: 1;
+ line-height: var(--n-label-line-height);
  font-size: var(--n-font-size);
  outline: none;
  cursor: pointer;
  display: inline-flex;
- align-items: center;
- white-space: nowrap;
- vertical-align: middle;
+ flex-wrap: nowrap;
+ align-items: flex-start;
+ word-break: break-word;
  --n-merged-color-table: var(--n-color-table);
  `, [(0, cssr_1.c)('&:hover', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cE)('border', {
   border: 'var(--n-border-checked)'
@@ -91,16 +92,23 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
   fill: 'var(--n-check-mark-color-disabled)'
 })])]), (0, cssr_1.cE)('label', {
   color: 'var(--n-text-color-disabled)'
-})]), (0, cssr_1.cB)('checkbox-box', `
+})]), (0, cssr_1.cB)('checkbox-box-wrapper', `
+ position: relative;
+ width: var(--n-size);
+ flex-shrink: 0;
+ flex-grow: 0;
+ `), (0, cssr_1.cB)('checkbox-box', `
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
  height: var(--n-size);
  width: var(--n-size);
  display: inline-block;
  box-sizing: border-box;
  border-radius: var(--n-border-radius);
  background-color: var(--n-color);
- position: relative;
- transition:
- background-color 0.3s var(--n-bezier);
+ transition: background-color 0.3s var(--n-bezier);
  `, [(0, cssr_1.cE)('border', `
  transition:
  border-color .3s var(--n-bezier),

package/lib/checkbox/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/checkbox/src/styles/rtl.cssr.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const cssr_1 = require("../../../_utils/cssr");
+
+exports.default = (0, cssr_1.cB)('checkbox', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `)]);

package/lib/checkbox/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as checkboxDark } from './dark';
 export { default as checkboxLight } from './light';
+export { checkboxRtl } from './rtl';
 export type { CheckboxThemeVars, CheckboxTheme } from './light';

package/lib/checkbox/styles/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkboxLight = exports.checkboxDark = void 0;
+exports.checkboxRtl = exports.checkboxLight = exports.checkboxDark = void 0;
 var dark_1 = require("./dark");
 Object.defineProperty(exports, "checkboxDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
 var light_1 = require("./light");
 Object.defineProperty(exports, "checkboxLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "checkboxRtl", { enumerable: true, get: function () { return rtl_1.checkboxRtl; } });

package/lib/checkbox/styles/light.d.ts

@@ -1,6 +1,7 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
+    labelLineHeight: string;
     fontSizeSmall: string;
     fontSizeMedium: string;
     fontSizeLarge: string;

package/lib/checkbox/styles/light.js

@@ -8,8 +8,8 @@ const seemly_1 = require("seemly");
 const common_1 = require("../../_styles/common");
 const _common_1 = __importDefault(require("./_common"));
 const self = (vars) => {
-    const { baseColor, inputColorDisabled, cardColor, modalColor, popoverColor, textColorDisabled, borderColor, primaryColor, textColor2, fontSizeSmall, fontSizeMedium, fontSizeLarge, borderRadiusSmall } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { fontSizeSmall,
+    const { baseColor, inputColorDisabled, cardColor, modalColor, popoverColor, textColorDisabled, borderColor, primaryColor, textColor2, fontSizeSmall, fontSizeMedium, fontSizeLarge, borderRadiusSmall, lineHeight } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { labelLineHeight: lineHeight, fontSizeSmall,
         fontSizeMedium,
         fontSizeLarge, borderRadius: borderRadiusSmall, color: baseColor, colorChecked: primaryColor, colorDisabled: inputColorDisabled, colorDisabledChecked: inputColorDisabled, colorTableHeader: cardColor, colorTableHeaderModal: modalColor, colorTableHeaderPopover: popoverColor, checkMarkColor: baseColor, checkMarkColorDisabled: textColorDisabled, checkMarkColorDisabledChecked: textColorDisabled, border: `1px solid ${borderColor}`, borderDisabled: `1px solid ${borderColor}`, borderDisabledChecked: `1px solid ${borderColor}`, borderChecked: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColor}`, boxShadowFocus: `0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, textColor: textColor2, textColorDisabled: textColorDisabled });
 };

package/lib/checkbox/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import type { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const checkboxRtl: RtlItem;

package/lib/checkbox/styles/rtl.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+exports.checkboxRtl = {
+    name: 'Checkbox',
+    style: rtl_cssr_1.default
+};

package/lib/code/src/Code.js

@@ -97,7 +97,9 @@ exports.default = (0, vue_1.defineComponent)({
             };
         });
         const themeClassHandle = inlineThemeDisabled
-            ? (0, _mixins_1.useThemeClass)('code', undefined, cssVarsRef, props)
+            ? (0, _mixins_1.useThemeClass)('code', (0, vue_1.computed)(() => {
+                return `${props.internalFontSize || 'a'}`;
+            }), cssVarsRef, props)
             : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,

package/lib/collapse/src/Collapse.d.ts

@@ -119,6 +119,7 @@ declare const _default: import("vue").DefineComponent<{
         arrowColor: string;
     }, any>>>;
 }, {
+    rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;

package/lib/collapse/src/Collapse.js

@@ -10,6 +10,7 @@ const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
 const collapseProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { defaultExpandedNames: {
         type: [Array, String],
         default: null
@@ -39,7 +40,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Collapse',
     props: collapseProps,
     setup(props, { slots }) {
-        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const uncontrolledExpandedNamesRef = (0, vue_1.ref)(props.defaultExpandedNames);
         const controlledExpandedNamesRef = (0, vue_1.computed)(() => props.expandedNames);
         const mergedExpandedNamesRef = (0, vooks_1.useMergedState)(controlledExpandedNamesRef, uncontrolledExpandedNamesRef);
@@ -104,6 +105,7 @@ exports.default = (0, vue_1.defineComponent)({
             slots,
             toggleItem
         });
+        const rtlEnabledRef = (0, use_rtl_1.default)('Collapse', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titleTextColor, textColor, arrowColor, fontSize, titleFontSize } } = themeRef.value;
             return {
@@ -121,6 +123,7 @@ exports.default = (0, vue_1.defineComponent)({
             ? (0, _mixins_1.useThemeClass)('collapse', undefined, cssVarsRef, props)
             : undefined;
         return {
+            rtlEnabled: rtlEnabledRef,
             mergedTheme: themeRef,
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
@@ -131,6 +134,10 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         var _a;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        return ((0, vue_1.h)("div", { class: [`${this.mergedClsPrefix}-collapse`, this.themeClass], style: this.cssVars }, this.$slots));
+        return ((0, vue_1.h)("div", { class: [
+                `${this.mergedClsPrefix}-collapse`,
+                this.rtlEnabled && `${this.mergedClsPrefix}-collapse--rtl`,
+                this.themeClass
+            ], style: this.cssVars }, this.$slots));
     }
 });

package/lib/collapse/src/CollapseItem.d.ts

@@ -11,6 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly name: PropType<string | number>;
     readonly displayDirective: PropType<"show" | "if">;
 }, {
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     collapseSlots: Readonly<{
         [name: string]: import("vue").Slot | undefined;
     }>;

package/lib/collapse/src/CollapseItem.js

@@ -11,6 +11,8 @@ const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const Collapse_1 = require("./Collapse");
 const CollapseItemContent_1 = __importDefault(require("./CollapseItemContent"));
+const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
+const _mixins_1 = require("../../_mixins");
 const collapseItemProps = {
     title: String,
     name: [String, Number],
@@ -20,6 +22,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'CollapseItem',
     props: collapseItemProps,
     setup(props) {
+        const { mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const randomName = (0, seemly_1.createId)();
         const mergedNameRef = (0, vooks_1.useMemo)(() => {
             var _a;
@@ -42,7 +45,9 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return true;
         });
+        const rtlEnabledRef = (0, use_rtl_1.default)('Collapse', mergedRtlRef, mergedClsPrefixRef);
         return {
+            rtlEnabled: rtlEnabledRef,
             collapseSlots,
             randomName,
             mergedClsPrefix: mergedClsPrefixRef,
@@ -83,8 +88,8 @@ exports.default = (0, vue_1.defineComponent)({
                 ] },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item__header-main`, onClick: this.handleClick },
                     arrowPlacement === 'right' && headerNode,
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item-arrow` }, arrowSlot ? (arrowSlot({ collapsed })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                        default: (_a = collapseSlots.expandIcon) !== null && _a !== void 0 ? _a : (() => (0, vue_1.h)(icons_1.ChevronRightIcon, null))
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item-arrow`, key: this.rtlEnabled ? 0 : 1 }, arrowSlot ? (arrowSlot({ collapsed })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                        default: (_a = collapseSlots.expandIcon) !== null && _a !== void 0 ? _a : (() => this.rtlEnabled ? ((0, vue_1.h)(icons_1.ChevronLeftIcon, null)) : ((0, vue_1.h)(icons_1.ChevronRightIcon, null)))
                     }))),
                     arrowPlacement === 'left' && headerNode),
                 headerExtraSlot && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item__header-extra`, onClick: this.handleClick }, { default: headerExtraSlot }))),

package/lib/collapse/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/collapse/src/styles/rtl.cssr.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const cssr_1 = require("../../../_utils/cssr");
+
+exports.default = (0, cssr_1.cB)('collapse', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `, [(0, cssr_1.cB)('collapse-item', [(0, cssr_1.cB)('collapse-item', {
+  marginRight: '32px',
+  marginLeft: 0
+}), (0, cssr_1.cM)('left-arrow-placement', [(0, cssr_1.cE)('header', [(0, cssr_1.cB)('collapse-item-arrow', {
+  marginRight: 0,
+  marginLeft: '4px'
+})])]), (0, cssr_1.cM)('right-arrow-placement', [(0, cssr_1.cE)('header', [(0, cssr_1.cB)('collapse-item-arrow', {
+  marginLeft: 0,
+  marginRight: '4px'
+})])]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('header', [(0, cssr_1.cM)('active', [(0, cssr_1.cB)('collapse-item-arrow', {
+  transform: 'rotate(-90deg)'
+})])])])])])]);

package/lib/collapse/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as collapseDark } from './dark';
 export { default as collapseLight } from './light';
+export { collapseRtl } from './rtl';
 export type { CollapseThemeVars, CollapseTheme } from './light';

package/lib/collapse/styles/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.collapseLight = exports.collapseDark = void 0;
+exports.collapseRtl = exports.collapseLight = exports.collapseDark = void 0;
 var dark_1 = require("./dark");
 Object.defineProperty(exports, "collapseDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
 var light_1 = require("./light");
 Object.defineProperty(exports, "collapseLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "collapseRtl", { enumerable: true, get: function () { return rtl_1.collapseRtl; } });

package/lib/collapse/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import type { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const collapseRtl: RtlItem;

package/lib/collapse/styles/rtl.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collapseRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+exports.collapseRtl = {
+    name: 'Collapse',
+    style: rtl_cssr_1.default
+};

package/lib/collapse-transition/src/CollapseTransition.d.ts

@@ -47,7 +47,9 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | 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<{
     readonly show: {
         readonly type: BooleanConstructor;