antdv-next 0.0.111 → 1.0.0-alpha.1

package/dist/steps/index.js

@@ -0,0 +1,287 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { devUseWarning, isDev } from "../_util/warning.js";
+import "../_util/hooks/index.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import tooltip_default from "../tooltip/index.js";
+import { TARGET_CLS } from "../_util/wave/interface.js";
+import wave_default from "../_util/wave/index.js";
+import useBreakpoint_default from "../grid/hooks/useBreakpoint.js";
+import { useInternalContext } from "./context.js";
+import PanelArrow_default from "./PanelArrow.js";
+import ProgressIcon_default from "./ProgressIcon.js";
+import style_default from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { getAttrStyleAndClass } from "@v-c/util/dist/props-util";
+import { CheckOutlined } from "@antdv-next/icons";
+import VcSteps from "@v-c/steps";
+
+//#region src/steps/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const waveEffectClassNames = { itemIcon: TARGET_CLS };
+const Steps = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) => {
+	const internalContent = useInternalContext();
+	const { direction: rtlDirection, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, prefixCls } = useComponentBaseConfig("steps", props);
+	const { size, items, responsive, type, classes, styles } = toPropsRefs(props, "size", "items", "responsive", "type", "classes", "styles");
+	const components = computed(() => {
+		return {
+			root: internalContent.value?.rootComponent,
+			item: internalContent.value?.itemComponent
+		};
+	});
+	const itemIconCls = computed(() => `${prefixCls.value}-item-icon`);
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const mergedSize = useSize(size);
+	const mergedItems = computed(() => (items.value || []).filter(Boolean));
+	const breakpoint = useBreakpoint_default(responsive);
+	const xl = computed(() => breakpoint.value?.xl);
+	const mergedType = computed(() => {
+		if (type.value && type.value !== "default") return type.value;
+		if (props.progressDot) return "dot";
+		return type.value;
+	});
+	const isInline = computed(() => mergedType.value === "inline");
+	const isDot = computed(() => mergedType.value === "dot" || mergedType.value === "inline");
+	const mergedOrientation = computed(() => {
+		const nextOrientation = props.orientation || props.direction;
+		if (mergedType.value === "panel") return "horizontal";
+		return responsive.value && xl.value || nextOrientation === "vertical" ? "vertical" : "horizontal";
+	});
+	const mergedTitlePlacement = computed(() => {
+		if (isDot.value || mergedOrientation.value === "vertical") return mergedOrientation.value === "vertical" ? "horizontal" : "vertical";
+		if (type.value === "navigation") return "horizontal";
+		return props.titlePlacement || props.labelPlacement || "horizontal";
+	});
+	const mergedPercent = computed(() => isInline.value ? void 0 : props?.percent);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			size: mergedSize.value,
+			type: mergedType.value,
+			orientation: mergedOrientation.value,
+			titlePlacement: mergedTitlePlacement.value,
+			percent: mergedPercent.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(computed(() => waveEffectClassNames), contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	if (isDev) {
+		const { labelPlacement, progressDot, direction } = props;
+		const warning = devUseWarning("Steps");
+		warning.deprecated(!labelPlacement, "labelPlacement", "titlePlacement");
+		warning.deprecated(!progressDot, "progressDot", "type=\"dot\"");
+		warning.deprecated(!direction, "direction", "orientation");
+		warning.deprecated(mergedItems.value.every((item) => !item.description), "items.description", "items.content");
+	}
+	return () => {
+		const { variant, onChange, offset, ellipsis, rootClass, current,...restProps } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const iconRender = slots?.iconRender || props?.iconRender;
+		const legacyProgressDotRenderFn = () => {
+			return mergedType.value === "dot" && typeof props.progressDot === "function" ? props.progressDot : void 0;
+		};
+		const legacyProgressDotRender = legacyProgressDotRenderFn();
+		const internalIconRender = (_, info) => {
+			const { index, item, active, components: { Icon: StepIcon } } = info;
+			const { status, icon } = item;
+			let iconContent;
+			if (isDot.value || icon) iconContent = icon;
+			else switch (status) {
+				case "finish":
+					iconContent = createVNode(CheckOutlined, { "class": `${itemIconCls.value}-finish` }, null);
+					break;
+				case "error":
+					iconContent = createVNode(CheckOutlined, { "class": `${itemIconCls.value}-error` }, null);
+					break;
+				default: {
+					let numNode = createVNode("span", { "class": `${itemIconCls.value}-number` }, [info.index + 1]);
+					if (status === "process" && mergedPercent.value !== void 0) {
+						const _numNode = function() {
+							return numNode;
+						}();
+						numNode = createVNode(ProgressIcon_default, {
+							"prefixCls": prefixCls.value,
+							"percent": mergedPercent.value
+						}, _isSlot(numNode) ? numNode : { default: () => [_numNode] });
+					}
+					iconContent = numNode;
+				}
+			}
+			let iconNode = createVNode(StepIcon, null, _isSlot(iconContent) ? iconContent : { default: () => [iconContent] });
+			if (iconRender) iconNode = iconRender({
+				oriNode: iconNode,
+				info: {
+					index,
+					active,
+					item,
+					components: { Icon: StepIcon }
+				}
+			});
+			else if (typeof legacyProgressDotRender === "function") iconNode = legacyProgressDotRender({
+				iconDot: iconNode,
+				info: {
+					index,
+					...item
+				}
+			});
+			return iconNode;
+		};
+		const itemRender = (itemNode, itemInfo) => {
+			let content = itemNode;
+			const itemContent = getSlotPropsFnRun({}, itemInfo.item, "content");
+			if (isInline.value && itemContent) content = createVNode(tooltip_default, {
+				"destroyOnHidden": true,
+				"title": itemContent
+			}, _isSlot(itemNode) ? itemNode : { default: () => [itemNode] });
+			return createVNode(wave_default, {
+				"component": "Steps",
+				"disabled": itemInfo.item.disabled || !onChange,
+				"colorSource": variant === "filled" ? "color" : null
+			}, _isSlot(content) ? content : { default: () => [content] });
+		};
+		const itemWrapperRender = mergedType.value === "panel" ? (itemNode) => {
+			return createVNode(Fragment, null, [itemNode, createVNode(PanelArrow_default, { "prefixCls": prefixCls.value }, null)]);
+		} : void 0;
+		const mergedStyle = {
+			"--steps-items-offset": offset,
+			...contextStyle.value,
+			...style
+		};
+		const stepsClassName = clsx(contextClassName.value, `${prefixCls.value}-${variant}`, {
+			[`${prefixCls.value}-${mergedType.value}`]: mergedType.value !== "dot" ? mergedType.value : false,
+			[`${prefixCls.value}-rtl`]: rtlDirection.value === "rtl",
+			[`${prefixCls.value}-dot`]: isDot.value,
+			[`${prefixCls.value}-ellipsis`]: ellipsis,
+			[`${prefixCls.value}-with-progress`]: mergedPercent.value !== void 0,
+			[`${prefixCls.value}-${mergedSize.value}`]: mergedSize.value
+		}, className, rootClass, hashId.value, cssVarCls.value);
+		return createVNode(VcSteps, mergeProps(restProps, restAttrs, {
+			"prefixCls": prefixCls.value,
+			"className": stepsClassName,
+			"style": mergedStyle,
+			"classNames": mergedClassNames.value,
+			"styles": mergedStyles.value,
+			"orientation": mergedOrientation.value,
+			"titlePlacement": mergedTitlePlacement.value,
+			"components": components.value,
+			"current": current,
+			"items": mergedItems.value,
+			"onChange": (current$1) => {
+				onChange?.(current$1);
+				emit("update:current", current$1);
+			},
+			"iconRender": internalIconRender,
+			"itemRender": itemRender,
+			"itemWrapperRender": itemWrapperRender
+		}), null);
+	};
+}, {
+	emits: ["update:current"],
+	props: /* @__PURE__ */ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		orientation: {
+			type: String,
+			required: false
+		},
+		labelPlacement: {
+			type: String,
+			required: false
+		},
+		titlePlacement: {
+			type: String,
+			required: false
+		},
+		progressDot: {
+			type: [Boolean, Function],
+			required: false
+		},
+		responsive: {
+			type: Boolean,
+			required: false
+		},
+		ellipsis: {
+			type: Boolean,
+			required: false
+		},
+		offset: {
+			type: Number,
+			required: false
+		},
+		current: {
+			type: Number,
+			required: false
+		},
+		initial: {
+			type: Number,
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false
+		},
+		percent: {
+			type: Number,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		iconRender: {
+			type: Function,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		}
+	}, {
+		variant: "filled",
+		responsive: true,
+		offset: 0,
+		current: 0
+	}),
+	name: "ASteps",
+	inheritAttrs: false
+});
+Steps.install = (app) => {
+	app.component(Steps.name, Steps);
+};
+var steps_default = Steps;
+
+//#endregion
+export { steps_default as default };

