@xihan-ui/styles 1.0.0 → 2.0.0

package/css/transfer.css

@@ -1,47 +1,109 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 transfer 样式。 */
+
+@import '../family/action-control.css';
+@import '../family/collection-item.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='transfer'] {
     --xh-transfer-skin: 1;
   }
 
-  /* 三栏栅格：两侧面板各占一栏、跨两行，中间那栏上下各放一个搬运按钮，
-     两个按钮在中线处相遇。栅格的列号本身就是随书写方向走的（第 1 栏永远在行首侧），
-     dir=rtl 时整块自动镜像，不必另写一套。
+  /* 三栏栅格：宽档两侧面板各占一栏、跨两行，中间那栏上下各放一个搬运按钮；
+     窄档四个节点改按行叠放，中栏被两个按钮各跨一半、宽度收成零，两钮因此仍在中线相遇。
+     两档共用这一份轨道声明，换档靠四个子节点各自换安放。
+     栅格的列号本身就是随书写方向走的（第 1 栏永远在行首侧），dir=rtl 时整块自动镜像。
      中间那栏没有对应的角色节点（anatomy 里两个按钮是 root 的直接子节点），
-     所以只能按位置显式安放，不能靠自动流——自动流会把"往左搬"甩到右侧面板的位置上 */
+     所以只能按位置显式安放，不能靠自动流——自动流会把"往回搬"甩到目标面板的位置上 */
   [data-scope='transfer'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-transfer-icon-size, var(--xh-glyph-size-text));
+    /* 条目外的字形（空态占位里作者塞的图标）按档取尺，缺省 md；条目内的字形由家族随 data-xh-collection-size
+       下发，搬运钮内的按 Action Control icon 档取，勾选格里的勾按边长比例取（§6.5） */
+    --xh-icon-size: var(--xh-transfer-icon-size, var(--xh-glyph-size-md));
+    /* 两侧定高小列表的自绘条挂在根上（§6.6）：根是条子的定位盒（面板不定位），轨道底色关掉才不会在列表边缘糊出一条灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
+    /* 尺寸档只换这五个私有槽，面板头、搜索框、条目与勾选格都从 root 继承它们，
+       换档不必给每个部件各写一条选择器 */
+    --xh-_transfer-item-py: var(--xh-list-option-py-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);
+    --xh-_transfer-box: var(--xh-control-indicator-md);
+
+    /* 勾选格的填色随语气走；没写 data-tone 时退回品牌色 */
+    --xh-_transfer-accent: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_transfer-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
 
+    position: relative;
     display: grid;
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: auto auto;
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
     gap: var(--xh-transfer-gap, var(--xh-space-3));
     align-items: center;
     color: var(--xh-transfer-fg, var(--xh-fg-default));
   }
 
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  [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-px: var(--xh-control-px-sm);
+    --xh-_transfer-gap: var(--xh-control-gap-sm);
+    --xh-_transfer-font-size: var(--xh-control-font-sm);
+    --xh-_transfer-box: var(--xh-control-indicator-sm);
+  }
+
+  [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-px: var(--xh-control-px-lg);
+    --xh-_transfer-gap: var(--xh-control-gap-lg);
+    --xh-_transfer-font-size: var(--xh-control-font-lg);
+    --xh-_transfer-box: var(--xh-control-indicator-lg);
+  }
+
+  /* 校验失败：两侧面板换成错误描边，与其余表单控件同一套表达 */
+  [data-scope='transfer'][data-part='root'][data-invalid]
+    :is([data-scope='transfer'][data-part='source-panel'], [data-scope='transfer'][data-part='target-panel']) {
+    border-color: var(--xh-transfer-panel-border-invalid, var(--xh-border-invalid));
+  }
+
+  /* 只读勾不动也搬不动，但不是禁用：颜色照常，只把"可点"这个暗示收回来。
+     排掉禁用项是因为这条选择器权重高过条目那条，不排就会把禁用的手势指示覆盖回 default */
+  [data-scope='transfer'][data-part='root'][data-readonly]
+    [data-scope='transfer'][data-part='item']:not([data-disabled]) {
+    cursor: default;
+  }
+
+  /* 窄档：源面板在上、目标面板在下，各自跨满三栏 */
   [data-scope='transfer'][data-part='source-panel'] {
-    grid-row: 1 / 3;
-    grid-column: 1;
+    grid-row: 1;
+    grid-column: 1 / 4;
   }
 
   [data-scope='transfer'][data-part='target-panel'] {
-    grid-row: 1 / 3;
-    grid-column: 3;
+    grid-row: 3;
+    grid-column: 1 / 4;
   }
 
