antdv-next 1.0.0-alpha.4 → 1.0.0-beta.1

package/dist/popover/index.d.ts

@@ -2,8 +2,8 @@ import { VueNode } from "../_util/type.js";
 import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
 import "../_util/hooks/index.js";
 import { SemanticName, TooltipEmits, TooltipProps } from "../tooltip/index.js";
-import * as vue76 from "vue";
-import { SlotsType } from "vue";
+import * as vue132 from "vue";
+import { App, SlotsType } from "vue";
 
 //#region src/popover/index.d.ts
 type PopoverSemanticName = SemanticName | 'title' | 'content';
@@ -23,9 +23,12 @@ interface PopoverSlots {
   content: () => any;
   default: () => any;
 }
-declare const InternalPopover: vue76.DefineSetupFnComponent<PopoverProps, PopoverEmits, SlotsType<PopoverSlots>, PopoverProps & {
+declare const InternalPopover: vue132.DefineSetupFnComponent<PopoverProps, PopoverEmits, SlotsType<PopoverSlots>, PopoverProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue76.PublicProps>;
-declare const _default: typeof InternalPopover;
+}, vue132.PublicProps>;
+declare const Popover: typeof InternalPopover & {
+  install: (app: App) => void;
+  _InternalPanelDoNotUseOrYouWillBeFired: any;
+};
 //#endregion
-export { PopoverProps, PopoverSemanticName, _default };
+export { Popover, PopoverProps, PopoverSemanticName };

package/dist/popover/index.js

@@ -5,7 +5,7 @@ import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
 import useMergedArrow_default from "../tooltip/hooks/useMergedArrow.js";
 import tooltip_default from "../tooltip/index.js";
 import style_default from "./style/index.js";
-import { Overlay } from "./PurePanel.js";
+import PurePanel_default, { Overlay } from "./PurePanel.js";
 import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef, watchEffect } from "vue";
 import { clsx } from "@v-c/util";
 import { filterEmpty, removeUndefined } from "@v-c/util/dist/props-util";
@@ -259,6 +259,7 @@ const Popover = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose,
 Popover.install = (app) => {
 	app.component(Popover.name, Popover);
 };
+Popover._InternalPanelDoNotUseOrYouWillBeFired = PurePanel_default;
 var popover_default = Popover;
 
 //#endregion

package/dist/popover/style/index.js

@@ -1,6 +1,6 @@
 import { PresetColors } from "../../theme/interface/presetColors.js";
 import { resetComponent } from "../../style/index.js";
-import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.js";
 import { mergeToken } from "../../theme/internal.js";
 import { getArrowToken } from "../../style/roundedArrow.js";
 import getArrowStyle, { getArrowOffsetToken } from "../../style/placementArrow.js";
@@ -8,8 +8,10 @@ import { initZoomMotion } from "../../style/motion/zoom.js";
 import "../../style/motion/index.js";
 
 //#region src/popover/style/index.ts
