@endfield-ui/react 0.3.0 → 1.0.1

package/src/components/page-header/PageHeader.tsx

@@ -26,10 +26,23 @@ export type PageHeaderProps = Omit<ComponentProps<"header">, "title"> & {
    * 上面还有吸顶的顶栏时用 `className` 改 `top`
    */
   sticky?: boolean;
+  /** 挂上时播放一次入场：微文字行 → 标题 → 说明。默认开启；`sticky` 时不播 */
+  animate?: boolean;
   /** 标题下面的一行：页签、几个统计块 */
   children?: ReactNode;
 };
 
+/*
+ * 入场的三拍：各自从左 8px 淡入归位，依次晚 100ms。
+ * 挂上就播（纯 CSS）：页头在页面最上面，不用等它进视口
+ */
+const enter = "animate-shift-in [--shift-x:calc(var(--motion-shift-lg)*-1)]";
+const enterStep = [
+  enter,
+  `${enter} [animation-delay:100ms]`,
+  `${enter} [animation-delay:200ms]`,
+] as const;
+
 /**
  * 页头：这是哪一页、怎么回去、在这一页能做什么。一页一个。
  * 按自身的宽度响应：行动区放不下时折到标题下面。
@@ -44,11 +57,15 @@ export function PageHeader({
   actions,
   divider = false,
   sticky = false,
+  animate = true,
   className,
   children,
   ...props
 }: PageHeaderProps) {
   const Heading = `h${level}` as const;
+  // 入场只动这三行字：面包屑、返回、行动区是能点的，位置在动的东西不好点
+  const reveal = animate && !sticky;
+  const first = meta ? 1 : 0;
 
   return (
     <header
@@ -64,7 +81,16 @@ export function PageHeader({
     >
       {breadcrumb}
       <div className="flex flex-col gap-1">
-        {meta && <p className="font-tech text-xs text-ink-secondary">{meta}</p>}
+        {meta && (
+          <p
+            className={cn(
+              "font-tech text-xs text-ink-secondary",
+              reveal && enterStep[0],
+            )}
+          >
+            {meta}
+          </p>
+        )}
         <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-4">
           {/* 标题这一组至少留 16rem：行动区挤不进来就整块折下去，而不是把标题挤成一个字一行 */}
           <div className="flex min-w-0 flex-1 basis-64 items-start gap-4">
@@ -78,11 +104,21 @@ export function PageHeader({
               </div>
             )}
             <div className="flex min-w-0 flex-col gap-1">
-              <Heading className="min-w-0 text-2xl leading-10 font-bold wrap-anywhere @md:text-3xl @md:leading-12">
+              <Heading
+                className={cn(
+                  "min-w-0 text-2xl leading-10 font-bold wrap-anywhere @md:text-3xl @md:leading-12",
+                  reveal && enterStep[first],
+                )}
+              >
                 {title}
               </Heading>
               {description && (
-                <p className="max-w-prose text-sm text-ink-secondary">
+                <p
+                  className={cn(
+                    "max-w-prose text-sm text-ink-secondary",
+                    reveal && enterStep[first + 1],
+                  )}
+                >
                   {description}
                 </p>
               )}

package/src/components/pagination/Pagination.tsx

