naive-ui 2.25.3 → 2.25.6

package/lib/notification/src/Notification.js

@@ -7,6 +7,7 @@ const icons_1 = require("../../_internal/icons");
 const _utils_1 = require("../../_utils");
 const _internal_1 = require("../../_internal");
 const context_1 = require("./context");
+const _mixins_1 = require("../../_mixins");
 const iconMap = {
     info: (0, vue_1.h)(icons_1.InfoIcon, null),
     success: (0, vue_1.h)(icons_1.SuccessIcon, null),
@@ -39,8 +40,44 @@ exports.Notification = (0, vue_1.defineComponent)({
     name: 'Notification',
     props: exports.notificationProps,
     setup(props) {
+        const { mergedClsPrefixRef, mergedThemeRef, props: providerProps
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const { mergedClsPrefixRef, mergedThemeRef } = (0, vue_1.inject)(context_1.notificationProviderInjectionKey);
+         } = (0, vue_1.inject)(context_1.notificationProviderInjectionKey);
+        const { inlineThemeDisabled } = (0, _mixins_1.useConfig)();
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { type } = props;
+            const { self: { color, textColor, closeColor, closeColorHover, closeColorPressed, headerTextColor, descriptionTextColor, actionTextColor, borderRadius, headerFontWeight, boxShadow, lineHeight, fontSize, closeMargin, closeSize, width, padding, [(0, _utils_1.createKey)('iconColor', type)]: iconColor }, common: { cubicBezierEaseOut, cubicBezierEaseIn, cubicBezierEaseInOut } } = mergedThemeRef.value;
+            const { left, right, top, bottom } = (0, seemly_1.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
+            ? (0, _mixins_1.useThemeClass)('notification', (0, vue_1.computed)(() => props.type[0]), cssVarsRef, providerProps)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             showAvatar: (0, vue_1.computed)(() => {
@@ -49,43 +86,18 @@ exports.Notification = (0, vue_1.defineComponent)({
             handleCloseClick() {
                 props.onClose();
             },
-            cssVars: (0, vue_1.computed)(() => {
-                const { type } = props;
-                const { self: { color, textColor, closeColor, closeColorHover, closeColorPressed, headerTextColor, descriptionTextColor, actionTextColor, borderRadius, headerFontWeight, boxShadow, lineHeight, fontSize, closeMargin, closeSize, width, padding, [(0, _utils_1.createKey)('iconColor', type)]: iconColor }, common: { cubicBezierEaseOut, cubicBezierEaseIn, cubicBezierEaseInOut } } = mergedThemeRef.value;
-                const { left, right, top, bottom } = (0, seemly_1.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 ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-notification`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-notification--closable`]: this.closable,
                     [`${mergedClsPrefix}-notification--show-avatar`]: this.showAvatar

package/lib/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/lib/notification/src/NotificationProvider.js

@@ -81,6 +81,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
         (0, vue_1.provide)(exports.notificationApiInjectionKey, api);
         (0, vue_1.provide)(context_1.notificationProviderInjectionKey, {
+            props,
             mergedClsPrefixRef,
             mergedThemeRef: themeRef
         });

package/lib/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/lib/popconfirm/src/Popconfirm.js

@@ -70,7 +70,8 @@ exports.default = (0, vue_1.defineComponent)({
         }
         (0, vue_1.provide)(interface_1.popconfirmInjectionKey, {
             mergedThemeRef: themeRef,
-            mergedClsPrefixRef
+            mergedClsPrefixRef,
+            props
         });
         return {
             mergedTheme: themeRef,

package/lib/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/lib/popconfirm/src/PopconfirmPanel.js

@@ -30,17 +30,23 @@ exports.default = (0, vue_1.defineComponent)({
     props: exports.panelProps,
     setup(props) {
         const { localeRef } = (0, _mixins_1.useLocale)('Popconfirm');
+        const { inlineThemeDisabled } = (0, _mixins_1.useConfig)();
+        const { mergedClsPrefixRef, mergedThemeRef, props: popconfirmProps
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const { mergedClsPrefixRef, mergedThemeRef } = (0, vue_1.inject)(interface_1.popconfirmInjectionKey);
-        return Object.assign(Object.assign({}, (0, _mixins_1.useLocale)('Popconfirm')), { mergedClsPrefix: mergedClsPrefixRef, cssVars: (0, vue_1.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: (0, vue_1.computed)(() => {
+         } = (0, vue_1.inject)(interface_1.popconfirmInjectionKey);
+        const cssVarsRef = (0, vue_1.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
+            ? (0, _mixins_1.useThemeClass)('popconfirm-panel', undefined, cssVarsRef, popconfirmProps)
+            : undefined;
+        return Object.assign(Object.assign({}, (0, _mixins_1.useLocale)('Popconfirm')), { mergedClsPrefix: mergedClsPrefixRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, localizedPositiveText: (0, vue_1.computed)(() => {
                 return props.positiveText || localeRef.value.positiveText;
             }), localizedNegativeText: (0, vue_1.computed)(() => {
                 return props.negativeText || localeRef.value.negativeText;
@@ -49,23 +55,24 @@ exports.default = (0, vue_1.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 && ((0, vue_1.h)(button_1.NButton, { size: "small", onClick: this.handleNegativeClick }, { default: () => this.localizedNegativeText })),
-                    this.positiveText !== null && ((0, vue_1.h)(button_1.NButton, { size: "small", type: "primary", onClick: this.handlePositiveClick }, { default: () => this.localizedPositiveText }))
-                ];
-        return ((0, vue_1.h)("div", { style: this.cssVars },
+        const actionContentNode = (0, _utils_1.resolveSlot)($slots.action, () => this.negativeText === null && this.positiveText === null
+            ? []
+            : [
+                this.negativeText !== null && ((0, vue_1.h)(button_1.NButton, { size: "small", onClick: this.handleNegativeClick }, { default: () => this.localizedNegativeText })),
+                this.positiveText !== null && ((0, vue_1.h)(button_1.NButton, { size: "small", type: "primary", onClick: this.handlePositiveClick }, { default: () => this.localizedPositiveText }))
+            ]);
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return ((0, vue_1.h)("div", { class: this.themeClass, style: this.cssVars },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-popconfirm__body` },
-                this.showIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-popconfirm__icon` }, $slots.icon ? ($slots.icon()) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.WarningIcon, null) })))) : null, (_a = $slots.default) === null || _a === void 0 ? void 0 :
-                _a.call($slots)),
+                this.showIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-popconfirm__icon` }, (0, _utils_1.resolveSlot)($slots.icon, () => [
+                    (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.WarningIcon, null) })
+                ]))) : null, (_b = $slots.default) === null || _b === void 0 ? void 0 :
+                _b.call($slots)),
             actionContentNode ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-popconfirm__action` }, actionContentNode)) : null));
     }
 });

package/lib/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/lib/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/lib/popover/src/PopoverBody.js

@@ -14,7 +14,7 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const interface_1 = require("./interface");
 const interface_2 = require("../../drawer/src/interface");
 const interface_3 = require("../../modal/src/interface");
-exports.popoverBodyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.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, 
+exports.popoverBodyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.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 */
@@ -172,7 +172,8 @@ exports.default = (0, vue_1.defineComponent)({
                             [`${mergedClsPrefix}-popover--show-arrow`]: props.showArrow,
                             [`${mergedClsPrefix}-popover--show-header`]: !(0, _utils_1.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/lib/popover/src/styles/index.cssr.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+const lodash_1 = require("lodash");
+
 const cssr_1 = require("../../../_utils/cssr");
 
 const oppositePlacement = {
@@ -11,7 +13,8 @@ const oppositePlacement = {
   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
@@ -69,54 +72,72 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('popover', `
  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));
+ `), ...(0, lodash_1.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 (0, cssr_1.c)(`[v-placement="${placement}"] >`, [(0, cssr_1.cB)('popover', [(0, cssr_1.cM)('center-arrow', [(0, cssr_1.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/lib/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/lib/radio/src/Radio.js

@@ -17,9 +17,10 @@ exports.default = (0, vue_1.defineComponent)({
         const themeRef = (0, _mixins_1.useTheme)('Radio', '-radio', radio_cssr_1.default, styles_1.radioLight, props, radio.mergedClsPrefix);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { mergedSize: { value: size } } = radio;
-            const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('radioSize', size)]: radioSize } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, labelLineHeight, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.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,
@@ -59,10 +60,16 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             ], style: this.cssVars },
             (0, vue_1.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 }),
-            (0, vue_1.h)("div", { class: [
-                    `${mergedClsPrefix}-radio__dot`,
-                    this.renderSafeChecked && `${mergedClsPrefix}-radio__dot--checked`
-                ] }),
-            $slots.default ? ((0, vue_1.h)("div", { ref: "labelRef", class: `${mergedClsPrefix}-radio__label` }, $slots.default())) : null));
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-radio__dot-wrapper` },
+                "\u00A0",
+                (0, vue_1.h)("div", { class: [
+                        `${mergedClsPrefix}-radio__dot`,
+                        this.renderSafeChecked && `${mergedClsPrefix}-radio__dot--checked`
+                    ] })),
+            (0, _utils_1.resolveWrappedSlot)($slots.default, (children) => {
+                if (!children)
+                    return null;
+                return ((0, vue_1.h)("div", { ref: "labelRef", class: `${mergedClsPrefix}-radio__label` }, children));
+            })));
     }
 });

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