naive-ui 2.25.4 → 2.25.7

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;

package/lib/radio/src/styles/radio.cssr.js

@@ -20,19 +20,23 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-text-color
 // --n-text-color-disabled
 // --n-label-padding
+// --n-label-line-height
 
 
 exports.default = (0, cssr_1.cB)('radio', `
- line-height: 1;
+ line-height: var(--n-label-line-height);
  outline: none;
  position: relative;
  user-select: none;
  display: inline-flex;
- vertical-align: middle;
- align-items: center;
+ align-items: flex-start;
+ flex-wrap: nowrap;
  font-size: var(--n-font-size);
-`, [(0, cssr_1.cE)('dot', `
- height: var(--n-radio-size);
+ word-break: break-word;
+`, [(0, cssr_1.cE)('dot-wrapper', `
+ position: relative;
+ flex-shrink: 0;
+ flex-grow: 0;
  width: var(--n-radio-size);
  `), (0, cssr_1.cB)('radio-input', `
  position: absolute;
@@ -46,13 +50,18 @@ exports.default = (0, cssr_1.cB)('radio', `
  z-index: 1;
  cursor: pointer;
  `), (0, cssr_1.cE)('dot', `
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ height: var(--n-radio-size);
+ width: var(--n-radio-size);
  background: var(--n-color);
  box-shadow: var(--n-box-shadow);
+ border-radius: 50%;
  transition:
  background-color .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier);
- position: relative;
- border-radius: 50%;
  `, [(0, cssr_1.c)('&::before', `
  content: "";
  opacity: 0;
@@ -77,7 +86,6 @@ exports.default = (0, cssr_1.cB)('radio', `
  color: var(--n-text-color);
  padding: var(--n-label-padding);
  display: inline-block;
- white-space: nowrap;
  transition: color .3s var(--n-bezier);
  `), (0, cssr_1.cNotM)('disabled', `
  cursor: pointer;
@@ -93,7 +101,6 @@ exports.default = (0, cssr_1.cB)('radio', `
 }, [(0, cssr_1.c)('&::before', {
   backgroundColor: 'var(--n-dot-color-disabled)'
 }), (0, cssr_1.cM)('checked', `
- transform: scale(1);
  opacity: 1;
  `)]), (0, cssr_1.cE)('label', {
   color: 'var(--n-text-color-disabled)'

package/lib/radio/styles/dark.js

@@ -10,8 +10,8 @@ const radioDark = {
     name: 'Radio',
     common: common_1.commonDark,
     self(vars) {
-        const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge } = vars;
-        return Object.assign(Object.assign({}, _common_1.default), { buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
+        const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge, lineHeight } = vars;
+        return Object.assign(Object.assign({}, _common_1.default), { labelLineHeight: lineHeight, buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
             fontSizeMedium,
             fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: '#0000', colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled: textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: primaryColor, buttonColor: '#0000', buttonColorActive: primaryColor, buttonTextColor: textColor2, buttonTextColorActive: baseColor, buttonTextColorHover: primaryColor, opacityDisabled: opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: `inset 0 0 0 1px ${primaryColor}`, buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
     }

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

@@ -1,6 +1,7 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import { Theme } from '../../_mixins/use-theme';
 declare const self: (vars: ThemeCommonVars) => {
+    labelLineHeight: string;
     buttonHeightSmall: string;
     buttonHeightMedium: string;
     buttonHeightLarge: string;

package/lib/radio/styles/light.js

@@ -7,8 +7,8 @@ const seemly_1 = require("seemly");
 const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
+    const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge, lineHeight } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { labelLineHeight: lineHeight, buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
         fontSizeMedium,
         fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.2 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: baseColor, colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled: textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: borderColor, buttonColor: baseColor, buttonColorActive: baseColor, buttonTextColor: textColor2, buttonTextColorActive: primaryColor, buttonTextColorHover: primaryColor, opacityDisabled: opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: 'inset 0 0 0 1px #0000', buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
 };

package/lib/scrollbar/src/ScrollBar.d.ts

@@ -47,6 +47,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;

package/lib/select/src/Select.d.ts

@@ -1292,7 +1292,9 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     cssVars: import("vue").ComputedRef<{
         '--n-menu-box-shadow': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     focus: () => void;
     blur: () => 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<{

package/lib/select/src/Select.js

@@ -572,6 +572,15 @@ exports.default = (0, vue_1.defineComponent)({
                 (_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { menuBoxShadow } } = themeRef.value;
+            return {
+                '--n-menu-box-shadow': menuBoxShadow
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('select', undefined, cssVarsRef, props)
+            : undefined;
         return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, treeMate: treeMateRef, isMounted: (0, vooks_1.useIsMounted)(), triggerRef,
             menuRef, pattern: patternRef, uncontrolledShow: uncontrolledShowRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, followerRef, localizedPlaceholder: localizedPlaceholderRef, selectedOption: selectedOptionRef, selectedOptions: selectedOptionsRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, focused: focusedRef, activeWithoutMenuOpen: activeWithoutMenuOpenRef, inlineThemeDisabled,
             onTriggerInputFocus,
@@ -587,12 +596,7 @@ exports.default = (0, vue_1.defineComponent)({
             syncPosition,
             handleMenuAfterLeave,
             handleMenuClickOutside,
-            handleMenuScroll, handleMenuKeydown: handleKeydown, handleMenuMousedown, mergedTheme: themeRef, cssVars: (0, vue_1.computed)(() => {
-                const { self: { menuBoxShadow } } = themeRef.value;
-                return {
-                    '--n-menu-box-shadow': menuBoxShadow
-                };
-            }) });
+            handleMenuScroll, handleMenuKeydown: handleKeydown, handleMenuMousedown, mergedTheme: themeRef, 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() {
         return ((0, vue_1.h)("div", { class: `${this.mergedClsPrefix}-select` },
@@ -606,22 +610,26 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, vue_1.h)(vueuc_1.VFollower, { ref: "followerRef", show: this.mergedShow, to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, containerClass: this.namespace, width: this.consistentMenuWidth ? 'target' : undefined, minWidth: "target", placement: this.placement }, {
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onAfterLeave: this.handleMenuAfterLeave }, {
                             default: () => {
-                                var _a, _b;
-                                return (this.mergedShow ||
-                                    this.displayDirective === 'show') &&
-                                    (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, Object.assign({}, this.menuProps, { ref: "menuRef", inlineThemeDisabled: this.inlineThemeDisabled, virtualScroll: this.consistentMenuWidth && this.virtualScroll, class: [
-                                            `${this.mergedClsPrefix}-select-menu`,
-                                            (_a = this.menuProps) === null || _a === void 0 ? void 0 : _a.class
-                                        ], clsPrefix: this.mergedClsPrefix, focusable: true, autoPending: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
-                                            .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: 'medium', renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(_b = this.menuProps) === null || _b === void 0 ? void 0 : _b.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange }), {
-                                        empty: () => { var _a, _b; return [(_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)]; },
-                                        action: () => { var _a, _b; return [(_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
-                                    }), this.displayDirective === 'show'
-                                        ? [
-                                            [vue_1.vShow, this.mergedShow],
-                                            [vdirs_1.clickoutside, this.handleMenuClickOutside]
-                                        ]
-                                        : [[vdirs_1.clickoutside, this.handleMenuClickOutside]]);
+                                var _a, _b, _c;
+                                if (!(this.mergedShow ||
+                                    this.displayDirective === 'show')) {
+                                    return null;
+                                }
+                                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                                return (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, Object.assign({}, this.menuProps, { ref: "menuRef", inlineThemeDisabled: this.inlineThemeDisabled, virtualScroll: this.consistentMenuWidth && this.virtualScroll, class: [
+                                        `${this.mergedClsPrefix}-select-menu`,
+                                        this.themeClass,
+                                        (_b = this.menuProps) === null || _b === void 0 ? void 0 : _b.class
+                                    ], clsPrefix: this.mergedClsPrefix, focusable: true, autoPending: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
+                                        .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: 'medium', renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(_c = this.menuProps) === null || _c === void 0 ? void 0 : _c.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange }), {
+                                    empty: () => { var _a, _b; return [(_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)]; },
+                                    action: () => { var _a, _b; return [(_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
+                                }), this.displayDirective === 'show'
+                                    ? [
+                                        [vue_1.vShow, this.mergedShow],
+                                        [vdirs_1.clickoutside, this.handleMenuClickOutside]
+                                    ]
+                                    : [[vdirs_1.clickoutside, this.handleMenuClickOutside]]);
                             }
                         }))
                     })