+const FALL_BACK_ORIGIN = "50%";
 const genBaseStyle = (token) => {
-	const { componentCls, popoverColor, titleMinWidth, fontWeightStrong, innerPadding, boxShadowSecondary, colorTextHeading, borderRadiusLG, zIndexPopup, titleMarginBottom, colorBgElevated, popoverBg, titleBorderBottom, innerContentPadding, titlePadding } = token;
+	const { componentCls, popoverColor, titleMinWidth, fontWeightStrong, innerPadding, boxShadowSecondary, colorTextHeading, borderRadiusLG, zIndexPopup, titleMarginBottom, colorBgElevated, popoverBg, titleBorderBottom, innerContentPadding, titlePadding, antCls } = token;
+	const [varName, varRef] = genCssVar(antCls, "tooltip");
 	return [
 		{ [componentCls]: {
 			...resetComponent(token),
@@ -25,9 +27,9 @@ const genBaseStyle = (token) => {
 			"textAlign": "start",
 			"cursor": "auto",
 			"userSelect": "text",
-			"--valid-offset-x": "var(--arrow-offset-horizontal, var(--arrow-x))",
-			"transformOrigin": [`var(--valid-offset-x, 50%)`, `var(--arrow-y, 50%)`].join(" "),
-			"--antd-arrow-background-color": colorBgElevated,
+			[varName("valid-offset-x")]: varRef("arrow-offset-horizontal", "var(--arrow-x)"),
+			"transformOrigin": [varRef("valid-offset-x", FALL_BACK_ORIGIN), `var(--arrow-y, ${FALL_BACK_ORIGIN})`].join(" "),
+			[varName("arrow-background-color")]: colorBgElevated,
 			"width": "max-content",
 			"maxWidth": "100vw",
 			"&-rtl": { direction: "rtl" },
@@ -53,7 +55,7 @@ const genBaseStyle = (token) => {
 				padding: innerContentPadding
 			}
 		} },
-		getArrowStyle(token, "var(--antd-arrow-background-color)"),
+		getArrowStyle(token, varRef("arrow-background-color")),
 		{ [`${componentCls}-pure`]: {
 			position: "relative",
 			maxWidth: "none",
@@ -63,11 +65,12 @@ const genBaseStyle = (token) => {
 	];
 };
 const genColorStyle = (token) => {
-	const { componentCls } = token;
+	const { componentCls, antCls } = token;
+	const [varName] = genCssVar(antCls, "tooltip");
 	return { [componentCls]: PresetColors.map((colorKey) => {
 		const lightColor = token[`${colorKey}6`];
 		return { [`&${componentCls}-${colorKey}`]: {
-			"--antd-arrow-background-color": lightColor,
+			[varName("arrow-background-color")]: lightColor,
 			[`${componentCls}-inner`]: { backgroundColor: lightColor },
 			[`${componentCls}-arrow`]: { background: "transparent" }
 		} };

package/dist/progress/progress.d.ts

@@ -2,7 +2,7 @@ import { EmptyEmit } 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 vue151 from "vue";
+import * as vue134 from "vue";
 import { AriaAttributes, SlotsType } from "vue";
 
 //#region src/progress/progress.d.ts
@@ -67,8 +67,8 @@ interface ProgressProps extends ComponentBaseProps, ProgressAriaProps {
 interface ProgressSlots {
   default?: () => any;
 }
-declare const Progress: vue151.DefineSetupFnComponent<ProgressProps, EmptyEmit, SlotsType<ProgressSlots>, ProgressProps & {
+declare const Progress: vue134.DefineSetupFnComponent<ProgressProps, EmptyEmit, SlotsType<ProgressSlots>, ProgressProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue151.PublicProps>;
+}, vue134.PublicProps>;
 //#endregion
 export { Progress, ProgressAriaProps, ProgressProps };

package/dist/qrcode/index.d.ts

@@ -1,10 +1,10 @@
 import { QRCodeEmits, QRCodeProps, QRCodeSlots } from "./interface.js";
-import * as vue163 from "vue";
+import * as vue136 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/qrcode/index.d.ts
-declare const QRCode: vue163.DefineSetupFnComponent<QRCodeProps, QRCodeEmits, SlotsType<QRCodeSlots>, QRCodeProps & {
+declare const QRCode: vue136.DefineSetupFnComponent<QRCodeProps, QRCodeEmits, SlotsType<QRCodeSlots>, QRCodeProps & {
   [x: `on${Capitalize<string>}`]: (() => any) | undefined;
-}, vue163.PublicProps>;
+}, vue136.PublicProps>;
 //#endregion
 export { QRCode };

package/dist/radio/index.d.ts

@@ -4,15 +4,15 @@ import "../checkbox/index.js";
 import { RadioChangeEvent, RadioEmits, RadioGroupEmits, RadioGroupOptionType, RadioGroupProps, RadioGroupSlots, RadioProps, RadioSlots } from "./interface.js";
 import { InternalRadio } from "./radio.js";
 import "../index.js";
-import * as vue157 from "vue";
+import * as vue138 from "vue";
 
 //#region src/radio/index.d.ts
 type RadioOptionType = CheckboxOptionType;
-declare const RadioGroup: vue157.DefineSetupFnComponent<RadioGroupProps, RadioGroupEmits, vue157.SlotsType<RadioGroupSlots>, RadioGroupProps & {
+declare const RadioGroup: vue138.DefineSetupFnComponent<RadioGroupProps, RadioGroupEmits, vue138.SlotsType<RadioGroupSlots>, RadioGroupProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue157.PublicProps>;
-declare const RadioButton: vue157.DefineSetupFnComponent<AbstractCheckboxProps, CheckboxEmits, vue157.SlotsType<CheckboxSlots>, AbstractCheckboxProps & {
+}, vue138.PublicProps>;
+declare const RadioButton: vue138.DefineSetupFnComponent<AbstractCheckboxProps, CheckboxEmits, vue138.SlotsType<CheckboxSlots>, AbstractCheckboxProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue157.PublicProps>;
+}, vue138.PublicProps>;
 //#endregion
 export { RadioButton, RadioGroup, RadioOptionType };

package/dist/radio/radio.d.ts

@@ -1,10 +1,10 @@
 import { RadioEmits, RadioProps, RadioSlots } from "./interface.js";
-import * as vue406 from "vue";
+import * as vue412 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/radio/radio.d.ts
-declare const InternalRadio: vue406.DefineSetupFnComponent<RadioProps, RadioEmits, SlotsType<RadioSlots>, RadioProps & {
+declare const InternalRadio: vue412.DefineSetupFnComponent<RadioProps, RadioEmits, SlotsType<RadioSlots>, RadioProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue406.PublicProps>;
+}, vue412.PublicProps>;
 //#endregion
 export { InternalRadio };

package/dist/radio/style/index.js

@@ -165,7 +165,7 @@ const getRadioButtonStyle = (token) => {
 		"cursor": "pointer",
 		"transition": [
 			`color ${motionDurationMid}`,
-			`background ${motionDurationMid}`,
+			`background-color ${motionDurationMid}`,
 			`box-shadow ${motionDurationMid}`
 		].join(","),
 		"a": { color: buttonColor },

package/dist/rate/index.d.ts

@@ -1,5 +1,5 @@
 import { TooltipProps } from "../tooltip/index.js";
-import * as vue153 from "vue";
+import * as vue144 from "vue";
 import { RateProps } from "@v-c/rate";
 
 //#region src/rate/index.d.ts
@@ -18,8 +18,8 @@ interface RateEmits {
   'mouseleave': (e: FocusEvent) => void;
   [key: string]: (...args: any[]) => void;
 }
-declare const Rate: vue153.DefineSetupFnComponent<RateProps$1, RateEmits, {}, RateProps$1 & {
+declare const Rate: vue144.DefineSetupFnComponent<RateProps$1, RateEmits, {}, RateProps$1 & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue153.PublicProps>;
+}, vue144.PublicProps>;
 //#endregion
 export { Rate, RateEmits, RateProps$1 as RateProps };

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

@@ -1,6 +1,6 @@
 import "../../theme/internal.js";
-import "vue";
 import { CSSObject } from "@antdv-next/cssinjs";
+import "vue";
 
 //#region src/rate/style/index.d.ts
 interface ComponentToken {

package/dist/result/index.d.ts

@@ -5,7 +5,7 @@ import { NoFound } from "./noFound.js";
 import { ServerError } from "./serverError.js";
 import { Unauthorized } from "./unauthorized.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue155 from "vue";
+import * as vue128 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/result/index.d.ts
@@ -36,9 +36,9 @@ interface ResultSlots {
   extra?: () => any;
   default?: () => any;
 }
-declare const Result: vue155.DefineSetupFnComponent<ResultProps, EmptyEmit, SlotsType<ResultSlots>, ResultProps & {
+declare const Result: vue128.DefineSetupFnComponent<ResultProps, EmptyEmit, SlotsType<ResultSlots>, ResultProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue155.PublicProps>;
+}, vue128.PublicProps>;
 declare const _default: typeof Result & {
   PRESENTED_IMAGE_403: (typeof ExceptionMap)["403"];
   PRESENTED_IMAGE_404: (typeof ExceptionMap)["404"];

package/dist/result/noFound.d.ts

@@ -1,6 +1,6 @@
-import * as vue_jsx_runtime13 from "vue/jsx-runtime";
+import * as vue_jsx_runtime14 from "vue/jsx-runtime";
 
 //#region src/result/noFound.d.ts
-declare function NoFound(): vue_jsx_runtime13.JSX.Element;
+declare function NoFound(): vue_jsx_runtime14.JSX.Element;
 //#endregion
 export { NoFound };

package/dist/result/serverError.d.ts

@@ -1,6 +1,6 @@
-import * as vue_jsx_runtime14 from "vue/jsx-runtime";
+import * as vue_jsx_runtime13 from "vue/jsx-runtime";
 
 //#region src/result/serverError.d.ts
-declare function ServerError(): vue_jsx_runtime14.JSX.Element;
+declare function ServerError(): vue_jsx_runtime13.JSX.Element;
 //#endregion
 export { ServerError };

package/dist/segmented/index.d.ts

@@ -4,7 +4,7 @@ import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMe
 import { Orientation } from "../_util/hooks/useOrientation.js";
 import "../_util/hooks/index.js";
 import { TooltipProps } from "../tooltip/index.js";
-import * as vue165 from "vue";
+import * as vue148 from "vue";
 import { App, SlotsType } from "vue";
 import { SegmentedLabeledOption, SegmentedProps, SegmentedRawOption, SegmentedValue } from "@v-c/segmented";
 
@@ -48,9 +48,9 @@ interface SegmentedSlots {
   iconRender: (option: SegmentedLabeledOption$1) => any;
   labelRender: (option: SegmentedLabeledOption$1) => any;
 }
-declare const InternalSegmented: vue165.DefineSetupFnComponent<SegmentedProps$1, SegmentedEmits, SlotsType<SegmentedSlots>, SegmentedProps$1 & {
+declare const InternalSegmented: vue148.DefineSetupFnComponent<SegmentedProps$1, SegmentedEmits, SlotsType<SegmentedSlots>, SegmentedProps$1 & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue165.PublicProps>;
+}, vue148.PublicProps>;
 declare const Segmented: typeof InternalSegmented & {
   install: (app: App) => void;
 };

package/dist/select/index.d.ts

@@ -5,7 +5,7 @@ import "../_util/hooks/index.js";
 import { InputStatus } from "../_util/statusUtils.js";
 import { SelectCommonPlacement } from "../_util/motion.js";
 import { ComponentBaseProps, Variant } from "../config-provider/context.js";
-import * as vue167 from "vue";
+import * as vue150 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { SelectProps } from "@v-c/select";
 import * as _v_c_select_dist_Option_js0 from "@v-c/select/dist/Option.js";
@@ -110,10 +110,10 @@ interface SelectSlots {
   maxTagPlaceholder?: (data: any[]) => any;
   notFoundContent?: () => any;
 }
-declare const Select: vue167.DefineSetupFnComponent<SelectProps$1, SelectEmits, SlotsType<SelectSlots>, SelectProps$1 & {
+declare const Select: vue150.DefineSetupFnComponent<SelectProps$1, SelectEmits, SlotsType<SelectSlots>, SelectProps$1 & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue167.PublicProps>;
-declare const SelectOption: vue167.FunctionalComponent<_v_c_select_dist_Option_js0.OptionProps, {}, any, {}>;
-declare const SelectOptGroup: vue167.FunctionalComponent<_v_c_select_dist_OptGroup_js0.OptGroupProps, {}, any, {}>;
+}, vue150.PublicProps>;
+declare const SelectOption: vue150.FunctionalComponent<_v_c_select_dist_Option_js0.OptionProps, {}, any, {}>;
+declare const SelectOptGroup: vue150.FunctionalComponent<_v_c_select_dist_OptGroup_js0.OptGroupProps, {}, any, {}>;
 //#endregion
-export { Select, SelectEmits, SelectOptGroup, SelectOption, SelectProps$1 as SelectProps, SelectSlots, SelectValue };
+export { InternalSelectProps, Select, SelectEmits, SelectOptGroup, SelectOption, SelectProps$1 as SelectProps, SelectSlots, SelectValue };

package/dist/select/index.js

@@ -10,9 +10,10 @@ import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
 import { useSize } from "../config-provider/hooks/useSize.js";
 import { useCompactItemContext } from "../space/Compact.js";
 import { useDisabledContext } from "../config-provider/DisabledContext.js";
-import { useFormItemInputContext } from "../form/context.js";
+import PurePanel_default from "../_util/PurePanel.js";
 import { getMergedStatus, getStatusClassNames } from "../_util/statusUtils.js";
 import { DefaultRenderEmpty } from "../config-provider/defaultRenderEmpty.js";
+import { useFormItemInputContext } from "../form/context.js";
 import { useVariants } from "../form/hooks/useVariant.js";
 import mergedBuiltinPlacements_default from "./mergedBuiltinPlacements.js";
 import style_default from "./style/index.js";
@@ -136,7 +137,7 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 		let mergedNotFound;
 		if (notFoundContent !== void 0) mergedNotFound = notFoundContent;
 		else if (mode.value === "combobox") mergedNotFound = null;
-		else mergedNotFound = renderEmpty?.("Select") || createVNode(DefaultRenderEmpty, { "componentName": "Select" }, null);
+		else mergedNotFound = renderEmpty?.value?.("Select") || createVNode(DefaultRenderEmpty, { "componentName": "Select" }, null);
 		const { suffixIcon, itemIcon, removeIcon, clearIcon } = useIcons({
 			...rest,
 			multiple: isMultiple.value,
@@ -219,7 +220,7 @@ const Select = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, at
 				info
 			});
 		};
-		if (notFoundContent) selectProps.notFoundContent = notFoundContent;
+		if (mergedNotFound !== void 0) selectProps.notFoundContent = mergedNotFound;
 		return createVNode(VcSelect, mergeProps(restAttrs, onAttrs, {
 			"virtual": virtual.value,
 			"classNames": mergedClassNames.value,
@@ -727,6 +728,7 @@ Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
 Select.Option = Option;
 Select.OptGroup = OptGroup;
 var select_default = Select;
+Select._InternalPanelDoNotUseOrYouWillBeFired = PurePanel_default(Select, "popupAlign");
 const SelectOption = Option;
 const SelectOptGroup = OptGroup;
 

package/dist/select/style/dropdown.js

@@ -60,7 +60,7 @@ const genSingleStyle = (token) => {
 			[selectItemCls]: {
 				...genItemStyle(token),
 				"cursor": "pointer",
-				"transition": `background ${token.motionDurationSlow} ease`,
+				"transition": `background-color ${token.motionDurationSlow} ease`,
 				"borderRadius": token.borderRadiusSM,
 				"&-group": {
 					color: token.colorTextDescription,

package/dist/select/style/select-input-multiple.js

@@ -1,29 +1,31 @@
 import { resetIcon, textEllipsis } from "../../style/index.js";
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 
 //#region src/select/style/select-input-multiple.ts
 const FIXED_INPUT_MIN_WIDTH = 4;
 const genSelectInputMultipleStyle = (token) => {
-	const { componentCls, calc, iconCls, paddingXS, paddingXXS, INTERNAL_FIXED_ITEM_MARGIN, lineWidth, colorIcon, colorIconHover, inputPaddingHorizontalBase } = token;
+	const { componentCls, calc, iconCls, paddingXS, paddingXXS, INTERNAL_FIXED_ITEM_MARGIN, lineWidth, colorIcon, colorIconHover, inputPaddingHorizontalBase, antCls } = token;
+	const [varName, varRef] = genCssVar(antCls, "select");
 	return { "&-multiple": {
-		"--select-multi-item-background": token.multipleItemBg,
-		"--select-multi-item-border-color": "transparent",
-		"--select-multi-item-border-radius": token.borderRadiusSM,
-		"--select-multi-item-height": token.multipleItemHeight,
-		"--select-multi-padding-base": `calc((var(--select-height) - var(--select-multi-item-height)) / 2)`,
-		"--select-multi-padding-vertical": `calc(var(--select-multi-padding-base) - ${INTERNAL_FIXED_ITEM_MARGIN} - ${lineWidth})`,
-		"--select-multi-item-padding-horizontal": `calc(${inputPaddingHorizontalBase} - var(--select-multi-padding-vertical) - ${lineWidth} * 2)`,
-		"paddingBlock": `var(--select-multi-padding-vertical)`,
-		"paddingInlineStart": `calc(var(--select-multi-padding-base) - ${lineWidth})`,
-		[`${componentCls}-prefix`]: { marginInlineStart: "var(--select-multi-item-padding-horizontal)" },
+		[varName("multi-item-background")]: token.multipleItemBg,
+		[varName("multi-item-border-color")]: "transparent",
+		[varName("multi-item-border-radius")]: token.borderRadiusSM,
+		[varName("multi-item-height")]: token.multipleItemHeight,
+		[varName("multi-padding-base")]: `calc((${varRef("height")} - ${varRef("multi-item-height")}) / 2)`,
+		[varName("multi-padding-vertical")]: `calc(${varRef("multi-padding-base")} - ${INTERNAL_FIXED_ITEM_MARGIN} - ${lineWidth})`,
+		[varName("multi-item-padding-horizontal")]: `calc(${inputPaddingHorizontalBase} - ${varRef("multi-padding-vertical")} - ${lineWidth} * 2)`,
+		paddingBlock: varRef("multi-padding-vertical"),
+		paddingInlineStart: `calc(${varRef("multi-padding-base")} - ${lineWidth})`,
+		[`${componentCls}-prefix`]: { marginInlineStart: varRef("multi-item-padding-horizontal") },
 		[`${componentCls}-prefix + ${componentCls}-content`]: {
 			[`${componentCls}-placeholder`]: { insetInlineStart: 0 },
 			[`${componentCls}-content-item${componentCls}-content-item-suffix`]: { marginInlineStart: 0 }
 		},
 		[`${componentCls}-placeholder`]: {
 			position: "absolute",
-			lineHeight: "var(--select-line-height)",
-			insetInlineStart: "var(--select-multi-item-padding-horizontal)",
-			width: "calc(100% - var(--select-multi-item-padding-horizontal))",
+			lineHeight: varRef("line-height"),
+			insetInlineStart: varRef("multi-item-padding-horizontal"),
+			width: `calc(100% - ${varRef("multi-item-padding-horizontal")})`,
 			top: "50%",
 			transform: "translateY(-50%)"
 		},
@@ -31,21 +33,21 @@ const genSelectInputMultipleStyle = (token) => {
 			"flexWrap": "wrap",
 			"alignItems": "center",
 			"lineHeight": 1,
-			"&-item-prefix": { height: "var(--select-font-size)" },
+			"&-item-prefix": { height: varRef("font-size") },
 			"&-item": {
 				lineHeight: 1,
 				maxWidth: `calc(100% - ${FIXED_INPUT_MIN_WIDTH}px)`
 			},
 			[`${componentCls}-content-item-prefix + ${componentCls}-content-item-suffix,
-          ${componentCls}-content-item-suffix:first-child`]: { marginInlineStart: "var(--select-multi-item-padding-horizontal)" },
+          ${componentCls}-content-item-suffix:first-child`]: { marginInlineStart: varRef("multi-item-padding-horizontal") },
 			[`${componentCls}-selection-item`]: {
-				"lineHeight": `calc(var(--select-multi-item-height) - ${lineWidth} * 2)`,
-				"border": `${lineWidth} solid var(--select-multi-item-border-color)`,
+				"lineHeight": `calc(${varRef("multi-item-height")} - ${lineWidth} * 2)`,
+				"border": `${lineWidth} solid ${varRef("multi-item-border-color")}`,
 				"display": "flex",
 				"marginBlock": INTERNAL_FIXED_ITEM_MARGIN,
 				"marginInlineEnd": calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).equal(),
-				"background": `var(--select-multi-item-background)`,
-				"borderRadius": `var(--select-multi-item-border-radius)`,
+				"background": varRef("multi-item-background"),
+				"borderRadius": varRef("multi-item-border-radius"),
 				"paddingInlineStart": paddingXS,
 				"paddingInlineEnd": paddingXXS,
 				"transition": [
@@ -71,25 +73,25 @@ const genSelectInputMultipleStyle = (token) => {
 				}
 			},
 			[`${componentCls}-input`]: {
-				lineHeight: calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).add("var(--select-multi-item-height)").equal(),
-				width: "calc(var(--select-input-width, 0) * 1px)",
+				lineHeight: calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).add(varRef("multi-item-height")).equal(),
+				width: `calc(var(--select-input-width, 0) * 1px)`,
 				minWidth: FIXED_INPUT_MIN_WIDTH,
 				maxWidth: "100%",
 				transition: `line-height ${token.motionDurationSlow}`
 			}
 		},
 		[`&${componentCls}-sm`]: {
-			"--select-multi-item-height": token.multipleItemHeightSM,
-			"--select-multi-item-border-radius": token.borderRadiusXS
+			[varName("multi-item-height")]: token.multipleItemHeightSM,
+			[varName("multi-item-border-radius")]: token.borderRadiusXS
 		},
 		[`&${componentCls}-lg`]: {
-			"--select-multi-item-height": token.multipleItemHeightLG,
-			"--select-multi-item-border-radius": token.borderRadius
+			[varName("multi-item-height")]: token.multipleItemHeightLG,
+			[varName("multi-item-border-radius")]: token.borderRadius
 		},
 		[`&${componentCls}-filled`]: {
-			"--select-multi-item-border-color": token.colorSplit,
-			"--select-multi-item-background": token.colorBgContainer,
-			[`&${componentCls}-disabled`]: { "--select-multi-item-border-color": "transparent" }
+			[varName("multi-item-border-color")]: token.colorSplit,
+			[varName("multi-item-background")]: token.colorBgContainer,
+			[`&${componentCls}-disabled`]: { [varName("multi-item-border-color")]: "transparent" }
 		}
 	} };
 };

package/dist/select/style/select-input.js

@@ -1,4 +1,5 @@
 import { resetComponent, textEllipsis } from "../../style/index.js";
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 import select_input_customize_default from "./select-input-customize.js";
 import select_input_multiple_default from "./select-input-multiple.js";
 import { unit } from "@antdv-next/cssinjs";
@@ -6,27 +7,28 @@ import { unit } from "@antdv-next/cssinjs";
 //#region src/select/style/select-input.ts
 /** Set CSS variables and hover/focus styles for a Select input based on provided colors. */
 function genSelectInputVariableStyle(token, colors) {
-	const { componentCls } = token;
+	const { componentCls, antCls } = token;
+	const [varName] = genCssVar(antCls, "select");
 	const { border, borderHover, borderActive, borderOutline } = colors;
-	const baseBG = colors.background || token.colorBgContainer;
+	const baseBG = colors.background || token.selectorBg || token.colorBgContainer;
 	return {
-		"--select-border-color": border,
-		"--select-background": baseBG,
-		"--select-color": colors.color || token.colorText,
+		[varName("border-color")]: border,
+		[varName("background-color")]: baseBG,
+		[varName("color")]: colors.color || token.colorText,
 		[`&:not(${componentCls}-disabled)`]: {
 			"&:hover": {
-				"--select-border-color": borderHover,
-				"--select-background": colors.backgroundHover || baseBG
+				[varName("border-color")]: borderHover,
+				[varName("background-color")]: colors.backgroundHover || baseBG
 			},
 			[`&${componentCls}-focused`]: {
-				"--select-border-color": borderActive,
-				"--select-background": colors.backgroundActive || baseBG,
-				"boxShadow": `0 0 0 ${unit(token.controlOutlineWidth)} ${borderOutline}`
+				[varName("border-color")]: borderActive,
+				[varName("background-color")]: colors.backgroundActive || baseBG,
+				boxShadow: `0 0 0 ${unit(token.controlOutlineWidth)} ${borderOutline}`
 			}
 		},
 		[`&${componentCls}-disabled`]: {
-			"--select-border-color": colors.borderDisabled || colors.border,
-			"--select-background": colors.backgroundDisabled || colors.background
+			[varName("border-color")]: colors.borderDisabled || colors.border,
+			[varName("background-color")]: colors.backgroundDisabled || colors.background
 		}
 	};
 }
@@ -51,20 +53,21 @@ function genSelectInputVariantStyle(token, variant, colors, errorColors = {}, wa
 	] };
 }
 const genSelectInputStyle = (token) => {
-	const { componentCls, calc, fontHeight, controlHeight, iconCls } = token;
+	const { componentCls, fontHeight, controlHeight, iconCls, antCls, calc } = token;
+	const [varName, varRef] = genCssVar(antCls, "select");
 	return { [componentCls]: [
 		{
-			"--select-border-radius": token.borderRadius,
-			"--select-border-color": "#000",
-			"--select-border-size": token.lineWidth,
-			"--select-background": token.colorBgContainer,
-			"--select-font-size": token.fontSize,
-			"--select-line-height": token.lineHeight,
-			"--select-font-height": fontHeight,
-			"--select-color": token.colorText,
-			"--select-height": controlHeight,
-			"--select-padding-horizontal": calc(token.paddingSM).sub(token.lineWidth).equal(),
-			"--select-padding-vertical": "calc((var(--select-height) - var(--select-font-height)) / 2 - var(--select-border-size))",
+			[varName("border-radius")]: token.borderRadius,
+			[varName("border-color")]: "#000",
+			[varName("border-size")]: token.lineWidth,
+			[varName("background-color")]: token.colorBgContainer,
+			[varName("font-size")]: token.fontSize,
+			[varName("line-height")]: token.lineHeight,
+			[varName("font-height")]: fontHeight,
+			[varName("color")]: token.colorText,
+			[varName("height")]: controlHeight,
+			[varName("padding-horizontal")]: calc(token.paddingSM).sub(token.lineWidth).equal(),
+			[varName("padding-vertical")]: `calc((${varRef("height")} - ${varRef("font-height")}) / 2 - ${varRef("border-size")})`,
 			...resetComponent(token, true),
 			"display": "inline-flex",
 			"flexWrap": "nowrap",
@@ -73,16 +76,16 @@ const genSelectInputStyle = (token) => {
 			"alignItems": "flex-start",
 			"outline": 0,
 			"cursor": "pointer",
-			"borderRadius": "var(--select-border-radius)",
-			"borderWidth": "var(--select-border-size)",
+			"borderRadius": varRef("border-radius"),
+			"borderWidth": varRef("border-size"),
 			"borderStyle": token.lineType,
-			"borderColor": "var(--select-border-color)",
-			"background": "var(--select-background)",
-			"fontSize": "var(--select-font-size)",
-			"lineHeight": "var(--select-line-height)",
-			"color": "var(--select-color)",
-			"paddingInline": "var(--select-padding-horizontal)",
-			"paddingBlock": "var(--select-padding-vertical)",
+			"borderColor": varRef("border-color"),
+			"background": varRef("background-color"),
+			"fontSize": varRef("font-size"),
+			"lineHeight": varRef("line-height"),
+			"color": varRef("color"),
+			"paddingInline": varRef("padding-horizontal"),
+			"paddingBlock": varRef("padding-vertical"),
 			[`${componentCls}-prefix`]: {
 				flex: "none",
 				lineHeight: 1
@@ -129,19 +132,21 @@ const genSelectInputStyle = (token) => {
 			"&-disabled": {
 				background: token.colorBgContainerDisabled,
 				color: token.colorTextDisabled,
-				cursor: "not-allowed"
+				cursor: "not-allowed",
+				input: { cursor: "not-allowed" }
 			},
 			"&-sm": {
-				"--select-height": token.controlHeightSM,
-				"--select-padding-horizontal": calc(token.paddingXS).sub(token.lineWidth).equal(),
-				"--select-border-radius": token.borderRadiusSM
+				[varName("height")]: token.controlHeightSM,
+				[varName("padding-horizontal")]: calc(token.paddingXS).sub(token.lineWidth).equal(),
+				[varName("border-radius")]: token.borderRadiusSM,
+				[`${componentCls}-clear`]: { insetInlineEnd: varRef("padding-horizontal") }
 			},
 			"&-lg": {
-				"--select-height": token.controlHeightLG,
-				"--select-font-size": token.fontSizeLG,
-				"--select-line-height": token.lineHeightLG,
-				"--select-font-height": token.fontHeightLG,
-				"--select-border-radius": token.borderRadiusLG
+				[varName("height")]: token.controlHeightLG,
+				[varName("font-size")]: token.fontSizeLG,
+				[varName("line-height")]: token.lineHeightLG,
+				[varName("font-height")]: token.fontHeightLG,
+				[varName("border-radius")]: token.borderRadiusLG
 			}
 		},
 		{ [`&:not(${componentCls}-customize)`]: { [`${componentCls}-input`]: {
@@ -161,11 +166,12 @@ const genSelectInputStyle = (token) => {
 			[`${componentCls}-input`]: {
 				position: "absolute",
 				insetInline: 0,
-				insetBlock: "calc(var(--select-padding-vertical) * -1)",
-				lineHeight: "calc(var(--select-font-height) + var(--select-padding-vertical) * 2)"
+				insetBlock: `calc(${varRef("padding-vertical")} * -1)`,
+				lineHeight: `calc(${varRef("font-height")} + ${varRef("padding-vertical")} * 2)`
 			},
 			[`${componentCls}-content`]: { alignSelf: "center" }
 		} },
+		{ [`&-show-search:not(${componentCls}-customize-input):not(${componentCls}-disabled)`]: { cursor: "text" } },
 		select_input_multiple_default(token),
 		genSelectInputVariantStyle(token, "outlined", {
 			border: token.colorBorder,

package/dist/skeleton/Avatar.d.ts

@@ -1,10 +1,10 @@
 import { SkeletonElementProps } from "./Element.js";
-import * as vue436 from "vue";
+import * as vue434 from "vue";
 
 //#region src/skeleton/Avatar.d.ts
 interface SkeletonAvatarProps extends Omit<SkeletonElementProps, 'shape'> {
   shape?: 'circle' | 'square';
 }
-declare const SkeletonAvatar: vue436.DefineSetupFnComponent<SkeletonAvatarProps, {}, {}, SkeletonAvatarProps & {}, vue436.PublicProps>;
+declare const SkeletonAvatar: vue434.DefineSetupFnComponent<SkeletonAvatarProps, {}, {}, SkeletonAvatarProps & {}, vue434.PublicProps>;
 //#endregion
 export { SkeletonAvatar, SkeletonAvatarProps };