-  /* 上格贴底、下格贴顶：两个按钮因此夹着中线成对出现，而不是各自漂在半栏中央 */
+  /* 两钮同占中间一行，各跨到中栏为止，一个贴行尾侧、一个贴行首侧，
+     因此夹着中线成对出现，而不是各自漂在半行中央 */
   [data-scope='transfer'][data-part='to-target-trigger'] {
-    grid-row: 1;
-    grid-column: 2;
-    align-self: end;
+    grid-row: 2;
+    grid-column: 1 / 3;
+    justify-self: end;
   }
 
   [data-scope='transfer'][data-part='to-source-trigger'] {
     grid-row: 2;
-    grid-column: 2;
-    align-self: start;
+    grid-column: 2 / 4;
+    justify-self: start;
   }
 
   [data-scope='transfer'][data-part='source-panel'],
@@ -62,12 +124,13 @@
     background: var(--xh-transfer-panel-bg-disabled, var(--xh-bg-muted));
   }
 
+  /* 面板内三个角色的槽都带 panel- 段，与部件名逐字对上 */
   [data-scope='transfer'][data-part='panel-header'] {
     display: flex;
-    gap: var(--xh-transfer-header-gap, var(--xh-control-gap-md));
+    gap: var(--xh-transfer-panel-header-gap, var(--xh-_transfer-gap));
     align-items: center;
-    padding-block: var(--xh-transfer-header-py, var(--xh-space-2));
-    padding-inline: var(--xh-transfer-header-px, var(--xh-control-px-md));
+    padding-block: var(--xh-transfer-panel-header-py, var(--xh-space-2));
+    padding-inline: var(--xh-transfer-panel-header-px, var(--xh-_transfer-px));
     border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-panel-border, var(--xh-border-default));
   }
 
@@ -76,9 +139,10 @@
     flex: 1;
     min-inline-size: 0;
     overflow: hidden;
-    color: var(--xh-transfer-title-fg, var(--xh-fg-default));
-    font-size: var(--xh-transfer-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-transfer-title-font-weight, var(--xh-text-label-weight));
+    color: var(--xh-transfer-panel-title-fg, var(--xh-fg-default));
+    /* 面板标头是 Surface 内的标题：14 / 600（§6.4） */
+    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);
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -86,8 +150,8 @@
 
   [data-scope='transfer'][data-part='panel-count'] {
     flex: none;
-    color: var(--xh-transfer-count-fg, var(--xh-fg-subtle));
-    font-size: var(--xh-transfer-count-font-size, var(--xh-text-caption-size));
+    color: var(--xh-transfer-panel-count-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-transfer-panel-count-font-size, var(--xh-text-caption-size));
     line-height: var(--xh-leading-none);
     font-variant-numeric: tabular-nums;
   }
@@ -103,24 +167,18 @@
     display: block;
     inline-size: 100%;
     block-size: var(--xh-transfer-search-h, var(--xh-control-h-sm));
-    padding-inline: var(--xh-transfer-search-px, var(--xh-control-px-md));
+    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));
     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-text-body-size));
