@xihan-ui/styles 1.0.0-alpha.0

package/css/tour.css

@@ -0,0 +1,305 @@
+@layer xihan.motion {
+  /* 气泡贴着目标探出来：纯淡入分不清它是从哪个元素长出来的 */
+  @keyframes xh-tour-content-in {
+    from {
+      opacity: 0;
+      translate: 0 4px;
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  /* 高亮框落定时那一下呼吸：换步时视线要跟着它走，纯位移太容易被漏看 */
+  @keyframes xh-tour-spotlight-in {
+    from {
+      opacity: 0;
+      scale: 1.04;
+    }
+
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='tour'] [data-part] {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+@layer xihan.components {
+  /* 根节点只是几个浮层的归属容器，不参与排版。
+     这里不给 display，UA 的 [hidden]{display:none} 就仍然压得住 */
+  [data-scope='tour'][data-part='root'] {
+    color: var(--xh-tour-fg, var(--xh-fg-default));
+  }
+
+  /* 遮罩：整页压暗，把注意力逼到高亮框那一块上 */
+  [data-scope='tour'][data-part='backdrop'] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-tour-backdrop-z, var(--xh-layer-modal));
+    background: var(--xh-tour-backdrop-bg, var(--xh-bg-overlay));
+  }
+
+  [data-scope='tour'][data-part='backdrop'][hidden] {
+    display: none;
+  }
+
+  [data-scope='tour'][data-part='backdrop'][data-state='open'] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='tour'][data-part='backdrop'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
+  }
+
+  /* 挖洞的高亮框。位置与尺寸由连接层量出来写进内联 style（position/inset/尺寸那几条轴归它），
+     这里只管长相：一圈描边 + 一片铺满视口的投影当暗幕，中间那块因此是亮的——
+     这就是"洞"。不吃指针：它盖在目标上面，吃了的话目标就再也点不动了 */
+  [data-scope='tour'][data-part='spotlight'] {
+    z-index: var(--xh-tour-spotlight-z, var(--xh-layer-modal));
+    pointer-events: none;
+    border-radius: var(--xh-tour-spotlight-radius, var(--xh-shape-surface));
+    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, var(--xh-bg-overlay));
+    /* 换步时框自己滑过去，用户的视线跟得上；逻辑属性照样可过渡 */
+    transition:
+      inset-inline-start var(--xh-motion-duration-enter) var(--xh-motion-ease-enter),
+      inset-block-start var(--xh-motion-duration-enter) var(--xh-motion-ease-enter),
+      inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-enter),
+      block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='tour'][data-part='spotlight'][hidden] {
+    display: none;
+  }
+
+  [data-scope='tour'][data-part='spotlight'][data-state='open'] {
+    animation: xh-tour-spotlight-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 高亮框在场时遮罩让位：暗幕已经由那圈铺满视口的投影负责，
+     两层叠加会把页面压得过暗，而且洞里也会跟着变暗——洞就白挖了。
+     居中步的高亮框带 hidden，此时遮罩照常压暗（那一步本来就没有要突出的元素） */
+  [data-scope='tour'][data-part='root']:has([data-scope='tour'][data-part='spotlight']:not([hidden]))
+    [data-scope='tour'][data-part='backdrop'] {
+    background: transparent;
+  }
+
+  /* 空壳不吃指针，交互只发生在 content 上。
+     锚定步的坐标由定位引擎写进内联 style，这里不碰那两条轴 */
+  [data-scope='tour'][data-part='positioner'] {
+    z-index: var(--xh-tour-positioner-z, var(--xh-layer-popover));
+    pointer-events: none;
+  }
+
+  /* 居中步：没有锚点，铺满视口把气泡摆中间 */
+  [data-scope='tour'][data-part='positioner'][data-position='center'] {
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--xh-space-4);
+  }
+
+  /* 必须排在 data-position='center' 之后：两条选择器的特指度相同（都是三个属性），
+     写在前面会被那条 display:flex 盖掉，收起态的居中步就一直摊在屏幕上 */
+  [data-scope='tour'][data-part='positioner'][hidden] {
+    display: none;
+  }
+
+  [data-scope='tour'][data-part='content'] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-tour-gap, var(--xh-space-2));
+    inline-size: max-content;
+    max-inline-size: var(--xh-tour-max-w, 22rem);
+    padding-block: var(--xh-tour-py, var(--xh-space-4));
+    padding-inline: var(--xh-tour-px, var(--xh-control-px-lg));
+    border: var(--xh-stroke-thin) solid var(--xh-tour-border, var(--xh-border-default));
+    border-radius: var(--xh-tour-radius, var(--xh-shape-surface));
+    background: var(--xh-tour-bg, var(--xh-bg-surface));
+    color: var(--xh-tour-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-tour-shadow, var(--xh-elevation-3));
+    pointer-events: auto;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位 */
+  [data-scope='tour'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* 焦点落在气泡本身（Enter/Space 归"下一步"管），但它是纯容器，不画焦点环 */
+  [data-scope='tour'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='tour'][data-part='content'][data-state='open'] {
+    animation: xh-tour-content-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='tour'][data-part='title'] {
+    margin: 0;
+    font-size: var(--xh-tour-title-font-size, var(--xh-text-heading-3-size));
+    font-weight: var(--xh-tour-title-font-weight, var(--xh-text-heading-3-weight));
+    color: var(--xh-tour-title-fg, var(--xh-fg-default));
+  }
+
+  /* 关闭按钮是绝对定位的，不占流内宽度：标题得自己让出右上角那块，
+     否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
+  [data-scope='tour'][data-part='content']:has([data-scope='tour'][data-part='close-trigger'])
+    [data-scope='tour'][data-part='title'] {
+    padding-inline-end: calc(var(--xh-control-h-sm) + var(--xh-space-2));
+  }
+
+  [data-scope='tour'][data-part='description'] {
+    margin: 0;
+    font-size: var(--xh-text-body-size);
+    line-height: var(--xh-text-body-leading);
+    color: var(--xh-tour-description-fg, var(--xh-fg-muted));
+  }
+
+  /* "第 m 步，共 n 步"：辅助信息，字号压一档，与按钮排在同一行的两端 */
+  [data-scope='tour'][data-part='progress-text'] {
+    font-size: var(--xh-tour-progress-font-size, var(--xh-font-size-xs));
+    color: var(--xh-tour-progress-fg, var(--xh-fg-subtle));
+  }
+
+  [data-scope='tour'][data-part='prev-trigger'],
+  [data-scope='tour'][data-part='next-trigger'],
+  [data-scope='tour'][data-part='skip-trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-control-h-sm);
+    padding-inline: var(--xh-control-px-md);
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-shape-control);
+    font-size: var(--xh-font-size-sm);
+    cursor: pointer;
+  }
+
+  [data-scope='tour'][data-part='prev-trigger'][hidden],
+  [data-scope='tour'][data-part='next-trigger'][hidden],
+  [data-scope='tour'][data-part='skip-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 主按钮：整条引导的主线动作 */
+  [data-scope='tour'][data-part='next-trigger'] {
+    background: var(--xh-tour-next-bg, var(--xh-bg-brand));
+    color: var(--xh-tour-next-fg, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='tour'][data-part='next-trigger']:hover {
+    background: var(--xh-tour-next-bg-hover, var(--xh-bg-brand-hover));
+  }
+
+  [data-scope='tour'][data-part='prev-trigger'],
+  [data-scope='tour'][data-part='skip-trigger'] {
+    background: transparent;
+    color: var(--xh-fg-muted);
+  }
+
+  [data-scope='tour'][data-part='prev-trigger'] {
+    border-color: var(--xh-border-default);
+    color: var(--xh-fg-default);
+  }
+
+  [data-scope='tour'][data-part='prev-trigger']:hover:not(:disabled),
+  [data-scope='tour'][data-part='skip-trigger']:hover {
+    background: var(--xh-bg-subtle);
+  }
+
+  /* 单体控件用原生 disabled（集合条目才用 [data-disabled]）：首步的上一步就是这个形态 */
+  [data-scope='tour'][data-part='prev-trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    border-color: var(--xh-border-subtle);
+    cursor: not-allowed;
+  }
+
+  [data-scope='tour'][data-part='close-trigger'] {
+    position: absolute;
+    inset-block-start: var(--xh-space-2);
+    inset-inline-end: var(--xh-space-2);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-control-h-sm);
+    inline-size: var(--xh-control-h-sm);
+    border: 0;
+    border-radius: var(--xh-shape-control);
+    background: transparent;
+    color: var(--xh-fg-muted);
+    cursor: pointer;
+  }
+
+  [data-scope='tour'][data-part='close-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='tour'][data-part='close-trigger']:hover {
+    background: var(--xh-bg-subtle);
+    color: var(--xh-fg-default);
+  }
+
+  [data-scope='tour'][data-part='prev-trigger']:focus-visible,
+  [data-scope='tour'][data-part='next-trigger']:focus-visible,
+  [data-scope='tour'][data-part='skip-trigger']:focus-visible,
+  [data-scope='tour'][data-part='close-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 箭头是旋转 45° 的方块，只保留朝向目标那两条边的描边；
+     引擎不产出箭头偏移，因此沿交叉轴固定居中。居中步没有锚点，连接层会给它发 hidden */
+  [data-scope='tour'][data-part='arrow'] {
+    position: absolute;
+    inline-size: var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size));
+    block-size: var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size));
+    background: var(--xh-tour-bg, var(--xh-bg-surface));
+    border: var(--xh-stroke-thin) solid var(--xh-tour-border, var(--xh-border-default));
+    rotate: 45deg;
+  }
+
+  [data-scope='tour'][data-part='arrow'][hidden] {
+    display: none;
+  }
+
+  [data-scope='tour'][data-part='arrow'][data-placement^='bottom'] {
+    inset-block-start: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-inline-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    border-block-end: 0;
+    border-inline-end: 0;
+  }
+
+  [data-scope='tour'][data-part='arrow'][data-placement^='top'] {
+    inset-block-end: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-inline-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    border-block-start: 0;
+    border-inline-start: 0;
+  }
+
+  [data-scope='tour'][data-part='arrow'][data-placement^='right'] {
+    inset-inline-start: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-block-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    border-block-start: 0;
+    border-inline-end: 0;
+  }
+
+  [data-scope='tour'][data-part='arrow'][data-placement^='left'] {
+    inset-inline-end: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-block-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    border-block-end: 0;
+    border-inline-start: 0;
+  }
+}

