@xihan-ui/styles 2.1.0 → 3.0.0

package/css/toolbar.css

@@ -31,7 +31,8 @@
     --xh-_toolbar-root-bg: transparent;
     --xh-_toolbar-root-bg-disabled: transparent;
 
-    /* 一行排不下就折行：条目宽度由各自的控件决定，硬撑一行会把整条顶出容器 */
+    /* 一行排不下就折行：条目宽度由各自的控件决定，硬撑一行会把整条顶出容器。
+       放了「更多」钮时改为收纳，见下方收纳一节 */
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -44,7 +45,7 @@
     color: var(--xh-toolbar-fg, var(--xh-fg-default));
     /* 整条置灰与恢复是一次状态切换，底色与字色淡着换，不硬切 */
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -181,12 +182,16 @@
   }
 
   /* 组内分段使用同一块中性操作面（淡底承载：hover 200 → pressed 300 由 host 槽下发）；
-     中间段保持直角，只给整组两端补回控件圆角。按下态 / 禁用面与散落条目同一套规则 */
+     中间段保持直角，只给整组两端补回控件圆角。按下态 / 禁用面与散落条目同一套规则。
+     分段零间距直角相接，按下只换面不缩放：缩放任一段都会把两侧接缝撕开 */
   [data-scope='toolbar'][data-part='group'] > [data-scope='toolbar'][data-part='item'] {
     --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
     --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
     --xh-action-radius: 0;
+    --xh-action-scale-pressed: none;
     --xh-action-bg-disabled: var(--xh-toolbar-item-bg-disabled, var(--xh-bg-subtle));
+    /* 组末端补回的控件圆角：尾部几段收进「更多」菜单后，由留下的最后一段接过去 */
+    --xh-_toolbar-segment-end-radius: var(--xh-toolbar-item-radius, var(--xh-shape-control));
 
     position: relative;
   }
@@ -257,6 +262,80 @@
     margin-block-start: calc(-1 * var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin)));
   }
 
+  /* —— 收纳 —— */
+  /* 放了「更多」钮就不折行：放不下的条目按次序收进它弹出的菜单。条目与分组不压缩——压缩了，
+     量到的就不是自然长度；root 在 flex 父容器里可以被压到比内容窄，可用长度由外面给 */
+  [data-scope='toolbar'][data-part='root']:has(> [data-scope='toolbar'][data-part='overflow-trigger']) {
+    flex-wrap: nowrap;
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+
+  [data-scope='toolbar'][data-part='root']:has(> [data-scope='toolbar'][data-part='overflow-trigger'])
+    > :is([data-scope='toolbar'][data-part='item'], [data-scope='toolbar'][data-part='group']) {
+    flex-shrink: 0;
+  }
+
+  /* 收起的条目之前的分隔线与整组收空的分组一并让开：它们分隔的那一侧已经没有露着的条目，
+     留着会在「更多」钮前多出一道线、多出一截间距 */
+  [data-scope='toolbar'][data-part='root']:has(> [data-scope='toolbar'][data-part='overflow-trigger']:not([hidden]))
+    > [data-scope='toolbar'][data-part='separator']:not(
+      :has(
+        ~ [data-scope='toolbar'][data-part='item']:not([hidden]),
+        ~ [data-scope='toolbar'][data-part='group'] > [data-scope='toolbar'][data-part='item']:not([hidden])
+      )
+    ),
+  [data-scope='toolbar'][data-part='root']:has(> [data-scope='toolbar'][data-part='overflow-trigger']:not([hidden]))
+    > [data-scope='toolbar'][data-part='group']:not(:has(> [data-scope='toolbar'][data-part='item']:not([hidden]))),
+  [data-scope='toolbar'][data-part='root']:has(> [data-scope='toolbar'][data-part='overflow-trigger']:not([hidden]))
+    > [data-scope='toolbar'][data-part='group']
+    > [data-scope='toolbar'][data-part='separator']:not(:has(~ [data-scope='toolbar'][data-part='item']:not([hidden]))) {
+    display: none;
+  }
+
+  /* 组的尾部几段收进菜单后，留下的最后一段补回末端圆角 */
+  [data-scope='toolbar'][data-part='group'][data-orientation='horizontal']
+    > [data-scope='toolbar'][data-part='item']:not([hidden]):not(:has(~ [data-scope='toolbar'][data-part='item']:not([hidden]))) {
+    border-start-end-radius: var(--xh-_toolbar-segment-end-radius);
+    border-end-end-radius: var(--xh-_toolbar-segment-end-radius);
+  }
+
+  [data-scope='toolbar'][data-part='group'][data-orientation='vertical']
+    > [data-scope='toolbar'][data-part='item']:not([hidden]):not(:has(~ [data-scope='toolbar'][data-part='item']:not([hidden]))) {
+    border-end-start-radius: var(--xh-_toolbar-segment-end-radius);
+    border-end-end-radius: var(--xh-_toolbar-segment-end-radius);
+  }
+
+  /* 「更多」钮：行尾一枚单图标钮，接 Action Control icon 档 ghost 面，与条目同档（连接层投影 profile /
+     variant / size）。盒取条目同高的正方形，四态面、0.97 按压、焦点环与粗指针 44px 命中区由家族配方给；
+     承载面的阶梯随根的 variant 经 host 槽下发（ghost 根白底 100 → 200，subtle 根淡底 200 → 300） */
+  [data-scope='toolbar'][data-part='overflow-trigger'] {
+    touch-action: manipulation;
+  }
+
+  /* 菜单开着：与悬停同档的中性面，不用品牌色、不另画环；收起的是哪几条由菜单本身说明 */
+  [data-scope='toolbar'][data-part='overflow-trigger'][data-state='open'] {
+    --xh-action-bg-rest: var(--xh-_action-variant-bg-hover);
+    --xh-action-bg-focus-visible: var(--xh-_action-variant-bg-hover);
+  }
+
+  /* 没写内容就由皮肤画兜底字形：横排三点。作者塞了自己的图标这条即不命中；
+     字形与条目里的图标同一把尺（根按尺寸档下发的 --xh-icon-size） */
+  [data-scope='toolbar'][data-part='overflow-trigger']: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));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-ellipsis) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-ellipsis) center / contain no-repeat;
+  }
+
+  /* 全部放得下时连接层给的是 hidden 属性；家族那条 display 会把 UA 规则盖掉 */
+  [data-scope='toolbar'][data-part='overflow-trigger'][hidden] {
+    display: none;
+  }
+
   @media (forced-colors: active) {
     /* 分段之间那条线画的是一块纯底色，这一档里底色被统一换成 Canvas，线整条消失，
        几段控件就连成了一长串。换成前景色画回来 */
@@ -264,4 +343,23 @@
       background: CanvasText;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='toolbar'][data-part='overflow-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='toolbar'][data-part='overflow-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='toolbar'][data-part='overflow-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/tooltip.css

@@ -114,6 +114,18 @@
     backdrop-filter: var(--xh-tooltip-backdrop, var(--xh-material-frosted-compact-backdrop));
   }
 