package/dist/steps/style/horizontal.js

@@ -0,0 +1,24 @@
+//#region src/steps/style/horizontal.ts
+const genHorizontalStyle = (token) => {
+	const { componentCls } = token;
+	const itemCls = `${componentCls}-item`;
+	return { [`${componentCls}-horizontal`]: { [`> ${itemCls}`]: {
+		flex: "1 1 auto",
+		minWidth: token.iconSize,
+		[`${itemCls}-rail`]: {
+			"--steps-horizontal-rail-margin": "calc(var(--steps-icon-size-max) / 2 + var(--steps-item-wrapper-padding-top))",
+			"position": "static",
+			"marginTop": "var(--steps-horizontal-rail-margin)",
+			"width": "auto",
+			"borderBlockStartWidth": "var(--steps-rail-size)",
+			"flex": 1,
+			"minWidth": 0,
+			"alignSelf": "flex-start",
+			"transform": "translateY(-50%)"
+		}
+	} } };
+};
+var horizontal_default = genHorizontalStyle;
+
+//#endregion
+export { horizontal_default as default };

package/dist/steps/style/icon.js

@@ -0,0 +1,41 @@
+//#region src/steps/style/icon.ts
+const genIconStyle = (token) => {
+	const { componentCls, customIconFontSize, motionDurationSlow } = token;
+	const itemCls = `${componentCls}-item`;
+	return { [componentCls]: {
+		"--steps-icon-size": token.iconSize,
+		"--steps-icon-border-width": token.lineWidth,
+		[`${itemCls}-icon`]: {
+			width: "var(--steps-icon-size)",
+			height: "var(--steps-icon-size)",
+			margin: 0,
+			flex: "none",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			fontSize: token.iconFontSize,
+			fontFamily: token.fontFamily,
+			lineHeight: "var(--steps-icon-size)",
+			textAlign: "center",
+			borderRadius: "var(--steps-icon-size)",
+			border: `var(--steps-icon-border-width) ${token.lineType} transparent`,
+			transition: [
+				"background",
+				"border",
+				"color",
+				"inset",
+				"transform"
+			].map((key) => `${key} ${motionDurationSlow}`).join(", "),
+			zIndex: 1
+		},
+		[`${itemCls}-custom ${itemCls}-icon`]: {
+			background: "none",
+			border: 0,
+			fontSize: customIconFontSize
+		}
+	} };
+};
+var icon_default = genIconStyle;
+
+//#endregion
+export { icon_default as default };

