@endfield-ui/react 0.3.0 → 1.0.0

package/src/components/table/Table.tsx

@@ -16,10 +16,12 @@ import {
 } from "react";
 import { useControllableState } from "../../hooks/useControllableState";
 import { useOverflowing } from "../../hooks/useOverflowing";
+import { usePresence, type Presence } from "../../hooks/usePresence";
 import { TriangleRight } from "../../icons/TriangleRight";
 import { cn } from "../../lib/cn";
 import { focusRing, focusRingInset } from "../../lib/focus-ring";
 import { mergeRefs } from "../../lib/merge-refs";
+import { collapse, collapseEnter, collapseInner } from "../../lib/motion";
 
 export type TableHeaderVariant = "band" | "muted";
 export type TableSize = "sm" | "md";
@@ -173,10 +175,11 @@ export type TableBodyProps = ComponentProps<"tbody">;
 
 /*
  * 每隔五行加重一条线。只数主行：展开的明细也是一个 <tr>，不能让它把数数错。
- * 第五行自己展开着的时候，它的下边线没有了，加重的那条画在它的明细下面
+ * 第五行后面跟着明细的时候（展开着，或者正在收起），它的下边线没有了，
+ * 加重的那条画在它的明细下面
  */
 const ruledLines = [
-  "[&>tr:nth-child(5n_of_:not([data-detail])):not([data-expanded])>*]:border-line-strong",
+  "[&>tr:nth-child(5n_of_:not([data-detail])):not(:has(+tr[data-detail]))>*]:border-line-strong",
   "[&>tr:nth-child(5n_of_:not([data-detail]))+tr[data-detail]>*]:border-line-strong",
 ].join(" ");
 