package/css/transfer.css

@@ -0,0 +1,318 @@
+@layer xihan.components {
+  /* 三栏栅格：两侧面板各占一栏、跨两行，中间那栏上下各放一个搬运按钮，
+     两个按钮在中线处相遇。栅格的列号本身就是随书写方向走的（第 1 栏永远在行首侧），
+     dir=rtl 时整块自动镜像，不必另写一套。
+     中间那栏没有对应的角色节点（anatomy 里两个按钮是 root 的直接子节点），
+     所以只能按位置显式安放，不能靠自动流——自动流会把"往左搬"甩到右侧面板的位置上 */
+  [data-scope='transfer'][data-part='root'] {
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    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='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;
+  }
+
+  [data-scope='transfer'][data-part='to-source-trigger'] {
+    grid-row: 2;
+    grid-column: 2;
+    align-self: start;
+  }
+
+  [data-scope='transfer'][data-part='source-panel'],
+  [data-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，观感一处收口 */
+  [data-scope='transfer'][data-part='source-panel'][data-disabled],
+  [data-scope='transfer'][data-part='target-panel'][data-disabled] {
+    background: var(--xh-transfer-panel-bg-disabled, var(--xh-bg-muted));
+  }
+
+  [data-scope='transfer'][data-part='panel-header'] {
+    display: flex;
+    gap: var(--xh-transfer-header-gap, var(--xh-control-gap-md));
+    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-sm));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-panel-border, var(--xh-border-default));
+  }
+
+  /* 标题占满剩余宽度，把计数挤到行尾侧 */
+  [data-scope='transfer'][data-part='panel-title'] {
+    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));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  [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-font-size-xs));
+    line-height: var(--xh-leading-none);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* 连接层只给数字（data-checked-count / data-count），文案是作者的事：
+     语言、量词、单复数都由他定。作者什么都不写时这里补出"勾中/可见"，
+     写了内容就用作者的（:empty 只命中空节点） */
+  [data-scope='transfer'][data-part='panel-count']:empty::after {
+    content: attr(data-checked-count) ' / ' attr(data-count);
+  }
+
+  [data-scope='transfer'][data-part='search'] {
+    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-sm));
+    border: 0;
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-panel-border, var(--xh-border-default));
+    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);
+  }
+
+  /* 单体控件的禁用是原生 disabled，样式只能写 :disabled；集合条目才读 data-disabled */
+  [data-scope='transfer'][data-part='search']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='transfer'][data-part='list'] {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-block-size: var(--xh-transfer-list-min-h, 8rem);
+    max-block-size: var(--xh-transfer-list-max-h, 16rem);
+    padding-block: var(--xh-transfer-list-py, var(--xh-space-1));
+    padding-inline: var(--xh-transfer-list-px, var(--xh-space-1));
+    overflow: auto;
+  }
+
+  /* 焦点在列表外时容器自己进 Tab 序列兜底，落焦不画环：高亮永远长在条目上 */
+  [data-scope='transfer'][data-part='list']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='transfer'][data-part='item'] {
+    display: flex;
+    flex: none;
+    gap: var(--xh-transfer-item-gap, var(--xh-control-gap-md));
+    align-items: center;
+    padding-block: var(--xh-transfer-item-py, var(--xh-space-1));
+    padding-inline: var(--xh-transfer-item-px, var(--xh-control-px-sm));
+    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);
+  }
+
+  /* 键盘高亮与指针悬停共用一套底色：条目本身承载焦点，不另画描边。
+     data-highlighted 跟的是连接层记的焦点条目，与勾选互相独立 */
+  [data-scope='transfer'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
+    background: var(--xh-transfer-item-bg-highlight, var(--xh-bg-subtle-hover));
+  }
+
+  [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);
+  }
+
+  /* 禁用走 aria-disabled 而非原生 disabled：条目仍要可聚焦（它还得当方向键的起点），
+     所以样式只能读 data-disabled，写 :disabled 永远不命中 */
+  [data-scope='transfer'][data-part='item'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='transfer'][data-part='item-text'] {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* 条目的勾选格与全选格共用同一套盒子，并成一条规则写：分开写迟早只改到一半，
+     两个方框就此走形。全选格没有对应的角色节点（它自己就是按钮），由伪元素补出来 */
+  [data-scope='transfer'][data-part='item-checkbox'],
+  [data-scope='transfer'][data-part='select-all-trigger']::before {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-transfer-checkbox-size, 16px);
+    block-size: var(--xh-transfer-checkbox-size, 16px);
+    border: var(--xh-stroke-thin) solid var(--xh-transfer-checkbox-border, var(--xh-border-default));
+    border-radius: var(--xh-transfer-checkbox-radius, var(--xh-radius-sm));
+    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, 12px);
+    line-height: var(--xh-leading-none);
+    transition:
+      background 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 里作者写的图标就此消失 */
+  [data-scope='transfer'][data-part='select-all-trigger']::before {
+    content: '';
+  }
+
+  /* 勾中即填色。全选格三态里 all 与 some 都算"有值"，与条目共用同一副填色 */
+  [data-scope='transfer'][data-part='item-checkbox'][data-state='checked'],
+  [data-scope='transfer'][data-part='select-all-trigger']:is([data-state='all'], [data-state='some'])::before {
+    border-color: var(--xh-transfer-checkbox-border-checked, var(--xh-bg-brand));
+    background: var(--xh-transfer-checkbox-bg-checked, var(--xh-bg-brand));
+  }
+
+  /* 勾号由皮肤补，作者不必自己往格子里塞字符 */
+  [data-scope='transfer'][data-part='item-checkbox'][data-state='checked']::before {
+    content: '✓';
+  }
+
+  /* 全选格的三态：all 打勾、some 打横杠、none 留空。
+     some 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state */
+  [data-scope='transfer'][data-part='select-all-trigger'][data-state='all']::before {
+    content: '✓';
+  }
+
+  [data-scope='transfer'][data-part='select-all-trigger'][data-state='some']::before {
+    content: '−';
+  }
+
+  [data-scope='transfer'][data-part='item-checkbox'][data-disabled] {
+    border-color: var(--xh-transfer-checkbox-border-disabled, var(--xh-border-subtle));
+    background: var(--xh-transfer-checkbox-bg-disabled, var(--xh-bg-muted));
+  }
+
+  /* 全选格是原生按钮（三态经 aria-checked 上报，激活由平台负责），
+     禁用因此写 :disabled，不写 data-disabled */
+  [data-scope='transfer'][data-part='select-all-trigger'] {
+    display: inline-flex;
+    flex: none;
+    gap: var(--xh-transfer-select-all-gap, var(--xh-control-gap-sm));
+    align-items: center;
+    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-font-size-xs));
+    font-weight: var(--xh-font-weight-medium);
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+  }
+
+  [data-scope='transfer'][data-part='select-all-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='transfer'][data-part='select-all-trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [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;
+  }
+
+  /* 上面凡是给了 display 的角色节点都要补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话收起态整个失效。连接层真正会写 hidden 的是 search（searchable 关掉时）、
+     item（不属于本侧、或被搜索筛掉）、item-checkbox（oneWay 下的右侧），
+     其余几个是作者自己收起时的兜底 */
+  [data-scope='transfer'][data-part='root'][hidden],
+  [data-scope='transfer'][data-part='source-panel'][hidden],
+  [data-scope='transfer'][data-part='target-panel'][hidden],
+  [data-scope='transfer'][data-part='panel-header'][hidden],
+  [data-scope='transfer'][data-part='search'][hidden],
+  [data-scope='transfer'][data-part='list'][hidden],
+  [data-scope='transfer'][data-part='item'][hidden],
+  [data-scope='transfer'][data-part='item-checkbox'][hidden],
+  [data-scope='transfer'][data-part='select-all-trigger'][hidden],
+  [data-scope='transfer'][data-part='to-target-trigger'][hidden],
+  [data-scope='transfer'][data-part='to-source-trigger'][hidden] {
+    display: none;
+  }
+}