@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/transfer.css

@@ -0,0 +1,644 @@
+/*
+ * 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/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 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-transfer {
+    --xh-transfer-skin: 1;
+  }
+
+  /* 三栏栅格：宽档两侧面板各占一栏、跨两行，中间那栏上下各放一个搬运按钮；
+     窄档四个节点改按行叠放，中栏被两个按钮各跨一半、宽度收成零，两钮因此仍在中线相遇。
+     两档共用这一份轨道声明，换档靠四个子节点各自换安放。
+     栅格的列号本身就是随书写方向走的（第 1 栏永远在行首侧），dir=rtl 时整块自动镜像。
+     中间那栏没有对应的角色节点（anatomy 里两个按钮是 root 的直接子节点），
+     所以只能按位置显式安放，不能靠自动流——自动流会把"往回搬"甩到目标面板的位置上 */
+  .xh-scope-transfer[data-part='root'] {
+    /* 条目外的字形（空态占位里作者塞的图标）按档取尺，缺省 md；条目内的字形由家族随 data-xh-collection-size
+       下发，搬运钮内的按 Action Control icon 档取，勾选格里的勾按边长比例取 */
+    --xh-icon-size: var(--xh-transfer-icon-size, var(--xh-glyph-size-md));
+    /* 两侧定高小列表的自绘条挂在根上：根是条子的定位盒（面板不定位），轨道底色关掉才不会在列表边缘糊出一条灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
+    /* 尺寸档只换这六个私有槽，面板头、搜索框、条目与勾选格都从 root 继承它们，
+       换档不必给每个部件各写一条选择器 */
+    --xh-_transfer-item-py: var(--xh-list-option-py-md);
+    /* 行至少一个同档控件高（md 32px），勾选格、文字与悬停面都有落脚的余量 */
+    --xh-_transfer-item-h: var(--xh-control-h-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);
+    --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: auto auto;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    gap: var(--xh-transfer-gap, var(--xh-space-5));
+    align-items: center;
+    color: var(--xh-transfer-fg, var(--xh-fg-default));
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  .xh-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-item-h: var(--xh-control-h-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);
+    --xh-_transfer-box: var(--xh-control-indicator-sm);
+  }
+
+  .xh-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-item-h: var(--xh-control-h-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);
+    --xh-_transfer-box: var(--xh-control-indicator-lg);
+  }
+
+  /* 校验失败：两侧面板换成错误描边，与其余表单控件同一套表达 */
+  .xh-scope-transfer[data-part='root'][data-invalid]
+    :is(.xh-scope-transfer[data-part='source-panel'], .xh-scope-transfer[data-part='target-panel']) {
+    border-color: var(--xh-transfer-panel-border-invalid, var(--xh-border-invalid));
+  }
+
+  /* 只读勾不动也搬不动，但不是禁用：颜色照常，只把"可点"这个暗示收回来。
+     排掉禁用项是因为这条选择器权重高过条目那条，不排就会把禁用的手势指示覆盖回 default */
+  .xh-scope-transfer[data-part='root'][data-readonly]
+    .xh-scope-transfer[data-part='item']:not([data-disabled]) {
+    cursor: default;
+  }
+
+  /* 窄档：源面板在上、目标面板在下，各自跨满三栏 */
+  .xh-scope-transfer[data-part='source-panel'] {
+    grid-row: 1;
+    grid-column: 1 / 4;
+  }
+
+  .xh-scope-transfer[data-part='target-panel'] {
+    grid-row: 3;
+    grid-column: 1 / 4;
+  }
+
+  /* 两钮同占中间一行，各跨到中栏为止，一个贴行尾侧、一个贴行首侧，
+     因此夹着中线成对出现，而不是各自漂在半行中央 */
+  .xh-scope-transfer[data-part='to-target-trigger'] {
+    grid-row: 2;
+    grid-column: 1 / 3;
+    justify-self: end;
+  }
+
+  .xh-scope-transfer[data-part='to-source-trigger'] {
+    grid-row: 2;
+    grid-column: 2 / 4;
+    justify-self: start;
+  }
+
+  .xh-scope-transfer[data-part='source-panel'],
+  .xh-scope-transfer[data-part='target-panel'] {
+    display: flex;
+    flex-direction: column;
+    block-size: 100%;
+    min-inline-size: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-transfer-panel-border, var(--xh-border-default));
+    border-radius: var(--xh-transfer-panel-radius, var(--xh-shape-surface));
+    background: var(--xh-transfer-panel-bg, var(--xh-bg-surface));
+    overflow: hidden;
+  }
+
+  /* 整体禁用只写在 root 与各角色节点上；面板自己也带 data-disabled，观感一处收口 */
+  .xh-scope-transfer[data-part='source-panel'][data-disabled],
+  .xh-scope-transfer[data-part='target-panel'][data-disabled] {
+    background: var(--xh-transfer-panel-bg-disabled, var(--xh-bg-muted));
+  }
+
+  /* 面板内三个角色的槽都带 panel- 段，与部件名逐字对上。
+     栏头是一条淡底：靠底色与下面的列表分开，不再画分隔线；上下 12px，单行约 40px 高 */
+  .xh-scope-transfer[data-part='panel-header'] {
+    display: flex;
+    gap: var(--xh-transfer-panel-header-gap, var(--xh-_transfer-gap));
+    align-items: center;
+    padding-block: var(--xh-transfer-panel-header-py, var(--xh-space-3));
+    padding-inline: var(--xh-transfer-panel-header-px, var(--xh-_transfer-px));
+    background: var(--xh-transfer-panel-header-bg, var(--xh-bg-muted));
+  }
+
+  /* 标题占满剩余宽度，把计数挤到行尾侧 */
+  .xh-scope-transfer[data-part='panel-title'] {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    color: var(--xh-transfer-panel-title-fg, var(--xh-fg-default));
+    /* 面板标头是 Surface 内的标题：14 / 500 */
+    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-medium));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .xh-scope-transfer[data-part='panel-count'] {
+    flex: none;
+    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;
+  }
+
+  /* 连接层只给数字（data-checked-count / data-count），文案是作者的事：
+     语言、量词、单复数都由他定。作者什么都不写时这里补出"勾中/可见"，
+     写了内容就用作者的（:empty 只命中空节点） */
+  .xh-scope-transfer[data-part='panel-count']:empty::after {
+    content: attr(data-checked-count) ' / ' attr(data-count);
+  }
+
+  /* 面板内嵌的搜索框：通栏一行，控件高与字号随尺寸档，只画一道面内分隔的下划线（取面材质的分隔令牌）；
+     重置与占位前景由字段家族按 data-xh-field-input 给 */
+  .xh-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-_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-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));
+  }
+
+  /* 聚焦不画环：插入符就是焦点指示。框没有外壳，全局那圈键盘焦点环只会压在通栏一行上 */
+  .xh-scope-transfer[data-part='search']:focus-visible {
+    outline: none;
+  }
+
+  /* 单体控件的禁用是原生 disabled，样式只能写 :disabled；集合条目才读 data-disabled */
+  .xh-scope-transfer[data-part='search']:disabled {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 两侧列表定高：高度只由这个槽给，与条目数无关。左右两块因此恒等高，
+     搬走条目、搜索筛掉条目、整侧搬空，面板都停在原地不缩。
+     flex-basis 取 auto 而不是 0，块尺寸才是这一栏真正的主轴基准 */
+  .xh-scope-transfer[data-part='list'] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--xh-transfer-list-gap, var(--xh-list-option-gap));
+    /* 行通栏：列表不留内衬，行面直接贴到面板两缘 */
+    block-size: var(--xh-transfer-list-h, var(--xh-viewport-h-sm));
+    padding-block: var(--xh-transfer-list-py, var(--xh-space-0));
+    padding-inline: var(--xh-transfer-list-px, var(--xh-space-0));
+    overflow: auto;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 刷新：这一侧已有条目时后台在取，保留上一帧，列表按 micro 淡下，数据到了再淡回；在途占位此时让位 */
+  .xh-scope-transfer[data-part='list'][aria-busy='true'] {
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  /* Virtualizer viewport 才是真正的滚动层。此时 list 只负责 Transfer 的定高，
+     不再用内边距和自身滚动制造第二个窗口；viewport 铺满整块内容区，
+     贴着它量出的自绘滚动条也就从列表顶一直落到列表底。 */
+  .xh-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 排布。 */
+  .xh-scope-transfer[data-part='list'][data-xh-virtualized]
+  .xh-scope-virtualizer[data-part='root'] {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    block-size: 100%;
+  }
+
+  .xh-scope-transfer[data-part='list'][data-xh-virtualized]
+  .xh-scope-virtualizer[data-part='viewport'] {
+    min-block-size: 0;
+    block-size: 100%;
+  }
+
+  /* 焦点在列表外时容器自己进 Tab 序列兜底，落焦不画环：高亮永远长在条目上 */
+  .xh-scope-transfer[data-part='list']:focus-visible {
+    outline: none;
+  }
+
+  /* 空态占位：待在面板里、list 的兄弟（列表框只许拥有 option 与 group）。
+     盒归面板，这里只画一句居中的次要文字 */
+  .xh-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-muted));
+    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} 已被盖掉，这里补回来 */
+  .xh-scope-transfer[data-part='empty'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-transfer[data-part='empty'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
+  .xh-scope-transfer[data-part='loading'] {
+    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-muted));
+    font-size: var(--xh-transfer-loading-font-size, var(--xh-_transfer-font-size));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  .xh-scope-transfer[data-part='loading'][hidden] {
+    display: none;
+  }
+
+  /* 首次加载：文案前一枚加载环，由加载环配方画（连接层投影 data-xh-loading-ring 与 data-loading），
+     直径取所在尺寸档的图标档 */
+  .xh-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));
+  }
+
+  .xh-scope-transfer[data-part='loading'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  .xh-scope-transfer[data-part='group'] {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    gap: var(--xh-transfer-group-gap, var(--xh-list-option-gap));
+  }
+
+  .xh-scope-transfer[data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 组内条目搬到对面、或被搜索筛掉时都只是打 hidden，一条不剩的分组连标题一起撤下，
+     免得列表里留着一排够不着的标题 */
+  .xh-scope-transfer[data-part='group']:not(:has([data-part='item']:not([hidden]))) {
+    display: none;
+  }
+
+  /* 组间留白只加在后继分组上：首组顶上已经有 list 的内边距，再加一层会显得头重 */
+  .xh-scope-transfer[data-part='group'] + .xh-scope-transfer[data-part='group'] {
+    margin-block-start: var(--xh-transfer-group-spacing, var(--xh-space-1_5));
+  }
+
+  /* 分组标题不是选项、进不了导航，画成小号次要文字，
+     内缩与条目对齐（同一个 padding-inline），标题与条目文字才在一条竖线上 */
+  .xh-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-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);
+    user-select: none;
+  }
+
+  .xh-scope-transfer[data-part='group-label'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-transfer[data-part='group-label'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 条目走 Collection Item 的 page 语境（页内持久集合）：悬停 / 高亮 / 按下面（白底承载 hover 100 →
+     pressed 200）与勾选行的选中面（品牌淡底 + 淡底前景，selected+hover 20% / +pressed 28%）都由家族按
+     aria-selected / aria-disabled 给出，标记由行首的勾选方框承担；禁用面（字色降级、not-allowed、不换面）
+     也归家族。这里只把公开槽映射到桥接槽。
+     布局保持 flex 而不用家族网格：间距统一由行的 gap 给，家族按槽下发的外边距（--xh-collection-gap）归零 */
+  .xh-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, 0);
+    /* 作者的图标尺槽经桥接槽下发到条目，家族缺省按 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-_transfer-gap));
+    align-items: center;
+    min-block-size: var(--xh-transfer-item-h, var(--xh-_transfer-item-h));
+    /* 行高留出文字的上下伸展空间，行内那层 overflow:hidden 才不会把字削掉 */
+    line-height: var(--xh-transfer-item-leading, var(--xh-leading-normal));
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  /* 键盘焦点出现时环才接回并立即到位，不压在背景过渡的中间帧上 */
+  .xh-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);
+
+    transition: none;
+  }
+
+  .xh-scope-transfer[data-part='item-text'] {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* 条目的勾选格与全选格共用同一套盒子，并成一条规则写：分开写迟早只改到一半，
+     两个方框就此走形。全选格没有对应的角色节点（它自己就是按钮），由伪元素补出来 */
+  .xh-scope-transfer[data-part='item-checkbox'],
+  .xh-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-_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-strong));
+    border-radius: var(--xh-transfer-checkbox-radius, var(--xh-shape-inset));
+    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-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* content 只能给伪元素，绝不能并进上面那条：content 落在普通元素上会顶掉它的全部子节点，
+     item-checkbox 里作者写的图标就此消失 */
+  .xh-scope-transfer[data-part='select-all-trigger']::before {
+    content: '';
+  }
+
+  /* 勾中即填色。全选格三态里 all 与 some 都算"有值"，与条目共用同一副填色 */
+  .xh-scope-transfer[data-part='item-checkbox'][data-state='checked'],
+  .xh-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-_transfer-accent));
+    background: var(--xh-transfer-checkbox-bg-checked, var(--xh-_transfer-accent));
+  }
+
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
+  .xh-scope-transfer[data-part='item-checkbox'][data-state='checked']:focus-visible {
+    --xh-_ring-color: currentColor;
+  }
+
+  /* 格子里的勾与全选格的三态标记（all 打勾、some 打横杠、none 留空）由勾选标记配方画：常驻、按状态淡变
+     并轻缩放。条目的格子是真实节点，标记是它的 ::before；全选格自己就是按钮，方框只能是行首那颗 ::before，
+     标记是 ::after、叠在方框正中——两支桥接槽写在全选格上 */
+
+  .xh-scope-transfer[data-part='item-checkbox'][data-disabled] {
+    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。
+     它是「方框 + 文案」的整行命中区：接 Action Control text 档、ghost 形态，悬停 / 按下 / 禁用面与过渡由家族给
+     （白底承载 hover 100 → pressed 200），按下只换面不缩放（--xh-action-scale-pressed: none），勾选回执落在方框上；
+     盒随内容收宽、高度取 xs 档的 24px 命中地板（方框 16px 居中其间），text 档的内距与最小宽度归零。
+     position 是给叠在方框上的那颗字形 ::after 当定位基准 */
+  .xh-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;
+    --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;
+    justify-content: start;
+    padding: 0;
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  /* 两颗搬运钮是只有字形的离散动作钮：接 Action Control 的 icon 档、subtle 形态（淡底、无边，
+     淡底阶梯 hover 200 → pressed 300），盒、焦点环、粗指针热区与禁用面由家族给。
+     钮是正方盒，按 sm 档取一个控件高，正方盒取圆形 */
+  .xh-scope-transfer[data-part='to-target-trigger'],
+  .xh-scope-transfer[data-part='to-source-trigger'] {
+    --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-circle));
+    --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}，
+     不补的话收起态整个失效。连接层真正会写 hidden 的是 search（searchable 关掉时）、
+     item（不属于本侧、或被搜索筛掉）、item-checkbox（oneWay 下的右侧），
+     其余几个是作者自己收起时的兜底 */
+  .xh-scope-transfer[data-part='root'][hidden],
+  .xh-scope-transfer[data-part='source-panel'][hidden],
+  .xh-scope-transfer[data-part='target-panel'][hidden],
+  .xh-scope-transfer[data-part='panel-header'][hidden],
+  .xh-scope-transfer[data-part='search'][hidden],
+  .xh-scope-transfer[data-part='list'][hidden],
+  .xh-scope-transfer[data-part='item'][hidden],
+  .xh-scope-transfer[data-part='item-checkbox'][hidden],
+  .xh-scope-transfer[data-part='select-all-trigger'][hidden],
+  .xh-scope-transfer[data-part='to-target-trigger'][hidden],
+  .xh-scope-transfer[data-part='to-source-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中。
+     堆叠时目标面板在下方，箭头因此朝下与朝上，指的是条目真正要去的方向 */
+  .xh-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-up) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-up) center / contain no-repeat;
+  }
+
+  .xh-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-down) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
+  }
+
+  /* 宽档：视口放得下两块面板，回到并排——两侧面板各占一栏、跨两行，
+     中间那栏上下各放一个搬运按钮，上格贴底、下格贴顶，两钮夹着中线相遇 */
+  @media (min-width: 640px) {
+    .xh-scope-transfer[data-part='source-panel'] {
+      grid-row: 1 / 3;
+      grid-column: 1;
+    }
+
+    .xh-scope-transfer[data-part='target-panel'] {
+      grid-row: 1 / 3;
+      grid-column: 3;
+    }
+
+    .xh-scope-transfer[data-part='to-target-trigger'] {
+      grid-row: 1;
+      grid-column: 2;
+      align-self: end;
+      justify-self: stretch;
+    }
+
+    .xh-scope-transfer[data-part='to-source-trigger'] {
+      grid-row: 2;
+      grid-column: 2;
+      align-self: start;
+      justify-self: stretch;
+    }
+
+    /* 单向组合的唯一动作跨过两行，中心才与两侧面板的中心重合。 */
+    .xh-scope-transfer[data-part='root'][data-one-way]
+      > .xh-scope-transfer[data-part='to-target-trigger'] {
+      grid-row: 1 / 3;
+      align-self: center;
+    }
+
+    /* 并排时目标面板在行尾侧，箭头改回朝行尾与朝行首。
+       盒的量法与窄档那两条逐字相同：兜底字形的盒必须按 --xh-icon-size 量，
+       作者换成自己的图标才和皮肤画的一样大 */
+    .xh-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;
+    }
+
+    .xh-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;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-transfer:is([data-part='to-source-trigger'], [data-part='to-target-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-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;
+    }
+
+    .xh-scope-transfer:is([data-part='to-source-trigger'], [data-part='to-target-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}