@endfield-ui/react 1.1.0 → 1.2.0

package/dist/index.js

@@ -326,7 +326,7 @@ function Alert({ tone = "info", title, action, onClose, open = true, onExited, c
 		ref: mergeRefs(rootRef, ref),
 		"data-tone": tone,
 		inert: leaving,
-		className: cn("flex items-start gap-3 border border-l-4 border-line bg-surface-raised py-3 pr-3 pl-3 text-sm text-ink", toneBar[tone], leaving && ["pointer-events-none overflow-hidden", "transition-[height,padding,margin,border-width,opacity] duration-(--duration-fast) ease-standard"], className),
+		className: cn("flex items-start gap-3 border-l-4 bg-surface-raised py-3 pr-3 pl-3 text-sm text-ink", toneBar[tone], leaving && ["pointer-events-none overflow-hidden", "transition-[height,padding,margin,border-width,opacity] duration-(--duration-fast) ease-standard"], className),
 		children: [
 			graphic !== null && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
@@ -1974,6 +1974,10 @@ const MenuVariantContext = createContext("plain");
 /**
 * 面板：直角、1px 线、环境阴影；顶部一条半宽的行动色细条，展开时从 0 伸到一半宽。
 *
+* 细条上挂一个朝下的小三角，和它是同一个伪元素裁出来的：条高 3px，三角露出 8×4px，
+* 中心距条的左端 32px（实机风格弹窗分隔条的一半大）。它是条上的记号，不指向触发处——
+* 面板翻到上面、在侧边时照旧在顶上、朝下。三角探进第一行 2px，所以压在各行的底色之上
+*
 * 进场：淡入（200ms），同时从触发处那一侧挪过来 4px（300ms，和细条同一拍）。
 * 退场只淡出——位移只写在起点上。两个时长、两条缓动按属性一一对应
 */
@@ -1982,7 +1986,8 @@ const menuPanel = [
 	"origin-(--transform-origin) transition-[opacity,translate] duration-[var(--duration-fast),var(--duration-base)] ease-[var(--ease-standard),var(--ease-exit)]",
 	"data-ending-style:opacity-0 data-starting-style:opacity-0",
 	enterFromSide,
-	"before:pointer-events-none before:absolute before:-top-px before:-left-px before:h-[3px] before:w-1/2 before:origin-left before:bg-action before:content-['']",
+	"before:pointer-events-none before:absolute before:-top-px before:-left-px before:z-1 before:h-[7px] before:w-1/2 before:origin-left before:bg-action before:content-['']",
+	"before:[clip-path:polygon(0_0,100%_0,100%_3px,36px_3px,32px_100%,28px_3px,0_3px)]",
 	"before:transition-transform before:duration-(--duration-base) before:ease-exit data-starting-style:before:scale-x-0",
 	"forced-colors:before:hidden"
 ].join(" ");
@@ -2157,8 +2162,21 @@ const fill$1 = {
 	sunken: "bg-surface-sunken",
 	outline: "bg-surface"
 };
+const lineFrame = {
+	sunken: "before:pointer-events-none before:absolute before:inset-x-0 before:-bottom-[2px] before:h-[2px] before:origin-left before:scale-x-0 before:bg-ink before:content-[''] forced-colors:before:bg-[Highlight]",
+	outline: "before:pointer-events-none before:absolute before:-inset-px before:border before:border-ink before:[clip-path:inset(0_100%_0_0)] before:content-['']"
+};
+const lineOpen = {
+	sunken: "focus-within:before:scale-x-100 has-data-popup-open:before:scale-x-100",
+	outline: "focus-within:before:[clip-path:inset(0)] has-data-popup-open:before:[clip-path:inset(0)]"
+};
+const lineMotion = "before:transition-[scale,clip-path] before:duration-(--duration-fast) before:ease-standard focus-within:before:duration-(--duration-base) focus-within:before:ease-exit has-data-popup-open:before:duration-(--duration-base) has-data-popup-open:before:ease-exit";
+/** 聚焦的墨线，接在带 `relative` 的外框上用 */
+function controlLine(variant = "sunken") {
+	return cn(lineFrame[variant], lineOpen[variant], lineMotion);
+}
 function controlBox({ variant = "sunken", invalid, disabled, readOnly }) {
-	return cn("flex w-full min-w-0 text-ink", frame[variant], "transition-colors duration-(--duration-fast) ease-standard", focusRingWithin, readOnly ? "border-transparent bg-transparent" : fill$1[variant], readOnly && !disabled && !invalid && "forced-colors:border-[Canvas]", disabled ? "cursor-not-allowed border-line text-ink-disabled" : invalid ? "border-danger" : !readOnly && "border-line-strong hover:not-focus-within:border-ink-secondary focus-within:border-ink");
+	return cn("relative flex w-full min-w-0 text-ink", frame[variant], "transition-colors duration-(--duration-fast) ease-standard", focusRingWithin, readOnly ? "border-transparent bg-transparent" : fill$1[variant], readOnly && !disabled && !invalid && "forced-colors:border-[Canvas]", disabled ? "cursor-not-allowed border-line text-ink-disabled" : invalid ? "border-danger" : !readOnly && "border-line-strong hover:not-focus-within:border-ink-secondary", !disabled && !invalid && !readOnly && controlLine(variant));
 }
 /**
 * 框里真正的 `<input>` / `<textarea>`：没有自己的底和边，焦点环画在外框上。
@@ -2848,7 +2866,7 @@ function DateField({ display, placeholder, fields, variant, size, invalid, disab
 				invalid,
 				disabled,
 				readOnly: false
-			}), !disabled && !invalid && "has-data-popup-open:border-ink", controlSize$1[size], className),
+			}), controlSize$1[size], className),
 			children: [/* @__PURE__ */ jsxs(Popover$1.Trigger, {
 				ref,
 				id,
@@ -3950,7 +3968,7 @@ function FileUpload({ value, defaultValue, onValueChange, multiple = false, acce
 		} catch {}
 	}, [files, revision]);
 	const pendingFocus = useRef(null);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const index = pendingFocus.current;
 		if (index === null) return;
 		pendingFocus.current = null;
@@ -5481,17 +5499,14 @@ function Navigator({ items, index, defaultIndex = 0, onIndexChange, loop = false
 //#endregion
 //#region src/components/otp-input/OtpInput.tsx
 const slotSize = {
-	sm: "h-8 w-8 text-base",
-	md: "h-10 w-10 text-lg",
-	lg: "h-14 w-14 text-2xl"
-};
-const slotFrame = {
-	sunken: "border-b-2",
-	outline: "border"
+	sm: "h-8 w-8",
+	md: "h-10 w-10",
+	lg: "h-14 w-14"
 };
-const slotFill = {
-	sunken: "bg-surface-sunken",
-	outline: "bg-surface"
+const slotText = {
+	sm: "text-base",
+	md: "text-lg",
+	lg: "text-2xl"
 };
 const gapClass = {
 	sm: "gap-1.5",
@@ -5520,7 +5535,7 @@ function OtpInput({ length = 6, value, defaultValue, onValueChange, onComplete,
 	const labelId = useId();
 	const ownLabel = ariaLabelledBy ?? (ariaLabel ? labelId : void 0);
 	const groupLabel = ownLabel ?? fieldContext?.labelId;
-	const slotClass = cn("min-w-0 shrink text-center font-tech font-medium tabular-nums text-transparent caret-ink", "transition-colors duration-(--duration-fast) ease-standard", disabled ? "data-filled:text-ink-disabled" : "data-filled:text-ink", focusRing, slotSize[size], slotFrame[variant], readOnly ? "border-transparent bg-transparent" : slotFill[variant], readOnly && !disabled && !invalid && "forced-colors:border-[Canvas]", disabled ? "cursor-not-allowed border-line" : invalid ? "border-danger" : !readOnly && "border-line-strong hover:not-focus:border-ink-secondary focus:border-ink");
+	const inputClass = cn(controlElement, "h-full w-full text-center font-tech font-medium tabular-nums caret-ink text-transparent", "transition-colors duration-(--duration-fast) ease-standard", disabled ? "data-filled:text-ink-disabled" : "data-filled:text-ink", slotText[size]);
 	const group = groupSize !== void 0 && groupSize > 0 ? groupSize : 0;
 	return /* @__PURE__ */ jsxs(OTPField.Root, {
 		...props,
@@ -5553,15 +5568,23 @@ function OtpInput({ length = 6, value, defaultValue, onValueChange, onComplete,
 			"aria-hidden": "true",
 			"data-separator": "",
 			className: "h-0.5 w-2 shrink-0 bg-line-strong forced-colors:bg-[CanvasText]"
-		}), /* @__PURE__ */ jsx(OTPField.Input, {
-			...index === 0 ? {
-				"aria-labelledby": ownLabel,
-				"aria-describedby": describedBy
-			} : { "aria-label": slotLabel(index + 1, length) },
-			"aria-invalid": invalid || void 0,
-			autoFocus: autoFocus && index === 0,
-			autoCapitalize: uppercase ? "characters" : "none",
-			className: slotClass
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn(controlBox({
+				variant,
+				invalid,
+				disabled,
+				readOnly
+			}), "shrink items-center justify-center", slotSize[size]),
+			children: /* @__PURE__ */ jsx(OTPField.Input, {
+				...index === 0 ? {
+					"aria-labelledby": ownLabel,
+					"aria-describedby": describedBy
+				} : { "aria-label": slotLabel(index + 1, length) },
+				"aria-invalid": invalid || void 0,
+				autoFocus: autoFocus && index === 0,
+				autoCapitalize: uppercase ? "characters" : "none",
+				className: inputClass
+			})
 		})] }, index))]
 	});
 }
@@ -6758,7 +6781,7 @@ function SegmentedControl({ value, defaultValue, onValueChange, name, size = "md
 			ref: mergeRefs(trackRef, ref),
 			"data-variant": variant,
 			"data-size": size,
-			className: cn("inline-grid max-w-full auto-cols-fr grid-flow-col p-0.5 text-ink", "transition-colors duration-(--duration-fast) ease-standard", indicator, indicatorBox, "after:bg-surface-inverse has-[[data-selected][data-disabled]]:after:bg-disabled", "forced-colors:after:bg-[Highlight] forced-colors:has-[[data-selected][data-disabled]]:after:bg-[GrayText]", track[variant], controlSize$1[size], disabled ? "border-line" : invalid ? "border-danger" : "border-line-strong focus-within:border-ink", className)
+			className: cn("inline-grid max-w-full auto-cols-fr grid-flow-col p-0.5 text-ink", "transition-colors duration-(--duration-fast) ease-standard", indicator, indicatorBox, "after:bg-surface-inverse has-[[data-selected][data-disabled]]:after:bg-disabled", "forced-colors:after:bg-[Highlight] forced-colors:has-[[data-selected][data-disabled]]:after:bg-[GrayText]", track[variant], controlSize$1[size], disabled ? "border-line" : invalid ? "border-danger" : ["border-line-strong", controlLine(variant)], className)
 		})
 	});
 }
@@ -6857,7 +6880,7 @@ function Select(props) {
 			invalid,
 			disabled,
 			readOnly: false
-		}), !disabled && !invalid && "has-data-popup-open:border-ink", controlSize$1[size], className),
+		}), controlSize$1[size], className),
 		children: /* @__PURE__ */ jsxs(Select$1.Trigger, {
 			ref,
 			id,
@@ -7401,6 +7424,206 @@ function Slider(props) {
 	});
 }
 //#endregion
