naive-ui 2.25.3 → 2.25.6

package/es/notification/src/Notification.js

@@ -4,6 +4,7 @@ import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../../_internal/i
 import { createKey, keysOf, render } from '../../_utils';
 import { NBaseIcon, NBaseClose } from '../../_internal';
 import { notificationProviderInjectionKey } from './context';
+import { useConfig, useThemeClass } from '../../_mixins';
 const iconMap = {
     info: h(InfoIcon, null),
     success: h(SuccessIcon, null),
@@ -36,8 +37,44 @@ export const Notification = defineComponent({
     name: 'Notification',
     props: notificationProps,
     setup(props) {
+        const { mergedClsPrefixRef, mergedThemeRef, props: providerProps
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const { mergedClsPrefixRef, mergedThemeRef } = inject(notificationProviderInjectionKey);
+         } = inject(notificationProviderInjectionKey);
+        const { inlineThemeDisabled } = useConfig();
+        const cssVarsRef = computed(() => {
+            const { type } = props;
+            const { self: { color, textColor, closeColor, closeColorHover, closeColorPressed, headerTextColor, descriptionTextColor, actionTextColor, borderRadius, headerFontWeight, boxShadow, lineHeight, fontSize, closeMargin, closeSize, width, padding, [createKey('iconColor', type)]: iconColor }, common: { cubicBezierEaseOut, cubicBezierEaseIn, cubicBezierEaseInOut } } = mergedThemeRef.value;
+            const { left, right, top, bottom } = getPadding(padding);
+            return {
+                '--n-color': color,
+                '--n-font-size': fontSize,
+                '--n-text-color': textColor,
+                '--n-description-text-color': descriptionTextColor,
+                '--n-action-text-color': actionTextColor,
+                '--n-title-text-color': headerTextColor,
+                '--n-title-font-weight': headerFontWeight,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-bezier-ease-out': cubicBezierEaseOut,
+                '--n-bezier-ease-in': cubicBezierEaseIn,
+                '--n-border-radius': borderRadius,
+                '--n-box-shadow': boxShadow,
+                '--n-close-color': closeColor,
+                '--n-close-color-hover': closeColorHover,
+                '--n-close-color-pressed': closeColorPressed,
+                '--n-line-height': lineHeight,
+                '--n-icon-color': iconColor,
+                '--n-close-margin': closeMargin,
+                '--n-close-size': closeSize,
+                '--n-width': width,
+                '--n-padding-left': left,
+                '--n-padding-right': right,
+                '--n-padding-top': top,
+                '--n-padding-bottom': bottom
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('notification', computed(() => props.type[0]), cssVarsRef, providerProps)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             showAvatar: computed(() => {
@@ -46,43 +83,18 @@ export const Notification = defineComponent({
             handleCloseClick() {
                 props.onClose();
             },
-            cssVars: computed(() => {
-                const { type } = props;
-                const { self: { color, textColor, closeColor, closeColorHover, closeColorPressed, headerTextColor, descriptionTextColor, actionTextColor, borderRadius, headerFontWeight, boxShadow, lineHeight, fontSize, closeMargin, closeSize, width, padding, [createKey('iconColor', type)]: iconColor }, common: { cubicBezierEaseOut, cubicBezierEaseIn, cubicBezierEaseInOut } } = mergedThemeRef.value;
-                const { left, right, top, bottom } = getPadding(padding);
-                return {
-                    '--n-color': color,
-                    '--n-font-size': fontSize,
-                    '--n-text-color': textColor,
-                    '--n-description-text-color': descriptionTextColor,
-                    '--n-action-text-color': actionTextColor,
-                    '--n-title-text-color': headerTextColor,
-                    '--n-title-font-weight': headerFontWeight,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-bezier-ease-out': cubicBezierEaseOut,
-                    '--n-bezier-ease-in': cubicBezierEaseIn,
-                    '--n-border-radius': borderRadius,
-                    '--n-box-shadow': boxShadow,
-                    '--n-close-color': closeColor,
-                    '--n-close-color-hover': closeColorHover,
-                    '--n-close-color-pressed': closeColorPressed,
-                    '--n-line-height': lineHeight,
-                    '--n-icon-color': iconColor,
-                    '--n-close-margin': closeMargin,
-                    '--n-close-size': closeSize,
-                    '--n-width': width,
-                    '--n-padding-left': left,
-                    '--n-padding-right': right,
-                    '--n-padding-top': top,
-                    '--n-padding-bottom': bottom
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
+        var _a;
         const { mergedClsPrefix } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return (h("div", { class: [
                 `${mergedClsPrefix}-notification`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-notification--closable`]: this.closable,
                     [`${mergedClsPrefix}-notification--show-avatar`]: this.showAvatar

package/es/notification/src/NotificationProvider.d.ts

@@ -6,6 +6,7 @@ import { notificationEnvOptions } from './NotificationEnvironment';
 export declare type NotificationPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export declare type NotificationOptions = Partial<ExtractPropTypes<typeof notificationEnvOptions>>;
 export interface NotificationProviderInjection {
+    props: ExtractPropTypes<typeof notificationProviderProps>;
     mergedClsPrefixRef: Ref<string>;
     mergedThemeRef: Ref<MergedTheme<NotificationTheme>>;
 }

package/es/notification/src/NotificationProvider.js

@@ -75,6 +75,7 @@ export default defineComponent({
         };
         provide(notificationApiInjectionKey, api);
         provide(notificationProviderInjectionKey, {
+            props,
             mergedClsPrefixRef,
             mergedThemeRef: themeRef
         });

package/es/popconfirm/src/Popconfirm.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, ExtractPropTypes } from 'vue';
 import { PopoverTrigger } from '../../popover';
 import type { ExtractPublicPropTypes } from '../../_utils';
 declare const popconfirmProps: {
@@ -762,6 +762,7 @@ declare const popconfirmProps: {
     }>>>;
 };
 export declare type PopconfirmProps = ExtractPublicPropTypes<typeof popconfirmProps>;
+export declare type PopconfirmSetupProps = ExtractPropTypes<typeof popconfirmProps>;
 declare const _default: import("vue").DefineComponent<{
     positiveText: StringConstructor;
     negativeText: StringConstructor;
@@ -1870,7 +1871,7 @@ declare const _default: import("vue").DefineComponent<{
     } | null>;
     handlePositiveClick: (e: MouseEvent) => void;
     handleNegativeClick: (e: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     positiveText: StringConstructor;
     negativeText: StringConstructor;
     showIcon: {

package/es/popconfirm/src/Popconfirm.js

@@ -46,7 +46,8 @@ export default defineComponent({
         }
         provide(popconfirmInjectionKey, {
             mergedThemeRef: themeRef,
-            mergedClsPrefixRef
+            mergedClsPrefixRef,
+            props
         });
         return {
             mergedTheme: themeRef,

package/es/popconfirm/src/PopconfirmPanel.d.ts

@@ -38,11 +38,13 @@ declare const _default: import("vue").DefineComponent<{
         '--n-font-size': string;
         '--n-icon-size': string;
         '--n-icon-color': string;
-    }>;
+    }> | undefined;
     localizedPositiveText: import("vue").ComputedRef<string>;
     localizedNegativeText: import("vue").ComputedRef<string>;
     handlePositiveClick(e: MouseEvent): void;
     handleNegativeClick(e: MouseEvent): void;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     localeRef: import("vue").Ref<{
         positiveText: string;
         negativeText: string;

package/es/popconfirm/src/PopconfirmPanel.js

@@ -2,8 +2,8 @@ import { h, defineComponent, computed, inject } from 'vue';
 import { NButton } from '../../button';
 import { NBaseIcon } from '../../_internal';
 import { WarningIcon } from '../../_internal/icons';
-import { useLocale } from '../../_mixins';
-import { keysOf } from '../../_utils';
+import { useConfig, useLocale, useThemeClass } from '../../_mixins';
+import { keysOf, resolveSlot } from '../../_utils';
 import { popconfirmInjectionKey } from './interface';
 export const panelProps = {
     positiveText: String,
@@ -27,17 +27,23 @@ export default defineComponent({
     props: panelProps,
     setup(props) {
         const { localeRef } = useLocale('Popconfirm');
+        const { inlineThemeDisabled } = useConfig();
+        const { mergedClsPrefixRef, mergedThemeRef, props: popconfirmProps
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const { mergedClsPrefixRef, mergedThemeRef } = inject(popconfirmInjectionKey);
-        return Object.assign(Object.assign({}, useLocale('Popconfirm')), { mergedClsPrefix: mergedClsPrefixRef, cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { fontSize, iconSize, iconColor } } = mergedThemeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-font-size': fontSize,
-                    '--n-icon-size': iconSize,
-                    '--n-icon-color': iconColor
-                };
-            }), localizedPositiveText: computed(() => {
+         } = inject(popconfirmInjectionKey);
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut }, self: { fontSize, iconSize, iconColor } } = mergedThemeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-font-size': fontSize,
+                '--n-icon-size': iconSize,
+                '--n-icon-color': iconColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('popconfirm-panel', undefined, cssVarsRef, popconfirmProps)
+            : undefined;
+        return Object.assign(Object.assign({}, useLocale('Popconfirm')), { mergedClsPrefix: mergedClsPrefixRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, localizedPositiveText: computed(() => {
                 return props.positiveText || localeRef.value.positiveText;
             }), localizedNegativeText: computed(() => {
                 return props.negativeText || localeRef.value.negativeText;
@@ -46,23 +52,24 @@ export default defineComponent({
             },
             handleNegativeClick(e) {
                 props.onNegativeClick(e);
-            } });
+            }, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
-        var _a;
+        var _a, _b;
         const { mergedClsPrefix, $slots } = this;
-        const actionContentNode = $slots.action
-            ? $slots.action()
-            : this.negativeText === null && this.positiveText === null
-                ? null
-                : [
-                    this.negativeText !== null && (h(NButton, { size: "small", onClick: this.handleNegativeClick }, { default: () => this.localizedNegativeText })),
-                    this.positiveText !== null && (h(NButton, { size: "small", type: "primary", onClick: this.handlePositiveClick }, { default: () => this.localizedPositiveText }))
-                ];
-        return (h("div", { style: this.cssVars },
+        const actionContentNode = resolveSlot($slots.action, () => this.negativeText === null && this.positiveText === null
+            ? []
+            : [
+                this.negativeText !== null && (h(NButton, { size: "small", onClick: this.handleNegativeClick }, { default: () => this.localizedNegativeText })),
+                this.positiveText !== null && (h(NButton, { size: "small", type: "primary", onClick: this.handlePositiveClick }, { default: () => this.localizedPositiveText }))
+            ]);
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return (h("div", { class: this.themeClass, style: this.cssVars },
             h("div", { class: `${mergedClsPrefix}-popconfirm__body` },
-                this.showIcon ? (h("div", { class: `${mergedClsPrefix}-popconfirm__icon` }, $slots.icon ? ($slots.icon()) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(WarningIcon, null) })))) : null, (_a = $slots.default) === null || _a === void 0 ? void 0 :
-                _a.call($slots)),
+                this.showIcon ? (h("div", { class: `${mergedClsPrefix}-popconfirm__icon` }, resolveSlot($slots.icon, () => [
+                    h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(WarningIcon, null) })
+                ]))) : null, (_b = $slots.default) === null || _b === void 0 ? void 0 :
+                _b.call($slots)),
             actionContentNode ? (h("div", { class: `${mergedClsPrefix}-popconfirm__action` }, actionContentNode)) : null));
     }
 });

package/es/popconfirm/src/interface.d.ts

@@ -1,8 +1,10 @@
 import { Ref } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import type { PopconfirmTheme } from '../styles';
+import type { PopconfirmSetupProps } from './Popconfirm';
 export interface PopconfirmInjection {
     mergedThemeRef: Ref<MergedTheme<PopconfirmTheme>>;
     mergedClsPrefixRef: Ref<string>;
+    props: PopconfirmSetupProps;
 }
 export declare const popconfirmInjectionKey: import("vue").InjectionKey<PopconfirmInjection>;

package/es/popover/src/PopoverBody.d.ts

@@ -12,6 +12,7 @@ export declare const popoverBodyProps: {
     delay: NumberConstructor;
     duration: NumberConstructor;
     raw: BooleanConstructor;
+    arrowPointToCenter: BooleanConstructor;
     arrowStyle: PropType<string | CSSProperties>;
     displayDirective: PropType<"show" | "if">;
     x: NumberConstructor;
@@ -86,6 +87,7 @@ declare const _default: import("vue").DefineComponent<{
     delay: NumberConstructor;
     duration: NumberConstructor;
     raw: BooleanConstructor;
+    arrowPointToCenter: BooleanConstructor;
     arrowStyle: PropType<string | CSSProperties>;
     displayDirective: PropType<"show" | "if">;
     x: NumberConstructor;
@@ -164,6 +166,7 @@ declare const _default: import("vue").DefineComponent<{
     delay: NumberConstructor;
     duration: NumberConstructor;
     raw: BooleanConstructor;
+    arrowPointToCenter: BooleanConstructor;
     arrowStyle: PropType<string | CSSProperties>;
     displayDirective: PropType<"show" | "if">;
     x: NumberConstructor;
@@ -228,6 +231,7 @@ declare const _default: import("vue").DefineComponent<{
     raw: boolean;
     overlap: boolean;
     showArrow: boolean;
+    arrowPointToCenter: boolean;
     keepAliveOnHover: boolean;
     internalTrapFocus: boolean;
     animated: boolean;

package/es/popover/src/PopoverBody.js

@@ -8,7 +8,7 @@ import style from './styles/index.cssr';
 import { popoverBodyInjectionKey } from './interface';
 import { drawerBodyInjectionKey } from '../../drawer/src/interface';
 import { modalBodyInjectionKey } from '../../modal/src/interface';
-export const popoverBodyProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowStyle: [String, Object], displayDirective: String, x: Number, y: Number, flip: Boolean, overlap: Boolean, placement: String, width: [Number, String], keepAliveOnHover: Boolean, internalTrapFocus: Boolean, 
+export const popoverBodyProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowPointToCenter: Boolean, arrowStyle: [String, Object], displayDirective: String, x: Number, y: Number, flip: Boolean, overlap: Boolean, placement: String, width: [Number, String], keepAliveOnHover: Boolean, internalTrapFocus: Boolean, 
     // private
     animated: Boolean, onClickoutside: Function, 
     /** @deprecated */
@@ -165,7 +165,8 @@ export default defineComponent({
                             [`${mergedClsPrefix}-popover--show-arrow`]: props.showArrow,
                             [`${mergedClsPrefix}-popover--show-header`]: !isSlotEmpty(slots.header),
                             [`${mergedClsPrefix}-popover--raw`]: props.raw,
-                            [`${mergedClsPrefix}-popover--manual-trigger`]: props.trigger === 'manual'
+                            [`${mergedClsPrefix}-popover--manual-trigger`]: props.trigger === 'manual',
+                            [`${mergedClsPrefix}-popover--center-arrow`]: props.arrowPointToCenter
                         }
                     ],
                     ref: bodyRef,

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

@@ -1,10 +1,12 @@
+import { map } from 'lodash';
 import { c, cB, cM, cNotM, cE, cCB } from '../../../_utils/cssr';
 const oppositePlacement = {
   top: 'bottom',
   bottom: 'top',
   left: 'right',
   right: 'left'
-}; // vars:
+};
+const arrowSize = 'var(--n-arrow-height) * 1.414'; // vars:
 // --n-bezier
 // --n-bezier-ease-in
 // --n-bezier-ease-out
@@ -62,54 +64,72 @@ c('&.popover-transition-enter-from, &.popover-transition-leave-to', `
  transition: background-color .3s var(--n-bezier);
  position: absolute;
  display: block;
- width: calc(var(--n-arrow-height) * 1.414);
- height: calc(var(--n-arrow-height) * 1.414);
+ width: calc(${arrowSize});
+ height: calc(${arrowSize});
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
  transform: rotate(45deg);
  background-color: var(--n-color);
  pointer-events: all;
  `)])]), placementStyle('top-start', `
- top: calc(-0.707 * var(--n-arrow-height));
- left: calc(var(--n-arrow-offset) - var(--v-offset-left));
+ top: calc(${arrowSize} / -2);
+ left: calc(${getArrowOffset('top-start')} - var(--v-offset-left));
  `), placementStyle('top', `
- top: calc(-0.707 * var(--n-arrow-height));
- transform: translateX(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
+ top: calc(${arrowSize} / -2);
+ transform: translateX(calc(${arrowSize} / -2)) rotate(45deg);
  left: 50%;
  `), placementStyle('top-end', `
- top: calc(-0.707 * var(--n-arrow-height));
- right: calc(var(--n-arrow-offset) + var(--v-offset-left));
+ top: calc(${arrowSize} / -2);
+ right: calc(${getArrowOffset('top-end')} + var(--v-offset-left));
  `), placementStyle('bottom-start', `
- bottom: calc(-0.707 * var(--n-arrow-height));
- left: calc(var(--n-arrow-offset) - var(--v-offset-left));
+ bottom: calc(${arrowSize} / -2);
+ left: calc(${getArrowOffset('bottom-start')} - var(--v-offset-left));
  `), placementStyle('bottom', `
- bottom: calc(-0.707 * var(--n-arrow-height));
- transform: translateX(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
+ bottom: calc(${arrowSize} / -2);
+ transform: translateX(calc(${arrowSize} / -2)) rotate(45deg);
  left: 50%;
  `), placementStyle('bottom-end', `
- bottom: calc(-0.707 * var(--n-arrow-height));
- right: calc(var(--n-arrow-offset) + var(--v-offset-left));
+ bottom: calc(${arrowSize} / -2);
+ right: calc(${getArrowOffset('bottom-end')} + var(--v-offset-left));
  `), placementStyle('left-start', `
- left: calc(-0.707 * var(--n-arrow-height));
- top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top));
+ left: calc(${arrowSize} / -2);
+ top: calc(${getArrowOffset('left-start')} - var(--v-offset-top));
  `), placementStyle('left', `
- left: calc(-0.707 * var(--n-arrow-height));
- transform: translateY(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
+ left: calc(${arrowSize} / -2);
+ transform: translateY(calc(${arrowSize} / -2)) rotate(45deg);
  top: 50%;
  `), placementStyle('left-end', `
- left: calc(-0.707 * var(--n-arrow-height));
- bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top));
- 
+ left: calc(${arrowSize} / -2);
+ bottom: calc(${getArrowOffset('left-end')} + var(--v-offset-top));
  `), placementStyle('right-start', `
- right: calc(-0.707 * var(--n-arrow-height));
- top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top));
+ right: calc(${arrowSize} / -2);
+ top: calc(${getArrowOffset('right-start')} - var(--v-offset-top));
  `), placementStyle('right', `
- right: calc(-0.707 * var(--n-arrow-height));
- transform: translateY(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
+ right: calc(${arrowSize} / -2);
+ transform: translateY(calc(${arrowSize} / -2)) rotate(45deg);
  top: 50%;
  `), placementStyle('right-end', `
- right: calc(-0.707 * var(--n-arrow-height));
- bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top));
- `)]);
+ right: calc(${arrowSize} / -2);
+ bottom: calc(${getArrowOffset('right-end')} + var(--v-offset-top));
+ `), ...map({
+  top: ['right-start', 'left-start'],
+  right: ['top-end', 'bottom-end'],
+  bottom: ['right-end', 'left-end'],
+  left: ['top-start', 'bottom-start']
+}, (placements, direction) => {
+  const isVertical = ['right', 'left'].includes(direction);
+  const sizeType = isVertical ? 'width' : 'height';
+  return placements.map(placement => {
+    const isReverse = placement.split('-')[1] === 'end';
+    const targetSize = `var(--v-target-${sizeType}, 0px)`;
+    const centerOffset = `calc((${targetSize} - ${arrowSize}) / 2)`;
+    const offset = getArrowOffset(placement);
+    return c(`[v-placement="${placement}"] >`, [cB('popover', [cM('center-arrow', [cB('popover-arrow', `${direction}: calc(max(${centerOffset}, ${offset}) ${isReverse ? '+' : '-'} var(--v-offset-${isVertical ? 'left' : 'top'}));`)])])]);
+  });
+})]);
+
+function getArrowOffset(placement) {
+  return ['top', 'bottom'].includes(placement.split('-')[0]) ? 'var(--n-arrow-offset)' : 'var(--n-arrow-offset-vertical)';
+}
 
 function placementStyle(placement, arrowStyleLiteral) {
   const position = placement.split('-')[0];

package/es/radio/src/Radio.d.ts

@@ -25,6 +25,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     theme: import("vue").PropType<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -61,6 +62,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>;
     themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -97,6 +99,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
     builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -135,6 +138,7 @@ declare const _default: import("vue").DefineComponent<{
 }, import("./use-radio").UseRadio & {
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
+        '--n-label-line-height': string;
         '--n-box-shadow': string;
         '--n-box-shadow-active': string;
         '--n-box-shadow-disabled': string;
@@ -176,6 +180,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     theme: import("vue").PropType<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -212,6 +217,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>;
     themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -248,6 +254,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
     builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;

package/es/radio/src/Radio.js

@@ -1,6 +1,6 @@
 import { h, defineComponent, computed } from 'vue';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { createKey } from '../../_utils';
+import { createKey, resolveWrappedSlot } from '../../_utils';
 import { radioLight } from '../styles';
 import useRadio from './use-radio';
 import style from './styles/radio.cssr';
@@ -12,9 +12,10 @@ export default defineComponent({
         const themeRef = useTheme('Radio', '-radio', style, radioLight, props, radio.mergedClsPrefix);
         const cssVarsRef = computed(() => {
             const { mergedSize: { value: size } } = radio;
-            const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, [createKey('fontSize', size)]: fontSize, [createKey('radioSize', size)]: radioSize } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, labelLineHeight, [createKey('fontSize', size)]: fontSize, [createKey('radioSize', size)]: radioSize } } = themeRef.value;
             return {
                 '--n-bezier': cubicBezierEaseInOut,
+                '--n-label-line-height': labelLineHeight,
                 '--n-box-shadow': boxShadow,
                 '--n-box-shadow-active': boxShadowActive,
                 '--n-box-shadow-disabled': boxShadowDisabled,
@@ -54,10 +55,16 @@ export default defineComponent({
                 }
             ], style: this.cssVars },
             h("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
-            h("div", { class: [
-                    `${mergedClsPrefix}-radio__dot`,
-                    this.renderSafeChecked && `${mergedClsPrefix}-radio__dot--checked`
-                ] }),
-            $slots.default ? (h("div", { ref: "labelRef", class: `${mergedClsPrefix}-radio__label` }, $slots.default())) : null));
+            h("div", { class: `${mergedClsPrefix}-radio__dot-wrapper` },
+                "\u00A0",
+                h("div", { class: [
+                        `${mergedClsPrefix}-radio__dot`,
+                        this.renderSafeChecked && `${mergedClsPrefix}-radio__dot--checked`
+                    ] })),
+            resolveWrappedSlot($slots.default, (children) => {
+                if (!children)
+                    return null;
+                return (h("div", { ref: "labelRef", class: `${mergedClsPrefix}-radio__label` }, children));
+            })));
     }
 });

package/es/radio/src/RadioGroup.d.ts

@@ -16,6 +16,7 @@ declare const radioGroupProps: {
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -52,6 +53,7 @@ declare const radioGroupProps: {
         labelPadding: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -88,6 +90,7 @@ declare const radioGroupProps: {
         labelPadding: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -140,6 +143,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -176,6 +180,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -212,6 +217,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -286,6 +292,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -322,6 +329,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -358,6 +366,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;