@@ -116,6 +116,8 @@ export function Pagination({
       data-size={size}
       className={cn(
         "@container hatch flex items-center justify-between gap-2 bg-surface-muted px-1 text-ink",
+        // 高对比模式下条底和斜纹都不画，看不出这是一整条：补一圈线，画在内边距里，不占地方
+        "forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[ButtonText]",
         barSize[size],
         className,
       )}

package/src/components/progress/Progress.tsx

@@ -29,7 +29,14 @@ const trackSize: Record<ProgressSize, string> = {
  * 填充是纯色，不描边：亮色界面上一圈墨色的框显得重。
  * 亮色下它对浅灰轨道只有 1.3:1，确切数值靠 showValue 或旁边的文字给出。
  */
-const fillClass = "bg-action";
+const fillClass = "bg-action forced-colors:bg-[Highlight]";
+
+/*
+ * 高对比模式下底色都被系统换掉，轨道和填充就一起没了：轨道剩一圈 1px 的线（空心），
+ * 填充是系统"选中"色的实心条——空心对实心，不靠两种系统色分得开
+ */
+const trackClass =
+  "bg-line forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[CanvasText]";
 
 /**
  * 进度：灰轨 + 黄填充。表示"完成了多少"；表示"数量有多少"用图表，那是蓝色的事。
@@ -63,7 +70,7 @@ export function Progress({
           <span
             key={index}
             data-done={index < done ? "" : undefined}
-            className={cn("flex-1", index < done ? fillClass : "bg-line")}
+            className={cn("flex-1", index < done ? fillClass : trackClass)}
           />
         ))}
       </span>
@@ -117,7 +124,7 @@ export function Progress({
         className={cn(
           "relative min-w-0 flex-1",
           trackSize[size],
-          !segmented && "bg-line",
+          !segmented && trackClass,
         )}
       >
         {bar}

package/src/components/progress/ProgressRing.tsx

@@ -16,6 +16,15 @@ export type ProgressRingProps = Omit<ComponentProps<"div">, "children"> & {
   children?: ReactNode;
 };
 
+/*
+ * 高对比模式：SVG 上写的颜色系统不换，轨道和弧还是主题里的浅灰和黄，
+ * 压在使用者自己定的页面色上可能看不清。轨道收成一圈 1px 的细线，
+ * 弧是系统"选中"色、照旧是原来的线宽——细对粗，不靠两种系统色分得开
+ */
+const trackClass =
+  "stroke-line forced-colors:stroke-[CanvasText] forced-colors:stroke-1";
+const arcClass = "stroke-action forced-colors:stroke-[Highlight]";
+
 /**
  * 进度环：细圆环轨道 + 从 12 点方向顺时针的黄弧。用在紧凑的位置，或者围住一个头像、图标。
  * 取色与 `Progress` 相同；需要名称时传 `aria-label`。
@@ -53,13 +62,16 @@ export function ProgressRing({
       <>
         <circle
           {...circle}
-          className="origin-center animate-spin stroke-action motion-reduce:hidden"
+          className={cn(
+            "origin-center animate-spin motion-reduce:hidden",
+            arcClass,
+          )}
           strokeDasharray={`${circumference / 4} ${circumference}`}
         />
         {/* 减少动态效果时换成一圈虚线：静止的一段弧会被看成"进度 25%" */}
         <circle
           {...circle}
-          className="hidden stroke-action motion-reduce:block"
+          className={cn("hidden motion-reduce:block", arcClass)}
           strokeDasharray={`${stroke} ${stroke * 2}`}
         />
       </>
@@ -68,7 +80,10 @@ export function ProgressRing({
     arc = (
       <circle
         {...circle}
-        className="stroke-action transition-[stroke-dashoffset] duration-(--duration-base) ease-standard"
+        className={cn(
+          "transition-[stroke-dashoffset] duration-(--duration-base) ease-standard",
+          arcClass,
+        )}
         strokeDasharray={circumference}
         strokeDashoffset={circumference * (1 - ratio)}
       />
@@ -114,7 +129,7 @@ export function ProgressRing({
         aria-hidden="true"
         className="absolute inset-0 -rotate-90"
       >
-        <circle {...circle} className="stroke-line" />
+        <circle {...circle} className={trackClass} />
         {arc}
       </svg>
       {center}

package/src/components/radio/Radio.tsx

@@ -172,6 +172,8 @@ export function Radio({
             className={cn(
               choiceMark,
               "size-2 rounded-full bg-accent-ink-inverse peer-checked:opacity-100 peer-disabled:bg-ink-disabled choice-diamond:hidden",
+              // 高对比模式：圆点也是底色画的，换成"选中"色上面的字色
+              "forced-colors:bg-[HighlightText] forced-colors:peer-disabled:bg-[GrayText]",
             )}
           />
         </span>

package/src/components/rolling-number/RollingNumber.tsx

@@ -0,0 +1,125 @@
+import {
+  useEffect,
+  useState,
+  useSyncExternalStore,
+  type ComponentProps,
+} from "react";
+import { useInView } from "../../hooks/useInView";
+import { useReducedMotion } from "../../hooks/useReducedMotion";
+import { cn } from "../../lib/cn";
+import { mergeRefs } from "../../lib/merge-refs";
+
+export type RollingNumberProps = Omit<ComponentProps<"span">, "children"> & {
+  /** 终值 */
+  value: number;
+  /**
+   * 把数值写成字。默认带千分位（`1,280`），小数位数跟着 `value`。
+   * 滚的过程中每一帧都会调它
+   */
+  format?: (value: number) => string;
+  /** 进入视口时从 0 滚到终值，一次。默认开启 */
+  animate?: boolean;
+};
+
+/* 入场的时长：开播时读 `--duration-slower`，读不到就用它的默认值 */
+const FALLBACK_DURATION = 600;
+
+function readDuration(node: Element | null): number {
+  if (!node) return FALLBACK_DURATION;
+  const raw = getComputedStyle(node).getPropertyValue("--duration-slower");
+  const amount = Number.parseFloat(raw);
+  if (!Number.isFinite(amount) || amount <= 0) return FALLBACK_DURATION;
+  return raw.trim().endsWith("ms") ? amount : amount * 1000;
+}
+
+/** 减速：先快后慢，停得住。和 `ease-exit` 是一类，不带过冲 */
+const decelerate = (progress: number) => 1 - (1 - progress) ** 3;
+
+function fractionDigits(value: number): number {
+  const fraction = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 20,
+    useGrouping: false,
+  })
+    .format(value)
+    .split(".")[1];
+  return fraction ? fraction.length : 0;
+}
+
+const never = () => () => {};
+
+/**
+ * 滚动数字：进入视口时从 0 滚到终值，只滚一次。放进 `Stat` 的 `value` 里，
+ * 或者任何"一个需要被一眼看到的数字"的地方。等宽数字由所在处给（`tabular-nums`）。
+ *
+ * - 读屏只读终值：终值一直在，滚的时候只是看不见；滚动的那一份对读屏隐藏。
+ * - 宽度由终值占着，滚的时候旁边的东西不动。
+ * - 服务端渲染出来的、打印出来的、"减少动态效果"下的，都直接是终值。
+ * - 值后来变了直接换，不再滚。
+ */
+export function RollingNumber({
+  value,
+  format,
+  animate = true,
+  className,
+  ref,
+  ...props
+}: RollingNumberProps) {
+  const digits = fractionDigits(value);
+  const write =
+    format ??
+    ((amount: number) =>
+      amount.toLocaleString("en-US", {
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits,
+      }));
+
+  // 服务端和注水的那一遍是 false：先把终值画出来，脚本到了才从头滚
+  const mounted = useSyncExternalStore(
+    never,
+    () => true,
+    () => false,
+  );
+  const reduced = useReducedMotion();
+  const [done, setDone] = useState(false);
+  const [shown, setShown] = useState(0);
+  const rolling = mounted && animate && !reduced && !done;
+  const [inViewRef, inView] = useInView<HTMLSpanElement>({
+    disabled: !rolling,
+  });
+
+  useEffect(() => {
+    if (!rolling || !inView) return;
+    const duration = readDuration(inViewRef.current);
+    let started: number | undefined;
+    let frame = requestAnimationFrame(function tick(now) {
+      started ??= now;
+      const progress = Math.min((now - started) / duration, 1);
+      if (progress >= 1) {
+        setDone(true);
+        return;
+      }
+      setShown(Number((value * decelerate(progress)).toFixed(digits)));
+      frame = requestAnimationFrame(tick);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [rolling, inView, inViewRef, value, digits]);
+
+  return (
+    <span
+      {...props}
+      ref={mergeRefs(inViewRef, ref)}
+      data-rolling={rolling ? "" : undefined}
+      className={cn(rolling && "relative inline-block", className)}
+    >
+      {/* 终值一直在：占着宽度，读屏读的也是它。打印的时候不管滚没滚完都是它 */}
+      <span className={rolling ? "opacity-0 print:opacity-100" : undefined}>
+        {write(value)}
+      </span>
+      {rolling && (
+        <span aria-hidden="true" className="absolute inset-0 print:hidden">
+          {write(shown)}
+        </span>
+      )}
+    </span>
+  );
+}

package/src/components/rolling-number/index.ts

@@ -0,0 +1 @@
+export { RollingNumber, type RollingNumberProps } from "./RollingNumber";

package/src/components/schedule/Schedule.tsx

@@ -242,8 +242,8 @@ export function Schedule({
             <div
               aria-hidden="true"
               className={cn(
-                decor,
-                "absolute inset-y-0 right-0 z-2",
+                // 不用 decor：它在高对比模式下整个去掉，而"今天在哪"是信息
+                "pointer-events-none absolute inset-y-0 right-0 z-2 select-none print:hidden",
                 AFTER_RAIL,
                 dayColumns,
               )}
@@ -251,7 +251,7 @@ export function Schedule({
               <span
                 data-today=""
                 style={{ gridColumn: todayColumn }}
-                className="row-start-1 border-l-2 border-accent-ink"
+                className="row-start-1 border-l-2 border-accent-ink forced-colors:border-[Highlight]"
               />
             </div>
           )}
@@ -412,6 +412,8 @@ export function ScheduleItem({
         // 条目自己是一个容器：窄到放不下类型标签时把它收掉
         "@container relative isolate flex min-w-0 overflow-clip text-sm",
         "has-focus-visible:outline-2 has-focus-visible:-outline-offset-2 has-focus-visible:outline-focus",
+        // 高对比模式下底色都被系统换掉，没垫图的条目就只剩名称，看不出从哪天到哪天：补一圈线
+        "forced-colors:border forced-colors:border-[CanvasText]",
         banner
           ? "items-start justify-between gap-2 bg-surface-muted p-2"
           : // 系统类条目在两个主题下都是炭灰底：control 系列本来就不随主题变

package/src/components/segmented-control/SegmentedControl.tsx

@@ -7,7 +7,10 @@ import {
   type ReactNode,
 } from "react";
 import { useControllableState } from "../../hooks/useControllableState";
+import { useIndicator } from "../../hooks/useIndicator";
 import { cn } from "../../lib/cn";
+import { mergeRefs } from "../../lib/merge-refs";
+import { indicator, indicatorBox } from "../../lib/motion";
 import { useFieldContext } from "../field/Field";
 import {
   controlSize,
@@ -78,9 +81,12 @@ export function SegmentedControl({
   required: requiredProp,
   invalid: invalidProp,
   className,
+  ref,
   ...props
 }: SegmentedControlProps) {
   const field = useFieldContext();
+  // 选中的那块底画在轨道上：换一段时是同一块滑过去
+  const trackRef = useIndicator<HTMLDivElement>("[data-selected]");
   const autoName = useId();
   const [current, setCurrent] = useControllableState<string | undefined>({
     value,
@@ -119,12 +125,19 @@ export function SegmentedControl({
         aria-required={required || undefined}
         aria-disabled={disabled || undefined}
         {...props}
+        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",
+          // 高对比模式下底色都被系统换掉，墨块就没了：改用系统的"选中"色（禁用的是灰字色）。
+          // 压在它上面的那一段自己写明字色，见 Segment
+          "forced-colors:after:bg-[Highlight] forced-colors:has-[[data-selected][data-disabled]]:after:bg-[GrayText]",
           track[variant],
           controlSize[size],
           // 和输入框一样靠边线说状态
@@ -190,11 +203,19 @@ export function Segment({
         disabled ? "cursor-not-allowed" : "cursor-pointer",
         // 选中不加粗：加粗会让这一段变宽，整条跟着跳。靠的是填充反转
         checked
-          ? disabled
-            ? "bg-disabled text-on-disabled"
-            : "bg-surface-inverse text-ink-inverse"
+          ? [
+              disabled
+                ? "bg-disabled text-on-disabled forced-colors:bg-[GrayText] forced-colors:text-[Canvas]"
+                : "bg-surface-inverse text-ink-inverse forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+              // 轨道量到了位置，底就由轨道上滑动的那一块来画
+              "in-data-indicator:bg-transparent forced-colors:in-data-indicator:bg-transparent",
+              // 高对比模式：这一段的颜色全由上面的系统色说了算，不让系统再改——
+              // 不然它会在字后面垫一块页面色，把"选中"色盖掉。焦点环跟着写明
+              "forced-colors:forced-color-adjust-none forced-colors:has-focus-visible:outline-[Highlight]",
+            ]
           : disabled
-            ? "text-ink-disabled"
+            ? // 高对比模式下 <label> 的字色一律被换成页面的字色：禁用的写明灰字色
+              "text-ink-disabled forced-colors:text-[GrayText]"
             : "text-ink-secondary hover:bg-ink/5 hover:text-ink",
         className,
       )}

package/src/components/skeleton/Skeleton.tsx

@@ -16,7 +16,10 @@ export type SkeletonProps = Omit<ComponentProps<"span">, "children"> & {
   pulse?: boolean;
 };
 
-const fill = "block bg-surface-muted";
+// 高对比模式下底色被系统换掉，色块就没了：剩一圈 1px 的灰字色轮廓——
+// 和输入框的占位字一个颜色，说的是"这里的内容还没到"
+const fill =
+  "block bg-surface-muted forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[GrayText]";
 
 /**
  * 骨架：只画大块，不画细节。

package/src/components/slider/Slider.tsx

@@ -89,9 +89,21 @@ const thumb = [
   // 菱形方案：滑块是一个 14px 的菱形，按住时中间亮一个小方块
   "choice-diamond:size-3.5 choice-diamond:rotate-45 choice-diamond:after:inset-1 choice-diamond:after:w-auto choice-diamond:after:translate-x-0",
   "data-disabled:bg-ink-disabled",
+  // 高对比模式下底色都被系统换掉，滑块就没了：它是控件自己的一块，用按钮的字色
+  "forced-colors:bg-[ButtonText] forced-colors:data-disabled:bg-[GrayText]",
   focusRingWithin,
 ].join(" ");
 
+/*
+ * 高对比模式：轨道、走过的一段、滑块都是底色画的，整个控件会不见。
+ * 轨道剩一圈 1px 的线（空心），走过的一段是系统"选中"色的实心条——
+ * 空心对实心，不靠两种系统色分得开。禁用时都是灰字色
+ */
+const trackForced =
+  "forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[ButtonText] forced-colors:data-disabled:outline-[GrayText]";
+const indicatorForced =
+  "forced-colors:bg-[Highlight] forced-colors:data-disabled:bg-[GrayText]";
+
 /**
  * 滑块：在一个范围里拖着选一个数。要的是确切的数时用 `Stepper`。
  * 每个滑块都要有名称：放进 `Field`，或者自己传 `aria-label`。
@@ -167,9 +179,14 @@ export function Slider(props: SliderProps) {
             controlSize[size],
           )}
         >
-          <BaseSlider.Track className="h-1 w-full bg-line">
+          <BaseSlider.Track className={cn("h-1 w-full bg-line", trackForced)}>
             {/* 走过的一段跟着滑块头走：范围滑块两头都会动 */}
-            <BaseSlider.Indicator className="bg-ink transition-[inset-inline-start,width] duration-(--duration-fast) ease-standard data-disabled:bg-ink-disabled data-dragging:transition-none" />
+            <BaseSlider.Indicator
+              className={cn(
+                "bg-ink transition-[inset-inline-start,width] duration-(--duration-fast) ease-standard data-disabled:bg-ink-disabled data-dragging:transition-none",
+                indicatorForced,
+              )}
+            />
             {(range ? [0, 1] : [0]).map((index) => (
               <BaseSlider.Thumb
                 key={index}
@@ -191,7 +208,7 @@ export function Slider(props: SliderProps) {
                 key={mark.value}
                 style={{ left: markLeft((mark.value - min) / (max - min)) }}
                 className={cn(
-                  "absolute top-0 flex flex-col gap-0.5 whitespace-nowrap text-ink-secondary before:h-1.5 before:w-px before:bg-line-strong before:content-['']",
+                  "absolute top-0 flex flex-col gap-0.5 whitespace-nowrap text-ink-secondary before:h-1.5 before:w-px before:bg-line-strong before:content-[''] forced-colors:before:bg-[ButtonText]",
                   // 两端的标注朝里排，不伸到控件外面去；短线仍然对着滑块的中心
                   mark.value <= min
                     ? "items-start"
@@ -211,7 +228,7 @@ export function Slider(props: SliderProps) {
         <BaseSlider.Value
           style={{ minWidth: valueWidth }}
           className={cn(
-            "flex shrink-0 items-center justify-end font-tech text-sm font-bold tabular-nums data-disabled:text-ink-disabled",
+            "flex shrink-0 items-center justify-end font-tech text-sm font-bold tabular-nums data-disabled:text-ink-disabled forced-colors:data-disabled:text-[GrayText]",
             controlSize[size],
           )}
         >

package/src/components/sparkline/Sparkline.tsx

@@ -1,5 +1,7 @@
 import type { ComponentProps } from "react";
+import { useInView } from "../../hooks/useInView";
 import { cn } from "../../lib/cn";
+import { mergeRefs } from "../../lib/merge-refs";
 
 export type SparklineVariant = "area" | "line";
 export type SparklineTone = "info" | "danger" | "accent" | "neutral";
@@ -22,6 +24,8 @@ export type SparklineProps = Omit<ComponentProps<"svg">, "children"> & {
   max?: number;
   /** 传了它就是一张有名称的图；不传是纯装饰，对读屏隐藏 */
   label?: string;
+  /** 进入视口时从左画出一次。默认开启 */
+  animate?: boolean;
 };
 
 /* 画在一个 100 × 100 的格子里，再由 SVG 拉伸到实际的盒子 */
@@ -58,7 +62,13 @@ export function sparklinePath(
   return { line, area: `${line}L${SIZE} ${SIZE}L0 ${SIZE}Z` };
 }
 
-/* data 与 alert 是不随主题变的角色色：白底和深色行带上都认得出 */
+/*
+ * data 与 alert 是不随主题变的角色色：白底和深色行带上都认得出。
+ * 高对比模式：SVG 上写的颜色系统不换，压在使用者自己定的页面色上可能看不清——
+ * 四种色调都换成页面的字色（色调说的事本来就要靠旁边的数字）
+ */
+const areaForced = "forced-colors:fill-[CanvasText]";
+const lineForced = "forced-colors:stroke-[CanvasText]";
 const areaClass: Record<SparklineTone, string> = {
   info: "fill-data/75",
   danger: "fill-alert/75",
@@ -84,10 +94,16 @@ export function Sparkline({
   min,
   max,
   label,
+  animate = true,
   className,
+  ref,
   ...props
 }: SparklineProps) {
   const path = sparklinePath(data, { min, max });
+  const [inViewRef, inView] = useInView<SVGSVGElement>({ disabled: !animate });
+  // 入场：整张图从左擦出来，面积和折线是同一个写法。一屏里的几张各看各的视口，同时到的一起画
+  const pending = animate && !inView;
+  const playing = animate && inView;
 
   return (
     <svg
@@ -100,12 +116,20 @@ export function Sparkline({
       data-variant={variant}
       data-tone={tone}
       {...props}
-      // 折线贴着上下边缘时，线宽的一半会落在盒子外面
-      className={cn("block h-8 w-full overflow-visible", className)}
+      ref={mergeRefs(inViewRef, ref)}
+      className={cn(
+        // 折线贴着上下边缘时，线宽的一半会落在盒子外面
+        "block h-8 w-full overflow-visible",
+        pending && "[clip-path:inset(0_100%_0_0)]",
+        // 擦的时候把盒子外面那一圈也留出来（线宽的一半，尖角还要多一点）
+        playing &&
+          "animate-wipe-in [animation-duration:var(--duration-slower)] [--wipe-bleed:4px]",
+        className,
+      )}
     >
       {path &&
         (variant === "area" ? (
-          <path d={path.area} className={areaClass[tone]} />
+          <path d={path.area} className={cn(areaClass[tone], areaForced)} />
         ) : (
           <path
             d={path.line}
@@ -114,7 +138,7 @@ export function Sparkline({
             strokeLinejoin="miter"
             // 图被横向拉伸了，线宽不跟着变
             vectorEffect="non-scaling-stroke"
-            className={lineClass[tone]}
+            className={cn(lineClass[tone], lineForced)}
           />
         ))}
     </svg>

package/src/components/spinner/Spinner.tsx

@@ -19,8 +19,12 @@ const sizeClass: Record<SpinnerSize, string> = {
 };
 
 // 系统开启"减少动态效果"时停成一个 45° 的菱形，和列表里的菱形记号是同一个样子
-const square =
-  "animate-spin bg-current motion-reduce:rotate-45 motion-reduce:animate-none";
+const square = [
+  "animate-spin bg-current motion-reduce:rotate-45 motion-reduce:animate-none",
+  // 高对比模式下底色被系统换成页面色，方块就没了：换成页面的字色。
+  // 写的是系统色，不是 currentColor——使用方用 className 给它另上了颜色时，这里照样看得见
+  "forced-colors:bg-[CanvasText]",
+].join(" ");
 
 /**
  * 行内加载指示：一个匀速旋转的小方块，颜色继承文字。

package/src/components/stepper/Stepper.tsx

@@ -238,6 +238,8 @@ export function Stepper({
     cn(
       "flex shrink-0 items-center justify-center select-none",
       "transition-colors duration-(--duration-fast) ease-standard",
+      // 高对比模式下底色都被系统换掉，加减钮只剩一个记号：补一圈线，和中间那一格连成三格
+      "forced-colors:border forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText]",
       buttonSize[size],
       inactive
         ? "cursor-not-allowed bg-disabled text-on-disabled"
@@ -292,6 +294,8 @@ export function Stepper({
         className={cn(
           "min-w-0 flex-1 border-y-2 border-transparent bg-surface-sunken text-center font-tech font-bold tabular-nums outline-none",
           "disabled:cursor-not-allowed",
+          // 高对比模式：上下各一条 1px 的线，和两端按钮的那一圈连成三格
+          "forced-colors:border-y forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText]",
           fieldSize[size],
           disabled ? "text-ink-disabled" : "text-ink",
           invalid && !disabled && "border-b-danger",

package/src/components/steps/Steps.tsx

@@ -75,11 +75,16 @@ const railLayout: Record<StepsOrientation, string> = {
   horizontal: "flex-col @md:flex-row",
 };
 
-/* 线和节点之间留 8px，不从节点后面穿过 */
+/*
+ * 线和节点之间留 8px，不从节点后面穿过。
+ * 高对比模式下线是底色画的，整条都会不见：没到的收成一条 1px 的细线，画成线自己的一条边
+ * （竖排在右、横排在下）；走过的那一段照旧充进来，填上剩下的 1px，还是 2px。
+ * 走没走过是粗对细，不靠两种系统色分
+ */
 const lineLayout: Record<StepsOrientation, string> = {
-  vertical: "my-2 min-h-4 w-0.5",
+  vertical: "my-2 min-h-4 w-0.5 forced-colors:border-r",
   horizontal:
-    "my-2 min-h-4 w-0.5 @md:mx-2 @md:my-0 @md:h-0.5 @md:min-h-0 @md:w-auto",
+    "my-2 min-h-4 w-0.5 @md:mx-2 @md:my-0 @md:h-0.5 @md:min-h-0 @md:w-auto forced-colors:@max-md:border-r forced-colors:@md:border-b",
 };
 
 const bodyLayout: Record<StepsOrientation, string> = {
@@ -161,11 +166,17 @@ const nodeSize: Record<StepsSize, string> = {
   md: "size-6 text-xs [&_svg]:size-3.5",
 };
 
+/*
+ * 高对比模式下底色都被系统换掉：已完成的只剩一个勾浮着，当前的和未到的都成了空心框、
+ * 只差序号的粗细。三种状态还是三种形状——页面字色的实心块、系统"选中"色的实心块、空心框
+ */
 const nodeClass: Record<StepStatus, string> = {
   // 墨底黄勾：和选中的复选框是同一个逻辑
-  done: "bg-surface-inverse text-accent-ink-inverse",
-  // 描一圈最细的线：黄色对白底立不住。颜色跟着文字走，暗色下是近白
-  current: "border border-ink bg-action font-bold text-on-action",
+  done: "bg-surface-inverse text-accent-ink-inverse forced-colors:bg-[CanvasText] forced-colors:text-[Canvas]",
+  // 描一圈最细的线：黄色对白底立不住。颜色跟着文字走，暗色下是近白。
+  // 序号是字，压在"选中"色上要关掉系统的接管（不然字后面会垫一块页面色），边线跟着自己写
+  current:
+    "border border-ink bg-action font-bold text-on-action forced-colors:forced-color-adjust-none forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
   upcoming: "border border-line-strong text-ink-secondary",
 };
 
@@ -267,6 +278,7 @@ export function Step({
         <span
           className={cn(
             "relative flex-1 overflow-clip bg-line-strong group-last/step:hidden",
+            "forced-colors:border-[CanvasText] forced-colors:before:bg-[CanvasText]",
             "before:absolute before:top-0 before:-right-4 before:-bottom-4 before:left-0 before:origin-top-left before:bg-ink before:transition-[scale] before:duration-(--duration-base) before:ease-exit before:content-['']",
             lineLayout[orientation],
             status === "done" ? "before:scale-100" : "before:scale-0",