package/dist/steps/style/index.d.ts

@@ -0,0 +1,76 @@
+import "../../theme/internal.js";
+import { CSSProperties } from "vue";
+
+//#region src/steps/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 描述区域最大宽度
+   * @descEN Max width of description area
+   * @deprecated This value has been removed by default since v6
+   */
+  descriptionMaxWidth?: number;
+  /**
+   * @desc 自定义图标容器尺寸
+   * @descEN Size of custom icon container
+   */
+  customIconSize: number;
+  /**
+   * @desc 自定义图标 top
+   * @descEN Top of custom icon
+   */
+  customIconTop: number;
+  /**
+   * @desc 自定义图标大小
+   * @descEN Font size of custom icon
+   */
+  customIconFontSize: number;
+  /**
+   * @desc 图标容器尺寸
+   * @descEN Size of icon container
+   */
+  iconSize: number;
+  /**
+   * @desc 图标 top
+   * @descEN Top of icon
+   */
+  iconTop: number;
+  /**
+   * @desc 图标大小
+   * @descEN Size of icon
+   */
+  iconFontSize: number;
+  /**
+   * @desc 点状步骤点大小
+   * @descEN Size of dot
+   */
+  dotSize: number;
+  /**
+   * @desc 点状步骤点当前大小
+   * @descEN Current size of dot
+   */
+  dotCurrentSize: number;
+  /**
+   * @desc 可跳转步骤条箭头颜色
+   * @descEN Color of arrow in nav
+   */
+  navArrowColor: string;
+  /**
+   * @desc 可跳转步骤条内容最大宽度
+   * @descEN Max width of nav content
+   */
+  navContentMaxWidth: CSSProperties['maxWidth'];
+  /**
+   * @desc 小号步骤条图标大小
+   * @descEN Size of small steps icon
+   */
+  iconSizeSM: number;
+  /**
+   * TODO: deprecated warning since not used anymore
+   * @desc 标题行高
+   * @descEN Line height of title
+   * @deprecated Not used anymore
+   */
+  titleLineHeight: number | string;
+}
+//#endregion
+export { ComponentToken };

