antdv-next 1.0.0-alpha.3 → 1.0.0-alpha.5

package/dist/steps/style/status.js

@@ -1,64 +1,67 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+
 //#region src/steps/style/status.ts
 const STATUS_WAIT = "wait";
 const STATUS_PROCESS = "process";
 const STATUS_FINISH = "finish";
 const STATUS_ERROR = "error";
 const genStatusStyle = (token) => {
-	const { componentCls, colorTextDisabled, colorTextLightSolid, colorPrimary, colorTextLabel, colorError, colorText, colorTextDescription, colorBgContainer, colorPrimaryHover } = token;
+	const { componentCls, colorTextDisabled, colorTextLightSolid, colorPrimary, colorTextLabel, colorError, colorErrorHover, colorErrorBgFilledHover, colorFillTertiary, colorErrorBg, colorPrimaryBgHover, colorPrimaryBg, colorText, colorTextDescription, colorBgContainer, colorPrimaryHover, lineType, antCls } = token;
 	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [componentCls]: [
 		{
 			[itemCls]: {
-				"--steps-item-solid-line-color": "#000",
-				"--steps-item-title-color": "#000",
-				"--steps-item-content-color": "#000",
-				"--steps-item-subtitle-color": "var(--steps-item-content-color)",
-				"--steps-item-icon-custom-color": "#000",
-				"--steps-item-icon-bg-color": "#000",
-				"--steps-item-icon-border-color": "#000",
-				"--steps-item-icon-text-color": "#fff",
-				"--steps-item-icon-dot-color": "#000",
-				"--steps-item-icon-dot-bg-color": "var(--steps-item-icon-dot-color)",
-				"--steps-item-icon-dot-border-color": "var(--steps-item-icon-dot-color)",
-				"--steps-item-text-hover-color": "#000",
-				"--steps-item-icon-bg-hover-color": `var(--steps-item-icon-bg-color)`,
-				"--steps-item-icon-border-hover-color": `var(--steps-item-icon-border-color)`,
-				"--steps-item-icon-text-hover-color": `var(--steps-item-icon-text-color)`,
-				"--steps-item-content-active-color": `var(--steps-item-content-color)`,
-				"--steps-item-icon-active-bg-color": "var(--steps-item-icon-bg-color)",
-				"--steps-item-icon-active-border-color": "var(--steps-item-icon-border-color)",
-				"--steps-item-icon-active-text-color": "var(--steps-item-icon-text-color)",
-				"--steps-item-process-rail-line-style": token.lineType
+				[varName("item-solid-line-color")]: "#000",
+				[varName("item-title-color")]: "#000",
+				[varName("item-content-color")]: "#000",
+				[varName("item-subtitle-color")]: varRef("item-content-color"),
+				[varName("item-icon-custom-color")]: "#000",
+				[varName("item-icon-bg-color")]: "#000",
+				[varName("item-icon-border-color")]: "#000",
+				[varName("item-icon-text-color")]: "#fff",
+				[varName("item-icon-dot-color")]: "#000",
+				[varName("item-icon-dot-bg-color")]: varRef("item-icon-dot-color"),
+				[varName("item-icon-dot-border-color")]: varRef("item-icon-dot-color"),
+				[varName("item-text-hover-color")]: "#000",
+				[varName("item-icon-bg-hover-color")]: varRef("item-icon-bg-color"),
+				[varName("item-icon-border-hover-color")]: varRef("item-icon-border-color"),
+				[varName("item-icon-text-hover-color")]: varRef("item-icon-text-color"),
+				[varName("item-content-active-color")]: varRef("item-content-color"),
+				[varName("item-icon-active-bg-color")]: varRef("item-icon-bg-color"),
+				[varName("item-icon-active-border-color")]: varRef("item-icon-border-color"),
+				[varName("item-icon-active-text-color")]: varRef("item-icon-text-color"),
+				[varName("item-process-rail-line-style")]: lineType
 			},
-			[`${itemCls}-rail`]: { borderColor: `var(--steps-item-solid-line-color)` },
-			[`${itemCls}-custom ${itemCls}-icon`]: { color: `var(--steps-item-icon-custom-color)` },
-			[`${itemCls}-title`]: { color: `var(--steps-item-title-color)` },
-			[`${itemCls}-subtitle`]: { color: `var(--steps-item-subtitle-color)` },
-			[`${itemCls}-content`]: { color: `var(--steps-item-content-color)` },
+			[`${itemCls}-rail`]: { borderColor: varRef("item-solid-line-color") },
+			[`${itemCls}-custom ${itemCls}-icon`]: { color: varRef("item-icon-custom-color") },
+			[`${itemCls}-title`]: { color: varRef("item-title-color") },
+			[`${itemCls}-subtitle`]: { color: varRef("item-subtitle-color") },
+			[`${itemCls}-content`]: { color: varRef("item-content-color") },
 			[`${itemCls}-active ${itemCls}-icon`]: {},
-			[`${itemCls}-active ${itemCls}-content`]: { color: `var(--steps-item-content-active-color)` },
-			[`${itemCls}[role='button']:not(${itemCls}-active):hover`]: { [`${itemCls}-title, ${itemCls}-content`]: { color: `var(--steps-item-text-hover-color)` } },
+			[`${itemCls}-active ${itemCls}-content`]: { color: varRef("item-content-active-color") },
+			[`${itemCls}[role='button']:not(${itemCls}-active):hover`]: { [`${itemCls}-title, ${itemCls}-content`]: { color: varRef("item-text-hover-color") } },
 			[`&:not(${componentCls}-dot)`]: { [`${itemCls}:not(${itemCls}-custom)`]: {
 				[`${itemCls}-icon`]: {
-					background: `var(--steps-item-icon-bg-color)`,
-					borderColor: `var(--steps-item-icon-border-color)`,
-					color: `var(--steps-item-icon-text-color)`
+					background: varRef("item-icon-bg-color"),
+					borderColor: varRef("item-icon-border-color"),
+					color: varRef("item-icon-text-color")
 				},
 				[`&[role='button']:not(${itemCls}-active):hover`]: { [`${itemCls}-icon`]: {
-					background: `var(--steps-item-icon-bg-hover-color)`,
-					borderColor: `var(--steps-item-icon-border-hover-color)`,
-					color: `var(--steps-item-icon-text-hover-color)`
+					background: varRef("item-icon-bg-hover-color"),
+					borderColor: varRef("item-icon-border-hover-color"),
+					color: varRef("item-icon-text-hover-color")
 				} },
 				[`&${itemCls}-active`]: { [`${itemCls}-icon`]: {
-					background: `var(--steps-item-icon-active-bg-color)`,
-					borderColor: `var(--steps-item-icon-active-border-color)`,
-					color: `var(--steps-item-icon-active-text-color)`
+					background: varRef("item-icon-active-bg-color"),
+					borderColor: varRef("item-icon-active-border-color"),
+					color: varRef("item-icon-active-text-color")
 				} }
 			} },
 			[`&${componentCls}-dot`]: { [`${itemCls}-icon`]: {
-				background: `var(--steps-item-icon-dot-bg-color)`,
-				borderColor: `var(--steps-item-icon-dot-border-color)`,
-				color: `var(--steps-item-icon-dot-color)`,
+				background: varRef("item-icon-dot-bg-color"),
+				borderColor: varRef("item-icon-dot-border-color"),
+				color: varRef("item-icon-dot-color"),
 				[`&${itemCls}-icon-dot-custom`]: {
 					background: "transparent",
 					border: "none"
@@ -67,111 +70,111 @@ const genStatusStyle = (token) => {
 		},
 		{
 			[`${itemCls}-${STATUS_WAIT}`]: {
-				"--steps-item-icon-custom-color": colorTextDisabled,
-				"--steps-item-title-color": colorTextDescription,
-				"--steps-item-content-color": colorTextDescription,
-				"--steps-item-content-active-color": colorText,
-				"--steps-item-text-hover-color": colorPrimaryHover
+				[varName("item-icon-custom-color")]: colorTextDisabled,
+				[varName("item-title-color")]: colorTextDescription,
+				[varName("item-content-color")]: colorTextDescription,
+				[varName("item-content-active-color")]: colorText,
+				[varName("item-text-hover-color")]: colorPrimaryHover
 			},
-			[`${itemCls}-rail-${STATUS_WAIT}`]: { "--steps-item-solid-line-color": colorTextDisabled },
+			[`${itemCls}-rail-${STATUS_WAIT}`]: { [varName("item-solid-line-color")]: colorTextDisabled },
 			[`${itemCls}-${STATUS_PROCESS}`]: {
-				"--steps-item-icon-custom-color": colorPrimary,
-				"--steps-item-title-color": colorText,
-				"--steps-item-content-color": colorTextDescription,
-				"--steps-item-content-active-color": colorText,
-				"--steps-item-text-hover-color": colorPrimaryHover
+				[varName("item-icon-custom-color")]: colorPrimary,
+				[varName("item-title-color")]: colorText,
+				[varName("item-content-color")]: colorTextDescription,
+				[varName("item-content-active-color")]: colorText,
+				[varName("item-text-hover-color")]: colorPrimaryHover
 			},
 			[`${itemCls}-rail-${STATUS_PROCESS}`]: {
-				"--steps-item-solid-line-color": colorPrimary,
-				"--steps-rail-line-style": "var(--steps-item-process-rail-line-style)"
+				[varName("item-solid-line-color")]: colorPrimary,
+				[varName("rail-line-style")]: varRef("item-process-rail-line-style")
 			},
 			[`${itemCls}-${STATUS_FINISH}`]: {
-				"--steps-item-icon-custom-color": colorPrimary,
-				"--steps-item-title-color": colorText,
-				"--steps-item-content-color": colorTextDescription,
-				"--steps-item-content-active-color": colorText,
-				"--steps-item-text-hover-color": colorPrimaryHover
+				[varName("item-icon-custom-color")]: colorPrimary,
+				[varName("item-title-color")]: colorText,
+				[varName("item-content-color")]: colorTextDescription,
+				[varName("item-content-active-color")]: colorText,
+				[varName("item-text-hover-color")]: colorPrimaryHover
 			},
-			[`${itemCls}-rail-${STATUS_FINISH}`]: { "--steps-item-solid-line-color": colorPrimary },
+			[`${itemCls}-rail-${STATUS_FINISH}`]: { [varName("item-solid-line-color")]: colorPrimary },
 			[`${itemCls}-${STATUS_ERROR}`]: {
-				"--steps-item-icon-custom-color": colorError,
-				"--steps-item-title-color": colorError,
-				"--steps-item-content-color": colorError,
-				"--steps-item-content-active-color": colorError,
-				"--steps-item-text-hover-color": token.colorErrorHover
+				[varName("item-icon-custom-color")]: colorError,
+				[varName("item-title-color")]: colorError,
+				[varName("item-content-color")]: colorError,
+				[varName("item-content-active-color")]: colorError,
+				[varName("item-text-hover-color")]: colorErrorHover
 			},
-			[`${itemCls}-rail-${STATUS_ERROR}`]: { "--steps-item-solid-line-color": colorError }
+			[`${itemCls}-rail-${STATUS_ERROR}`]: { [varName("item-solid-line-color")]: colorError }
 		},
 		{ [`&${componentCls}-filled`]: {
-			[itemCls]: { "--steps-item-icon-dot-border-color": "transparent" },
+			[itemCls]: { [varName("item-icon-dot-border-color")]: "transparent" },
 			[`${itemCls}-${STATUS_WAIT}`]: {
-				"--steps-item-icon-bg-color": token.colorFillTertiary,
-				"--steps-item-icon-border-color": "transparent",
-				"--steps-item-icon-text-color": colorTextLabel,
-				"--steps-item-icon-dot-bg-color": colorTextDisabled,
-				"--steps-item-icon-bg-hover-color": token.colorPrimaryBgHover,
-				"--steps-item-icon-border-hover-color": "transparent",
-				"--steps-item-icon-text-hover-color": colorPrimary,
-				"--steps-item-icon-active-bg-color": colorPrimary,
-				"--steps-item-icon-active-border-color": "transparent",
-				"--steps-item-icon-active-text-color": colorTextLightSolid
+				[varName("item-icon-bg-color")]: colorFillTertiary,
+				[varName("item-icon-border-color")]: "transparent",
+				[varName("item-icon-text-color")]: colorTextLabel,
+				[varName("item-icon-dot-bg-color")]: colorTextDisabled,
+				[varName("item-icon-bg-hover-color")]: colorPrimaryBgHover,
+				[varName("item-icon-border-hover-color")]: "transparent",
+				[varName("item-icon-text-hover-color")]: colorPrimary,
+				[varName("item-icon-active-bg-color")]: colorPrimary,
+				[varName("item-icon-active-border-color")]: "transparent",
+				[varName("item-icon-active-text-color")]: colorTextLightSolid
 			},
 			[`${itemCls}-${STATUS_PROCESS}, ${itemCls}-${STATUS_FINISH}`]: {
-				"--steps-item-icon-bg-color": token.colorPrimaryBg,
-				"--steps-item-icon-border-color": "transparent",
-				"--steps-item-icon-text-color": colorPrimary,
-				"--steps-item-icon-dot-bg-color": colorPrimary,
-				"--steps-item-icon-bg-hover-color": token.colorPrimaryBgHover,
-				"--steps-item-icon-border-hover-color": "transparent",
-				"--steps-item-icon-text-hover-color": colorPrimary,
-				"--steps-item-icon-active-bg-color": colorPrimary,
-				"--steps-item-icon-active-border-color": "transparent",
-				"--steps-item-icon-active-text-color": colorTextLightSolid
+				[varName("item-icon-bg-color")]: colorPrimaryBg,
+				[varName("item-icon-border-color")]: "transparent",
+				[varName("item-icon-text-color")]: colorPrimary,
+				[varName("item-icon-dot-bg-color")]: colorPrimary,
+				[varName("item-icon-bg-hover-color")]: colorPrimaryBgHover,
+				[varName("item-icon-border-hover-color")]: "transparent",
+				[varName("item-icon-text-hover-color")]: colorPrimary,
+				[varName("item-icon-active-bg-color")]: colorPrimary,
+				[varName("item-icon-active-border-color")]: "transparent",
+				[varName("item-icon-active-text-color")]: colorTextLightSolid
 			},
 			[`${itemCls}-${STATUS_ERROR}`]: {
-				"--steps-item-icon-bg-color": token.colorErrorBg,
-				"--steps-item-icon-border-color": "transparent",
-				"--steps-item-icon-text-color": colorError,
-				"--steps-item-icon-dot-bg-color": colorError,
-				"--steps-item-icon-bg-hover-color": token.colorErrorBgFilledHover,
-				"--steps-item-icon-border-hover-color": "transparent",
-				"--steps-item-icon-text-hover-color": colorError,
-				"--steps-item-icon-active-bg-color": colorError,
-				"--steps-item-icon-active-border-color": "transparent",
-				"--steps-item-icon-active-text-color": colorTextLightSolid
+				[varName("item-icon-bg-color")]: colorErrorBg,
+				[varName("item-icon-border-color")]: "transparent",
+				[varName("item-icon-text-color")]: colorError,
+				[varName("item-icon-dot-bg-color")]: colorError,
+				[varName("item-icon-bg-hover-color")]: colorErrorBgFilledHover,
+				[varName("item-icon-border-hover-color")]: "transparent",
+				[varName("item-icon-text-hover-color")]: colorError,
+				[varName("item-icon-active-bg-color")]: colorError,
+				[varName("item-icon-active-border-color")]: "transparent",
+				[varName("item-icon-active-text-color")]: colorTextLightSolid
 			}
 		} },
 		{ [`&${componentCls}-outlined`]: {
-			[itemCls]: { "--steps-item-icon-dot-bg-color": "transparent" },
+			[itemCls]: { [varName("item-icon-dot-bg-color")]: "transparent" },
 			[`${itemCls}-${STATUS_WAIT}`]: {
-				"--steps-item-icon-bg-color": colorBgContainer,
-				"--steps-item-icon-border-color": colorTextDisabled,
-				"--steps-item-icon-text-color": colorTextDisabled,
-				"--steps-item-icon-dot-color": colorTextDisabled,
-				"--steps-item-icon-bg-hover-color": "transparent",
-				"--steps-item-icon-border-hover-color": colorPrimaryHover,
-				"--steps-item-icon-text-hover-color": colorPrimaryHover,
-				"--steps-item-icon-active-bg-color": token.colorFillTertiary
+				[varName("item-icon-bg-color")]: colorBgContainer,
+				[varName("item-icon-border-color")]: colorTextDisabled,
+				[varName("item-icon-text-color")]: colorTextDisabled,
+				[varName("item-icon-dot-color")]: colorTextDisabled,
+				[varName("item-icon-bg-hover-color")]: "transparent",
+				[varName("item-icon-border-hover-color")]: colorPrimaryHover,
+				[varName("item-icon-text-hover-color")]: colorPrimaryHover,
+				[varName("item-icon-active-bg-color")]: colorFillTertiary
 			},
 			[`${itemCls}-${STATUS_PROCESS}, ${itemCls}-${STATUS_FINISH}`]: {
-				"--steps-item-icon-bg-color": colorBgContainer,
-				"--steps-item-icon-border-color": colorPrimary,
-				"--steps-item-icon-text-color": colorPrimary,
-				"--steps-item-icon-dot-color": colorPrimary,
-				"--steps-item-icon-bg-hover-color": "transparent",
-				"--steps-item-icon-border-hover-color": token.colorPrimaryHover,
-				"--steps-item-icon-text-hover-color": token.colorPrimaryHover,
-				"--steps-item-icon-active-bg-color": token.colorPrimaryBg
+				[varName("item-icon-bg-color")]: colorBgContainer,
+				[varName("item-icon-border-color")]: colorPrimary,
+				[varName("item-icon-text-color")]: colorPrimary,
+				[varName("item-icon-dot-color")]: colorPrimary,
+				[varName("item-icon-bg-hover-color")]: "transparent",
+				[varName("item-icon-border-hover-color")]: colorPrimaryHover,
+				[varName("item-icon-text-hover-color")]: colorPrimaryHover,
+				[varName("item-icon-active-bg-color")]: colorPrimaryBg
 			},
 			[`${itemCls}-${STATUS_ERROR}`]: {
-				"--steps-item-icon-bg-color": colorBgContainer,
-				"--steps-item-icon-border-color": colorError,
-				"--steps-item-icon-text-color": colorError,
-				"--steps-item-icon-dot-color": colorError,
-				"--steps-item-icon-bg-hover-color": "transparent",
-				"--steps-item-icon-border-hover-color": token.colorErrorHover,
-				"--steps-item-icon-text-hover-color": token.colorErrorHover,
-				"--steps-item-icon-active-bg-color": token.colorErrorBg
+				[varName("item-icon-bg-color")]: colorBgContainer,
+				[varName("item-icon-border-color")]: colorError,
+				[varName("item-icon-text-color")]: colorError,
+				[varName("item-icon-dot-color")]: colorError,
+				[varName("item-icon-bg-hover-color")]: "transparent",
+				[varName("item-icon-border-hover-color")]: colorErrorHover,
+				[varName("item-icon-text-hover-color")]: colorErrorHover,
+				[varName("item-icon-active-bg-color")]: colorErrorBg
 			}
 		} }
 	] };

package/dist/steps/style/util.js

@@ -1,3 +1,5 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+
 //#region src/steps/style/util.ts
 function withoutVar(cssVar) {
 	return (cssVar || "--ant-not-exist").replace(/var\((.*)\)/, "$1");
@@ -7,14 +9,15 @@ function withoutVar(cssVar) {
 * This should be multiple since will conflict with other `rail` styles.
 */
 function getItemWithWidthStyle(token, marginSize, optionalStyle) {
-	const { calc, componentCls, descriptionMaxWidth } = token;
+	const { calc, componentCls, descriptionMaxWidth, antCls } = token;
 	const itemCls = `${componentCls}-item`;
+	const [, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [`@container style(${withoutVar(descriptionMaxWidth)})`]: [{
-		[`${itemCls}-icon`]: { marginInlineStart: calc(descriptionMaxWidth).sub(`var(--steps-icon-size)`).div(2).equal() },
+		[`${itemCls}-icon`]: { marginInlineStart: calc(descriptionMaxWidth).sub(varRef("icon-size")).div(2).equal() },
 		[`${itemCls}-rail`]: {
 			width: "auto",
-			insetInlineStart: calc(descriptionMaxWidth).add(`var(--steps-icon-size)`).div(2).add(marginSize).equal(),
-			insetInlineEnd: calc(descriptionMaxWidth).sub(`var(--steps-icon-size)`).div(2).sub(marginSize).mul(-1).equal()
+			insetInlineStart: calc(descriptionMaxWidth).add(varRef("icon-size")).div(2).add(marginSize).equal(),
+			insetInlineEnd: calc(descriptionMaxWidth).sub(varRef("icon-size")).div(2).sub(marginSize).mul(-1).equal()
 		}
 	}, optionalStyle] };
 }

package/dist/steps/style/vertical.js

@@ -1,24 +1,27 @@
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+
 //#region src/steps/style/vertical.ts
 const genVerticalStyle = (token) => {
-	const { componentCls, calc } = token;
+	const { componentCls, marginXXS, paddingSM, controlHeight, antCls, calc } = token;
 	const itemCls = `${componentCls}-item`;
+	const [varName, varRef] = genCssVar(antCls, "cmp-steps");
 	return { [`${componentCls}-vertical`]: {
-		"--steps-vertical-rail-margin": calc(token.marginXXS).mul(1.5).equal(),
-		"flexDirection": "column",
-		"alignItems": "stretch",
+		[varName("vertical-rail-margin")]: calc(marginXXS).mul(1.5).equal(),
+		flexDirection: "column",
+		alignItems: "stretch",
 		[`> ${itemCls}`]: {
-			"minHeight": calc(token.controlHeight).mul(1.5).equal(),
-			"paddingBottom": token.paddingSM,
+			"minHeight": calc(controlHeight).mul(1.5).equal(),
+			"paddingBottom": paddingSM,
 			"&:last-child": { paddingBottom: 0 },
-			[`${itemCls}-icon`]: { marginInlineStart: "calc((var(--steps-icon-size-max) - var(--steps-icon-size)) / 2)" },
+			[`${itemCls}-icon`]: { marginInlineStart: `calc((${varRef("icon-size-max")} - ${varRef("icon-size")}) / 2)` },
 			[`${itemCls}-rail`]: {
-				"--steps-rail-offset": calc("var(--steps-heading-height)").sub("var(--steps-icon-size)").div(2).equal(),
-				"borderInlineStartWidth": "var(--steps-rail-size)",
-				"position": "absolute",
-				"top": calc(`var(--steps-icon-size)`).add("var(--steps-item-wrapper-padding-top)").add("var(--steps-rail-offset)").add("var(--steps-vertical-rail-margin)").equal(),
-				"insetInlineStart": calc(`var(--steps-icon-size-max)`).div(2).equal(),
-				"bottom": calc("var(--steps-vertical-rail-margin)").sub("var(--steps-rail-offset)").equal(),
-				"marginInlineStart": `calc(var(--steps-rail-size) / -2)`
+				[varName("rail-offset")]: calc(varRef("heading-height")).sub(varRef("icon-size")).div(2).equal(),
+				borderInlineStartWidth: varRef("rail-size"),
+				position: "absolute",
+				top: calc(varRef("icon-size")).add(varRef("item-wrapper-padding-top")).add(varRef("rail-offset")).add(varRef("vertical-rail-margin")).equal(),
+				insetInlineStart: calc(varRef("icon-size-max")).div(2).equal(),
+				bottom: calc(varRef("vertical-rail-margin")).sub(varRef("rail-offset")).equal(),
+				marginInlineStart: `calc(${varRef("rail-size")} / -2)`
 			}
 		}
 	} };

package/dist/style/placementArrow.js

@@ -1,3 +1,4 @@
+import { genCssVar } from "../theme/util/genStyleUtils.js";
 import { genRoundedArrow } from "./roundedArrow.js";
 import { unit } from "@antdv-next/cssinjs";
 
@@ -16,7 +17,8 @@ function isInject(valid, code) {
 	return code;
 }
 function getArrowStyle(token, colorBg, options) {
-	const { componentCls, boxShadowPopoverArrow, arrowOffsetVertical, arrowOffsetHorizontal } = token;
+	const { componentCls, boxShadowPopoverArrow, arrowOffsetVertical, arrowOffsetHorizontal, antCls } = token;
+	const [varName] = genCssVar(antCls, "tooltip");
 	const { arrowDistance = 0, arrowPlacement = {
 		left: true,
 		right: true,
@@ -48,14 +50,14 @@ function getArrowStyle(token, colorBg, options) {
 				transform: "translateX(-50%) translateY(100%) rotate(180deg)"
 			},
 			"&-placement-topLeft": {
-				"--arrow-offset-horizontal": arrowOffsetHorizontal,
+				[varName("arrow-offset-horizontal")]: arrowOffsetHorizontal,
 				[`> ${componentCls}-arrow`]: { left: {
 					_skip_check_: true,
 					value: arrowOffsetHorizontal
 				} }
 			},
 			"&-placement-topRight": {
-				"--arrow-offset-horizontal": `calc(100% - ${unit(arrowOffsetHorizontal)})`,
+				[varName("arrow-offset-horizontal")]: `calc(100% - ${unit(arrowOffsetHorizontal)})`,
 				[`> ${componentCls}-arrow`]: { right: {
 					_skip_check_: true,
 					value: arrowOffsetHorizontal
@@ -79,14 +81,14 @@ function getArrowStyle(token, colorBg, options) {
 				transform: `translateX(-50%) translateY(-100%)`
 			},
 			"&-placement-bottomLeft": {
-				"--arrow-offset-horizontal": arrowOffsetHorizontal,
+				[varName("arrow-offset-horizontal")]: arrowOffsetHorizontal,
 				[`> ${componentCls}-arrow`]: { left: {
 					_skip_check_: true,
 					value: arrowOffsetHorizontal
 				} }
 			},
 			"&-placement-bottomRight": {
-				"--arrow-offset-horizontal": `calc(100% - ${unit(arrowOffsetHorizontal)})`,
+				[varName("arrow-offset-horizontal")]: `calc(100% - ${unit(arrowOffsetHorizontal)})`,
 				[`> ${componentCls}-arrow`]: { right: {
 					_skip_check_: true,
 					value: arrowOffsetHorizontal

package/dist/switch/index.d.ts

@@ -2,7 +2,7 @@ import { VueNode } from "../_util/type.js";
 import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
 import "../_util/hooks/index.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue169 from "vue";
+import * as vue140 from "vue";
 import { SlotsType } from "vue";
 import { SwitchChangeEventHandler, SwitchClickEventHandler } from "@v-c/switch";
 
@@ -47,8 +47,8 @@ interface SwitchSlots {
   checkedChildren: () => any;
   unCheckedChildren: () => any;
 }
-declare const Switch: vue169.DefineSetupFnComponent<SwitchProps, SwitchEmits, SlotsType<SwitchSlots>, SwitchProps & {
+declare const Switch: vue140.DefineSetupFnComponent<SwitchProps, SwitchEmits, SlotsType<SwitchSlots>, SwitchProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue169.PublicProps>;
+}, vue140.PublicProps>;
 //#endregion
 export { Switch, SwitchEmits, SwitchProps, SwitchSize, SwitchSlots };

package/dist/switch/index.js

@@ -99,23 +99,28 @@ const Switch = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs }) =
 	props: {
 		size: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		checked: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		defaultChecked: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		value: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		defaultValue: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		checkedChildren: {
 			type: [
@@ -126,7 +131,8 @@ const Switch = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs }) =
 				null,
 				Object
 			],
-			required: false
+			required: false,
+			default: void 0
 		},
 		unCheckedChildren: {
 			type: [
@@ -137,47 +143,58 @@ const Switch = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs }) =
 				null,
 				Object
 			],
-			required: false
+			required: false,
+			default: void 0
 		},
 		disabled: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		loading: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		autoFocus: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: void 0
 		},
 		title: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		tabIndex: {
 			type: Number,
-			required: false
+			required: false,
+			default: void 0
 		},
 		id: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		classes: {
 			type: [Object, Function],
-			required: false
+			required: false,
+			default: void 0
 		},
 		styles: {
 			type: [Object, Function],
-			required: false
+			required: false,
+			default: void 0
 		},
 		rootClass: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		},
 		prefixCls: {
 			type: String,
-			required: false
+			required: false,
+			default: void 0
 		}
 	},
 	name: "ASwitch",

package/dist/table/Column.d.ts

@@ -1,6 +1,6 @@
 import { AnyObject, EmptyEmit } from "../_util/type.js";
 import { ColumnType } from "./interface.js";
-import * as vue362 from "vue";
+import * as vue365 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/table/Column.d.ts
@@ -13,8 +13,8 @@ interface ColumnSlots {
 /**
  * Syntactic sugar for `columns` prop. HOC will not work on this.
  */
-declare const Column: vue362.DefineSetupFnComponent<ColumnProps<AnyObject>, EmptyEmit, SlotsType<ColumnSlots>, ColumnProps<AnyObject> & {
+declare const Column: vue365.DefineSetupFnComponent<ColumnProps<AnyObject>, EmptyEmit, SlotsType<ColumnSlots>, ColumnProps<AnyObject> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue362.PublicProps>;
+}, vue365.PublicProps>;
 //#endregion
 export { Column, ColumnProps };