naive-ui 2.25.5 → 2.25.6

package/es/_internal/scrollbar/src/ScrollBar.d.ts

@@ -42,6 +42,7 @@ export interface ScrollbarInstMethods {
     handleMouseLeaveWrapper: () => void;
 }
 export interface ScrollbarInst extends ScrollbarInstMethods {
+    $el: HTMLElement;
     containerRef: HTMLElement | null;
     contentRef: HTMLElement | null;
     containerScrollTop: number;

package/es/_internal/select-menu/src/SelectMenu.d.ts

@@ -390,6 +390,7 @@ declare const _default: import("vue").DefineComponent<{
         scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
     } | null>;
     scrollbarRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;

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

@@ -2,9 +2,9 @@ import { cB, cM, cE, c } from '../../../_utils/cssr';
 export default cB('button', [cM('rtl', `
  direction: rtl;
  `, [cE('icon', {
-  margin: 'var(--icon-margin)',
+  margin: 'var(--n-icon-margin)',
   marginRight: 0
 }), cE('content', [c('~', [cE('icon', {
-  margin: 'var(--icon-margin)',
+  margin: 'var(--n-icon-margin)',
   marginLeft: 0
 })])])])]);

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/checkbox/src/Checkbox.js

@@ -10,6 +10,7 @@ import CheckMark from './CheckMark';
 import LineMark from './LineMark';
 import { checkboxGroupInjectionKey } from './CheckboxGroup';
 import style from './styles/index.cssr';
+import useRtl from '../../_mixins/use-rtl';
 const checkboxProps = Object.assign(Object.assign({}, useTheme.props), { size: String, checked: {
         type: [Boolean, String, Number],
         default: undefined
@@ -45,7 +46,7 @@ export default defineComponent({
             });
         }
         const selfRef = ref(null);
-        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
         const formItem = useFormItem(props, {
             mergedSize(NFormItem) {
                 const { size } = props;
@@ -162,10 +163,12 @@ export default defineComponent({
                 (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
+        const rtlEnabledRef = useRtl('Checkbox', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = 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, [createKey('fontSize', mergedSize)]: fontSize, [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, [createKey('fontSize', mergedSize)]: fontSize, [createKey('size', mergedSize)]: size } } = themeRef.value;
             return {
+                '--n-label-line-height': labelLineHeight,
                 '--n-size': size,
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-border-radius': borderRadius,
@@ -195,6 +198,7 @@ export default defineComponent({
             ? useThemeClass('checkbox', computed(() => mergedSizeRef.value[0]), cssVarsRef, props)
             : undefined;
         return Object.assign(formItem, exposedMethods, {
+            rtlEnabled: rtlEnabledRef,
             selfRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedDisabled: mergedDisabledRef,
@@ -216,6 +220,7 @@ export default defineComponent({
         return (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`,
@@ -227,11 +232,13 @@ export default defineComponent({
                     once: true
                 });
             } },
-            h("div", { class: `${mergedClsPrefix}-checkbox-box` },
-                h(NIconSwitchTransition, null, {
-                    default: () => this.indeterminate ? (h("div", { key: "indeterminate", class: `${mergedClsPrefix}-checkbox-icon` }, LineMark)) : (h("div", { key: "check", class: `${mergedClsPrefix}-checkbox-icon` }, CheckMark))
-                }),
-                h("div", { class: `${mergedClsPrefix}-checkbox-box__border` })),
+            h("div", { class: `${mergedClsPrefix}-checkbox-box-wrapper` },
+                "\u00A0",
+                h("div", { class: `${mergedClsPrefix}-checkbox-box` },
+                    h(NIconSwitchTransition, null, {
+                        default: () => this.indeterminate ? (h("div", { key: "indeterminate", class: `${mergedClsPrefix}-checkbox-icon` }, LineMark)) : (h("div", { key: "check", class: `${mergedClsPrefix}-checkbox-icon` }, CheckMark))
+                    }),
+                    h("div", { class: `${mergedClsPrefix}-checkbox-box__border` }))),
             label !== null || $slots.default ? (h("span", { class: `${mergedClsPrefix}-checkbox__label`, id: labelId }, $slots.default ? $slots.default() : label)) : null));
     }
 });

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

@@ -1,5 +1,6 @@
 import { c, cB, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr';
 import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr'; // vars:
+// --n-label-line-height
 // --n-bezier
 // --n-size
 // --n-border
@@ -24,14 +25,14 @@ import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr'
 // --n-label-padding
 
 export default c([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);
  `, [c('&:hover', [cB('checkbox-box', [cE('border', {
   border: 'var(--n-border-checked)'
@@ -77,16 +78,23 @@ c('.check-icon', `
   fill: 'var(--n-check-mark-color-disabled)'
 })])]), cE('label', {
   color: 'var(--n-text-color-disabled)'
-})]), cB('checkbox-box', `
+})]), cB('checkbox-box-wrapper', `
+ position: relative;
+ width: var(--n-size);
+ flex-shrink: 0;
+ flex-grow: 0;
+ `), 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);
  `, [cE('border', `
  transition:
  border-color .3s var(--n-bezier),

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

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

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

@@ -0,0 +1,4 @@
+import { cB, cM } from '../../../_utils/cssr';
+export default cB('checkbox', [cM('rtl', `
+ direction: rtl;
+ `)]);

package/es/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/es/checkbox/styles/index.js

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

package/es/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/es/checkbox/styles/light.js

@@ -2,8 +2,8 @@ import { changeColor } from 'seemly';
 import { commonLight } from '../../_styles/common';
 import commonVariables from './_common';
 export const self = (vars) => {
-    const { baseColor, inputColorDisabled, cardColor, modalColor, popoverColor, textColorDisabled, borderColor, primaryColor, textColor2, fontSizeSmall, fontSizeMedium, fontSizeLarge, borderRadiusSmall } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { fontSizeSmall,
+    const { baseColor, inputColorDisabled, cardColor, modalColor, popoverColor, textColorDisabled, borderColor, primaryColor, textColor2, fontSizeSmall, fontSizeMedium, fontSizeLarge, borderRadiusSmall, lineHeight } = vars;
+    return Object.assign(Object.assign({}, commonVariables), { 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 ${changeColor(primaryColor, { alpha: 0.3 })}`, textColor: textColor2, textColorDisabled: textColorDisabled });
 };

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

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

package/es/checkbox/styles/rtl.js

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

package/es/code/src/Code.js

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

package/es/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/es/collapse/src/Collapse.js

@@ -4,6 +4,7 @@ import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { call, createInjectionKey, warn } from '../../_utils';
 import { collapseLight } from '../styles';
 import style from './styles/index.cssr';
+import useRtl from '../../_mixins/use-rtl';
 const collapseProps = Object.assign(Object.assign({}, useTheme.props), { defaultExpandedNames: {
         type: [Array, String],
         default: null
@@ -33,7 +34,7 @@ export default defineComponent({
     name: 'Collapse',
     props: collapseProps,
     setup(props, { slots }) {
-        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
         const uncontrolledExpandedNamesRef = ref(props.defaultExpandedNames);
         const controlledExpandedNamesRef = computed(() => props.expandedNames);
         const mergedExpandedNamesRef = useMergedState(controlledExpandedNamesRef, uncontrolledExpandedNamesRef);
@@ -98,6 +99,7 @@ export default defineComponent({
             slots,
             toggleItem
         });
+        const rtlEnabledRef = useRtl('Collapse', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titleTextColor, textColor, arrowColor, fontSize, titleFontSize } } = themeRef.value;
             return {
@@ -115,6 +117,7 @@ export default defineComponent({
             ? useThemeClass('collapse', undefined, cssVarsRef, props)
             : undefined;
         return {
+            rtlEnabled: rtlEnabledRef,
             mergedTheme: themeRef,
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
@@ -125,6 +128,10 @@ export default defineComponent({
     render() {
         var _a;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        return (h("div", { class: [`${this.mergedClsPrefix}-collapse`, this.themeClass], style: this.cssVars }, this.$slots));
+        return (h("div", { class: [
+                `${this.mergedClsPrefix}-collapse`,
+                this.rtlEnabled && `${this.mergedClsPrefix}-collapse--rtl`,
+                this.themeClass
+            ], style: this.cssVars }, this.$slots));
     }
 });

package/es/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/es/collapse/src/CollapseItem.js

@@ -1,11 +1,13 @@
 import { h, defineComponent, inject, computed } from 'vue';
 import { createId } from 'seemly';
 import { useMemo } from 'vooks';
-import { ChevronRightIcon as ArrowIcon } from '../../_internal/icons';
+import { ChevronRightIcon as ArrowRightIcon, ChevronLeftIcon as ArrowLeftIcon } from '../../_internal/icons';
 import { NBaseIcon } from '../../_internal';
 import { throwError } from '../../_utils';
 import { collapseInjectionKey } from './Collapse';
 import NCollapseItemContent from './CollapseItemContent';
+import useRtl from '../../_mixins/use-rtl';
+import { useConfig } from '../../_mixins';
 const collapseItemProps = {
     title: String,
     name: [String, Number],
@@ -15,6 +17,7 @@ export default defineComponent({
     name: 'CollapseItem',
     props: collapseItemProps,
     setup(props) {
+        const { mergedRtlRef } = useConfig(props);
         const randomName = createId();
         const mergedNameRef = useMemo(() => {
             var _a;
@@ -37,7 +40,9 @@ export default defineComponent({
             }
             return true;
         });
+        const rtlEnabledRef = useRtl('Collapse', mergedRtlRef, mergedClsPrefixRef);
         return {
+            rtlEnabled: rtlEnabledRef,
             collapseSlots,
             randomName,
             mergedClsPrefix: mergedClsPrefixRef,
@@ -78,8 +83,8 @@ export default defineComponent({
                 ] },
                 h("div", { class: `${mergedClsPrefix}-collapse-item__header-main`, onClick: this.handleClick },
                     arrowPlacement === 'right' && headerNode,
-                    h("div", { class: `${mergedClsPrefix}-collapse-item-arrow` }, arrowSlot ? (arrowSlot({ collapsed })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                        default: (_a = collapseSlots.expandIcon) !== null && _a !== void 0 ? _a : (() => h(ArrowIcon, null))
+                    h("div", { class: `${mergedClsPrefix}-collapse-item-arrow`, key: this.rtlEnabled ? 0 : 1 }, arrowSlot ? (arrowSlot({ collapsed })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                        default: (_a = collapseSlots.expandIcon) !== null && _a !== void 0 ? _a : (() => this.rtlEnabled ? (h(ArrowLeftIcon, null)) : (h(ArrowRightIcon, null)))
                     }))),
                     arrowPlacement === 'left' && headerNode),
                 headerExtraSlot && (h("div", { class: `${mergedClsPrefix}-collapse-item__header-extra`, onClick: this.handleClick }, { default: headerExtraSlot }))),

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

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

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

@@ -0,0 +1,15 @@
+import { cB, cE, cM } from '../../../_utils/cssr';
+export default cB('collapse', [cM('rtl', `
+ direction: rtl;
+ `, [cB('collapse-item', [cB('collapse-item', {
+  marginRight: '32px',
+  marginLeft: 0
+}), cM('left-arrow-placement', [cE('header', [cB('collapse-item-arrow', {
+  marginRight: 0,
+  marginLeft: '4px'
+})])]), cM('right-arrow-placement', [cE('header', [cB('collapse-item-arrow', {
+  marginLeft: 0,
+  marginRight: '4px'
+})])]), cM('active', [cE('header', [cM('active', [cB('collapse-item-arrow', {
+  transform: 'rotate(-90deg)'
+})])])])])])]);

package/es/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/es/collapse/styles/index.js

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

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

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

package/es/collapse/styles/rtl.js

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

package/es/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;