+  /* 跟随鼠标的提示压在指针旁边、随指针挪：它接了指针就会挡住 trigger 上的移动，指针一滑进去便算离开了 trigger。
+     这一档浮层本体同样让指针穿过去，停留细看交给 trigger 本身 */
+  [data-scope='tooltip'][data-part='positioner'][data-follow-cursor] [data-scope='tooltip'][data-part='content'] {
+    pointer-events: none;
+  }
+
+  /* 反白面是一块彩色面（连接层打 data-xh-ink-surface）：面内的作者内容按这块底取墨色。
+     底色取自被墨色域改写的令牌，所以域只落在面内的子元素上，这里的取值仍按外层主题解析 */
+  [data-scope='tooltip'][data-part='content'][data-xh-ink-surface] {
+    --xh-ink-surface: var(--xh-tooltip-bg, var(--xh-_tooltip-solid));
+  }
+
   /* 光学层单独承载 tint 与透明度；backdrop-filter 只采样元素背后，不处理正文。 */
   [data-scope='tooltip'][data-part='content']::before {
     content: '';
@@ -126,8 +138,9 @@
     pointer-events: none;
   }
 
-  /* 入场走 enter 档（锚定列表族的 tooltip 入场 --xh-motion-duration-enter），退场仍是 exit */
-  [data-scope='tooltip'][data-part='content'][data-state='open'] {
+  /* 入场走 enter 档（锚定列表族的 tooltip 入场 --xh-motion-duration-enter），退场仍是 exit。
+     接替上一个提示打开的（data-instant）直接呈现：横扫一排钮时提示一个个跟上，不再一个个滑入 */
+  [data-scope='tooltip'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 

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);
   }
 
@@ -209,7 +219,8 @@
   /* 焦点落在气泡本身，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);
   }
 
@@ -236,7 +247,7 @@
   /* 说明文字走说明档：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));
   }
@@ -266,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);
   }
 
@@ -406,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 探一次，取不到就说明这份皮肤没被引入。 */
@@ -27,9 +31,10 @@
     /* 两侧定高小列表的自绘条挂在根上：根是条子的定位盒（面板不定位），轨道底色关掉才不会在列表边缘糊出一条灰带 */
     --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);
@@ -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);
@@ -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));
@@ -455,6 +464,9 @@
   [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,14 +488,6 @@
     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 悬停抬升退役（边界只由描边承担）。这里只把使用者槽映射到桥接槽；
@@ -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;
+    }
+  }
 }