package/dist/steps/style/index.js

@@ -0,0 +1,116 @@
+import { resetComponent, textEllipsis } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import horizontal_default from "./horizontal.js";
+import icon_default from "./icon.js";
+import inline_default from "./inline.js";
+import label_placement_default from "./label-placement.js";
+import nav_default from "./nav.js";
+import panel_default from "./panel.js";
+import progress_default from "./progress.js";
+import progress_dot_default from "./progress-dot.js";
+import rtl_default from "./rtl.js";
+import small_default from "./small.js";
+import status_default from "./status.js";
+import vertical_default from "./vertical.js";
+
+//#region src/steps/style/index.ts
+const genBasicStyle = (token) => {
+	const { componentCls } = token;
+	const itemCls = `${componentCls}-item`;
+	return { [componentCls]: {
+		"--steps-title-font-size": token.fontSizeLG,
+		"--steps-title-line-height": token.lineHeightLG,
+		"--steps-subtitle-font-size": token.fontSize,
+		"--steps-subtitle-line-height": token.lineHeight,
+		"--steps-item-wrapper-padding-top": "0px",
+		"--steps-rail-size": token.lineWidth,
+		"--steps-rail-line-style": token.lineType,
+		...resetComponent(token),
+		"display": "flex",
+		"flexWrap": "nowrap",
+		"alignItems": "flex-start",
+		[itemCls]: {
+			flex: "none",
+			position: "relative"
+		},
+		[`${itemCls}-wrapper`]: {
+			display: "flex",
+			flexWrap: "nowrap",
+			paddingTop: `var(--steps-item-wrapper-padding-top)`
+		},
+		[`${itemCls}-header`]: {
+			display: "flex",
+			flexWrap: "nowrap",
+			alignItems: "center"
+		},
+		[`${itemCls}-title`]: {
+			color: token.colorText,
+			fontSize: `var(--steps-title-font-size)`,
+			lineHeight: `var(--steps-title-line-height)`,
+			wordBreak: "break-word"
+		},
+		[`${itemCls}-subtitle`]: {
+			color: token.colorTextDescription,
+			fontWeight: "normal",
+			fontSize: `var(--steps-subtitle-font-size)`,
+			lineHeight: `var(--steps-subtitle-line-height)`,
+			marginInlineStart: token.marginXS,
+			wordBreak: "break-word"
+		},
+		[`${itemCls}-content`]: {
+			color: token.colorTextDescription,
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			wordBreak: "break-word"
+		},
+		[`${itemCls}-rail`]: {
+			borderStyle: "var(--steps-rail-line-style)",
+			borderWidth: 0
+		},
+		[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content, ${itemCls}-rail`]: { transition: `all ${token.motionDurationSlow}` },
+		[`&${componentCls}-ellipsis`]: { [`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: textEllipsis },
+		[`${itemCls}[role='button']:not(${itemCls}-active):hover`]: { cursor: "pointer" }
+	} };
+};
+const prepareComponentToken = (token) => ({
+	titleLineHeight: token.controlHeight,
+	customIconSize: token.controlHeight,
+	customIconTop: 0,
+	customIconFontSize: token.controlHeightSM,
+	iconSize: token.controlHeight,
+	iconTop: -.5,
+	iconFontSize: token.fontSize,
+	iconSizeSM: token.fontSizeHeading3,
+	dotSize: token.controlHeight / 4,
+	dotCurrentSize: token.controlHeightLG / 4,
+	navArrowColor: token.colorTextDisabled,
+	navContentMaxWidth: "unset",
+	descriptionMaxWidth: void 0,
+	waitIconColor: token.wireframe ? token.colorTextDisabled : token.colorTextLabel,
+	waitIconBgColor: token.wireframe ? token.colorBgContainer : token.colorFillContent,
+	waitIconBorderColor: token.wireframe ? token.colorTextDisabled : "transparent",
+	finishIconBgColor: token.wireframe ? token.colorBgContainer : token.controlItemBgActive,
+	finishIconBorderColor: token.wireframe ? token.colorPrimary : token.controlItemBgActive
+});
+var style_default = genStyleHooks("Steps", (token) => {
+	const stepsToken = mergeToken(token, { inlineDotSize: 6 });
+	return [
+		genBasicStyle(stepsToken),
+		icon_default(stepsToken),
+		vertical_default(stepsToken),
+		horizontal_default(stepsToken),
+		label_placement_default(stepsToken),
+		small_default(stepsToken),
+		progress_dot_default(stepsToken),
+		status_default(stepsToken),
+		nav_default(stepsToken),
+		panel_default(stepsToken),
+		inline_default(stepsToken),
+		progress_default(stepsToken),
+		rtl_default(stepsToken)
+	];
+}, prepareComponentToken);
+
+//#endregion
+export { style_default as default };