+//#region src/components/splash-screen/SplashScreen.tsx
+const progressTransition = "[transition:--ef-splash-progress_500ms_var(--ease-exit),--ef-splash-percent_500ms_var(--ease-exit)]";
+const leavingTransition = "[transition:--ef-splash-progress_500ms_var(--ease-exit),--ef-splash-percent_500ms_var(--ease-exit),opacity_1s_var(--ease-standard)_1.4s]";
+/** 三角标：三个朝下的小三角拼成一个倒三角 */
+function Mark() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 21",
+		"aria-hidden": "true",
+		className: cn(decor, "absolute -top-[calc(var(--ef-splash-unit)*2.5)] -left-[calc(var(--ef-splash-unit)*3.375)] h-[calc(var(--ef-splash-unit)*1.3125)] w-[calc(var(--ef-splash-unit)*1.4375)] fill-action cq-portrait:hidden"),
+		children: /* @__PURE__ */ jsx("path", { d: "M0 0h11.6L5.8 10zM12.4 0H24l-5.8 10zM6.2 11h11.6L12 21z" })
+	});
+}
+/**
+* 代码画的那组微标：带框的加号、微文字、两排方点。至少占官网那张图的高度（4 个单位）；
+* 微文字有字号的下限，多出来的往上长。竖排时上面紧挨着进度条的读数，放不下微文字
+*/
+function DefaultDecor({ caption }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-[calc(var(--ef-splash-unit)*4)] flex-col items-start justify-between gap-[calc(var(--ef-splash-unit)*0.5)] text-neutral-600",
+		children: [
+			/* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				fill: "none",
+				stroke: "currentColor",
+				className: "size-[calc(var(--ef-splash-unit)*1.125)]",
+				children: /* @__PURE__ */ jsx("path", { d: "M.5.5h11v11H.5zM6 3v6M3 6h6" })
+			}),
+			caption !== void 0 && /* @__PURE__ */ jsx("p", {
+				className: "font-latin text-[length:max(calc(var(--ef-splash-unit)*0.75),var(--text-micro))] leading-[1.2] font-medium tracking-label whitespace-pre-line text-ink-tertiary uppercase cq-portrait:hidden",
+				children: caption
+			}),
+			/* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 62 18",
+				fill: "currentColor",
+				className: "h-[calc(var(--ef-splash-unit)*1.125)] w-[calc(var(--ef-splash-unit)*3.875)]",
+				children: [0, 11].flatMap((y) => [
+					0,
+					11,
+					22,
+					33,
+					44,
+					55
+				].map((x) => /* @__PURE__ */ jsx("rect", {
+					x,
+					y,
+					width: "7",
+					height: "7"
+				}, `${x}-${y}`)))
+			})
+		]
+	});
+}
+/**
+* 开屏页：照官网首次载入的那一页排的。近黑底，一根贴边的黄色进度条，读数跟着条的末端走；
+* 画面偏右是标志，下面一组微标、一条分隔线和一行标语。就绪后黄色铺满整屏，再整层淡出。
+*
+* 标志和底图是插槽，库里不带任何图。横竖看它所在的那一块自己的宽高比，不看视口；
+* 尺寸跟着那一块的宽度等比缩放，插槽里的东西可以用 `--ef-splash-unit` 跟着缩。
+*
+* 只要一块盖住整页的等待、不要这些排场，用 `Loader`。
+*/
+function SplashScreen({ value, logo, tagline, caption, decor: decor$1, status = "LOADING", backdrop, open = true, fullscreen = true, label = "加载中", onReveal, onExited, onKeyDown, className, style, ref, ...props }) {
+	const [revealed, setRevealed] = useState(false);
+	if (open && revealed) setRevealed(false);
+	const handlers = useRef({ onReveal });
+	const fired = useRef(false);
+	useLayoutEffect(() => {
+		handlers.current = { onReveal };
+		if (open) fired.current = false;
+	});
+	const reveal = useCallback(() => {
+		if (fired.current) return;
+		fired.current = true;
+		setRevealed(true);
+		handlers.current.onReveal?.();
+	}, []);
+	const { ref: rootRef, mounted } = usePresence(open, { onExited: () => {
+		reveal();
+		onExited?.();
+	} });
+	const leaving = mounted && !open;
+	useLayoutEffect(() => {
+		const node = rootRef.current;
+		if (!leaving || !node) return;
+		const onStart = (event) => {
+			if (event.target === node && event.propertyName === "opacity") reveal();
+		};
+		node.addEventListener("transitionstart", onStart);
+		return () => node.removeEventListener("transitionstart", onStart);
+	}, [
+		leaving,
+		rootRef,
+		reveal
+	]);
+	const blocking = mounted && (open || !revealed);
+	useEffect(() => {
+		if (!fullscreen || !blocking) return;
+		const page = document.documentElement;
+		const previousOverflow = page.style.overflow;
+		const previousFocus = document.activeElement;
+		page.style.overflow = "hidden";
+		rootRef.current?.focus({ preventScroll: true });
+		return () => {
+			page.style.overflow = previousOverflow;
+			if (previousFocus instanceof HTMLElement && previousFocus.isConnected) previousFocus.focus({ preventScroll: true });
+		};
+	}, [
+		fullscreen,
+		blocking,
+		rootRef
+	]);
+	if (!mounted) return null;
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (fullscreen && blocking && event.key === "Tab") event.preventDefault();
+	};
+	const indeterminate = value === void 0;
+	const shown = open ? indeterminate ? 0 : Math.min(Math.max(value, 0), 100) : 100;
+	const travelling = indeterminate && open;
+	return /* @__PURE__ */ jsxs("div", {
+		tabIndex: -1,
+		...props,
+		ref: mergeRefs(rootRef, ref),
+		"data-theme": "dark",
+		"data-state": open ? "open" : "closing",
+		onKeyDown: handleKeyDown,
+		style: {
+			...style,
+			"--ef-splash-progress": shown,
+			"--ef-splash-percent": Math.round(shown)
+		},
+		className: cn("overflow-hidden bg-surface text-ink outline-none [container-type:size]", fullscreen ? "fixed inset-0 z-(--z-loader)" : "absolute inset-0", leaving ? leavingTransition : progressTransition, leaving && "opacity-0", !blocking && "pointer-events-none", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "absolute inset-0 [--_status:max(var(--ef-splash-unit),var(--text-xs))] [--_tagline:max(calc(var(--ef-splash-unit)*1.5),var(--text-xs))] [--ef-splash-unit:0.625cqw] cq-portrait:[--ef-splash-unit:1.4815cqw]",
+			children: [
+				backdrop !== void 0 && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: cn("pointer-events-none select-none forced-colors:hidden print:hidden", "absolute inset-0 blur-[calc((100_-_var(--ef-splash-progress))*0.08px)] *:size-full [&>img]:object-cover"),
+					children: backdrop
+				}),
+				logo !== void 0 && /* @__PURE__ */ jsx("div", {
+					className: "absolute top-[min(calc(var(--ef-splash-unit)*27.625),calc(100%_-_var(--ef-splash-unit)*44.25))] left-[64.4531%] flex h-[calc(var(--ef-splash-unit)*16.75)] w-[calc(var(--ef-splash-unit)*16.5)] items-center justify-center cq-portrait:top-[min(calc(var(--ef-splash-unit)*50),41.667%)] cq-portrait:left-1/2 cq-portrait:h-[calc(var(--ef-splash-unit)*20.9375)] cq-portrait:w-[calc(var(--ef-splash-unit)*19.3125)] cq-portrait:-translate-1/2 [&>:is(img,svg)]:size-full [&>img]:object-contain",
+					children: logo
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "absolute top-[min(calc(var(--ef-splash-unit)*63.375),calc(100%_-_var(--ef-splash-unit)*8.5))] right-[calc(var(--ef-splash-unit)*2)] left-[64.4531%] cq-portrait:top-auto cq-portrait:right-[calc(var(--ef-splash-unit)*4.625)] cq-portrait:bottom-[calc(var(--ef-splash-unit)*5.75)] cq-portrait:left-[calc(var(--ef-splash-unit)*4.625)]",
+					children: [
+						decor$1 === void 0 && /* @__PURE__ */ jsx(Mark, {}),
+						decor$1 !== null && /* @__PURE__ */ jsx("div", {
+							"aria-hidden": "true",
+							className: cn("pointer-events-none select-none forced-colors:hidden print:hidden", "absolute bottom-full left-0"),
+							children: decor$1 === void 0 ? /* @__PURE__ */ jsx(DefaultDecor, { caption }) : decor$1
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: cn(decor, "mt-[calc(var(--ef-splash-unit)*1.25)] mb-[calc(var(--ef-splash-unit))] -ml-[calc(var(--ef-splash-unit)*21.625)] block h-0.5 w-[calc(var(--ef-splash-unit)*70)] bg-linear-to-r from-transparent via-neutral-0/10 to-transparent")
+						}),
+						tagline !== void 0 && /* @__PURE__ */ jsx("p", {
+							className: "text-[length:var(--_tagline)] leading-[1.35] wrap-anywhere",
+							children: tagline
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					role: "progressbar",
+					"aria-label": label,
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": travelling ? void 0 : shown,
+					className: "absolute top-0 left-0 h-full w-[calc(var(--ef-splash-unit)*1.25)] forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[CanvasText] cq-portrait:top-auto cq-portrait:bottom-[calc(var(--ef-splash-unit)*17.75_+_(var(--_status)_-_var(--ef-splash-unit))*1.25_+_(var(--_tagline)_-_var(--ef-splash-unit)*1.5)*1.35)] cq-portrait:h-[calc(var(--ef-splash-unit)*2.5)] cq-portrait:w-[82.4074%]",
+					children: [travelling ? /* @__PURE__ */ jsx("span", {
+						className: "absolute inset-0 overflow-hidden",
+						children: /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-0 h-2/5 animate-indeterminate-y bg-action motion-reduce:translate-y-3/4 forced-colors:bg-[Highlight] cq-portrait:inset-x-auto cq-portrait:inset-y-0 cq-portrait:left-0 cq-portrait:h-auto cq-portrait:w-2/5 cq-portrait:animate-indeterminate cq-portrait:motion-reduce:translate-x-3/4 cq-portrait:motion-reduce:translate-y-0" })
+					}) : /* @__PURE__ */ jsx("span", { className: "absolute top-0 left-0 h-[calc(var(--ef-splash-progress)*1%)] w-full bg-action forced-colors:bg-[Highlight] cq-portrait:h-full cq-portrait:w-[calc(var(--ef-splash-progress)*1%)]" }), /* @__PURE__ */ jsxs("div", {
+						"aria-hidden": "true",
+						className: cn("absolute top-[calc(var(--ef-splash-progress)*1%)] left-[calc(var(--ef-splash-unit)*3.125)] h-0 whitespace-nowrap cq-portrait:top-auto cq-portrait:-bottom-[calc(var(--ef-splash-unit)*1.75)] cq-portrait:left-[calc(var(--ef-splash-progress)*1%)] cq-portrait:ml-[calc(var(--ef-splash-unit)*0.75)]", travelling && "translate-y-[calc(var(--ef-splash-unit)*3)] cq-portrait:translate-y-0"),
+						children: [!indeterminate && /* @__PURE__ */ jsxs("p", {
+							className: "absolute bottom-[calc(var(--ef-splash-unit)*1.625)] left-0 leading-none text-action",
+							children: [
+								/* @__PURE__ */ jsx("span", { className: "mb-[calc(var(--ef-splash-unit)*0.25)] block h-[calc(var(--ef-splash-unit)*1.875)] w-[calc(var(--ef-splash-unit)*0.5)] rounded-[calc(var(--ef-splash-unit)*0.25)] bg-action" }),
+								/* @__PURE__ */ jsx("span", { className: "text-[length:calc(var(--ef-splash-unit)*4.375)] font-medium tabular-nums [counter-reset:ef-splash_var(--ef-splash-percent)] before:content-[counter(ef-splash)]" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-[length:calc(var(--ef-splash-unit)*3.25)]",
+									children: "%"
+								})
+							]
+						}), /* @__PURE__ */ jsxs("p", {
+							className: "absolute -top-[calc(var(--ef-splash-unit)*0.5)] left-0 text-[length:var(--_status)] leading-[1.25] text-ink-tertiary",
+							children: [/* @__PURE__ */ jsx("span", { className: "block h-[calc(var(--ef-splash-unit)*0.5)] w-[calc(var(--ef-splash-unit)*1.25)] border-x-[length:calc(var(--ef-splash-unit)*0.5)] border-current" }), status]
+						})]
+					})]
+				})
+			]
+		}), leaving && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute inset-0 origin-left animate-fill bg-action [animation-delay:500ms] [animation-timing-function:cubic-bezier(1,0,0.7,1)] motion-reduce:hidden forced-colors:bg-[Highlight]"
+		})]
+	});
+}
+//#endregion
 //#region src/components/stat/Stat.tsx
 const valueSize = {
 	md: "text-4xl",
@@ -8501,7 +8724,7 @@ function TagInput({ value, defaultValue, onValueChange, name, max, validate, sep
 		return () => clearTimeout(timer);
 	}, [flash]);
 	const pendingFocus = useRef(null);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const target = pendingFocus.current;
 		if (target === null) return;
 		pendingFocus.current = null;
@@ -8991,7 +9214,7 @@ function ToastHost({ placement, label, closeLabel, children }) {
 				return /* @__PURE__ */ jsx(Toast.Root, {
 					toast,
 					"data-theme": "dark",
-					className: cn("pointer-events-auto absolute left-1/2 w-max max-w-full", "border border-line bg-black/80 text-base leading-[1.4] text-white", "transition-[opacity,translate,transform] duration-[var(--duration-fast),var(--duration-base),var(--duration-fast)] ease-[var(--ease-standard),var(--ease-exit),var(--ease-standard)]", "data-ending-style:opacity-0 data-starting-style:opacity-0", "data-swiping:select-none", focusRingInset, placementClass[placement].root),
+					className: cn("pointer-events-auto absolute left-1/2 w-max max-w-full", "bg-black/80 shadow-sm text-base leading-[1.4] text-white", "forced-colors:border forced-colors:border-[CanvasText]", "transition-[opacity,translate,transform] duration-[var(--duration-fast),var(--duration-base),var(--duration-fast)] ease-[var(--ease-standard),var(--ease-exit),var(--ease-standard)]", "data-ending-style:opacity-0 data-starting-style:opacity-0", "data-swiping:select-none", focusRingInset, placementClass[placement].root),
 					children: /* @__PURE__ */ jsxs(Toast.Content, {
 						className: cn("flex items-center gap-3 py-2.5 pl-5", toast.data?.dismissible ? "pr-2" : "pr-5"),
 						children: [
@@ -9623,4 +9846,4 @@ function useTheme() {
 /** 三条横线：打开菜单 */
 const Menu = createIcon("Menu", /* @__PURE__ */ jsx("path", { d: "M3 6h18M3 12h18M3 18h18" }));
 //#endregion
-export { Accordion, AccordionItem, Alert, ArrowCorner, ArrowLeft, ArrowRight, Avatar, AvatarSwitcher, AvatarSwitcherItem, BackToTop, Badge, BracketTitle, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, Calendar, CalendarIcon, Carousel, CarouselSlide, Check, Checkbox, ChevronDown, ChevronLeft, ChevronRight, Close, Combobox, CompletionBanner, ContextMenu, CornerBrackets, Countdown, Crosshair, DashIndicator, DataRow, DataRowList, DatePicker, DateRangePicker, Dialog, DialogClose, Drawer, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, EmptyState, Field, FileItem, FileUpload, FilterChip, FlyoutBar, FlyoutBarItem, GhostText, Hatch, HazardStripe, HoverCard, IconButton, ImageViewer, ImageViewerItem, Input, ItemGrid, ItemSlot, Kbd, List, ListRow, Loader, Lock, Marquee, MediaCard, Menu, Minus, NavAction, NavMenu, NavMenuItem, Navigator, OtpInput, PageHeader, PageHeaderBack, Pagination, Panel, PanelBody, PanelHeader, PanelRow, PanelRows, PlayButton, PlayMark, Plus, Popover, PopoverClose, Progress, ProgressRing, Radio, RadioGroup, RecIndicator, RegistrationStrip, ResourceChip, RollingNumber, Schedule, ScheduleItem, ScheduleTrack, ScrollArea, ScrollHint, SectionTitle, Segment, SegmentedControl, Select, SelectGroup, SelectItem, SelectSeparator, SideRail, SideRailGroup, SideRailItem, SideRailSub, SideRailSubItem, Skeleton, Slider, Sparkline, Spinner, Stat, StatusDanger, StatusInfo, StatusSuccess, StatusWarning, Step, Stepper, Steps, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableExpander, TableHead, TableHeaderCell, TableRow, Tabs, Tag, TagInput, TagPair, Term, Textarea, Texture, TickRing, Timeline, TimelineItem, ToastProvider, Toc, TocItem, Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, ToolbarToggle, ToolbarToggleGroup, Tooltip, TooltipProvider, TopBar, TriangleRight, Upload, Viewfinder, cn, createIcon, useControllableState, useFieldContext, useFieldControl, useInView, usePortalScope, useReducedMotion, useTheme, useToast };
+export { Accordion, AccordionItem, Alert, ArrowCorner, ArrowLeft, ArrowRight, Avatar, AvatarSwitcher, AvatarSwitcherItem, BackToTop, Badge, BracketTitle, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, Calendar, CalendarIcon, Carousel, CarouselSlide, Check, Checkbox, ChevronDown, ChevronLeft, ChevronRight, Close, Combobox, CompletionBanner, ContextMenu, CornerBrackets, Countdown, Crosshair, DashIndicator, DataRow, DataRowList, DatePicker, DateRangePicker, Dialog, DialogClose, Drawer, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, EmptyState, Field, FileItem, FileUpload, FilterChip, FlyoutBar, FlyoutBarItem, GhostText, Hatch, HazardStripe, HoverCard, IconButton, ImageViewer, ImageViewerItem, Input, ItemGrid, ItemSlot, Kbd, List, ListRow, Loader, Lock, Marquee, MediaCard, Menu, Minus, NavAction, NavMenu, NavMenuItem, Navigator, OtpInput, PageHeader, PageHeaderBack, Pagination, Panel, PanelBody, PanelHeader, PanelRow, PanelRows, PlayButton, PlayMark, Plus, Popover, PopoverClose, Progress, ProgressRing, Radio, RadioGroup, RecIndicator, RegistrationStrip, ResourceChip, RollingNumber, Schedule, ScheduleItem, ScheduleTrack, ScrollArea, ScrollHint, SectionTitle, Segment, SegmentedControl, Select, SelectGroup, SelectItem, SelectSeparator, SideRail, SideRailGroup, SideRailItem, SideRailSub, SideRailSubItem, Skeleton, Slider, Sparkline, Spinner, SplashScreen, Stat, StatusDanger, StatusInfo, StatusSuccess, StatusWarning, Step, Stepper, Steps, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableExpander, TableHead, TableHeaderCell, TableRow, Tabs, Tag, TagInput, TagPair, Term, Textarea, Texture, TickRing, Timeline, TimelineItem, ToastProvider, Toc, TocItem, Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, ToolbarToggle, ToolbarToggleGroup, Tooltip, TooltipProvider, TopBar, TriangleRight, Upload, Viewfinder, cn, createIcon, useControllableState, useFieldContext, useFieldControl, useInView, usePortalScope, useReducedMotion, useTheme, useToast };