@endfield-ui/react 0.2.0 → 1.0.0

package/src/components/nav-menu/NavMenu.tsx

@@ -85,6 +85,7 @@ export function NavMenu({
           initialFocus={firstFocusableIn(bodyRef)}
           className={cn(
             "fixed inset-0 z-(--z-overlay) flex flex-col overflow-hidden bg-surface text-ink outline-none",
+            // 整层淡入；里面的栏目另有自己的入场（见 itemEnter）
             "transition-opacity duration-(--duration-fast) ease-standard",
             "data-ending-style:opacity-0 data-starting-style:opacity-0",
             className,
@@ -155,6 +156,17 @@ export function NavMenu({
   );
 }
 
+/*
+ * 栏目入场：逐条从左滑入 8px。第一项等层淡入过半（100ms），之后每项晚 50ms，
+ * 第六项起一起到——从第一项动到最后一项停下 550ms。
+ * 只动 <li> 的位置和透明度：焦点一打开就在第一项上，键盘不用等它
+ */
+const itemEnter = [
+  "animate-shift-in [--shift-x:calc(var(--motion-shift-lg)*-1)]",
+  "[animation-delay:100ms] nth-2:[animation-delay:150ms] nth-3:[animation-delay:200ms]",
+  "nth-4:[animation-delay:250ms] nth-5:[animation-delay:300ms] nth-[n+6]:[animation-delay:350ms]",
+].join(" ");
+
 type ItemOwnProps = {
   /** 图标，后面跟一条竖向的分隔线 */
   icon?: ReactNode;
@@ -188,6 +200,7 @@ export function NavMenuItem({
   rel,
   render,
   onClick,
+  className,
   children,
   ...props
 }: NavMenuItemProps) {
@@ -213,8 +226,9 @@ export function NavMenuItem({
             // 黄和旁边的浅灰明度很接近：另加粗体和左缘一条墨色竖条，不只靠颜色
             "bg-action font-bold text-on-action",
             "before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-on-action before:content-['']",
-            // 普通的焦点色在暗色主题下也是黄的，压在黄底上看不见
-            "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-on-action",
+            // 普通的焦点色在暗色主题下也是黄的，压在黄底上看不见。换成墨色之后再往里收 2px：
+            // 贴着边的话它在暗色页面上和页面分不开，看上去只是黄条小了一圈
+            "focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-on-action",
           ]
         : [
             "bg-surface-sunken text-ink hover:bg-surface-muted active:bg-line",
@@ -256,7 +270,7 @@ export function NavMenuItem({
   );
 
   return (
-    <li {...props}>
+    <li {...props} className={cn(itemEnter, className)}>
       {isLink ? (
         <LinkElement
           render={render}

package/src/components/otp-input/OtpInput.tsx

@@ -3,7 +3,11 @@ import { Fragment, useId, type ComponentProps } from "react";
 import { cn } from "../../lib/cn";
 import { focusRing } from "../../lib/focus-ring";
 import { useFieldContext, useFieldControl } from "../field/Field";
-import type { ControlSize, ControlVariant } from "../input/control-box";
+import {
+  readOnlyFrame,
+  type ControlSize,
+  type ControlVariant,
+} from "../input/control-box";
 
 export type OtpInputType = "numeric" | "alphanumeric";
 export type OtpInputSize = ControlSize;
@@ -129,8 +133,11 @@ export function OtpInput({
   const groupLabel = ownLabel ?? fieldContext?.labelId;
 
   const slotClass = cn(
-    "min-w-0 shrink text-center font-tech font-medium tabular-nums text-ink caret-ink",
+    // 字色：空格是透明的，填上（基元给的 data-filled）才有颜色。下面那条颜色的过渡
+    // 本来是给边线的，字色跟着它走——所以填进去的那一位是淡入的。光标另有自己的颜色
+    "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],
@@ -138,8 +145,9 @@ export function OtpInput({
       ? // 只读：没有边线、底变透明。边线留透明的，尺寸不跳
         "border-transparent bg-transparent"
       : slotFill[variant],
+    readOnly && !disabled && !invalid && readOnlyFrame,
     disabled
-      ? "cursor-not-allowed border-line text-ink-disabled"
+      ? "cursor-not-allowed border-line"
       : invalid
         ? "border-danger"
         : !readOnly &&
@@ -191,7 +199,8 @@ export function OtpInput({
             <span
               aria-hidden="true"
               data-separator=""
-              className="h-0.5 w-2 shrink-0 bg-line-strong"
+              // 高对比模式下底色被系统换掉，短横就没了，只剩一段比别处宽的空：换成页面的字色
+              className="h-0.5 w-2 shrink-0 bg-line-strong forced-colors:bg-[CanvasText]"
             />
           )}
           <BaseOtpField.Input

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

@@ -79,16 +79,31 @@ const markLeft = (ratio: number) =>
 
 const thumb = [
   "relative h-5 w-3 bg-surface-inverse shadow-[0_0_0_2px_var(--ef-surface)]",
+  // 按键、外部改值时滑过去。拖动中位置必须贴着指针，所以那时候关掉——
+  // 点轨道也算：基元在按下的那一刻就开始拖了
+  "transition-[inset-inline-start] duration-(--duration-fast) ease-standard data-dragging:transition-none",
   // 触屏的点击区补到 40 × 40px
   "before:absolute before:-inset-x-3.5 before:-inset-y-2.5 before:content-['']",
   // 按住时正中亮一条强调色细线
-  "after:absolute after:inset-y-1 after:left-1/2 after:w-0.5 after:-translate-x-1/2 after:bg-accent-ink-inverse after:opacity-0 after:content-[''] data-dragging:after:opacity-100",
+  "after:absolute after:inset-y-1 after:left-1/2 after:w-0.5 after:-translate-x-1/2 after:bg-accent-ink-inverse after:opacity-0 after:transition-opacity after:duration-(--duration-fast) after:ease-standard after:content-[''] data-dragging:after:opacity-100",
   // 菱形方案：滑块是一个 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`。
@@ -164,8 +179,14 @@ export function Slider(props: SliderProps) {
             controlSize[size],
           )}
         >
-          <BaseSlider.Track className="h-1 w-full bg-line">
-            <BaseSlider.Indicator className="bg-ink data-disabled:bg-ink-disabled" />
+          <BaseSlider.Track className={cn("h-1 w-full bg-line", trackForced)}>
+            {/* 走过的一段跟着滑块头走：范围滑块两头都会动 */}
+            <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}
@@ -187,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"
@@ -207,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],
           )}
         >