@xihan-ui/styles 2.1.0 → 3.1.0

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;
+    }
+  }
 }