-  }
-
-  [data-scope='transfer'][data-part='search']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(var(--xh-ring-offset) * -1);
+    font-size: var(--xh-transfer-search-font-size, var(--xh-_transfer-font-size));
   }
 
   /* 单体控件的禁用是原生 disabled，样式只能写 :disabled；集合条目才读 data-disabled */
   [data-scope='transfer'][data-part='search']:disabled {
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
   }
 
   /* 两侧列表定高：高度只由这个槽给，与条目数无关。左右两块因此恒等高，
@@ -142,42 +200,136 @@
     outline: none;
   }
 
+  /* 空态占位：待在面板里、list 的兄弟（列表框只许拥有 option 与 group）。
+     盒归面板，这里只画一句居中的次要文字 */
+  [data-scope='transfer'][data-part='empty'] {
+    display: block;
+    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));
+    font-size: var(--xh-transfer-empty-font-size, var(--xh-_transfer-font-size));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  /* 上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
+  [data-scope='transfer'][data-part='empty'][hidden] {
+    display: none;
+  }
+
+  [data-scope='transfer'][data-part='empty'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
+  [data-scope='transfer'][data-part='loading'] {
+    display: block;
+    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));
+    font-size: var(--xh-transfer-loading-font-size, var(--xh-_transfer-font-size));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  [data-scope='transfer'][data-part='loading'][hidden] {
+    display: none;
+  }
+
+  [data-scope='transfer'][data-part='loading'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  [data-scope='transfer'][data-part='group'] {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    gap: var(--xh-transfer-group-gap, var(--xh-list-option-gap));
+  }
+
+  [data-scope='transfer'][data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 组内条目搬到对面、或被搜索筛掉时都只是打 hidden，一条不剩的分组连标题一起撤下，
+     免得列表里留着一排够不着的标题 */
+  [data-scope='transfer'][data-part='group']:not(:has([data-part='item']:not([hidden]))) {
+    display: none;
+  }
+
+  /* 组间留白只加在后继分组上：首组顶上已经有 list 的内边距，再加一层会显得头重 */
+  [data-scope='transfer'][data-part='group'] + [data-scope='transfer'][data-part='group'] {
+    margin-block-start: var(--xh-transfer-group-spacing, var(--xh-space-1_5));
+  }
+
+  /* 分组标题不是选项、进不了导航，画成小号次要文字，
+     内缩与条目对齐（同一个 padding-inline），标题与条目文字才在一条竖线上 */
+  [data-scope='transfer'][data-part='group-label'] {
+    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));
+    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);
+    user-select: none;
+  }
+
+  [data-scope='transfer'][data-part='group-label'][hidden] {
+    display: none;
+  }
+
+  [data-scope='transfer'][data-part='group-label'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 条目走 Collection Item 的 page 语境（页内持久集合，§7.3）：悬停 / 高亮 / 按下面（白底承载 hover 100 →
+     pressed 200）与勾选行的选中面（品牌淡底 + 淡底前景，selected+hover 20% / +pressed 28%）都由家族按
+     aria-selected / aria-disabled 给出，标记由行首的勾选方框承担；禁用面（字色降级、not-allowed、不换面）
+     也归家族。这里只把公开槽映射到桥接槽。
+     布局保持 flex 而不用家族网格：间距统一由行的 gap 给，家族按槽下发的外边距（--xh-collection-gap）归零 */
   [data-scope='transfer'][data-part='item'] {
+    --xh-collection-block-padding: var(--xh-transfer-item-py, var(--xh-_transfer-item-py));
+    --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));
+    /* 作者的图标尺槽经桥接槽下发到条目，家族缺省按 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));
+    --xh-collection-fg-hover: var(--xh-transfer-item-fg, var(--xh-fg-default));
+    --xh-collection-fg-keyboard-highlight: var(--xh-transfer-item-fg, var(--xh-fg-default));
+    --xh-collection-fg-pressed: var(--xh-transfer-item-fg, var(--xh-fg-default));
+    --xh-collection-fg-selected: var(--xh-transfer-item-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-hover: var(--xh-transfer-item-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-highlight: var(--xh-transfer-item-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-pressed: var(--xh-transfer-item-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-bg-hover: var(--xh-transfer-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-keyboard-highlight: var(--xh-transfer-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-pressed: var(--xh-transfer-item-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected: var(--xh-transfer-item-bg-selected, var(--xh-bg-brand-subtle));
+    /* data-highlighted 跟的是连接层记的焦点条目（指针点选也会落焦）：只换面，焦点环在 :focus-visible 下再接回 */
+    --xh-collection-outline-keyboard-highlight: transparent;
+    --xh-collection-outline-selected-highlight: transparent;
+
     display: flex;
     flex: none;
-    gap: var(--xh-transfer-item-gap, var(--xh-control-gap-md));
+    gap: var(--xh-transfer-item-gap, var(--xh-_transfer-gap));
     align-items: center;
-    padding-block: var(--xh-transfer-item-py, var(--xh-space-1_5));
-    padding-inline: var(--xh-transfer-item-px, var(--xh-control-px-md));
-    border-radius: var(--xh-transfer-item-radius, var(--xh-shape-control));
-    color: var(--xh-transfer-item-fg, var(--xh-fg-default));
-    font-size: var(--xh-transfer-item-font-size, var(--xh-text-body-size));
     /* 行高留出文字的上下伸展空间，行内那层 overflow:hidden 才不会把字削掉 */
     line-height: var(--xh-transfer-item-leading, var(--xh-leading-normal));
     white-space: nowrap;
-    cursor: pointer;
     user-select: none;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  /* 悬停与键盘锚点共用中性灰轻档：条目本身承载焦点，不另画描边。
-     data-highlighted 跟的是连接层记的焦点条目，与勾选互相独立 */
-  [data-scope='transfer'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-transfer-item-bg-hover, var(--xh-bg-subtle));
-  }
-
-  [data-scope='transfer'][data-part='item']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(var(--xh-ring-offset) * -1);
-  }
+  /* 键盘焦点出现时环才接回并立即到位，不压在背景过渡的中间帧上 */
+  [data-scope='transfer'][data-part='item']:focus-visible:not(:hover) {
+    --xh-collection-outline-keyboard-highlight: var(--xh-ring-focus);
+    --xh-collection-outline-selected-highlight: var(--xh-ring-focus);
 
-  /* 禁用走 aria-disabled 而非原生 disabled：条目仍要可聚焦（它还得当方向键的起点），
-     所以样式只能读 data-disabled，写 :disabled 永远不命中 */
-  [data-scope='transfer'][data-part='item'][data-disabled] {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+    transition: none;
   }
 
   [data-scope='transfer'][data-part='item-text'] {
@@ -192,17 +344,20 @@
      两个方框就此走形。全选格没有对应的角色节点（它自己就是按钮），由伪元素补出来 */
   [data-scope='transfer'][data-part='item-checkbox'],
   [data-scope='transfer'][data-part='select-all-trigger']::before {
+    /* 方框里的勾按边长的比例取尺（与 Checkbox 同一比例），不吃家族按档下发的行内字形尺 */
+    --xh-icon-size: calc(var(--xh-transfer-checkbox-size, var(--xh-_transfer-box)) * 0.75);
+
     display: inline-flex;
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-transfer-checkbox-size, var(--xh-control-indicator-size));
-    block-size: var(--xh-transfer-checkbox-size, var(--xh-control-indicator-size));
+    inline-size: var(--xh-transfer-checkbox-size, var(--xh-_transfer-box));
+    block-size: var(--xh-transfer-checkbox-size, var(--xh-_transfer-box));
     border: var(--xh-stroke-thin) solid var(--xh-transfer-checkbox-border, var(--xh-border-control));
     border-radius: var(--xh-transfer-checkbox-radius, var(--xh-shape-inset));
-    background: var(--xh-transfer-checkbox-bg, var(--xh-bg-canvas));
-    color: var(--xh-transfer-checkbox-fg, var(--xh-fg-on-brand));
-    font-size: var(--xh-transfer-checkbox-font-size, calc(var(--xh-control-indicator-size) * 0.75));
+    background: var(--xh-transfer-checkbox-bg, transparent);
+    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));
     line-height: var(--xh-leading-none);
     transition:
       background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