package/dist/steps/style/inline.js

@@ -0,0 +1,47 @@
+//#region src/steps/style/inline.ts
+const genInlineStyle = (token) => {
+	const { componentCls, inlineDotSize } = token;
+	const containerPaddingTop = token.calc(token.paddingXS).add(token.lineWidth).equal();
+	const itemCls = `${componentCls}-item`;
+	return { [`${componentCls}-inline`]: {
+		"--steps-items-offset": "0",
+		"--steps-item-wrapper-padding-top": containerPaddingTop,
+		"display": "inline-flex",
+		"&:before": {
+			content: "\"\"",
+			flex: "var(--steps-items-offset)"
+		},
+		[itemCls]: {
+			"--steps-title-vertical-row-gap": token.paddingXS,
+			"--steps-icon-size": inlineDotSize,
+			"--steps-icon-size-active": inlineDotSize,
+			"--steps-title-font-size": token.fontSizeSM,
+			"--steps-title-line-height": token.lineHeightSM,
+			"--steps-item-title-color": token.colorTextSecondary,
+			"--steps-subtitle-font-size": token.fontSizeSM,
+			"--steps-subtitle-line-height": token.lineHeightSM,
+			"--steps-item-subtitle-color": token.colorTextQuaternary,
+			"--steps-rail-size": token.lineWidth,
+			"--steps-title-horizontal-rail-gap": "0px",
+			"flex": 1,
+			"&-wrapper": {
+				"paddingInline": token.paddingXXS,
+				"marginInline": token.calc(token.marginXXS).div(2).equal(),
+				"borderRadius": token.borderRadiusSM,
+				"cursor": "pointer",
+				"transition": `background ${token.motionDurationMid}`,
+				"&:hover": { background: token.controlItemBgHover }
+			},
+			"&-icon": { [`${itemCls}-icon-dot`]: { "&:after": { display: "none" } } },
+			"&-title": {
+				fontWeight: "normal",
+				whiteSpace: "nowrap"
+			},
+			"&-content": { display: "none" }
+		}
+	} };
+};
+var inline_default = genInlineStyle;
+
+//#endregion
+export { inline_default as default };

package/dist/steps/style/label-placement.js

