@xihan-ui/styles 2.0.0 → 3.0.0

package/css/tour.css

@@ -13,7 +13,7 @@
   /* 高亮框落定时那一下呼吸：换步时视线要跟着它走，纯位移太容易被漏看 */
   @keyframes xh-tour-spotlight-in {
     from {
-      opacity: 0;
+      opacity: var(--xh-_enter-from-opacity, 0);
       scale: calc(2 - var(--xh-motion-scale-enter));
     }
 
@@ -70,7 +70,7 @@
     display: none;
   }
 
-  [data-scope='tour'][data-part='backdrop'][data-state='open'] {
+  [data-scope='tour'][data-part='backdrop'][data-state='open']:not([data-instant]) {
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
@@ -94,13 +94,23 @@
     box-shadow:
       0 0 0 var(--xh-stroke-thick) var(--xh-tour-spotlight-ring, var(--xh-ring-focus)),
       0 0 0 100vmax var(--xh-_tour-spotlight-shroud);
-    /* 换步时框自己滑过去，用户的视线跟得上；逻辑属性照样可过渡 */
+  }
+
+  /* 换步那一段（data-animating）：聚光框与气泡同一段时长、同一条曲线一起滑到下一个目标，视线跟得上；
+     页面滚动与视口缩放时不挂，两者跟手、不拖尾。坐标由连接层按物理 left / top 写进内联，过渡跟着写物理轴 */
+  [data-scope='tour'][data-part='spotlight'][data-animating] {
     transition:
-      inset-inline-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      inset-block-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      border-radius var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+      left var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      top var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      block-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      border-radius var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  [data-scope='tour'][data-part='positioner'][data-animating] {
+    transition:
+      left var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      top var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   [data-scope='tour'][data-part='spotlight'][data-dimmed] {
@@ -111,7 +121,7 @@
     display: none;
   }
 
-  [data-scope='tour'][data-part='spotlight'][data-state='open'] {
+  [data-scope='tour'][data-part='spotlight'][data-state='open']:not([data-instant]) {
     animation: xh-tour-spotlight-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -191,7 +201,7 @@
     padding-inline: var(--xh-tour-px, var(--xh-surface-px-md));
     /* 引导步骤的正文长度由作者定，矮视口下不限高气泡会整块伸出视口 */
     max-block-size: min(var(--xh-tour-max-h, var(--xh-overlay-max-h)), var(--xh-_tour-available-h));
-    /* M4 sheet 三件套（§8.4），与 dialog 同源：1px 描边是它的边界，不透明底，影只是加成 */
+    /* M4 sheet 三件套，与 dialog 同源：1px 描边是它的边界，不透明底，影只是加成 */
     border: var(--xh-stroke-thin) solid var(--xh-tour-border, var(--xh-material-elevated-border));
     border-radius: var(--xh-tour-radius, var(--xh-shape-overlay));
     background: var(--xh-tour-bg, var(--xh-material-elevated-bg));
@@ -209,10 +219,9 @@
   /* 焦点落在气泡本身，Enter / Space 落在它身上推进下一步：它是可操作目标，
      环由 focus.css 的默认内收环画，这里不另写 */
 
-  [data-scope='tour'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='tour'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
-    /* 只在开着的这一档挂：合成层随 data-state 一起收走，收起后不再占着 */
-    will-change: opacity, scale, translate;
   }
 
   /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
@@ -235,10 +244,10 @@
     padding-inline-end: calc(var(--xh-tour-close-size, var(--xh-control-h-sm)) + var(--xh-surface-action-inset));
   }
 
-  /* 说明文字走说明档（§6.4）：13px + fg-muted */
+  /* 说明文字走说明档：13px + fg-muted */
   [data-scope='tour'][data-part='description'] {
     margin: 0;
-    font-size: var(--xh-text-secondary-size);
+    font-size: var(--xh-tour-description-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-normal);
     color: var(--xh-tour-description-fg, var(--xh-fg-muted));
   }
@@ -260,7 +269,7 @@
     display: none;
   }
 
-  /* 圆点：8px 正圆取 circle（§6.3 分页点统一款），未走到的一档取中性描边色。
+  /* 圆点：8px 正圆取 circle（分页点统一款），未走到的一档取中性描边色。
      宽度与底色都随状态换，换步那一下能看出进度在推进 */
   [data-scope='tour'][data-part='progress-dot'] {
     inline-size: var(--xh-space-2);
@@ -268,7 +277,7 @@
     border-radius: var(--xh-shape-circle);
     background: var(--xh-tour-progress-dot-bg, var(--xh-border-default));
     transition:
-      inline-size var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
       background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -286,7 +295,7 @@
 
   /*
    * —— 末行三颗按钮 ——
-   * 上一步 / 下一步 / 跳过都是气泡末行的文字按钮（§9.1）：盒型、sm 档几何、四态面、0.97 按压并换底、粗指针命中区与
+   * 上一步 / 下一步 / 跳过都是气泡末行的文字按钮：盒型、sm 档几何、四态面、0.97 按压并换底、粗指针命中区与
    * 强制色由家族配方按连接层投影的 data-xh-action-variant / -size 给出。这里只把公开槽桥接到矩阵之前
    * （使用者槽 → 形态矩阵 → 家族缺省）与几何映射；内衬与圆角槽三颗共用。
    */
@@ -305,7 +314,7 @@
     display: none;
   }
 
-  /* 下一步是整条引导的主线动作，显式 solid（§7.2 第 2 条）：底、字与影三组使用者槽桥到配方 solid 列之前 */
+  /* 下一步是整条引导的主线动作，显式 solid：底、字与影三组使用者槽桥到配方 solid 列之前 */
   [data-scope='tour'][data-part='next-trigger'] {
     --xh-action-bg-rest: var(--xh-tour-next-bg, var(--xh-_action-variant-bg-rest));
     --xh-action-bg-hover: var(--xh-tour-next-bg-hover, var(--xh-_action-variant-bg-hover));
@@ -324,7 +333,7 @@
   }
 
   /*
-   * 关闭钮是气泡角落的单图标钮（§9.1）：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
+   * 关闭钮是气泡角落的单图标钮：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
    * 由家族配方给出——白面上走画布承载阶梯悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200），
    * 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与摆放；
    * 静息前景取 muted 字色，悬停 / 按下 / 聚焦回到 fg-default。
@@ -383,7 +392,7 @@
 
 @layer xihan.components {
   /* 气泡限高之后只让正文让步：标题与上下步按钮滚出视线就点不到了。
-     模态气泡里的原生细条滚动面（§6.6）：细条由 reset 层统一给，滚到头不把页面一起带走；内容高度不动态变化，不写 gutter */
+     模态气泡里的原生细条滚动面：细条由 reset 层统一给，滚到头不把页面一起带走；内容高度不动态变化，不写 gutter */
   [data-scope='tour'][data-part='description'] {
     flex: 1 1 auto;
     min-block-size: 0;
@@ -408,4 +417,23 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='tour'][data-part='close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='tour'][data-part='close-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='tour'][data-part='close-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/transfer.css

@@ -6,7 +6,11 @@
 /* 定义 transfer 样式。 */
 
 @import '../family/action-control.css';
+@import '../family/check-mark.css';
 @import '../family/collection-item.css';
+@import '../family/field-chrome.css';
+@import '../family/loading-ring.css';
+@import '../family/motion.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -22,14 +26,15 @@
      所以只能按位置显式安放，不能靠自动流——自动流会把"往回搬"甩到目标面板的位置上 */
   [data-scope='transfer'][data-part='root'] {
     /* 条目外的字形（空态占位里作者塞的图标）按档取尺，缺省 md；条目内的字形由家族随 data-xh-collection-size
-       下发，搬运钮内的按 Action Control icon 档取，勾选格里的勾按边长比例取（§6.5） */
+       下发，搬运钮内的按 Action Control icon 档取，勾选格里的勾按边长比例取 */
     --xh-icon-size: var(--xh-transfer-icon-size, var(--xh-glyph-size-md));
-    /* 两侧定高小列表的自绘条挂在根上（§6.6）：根是条子的定位盒（面板不定位），轨道底色关掉才不会在列表边缘糊出一条灰带 */
+    /* 两侧定高小列表的自绘条挂在根上：根是条子的定位盒（面板不定位），轨道底色关掉才不会在列表边缘糊出一条灰带 */
     --xh-scrollbar-track-bg: transparent;
 
-    /* 尺寸档只换这五个私有槽，面板头、搜索框、条目与勾选格都从 root 继承它们，
+    /* 尺寸档只换这六个私有槽，面板头、搜索框、条目与勾选格都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_transfer-item-py: var(--xh-list-option-py-md);
+    --xh-_transfer-h: var(--xh-control-h-md);
     --xh-_transfer-px: var(--xh-control-px-md);
     --xh-_transfer-gap: var(--xh-control-gap-md);
     --xh-_transfer-font-size: var(--xh-control-font-md);
@@ -53,6 +58,7 @@
   [data-scope='transfer'][data-part='root'][data-size='sm'] {
     --xh-icon-size: var(--xh-transfer-icon-size, var(--xh-glyph-size-sm));
     --xh-_transfer-item-py: var(--xh-list-option-py-sm);
+    --xh-_transfer-h: var(--xh-control-h-sm);
     --xh-_transfer-px: var(--xh-control-px-sm);
     --xh-_transfer-gap: var(--xh-control-gap-sm);
     --xh-_transfer-font-size: var(--xh-control-font-sm);
@@ -62,6 +68,7 @@
   [data-scope='transfer'][data-part='root'][data-size='lg'] {
     --xh-icon-size: var(--xh-transfer-icon-size, var(--xh-glyph-size-lg));
     --xh-_transfer-item-py: var(--xh-list-option-py-lg);
+    --xh-_transfer-h: var(--xh-control-h-lg);
     --xh-_transfer-px: var(--xh-control-px-lg);
     --xh-_transfer-gap: var(--xh-control-gap-lg);
     --xh-_transfer-font-size: var(--xh-control-font-lg);
@@ -140,7 +147,7 @@
     min-inline-size: 0;
     overflow: hidden;
     color: var(--xh-transfer-panel-title-fg, var(--xh-fg-default));
-    /* 面板标头是 Surface 内的标题：14 / 600（§6.4） */
+    /* 面板标头是 Surface 内的标题：14 / 600 */
     font-size: var(--xh-transfer-panel-title-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-transfer-panel-title-font-weight, var(--xh-font-weight-semibold));
     line-height: var(--xh-leading-none);
@@ -163,19 +170,32 @@
     content: attr(data-checked-count) ' / ' attr(data-count);
   }
 
+  /* 面板内嵌的搜索框：通栏一行，控件高与字号随尺寸档，只画一道面内分隔的下划线（取面材质的分隔令牌）；
+     重置与占位前景由字段家族按 data-xh-field-input 给 */
   [data-scope='transfer'][data-part='search'] {
+    --xh-field-placeholder-fg: var(--xh-transfer-placeholder-fg, var(--xh-fg-subtle));
+    /* 自动填充铺的底取所在面板的面，不取画布：否则框内比周围亮出（或暗出）一块 */
+    --xh-field-autofill-bg: var(--xh-bg-surface);
+
     display: block;
+    flex: none;
     inline-size: 100%;
-    block-size: var(--xh-transfer-search-h, var(--xh-control-h-sm));
+    block-size: var(--xh-transfer-search-h, var(--xh-_transfer-h));
+    padding-block: 0;
     padding-inline: var(--xh-transfer-search-px, var(--xh-_transfer-px));
     border: 0;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-search-border, var(--xh-border-control));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-search-border, var(--xh-material-solid-separator));
     background: var(--xh-transfer-search-bg, transparent);
     color: var(--xh-transfer-search-fg, var(--xh-fg-default));
     font: inherit;
     font-size: var(--xh-transfer-search-font-size, var(--xh-_transfer-font-size));
   }
 
+  /* 聚焦不画环：插入符就是焦点指示。框没有外壳，全局那圈键盘焦点环只会压在通栏一行上 */
+  [data-scope='transfer'][data-part='search']:focus-visible {
+    outline: none;
+  }
+
   /* 单体控件的禁用是原生 disabled，样式只能写 :disabled；集合条目才读 data-disabled */
   [data-scope='transfer'][data-part='search']:disabled {
     color: var(--xh-fg-disabled);
@@ -193,6 +213,38 @@
     padding-block: var(--xh-transfer-list-py, var(--xh-space-1));
     padding-inline: var(--xh-transfer-list-px, var(--xh-space-1));
     overflow: auto;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 刷新：这一侧已有条目时后台在取，保留上一帧，列表按 micro 淡下，数据到了再淡回；在途占位此时让位 */
+  [data-scope='transfer'][data-part='list'][aria-busy='true'] {
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  /* Virtualizer viewport 才是真正的滚动层。此时 list 只负责 Transfer 的定高，
+     不再用内边距和自身滚动制造第二个窗口；viewport 铺满整块内容区，
+     贴着它量出的自绘滚动条也就从列表顶一直落到列表底。 */
+  [data-scope='transfer'][data-part='list'][data-xh-virtualized] {
+    gap: 0;
+    min-block-size: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  /* Vue / React 的 virtualizer root 在 list 外，下面第一条只命中 viewport；
+     Web Components 的 Light DOM root 在 list 内，两条一起命中。
+     Web 作者把 xh-virtualizer 宿主设为 display: contents 后，root 会直接参与 list 的 flex 排布。 */
+  [data-scope='transfer'][data-part='list'][data-xh-virtualized]
+  [data-scope='virtualizer'][data-part='root'] {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    block-size: 100%;
+  }
+
+  [data-scope='transfer'][data-part='list'][data-xh-virtualized]
+  [data-scope='virtualizer'][data-part='viewport'] {
+    min-block-size: 0;
+    block-size: 100%;
   }
 
   /* 焦点在列表外时容器自己进 Tab 序列兜底，落焦不画环：高亮永远长在条目上 */
@@ -207,7 +259,7 @@
     flex: none;
     padding-block: var(--xh-transfer-empty-py, var(--xh-space-3));
     padding-inline: var(--xh-transfer-empty-px, var(--xh-_transfer-px));
-    color: var(--xh-transfer-empty-fg, var(--xh-fg-subtle));
+    color: var(--xh-transfer-empty-fg, var(--xh-fg-muted));
     font-size: var(--xh-transfer-empty-font-size, var(--xh-_transfer-font-size));
     line-height: var(--xh-leading-none);
     text-align: center;
@@ -224,11 +276,14 @@
 
   /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
   [data-scope='transfer'][data-part='loading'] {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-_transfer-gap);
     flex: none;
     padding-block: var(--xh-transfer-loading-py, var(--xh-space-3));
     padding-inline: var(--xh-transfer-loading-px, var(--xh-_transfer-px));
-    color: var(--xh-transfer-loading-fg, var(--xh-fg-subtle));
+    color: var(--xh-transfer-loading-fg, var(--xh-fg-muted));
     font-size: var(--xh-transfer-loading-font-size, var(--xh-_transfer-font-size));
     line-height: var(--xh-leading-none);
     text-align: center;
@@ -238,6 +293,15 @@
     display: none;
   }
 
+  /* 首次加载：文案前一枚加载环，由加载环配方画（连接层投影 data-xh-loading-ring 与 data-loading），
+     直径取所在尺寸档的图标档 */
+  [data-scope='transfer'][data-part='loading']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
   [data-scope='transfer'][data-part='loading'][data-disabled] {
     color: var(--xh-fg-disabled);
   }
@@ -270,7 +334,7 @@
     display: block;
     padding-block: var(--xh-transfer-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-transfer-group-label-px, var(--xh-_transfer-px));
-    color: var(--xh-transfer-group-label-fg, var(--xh-fg-subtle));
+    color: var(--xh-transfer-group-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-transfer-group-label-font-size, var(--xh-text-caption-size));
     font-weight: var(--xh-transfer-group-label-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-none);
@@ -285,7 +349,7 @@
     color: var(--xh-fg-disabled);
   }
 
-  /* 条目走 Collection Item 的 page 语境（页内持久集合，§7.3）：悬停 / 高亮 / 按下面（白底承载 hover 100 →
+  /* 条目走 Collection Item 的 page 语境（页内持久集合）：悬停 / 高亮 / 按下面（白底承载 hover 100 →
      pressed 200）与勾选行的选中面（品牌淡底 + 淡底前景，selected+hover 20% / +pressed 28%）都由家族按
      aria-selected / aria-disabled 给出，标记由行首的勾选方框承担；禁用面（字色降级、not-allowed、不换面）
      也归家族。这里只把公开槽映射到桥接槽。
@@ -295,7 +359,7 @@
     --xh-collection-inline-padding: var(--xh-transfer-item-px, var(--xh-_transfer-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-transfer-item-font-size, var(--xh-_transfer-font-size));
-    --xh-collection-radius: var(--xh-transfer-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-transfer-item-radius, var(--xh-shape-inset));
     /* 作者的图标尺槽经桥接槽下发到条目，家族缺省按 data-xh-collection-size 取档 */
     --xh-collection-glyph-size: var(--xh-transfer-icon-size, var(--xh-_collection-glyph-size));
     --xh-collection-fg-rest: var(--xh-transfer-item-fg, var(--xh-fg-default));
@@ -360,7 +424,7 @@
     font-size: var(--xh-transfer-checkbox-font-size, calc(var(--xh-_transfer-box) * 0.75));
     line-height: var(--xh-leading-none);
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -383,64 +447,9 @@
     --xh-_ring-color: currentColor;
   }
 
-  /* 没写内容就由皮肤画勾；作者往格子里塞了自己的图形，这条规则即不命中。
-     底下两处（全选格的两态）不带这条守卫：触发器里装的是全选那行文字，:empty 恒不命中 */
-  [data-scope='transfer'][data-part='item-checkbox'][data-state='checked']:empty::before {
-    content: '';
-    display: inline-block;
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    vertical-align: var(--xh-glyph-baseline-shift);
-    background-color: currentColor;
-    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-  }
-
-  /* 全选格的三态：all 打勾、some 打横杠、none 留空。
-     some 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state。
-
-     字形走 ::after 而不是画方框的那颗 ::before：mask 会把所在元素的描边与底色一并裁成
-     字形的轮廓，写在 ::before 上就等于把方框本身裁没了，只剩一枚白勾。条目那一侧是
-     真实节点当方框、它的 ::before 当字形的两层结构，这里没有第二个节点，只能用
-     第二个伪元素补上那一层。
-     方框是行首那颗 ::before、宽度即勾选格尺寸，所以字形按「盒与字形的宽度差之半」
-     内推即落在圆心；纵向靠 inset-block: 0 + margin-block: auto 居中。
-     font-size 与 ::before 同值，--xh-icon-size 的 1em 兜底才和条目那侧量得一样大 */
-  [data-scope='transfer'][data-part='select-all-trigger'][data-state='checked']::after {
-    content: '';
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: 0;
-    margin-block: auto;
-    margin-inline-start: calc(
-      (var(--xh-transfer-checkbox-size, var(--xh-_transfer-box)) - var(--xh-icon-size, var(--xh-glyph-size-text))) /
-        2
-    );
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    background-color: var(--xh-transfer-checkbox-fg, var(--xh-_transfer-on-accent));
-    font-size: var(--xh-transfer-checkbox-font-size, calc(var(--xh-_transfer-box) * 0.75));
-    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
-  }
-
-  [data-scope='transfer'][data-part='select-all-trigger'][data-state='indeterminate']::after {
-    content: '';
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: 0;
-    margin-block: auto;
-    margin-inline-start: calc(
-      (var(--xh-transfer-checkbox-size, var(--xh-_transfer-box)) - var(--xh-icon-size, var(--xh-glyph-size-text))) /
-        2
-    );
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    background-color: var(--xh-transfer-checkbox-fg, var(--xh-_transfer-on-accent));
-    font-size: var(--xh-transfer-checkbox-font-size, calc(var(--xh-_transfer-box) * 0.75));
-    -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
-  }
+  /* 格子里的勾与全选格的三态标记（all 打勾、some 打横杠、none 留空）由勾选标记配方画：常驻、按状态淡变
+     并轻缩放。条目的格子是真实节点，标记是它的 ::before；全选格自己就是按钮，方框只能是行首那颗 ::before，
+     标记是 ::after、叠在方框正中——两支桥接槽写在全选格上 */
 
   [data-scope='transfer'][data-part='item-checkbox'][data-disabled] {
     border-color: var(--xh-transfer-checkbox-border-disabled, var(--xh-border-default));
@@ -448,13 +457,16 @@
   }
 
   /* 全选格是原生按钮（三态经 aria-checked 上报，激活由平台负责），禁用同时打原生 disabled 与 data-disabled。
-     它是「方框 + 文案」的整行命中区（§9.2）：接 Action Control text 档、ghost 形态，悬停 / 按下 / 禁用面与过渡由家族给
+     它是「方框 + 文案」的整行命中区：接 Action Control text 档、ghost 形态，悬停 / 按下 / 禁用面与过渡由家族给
      （白底承载 hover 100 → pressed 200），按下只换面不缩放（--xh-action-scale-pressed: none），勾选回执落在方框上；
      盒随内容收宽、高度取 xs 档的 24px 命中地板（方框 16px 居中其间），text 档的内距与最小宽度归零。
      position 是给叠在方框上的那颗字形 ::after 当定位基准 */
   [data-scope='transfer'][data-part='select-all-trigger'] {
     /* 叠在方框上的那颗字形 ::after 与方框里的勾同一把尺 */
     --xh-icon-size: calc(var(--xh-transfer-checkbox-size, var(--xh-_transfer-box)) * 0.75);
+    /* 勾选标记叠在行首方框正中：方框边长与标记色交给配方 */
+    --xh-check-mark-box-size: var(--xh-transfer-checkbox-size, var(--xh-_transfer-box));
+    --xh-check-mark-fg: var(--xh-transfer-checkbox-fg, var(--xh-_transfer-on-accent));
 
     --xh-action-min-inline-size: 0;
     --xh-action-padding-inline: 0;
@@ -476,17 +488,9 @@
     font-weight: var(--xh-font-weight-medium);
   }
 
-  /* 家族 text 档在粗指针下用 ::after 扩热区，勾中 / 半选时这里的 ::after 是叠在方框上的字形：钉回原位、下限归零 */
-  @media (pointer: coarse) {
-    [data-scope='transfer'][data-part='select-all-trigger']:is([data-state='checked'], [data-state='indeterminate'])::after {
-      min-block-size: 0;
-      translate: none;
-    }
-  }
-
   /* 两颗搬运钮是只有字形的离散动作钮：接 Action Control 的 icon 档、outline 形态（中性描边、透明底，
      白底承载 hover 100 → pressed 200，按下 0.97 并同时换底），盒、焦点环、粗指针热区与禁用面由家族给；
-     此前的 raised 悬停抬升退役（§8.3 边界只由描边承担）。这里只把使用者槽映射到桥接槽；
+     此前的 raised 悬停抬升退役（边界只由描边承担）。这里只把使用者槽映射到桥接槽；
      钮是正方盒，按 sm 档取一个控件高 */
   [data-scope='transfer'][data-part='to-target-trigger'],
   [data-scope='transfer'][data-part='to-source-trigger'] {
@@ -612,4 +616,23 @@
       mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='transfer']:is([data-part='to-source-trigger'], [data-part='to-target-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='transfer']:is([data-part='to-source-trigger'], [data-part='to-target-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='transfer']:is([data-part='to-source-trigger'], [data-part='to-target-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }