@endfield-ui/react 1.1.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@endfield-ui/react",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "终末地风格的 React 基础控件库（非官方）",
   "keywords": [
     "react",
@@ -33,6 +33,7 @@
     "!src/**/*.test.*",
     "!src/test",
     "!src/game",
+    "!src/**/*.md",
     "NOTICE.md"
   ],
   "exports": {
@@ -62,31 +63,36 @@
     }
   },
   "dependencies": {
-    "@base-ui/react": "^1.8.0",
+    "@base-ui/react": "^1.9.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
-    "@tailwindcss/cli": "^4.3.3",
+    "@rollup/plugin-commonjs": "^29.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@tailwindcss/node": "^4.3.3",
+    "@tailwindcss/oxide": "^4.3.3",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
-    "@testing-library/user-event": "^14.6.7",
+    "@testing-library/user-event": "^14.6.8",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "jsdom": "^30.1.2",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
+    "jsdom": "^30.1.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "rollup": "^4.64.12",
     "tailwindcss": "^4.3.3",
-    "tsdown": "^0.23.0",
+    "tsdown": "^0.23.1",
     "typescript": "^7.0.2",
-    "vitest": "^5.0.3"
+    "vitest": "^5.0.5"
   },
   "scripts": {
     "build": "tsdown && pnpm build:css && pnpm build:game",
-    "build:css": "tailwindcss -i src/styles/index.css -o dist/styles.css --minify",
-    "build:game": "tailwindcss -i src/game/styles.css -o dist/game/styles.css --minify && node scripts/copy-game-assets.mjs",
+    "build:css": "node scripts/build-css.mjs src/styles/index.css dist/styles.css",
+    "build:game": "node scripts/build-css.mjs src/game/styles.css dist/game/styles.css && node scripts/copy-game-assets.mjs",
     "test": "vitest run",
+    "test:package": "node --test scripts/package.test.mjs",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   }

package/src/components/accordion/Accordion.tsx