@@ -0,0 +1,82 @@
+import { getItemWithWidthStyle } from "./util.js";
+
+//#region src/steps/style/label-placement.ts
+const genLabelPlacementStyle = (token) => {
+	const { componentCls, descriptionMaxWidth, marginXS, fontHeightLG, calc } = token;
+	const itemCls = `${componentCls}-item`;
+	return {
+		[componentCls]: {
+			"--steps-icon-size-max": "max(var(--steps-icon-size), var(--steps-icon-size-active, var(--steps-icon-size)))",
+			[`${itemCls}-icon`]: { marginBlockStart: `calc((var(--steps-heading-height) - var(--steps-icon-size)) / 2)` }
+		},
+		[`${componentCls}-title-horizontal`]: {
+			"--steps-title-horizontal-item-margin": token.margin,
+			"--steps-title-horizontal-rail-margin": token.margin,
+			"--steps-title-horizontal-title-height": fontHeightLG,
+			"--steps-heading-height": `max(var(--steps-icon-size), var(--steps-title-horizontal-title-height))`,
+			[`&${componentCls}-horizontal, &${componentCls}-horizontal-alternate`]: {
+				[`${itemCls}:not(:first-child)`]: { marginInlineStart: `var(--steps-title-horizontal-item-margin)` },
+				[`${itemCls}:last-child`]: { flex: "0 1 auto" },
+				[`${itemCls}-wrapper`]: { columnGap: token.marginXS }
+			},
+			[`&${componentCls}-vertical`]: {
+				[`${itemCls}-wrapper`]: { columnGap: token.margin },
+				[`${itemCls}-empty-header`]: {
+					[`${itemCls}-header`]: { minHeight: "auto" },
+					[`${itemCls}-content`]: { marginTop: calc("var(--steps-heading-height)").sub(token.fontHeight).div(2).equal() }
+				}
+			},
+			[`${itemCls}-section`]: {
+				flex: 1,
+				minWidth: 0
+			},
+			[`${itemCls}-header`]: { minHeight: "var(--steps-heading-height)" },
+			[`${itemCls}-title`]: { flex: "0 1 auto" },
+			[`${itemCls}-content`]: { maxWidth: descriptionMaxWidth },
+			[`${itemCls}-subtitle`]: { flex: "0 9999 auto" },
+			[`&${componentCls}-horizontal ${itemCls}-rail`]: {
+				"--steps-item-wrapper-padding-top": "0px",
+				"flex": 1,
+				"marginInlineStart": `var(--steps-title-horizontal-rail-margin)`
+			}
+		},
+		[`${componentCls}-title-vertical`]: {
+			"--steps-title-vertical-row-gap": token.paddingSM,
+			"--steps-title-horizontal-rail-gap": token.marginXXS,
+			"--steps-heading-height": "var(--steps-icon-size-max)",
+			[`> ${itemCls}`]: {
+				flex: 1,
+				[`${itemCls}-wrapper`]: {
+					flexDirection: "column",
+					rowGap: `var(--steps-title-vertical-row-gap)`,
+					alignItems: "center"
+				},
+				[`${itemCls}-section`]: { alignSelf: "stretch" },
+				[`${itemCls}-header`]: {
+					flexDirection: "column",
+					alignItems: "center"
+				},
+				[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: {
+					textAlign: "center",
+					maxWidth: "100%"
+				},
+				[`${itemCls}-subtitle`]: { margin: 0 },
+				[`${itemCls}-rail`]: {
+					position: "absolute",
+					top: 0,
+					width: `calc(100% - var(--steps-icon-size) - var(--steps-title-horizontal-rail-gap) * 2)`,
+					insetInlineStart: `calc(50% + var(--steps-icon-size) / 2 + var(--steps-title-horizontal-rail-gap))`
+				}
+			},
+			...getItemWithWidthStyle(token, marginXS, {
+				[`${itemCls}:last-child`]: { flex: "none" },
+				[`${itemCls}-icon`]: { alignSelf: "flex-start" },
+				[`${itemCls}-section`]: { width: descriptionMaxWidth }
+			})
+		}
+	};
+};
+var label_placement_default = genLabelPlacementStyle;
+
+//#endregion
+export { label_placement_default as default };