naive-ui 2.25.3 → 2.25.6

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

@@ -14,18 +14,22 @@ import { c, cE, cM, cNotM, cB } from '../../../_utils/cssr'; // vars:
 // --n-text-color
 // --n-text-color-disabled
 // --n-label-padding
+// --n-label-line-height
 
 export default 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);
-`, [cE('dot', `
- height: var(--n-radio-size);
+ word-break: break-word;
+`, [cE('dot-wrapper', `
+ position: relative;
+ flex-shrink: 0;
+ flex-grow: 0;
  width: var(--n-radio-size);
  `), cB('radio-input', `
  position: absolute;
@@ -39,13 +43,18 @@ export default cB('radio', `
  z-index: 1;
  cursor: pointer;
  `), 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%;
  `, [c('&::before', `
  content: "";
  opacity: 0;
@@ -70,7 +79,6 @@ export default cB('radio', `
  color: var(--n-text-color);
  padding: var(--n-label-padding);
  display: inline-block;
- white-space: nowrap;
  transition: color .3s var(--n-bezier);
  `), cNotM('disabled', `
  cursor: pointer;
@@ -86,7 +94,6 @@ export default cB('radio', `
 }, [c('&::before', {
   backgroundColor: 'var(--n-dot-color-disabled)'
 }), cM('checked', `
- transform: scale(1);
  opacity: 1;
  `)]), cE('label', {
   color: 'var(--n-text-color-disabled)'

package/es/radio/styles/dark.js

@@ -5,8 +5,8 @@ const radioDark = {
     name: 'Radio',
     common: commonDark,
     self(vars) {
-        const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge } = vars;
-        return Object.assign(Object.assign({}, commonVariables), { 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({}, commonVariables), { 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 ${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 ${changeColor(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: `inset 0 0 0 1px ${primaryColor}`, buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
     }

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

@@ -2,8 +2,8 @@ import { changeColor } from 'seemly';
 import commonVariables from './_common';
 import { commonLight } from '../../_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({}, commonVariables), { 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({}, commonVariables), { 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 ${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 ${changeColor(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: 'inset 0 0 0 1px #0000', buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
 };

package/es/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/es/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/es/select/src/Select.js

@@ -4,7 +4,7 @@ import { createTreeMate } from 'treemate';
 import { VBinder, VFollower, VTarget } from 'vueuc';
 import { useIsMounted, useMergedState, useCompitable } from 'vooks';
 import { clickoutside } from 'vdirs';
-import { useTheme, useConfig, useLocale, useFormItem } from '../../_mixins';
+import { useTheme, useConfig, useLocale, useFormItem, useThemeClass } from '../../_mixins';
 import { call, useAdjustedTo, warnOnce } from '../../_utils';
 import { NInternalSelectMenu, NInternalSelection } from '../../_internal';
 import { selectLight } from '../styles';
@@ -567,6 +567,15 @@ export default defineComponent({
                 (_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
+        const cssVarsRef = computed(() => {
+            const { self: { menuBoxShadow } } = themeRef.value;
+            return {
+                '--n-menu-box-shadow': menuBoxShadow
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('select', undefined, cssVarsRef, props)
+            : undefined;
         return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, treeMate: treeMateRef, isMounted: useIsMounted(), triggerRef,
             menuRef, pattern: patternRef, uncontrolledShow: uncontrolledShowRef, mergedShow: mergedShowRef, adjustedTo: useAdjustedTo(props), uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, followerRef, localizedPlaceholder: localizedPlaceholderRef, selectedOption: selectedOptionRef, selectedOptions: selectedOptionsRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, focused: focusedRef, activeWithoutMenuOpen: activeWithoutMenuOpenRef, inlineThemeDisabled,
             onTriggerInputFocus,
@@ -582,12 +591,7 @@ export default defineComponent({
             syncPosition,
             handleMenuAfterLeave,
             handleMenuClickOutside,
-            handleMenuScroll, handleMenuKeydown: handleKeydown, handleMenuMousedown, mergedTheme: themeRef, cssVars: 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 (h("div", { class: `${this.mergedClsPrefix}-select` },
@@ -601,22 +605,26 @@ export default defineComponent({
                     h(VFollower, { ref: "followerRef", show: this.mergedShow, to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, containerClass: this.namespace, width: this.consistentMenuWidth ? 'target' : undefined, minWidth: "target", placement: this.placement }, {
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onAfterLeave: this.handleMenuAfterLeave }, {
                             default: () => {
-                                var _a, _b;
-                                return (this.mergedShow ||
-                                    this.displayDirective === 'show') &&
-                                    withDirectives(h(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'
-                                        ? [
-                                            [vShow, this.mergedShow],
-                                            [clickoutside, this.handleMenuClickOutside]
-                                        ]
-                                        : [[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 withDirectives(h(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'
+                                    ? [
+                                        [vShow, this.mergedShow],
+                                        [clickoutside, this.handleMenuClickOutside]
+                                    ]
+                                    : [[clickoutside, this.handleMenuClickOutside]]);
                             }
                         }))
                     })

package/es/slider/src/Slider.d.ts

@@ -311,7 +311,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-indicator-box-shadow': string;
         '--n-indicator-color': string;
         '--n-indicator-text-color': string;
-    }>;
+    }> | undefined;
+    indicatorThemeClass: import("vue").Ref<string> | undefined;
+    indicatorOnRender: (() => void) | undefined;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-dot-border': string;
@@ -337,7 +339,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-rail-color-hover': string;
         '--n-rail-height': string;
         '--n-rail-width-vertical': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;

package/es/slider/src/Slider.js

@@ -2,7 +2,7 @@ import { h, ref, toRef, computed, watch, nextTick, defineComponent, Transition }
 import { VBinder, VTarget, VFollower } from 'vueuc';
 import { useIsMounted, useMergedState } from 'vooks';
 import { on, off } from 'evtd';
-import { useTheme, useFormItem, useConfig } from '../../_mixins';
+import { useTheme, useFormItem, useConfig, useThemeClass } from '../../_mixins';
 import { call, useAdjustedTo } from '../../_utils';
 import { sliderLight } from '../styles';
 import { isTouchEvent, useRefs } from './utils';
@@ -35,7 +35,7 @@ export default defineComponent({
     name: 'Slider',
     props: sliderProps,
     setup(props) {
-        const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
+        const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Slider', '-slider', style, sliderLight, props, mergedClsPrefixRef);
         // dom ref
         const handleRailRef = ref(null);
@@ -417,6 +417,51 @@ export default defineComponent({
             }
             void nextTick(syncPosition);
         });
+        const cssVarsRef = computed(() => {
+            const { self: { railColor, railColorHover, fillColor, fillColorHover, handleColor, opacityDisabled, dotColor, dotColorModal, handleBoxShadow, handleBoxShadowHover, handleBoxShadowActive, handleBoxShadowFocus, dotBorder, dotBoxShadow, railHeight, railWidthVertical, handleSize, dotHeight, dotWidth, dotBorderRadius, fontSize, dotBorderActive, dotColorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-dot-border': dotBorder,
+                '--n-dot-border-active': dotBorderActive,
+                '--n-dot-border-radius': dotBorderRadius,
+                '--n-dot-box-shadow': dotBoxShadow,
+                '--n-dot-color': dotColor,
+                '--n-dot-color-modal': dotColorModal,
+                '--n-dot-color-popover': dotColorPopover,
+                '--n-dot-height': dotHeight,
+                '--n-dot-width': dotWidth,
+                '--n-fill-color': fillColor,
+                '--n-fill-color-hover': fillColorHover,
+                '--n-font-size': fontSize,
+                '--n-handle-box-shadow': handleBoxShadow,
+                '--n-handle-box-shadow-active': handleBoxShadowActive,
+                '--n-handle-box-shadow-focus': handleBoxShadowFocus,
+                '--n-handle-box-shadow-hover': handleBoxShadowHover,
+                '--n-handle-color': handleColor,
+                '--n-handle-size': handleSize,
+                '--n-opacity-disabled': opacityDisabled,
+                '--n-rail-color': railColor,
+                '--n-rail-color-hover': railColorHover,
+                '--n-rail-height': railHeight,
+                '--n-rail-width-vertical': railWidthVertical
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('slider', undefined, cssVarsRef, props)
+            : undefined;
+        const indicatorCssVarsRef = computed(() => {
+            const { self: { fontSize, indicatorColor, indicatorBoxShadow, indicatorTextColor, indicatorBorderRadius } } = themeRef.value;
+            return {
+                '--n-font-size': fontSize,
+                '--n-indicator-border-radius': indicatorBorderRadius,
+                '--n-indicator-box-shadow': indicatorBoxShadow,
+                '--n-indicator-color': indicatorColor,
+                '--n-indicator-text-color': indicatorTextColor
+            };
+        });
+        const indicatorThemeClassHandle = inlineThemeDisabled
+            ? useThemeClass('slider-indicator', undefined, indicatorCssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             namespace: namespaceRef,
@@ -444,51 +489,21 @@ export default defineComponent({
             handleHandleMouseEnter,
             handleHandleMouseLeave,
             handleRailKeyDown,
-            indicatorCssVars: computed(() => {
-                const { self: { fontSize, indicatorColor, indicatorBoxShadow, indicatorTextColor, indicatorBorderRadius } } = themeRef.value;
-                return {
-                    '--n-font-size': fontSize,
-                    '--n-indicator-border-radius': indicatorBorderRadius,
-                    '--n-indicator-box-shadow': indicatorBoxShadow,
-                    '--n-indicator-color': indicatorColor,
-                    '--n-indicator-text-color': indicatorTextColor
-                };
-            }),
-            cssVars: computed(() => {
-                const { self: { railColor, railColorHover, fillColor, fillColorHover, handleColor, opacityDisabled, dotColor, dotColorModal, handleBoxShadow, handleBoxShadowHover, handleBoxShadowActive, handleBoxShadowFocus, dotBorder, dotBoxShadow, railHeight, railWidthVertical, handleSize, dotHeight, dotWidth, dotBorderRadius, fontSize, dotBorderActive, dotColorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-dot-border': dotBorder,
-                    '--n-dot-border-active': dotBorderActive,
-                    '--n-dot-border-radius': dotBorderRadius,
-                    '--n-dot-box-shadow': dotBoxShadow,
-                    '--n-dot-color': dotColor,
-                    '--n-dot-color-modal': dotColorModal,
-                    '--n-dot-color-popover': dotColorPopover,
-                    '--n-dot-height': dotHeight,
-                    '--n-dot-width': dotWidth,
-                    '--n-fill-color': fillColor,
-                    '--n-fill-color-hover': fillColorHover,
-                    '--n-font-size': fontSize,
-                    '--n-handle-box-shadow': handleBoxShadow,
-                    '--n-handle-box-shadow-active': handleBoxShadowActive,
-                    '--n-handle-box-shadow-focus': handleBoxShadowFocus,
-                    '--n-handle-box-shadow-hover': handleBoxShadowHover,
-                    '--n-handle-color': handleColor,
-                    '--n-handle-size': handleSize,
-                    '--n-opacity-disabled': opacityDisabled,
-                    '--n-rail-color': railColor,
-                    '--n-rail-color-hover': railColorHover,
-                    '--n-rail-height': railHeight,
-                    '--n-rail-width-vertical': railWidthVertical
-                };
-            })
+            indicatorCssVars: inlineThemeDisabled ? undefined : indicatorCssVarsRef,
+            indicatorThemeClass: indicatorThemeClassHandle === null || indicatorThemeClassHandle === void 0 ? void 0 : indicatorThemeClassHandle.themeClass,
+            indicatorOnRender: indicatorThemeClassHandle === null || indicatorThemeClassHandle === void 0 ? void 0 : indicatorThemeClassHandle.onRender,
+            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() {
-        const { mergedClsPrefix, formatTooltip } = this;
+        var _a;
+        const { mergedClsPrefix, themeClass, formatTooltip } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return (h("div", { class: [
                 `${mergedClsPrefix}-slider`,
+                themeClass,
                 {
                     [`${mergedClsPrefix}-slider--disabled`]: this.mergedDisabled,
                     [`${mergedClsPrefix}-slider--active`]: this.activeIndex !== -1,
@@ -501,9 +516,8 @@ export default defineComponent({
                 h("div", { class: `${mergedClsPrefix}-slider-rail__fill`, style: this.fillStyle }),
                 this.marks ? (h("div", { class: [
                         `${mergedClsPrefix}-slider-dots`,
-                        {
-                            [`${mergedClsPrefix}-slider-dots--transition-disabled`]: this.dotTransitionDisabled
-                        }
+                        this.dotTransitionDisabled &&
+                            `${mergedClsPrefix}-slider-dots--transition-disabled`
                     ] }, this.markInfos.map((mark) => (h("div", { key: mark.label, class: [
                         `${mergedClsPrefix}-slider-dot`,
                         {
@@ -520,12 +534,21 @@ export default defineComponent({
                             this.tooltip && (h(VFollower, { ref: this.setFollowerRefs(index), show: showTooltip, to: this.adjustedTo, enabled: (this.showTooltip && !this.range) ||
                                     this.followerEnabledIndexSet.has(index), teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, placement: this.mergedPlacement, containerClass: this.namespace }, {
                                 default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, css: this.isSkipCSSDetection(index), onEnter: () => this.followerEnabledIndexSet.add(index), onAfterLeave: () => this.followerEnabledIndexSet.delete(index) }, {
-                                    default: () => showTooltip ? (h("div", { class: [
-                                            `${mergedClsPrefix}-slider-handle-indicator`,
-                                            `${mergedClsPrefix}-slider-handle-indicator--${this.mergedPlacement}`
-                                        ], style: this.indicatorCssVars }, typeof formatTooltip === 'function'
-                                        ? formatTooltip(value)
-                                        : value)) : null
+                                    default: () => {
+                                        var _a;
+                                        if (showTooltip) {
+                                            (_a = this.indicatorOnRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                                            return (h("div", { class: [
+                                                    `${mergedClsPrefix}-slider-handle-indicator`,
+                                                    this.indicatorThemeClass,
+                                                    `${mergedClsPrefix}-slider-handle-indicator--${this.mergedPlacement}`
+                                                ], style: this
+                                                    .indicatorCssVars }, typeof formatTooltip === 'function'
+                                                ? formatTooltip(value)
+                                                : value));
+                                        }
+                                        return null;
+                                    }
                                 }))
                             }))
                         ]

package/es/steps/src/Step.d.ts

@@ -38,7 +38,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-splitor-color': string;
         '--n-step-header-font-size': string;
         '--n-step-header-font-weight': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string>;
+    onRender: () => 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<{
     readonly status: PropType<"wait" | "error" | "finish" | "process">;
     readonly title: StringConstructor;

package/es/steps/src/Step.js

@@ -3,6 +3,7 @@ import { CheckmarkIcon as FinishedIcon, CloseIcon as ErrorIcon } from '../../_in
 import { NIconSwitchTransition, NBaseIcon } from '../../_internal';
 import { createKey, throwError } from '../../_utils';
 import { stepsInjectionKey } from './Steps';
+import { useConfig, useThemeClass } from '../../_mixins';
 const stepProps = {
     status: String,
     title: String,
@@ -20,6 +21,7 @@ export default defineComponent({
         const NSteps = inject(stepsInjectionKey, null);
         if (!NSteps)
             throwError('step', '`n-step` must be placed inside `n-steps`.');
+        const { inlineThemeDisabled } = useConfig();
         const { props: stepsProps, mergedThemeRef, mergedClsPrefixRef, stepsSlots } = NSteps;
         const verticalRef = computed(() => {
             return stepsProps.vertical;
@@ -46,37 +48,47 @@ export default defineComponent({
             }
             return 'process';
         });
+        const cssVarsRef = computed(() => {
+            const { value: status } = mergedStatusRef;
+            const { size } = stepsProps;
+            const { common: { cubicBezierEaseInOut }, self: { stepHeaderFontWeight, [createKey('stepHeaderFontSize', size)]: stepHeaderFontSize, [createKey('indicatorIndexFontSize', size)]: indicatorIndexFontSize, [createKey('indicatorSize', size)]: indicatorSize, [createKey('indicatorIconSize', size)]: indicatorIconSize, [createKey('indicatorTextColor', status)]: indicatorTextColor, [createKey('indicatorBorderColor', status)]: indicatorBorderColor, [createKey('headerTextColor', status)]: headerTextColor, [createKey('splitorColor', status)]: splitorColor, [createKey('indicatorColor', status)]: indicatorColor, [createKey('descriptionTextColor', status)]: descriptionTextColor } } = mergedThemeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-description-text-color': descriptionTextColor,
+                '--n-header-text-color': headerTextColor,
+                '--n-indicator-border-color': indicatorBorderColor,
+                '--n-indicator-color': indicatorColor,
+                '--n-indicator-icon-size': indicatorIconSize,
+                '--n-indicator-index-font-size': indicatorIndexFontSize,
+                '--n-indicator-size': indicatorSize,
+                '--n-indicator-text-color': indicatorTextColor,
+                '--n-splitor-color': splitorColor,
+                '--n-step-header-font-size': stepHeaderFontSize,
+                '--n-step-header-font-weight': stepHeaderFontWeight
+            };
+        });
+        const themeClassHandle = useThemeClass('step', computed(() => {
+            const { value: status } = mergedStatusRef;
+            const { size } = stepsProps;
+            return `${status[0]}${size[0]}`;
+        }), cssVarsRef, stepsProps);
         return {
             stepsSlots,
             mergedClsPrefix: mergedClsPrefixRef,
             vertical: verticalRef,
             mergedStatus: mergedStatusRef,
-            cssVars: computed(() => {
-                const { value: status } = mergedStatusRef;
-                const { size } = stepsProps;
-                const { common: { cubicBezierEaseInOut }, self: { stepHeaderFontWeight, [createKey('stepHeaderFontSize', size)]: stepHeaderFontSize, [createKey('indicatorIndexFontSize', size)]: indicatorIndexFontSize, [createKey('indicatorSize', size)]: indicatorSize, [createKey('indicatorIconSize', size)]: indicatorIconSize, [createKey('indicatorTextColor', status)]: indicatorTextColor, [createKey('indicatorBorderColor', status)]: indicatorBorderColor, [createKey('headerTextColor', status)]: headerTextColor, [createKey('splitorColor', status)]: splitorColor, [createKey('indicatorColor', status)]: indicatorColor, [createKey('descriptionTextColor', status)]: descriptionTextColor } } = mergedThemeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-description-text-color': descriptionTextColor,
-                    '--n-header-text-color': headerTextColor,
-                    '--n-indicator-border-color': indicatorBorderColor,
-                    '--n-indicator-color': indicatorColor,
-                    '--n-indicator-icon-size': indicatorIconSize,
-                    '--n-indicator-index-font-size': indicatorIndexFontSize,
-                    '--n-indicator-size': indicatorSize,
-                    '--n-indicator-text-color': indicatorTextColor,
-                    '--n-splitor-color': splitorColor,
-                    '--n-step-header-font-size': stepHeaderFontSize,
-                    '--n-step-header-font-weight': stepHeaderFontWeight
-                };
-            })
+            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() {
         const showDescription = this.description !== undefined || this.$slots.default;
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { class: [
                 `${mergedClsPrefix}-step`,
+                this.themeClass,
                 showDescription && `${mergedClsPrefix}-step--show-description`
             ], style: this.cssVars },
             h("div", { class: `${mergedClsPrefix}-step-indicator` },

package/es/styles.d.ts

@@ -9,9 +9,9 @@ export { breadcrumbDark } from './breadcrumb/styles';
 export { buttonDark, buttonRtl as unstableButtonRtl } from './button/styles';
 export { cardDark, cardRtl as unstableCardRtl } from './card/styles';
 export { cascaderDark } from './cascader/styles';
-export { checkboxDark } from './checkbox/styles';
+export { checkboxDark, checkboxRtl as unstableCheckboxRtl } from './checkbox/styles';
 export { codeDark } from './code/styles';
-export { collapseDark } from './collapse/styles';
+export { collapseDark, collapseRtl as unstableCollapseRtl } from './collapse/styles';
 export { dataTableDark } from './data-table/styles';
 export { datePickerDark } from './date-picker/styles';
 export { descriptionsDark } from './descriptions/styles';
@@ -26,8 +26,8 @@ export { emptyDark } from './empty/styles';
 export { formDark } from './form/styles';
 export { gradientTextDark } from './gradient-text/styles';
 export { iconDark } from './icon/styles';
-export { inputDark } from './input/styles';
-export { inputNumberDark } from './input-number/styles';
+export { inputDark, inputRtl as unstableInputRtl } from './input/styles';
+export { inputNumberDark, inputNumberRtl as unstableInputNumberRtl } from './input-number/styles';
 export { layoutDark } from './layout/styles';
 export { listDark } from './list/styles';
 export { loadingBarDark } from './loading-bar/styles';

package/es/styles.js

@@ -9,9 +9,9 @@ export { breadcrumbDark } from './breadcrumb/styles';
 export { buttonDark, buttonRtl as unstableButtonRtl } from './button/styles';
 export { cardDark, cardRtl as unstableCardRtl } from './card/styles';
 export { cascaderDark } from './cascader/styles';
-export { checkboxDark } from './checkbox/styles';
+export { checkboxDark, checkboxRtl as unstableCheckboxRtl } from './checkbox/styles';
 export { codeDark } from './code/styles';
-export { collapseDark } from './collapse/styles';
+export { collapseDark, collapseRtl as unstableCollapseRtl } from './collapse/styles';
 export { dataTableDark } from './data-table/styles';
 export { datePickerDark } from './date-picker/styles';
 export { descriptionsDark } from './descriptions/styles';
@@ -26,8 +26,8 @@ export { emptyDark } from './empty/styles';
 export { formDark } from './form/styles';
 export { gradientTextDark } from './gradient-text/styles';
 export { iconDark } from './icon/styles';
-export { inputDark } from './input/styles';
-export { inputNumberDark } from './input-number/styles';
+export { inputDark, inputRtl as unstableInputRtl } from './input/styles';
+export { inputNumberDark, inputNumberRtl as unstableInputNumberRtl } from './input-number/styles';
 export { layoutDark } from './layout/styles';
 export { listDark } from './list/styles';
 export { loadingBarDark } from './loading-bar/styles';

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

@@ -94,6 +94,8 @@ export default cB('tabs', `
  `)]), cB('tabs-nav-scroll-content', `
  display: flex;
  position: relative;
+ min-width: 100%;
+ width: fit-content;
  `), cB('tabs-wrapper', `
  display: inline-flex;
  flex-wrap: nowrap;

package/es/time-picker/src/Panel.js

@@ -181,7 +181,7 @@ export default defineComponent({
         };
     },
     render() {
-        var _a, _b;
+        var _a, _b, _c;
         const { mergedClsPrefix, mergedTheme } = this;
         return (h("div", { tabindex: 0, class: `${mergedClsPrefix}-time-picker-panel`, onFocusin: this.onFocusin, onFocusout: this.onFocusout, onKeydown: this.onKeydown },
             h("div", { class: `${mergedClsPrefix}-time-picker-cols` },
@@ -237,9 +237,9 @@ export default defineComponent({
                             h("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
                         ]
                     }))) : null),
-            h("div", { class: `${mergedClsPrefix}-time-picker-actions` },
-                ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.includes('now')) ? (h(NButton, { size: "tiny", theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.onNowClick }, { default: () => this.nowText })) : null,
-                ((_b = this.actions) === null || _b === void 0 ? void 0 : _b.includes('confirm')) ? (h(NButton, { size: "tiny", type: "primary", class: `${mergedClsPrefix}-time-picker-actions__confirm`, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, disabled: this.isValueInvalid, onClick: this.onConfirmClick }, { default: () => this.confirmText })) : null),
+            ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) ? (h("div", { class: `${mergedClsPrefix}-time-picker-actions` },
+                ((_b = this.actions) === null || _b === void 0 ? void 0 : _b.includes('now')) ? (h(NButton, { size: "tiny", theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.onNowClick }, { default: () => this.nowText })) : null,
+                ((_c = this.actions) === null || _c === void 0 ? void 0 : _c.includes('confirm')) ? (h(NButton, { size: "tiny", type: "primary", class: `${mergedClsPrefix}-time-picker-actions__confirm`, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, disabled: this.isValueInvalid, onClick: this.onConfirmClick }, { default: () => this.confirmText })) : null)) : null,
             h(NBaseFocusDetector, { onFocus: this.onFocusDetectorFocus })));
     }
 });