@@ -241,6 +244,8 @@ export function TableRow({
   const expandable =
     detail !== undefined && detail !== null && detail !== false;
   const open = expandable && expanded;
+  // 收起：明细先按高度收回去，收完再卸载
+  const detailPresence = usePresence<HTMLDivElement>(open);
 
   const context = useMemo(
     () =>
@@ -269,18 +274,19 @@ export function TableRow({
         className={cn(
           "group/row transition-colors duration-(--duration-fast) ease-standard",
           selected ? rowSelected : rowIdle,
-          // 展开着：它和下面的明细是一块，中间不画线
-          "[&[data-expanded]>*]:border-b-transparent",
+          // 后面跟着明细（展开着，或者正在收起）：它们是一块，中间不画线
+          "[&:has(+tr[data-detail])>*]:border-b-transparent",
           className,
         )}
       >
         <RowContext value={context}>{children}</RowContext>
       </tr>
-      {open && (
+      {detailPresence.mounted && (
         <DetailRow
           id={detailId}
           rowRef={rowRef}
           estimate={countCells(children)}
+          presence={detailPresence}
         >
           {detail}
         </DetailRow>
@@ -303,11 +309,13 @@ function DetailRow({
   id,
   rowRef,
   estimate,
+  presence,
   children,
 }: {
   id: string;
   rowRef: RefObject<HTMLTableRowElement | null>;
   estimate: number;
+  presence: Presence<HTMLDivElement>;
   children: ReactNode;
 }) {
   const [measured, setMeasured] = useState<number | null>(null);
@@ -323,14 +331,30 @@ function DetailRow({
   });
 
   return (
-    <tr id={id} data-detail="">
+    // 正在收起的明细点不到、Tab 不进去
+    <tr id={id} data-detail="" inert={presence.leaving}>
       <td
         colSpan={measured ?? estimate}
         className="border-b border-line bg-surface-sunken p-0 [tr:last-child>&]:border-b-0"
       >
-        {/* 表格横向滚动时明细不跟着滚走：钉在容器的左缘，宽度是容器看得见的那一段 */}
-        <div className="sticky left-0 w-[var(--table-viewport,100%)] px-4 py-3 text-sm whitespace-normal">
-          {children}
+        {/*
+         * 表格横向滚动时明细不跟着滚走：钉在容器的左缘，宽度是容器看得见的那一段。
+         * 收放也在这一层上——表格行的高度过渡不了，过渡的是单元格里的它
+         */}
+        <div
+          ref={presence.ref}
+          data-leaving={presence.leaving ? "" : undefined}
+          className={cn(
+            "sticky left-0 w-[var(--table-viewport,100%)]",
+            collapse,
+            presence.entered && collapseEnter,
+          )}
+        >
+          <div className={collapseInner}>
+            <div className="px-4 py-3 text-sm whitespace-normal">
+              {children}
+            </div>
+          </div>
         </div>
       </td>
     </tr>

package/src/components/tabs/Tabs.tsx

@@ -3,14 +3,18 @@ import {
   useContext,
   useId,
   useMemo,
+  useState,
   type ComponentProps,
   type KeyboardEvent,
   type MouseEvent,
 } from "react";
 import { useControllableState } from "../../hooks/useControllableState";
+import { useIndicator } from "../../hooks/useIndicator";
 import { TriangleRight } from "../../icons/TriangleRight";
 import { cn } from "../../lib/cn";
 import { focusRing, focusRingInset } from "../../lib/focus-ring";
+import { mergeRefs } from "../../lib/merge-refs";
+import { fadeInFast, indicator, indicatorBox } from "../../lib/motion";
 import { capsuleBase, capsuleSize, capsuleState } from "../chip/capsule-style";
 
 export type TabsVariant = "block" | "capsule" | "wedge";
@@ -22,6 +26,8 @@ type TabsContextValue = {
   baseId: string;
   variant: TabsVariant;
   size: TabsSize;
+  /** 切换过没有：一开始选中的那一块面板是静止的，切过来的才淡入 */
+  switched: boolean;
 };
 
 const TabsContext = createContext<TabsContextValue | null>(null);
@@ -71,9 +77,13 @@ export function Tabs({
     onChange: onValueChange,
   });
 
+  const [initial] = useState(current);
+  const [switched, setSwitched] = useState(false);
+  if (!switched && current !== initial) setSwitched(true);
+
   const context = useMemo(
-    () => ({ value: current, select, baseId, variant, size }),
-    [current, select, baseId, variant, size],
+    () => ({ value: current, select, baseId, variant, size, switched }),
+    [current, select, baseId, variant, size, switched],
   );
 
   return (
@@ -85,8 +95,12 @@ export function Tabs({
 
 export type TabListProps = ComponentProps<"div">;
 
-export function TabList({ className, onKeyDown, ...props }: TabListProps) {
+export function TabList({ className, onKeyDown, ref, ...props }: TabListProps) {
   const { variant } = useTabsContext("TabList");
+  // 胶囊：选中的底画在这一栏上，换一个时是同一块滑过去。另外两种的"让位"是实测的，不动
+  const listRef = useIndicator<HTMLDivElement>(
+    variant === "capsule" ? '[role="tab"][aria-selected="true"]' : null,
+  );
 
   // 漫游 tabindex：方向键在页签之间移动焦点并直接切换
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
@@ -128,13 +142,24 @@ export function TabList({ className, onKeyDown, ...props }: TabListProps) {
   return (
     <div
       {...props}
+      ref={mergeRefs(listRef, ref)}
       role="tablist"
       aria-orientation="horizontal"
       onKeyDown={handleKeyDown}
       className={cn(
         // 页签很多时横向滚动，不换行
         "flex overflow-x-auto [scrollbar-width:thin]",
-        variant === "capsule" && "gap-2 p-1",
+        variant === "capsule" && [
+          "gap-2 p-1",
+          // 胶囊各有各的宽：底滑过去的时候宽度跟着变。它在滚动的内容里，跟着内容走
+          indicator,
+          indicatorBox,
+          // 墨底提到各个胶囊的轮廓线之上：滑过去的时候是一块干净的实心胶囊，
+          // 不被相邻胶囊的轮廓切开。胶囊里的字另提一层，留在它上面
+          "after:z-0 after:rounded-full after:bg-surface-inverse",
+          // 高对比模式下底色被系统换掉，这一块成了盖住选中胶囊轮廓的一片页面色：改用系统的"选中"色
+          "forced-colors:after:bg-[Highlight]",
+        ],
         // 楔形坐在一条墨线上：亮色页面上黄色对白底的明度差很小，靠这条线托住
         variant === "wedge" && "border-b-2 border-ink",
         className,
@@ -205,14 +230,21 @@ export function Tab({
           focusRing,
           capsuleSize[size],
           selected
-            ? capsuleState.selected
+            ? // 这一栏量到了位置，底就由栏上滑动的那一块来画
+              [
+                capsuleState.selected,
+                "in-data-indicator:bg-transparent forced-colors:in-data-indicator:bg-transparent",
+              ]
             : disabled
               ? capsuleState.disabled
               : capsuleState.rest,
           className,
         )}
       >
-        {children}
+        {/* 字在滑动的墨底之上；间距跟按钮自己的走，里面照旧是一行居中的弹性排布 */}
+        <span className="relative z-1 inline-flex items-center gap-[inherit]">
+          {children}
+        </span>
       </button>
     );
   }
@@ -229,7 +261,13 @@ export function Tab({
           focusRingInset,
           wedgeSize[size],
           selected
-            ? "text-on-action before:bg-action"
+            ? // 焦点环画在里面、压在黄楔上：普通的焦点色在暗色主题下也是黄的，看不见，
+              // 换成压得住黄底的颜色。再往里收 2px：这个颜色贴着边的话，在暗色页面上
+              // 和页面分不开，看上去只是黄楔小了一圈。
+              // 高对比模式下黄底被系统换掉：楔形改用系统的"选中"色，字用配它的字色；
+              // 这一个的颜色不让系统再改，不然它会在字后面垫一块页面色。
+              // 画在里面的焦点环也用那个字色，再往里收 2px：贴着边的话它和页面一个颜色
+              "text-on-action before:bg-action focus-visible:-outline-offset-4 focus-visible:outline-on-action forced-colors:forced-color-adjust-none forced-colors:text-[HighlightText] forced-colors:before:bg-[Highlight] forced-colors:focus-visible:-outline-offset-4 forced-colors:focus-visible:outline-[HighlightText]"
             : disabled
               ? "cursor-not-allowed text-ink-disabled"
               : "text-ink hover:before:bg-ink/5",
@@ -287,7 +325,10 @@ export type TabPanelProps = ComponentProps<"div"> & {
   value: string;
 };
 
-/** 未选中的面板保留一个隐藏的空容器，让页签的 `aria-controls` 始终有所指。 */
+/**
+ * 未选中的面板保留一个隐藏的空容器，让页签的 `aria-controls` 始终有所指。
+ * 切过来的面板淡入；一开始就选中的那一块不动。
+ */
 export function TabPanel({
   value,
   className,
@@ -305,7 +346,12 @@ export function TabPanel({
       aria-labelledby={toId(context.baseId, "tab", value)}
       hidden={!selected}
       tabIndex={0}
-      className={cn(focusRing, className)}
+      className={cn(
+        focusRing,
+        // 只淡入、不位移：页签本身已经有"让位"的动作
+        selected && context.switched && fadeInFast,
+        className,
+      )}
     >
       {selected ? children : null}
     </div>

package/src/components/tag-input/TagInput.tsx

@@ -10,14 +10,19 @@ import {
   type KeyboardEvent,
   type MouseEvent,
 } from "react";
+import { useAddedKeys } from "../../hooks/useAddedKeys";
 import { useControllableState } from "../../hooks/useControllableState";
+import { FLIP_LIMIT, useFlip } from "../../hooks/useFlip";
+import { useLingering } from "../../hooks/useLingering";
 import { Close } from "../../icons/Close";
 import { StatusDanger } from "../../icons/StatusDanger";
 import { cn } from "../../lib/cn";
 import { mergeRefs } from "../../lib/merge-refs";
+import { fadeInFast, flipBox, flipLeaving } from "../../lib/motion";
 import { useFieldControl } from "../field/Field";
 import {
   controlBox,
+  controlDisabledText,
   controlElement,
   controlIconSize,
   type ControlSize,
@@ -182,6 +187,15 @@ export function TagInput({
   const [flash, setFlash] = useState<string | null>(null);
   const [message, setMessage] = useState("");
   const full = max !== undefined && tags.length >= max;
+  // 后来加的那几个淡入；一开始就有的是静止的
+  const added = useAddedKeys(tags);
+  // 删掉的那一块先留着把淡出走完，其余的小块和输入框同时补位。
+  // 补位的钩子排在前面：它钉不住的（小块太多、量不到位置）当场藏掉，后面那个就不等了
+  const rowRef = useFlip<HTMLDivElement>();
+  const lingering = useLingering<HTMLDivElement>(
+    tags,
+    tags.length < FLIP_LIMIT,
+  );
 
   useEffect(() => {
     if (flash === null) return;
@@ -367,48 +381,71 @@ export function TagInput({
         className,
       )}
     >
-      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1 pl-2">
-        {tags.map((tag, index) => (
-          <span
-            key={tag}
-            data-tag=""
-            data-flash={flash === tag ? "" : undefined}
-            className={cn(
-              valueChip,
-              valueChipSize[size],
-              "transition-colors duration-(--duration-fast) ease-standard",
-              // 重复时闪一下：填充反转。不用黄色——这不是"选中"
-              "data-flash:bg-surface-inverse data-flash:text-ink-inverse",
-              disabled && "text-ink-disabled",
-              !editable && "pr-2",
-            )}
-          >
-            <span className="min-w-0 truncate">{tag}</span>
-            {editable && (
-              <button
-                type="button"
-                // 整个控件只占一个 Tab 停靠点：小块用方向键走
-                tabIndex={-1}
-                aria-label={removeLabel(tag)}
-                onClick={(event) =>
-                  // 键盘触发的（回车、空格）焦点留在小块这一排；鼠标点的回到输入框
-                  remove(
-                    index,
-                    event.detail === 0 && tags.length > 1 ? index : "input",
-                  )
-                }
-                onKeyDown={(event) => handleChipKeyDown(event, index)}
-                className={cn(
-                  valueChipRemove,
-                  "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus",
-                  flash === tag && "text-ink-inverse",
-                )}
-              >
-                <Close size={12} />
-              </button>
-            )}
-          </span>
-        ))}
+      <div
+        ref={mergeRefs(rowRef, lingering.ref)}
+        className={cn(
+          "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1 pl-2",
+          flipBox,
+        )}
+      >
+        {lingering.entries.map(({ key: tag, leaving }) => {
+          // 正在走的那一块已经不在 tags 里了，下面按位置算的事它都用不上
+          const index = tags.indexOf(tag);
+          return (
+            <span
+              key={tag}
+              // 正在走的不算数：删掉之后焦点落到哪、整排怎么用方向键走，看到的只有还在的
+              data-tag={leaving ? undefined : ""}
+              data-leaving={leaving ? "" : undefined}
+              data-flash={flash === tag && !leaving ? "" : undefined}
+              // 它点不到、Tab 不进去，读屏也读不到：状态在删的那一刻就变了，画面后到
+              inert={leaving}
+              aria-hidden={leaving || undefined}
+              className={cn(
+                valueChip,
+                valueChipSize[size],
+                // 换色、补位时滑回原位、走的时候淡出，都是 200ms
+                "transition-[color,background-color,translate,opacity] duration-(--duration-fast) ease-standard",
+                // 重复时闪一下：填充反转。不用黄色——这不是"选中"
+                "data-flash:bg-surface-inverse data-flash:text-ink-inverse",
+                // 高对比模式下底色被系统换掉，反转闪不出来：闪的时候套一圈系统"选中"色的环，
+                // 画在那一圈线的外面（小块之间有 4px，放得下）
+                "forced-colors:data-flash:outline-2 forced-colors:data-flash:outline-[Highlight]",
+                flipLeaving,
+                added.has(tag) && fadeInFast,
+                // 高对比模式：这是个 <span>，系统不知道它禁用了，字和那一圈线都写明灰字色
+                disabled &&
+                  "text-ink-disabled forced-colors:border-[GrayText] forced-colors:text-[GrayText]",
+                !editable && "pr-2",
+              )}
+            >
+              <span className="min-w-0 truncate">{tag}</span>
+              {editable && (
+                <button
+                  type="button"
+                  // 整个控件只占一个 Tab 停靠点：小块用方向键走
+                  tabIndex={-1}
+                  aria-label={removeLabel(tag)}
+                  onClick={(event) =>
+                    // 键盘触发的（回车、空格）焦点留在小块这一排；鼠标点的回到输入框
+                    remove(
+                      index,
+                      event.detail === 0 && tags.length > 1 ? index : "input",
+                    )
+                  }
+                  onKeyDown={(event) => handleChipKeyDown(event, index)}
+                  className={cn(
+                    valueChipRemove,
+                    "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus",
+                    flash === tag && "text-ink-inverse",
+                  )}
+                >
+                  <Close size={12} />
+                </button>
+              )}
+            </span>
+          );
+        })}
         <input
           {...props}
           ref={mergeRefs(inputRef, ref)}
@@ -446,6 +483,8 @@ export function TagInput({
             controlElement,
             "min-w-12 px-1",
             valueInputHeight[size],
+            // 删了一个小块：和后面的小块一起滑到新位置
+            "transition-[translate] duration-(--duration-fast) ease-standard",
           )}
         />
       </div>
@@ -469,7 +508,7 @@ export function TagInput({
               className={cn(
                 "font-tech text-xs tabular-nums",
                 disabled
-                  ? "text-ink-disabled"
+                  ? controlDisabledText
                   : full
                     ? "text-ink"
                     : "text-ink-secondary",

package/src/components/textarea/Textarea.tsx

@@ -3,6 +3,7 @@ import { cn } from "../../lib/cn";
 import { useFieldControl } from "../field/Field";
 import {
   controlBox,
+  controlDisabledText,
   controlElement,
   type ControlVariant,
 } from "../input/control-box";
@@ -88,7 +89,7 @@ export function Textarea({
           data-count=""
           className={cn(
             "pointer-events-none self-end px-3 pb-1.5 font-tech text-xs tabular-nums",
-            disabled ? "text-ink-disabled" : "text-ink-secondary",
+            disabled ? controlDisabledText : "text-ink-secondary",
           )}
         >
           {maxLength !== undefined ? `${length} / ${maxLength}` : length}

package/src/components/timeline/Timeline.tsx

@@ -25,9 +25,10 @@ export type TimelineItemProps = Omit<ComponentProps<"li">, "title"> & {
 };
 
 const nodeClass: Record<TimelineStatus, string> = {
-  past: "bg-ink",
+  // 高对比模式下底色都被系统换掉，实心的菱形就没了：换成页面的字色
+  past: "bg-ink forced-colors:bg-[CanvasText]",
   // 描一圈最细的线（1px），颜色跟着文字走：亮色下是墨色，暗色下是近白
-  current: "border border-ink bg-action",
+  current: "border border-ink bg-action forced-colors:bg-[Highlight]",
   upcoming: "border-2 border-ink-tertiary",
 };
 
@@ -66,7 +67,7 @@ export function TimelineItem({
           <span className={cn("size-[11px] rotate-45", nodeClass[status])} />
         </span>
         {/* 轴只画在节点之间，不从节点后面穿过，空心菱形才是空的 */}
-        <span className="w-0.5 flex-1 bg-line-strong group-last/item:hidden" />
+        <span className="w-0.5 flex-1 bg-line-strong group-last/item:hidden forced-colors:bg-[CanvasText]" />
       </span>
       <div className="min-w-0 flex-1 pb-6 group-last/item:pb-0">
         {hasDate && (

package/src/components/toc/Toc.tsx

@@ -13,13 +13,16 @@ import {
   type ReactNode,
   type RefObject,
 } from "react";
+import { useIndicator } from "../../hooks/useIndicator";
 import {
   useScrollPosition,
   type ScrollMetrics,
 } from "../../hooks/useScrollPosition";
 import { cn } from "../../lib/cn";
 import { focusRingInset } from "../../lib/focus-ring";
+import { dropEmptyStyle } from "../../lib/inline-style";
 import { mergeRefs } from "../../lib/merge-refs";
+import { indicator } from "../../lib/motion";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
 
 export type TocLevel = 1 | 2 | 3;
@@ -51,11 +54,50 @@ export type TocProps = TocOwnProps &
 /** 点了一项之后，多久没有滚动事件算这一次滚动停下了 */
 const SETTLE_MS = 150;
 
+/**
+ * 让接下来的这一次滚动是平滑的：给这几个滚动容器写上内联的 `scroll-behavior`，
+ * 滚动停下（`SETTLE_MS` 里没有再滚）就还原成原来的内联值。返回的函数提前还原。
+ *
+ * 滚动本身不归它管——跳过去的仍然是浏览器（锚点跳转）。
+ */
+function smoothOnce(scrollers: readonly HTMLElement[]) {
+  const before = scrollers.map((scroller) =>
+    scroller.style.getPropertyValue("scroll-behavior"),
+  );
+  for (const scroller of scrollers) {
+    scroller.style.setProperty("scroll-behavior", "smooth");
+  }
+
+  // 页面的滚动事件发在 window 上，容器的发在它自己身上
+  const sources = scrollers.map((scroller) =>
+    scroller === document.documentElement ? window : scroller,
+  );
+  let timer: ReturnType<typeof setTimeout>;
+  const restore = () => {
+    clearTimeout(timer);
+    for (const source of sources) source.removeEventListener("scroll", wait);
+    scrollers.forEach((scroller, index) => {
+      scroller.style.setProperty("scroll-behavior", before[index]!);
+      dropEmptyStyle(scroller);
+    });
+  };
+  function wait() {
+    clearTimeout(timer);
+    timer = setTimeout(restore, SETTLE_MS);
+  }
+  for (const source of sources) {
+    source.addEventListener("scroll", wait, { passive: true });
+  }
+  wait();
+  return restore;
+}
+
 /**
  * 页内目录：这一页有哪几节、现在看到了哪一节。里面放 `TocItem`。
  *
- * 位置由使用方给，通常是 `className="sticky top-6"`。点一项就是点一个锚点链接：
- * 滚不滚、平不平滑是浏览器和页面 CSS 的事，它不接管滚动。
+ * 位置由使用方给，通常是 `className="sticky top-6"`。点一项仍然是点一个锚点链接——
+ * 地址、后退、`scroll-mt` 都是浏览器原生的那一套；它只让这一次跳转滚得平滑
+ * （系统开了"减少动态效果"时照旧直接跳）。
  */
 export function Toc({
   title,
@@ -69,6 +111,8 @@ export function Toc({
   ...props
 }: TocProps) {
   const navRef = useRef<HTMLElement>(null);
+  // 当前项的粗条画在列表上：换一项时是同一段沿引线滑过去
+  const listRef = useIndicator<HTMLUListElement>("[aria-current]");
   const titleId = useId();
   // 目录的项数变了（内容是后来才到的）要重新算一次，不等下一次滚动
   const count = Children.count(children);
@@ -133,6 +177,32 @@ export function Toc({
 
   const active = pinned ?? spied;
 
+  // 点了一项之后的那一次跳转滚得平滑。这是脚本里要的平滑滚动，"减少动态效果"得自己看
+  const restoreScroll = useRef<(() => void) | null>(null);
+  useEffect(() => () => restoreScroll.current?.(), []);
+  const pick = useCallback(
+    (section: string) => {
+      setPinned(section);
+      restoreScroll.current?.();
+      restoreScroll.current = null;
+      if (!document.getElementById(section)) return;
+      if (
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches
+      ) {
+        return;
+      }
+      // 小节在容器里时，页面也可能跟着滚（把它带到眼前）：两处一起
+      const container = target?.current;
+      restoreScroll.current = smoothOnce(
+        container
+          ? [container, document.documentElement]
+          : [document.documentElement],
+      );
+    },
+    [target],
+  );
+
   const report = useRef(onActiveChange);
   report.current = onActiveChange;
   const reported = useRef<string | null>(null);
@@ -158,7 +228,7 @@ export function Toc({
     }
   }, [active]);
 
-  const context = useMemo(() => ({ active, pick: setPinned }), [active]);
+  const context = useMemo(() => ({ active, pick }), [active, pick]);
   const hasTitle = title !== undefined && title !== null && title !== false;
 
   return (
@@ -179,8 +249,19 @@ export function Toc({
           {title}
         </p>
       )}
-      {/* 引线：从头贯到尾的一条细线，当前项那一段由那一项自己换成粗条 */}
-      <ul className="relative before:absolute before:inset-y-0 before:left-0 before:w-px before:bg-line before:content-['']">
+      {/* 引线：从头贯到尾的一条细线；当前项那一段是压在它上面的粗条 */}
+      <ul
+        ref={listRef}
+        className={cn(
+          // 和粗条同一层：它在前、粗条在后，粗条压着它；两样都在各项之下
+          "before:absolute before:inset-y-0 before:left-0 before:-z-1 before:w-px before:bg-line before:content-['']",
+          indicator,
+          // 3px 宽，比当前项上下各短 4px；长度跟着那一项的高度走
+          "after:top-1 after:h-[calc(var(--indicator-h)-0.5rem)] after:w-[3px] after:translate-y-(--indicator-y) after:bg-ink",
+          // 高对比模式下底色被系统换掉，粗条就没了：改用系统的"选中"色
+          "forced-colors:after:bg-[Highlight]",
+        )}
+      >
         <TocContext value={context}>{children}</TocContext>
       </ul>
     </nav>
@@ -251,8 +332,9 @@ export function TocItem({
           focusRingInset,
           levelPadding[level],
           current
-            ? // 不加粗：加粗会让折行变掉，整列目录跟着跳。靠的是引线上的这一段粗条
-              "text-ink before:absolute before:inset-y-1 before:left-0 before:w-[3px] before:bg-ink before:content-['']"
+            ? // 不加粗：加粗会让折行变掉，整列目录跟着跳。靠的是引线上的这一段粗条——
+              // 列表量到了位置就由列表上滑动的那一段来画，这里的让出来
+              "text-ink before:absolute before:inset-y-1 before:left-0 before:w-[3px] before:bg-ink before:content-[''] in-data-indicator:before:hidden forced-colors:before:bg-[Highlight]"
             : "text-ink-secondary hover:text-ink",
         )}
       >