@@ -1,6 +1,5 @@
 import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 import {
-  createContext,
   useContext,
   useMemo,
   type ComponentProps,
@@ -9,11 +8,12 @@ import {
 import { Minus } from "../../icons/Minus";
 import { cn } from "../../lib/cn";
 import { focusRingInset } from "../../lib/focus-ring";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type AccordionSize = "sm" | "md";
 export type AccordionLevel = 2 | 3 | 4 | 5 | 6;
 
-const AccordionContext = createContext<{
+const getAccordionContext = /* @__PURE__ */ createLazyContext<{
   size: AccordionSize;
   level: AccordionLevel;
 }>({ size: "md", level: 3 });
@@ -59,10 +59,11 @@ export function Accordion({
   children,
   ...props
 }: AccordionProps) {
+  const AccordionContext = getAccordionContext();
   const context = useMemo(() => ({ size, level }), [size, level]);
 
   return (
-    <AccordionContext value={context}>
+    <AccordionContext.Provider value={context}>
       <BaseAccordion.Root
         {...props}
         multiple={multiple}
@@ -78,7 +79,7 @@ export function Accordion({
       >
         {children}
       </BaseAccordion.Root>
-    </AccordionContext>
+    </AccordionContext.Provider>
   );
 }
 
@@ -112,7 +113,7 @@ export function AccordionItem({
   children,
   ...props
 }: AccordionItemProps) {
-  const { size, level } = useContext(AccordionContext);
+  const { size, level } = useContext(getAccordionContext());
   const Heading = `h${level}` as const;
 
   return (
@@ -124,6 +125,13 @@ export function AccordionItem({
     >
       <BaseAccordion.Header render={<Heading />} className="flex">
         <BaseAccordion.Trigger
+          render={(props, state) => (
+            <button
+              {...props}
+              disabled={false}
+              aria-disabled={state.disabled || undefined}
+            />
+          )}
           className={cn(
             "group/trigger flex w-full items-center gap-3 px-4 text-left font-medium",
             "transition-colors duration-(--duration-fast) ease-standard",

package/src/components/alert/Alert.tsx

@@ -126,7 +126,7 @@ export function Alert({
       // 正在收起的提示条点不到、Tab 不进去
       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",
+        "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",

package/src/components/avatar/AvatarSwitcher.tsx

@@ -1,6 +1,5 @@
 import {
   Children,
-  createContext,
   isValidElement,
   useContext,
   useEffect,
@@ -17,6 +16,7 @@ import { ChevronRight } from "../../icons/ChevronRight";
 import { cn } from "../../lib/cn";
 import { IconButton } from "../icon-button/IconButton";
 import { Avatar, type AvatarSize } from "./Avatar";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type AvatarSwitcherOrientation = "vertical" | "horizontal";
 
@@ -27,7 +27,8 @@ type SwitcherContextValue = {
   select: (value: string) => void;
 };
 
-const SwitcherContext = createContext<SwitcherContextValue | null>(null);
+const getSwitcherContext =
+  /* @__PURE__ */ createLazyContext<SwitcherContextValue | null>(null);
 
 export type AvatarSwitcherProps = Omit<
   ComponentProps<"div">,
@@ -74,6 +75,7 @@ export function AvatarSwitcher({
   children,
   ...props
 }: AvatarSwitcherProps) {
+  const SwitcherContext = getSwitcherContext();
   const generatedName = useId();
   const name = nameProp ?? generatedName;
   const vertical = orientation === "vertical";
@@ -138,7 +140,7 @@ export function AvatarSwitcher({
   const Next = vertical ? ChevronDown : ChevronRight;
 
   return (
-    <SwitcherContext value={context}>
+    <SwitcherContext.Provider value={context}>
       <div
         {...props}
         role="radiogroup"
@@ -185,7 +187,7 @@ export function AvatarSwitcher({
           <Next />
         </IconButton>
       </div>
-    </SwitcherContext>
+    </SwitcherContext.Provider>
   );
 }
 
@@ -213,7 +215,7 @@ export function AvatarSwitcherItem({
   children,
   ...props
 }: AvatarSwitcherItemProps) {
-  const context = useContext(SwitcherContext);
+  const context = useContext(getSwitcherContext());
   if (!context) {
     throw new Error("AvatarSwitcherItem 要放在 AvatarSwitcher 里面");
   }

package/src/components/carousel/Carousel.tsx

@@ -1,6 +1,5 @@
 import {
   Children,
-  createContext,
   isValidElement,
   useContext,
   type ComponentProps,
@@ -15,6 +14,7 @@ import { focusRing } from "../../lib/focus-ring";
 import { DashIndicator } from "../dash-indicator/DashIndicator";
 import { IconButton } from "../icon-button/IconButton";
 import { useSnapTrack } from "./snap-track";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type CarouselRatio = "16/9" | "4/3" | "1/1" | "3/4" | "21/9";
 
@@ -26,7 +26,7 @@ const ratioClass: Record<CarouselRatio, string> = {
   "21/9": "aspect-21/9",
 };
 
-const SlideContext = createContext<{
+const getSlideContext = /* @__PURE__ */ createLazyContext<{
   position: number;
   count: number;
   current: boolean;
@@ -73,6 +73,7 @@ export function Carousel({
   children,
   ...props
 }: CarouselProps) {
+  const SlideContext = getSlideContext();
   // 标题和说明从子元素上读，所以子元素必须直接是 CarouselSlide
   const slides = Children.toArray(children).filter((child) =>
     isValidElement<SlideLike>(child),
@@ -151,12 +152,12 @@ export function Carousel({
           )}
         >
           {slides.map((slide, position) => (
-            <SlideContext
+            <SlideContext.Provider
               key={position}
               value={{ position, count, current: position === index }}
             >
               {slide}
-            </SlideContext>
+            </SlideContext.Provider>
           ))}
         </div>
         {/* 压在媒体左下角的一对圆钮。它们在轨道外面：轨道滚的时候不跟着走 */}
@@ -228,7 +229,7 @@ export function CarouselSlide({
   children,
   ...props
 }: CarouselSlideProps) {
-  const slide = useContext(SlideContext);
+  const slide = useContext(getSlideContext());
   if (!slide) {
     throw new Error("CarouselSlide 要直接放在 Carousel 里面");
   }

package/src/components/context-menu/ContextMenu.tsx

@@ -3,7 +3,7 @@ import type { ReactElement, ReactNode } from "react";
 import { usePortalScope } from "../../hooks/usePortalScope";
 import { cn } from "../../lib/cn";
 import {
-  MenuVariantContext,
+  getMenuVariantContext,
   menuPanel,
   type MenuVariant,
 } from "../dropdown-menu/menu-style";
@@ -42,6 +42,7 @@ export function ContextMenu({
   disabled,
   className,
 }: ContextMenuProps) {
+  const MenuVariantContext = getMenuVariantContext();
   const { anchorRef, portalRef } = usePortalScope();
 
   return (
@@ -61,7 +62,9 @@ export function ContextMenu({
               className,
             )}
           >
-            <MenuVariantContext value={variant}>{menu}</MenuVariantContext>
+            <MenuVariantContext.Provider value={variant}>
+              {menu}
+            </MenuVariantContext.Provider>
           </BaseContextMenu.Popup>
         </BaseContextMenu.Positioner>
       </BaseContextMenu.Portal>

package/src/components/data-row/DataRow.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   type ComponentProps,
   type CSSProperties,
@@ -9,6 +8,7 @@ import { cn } from "../../lib/cn";
 import { focusRing } from "../../lib/focus-ring";
 import { bandCanvas, bandGap, bandRow } from "../list/band-style";
 import { Sparkline } from "../sparkline/Sparkline";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type DataRowColumns = {
   /** 名称那一列的列名 */
@@ -32,7 +32,10 @@ export type DataRowListProps = Omit<ComponentProps<"div">, "children"> & {
 
 type Layout = { trend: boolean; reference: boolean };
 
-const LayoutContext = createContext<Layout>({ trend: false, reference: false });
+const getLayoutContext = /* @__PURE__ */ createLazyContext<Layout>({
+  trend: false,
+  reference: false,
+});
 
 /*
  * 列的模板。容器变窄时先收起走势列（@lg 以下），再收起参考值列（@sm 以下）；
@@ -87,6 +90,7 @@ export function DataRowList({
   children,
   ...props
 }: DataRowListProps) {
+  const LayoutContext = getLayoutContext();
   const layout: Layout = {
     trend: columns.trend !== undefined,
     reference: columns.reference !== undefined,
@@ -121,7 +125,9 @@ export function DataRowList({
             </HeaderCell>
           )}
         </div>
-        <LayoutContext value={layout}>{children}</LayoutContext>
+        <LayoutContext.Provider value={layout}>
+          {children}
+        </LayoutContext.Provider>
       </div>
     </div>
   );
@@ -187,7 +193,7 @@ export function DataRow({
   style,
   ...props
 }: DataRowProps) {
-  const layout = useContext(LayoutContext);
+  const layout = useContext(getLayoutContext());
   const hasFavorite = favorite !== undefined || onFavoriteChange !== undefined;
   const dotClass = cn(favoriteDot, favorite ? favoriteOn : favoriteOff);
 

package/src/components/date-picker/DateField.tsx

@@ -23,7 +23,7 @@ import {
 export const dottedDate = (date: string) => date.replaceAll("-", ".");
 
 /** 面板底下那一行里的文字钮 */
-export const dateFooterButton = cn(
+export const dateFooterButton = /* @__PURE__ */ cn(
   "px-2 py-1 text-sm font-medium text-ink underline underline-offset-4 hover:text-ink-secondary",
   "disabled:cursor-not-allowed disabled:text-ink-disabled disabled:no-underline",
   focusRing,
@@ -91,8 +91,6 @@ export function DateField({
         data-invalid={invalid ? "" : undefined}
         className={cn(
           controlBox({ variant, invalid, disabled, readOnly: false }),
-          // 面板开着的时候边线保持聚焦的墨色
-          !disabled && !invalid && "has-data-popup-open:border-ink",
           controlSize[size],
           className,
         )}

package/src/components/dropdown-menu/DropdownMenu.tsx

@@ -13,7 +13,7 @@ import { defined } from "../../lib/defined";
 import type { LinkRender } from "../link-element/LinkElement";
 import { MenuCheck } from "./MenuCheck";
 import {
-  MenuVariantContext,
+  getMenuVariantContext,
   menuGroupLabel,
   menuItem,
   menuItemCurrent,
@@ -66,6 +66,7 @@ export function DropdownMenu({
   className,
   children,
 }: DropdownMenuProps) {
+  const MenuVariantContext = getMenuVariantContext();
   const { anchorRef, portalRef } = usePortalScope();
 
   return (
@@ -91,7 +92,9 @@ export function DropdownMenu({
               className,
             )}
           >
-            <MenuVariantContext value={variant}>{children}</MenuVariantContext>
+            <MenuVariantContext.Provider value={variant}>
+              {children}
+            </MenuVariantContext.Provider>
           </BaseMenu.Popup>
         </BaseMenu.Positioner>
       </BaseMenu.Portal>
@@ -296,7 +299,7 @@ export function DropdownMenuRadioItem({
   children,
   ...props
 }: DropdownMenuRadioItemProps) {
-  const variant = useContext(MenuVariantContext);
+  const variant = useContext(getMenuVariantContext());
 
   return (
     <BaseMenu.RadioItem
@@ -385,7 +388,7 @@ export function DropdownMenuSub({
   className,
   children,
 }: DropdownMenuSubProps) {
-  const variant = useContext(MenuVariantContext);
+  const variant = useContext(getMenuVariantContext());
   // 子面板也挂在 <body> 下：从这一行往上找，能找到主面板带着的主题
   const { anchorRef, portalRef } = usePortalScope();
 

package/src/components/dropdown-menu/menu-style.ts

@@ -1,6 +1,6 @@
-import { createContext } from "react";
 import { focusRingInset } from "../../lib/focus-ring";
 import { enterFromSide } from "../../lib/motion";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 /*
  * 下拉菜单与下拉选择共用的面板和选项。
@@ -11,11 +11,16 @@ import { enterFromSide } from "../../lib/motion";
 export type MenuVariant = "plain" | "strong";
 
 /** 选项要知道自己在哪种面板里，才知道"当前项"怎么画 */
-export const MenuVariantContext = createContext<MenuVariant>("plain");
+export const getMenuVariantContext =
+  /* @__PURE__ */ createLazyContext<MenuVariant>("plain");
 
 /**
  * 面板：直角、1px 线、环境阴影；顶部一条半宽的行动色细条，展开时从 0 伸到一半宽。
  *
+ * 细条上挂一个朝下的小三角，和它是同一个伪元素裁出来的：条高 3px，三角露出 8×4px，
+ * 中心距条的左端 32px（实机风格弹窗分隔条的一半大）。它是条上的记号，不指向触发处——
+ * 面板翻到上面、在侧边时照旧在顶上、朝下。三角探进第一行 2px，所以压在各行的底色之上
+ *
  * 进场：淡入（200ms），同时从触发处那一侧挪过来 4px（300ms，和细条同一拍）。
  * 退场只淡出——位移只写在起点上。两个时长、两条缓动按属性一一对应
  */
@@ -24,7 +29,8 @@ export 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(" ");

package/src/components/field/Field.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   useId,
   useMemo,
@@ -11,6 +10,7 @@ import { usePresence } from "../../hooks/usePresence";
 import { StatusDanger } from "../../icons/StatusDanger";
 import { cn } from "../../lib/cn";
 import { collapse, collapseEnter, collapseInner } from "../../lib/motion";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 type FieldContextValue = {
   /** 单个控件的 id；`group` 字段里有多个控件，不提供 */
@@ -23,11 +23,12 @@ type FieldContextValue = {
   group: boolean;
 };
 
-const FieldContext = createContext<FieldContextValue | null>(null);
+const getFieldContext =
+  /* @__PURE__ */ createLazyContext<FieldContextValue | null>(null);
 
 /** 给成组的控件（单选组）读取所在字段的状态。不在 `Field` 里时返回 `null`。 */
 export function useFieldContext(): FieldContextValue | null {
-  return useContext(FieldContext);
+  return useContext(getFieldContext());
 }
 
 type ControlProps = {
@@ -50,7 +51,7 @@ export function useFieldControl({
   invalid,
   "aria-describedby": describedBy,
 }: ControlProps) {
-  const field = useContext(FieldContext);
+  const field = useContext(getFieldContext());
   const mergedDescribedBy =
     [describedBy, field?.describedBy].filter(Boolean).join(" ") || undefined;
 
@@ -97,6 +98,7 @@ export function Field({
   children,
   ...props
 }: FieldProps) {
+  const FieldContext = getFieldContext();
   const baseId = useId();
   const id = controlId ?? `${baseId}-control`;
   const labelId = `${baseId}-label`;
@@ -212,7 +214,9 @@ export function Field({
         </legend>
         {/* 组里的控件默认竖排；要横排就自己包一层，作为这里唯一的子元素 */}
         <div className="flex flex-col items-start">
-          <FieldContext value={context}>{children}</FieldContext>
+          <FieldContext.Provider value={context}>
+            {children}
+          </FieldContext.Provider>
         </div>
         {messages}
       </fieldset>
@@ -228,7 +232,7 @@ export function Field({
       <label id={labelId} htmlFor={id} className={cn(labelClass, "mb-1.5")}>
         {labelContent}
       </label>
-      <FieldContext value={context}>{children}</FieldContext>
+      <FieldContext.Provider value={context}>{children}</FieldContext.Provider>
       {messages}
     </div>
   );

package/src/components/file-upload/FileUpload.tsx

@@ -1,5 +1,6 @@
 import {
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
   type ChangeEvent,
@@ -235,9 +236,11 @@ export function FileUpload({
     }
   }, [files, revision]);
 
-  // 移除之后焦点落到哪：等这一次渲染完
+  // 移除之后焦点落到哪：等这一次渲染落到页面上，当场交出去。
+  // 不用 useEffect：它晚一拍，上一次渲染留下的那一份可能在这次移除之后才补跑——
+  // 看到的还是移除之前的页面，焦点留在马上要收起的那一行上，随后掉到 body
   const pendingFocus = useRef<number | null>(null);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const index = pendingFocus.current;
     if (index === null) return;
     pendingFocus.current = null;

package/src/components/flyout-bar/FlyoutBar.tsx

@@ -101,7 +101,7 @@ type ItemOwnProps = {
 export type FlyoutBarItemProps = ItemOwnProps &
   Omit<ComponentProps<"div">, keyof ItemOwnProps | "id" | "style">;
 
-const itemClass = cn(
+const itemClass = /* @__PURE__ */ cn(
   "flex min-w-10 cursor-default items-center justify-center gap-2 px-2.5 text-sm select-none",
   "transition-colors duration-(--duration-fast) ease-standard",
   "data-disabled:text-ink-disabled data-highlighted:text-ink",

package/src/components/image-viewer/ImageViewer.tsx

@@ -1,7 +1,6 @@
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import {
   Children,
-  createContext,
   isValidElement,
   useContext,
   useRef,
@@ -22,6 +21,7 @@ import { useSnapTrack } from "../carousel/snap-track";
 import { overlayClose, overlayHeader } from "../dialog/overlay-style";
 import { IconButton } from "../icon-button/IconButton";
 import { Viewfinder } from "../viewfinder/Viewfinder";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type ImageViewerRatio = "16/9" | "4/3" | "1/1" | "3/4";
 
@@ -38,7 +38,7 @@ type ItemLike = {
   children?: ReactNode;
 };
 
-const ItemContext = createContext<{
+const getItemContext = /* @__PURE__ */ createLazyContext<{
   position: number;
   count: number;
   ratio: ImageViewerRatio;
@@ -93,6 +93,7 @@ export function ImageViewer({
   children,
   ...props
 }: ImageViewerProps) {
+  const ItemContext = getItemContext();
   // 标题、说明和大图都从子元素上读，所以子元素必须直接是 ImageViewerItem
   const items = Children.toArray(children).filter((child) =>
     isValidElement<ItemLike>(child),
@@ -133,7 +134,7 @@ export function ImageViewer({
         )}
       >
         {items.map((item, position) => (
-          <ItemContext
+          <ItemContext.Provider
             key={position}
             value={{
               position,
@@ -145,7 +146,7 @@ export function ImageViewer({
             }}
           >
             {item}
-          </ItemContext>
+          </ItemContext.Provider>
         ))}
       </ul>
       <BaseDialog.Root open={open} onOpenChange={(next) => setOpen(next)}>
@@ -427,7 +428,7 @@ export function ImageViewerItem({
   children,
   ...props
 }: ImageViewerItemProps) {
-  const item = useContext(ItemContext);
+  const item = useContext(getItemContext());
   if (!item) {
     throw new Error("ImageViewerItem 要直接放在 ImageViewer 里面");
   }

package/src/components/input/control-box.ts

@@ -5,7 +5,7 @@ import { focusRingWithin } from "../../lib/focus-ring";
  * 输入框与多行文本共用的外框，直角，两种画法：
  * - `sunken` 凹陷的底 + 一条 2px 的底边线，默认；
  * - `outline` 四边 1px 的描边 + 页面底色，放在凹陷底色的区域里时用。
- * 状态都靠边线的颜色变化：默认灰 → 悬停深一档 → 聚焦墨 → 错误红。
+ * 状态靠边线说：默认灰 → 悬停深一档 → 错误红；聚焦另画一条墨线。
  */
 
 export type ControlVariant = "sunken" | "outline";
@@ -41,11 +41,29 @@ const fill: Record<ControlVariant, string> = {
   outline: "bg-surface",
 };
 
-/**
- * 只读时留着占位的那条透明边线，高对比模式下写成页面色：系统会把透明的边线也换成字色
- * 显出来，而底色本来就都没了——只读的就和能填的一个样。输入框和验证码输入共用
- */
-export const readOnlyFrame = "forced-colors:border-[Canvas]";
+/* 画在 `::before` 上：分段选择的 `::after` 是选中的那块底 */
+const lineFrame: Record<ControlVariant, string> = {
+  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: Record<ControlVariant, string> = {
+  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)]",
+};
+
+/* 擦出 300ms、收回 200ms */
+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` 的外框上用 */
+export function controlLine(variant: ControlVariant = "sunken") {
+  return cn(lineFrame[variant], lineOpen[variant], lineMotion);
+}
 
 export function controlBox({
   variant = "sunken",
@@ -54,7 +72,7 @@ export function controlBox({
   readOnly,
 }: BoxState) {
   return cn(
-    "flex w-full min-w-0 text-ink",
+    "relative flex w-full min-w-0 text-ink",
     frame[variant],
     "transition-colors duration-(--duration-fast) ease-standard",
     focusRingWithin,
@@ -62,15 +80,17 @@ export function controlBox({
       ? // 只读：没有边线、底变透明。边线留透明的，尺寸不跳
         "border-transparent bg-transparent"
       : fill[variant],
-    // 只在透明的那条线真的作数时：禁用、错误各有自己的边线颜色，排在后面盖掉它
-    readOnly && !disabled && !invalid && readOnlyFrame,
+    // 高对比模式下系统会把透明的边线也换成字色显出来，而底色本来就都没了：
+    // 只读的写成页面色，不然和能填的一个样
+    readOnly && !disabled && !invalid && "forced-colors:border-[Canvas]",
     disabled
       ? "cursor-not-allowed border-line text-ink-disabled"
       : invalid
         ? "border-danger"
         : !readOnly &&
           // 悬停只在没聚焦时生效：生成的 CSS 里 hover 排在 focus-within 之后，会盖掉聚焦的墨色
-          "border-line-strong hover:not-focus-within:border-ink-secondary focus-within:border-ink",
+          "border-line-strong hover:not-focus-within:border-ink-secondary",
+    !disabled && !invalid && !readOnly && controlLine(variant),
   );
 }