@web_xiaobai/business-ui 0.0.37 → 0.0.39

package/dist/boden-business-ui.es.js

@@ -4772,7 +4772,8 @@ var index_cssr_default$92 = cB$3("base-clear", "\n flex-shrink: 0;\n height: 1em
 		originalTransform: "translateX(-50%) translateY(-50%)"
 	})]),
 	cE$3("container", "\n animation: rotator 3s linear infinite both;\n ", [cE$3("icon", "\n height: 1em;\n width: 1em;\n ")])
-])]), duration$1 = "1.6s", exposedLoadingProps$1 = {
+])]), duration$1 = "1.6s";
+const exposedLoadingProps$1 = {
 	strokeWidth: {
 		type: Number,
 		default: 28
@@ -4780,8 +4781,17 @@ var index_cssr_default$92 = cB$3("base-clear", "\n flex-shrink: 0;\n height: 1em
 	stroke: {
 		type: String,
 		default: void 0
+	},
+	scale: {
+		type: Number,
+		default: 1
+	},
+	radius: {
+		type: Number,
+		default: 100
 	}
-}, Loading_default$1 = defineComponent({
+};
+var Loading_default$1 = defineComponent({
 	name: "BaseLoading",
 	props: Object.assign({
 		clsPrefix: {
@@ -4791,14 +4801,6 @@ var index_cssr_default$92 = cB$3("base-clear", "\n flex-shrink: 0;\n height: 1em
 		show: {
 			type: Boolean,
 			default: !0
-		},
-		scale: {
-			type: Number,
-			default: 1
-		},
-		radius: {
-			type: Number,
-			default: 100
 		}
 	}, exposedLoadingProps$1),
 	setup(_) {
@@ -5065,6 +5067,7 @@ var light_default$56 = {
 	onResize: Function,
 	internalOnUpdateScrollLeft: Function,
 	internalHoistYRail: Boolean,
+	internalExposeWidthCssVar: Boolean,
 	yPlacement: {
 		type: String,
 		default: "right"
@@ -5316,6 +5319,7 @@ var light_default$56 = {
 			handleContainerResize: W6,
 			handleYScrollMouseDown: u8,
 			handleXScrollMouseDown: s8,
+			containerWidth: z,
 			cssVars: C ? void 0 : p8,
 			themeClass: m8?.themeClass,
 			onRender: m8?.onRender
@@ -5360,7 +5364,7 @@ var light_default$56 = {
 					role: "none",
 					ref: "containerRef",
 					class: [`${C}-scrollbar-container`, this.containerClass],
-					style: this.containerStyle,
+					style: [this.containerStyle, this.internalExposeWidthCssVar ? { "--n-scrollbar-current-width": pxfy$1(this.containerWidth) } : void 0],
 					onScroll: this.handleScroll,
 					onWheel: this.onWheel
 				}, h(VResizeObserver_default$1, { onResize: this.handleContentResize }, { default: () => h("div", {
@@ -6870,123 +6874,128 @@ var Input_default = defineComponent({
 	props: inputProps$1,
 	slots: Object,
 	setup(_) {
-		let { mergedClsPrefixRef: S, mergedBorderedRef: C, inlineThemeDisabled: T, mergedRtlRef: E } = useConfig$1(_), D = use_theme_default$3("Input", "-input", input_cssr_default$1, light_default$55, _, S);
+		let { mergedClsPrefixRef: S, mergedBorderedRef: C, inlineThemeDisabled: T, mergedRtlRef: E, mergedComponentPropsRef: D } = useConfig$1(_), O = use_theme_default$3("Input", "-input", input_cssr_default$1, light_default$55, _, S);
 		isSafari$1 && useStyle$1("-input-safari", safariStyle$1, S);
-		let O = ref(null), k = ref(null), P = ref(null), F = ref(null), I = ref(null), L = ref(null), R = ref(null), z = useCursor$1(R), B = ref(null), { localeRef: V } = useLocale$1("Input"), W = ref(_.defaultValue), G = toRef(_, "value"), K = useMergedState$1(G, W), q = useFormItem$1(_), { mergedSizeRef: J, mergedDisabledRef: Y, mergedStatusRef: X } = q, x6 = ref(!1), Z = ref(!1), S6 = ref(!1), Q = ref(!1), C6 = null, w6 = computed(() => {
+		let k = ref(null), P = ref(null), F = ref(null), I = ref(null), L = ref(null), R = ref(null), z = ref(null), B = useCursor$1(z), V = ref(null), { localeRef: W } = useLocale$1("Input"), G = ref(_.defaultValue), K = toRef(_, "value"), q = useMergedState$1(K, G), J = useFormItem$1(_, { mergedSize: (S) => {
+			let { size: C } = _;
+			if (C) return C;
+			let { mergedSize: T } = S || {};
+			return T?.value ? T.value : D?.value?.Input?.size || "medium";
+		} }), { mergedSizeRef: Y, mergedDisabledRef: X, mergedStatusRef: x6 } = J, Z = ref(!1), S6 = ref(!1), Q = ref(!1), C6 = ref(!1), w6 = null, T6 = computed(() => {
 			let { placeholder: S, pair: C } = _;
-			return C ? Array.isArray(S) ? S : S === void 0 ? ["", ""] : [S, S] : S === void 0 ? [V.value.placeholder] : [S];
-		}), T6 = computed(() => {
-			let { value: _ } = S6, { value: S } = K, { value: C } = w6;
-			return !_ && (isEmptyInputValue$1(S) || Array.isArray(S) && isEmptyInputValue$1(S[0])) && C[0];
+			return C ? Array.isArray(S) ? S : S === void 0 ? ["", ""] : [S, S] : S === void 0 ? [W.value.placeholder] : [S];
 		}), E6 = computed(() => {
-			let { value: _ } = S6, { value: S } = K, { value: C } = w6;
+			let { value: _ } = Q, { value: S } = q, { value: C } = T6;
+			return !_ && (isEmptyInputValue$1(S) || Array.isArray(S) && isEmptyInputValue$1(S[0])) && C[0];
+		}), O6 = computed(() => {
+			let { value: _ } = Q, { value: S } = q, { value: C } = T6;
 			return !_ && C[1] && (isEmptyInputValue$1(S) || Array.isArray(S) && isEmptyInputValue$1(S[1]));
-		}), O6 = use_memo_default$1(() => _.internalForceFocus || x6.value), k6 = use_memo_default$1(() => {
-			if (Y.value || _.readonly || !_.clearable || !O6.value && !Z.value) return !1;
-			let { value: S } = K, { value: C } = O6;
-			return _.pair ? !!(Array.isArray(S) && (S[0] || S[1])) && (Z.value || C) : !!S && (Z.value || C);
-		}), j6 = computed(() => {
+		}), k6 = use_memo_default$1(() => _.internalForceFocus || Z.value), j6 = use_memo_default$1(() => {
+			if (X.value || _.readonly || !_.clearable || !k6.value && !S6.value) return !1;
+			let { value: S } = q, { value: C } = k6;
+			return _.pair ? !!(Array.isArray(S) && (S[0] || S[1])) && (S6.value || C) : !!S && (S6.value || C);
+		}), M6 = computed(() => {
 			let { showPasswordOn: S } = _;
 			if (S) return S;
 			if (_.showPasswordToggle) return "click";
-		}), M6 = ref(!1), P6 = computed(() => {
+		}), P6 = ref(!1), F6 = computed(() => {
 			let { textDecoration: S } = _;
 			return S ? Array.isArray(S) ? S.map((_) => ({ textDecoration: _ })) : [{ textDecoration: S }] : ["", ""];
-		}), F6 = ref(void 0), I6 = () => {
+		}), I6 = ref(void 0), L6 = () => {
 			if (_.type === "textarea") {
 				let { autosize: S } = _;
-				if (S && (F6.value = B.value?.$el?.offsetWidth), !k.value || typeof S == "boolean") return;
-				let { paddingTop: C, paddingBottom: T, lineHeight: E } = window.getComputedStyle(k.value), D = Number(C.slice(0, -2)), O = Number(T.slice(0, -2)), A = Number(E.slice(0, -2)), { value: F } = P;
-				if (!F) return;
+				if (S && (I6.value = V.value?.$el?.offsetWidth), !P.value || typeof S == "boolean") return;
+				let { paddingTop: C, paddingBottom: T, lineHeight: E } = window.getComputedStyle(P.value), D = Number(C.slice(0, -2)), O = Number(T.slice(0, -2)), k = Number(E.slice(0, -2)), { value: A } = F;
+				if (!A) return;
 				if (S.minRows) {
-					let _ = Math.max(S.minRows, 1), C = `${D + O + A * _}px`;
-					F.style.minHeight = C;
+					let _ = Math.max(S.minRows, 1), C = `${D + O + k * _}px`;
+					A.style.minHeight = C;
 				}
 				if (S.maxRows) {
-					let _ = `${D + O + A * S.maxRows}px`;
-					F.style.maxHeight = _;
+					let _ = `${D + O + k * S.maxRows}px`;
+					A.style.maxHeight = _;
 				}
 			}
-		}, L6 = computed(() => {
+		}, R6 = computed(() => {
 			let { maxlength: S } = _;
 			return S === void 0 ? void 0 : Number(S);
 		});
 		onMounted(() => {
-			let { value: _ } = K;
-			Array.isArray(_) || O8(_);
+			let { value: _ } = q;
+			Array.isArray(_) || k8(_);
 		});
-		let R6 = getCurrentInstance().proxy;
-		function z6(S, C) {
-			let { onUpdateValue: T, "onUpdate:value": E, onInput: D } = _, { nTriggerFormInput: O } = q;
-			T && call(T, S, C), E && call(E, S, C), D && call(D, S, C), W.value = S, O();
-		}
+		let z6 = getCurrentInstance().proxy;
 		function V6(S, C) {
-			let { onChange: T } = _, { nTriggerFormChange: E } = q;
-			T && call(T, S, C), W.value = S, E();
+			let { onUpdateValue: T, "onUpdate:value": E, onInput: D } = _, { nTriggerFormInput: O } = J;
+			T && call(T, S, C), E && call(E, S, C), D && call(D, S, C), G.value = S, O();
 		}
-		function H6(S) {
-			let { onBlur: C } = _, { nTriggerFormBlur: T } = q;
-			C && call(C, S), T();
+		function H6(S, C) {
+			let { onChange: T } = _, { nTriggerFormChange: E } = J;
+			T && call(T, S, C), G.value = S, E();
 		}
 		function U6(S) {
-			let { onFocus: C } = _, { nTriggerFormFocus: T } = q;
+			let { onBlur: C } = _, { nTriggerFormBlur: T } = J;
 			C && call(C, S), T();
 		}
 		function W6(S) {
+			let { onFocus: C } = _, { nTriggerFormFocus: T } = J;
+			C && call(C, S), T();
+		}
+		function q6(S) {
 			let { onClear: C } = _;
 			C && call(C, S);
 		}
-		function q6(S) {
+		function J6(S) {
 			let { onInputBlur: C } = _;
 			C && call(C, S);
 		}
-		function J6(S) {
+		function Y6(S) {
 			let { onInputFocus: C } = _;
 			C && call(C, S);
 		}
-		function Y6() {
+		function X6() {
 			let { onDeactivate: S } = _;
 			S && call(S);
 		}
-		function X6() {
+		function Z6() {
 			let { onActivate: S } = _;
 			S && call(S);
 		}
-		function Z6(S) {
+		function Q6(S) {
 			let { onClick: C } = _;
 			C && call(C, S);
 		}
-		function Q6(S) {
+		function $6(S) {
 			let { onWrapperFocus: C } = _;
 			C && call(C, S);
 		}
-		function $6(S) {
+		function e8(S) {
 			let { onWrapperBlur: C } = _;
 			C && call(C, S);
 		}
-		function e8() {
-			S6.value = !0;
+		function t8() {
+			Q.value = !0;
 		}
-		function t8(_) {
-			S6.value = !1, _.target === L.value ? n8(_, 1) : n8(_, 0);
+		function n8(_) {
+			Q.value = !1, _.target === R.value ? r8(_, 1) : r8(_, 0);
 		}
-		function n8(S, C = 0, T = "input") {
+		function r8(S, C = 0, T = "input") {
 			let E = S.target.value;
-			if (O8(E), S instanceof InputEvent && !S.isComposing && (S6.value = !1), _.type === "textarea") {
-				let { value: _ } = B;
+			if (k8(E), S instanceof InputEvent && !S.isComposing && (Q.value = !1), _.type === "textarea") {
+				let { value: _ } = V;
 				_ && _.syncUnifiedContainer();
 			}
-			if (C6 = E, S6.value) return;
-			z.recordCursor();
-			let D = r8(E);
-			if (D) if (!_.pair) T === "input" ? z6(E, { source: C }) : V6(E, { source: C });
+			if (w6 = E, Q.value) return;
+			B.recordCursor();
+			let D = i8(E);
+			if (D) if (!_.pair) T === "input" ? V6(E, { source: C }) : H6(E, { source: C });
 			else {
-				let { value: _ } = K;
-				_ = Array.isArray(_) ? [_[0], _[1]] : ["", ""], _[C] = E, T === "input" ? z6(_, { source: C }) : V6(_, { source: C });
+				let { value: _ } = q;
+				_ = Array.isArray(_) ? [_[0], _[1]] : ["", ""], _[C] = E, T === "input" ? V6(_, { source: C }) : H6(_, { source: C });
 			}
-			R6.$forceUpdate(), D || nextTick(z.restoreCursor);
+			z6.$forceUpdate(), D || nextTick(B.restoreCursor);
 		}
-		function r8(S) {
+		function i8(S) {
 			let { countGraphemes: C, maxlength: T, minlength: E } = _;
 			if (C) {
 				let _;
@@ -6995,181 +7004,181 @@ var Input_default = defineComponent({
 			let { allowInput: D } = _;
 			return typeof D == "function" ? D(S) : !0;
 		}
-		function i8(_) {
-			q6(_), _.relatedTarget === O.value && Y6(), _.relatedTarget !== null && (_.relatedTarget === I.value || _.relatedTarget === L.value || _.relatedTarget === k.value) || (Q.value = !1), c8(_, "blur"), R.value = null;
-		}
-		function a8(_, S) {
-			J6(_), x6.value = !0, Q.value = !0, X6(), c8(_, "focus"), S === 0 ? R.value = I.value : S === 1 ? R.value = L.value : S === 2 && (R.value = k.value);
+		function a8(_) {
+			J6(_), _.relatedTarget === k.value && X6(), _.relatedTarget !== null && (_.relatedTarget === L.value || _.relatedTarget === R.value || _.relatedTarget === P.value) || (C6.value = !1), l8(_, "blur"), z.value = null;
 		}
-		function o8(S) {
-			_.passivelyActivated && ($6(S), c8(S, "blur"));
+		function o8(_, S) {
+			Y6(_), Z.value = !0, C6.value = !0, Z6(), l8(_, "focus"), S === 0 ? z.value = L.value : S === 1 ? z.value = R.value : S === 2 && (z.value = P.value);
 		}
 		function s8(S) {
-			_.passivelyActivated && (x6.value = !0, Q6(S), c8(S, "focus"));
+			_.passivelyActivated && (e8(S), l8(S, "blur"));
 		}
-		function c8(_, S) {
-			_.relatedTarget !== null && (_.relatedTarget === I.value || _.relatedTarget === L.value || _.relatedTarget === k.value || _.relatedTarget === O.value) || (S === "focus" ? (U6(_), x6.value = !0) : S === "blur" && (H6(_), x6.value = !1));
+		function c8(S) {
+			_.passivelyActivated && (Z.value = !0, $6(S), l8(S, "focus"));
 		}
 		function l8(_, S) {
-			n8(_, S, "change");
+			_.relatedTarget !== null && (_.relatedTarget === L.value || _.relatedTarget === R.value || _.relatedTarget === P.value || _.relatedTarget === k.value) || (S === "focus" ? (W6(_), Z.value = !0) : S === "blur" && (U6(_), Z.value = !1));
 		}
-		function u8(_) {
-			Z6(_);
+		function u8(_, S) {
+			r8(_, S, "change");
 		}
 		function d8(_) {
-			W6(_), f8();
+			Q6(_);
 		}
-		function f8() {
-			_.pair ? (z6(["", ""], { source: "clear" }), V6(["", ""], { source: "clear" })) : (z6("", { source: "clear" }), V6("", { source: "clear" }));
+		function f8(_) {
+			q6(_), p8();
 		}
-		function p8(S) {
+		function p8() {
+			_.pair ? (V6(["", ""], { source: "clear" }), H6(["", ""], { source: "clear" })) : (V6("", { source: "clear" }), H6("", { source: "clear" }));
+		}
+		function m8(S) {
 			let { onMousedown: C } = _;
 			C && C(S);
 			let { tagName: T } = S.target;
 			if (T !== "INPUT" && T !== "TEXTAREA") {
 				if (_.resizable) {
-					let { value: _ } = O;
+					let { value: _ } = k;
 					if (_) {
 						let { left: C, top: T, width: E, height: D } = _.getBoundingClientRect();
 						if (C + E - 14 < S.clientX && S.clientX < C + E && T + D - 14 < S.clientY && S.clientY < T + D) return;
 					}
 				}
-				S.preventDefault(), x6.value || S8();
+				S.preventDefault(), Z.value || C8();
 			}
 		}
-		function m8() {
-			var S;
-			Z.value = !0, _.type === "textarea" && ((S = B.value) == null || S.handleMouseEnterWrapper());
-		}
 		function h8() {
 			var S;
-			Z.value = !1, _.type === "textarea" && ((S = B.value) == null || S.handleMouseLeaveWrapper());
+			S6.value = !0, _.type === "textarea" && ((S = V.value) == null || S.handleMouseEnterWrapper());
 		}
 		function g8() {
-			Y.value || j6.value === "click" && (M6.value = !M6.value);
+			var S;
+			S6.value = !1, _.type === "textarea" && ((S = V.value) == null || S.handleMouseLeaveWrapper());
 		}
-		function _8(_) {
-			if (Y.value) return;
+		function _8() {
+			X.value || M6.value === "click" && (P6.value = !P6.value);
+		}
+		function v8(_) {
+			if (X.value) return;
 			_.preventDefault();
 			let S = (_) => {
 				_.preventDefault(), off$1("mouseup", document, S);
 			};
-			if (on$1("mouseup", document, S), j6.value !== "mousedown") return;
-			M6.value = !0;
+			if (on$1("mouseup", document, S), M6.value !== "mousedown") return;
+			P6.value = !0;
 			let C = () => {
-				M6.value = !1, off$1("mouseup", document, C);
+				P6.value = !1, off$1("mouseup", document, C);
 			};
 			on$1("mouseup", document, C);
 		}
-		function v8(S) {
+		function y8(S) {
 			_.onKeyup && call(_.onKeyup, S);
 		}
-		function y8(S) {
+		function b8(S) {
 			switch (_.onKeydown && call(_.onKeydown, S), S.key) {
 				case "Escape":
-					x8();
+					S8();
 					break;
 				case "Enter":
-					b8(S);
+					x8(S);
 					break;
 			}
 		}
-		function b8(S) {
+		function x8(S) {
 			var C, T;
 			if (_.passivelyActivated) {
-				let { value: E } = Q;
+				let { value: E } = C6;
 				if (E) {
-					_.internalDeactivateOnEnter && x8();
+					_.internalDeactivateOnEnter && S8();
 					return;
 				}
-				S.preventDefault(), _.type === "textarea" ? (C = k.value) == null || C.focus() : (T = I.value) == null || T.focus();
+				S.preventDefault(), _.type === "textarea" ? (C = P.value) == null || C.focus() : (T = L.value) == null || T.focus();
 			}
 		}
-		function x8() {
-			_.passivelyActivated && (Q.value = !1, nextTick(() => {
+		function S8() {
+			_.passivelyActivated && (C6.value = !1, nextTick(() => {
 				var _;
-				(_ = O.value) == null || _.focus();
+				(_ = k.value) == null || _.focus();
 			}));
 		}
-		function S8() {
-			var S, C, T;
-			Y.value || (_.passivelyActivated ? (S = O.value) == null || S.focus() : ((C = k.value) == null || C.focus(), (T = I.value) == null || T.focus()));
-		}
 		function C8() {
-			O.value?.contains(document.activeElement) && document.activeElement.blur();
+			var S, C, T;
+			X.value || (_.passivelyActivated ? (S = k.value) == null || S.focus() : ((C = P.value) == null || C.focus(), (T = L.value) == null || T.focus()));
 		}
 		function w8() {
-			var _, S;
-			(_ = k.value) == null || _.select(), (S = I.value) == null || S.select();
+			k.value?.contains(document.activeElement) && document.activeElement.blur();
 		}
 		function T8() {
-			Y.value || (k.value ? k.value.focus() : I.value && I.value.focus());
+			var _, S;
+			(_ = P.value) == null || _.select(), (S = L.value) == null || S.select();
 		}
 		function E8() {
-			let { value: _ } = O;
-			_?.contains(document.activeElement) && _ !== document.activeElement && x8();
+			X.value || (P.value ? P.value.focus() : L.value && L.value.focus());
 		}
-		function D8(S) {
+		function D8() {
+			let { value: _ } = k;
+			_?.contains(document.activeElement) && _ !== document.activeElement && S8();
+		}
+		function O8(S) {
 			if (_.type === "textarea") {
-				let { value: _ } = k;
+				let { value: _ } = P;
 				_?.scrollTo(S);
 			} else {
-				let { value: _ } = I;
+				let { value: _ } = L;
 				_?.scrollTo(S);
 			}
 		}
-		function O8(S) {
+		function k8(S) {
 			let { type: C, pair: T, autosize: E } = _;
 			if (!T && E) if (C === "textarea") {
-				let { value: _ } = P;
+				let { value: _ } = F;
 				_ && (_.textContent = `${S ?? ""}\r\n`);
 			} else {
-				let { value: _ } = F;
+				let { value: _ } = I;
 				_ && (S ? _.textContent = S : _.innerHTML = "&nbsp;");
 			}
 		}
-		function k8() {
-			I6();
+		function A8() {
+			L6();
 		}
-		let A8 = ref({ top: "0" });
-		function j8(_) {
+		let j8 = ref({ top: "0" });
+		function M8(_) {
 			var S;
 			let { scrollTop: C } = _.target;
-			A8.value.top = `${-C}px`, (S = B.value) == null || S.syncUnifiedContainer();
+			j8.value.top = `${-C}px`, (S = V.value) == null || S.syncUnifiedContainer();
 		}
-		let M8 = null;
+		let N8 = null;
 		watchEffect(() => {
 			let { autosize: S, type: C } = _;
-			S && C === "textarea" ? M8 = watch(K, (_) => {
-				!Array.isArray(_) && _ !== C6 && O8(_);
-			}) : M8?.();
+			S && C === "textarea" ? N8 = watch(q, (_) => {
+				!Array.isArray(_) && _ !== w6 && k8(_);
+			}) : N8?.();
 		});
-		let N8 = null;
+		let P8 = null;
 		watchEffect(() => {
-			_.type === "textarea" ? N8 = watch(K, (_) => {
+			_.type === "textarea" ? P8 = watch(q, (_) => {
 				var S;
-				!Array.isArray(_) && _ !== C6 && ((S = B.value) == null || S.syncUnifiedContainer());
-			}) : N8?.();
+				!Array.isArray(_) && _ !== w6 && ((S = V.value) == null || S.syncUnifiedContainer());
+			}) : P8?.();
 		}), provide(inputInjectionKey$1, {
-			mergedValueRef: K,
-			maxlengthRef: L6,
+			mergedValueRef: q,
+			maxlengthRef: R6,
 			mergedClsPrefixRef: S,
 			countGraphemesRef: toRef(_, "countGraphemes")
 		});
-		let P8 = {
-			wrapperElRef: O,
-			inputElRef: I,
-			textareaElRef: k,
-			isCompositing: S6,
-			clear: f8,
-			focus: S8,
-			blur: C8,
-			select: w8,
-			deactivate: E8,
-			activate: T8,
-			scrollTo: D8
-		}, F8 = useRtl$1("Input", E, S), I8 = computed(() => {
-			let { value: _ } = J, { common: { cubicBezierEaseInOut: S }, self: { color: C, borderRadius: T, textColor: E, caretColor: O, caretColorError: k, caretColorWarning: A, textDecorationColor: P, border: F, borderDisabled: I, borderHover: L, borderFocus: R, placeholderColor: z, placeholderColorDisabled: B, lineHeightTextarea: V, colorDisabled: U, colorFocus: W, textColorDisabled: G, boxShadowFocus: K, iconSize: q, colorFocusWarning: Y, boxShadowFocusWarning: X, borderWarning: b6, borderFocusWarning: x6, borderHoverWarning: Z, colorFocusError: S6, boxShadowFocusError: Q, borderError: C6, borderFocusError: w6, borderHoverError: T6, clearSize: E6, clearColor: D6, clearColorHover: O6, clearColorPressed: k6, iconColor: A6, iconColorDisabled: j6, suffixTextColor: M6, countTextColor: N6, countTextColorDisabled: P6, iconColorHover: F6, iconColorPressed: I6, loadingColor: L6, loadingColorError: R6, loadingColorWarning: z6, fontWeight: B6, [createKey$2("padding", _)]: V6, [createKey$2("fontSize", _)]: H6, [createKey$2("height", _)]: U6 } } = D.value, { left: W6, right: G6 } = getMargin$1(V6);
+		let F8 = {
+			wrapperElRef: k,
+			inputElRef: L,
+			textareaElRef: P,
+			isCompositing: Q,
+			clear: p8,
+			focus: C8,
+			blur: w8,
+			select: T8,
+			deactivate: D8,
+			activate: E8,
+			scrollTo: O8
+		}, I8 = useRtl$1("Input", E, S), L8 = computed(() => {
+			let { value: _ } = Y, { common: { cubicBezierEaseInOut: S }, self: { color: C, borderRadius: T, textColor: E, caretColor: D, caretColorError: k, caretColorWarning: A, textDecorationColor: P, border: F, borderDisabled: I, borderHover: L, borderFocus: R, placeholderColor: z, placeholderColorDisabled: B, lineHeightTextarea: V, colorDisabled: U, colorFocus: W, textColorDisabled: G, boxShadowFocus: K, iconSize: q, colorFocusWarning: J, boxShadowFocusWarning: X, borderWarning: b6, borderFocusWarning: x6, borderHoverWarning: Z, colorFocusError: S6, boxShadowFocusError: Q, borderError: C6, borderFocusError: w6, borderHoverError: T6, clearSize: E6, clearColor: D6, clearColorHover: O6, clearColorPressed: k6, iconColor: A6, iconColorDisabled: j6, suffixTextColor: M6, countTextColor: N6, countTextColorDisabled: P6, iconColorHover: F6, iconColorPressed: I6, loadingColor: L6, loadingColorError: R6, loadingColorWarning: z6, fontWeight: B6, [createKey$2("padding", _)]: V6, [createKey$2("fontSize", _)]: H6, [createKey$2("height", _)]: U6 } } = O.value, { left: W6, right: G6 } = getMargin$1(V6);
 			return {
 				"--n-bezier": S,
 				"--n-count-text-color": N6,
@@ -7182,7 +7191,7 @@ var Input_default = defineComponent({
 				"--n-padding-left": W6,
 				"--n-padding-right": G6,
 				"--n-text-color": E,
-				"--n-caret-color": O,
+				"--n-caret-color": D,
 				"--n-text-decoration-color": P,
 				"--n-border": F,
 				"--n-border-disabled": I,
@@ -7198,7 +7207,7 @@ var Input_default = defineComponent({
 				"--n-box-shadow-focus": K,
 				"--n-loading-color": L6,
 				"--n-caret-color-warning": A,
-				"--n-color-focus-warning": Y,
+				"--n-color-focus-warning": J,
 				"--n-box-shadow-focus-warning": X,
 				"--n-border-warning": b6,
 				"--n-border-focus-warning": x6,
@@ -7221,62 +7230,62 @@ var Input_default = defineComponent({
 				"--n-icon-color-disabled": j6,
 				"--n-suffix-text-color": M6
 			};
-		}), L8 = T ? useThemeClass$1("input", computed(() => {
-			let { value: _ } = J;
+		}), R8 = T ? useThemeClass$1("input", computed(() => {
+			let { value: _ } = Y;
 			return _[0];
-		}), I8, _) : void 0;
-		return Object.assign(Object.assign({}, P8), {
-			wrapperElRef: O,
-			inputElRef: I,
-			inputMirrorElRef: F,
-			inputEl2Ref: L,
-			textareaElRef: k,
-			textareaMirrorElRef: P,
-			textareaScrollbarInstRef: B,
-			rtlEnabled: F8,
-			uncontrolledValue: W,
-			mergedValue: K,
-			passwordVisible: M6,
-			mergedPlaceholder: w6,
-			showPlaceholder1: T6,
-			showPlaceholder2: E6,
-			mergedFocus: O6,
-			isComposing: S6,
-			activated: Q,
-			showClearButton: k6,
-			mergedSize: J,
-			mergedDisabled: Y,
-			textDecorationStyle: P6,
+		}), L8, _) : void 0;
+		return Object.assign(Object.assign({}, F8), {
+			wrapperElRef: k,
+			inputElRef: L,
+			inputMirrorElRef: I,
+			inputEl2Ref: R,
+			textareaElRef: P,
+			textareaMirrorElRef: F,
+			textareaScrollbarInstRef: V,
+			rtlEnabled: I8,
+			uncontrolledValue: G,
+			mergedValue: q,
+			passwordVisible: P6,
+			mergedPlaceholder: T6,
+			showPlaceholder1: E6,
+			showPlaceholder2: O6,
+			mergedFocus: k6,
+			isComposing: Q,
+			activated: C6,
+			showClearButton: j6,
+			mergedSize: Y,
+			mergedDisabled: X,
+			textDecorationStyle: F6,
 			mergedClsPrefix: S,
 			mergedBordered: C,
-			mergedShowPasswordOn: j6,
-			placeholderStyle: A8,
-			mergedStatus: X,
-			textAreaScrollContainerWidth: F6,
-			handleTextAreaScroll: j8,
-			handleCompositionStart: e8,
-			handleCompositionEnd: t8,
-			handleInput: n8,
-			handleInputBlur: i8,
-			handleInputFocus: a8,
-			handleWrapperBlur: o8,
-			handleWrapperFocus: s8,
-			handleMouseEnter: m8,
-			handleMouseLeave: h8,
-			handleMouseDown: p8,
-			handleChange: l8,
-			handleClick: u8,
-			handleClear: d8,
-			handlePasswordToggleClick: g8,
-			handlePasswordToggleMousedown: _8,
-			handleWrapperKeydown: y8,
-			handleWrapperKeyup: v8,
-			handleTextAreaMirrorResize: k8,
-			getTextareaScrollContainer: () => k.value,
-			mergedTheme: D,
-			cssVars: T ? void 0 : I8,
-			themeClass: L8?.themeClass,
-			onRender: L8?.onRender
+			mergedShowPasswordOn: M6,
+			placeholderStyle: j8,
+			mergedStatus: x6,
+			textAreaScrollContainerWidth: I6,
+			handleTextAreaScroll: M8,
+			handleCompositionStart: t8,
+			handleCompositionEnd: n8,
+			handleInput: r8,
+			handleInputBlur: a8,
+			handleInputFocus: o8,
+			handleWrapperBlur: s8,
+			handleWrapperFocus: c8,
+			handleMouseEnter: h8,
+			handleMouseLeave: g8,
+			handleMouseDown: m8,
+			handleChange: u8,
+			handleClick: d8,
+			handleClear: f8,
+			handlePasswordToggleClick: _8,
+			handlePasswordToggleMousedown: v8,
+			handleWrapperKeydown: b8,
+			handleWrapperKeyup: y8,
+			handleTextAreaMirrorResize: A8,
+			getTextareaScrollContainer: () => P.value,
+			mergedTheme: O,
+			cssVars: T ? void 0 : L8,
+			themeClass: R8?.themeClass,
+			onRender: R8?.onRender
 		});
 	},
 	render() {
@@ -7285,6 +7294,7 @@ var Input_default = defineComponent({
 			ref: "wrapperElRef",
 			class: [
 				`${_}-input`,
+				`${_}-input--${this.mergedSize}-size`,
 				T,
 				C && `${_}-input--${C}-status`,
 				{
@@ -8120,10 +8130,7 @@ var DropdownOption_default$1 = defineComponent({
 		type: Boolean,
 		default: !0
 	},
-	size: {
-		type: String,
-		default: "medium"
-	},
+	size: String,
 	inverted: Boolean,
 	placement: {
 		type: String,
@@ -8180,27 +8187,27 @@ var Dropdown_default$1 = defineComponent({
 		useKeyboard$2({ keydown: {
 			ArrowUp: {
 				prevent: !0,
-				handler: J
+				handler: X
 			},
 			ArrowRight: {
 				prevent: !0,
-				handler: q
+				handler: Y
 			},
 			ArrowDown: {
 				prevent: !0,
-				handler: Y
+				handler: b6
 			},
 			ArrowLeft: {
 				prevent: !0,
-				handler: K
+				handler: J
 			},
 			Enter: {
 				prevent: !0,
-				handler: X
+				handler: x6
 			},
-			Escape: G
+			Escape: q
 		} }, L);
-		let { mergedClsPrefixRef: R, inlineThemeDisabled: z } = useConfig$1(_), B = use_theme_default$3("Dropdown", "-dropdown", index_cssr_default$85, light_default$50, _, R);
+		let { mergedClsPrefixRef: R, inlineThemeDisabled: z, mergedComponentPropsRef: B } = useConfig$1(_), V = computed(() => _.size || B?.value?.Dropdown?.size || "medium"), U = use_theme_default$3("Dropdown", "-dropdown", index_cssr_default$85, light_default$50, _, R);
 		provide(dropdownInjectionKey$1, {
 			labelFieldRef: toRef(_, "labelField"),
 			childrenFieldRef: toRef(_, "childrenField"),
@@ -8216,52 +8223,52 @@ var Dropdown_default$1 = defineComponent({
 			nodePropsRef: toRef(_, "nodeProps"),
 			renderOptionRef: toRef(_, "renderOption"),
 			menuPropsRef: toRef(_, "menuProps"),
-			doSelect: V,
-			doUpdateShow: U
+			doSelect: W,
+			doUpdateShow: G
 		}), watch(C, (S) => {
-			!_.animated && !S && W();
+			!_.animated && !S && K();
 		});
-		function V(S, C) {
+		function W(S, C) {
 			let { onSelect: T } = _;
 			T && call(T, S, C);
 		}
-		function U(C) {
+		function G(C) {
 			let { "onUpdate:show": T, onUpdateShow: E } = _;
 			T && call(T, C), E && call(E, C), S.value = C;
 		}
-		function W() {
-			D.value = null, O.value = null, k.value = null;
-		}
-		function G() {
-			U(!1);
-		}
 		function K() {
-			x6("left");
+			D.value = null, O.value = null, k.value = null;
 		}
 		function q() {
-			x6("right");
+			G(!1);
 		}
 		function J() {
-			x6("up");
+			S6("left");
 		}
 		function Y() {
-			x6("down");
+			S6("right");
 		}
 		function X() {
-			let _ = b6();
-			_?.isLeaf && C.value && (V(_.key, _.rawNode), U(!1));
+			S6("up");
 		}
 		function b6() {
+			S6("down");
+		}
+		function x6() {
+			let _ = Z();
+			_?.isLeaf && C.value && (W(_.key, _.rawNode), G(!1));
+		}
+		function Z() {
 			let { value: _ } = T, { value: S } = P;
 			return !_ || S === null ? null : _.getNode(S) ?? null;
 		}
-		function x6(_) {
+		function S6(_) {
 			let { value: S } = P, { value: { getFirstAvailableNode: C } } = T, E = null;
 			if (S === null) {
 				let _ = C();
 				_ !== null && (E = _.key);
 			} else {
-				let S = b6();
+				let S = Z();
 				if (S) {
 					let C;
 					switch (_) {
@@ -8283,8 +8290,8 @@ var Dropdown_default$1 = defineComponent({
 			}
 			E !== null && (D.value = null, O.value = E);
 		}
-		let Z = computed(() => {
-			let { size: S, inverted: C } = _, { common: { cubicBezierEaseInOut: T }, self: E } = B.value, { padding: D, dividerColor: O, borderRadius: k, optionOpacityDisabled: A, [createKey$2("optionIconSuffixWidth", S)]: P, [createKey$2("optionSuffixWidth", S)]: F, [createKey$2("optionIconPrefixWidth", S)]: I, [createKey$2("optionPrefixWidth", S)]: L, [createKey$2("fontSize", S)]: R, [createKey$2("optionHeight", S)]: z, [createKey$2("optionIconSize", S)]: V } = E, U = {
+		let Q = computed(() => {
+			let { inverted: S } = _, C = V.value, { common: { cubicBezierEaseInOut: T }, self: E } = U.value, { padding: D, dividerColor: O, borderRadius: k, optionOpacityDisabled: A, [createKey$2("optionIconSuffixWidth", C)]: P, [createKey$2("optionSuffixWidth", C)]: F, [createKey$2("optionIconPrefixWidth", C)]: I, [createKey$2("optionPrefixWidth", C)]: L, [createKey$2("fontSize", C)]: R, [createKey$2("optionHeight", C)]: z, [createKey$2("optionIconSize", C)]: B } = E, W = {
 				"--n-bezier": T,
 				"--n-font-size": R,
 				"--n-padding": D,
@@ -8294,24 +8301,25 @@ var Dropdown_default$1 = defineComponent({
 				"--n-option-icon-prefix-width": I,
 				"--n-option-suffix-width": F,
 				"--n-option-icon-suffix-width": P,
-				"--n-option-icon-size": V,
+				"--n-option-icon-size": B,
 				"--n-divider-color": O,
 				"--n-option-opacity-disabled": A
 			};
-			return C ? (U["--n-color"] = E.colorInverted, U["--n-option-color-hover"] = E.optionColorHoverInverted, U["--n-option-color-active"] = E.optionColorActiveInverted, U["--n-option-text-color"] = E.optionTextColorInverted, U["--n-option-text-color-hover"] = E.optionTextColorHoverInverted, U["--n-option-text-color-active"] = E.optionTextColorActiveInverted, U["--n-option-text-color-child-active"] = E.optionTextColorChildActiveInverted, U["--n-prefix-color"] = E.prefixColorInverted, U["--n-suffix-color"] = E.suffixColorInverted, U["--n-group-header-text-color"] = E.groupHeaderTextColorInverted) : (U["--n-color"] = E.color, U["--n-option-color-hover"] = E.optionColorHover, U["--n-option-color-active"] = E.optionColorActive, U["--n-option-text-color"] = E.optionTextColor, U["--n-option-text-color-hover"] = E.optionTextColorHover, U["--n-option-text-color-active"] = E.optionTextColorActive, U["--n-option-text-color-child-active"] = E.optionTextColorChildActive, U["--n-prefix-color"] = E.prefixColor, U["--n-suffix-color"] = E.suffixColor, U["--n-group-header-text-color"] = E.groupHeaderTextColor), U;
-		}), S6 = z ? useThemeClass$1("dropdown", computed(() => `${_.size[0]}${_.inverted ? "i" : ""}`), Z, _) : void 0;
+			return S ? (W["--n-color"] = E.colorInverted, W["--n-option-color-hover"] = E.optionColorHoverInverted, W["--n-option-color-active"] = E.optionColorActiveInverted, W["--n-option-text-color"] = E.optionTextColorInverted, W["--n-option-text-color-hover"] = E.optionTextColorHoverInverted, W["--n-option-text-color-active"] = E.optionTextColorActiveInverted, W["--n-option-text-color-child-active"] = E.optionTextColorChildActiveInverted, W["--n-prefix-color"] = E.prefixColorInverted, W["--n-suffix-color"] = E.suffixColorInverted, W["--n-group-header-text-color"] = E.groupHeaderTextColorInverted) : (W["--n-color"] = E.color, W["--n-option-color-hover"] = E.optionColorHover, W["--n-option-color-active"] = E.optionColorActive, W["--n-option-text-color"] = E.optionTextColor, W["--n-option-text-color-hover"] = E.optionTextColorHover, W["--n-option-text-color-active"] = E.optionTextColorActive, W["--n-option-text-color-child-active"] = E.optionTextColorChildActive, W["--n-prefix-color"] = E.prefixColor, W["--n-suffix-color"] = E.suffixColor, W["--n-group-header-text-color"] = E.groupHeaderTextColor), W;
+		}), C6 = z ? useThemeClass$1("dropdown", computed(() => `${V.value[0]}${_.inverted ? "i" : ""}`), Q, _) : void 0;
 		return {
 			mergedClsPrefix: R,
-			mergedTheme: B,
+			mergedTheme: U,
+			mergedSize: V,
 			tmNodes: E,
 			mergedShow: C,
 			handleAfterLeave: () => {
-				_.animated && W();
+				_.animated && K();
 			},
-			doUpdateShow: U,
-			cssVars: z ? void 0 : Z,
-			themeClass: S6?.themeClass,
-			onRender: S6?.onRender
+			doUpdateShow: G,
+			cssVars: z ? void 0 : Q,
+			themeClass: C6?.themeClass,
+			onRender: C6?.onRender
 		};
 	},
 	render() {
@@ -8324,6 +8332,7 @@ var Dropdown_default$1 = defineComponent({
 				class: [
 					_,
 					`${O}-dropdown`,
+					`${O}-dropdown--${this.mergedSize}-size`,
 					this.themeClass
 				],
 				clsPrefix: O,
@@ -8666,7 +8675,14 @@ var Form_default = defineComponent({
 			let S = T.value;
 			(S === void 0 || _ >= S) && (T.value = _);
 		};
-		function D(_) {
+		function D() {
+			var _;
+			for (let S of keysOf$1(C)) {
+				let T = C[S];
+				for (let S of T) (_ = S.invalidateLabelWidth) == null || _.call(S);
+			}
+		}
+		function O(_) {
 			return __awaiter$6(this, arguments, void 0, function* (_, S = () => !0) {
 				return yield new Promise((T, E) => {
 					let D = [];
@@ -8683,7 +8699,7 @@ var Form_default = defineComponent({
 				});
 			});
 		}
-		function O() {
+		function k() {
 			for (let _ of keysOf$1(C)) {
 				let S = C[_];
 				for (let _ of S) _.restoreValidation();
@@ -8694,11 +8710,12 @@ var Form_default = defineComponent({
 			maxChildLabelWidthRef: T,
 			deriveMaxChildLabelWidth: E
 		}), provide(formItemInstsInjectionKey, { formItems: C });
-		let k = {
-			validate: D,
-			restoreValidation: O
+		let A = {
+			validate: O,
+			restoreValidation: k,
+			invalidateLabelWidth: D
 		};
-		return Object.assign(k, { mergedClsPrefix: S });
+		return Object.assign(A, { mergedClsPrefix: S });
 	},
 	render() {
 		let { mergedClsPrefix: _ } = this;
@@ -9325,8 +9342,8 @@ var form_item_cssr_default = cB$3("form-item", "\n display: grid;\n line-height:
 	])])
 ]);
 function formItemSize(_) {
-	let S = inject(formInjectionKey, null);
-	return { mergedSize: computed(() => _.size === void 0 ? S?.props.size === void 0 ? "medium" : S.props.size : _.size) };
+	let S = inject(formInjectionKey, null), { mergedComponentPropsRef: C } = useConfig$1(_);
+	return { mergedSize: computed(() => _.size === void 0 ? S?.props.size === void 0 ? C?.value?.Form?.size || "medium" : S.props.size : _.size) };
 }
 function formItemMisc(_) {
 	let S = inject(formInjectionKey, null), C = computed(() => {
@@ -9478,16 +9495,25 @@ function wrapValidator(_, S) {
 var FormItem_default = defineComponent({
 	name: "FormItem",
 	props: formItemProps,
+	slots: Object,
 	setup(_) {
 		useInjectionInstanceCollection(formItemInstsInjectionKey, "formItems", toRef(_, "path"));
-		let { mergedClsPrefixRef: S, inlineThemeDisabled: C } = useConfig$1(_), T = inject(formInjectionKey, null), E = formItemSize(_), D = formItemMisc(_), { validationErrored: O, validationWarned: k } = D, { mergedRequired: P, mergedRules: F } = formItemRule(_), { mergedSize: I } = E, { mergedLabelPlacement: L, mergedLabelAlign: R, mergedRequireMarkPlacement: z } = D, B = ref([]), V = ref(createId$1()), U = T ? toRef(T.props, "disabled") : ref(!1), W = use_theme_default$3("Form", "-form-item", form_item_cssr_default, light_default$48, _, S);
+		let { mergedClsPrefixRef: S, inlineThemeDisabled: C } = useConfig$1(_), T = inject(formInjectionKey, null), E = formItemSize(_), D = formItemMisc(_), { validationErrored: O, validationWarned: k } = D, { mergedRequired: P, mergedRules: F } = formItemRule(_), { mergedSize: I } = E, { mergedLabelPlacement: L, mergedLabelAlign: R, mergedRequireMarkPlacement: z } = D, B = ref([]), V = ref(createId$1()), U = ref(null), W = T ? toRef(T.props, "disabled") : ref(!1), G = use_theme_default$3("Form", "-form-item", form_item_cssr_default, light_default$48, _, S);
 		watch(toRef(_, "path"), () => {
-			_.ignorePathChange || G();
+			_.ignorePathChange || J();
 		});
-		function G() {
+		function q() {
+			if (!D.isAutoLabelWidth.value) return;
+			let _ = U.value;
+			if (_ !== null) {
+				let S = _.style.whiteSpace;
+				_.style.whiteSpace = "nowrap", _.style.width = "", T?.deriveMaxChildLabelWidth(Number(getComputedStyle(_).width.slice(0, -2))), _.style.whiteSpace = S;
+			}
+		}
+		function J() {
 			B.value = [], O.value = !1, k.value = !1, _.feedback && (V.value = createId$1());
 		}
-		let q = (...S) => __awaiter$5(this, [...S], void 0, function* (S = null, C = () => !0, E = { suppressWarning: !0 }) {
+		let Y = (...S) => __awaiter$5(this, [...S], void 0, function* (S = null, C = () => !0, E = { suppressWarning: !0 }) {
 			let { path: D } = _;
 			E ? E.first ||= _.first : E = {};
 			let { value: A } = F, P = T ? get_default$1(T.props.model, D || "") : void 0, I = {}, L = {}, R = (S ? A.filter((_) => Array.isArray(_.trigger) ? _.trigger.includes(S) : _.trigger === S) : A).filter(C).map((_, S) => {
@@ -9503,8 +9529,8 @@ var FormItem_default = defineComponent({
 				warnings: void 0
 			};
 			if (!R.length) return U;
-			let W = D ?? "__n_no_path__", K = new Schema({ [W]: z }), q = new Schema({ [W]: V }), { validateMessages: J } = T?.props || {};
-			J && (K.messages(J), q.messages(J));
+			let W = D ?? "__n_no_path__", G = new Schema({ [W]: z }), K = new Schema({ [W]: V }), { validateMessages: q } = T?.props || {};
+			q && (G.messages(q), K.messages(q));
 			let Y = (_) => {
 				B.value = _.map((_) => {
 					let S = _?.message || "";
@@ -9518,35 +9544,35 @@ var FormItem_default = defineComponent({
 			};
 			if (z.length) {
 				let _ = yield new Promise((_) => {
-					K.validate({ [W]: P }, E, _);
+					G.validate({ [W]: P }, E, _);
 				});
 				_?.length && (U.valid = !1, U.errors = _, Y(_));
 			}
 			if (V.length && !U.errors) {
 				let _ = yield new Promise((_) => {
-					q.validate({ [W]: P }, E, _);
+					K.validate({ [W]: P }, E, _);
 				});
 				_?.length && (Y(_), U.warnings = _);
 			}
-			return !U.errors && !U.warnings ? G() : (O.value = !!U.errors, k.value = !!U.warnings), U;
+			return !U.errors && !U.warnings ? J() : (O.value = !!U.errors, k.value = !!U.warnings), U;
 		});
-		function J() {
-			q("blur");
-		}
-		function Y() {
-			q("change");
-		}
 		function X() {
-			q("focus");
+			Y("blur");
 		}
 		function b6() {
-			q("input");
+			Y("change");
 		}
-		function x6(_, S) {
+		function x6() {
+			Y("focus");
+		}
+		function Z() {
+			Y("input");
+		}
+		function S6(_, S) {
 			return __awaiter$5(this, void 0, void 0, function* () {
 				let C, T, E, D;
 				return typeof _ == "string" ? (C = _, T = S) : typeof _ == "object" && _ && (C = _.trigger, T = _.callback, E = _.shouldRuleBeApplied, D = _.options), yield new Promise((_, S) => {
-					q(C, E, D).then(({ valid: C, errors: E, warnings: D }) => {
+					Y(C, E, D).then(({ valid: C, errors: E, warnings: D }) => {
 						C ? (T && T(void 0, { warnings: D }), _({ warnings: D })) : (T && T(E, { warnings: D }), S(E));
 					});
 				});
@@ -9554,30 +9580,24 @@ var FormItem_default = defineComponent({
 		}
 		provide(formItemInjectionKey$1, {
 			path: toRef(_, "path"),
-			disabled: U,
+			disabled: W,
 			mergedSize: E.mergedSize,
 			mergedValidationStatus: D.mergedValidationStatus,
-			restoreValidation: G,
-			handleContentBlur: J,
-			handleContentChange: Y,
-			handleContentFocus: X,
-			handleContentInput: b6
-		});
-		let Z = {
-			validate: x6,
-			restoreValidation: G,
-			internalValidate: q
-		}, S6 = ref(null);
-		onMounted(() => {
-			if (!D.isAutoLabelWidth.value) return;
-			let _ = S6.value;
-			if (_ !== null) {
-				let S = _.style.whiteSpace;
-				_.style.whiteSpace = "nowrap", _.style.width = "", T?.deriveMaxChildLabelWidth(Number(getComputedStyle(_).width.slice(0, -2))), _.style.whiteSpace = S;
-			}
+			restoreValidation: J,
+			handleContentBlur: X,
+			handleContentChange: b6,
+			handleContentFocus: x6,
+			handleContentInput: Z
 		});
-		let Q = computed(() => {
-			let { value: _ } = I, { value: S } = L, C = S === "top" ? "vertical" : "horizontal", { common: { cubicBezierEaseInOut: T }, self: { labelTextColor: E, asteriskColor: D, lineHeight: O, feedbackTextColor: k, feedbackTextColorWarning: A, feedbackTextColorError: P, feedbackPadding: F, labelFontWeight: z, [createKey$2("labelHeight", _)]: B, [createKey$2("blankHeight", _)]: V, [createKey$2("feedbackFontSize", _)]: U, [createKey$2("feedbackHeight", _)]: G, [createKey$2("labelPadding", C)]: K, [createKey$2("labelTextAlign", C)]: q, [createKey$2(createKey$2("labelFontSize", S), _)]: J } } = W.value, Y = R.value ?? q;
+		let Q = {
+			validate: S6,
+			restoreValidation: J,
+			internalValidate: Y,
+			invalidateLabelWidth: q
+		};
+		onMounted(q);
+		let C6 = computed(() => {
+			let { value: _ } = I, { value: S } = L, C = S === "top" ? "vertical" : "horizontal", { common: { cubicBezierEaseInOut: T }, self: { labelTextColor: E, asteriskColor: D, lineHeight: O, feedbackTextColor: k, feedbackTextColorWarning: A, feedbackTextColorError: P, feedbackPadding: F, labelFontWeight: z, [createKey$2("labelHeight", _)]: B, [createKey$2("blankHeight", _)]: V, [createKey$2("feedbackFontSize", _)]: U, [createKey$2("feedbackHeight", _)]: W, [createKey$2("labelPadding", C)]: K, [createKey$2("labelTextAlign", C)]: q, [createKey$2(createKey$2("labelFontSize", S), _)]: J } } = G.value, Y = R.value ?? q;
 			return S === "top" && (Y = Y === "right" ? "flex-end" : "flex-start"), {
 				"--n-bezier": T,
 				"--n-line-height": O,
@@ -9591,23 +9611,23 @@ var FormItem_default = defineComponent({
 				"--n-label-text-color": E,
 				"--n-feedback-padding": F,
 				"--n-feedback-font-size": U,
-				"--n-feedback-height": G,
+				"--n-feedback-height": W,
 				"--n-feedback-text-color": k,
 				"--n-feedback-text-color-warning": A,
 				"--n-feedback-text-color-error": P
 			};
-		}), C6 = C ? useThemeClass$1("form-item", computed(() => `${I.value[0]}${L.value[0]}${R.value?.[0] || ""}`), Q, _) : void 0, w6 = computed(() => L.value === "left" && z.value === "left" && R.value === "left");
+		}), w6 = C ? useThemeClass$1("form-item", computed(() => `${I.value[0]}${L.value[0]}${R.value?.[0] || ""}`), C6, _) : void 0, T6 = computed(() => L.value === "left" && z.value === "left" && R.value === "left");
 		return Object.assign(Object.assign(Object.assign(Object.assign({
-			labelElementRef: S6,
+			labelElementRef: U,
 			mergedClsPrefix: S,
 			mergedRequired: P,
 			feedbackId: V,
 			renderExplains: B,
-			reverseColSpace: w6
-		}, D), E), Z), {
-			cssVars: C ? void 0 : Q,
-			themeClass: C6?.themeClass,
-			onRender: C6?.onRender
+			reverseColSpace: T6
+		}, D), E), Q), {
+			cssVars: C ? void 0 : C6,
+			themeClass: w6?.themeClass,
+			onRender: w6?.onRender
 		});
 	},
 	render() {
@@ -9736,6 +9756,7 @@ var FormItemGridItem_default = defineComponent({
 	name: "FormItemGridItem",
 	alias: ["FormItemGi"],
 	props: formItemGiProps,
+	slots: Object,
 	setup() {
 		let _ = ref(null);
 		return {
@@ -10948,10 +10969,7 @@ const tabsProps$1 = Object.assign(Object.assign({}, use_theme_default$3.props),
 	},
 	closable: Boolean,
 	justifyContent: String,
-	size: {
-		type: String,
-		default: "medium"
-	},
+	size: String,
 	placement: {
 		type: String,
 		default: "top"
@@ -10988,28 +11006,28 @@ var Tabs_default = defineComponent({
 		process.env.NODE_ENV !== "production" && watchEffect(() => {
 			_.labelSize !== void 0 && warnOnce$1("tabs", "`label-size` is deprecated, please use `size` instead."), _.activeName !== void 0 && warnOnce$1("tabs", "`active-name` is deprecated, please use `value` instead."), _.onActiveNameChange !== void 0 && warnOnce$1("tabs", "`on-active-name-change` is deprecated, please use `on-update:value` instead.");
 		});
-		let { mergedClsPrefixRef: C, inlineThemeDisabled: T } = useConfig$1(_), E = use_theme_default$3("Tabs", "-tabs", index_cssr_default$83, light_default$44, _, C), D = ref(null), O = ref(null), k = ref(null), P = ref(null), F = ref(null), I = ref(null), L = ref(!0), R = ref(!0), z = useCompitable$1(_, ["labelSize", "size"]), B = useCompitable$1(_, ["activeName", "value"]), V = ref(B.value ?? _.defaultValue ?? (S.default ? flatten$4(S.default())[0]?.props?.name : null)), U = useMergedState$1(B, V), W = { id: 0 }, G = computed(() => {
+		let { mergedClsPrefixRef: C, inlineThemeDisabled: T, mergedComponentPropsRef: E } = useConfig$1(_), D = use_theme_default$3("Tabs", "-tabs", index_cssr_default$83, light_default$44, _, C), O = ref(null), k = ref(null), P = ref(null), F = ref(null), I = ref(null), L = ref(null), R = ref(!0), z = ref(!0), B = useCompitable$1(_, ["labelSize", "size"]), V = computed(() => B.value ? B.value : E?.value?.Tabs?.size || "medium"), U = useCompitable$1(_, ["activeName", "value"]), W = ref(U.value ?? _.defaultValue ?? (S.default ? flatten$4(S.default())[0]?.props?.name : null)), G = useMergedState$1(U, W), K = { id: 0 }, q = computed(() => {
 			if (!(!_.justifyContent || _.type === "card")) return {
 				display: "flex",
 				justifyContent: _.justifyContent
 			};
 		});
-		watch(U, () => {
-			W.id = 0, X(), x6();
+		watch(G, () => {
+			K.id = 0, Z(), S6();
 		});
-		function K() {
-			let { value: _ } = U;
-			return _ === null ? null : D.value?.querySelector(`[data-name="${_}"]`);
+		function J() {
+			let { value: _ } = G;
+			return _ === null ? null : O.value?.querySelector(`[data-name="${_}"]`);
 		}
-		function q(S) {
+		function Y(S) {
 			if (_.type === "card") return;
-			let { value: T } = O;
+			let { value: T } = k;
 			if (!T) return;
 			let E = T.style.opacity === "0";
 			if (S) {
 				let D = `${C.value}-tabs-bar--disabled`, { barWidth: O, placement: k } = _;
 				if (S.dataset.disabled === "true" ? T.classList.add(D) : T.classList.remove(D), ["top", "bottom"].includes(k)) {
-					if (Y([
+					if (x6([
 						"top",
 						"maxHeight",
 						"height"
@@ -11019,7 +11037,7 @@ var Tabs_default = defineComponent({
 					} else T.style.left = `${S.offsetLeft}px`, T.style.maxWidth = `${S.offsetWidth}px`;
 					T.style.width = "8192px", E && (T.style.transition = "none"), T.offsetWidth, E && (T.style.transition = "", T.style.opacity = "1");
 				} else {
-					if (Y([
+					if (x6([
 						"left",
 						"maxWidth",
 						"width"
@@ -11031,24 +11049,24 @@ var Tabs_default = defineComponent({
 				}
 			}
 		}
-		function J() {
+		function X() {
 			if (_.type === "card") return;
-			let { value: S } = O;
+			let { value: S } = k;
 			S && (S.style.opacity = "0");
 		}
-		function Y(_) {
-			let { value: S } = O;
+		function x6(_) {
+			let { value: S } = k;
 			if (S) for (let C of _) S.style[C] = "";
 		}
-		function X() {
+		function Z() {
 			if (_.type === "card") return;
-			let S = K();
-			S ? q(S) : J();
+			let S = J();
+			S ? Y(S) : X();
 		}
-		function x6() {
-			let _ = F.value?.$el;
+		function S6() {
+			let _ = I.value?.$el;
 			if (!_) return;
-			let S = K();
+			let S = J();
 			if (!S) return;
 			let { scrollLeft: C, offsetWidth: T } = _, { offsetLeft: E, offsetWidth: D } = S;
 			C > E ? _.scrollTo({
@@ -11061,28 +11079,28 @@ var Tabs_default = defineComponent({
 				behavior: "smooth"
 			});
 		}
-		let Z = ref(null), S6 = 0, Q = null;
-		function C6(_) {
-			let S = Z.value;
+		let Q = ref(null), C6 = 0, w6 = null;
+		function T6(_) {
+			let S = Q.value;
 			if (S) {
-				S6 = _.getBoundingClientRect().height;
-				let C = `${S6}px`, T = () => {
+				C6 = _.getBoundingClientRect().height;
+				let C = `${C6}px`, T = () => {
 					S.style.height = C, S.style.maxHeight = C;
 				};
-				Q ? (T(), Q(), Q = null) : Q = T;
+				w6 ? (T(), w6(), w6 = null) : w6 = T;
 			}
 		}
-		function w6(_) {
-			let S = Z.value;
+		function E6(_) {
+			let S = Q.value;
 			if (S) {
 				let C = _.getBoundingClientRect().height, T = () => {
-					document.body.offsetHeight, S.style.maxHeight = `${C}px`, S.style.height = `${Math.max(S6, C)}px`;
+					document.body.offsetHeight, S.style.maxHeight = `${C}px`, S.style.height = `${Math.max(C6, C)}px`;
 				};
-				Q ? (Q(), Q = null, T()) : Q = T;
+				w6 ? (w6(), w6 = null, T()) : w6 = T;
 			}
 		}
-		function T6() {
-			let S = Z.value;
+		function O6() {
+			let S = Q.value;
 			if (S) {
 				S.style.maxHeight = "", S.style.height = "";
 				let { paneWrapperStyle: C } = _;
@@ -11093,82 +11111,82 @@ var Tabs_default = defineComponent({
 				}
 			}
 		}
-		let E6 = { value: [] }, O6 = ref("next");
-		function k6(_) {
-			let S = U.value, C = "next";
-			for (let T of E6.value) {
+		let k6 = { value: [] }, j6 = ref("next");
+		function M6(_) {
+			let S = G.value, C = "next";
+			for (let T of k6.value) {
 				if (T === S) break;
 				if (T === _) {
 					C = "prev";
 					break;
 				}
 			}
-			O6.value = C, j6(_);
+			j6.value = C, P6(_);
 		}
-		function j6(S) {
+		function P6(S) {
 			let { onActiveNameChange: C, onUpdateValue: T, "onUpdate:value": E } = _;
-			C && call(C, S), T && call(T, S), E && call(E, S), V.value = S;
+			C && call(C, S), T && call(T, S), E && call(E, S), W.value = S;
 		}
-		function M6(S) {
+		function F6(S) {
 			let { onClose: C } = _;
 			C && call(C, S);
 		}
-		let P6 = !0;
-		function F6() {
-			let { value: _ } = O;
+		let I6 = !0;
+		function L6() {
+			let { value: _ } = k;
 			if (!_) return;
-			P6 ||= !1;
+			I6 ||= !1;
 			let S = "transition-disabled";
-			_.classList.add(S), X(), _.classList.remove(S);
+			_.classList.add(S), Z(), _.classList.remove(S);
 		}
-		let I6 = ref(null);
-		function L6({ transitionDisabled: _ }) {
-			let S = D.value;
+		let R6 = ref(null);
+		function z6({ transitionDisabled: _ }) {
+			let S = O.value;
 			if (!S) return;
 			_ && S.classList.add("transition-disabled");
-			let C = K();
-			C && I6.value && (I6.value.style.width = `${C.offsetWidth}px`, I6.value.style.height = `${C.offsetHeight}px`, I6.value.style.transform = `translateX(${C.offsetLeft - depx$1(getComputedStyle(S).paddingLeft)}px)`, _ && I6.value.offsetWidth), _ && S.classList.remove("transition-disabled");
+			let C = J();
+			C && R6.value && (R6.value.style.width = `${C.offsetWidth}px`, R6.value.style.height = `${C.offsetHeight}px`, R6.value.style.transform = `translateX(${C.offsetLeft - depx$1(getComputedStyle(S).paddingLeft)}px)`, _ && R6.value.offsetWidth), _ && S.classList.remove("transition-disabled");
 		}
-		watch([U], () => {
+		watch([G], () => {
 			_.type === "segment" && nextTick(() => {
-				L6({ transitionDisabled: !1 });
+				z6({ transitionDisabled: !1 });
 			});
 		}), onMounted(() => {
-			_.type === "segment" && L6({ transitionDisabled: !0 });
+			_.type === "segment" && z6({ transitionDisabled: !0 });
 		});
-		let R6 = 0;
-		function z6(S) {
-			if (S.contentRect.width === 0 && S.contentRect.height === 0 || R6 === S.contentRect.width) return;
-			R6 = S.contentRect.width;
+		let V6 = 0;
+		function H6(S) {
+			if (S.contentRect.width === 0 && S.contentRect.height === 0 || V6 === S.contentRect.width) return;
+			V6 = S.contentRect.width;
 			let { type: C } = _;
-			if ((C === "line" || C === "bar") && (P6 || _.justifyContent?.startsWith("space")) && F6(), C !== "segment") {
+			if ((C === "line" || C === "bar") && (I6 || _.justifyContent?.startsWith("space")) && L6(), C !== "segment") {
 				let { placement: S } = _;
-				J6((S === "top" || S === "bottom" ? F.value?.$el : I.value) || null);
+				X6((S === "top" || S === "bottom" ? I.value?.$el : L.value) || null);
 			}
 		}
-		let V6 = throttle$2(z6, 64);
+		let U6 = throttle$2(H6, 64);
 		watch([() => _.justifyContent, () => _.size], () => {
 			nextTick(() => {
 				let { type: S } = _;
-				(S === "line" || S === "bar") && F6();
+				(S === "line" || S === "bar") && L6();
 			});
 		});
-		let H6 = ref(!1);
-		function U6(S) {
+		let W6 = ref(!1);
+		function q6(S) {
 			let { target: C, contentRect: { width: T, height: E } } = S, D = C.parentElement.parentElement.offsetWidth, O = C.parentElement.parentElement.offsetHeight, { placement: k } = _;
-			if (!H6.value) k === "top" || k === "bottom" ? D < T && (H6.value = !0) : O < E && (H6.value = !0);
+			if (!W6.value) k === "top" || k === "bottom" ? D < T && (W6.value = !0) : O < E && (W6.value = !0);
 			else {
-				let { value: _ } = P;
+				let { value: _ } = F;
 				if (!_) return;
-				k === "top" || k === "bottom" ? D - T > _.$el.offsetWidth && (H6.value = !1) : O - E > _.$el.offsetHeight && (H6.value = !1);
+				k === "top" || k === "bottom" ? D - T > _.$el.offsetWidth && (W6.value = !1) : O - E > _.$el.offsetHeight && (W6.value = !1);
 			}
-			J6(F.value?.$el || null);
+			X6(I.value?.$el || null);
 		}
-		let W6 = throttle$2(U6, 64);
-		function q6() {
+		let J6 = throttle$2(q6, 64);
+		function Y6() {
 			let { onAdd: S } = _;
 			S && S(), nextTick(() => {
-				let _ = K(), { value: S } = F;
+				let _ = J(), { value: S } = I;
 				!_ || !S || S.scrollTo({
 					left: _.offsetLeft,
 					top: 0,
@@ -11176,19 +11194,19 @@ var Tabs_default = defineComponent({
 				});
 			});
 		}
-		function J6(S) {
+		function X6(S) {
 			if (!S) return;
 			let { placement: C } = _;
 			if (C === "top" || C === "bottom") {
 				let { scrollLeft: _, scrollWidth: C, offsetWidth: T } = S;
-				L.value = _ <= 0, R.value = _ + T >= C;
+				R.value = _ <= 0, z.value = _ + T >= C;
 			} else {
 				let { scrollTop: _, scrollHeight: C, offsetHeight: T } = S;
-				L.value = _ <= 0, R.value = _ + T >= C;
+				R.value = _ <= 0, z.value = _ + T >= C;
 			}
 		}
-		let Y6 = throttle$2((_) => {
-			J6(_.target);
+		let Z6 = throttle$2((_) => {
+			X6(_.target);
 		}, 64);
 		provide(tabsInjectionKey$1, {
 			triggerRef: toRef(_, "trigger"),
@@ -11201,31 +11219,31 @@ var Tabs_default = defineComponent({
 			mergedClsPrefixRef: C,
 			typeRef: toRef(_, "type"),
 			closableRef: toRef(_, "closable"),
-			valueRef: U,
-			tabChangeIdRef: W,
+			valueRef: G,
+			tabChangeIdRef: K,
 			onBeforeLeaveRef: toRef(_, "onBeforeLeave"),
-			activateTab: k6,
-			handleClose: M6,
-			handleAdd: q6
+			activateTab: M6,
+			handleClose: F6,
+			handleAdd: Y6
 		}), onFontsReady$1(() => {
-			X(), x6();
+			Z(), S6();
 		}), watchEffect(() => {
-			let { value: _ } = k;
+			let { value: _ } = P;
 			if (!_) return;
 			let { value: S } = C, T = `${S}-tabs-nav-scroll-wrapper--shadow-start`, E = `${S}-tabs-nav-scroll-wrapper--shadow-end`;
-			L.value ? _.classList.remove(T) : _.classList.add(T), R.value ? _.classList.remove(E) : _.classList.add(E);
+			R.value ? _.classList.remove(T) : _.classList.add(T), z.value ? _.classList.remove(E) : _.classList.add(E);
 		});
-		let X6 = { syncBarPosition: () => {
-			X();
-		} }, Z6 = () => {
-			L6({ transitionDisabled: !0 });
-		}, Q6 = computed(() => {
-			let { value: S } = z, { type: C } = _, T = {
+		let Q6 = { syncBarPosition: () => {
+			Z();
+		} }, $6 = () => {
+			z6({ transitionDisabled: !0 });
+		}, e8 = computed(() => {
+			let { value: S } = V, { type: C } = _, T = {
 				card: "Card",
 				bar: "Bar",
 				line: "Line",
 				segment: "Segment"
-			}[C], D = `${S}${T}`, { self: { barColor: O, closeIconColor: k, closeIconColorHover: A, closeIconColorPressed: P, tabColor: F, tabBorderColor: I, paneTextColor: L, tabFontWeight: R, tabBorderRadius: B, tabFontWeightActive: V, colorSegment: U, fontWeightStrong: W, tabColorSegment: G, closeSize: K, closeIconSize: q, closeColorHover: J, closeColorPressed: Y, closeBorderRadius: X, [createKey$2("panePadding", S)]: b6, [createKey$2("tabPadding", D)]: x6, [createKey$2("tabPaddingVertical", D)]: Z, [createKey$2("tabGap", D)]: S6, [createKey$2("tabGap", `${D}Vertical`)]: Q, [createKey$2("tabTextColor", C)]: C6, [createKey$2("tabTextColorActive", C)]: w6, [createKey$2("tabTextColorHover", C)]: T6, [createKey$2("tabTextColorDisabled", C)]: E6, [createKey$2("tabFontSize", S)]: D6 }, common: { cubicBezierEaseInOut: O6 } } = E.value;
+			}[C], E = `${S}${T}`, { self: { barColor: O, closeIconColor: k, closeIconColorHover: A, closeIconColorPressed: P, tabColor: F, tabBorderColor: I, paneTextColor: L, tabFontWeight: R, tabBorderRadius: z, tabFontWeightActive: B, colorSegment: U, fontWeightStrong: W, tabColorSegment: G, closeSize: K, closeIconSize: q, closeColorHover: J, closeColorPressed: Y, closeBorderRadius: X, [createKey$2("panePadding", S)]: b6, [createKey$2("tabPadding", E)]: x6, [createKey$2("tabPaddingVertical", E)]: Z, [createKey$2("tabGap", E)]: S6, [createKey$2("tabGap", `${E}Vertical`)]: Q, [createKey$2("tabTextColor", C)]: C6, [createKey$2("tabTextColorActive", C)]: w6, [createKey$2("tabTextColorHover", C)]: T6, [createKey$2("tabTextColorDisabled", C)]: E6, [createKey$2("tabFontSize", S)]: D6 }, common: { cubicBezierEaseInOut: O6 } } = D.value;
 			return {
 				"--n-bezier": O6,
 				"--n-color-segment": U,
@@ -11237,7 +11255,7 @@ var Tabs_default = defineComponent({
 				"--n-tab-text-color-hover": T6,
 				"--n-pane-text-color": L,
 				"--n-tab-border-color": I,
-				"--n-tab-border-radius": B,
+				"--n-tab-border-radius": z,
 				"--n-close-size": K,
 				"--n-close-icon-size": q,
 				"--n-close-color-hover": J,
@@ -11248,7 +11266,7 @@ var Tabs_default = defineComponent({
 				"--n-close-icon-color-pressed": P,
 				"--n-tab-color": F,
 				"--n-tab-font-weight": R,
-				"--n-tab-font-weight-active": V,
+				"--n-tab-font-weight-active": B,
 				"--n-tab-padding": x6,
 				"--n-tab-padding-vertical": Z,
 				"--n-tab-gap": S6,
@@ -11260,35 +11278,35 @@ var Tabs_default = defineComponent({
 				"--n-font-weight-strong": W,
 				"--n-tab-color-segment": G
 			};
-		}), $6 = T ? useThemeClass$1("tabs", computed(() => `${z.value[0]}${_.type[0]}`), Q6, _) : void 0;
+		}), t8 = T ? useThemeClass$1("tabs", computed(() => `${V.value[0]}${_.type[0]}`), e8, _) : void 0;
 		return Object.assign({
 			mergedClsPrefix: C,
-			mergedValue: U,
+			mergedValue: G,
 			renderedNames: /* @__PURE__ */ new Set(),
-			segmentCapsuleElRef: I6,
-			tabsPaneWrapperRef: Z,
-			tabsElRef: D,
-			barElRef: O,
-			addTabInstRef: P,
-			xScrollInstRef: F,
-			scrollWrapperElRef: k,
-			addTabFixed: H6,
-			tabWrapperStyle: G,
-			handleNavResize: V6,
-			mergedSize: z,
-			handleScroll: Y6,
-			handleTabsResize: W6,
-			cssVars: T ? void 0 : Q6,
-			themeClass: $6?.themeClass,
-			animationDirection: O6,
-			renderNameListRef: E6,
-			yScrollElRef: I,
-			handleSegmentResize: Z6,
-			onAnimationBeforeLeave: C6,
-			onAnimationEnter: w6,
-			onAnimationAfterEnter: T6,
-			onRender: $6?.onRender
-		}, X6);
+			segmentCapsuleElRef: R6,
+			tabsPaneWrapperRef: Q,
+			tabsElRef: O,
+			barElRef: k,
+			addTabInstRef: F,
+			xScrollInstRef: I,
+			scrollWrapperElRef: P,
+			addTabFixed: W6,
+			tabWrapperStyle: q,
+			handleNavResize: U6,
+			mergedSize: V,
+			handleScroll: Z6,
+			handleTabsResize: J6,
+			cssVars: T ? void 0 : e8,
+			themeClass: t8?.themeClass,
+			animationDirection: j6,
+			renderNameListRef: k6,
+			yScrollElRef: L,
+			handleSegmentResize: $6,
+			onAnimationBeforeLeave: T6,
+			onAnimationEnter: E6,
+			onAnimationAfterEnter: O6,
+			onRender: t8?.onRender
+		}, Q6);
 	},
 	render() {
 		let { mergedClsPrefix: _, type: S, placement: C, addTabFixed: T, addable: E, mergedSize: D, renderNameListRef: O, onRender: k, paneWrapperClass: A, paneWrapperStyle: P, $slots: { default: F, prefix: I, suffix: L } } = this;