@@ -218,8 +373,14 @@
   /* 勾中即填色。全选格三态里 all 与 some 都算"有值"，与条目共用同一副填色 */
   [data-scope='transfer'][data-part='item-checkbox'][data-state='checked'],
   [data-scope='transfer'][data-part='select-all-trigger']:is([data-state='checked'], [data-state='indeterminate'])::before {
-    border-color: var(--xh-transfer-checkbox-border-checked, var(--xh-bg-brand));
-    background: var(--xh-transfer-checkbox-bg-checked, var(--xh-bg-brand));
+    border-color: var(--xh-transfer-checkbox-border-checked, var(--xh-_transfer-accent));
+    background: var(--xh-transfer-checkbox-bg-checked, var(--xh-_transfer-accent));
+  }
+
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
+  [data-scope='transfer'][data-part='item-checkbox'][data-state='checked']:focus-visible {
+    --xh-_ring-color: currentColor;
   }
 
   /* 没写内容就由皮肤画勾；作者往格子里塞了自己的图形，这条规则即不命中。
@@ -252,13 +413,13 @@
     inset-inline-start: 0;
     margin-block: auto;
     margin-inline-start: calc(
-      (var(--xh-transfer-checkbox-size, var(--xh-control-indicator-size)) - var(--xh-icon-size, var(--xh-glyph-size-text))) /
+      (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-fg-on-brand));
-    font-size: var(--xh-transfer-checkbox-font-size, calc(var(--xh-control-indicator-size) * 0.75));
+    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;
   }
@@ -270,93 +431,84 @@
     inset-inline-start: 0;
     margin-block: auto;
     margin-inline-start: calc(
-      (var(--xh-transfer-checkbox-size, var(--xh-control-indicator-size)) - var(--xh-icon-size, var(--xh-glyph-size-text))) /
+      (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-fg-on-brand));
-    font-size: var(--xh-transfer-checkbox-font-size, calc(var(--xh-control-indicator-size) * 0.75));
+    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;
   }
 
   [data-scope='transfer'][data-part='item-checkbox'][data-disabled] {
-    border-color: var(--xh-transfer-checkbox-border-disabled, var(--xh-border-subtle));
+    border-color: var(--xh-transfer-checkbox-border-disabled, var(--xh-border-default));
     background: var(--xh-transfer-checkbox-bg-disabled, var(--xh-bg-muted));
   }
 
-  /* 全选格是原生按钮（三态经 aria-checked 上报，激活由平台负责），
-     禁用因此写 :disabled，不写 data-disabled */
-  /* position 是给叠在方框上的那颗字形 ::after 当定位基准 */
+  /* 全选格是原生按钮（三态经 aria-checked 上报，激活由平台负责），禁用同时打原生 disabled 与 data-disabled。
+     它是「方框 + 文案」的整行命中区（§9.2）：接 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'] {
-    position: relative;
-    display: inline-flex;
+    /* 叠在方框上的那颗字形 ::after 与方框里的勾同一把尺 */
+    --xh-icon-size: calc(var(--xh-transfer-checkbox-size, var(--xh-_transfer-box)) * 0.75);
+
+    --xh-action-min-inline-size: 0;
+    --xh-action-padding-inline: 0;
+    --xh-action-gap: var(--xh-transfer-select-all-gap, var(--xh-control-gap-sm));
+    /* 全选格是嵌在面板头里的勾选小块：inset 档圆角（身份表登记） */
+    --xh-action-radius: var(--xh-transfer-select-all-radius, var(--xh-shape-inset));
+    --xh-action-bg-hover: var(--xh-transfer-select-all-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-transfer-select-all-bg-pressed, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-transfer-select-all-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-transfer-select-all-fg, var(--xh-fg-muted));
+    --xh-action-fg-pressed: var(--xh-transfer-select-all-fg, var(--xh-fg-muted));
+    --xh-action-fg-focus-visible: var(--xh-transfer-select-all-fg, var(--xh-fg-muted));
+    --xh-action-font-size: var(--xh-transfer-select-all-font-size, var(--xh-text-caption-size));
+    --xh-action-scale-pressed: none;
+
     flex: none;
-    gap: var(--xh-transfer-select-all-gap, var(--xh-control-gap-sm));
-    align-items: center;
+    justify-content: start;
     padding: 0;
-    border: 0;
-    border-radius: var(--xh-transfer-select-all-radius, var(--xh-shape-control));
-    background: none;
-    color: var(--xh-transfer-select-all-fg, var(--xh-fg-muted));
-    font-size: var(--xh-transfer-select-all-font-size, var(--xh-text-caption-size));
     font-weight: var(--xh-font-weight-medium);
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-  }
-
-  /* 往内收，与搜索框、条目同一口径：全选格长在面板里，面板收 overflow，
-     环画在外沿会被裁掉 */
-  [data-scope='transfer'][data-part='select-all-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-width));
   }
 
-  [data-scope='transfer'][data-part='select-all-trigger']:disabled {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+  /* 家族 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 边界只由描边承担）。这里只把使用者槽映射到桥接槽；
+     钮是正方盒，按 sm 档取一个控件高 */
   [data-scope='transfer'][data-part='to-target-trigger'],
   [data-scope='transfer'][data-part='to-source-trigger'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-inline-size: var(--xh-transfer-trigger-size, var(--xh-control-h-sm));
-    block-size: var(--xh-transfer-trigger-size, var(--xh-control-h-sm));
-    padding-inline: var(--xh-transfer-trigger-px, var(--xh-space-2));
-    border: var(--xh-stroke-thin) solid var(--xh-transfer-trigger-border, var(--xh-border-default));
-    border-radius: var(--xh-transfer-trigger-radius, var(--xh-shape-control));
-    background: var(--xh-transfer-trigger-bg, var(--xh-bg-subtle));
-    color: var(--xh-transfer-trigger-fg, var(--xh-fg-default));
-    font-size: var(--xh-transfer-trigger-font-size, var(--xh-text-label-size));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  [data-scope='transfer'][data-part='to-target-trigger']:hover:not(:disabled),
-  [data-scope='transfer'][data-part='to-source-trigger']:hover:not(:disabled) {
-    background: var(--xh-transfer-trigger-bg-hover, var(--xh-bg-subtle-hover));
-  }
-
-  [data-scope='transfer'][data-part='to-target-trigger']:active:not(:disabled),
-  [data-scope='transfer'][data-part='to-source-trigger']:active:not(:disabled) {
-    background: var(--xh-transfer-trigger-bg-active, var(--xh-bg-subtle-active));
-  }
-
-  [data-scope='transfer'][data-part='to-target-trigger']:focus-visible,
-  [data-scope='transfer'][data-part='to-source-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 搬运按钮是单体控件，禁用走原生 disabled */
-  [data-scope='transfer'][data-part='to-target-trigger']:disabled,
-  [data-scope='transfer'][data-part='to-source-trigger']:disabled {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+    --xh-action-visual-size: var(--xh-transfer-trigger-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-transfer-trigger-size, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-transfer-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-transfer-trigger-radius, var(--xh-shape-control));
+    --xh-action-border-rest: var(--xh-transfer-trigger-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-transfer-trigger-border, var(--xh-_action-variant-border-hover));
+    --xh-action-border-pressed: var(--xh-transfer-trigger-border, var(--xh-_action-variant-border-pressed));
+    --xh-action-bg-rest: var(--xh-transfer-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-transfer-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-transfer-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-transfer-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-transfer-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-transfer-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-shadow-hover: var(--xh-transfer-trigger-shadow-hover, none);
+    --xh-action-shadow-pressed: var(--xh-transfer-trigger-shadow-active, none);
+    --xh-action-font-size: var(--xh-transfer-trigger-font-size, var(--xh-text-label-size));
+    /* 作者塞进钮里的图标与皮肤画的兜底箭头同一把尺：按 icon 档取字形尺寸。
+       配方尚未把 profile 字形档灌进 --xh-icon-size，钮内字形先按 icon 档逐钮取值 */
+    --xh-icon-size: var(--xh-transfer-icon-size, var(--xh-_action-profile-glyph-size));
   }
 
   /* 上面凡是给了 display 的角色节点都要补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
@@ -377,7 +529,8 @@
     display: none;
   }
 
-  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中。
+     堆叠时目标面板在下方，箭头因此朝下与朝上，指的是条目真正要去的方向 */
   [data-scope='transfer'][data-part='to-source-trigger']:empty::before {
     content: '';
     display: inline-block;
@@ -385,8 +538,8 @@
     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-chevron-left) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+    -webkit-mask: var(--xh-glyph-mark-chevron-up) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-up) center / contain no-repeat;
   }
 
   [data-scope='transfer'][data-part='to-target-trigger']:empty::before {
@@ -396,7 +549,67 @@
     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-chevron-right) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    -webkit-mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
+  }
+
+  /* 宽档：视口放得下两块面板，回到并排——两侧面板各占一栏、跨两行，
+     中间那栏上下各放一个搬运按钮，上格贴底、下格贴顶，两钮夹着中线相遇 */
+  @media (min-width: 640px) {
+    [data-scope='transfer'][data-part='source-panel'] {
+      grid-row: 1 / 3;
+      grid-column: 1;
+    }
+
+    [data-scope='transfer'][data-part='target-panel'] {
+      grid-row: 1 / 3;
+      grid-column: 3;
+    }
+
+    [data-scope='transfer'][data-part='to-target-trigger'] {
+      grid-row: 1;
+      grid-column: 2;
+      align-self: end;
+      justify-self: stretch;
+    }
+
+    [data-scope='transfer'][data-part='to-source-trigger'] {
+      grid-row: 2;
+      grid-column: 2;
+      align-self: start;
+      justify-self: stretch;
+    }
+
+    /* 单向组合的唯一动作跨过两行，中心才与两侧面板的中心重合。 */
+    [data-scope='transfer'][data-part='root'][data-one-way]
+      > [data-scope='transfer'][data-part='to-target-trigger'] {
+      grid-row: 1 / 3;
+      align-self: center;
+    }
+
+    /* 并排时目标面板在行尾侧，箭头改回朝行尾与朝行首。
+       盒的量法与窄档那两条逐字相同：兜底字形的盒必须按 --xh-icon-size 量，
+       作者换成自己的图标才和皮肤画的一样大 */
+    [data-scope='transfer'][data-part='to-source-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));
+      vertical-align: var(--xh-glyph-baseline-shift);
+      background-color: currentColor;
+      -webkit-mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+      mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+    }
+
+    [data-scope='transfer'][data-part='to-target-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));
+      vertical-align: var(--xh-glyph-baseline-shift);
+      background-color: currentColor;
+      -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+      mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    }
   }
 }