@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/tree.css

@@ -0,0 +1,733 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 tree 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/collection-item.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-tree {
+    --xh-tree-skin: 1;
+  }
+
+  .xh-scope-tree[data-part='root'] {
+    /* 尺寸档只换这几支私有槽，行、指示符盒、缩进与占位从 root 继承，走集合家族的尺寸档：
+       行的块向内衬取列表条目档、行内内衬 / 间距 / 字号取控件档、指示符盒取指示符档、缩进一档一格 */
+    --xh-_tree-row-py: var(--xh-list-option-py-md);
+    --xh-_tree-row-px: var(--xh-control-px-md);
+    --xh-_tree-row-gap: var(--xh-control-gap-md);
+    --xh-_tree-font-size: var(--xh-control-font-md);
+    --xh-_tree-indicator: var(--xh-control-indicator-md);
+    --xh-_tree-indent: var(--xh-space-4);
+    /* 行外的字形（空态 / 在途占位里的加载环与作者塞的图标）按档取尺；行内的由家族随 data-xh-collection-size
+       下发。这支只管作者放进行里的图标：树自绘的状态字形（展开方向、行尾对号与半选杠）是指示符，
+       各部件在自己身上把 --xh-icon-size 改接到指示符盒的尺 */
+    --xh-icon-size: var(--xh-tree-icon-size, var(--xh-glyph-size-md));
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-tree-gap, var(--xh-space-2));
+  }
+
+  .xh-scope-tree[data-part='root'][data-size='sm'] {
+    --xh-_tree-row-py: var(--xh-list-option-py-sm);
+    --xh-_tree-row-px: var(--xh-control-px-sm);
+    --xh-_tree-row-gap: var(--xh-control-gap-sm);
+    --xh-_tree-font-size: var(--xh-control-font-sm);
+    --xh-_tree-indicator: var(--xh-control-indicator-sm);
+    --xh-_tree-indent: var(--xh-space-3);
+    --xh-icon-size: var(--xh-tree-icon-size, var(--xh-glyph-size-sm));
+  }
+
+  .xh-scope-tree[data-part='root'][data-size='lg'] {
+    --xh-_tree-row-py: var(--xh-list-option-py-lg);
+    --xh-_tree-row-px: var(--xh-control-px-lg);
+    --xh-_tree-row-gap: var(--xh-control-gap-lg);
+    --xh-_tree-font-size: var(--xh-control-font-lg);
+    --xh-_tree-indicator: var(--xh-control-indicator-lg);
+    --xh-_tree-indent: var(--xh-space-5);
+    --xh-icon-size: var(--xh-tree-icon-size, var(--xh-glyph-size-lg));
+  }
+
+  .xh-scope-tree[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 淡底档：描边透明、底换成 subtle；outline 即基础规则。
+     形态由 root 的 data-variant 向容器下发，容器基础规则直接写 border-default / bg-surface，
+     与 list / descriptions 的 outline 面同源（列表容器族） */
+  .xh-scope-tree[data-part='root'][data-variant='subtle'] .xh-scope-tree[data-part='tree'] {
+    border-color: transparent;
+    background: var(--xh-tree-bg, var(--xh-bg-subtle));
+  }
+
+  /* 无框档：边框留着但透明，去掉外框不会让行的位置跳一格 */
+  .xh-scope-tree[data-part='root'][data-variant='ghost'] .xh-scope-tree[data-part='tree'] {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  .xh-scope-tree[data-part='label'] {
+    color: var(--xh-tree-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-tree-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-tree-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  /* 整棵树禁用会把 data-disabled 一路打到 label / tree 上，各处观感保持一致 */
+  .xh-scope-tree[data-part='label'][data-disabled] {
+    color: var(--xh-fg-subtle);
+  }
+
+  /* 常驻容器不是浮层：留边框与底色，但不投影、不脱离文档流，滚动发生在容器自身 */
+  .xh-scope-tree[data-part='tree'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-tree-tree-gap, var(--xh-list-option-gap));
+    max-block-size: var(--xh-tree-max-h, var(--xh-viewport-h-lg));
+    padding-block: var(--xh-tree-py, var(--xh-space-1));
+    padding-inline: var(--xh-tree-px, var(--xh-space-1));
+    border: var(--xh-stroke-thin) solid var(--xh-tree-border, var(--xh-border-default));
+    border-radius: var(--xh-tree-radius, var(--xh-shape-surface));
+    background: var(--xh-tree-bg, var(--xh-bg-surface));
+    color: var(--xh-tree-fg, var(--xh-fg-default));
+    /* 两轴一起给：深层节点靠缩进往右推，横向溢出是常态，得够得着 */
+    overflow: auto;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则，作者手动收起时要显式让位 */
+  .xh-scope-tree[data-part='tree'][hidden] {
+    display: none;
+  }
+
+  /* 空态占位：待在 root 里、tree 的兄弟（role=tree 只许拥有 treeitem 与 group）。
+     与在途占位同一副排版：一行居中的次要文字，字号与行内内衬随尺寸档与条目同档，块向内距一档 */
+  .xh-scope-tree[data-part='empty'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-block: var(--xh-tree-empty-py, var(--xh-space-3));
+    padding-inline: var(--xh-tree-empty-px, var(--xh-_tree-row-px));
+    color: var(--xh-tree-empty-fg, var(--xh-fg-muted));
+    font-size: var(--xh-tree-empty-font-size, var(--xh-_tree-font-size));
+    line-height: var(--xh-leading-normal);
+    text-align: center;
+  }
+
+  /* 上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
+  .xh-scope-tree[data-part='empty'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-tree[data-part='empty'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 在途占位：与空态占位同一个位置、同一副排版，两者不同屏。还没有节点时一枚加载环排在文案之前 */
+  .xh-scope-tree[data-part='loading'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-tree-loading-gap, var(--xh-_tree-row-gap));
+    padding-block: var(--xh-tree-loading-py, var(--xh-space-3));
+    padding-inline: var(--xh-tree-loading-px, var(--xh-_tree-row-px));
+    color: var(--xh-tree-loading-fg, var(--xh-fg-muted));
+    font-size: var(--xh-tree-loading-font-size, var(--xh-_tree-font-size));
+    line-height: var(--xh-leading-normal);
+    text-align: center;
+  }
+
+  /* 环由加载环配方画成（轨道 + 起始边、随 data-loading 淡入并转），这里只给它盒子：直径取尺寸档的图标档 */
+  .xh-scope-tree[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-tree[data-part='loading'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-tree[data-part='loading'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 焦点在树外时容器自己进 Tab 序列兜底，落焦不画环：高亮永远长在行上 */
+  .xh-scope-tree[data-part='tree']:focus-visible {
+    outline: none;
+  }
+
+  /* 分支只是"这一行 + 它的子层"的外壳，不自带内边距：
+     真正长成一行的是 branch-control，子层缩进归 branch-content。
+     行距由这里出：分支自己那一行与它展开的子层之间，同样按条目间距断开 */
+  .xh-scope-tree[data-part='branch'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-tree-branch-gap, var(--xh-list-option-gap));
+  }
+
+  .xh-scope-tree[data-part='branch'][hidden] {
+    display: none;
+  }
+
+  /* 焦点落在 branch 上（它才是 treeitem），但环画在它自己那一行上：
+     整棵子树套一圈描边会把展开的层级全框进去 */
+  .xh-scope-tree[data-part='branch']:focus-visible {
+    outline: none;
+  }
+
+  .xh-scope-tree[data-part='branch']:focus-visible > .xh-scope-tree[data-part='branch-control'] {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 行：叶子与分支共用同一套盒子，两种行在视觉上必须齐平。
+     行走 Collection Item 的 overlay 语境，与树选择同一种选中读法：悬停 / 高亮 / 按下面（白底承载
+     hover 100 → pressed 200）由家族给，选中不换面、不换字色，只在行尾亮对号，选中叠悬停 / 按下沿用同一条阶梯；
+     家族按 aria-selected / data-selected 与 aria-disabled / data-disabled 给出，这里只把公开槽映射到桥接槽。
+     布局保持 flex 而不用家族网格：一行里可以并排多个前导部件（箭头、拖拽把手）与作者自己的图标、
+     按钮，单列的 prefix 放不下；间距统一由行的 gap 给，家族按槽下发的外边距（--xh-collection-gap）归零 */
+  .xh-scope-tree[data-part='item'],
+  .xh-scope-tree[data-part='branch-control'] {
+    --xh-collection-block-padding: var(--xh-tree-row-py, var(--xh-_tree-row-py));
+    --xh-collection-inline-padding: var(--xh-tree-row-px, var(--xh-_tree-row-px));
+    --xh-collection-gap: 0;
+    --xh-collection-font-size: var(--xh-tree-row-font-size, var(--xh-_tree-font-size));
+    --xh-collection-radius: var(--xh-tree-row-radius, var(--xh-shape-inset));
+    /* 作者的图标尺槽经桥接槽下发到行，家族缺省按 md 档 */
+    --xh-collection-glyph-size: var(--xh-tree-icon-size, var(--xh-_collection-glyph-size));
+    /* 箭头 / 对号盒与叶子的占位同一把尺：指示符档（md comfortable 16 / compact 14），与同一行里的
+       拖拽把手同一支。不读家族按档下发的 --xh-icon-size——那支只管作者放进行里的图标，按图标档取的
+       20px 会比 16px 的指示符盒大一圈 */
+    --xh-_tree-indicator-size: var(--xh-tree-indicator-size, var(--xh-_tree-indicator));
+    --xh-collection-fg-rest: var(--xh-tree-row-fg, var(--xh-fg-default));
+    --xh-collection-fg-hover: var(--xh-tree-row-fg, var(--xh-fg-default));
+    --xh-collection-fg-keyboard-highlight: var(--xh-tree-row-fg, var(--xh-fg-default));
+    --xh-collection-fg-pressed: var(--xh-tree-row-fg, var(--xh-fg-default));
+    --xh-collection-fg-selected: var(--xh-tree-row-fg-selected, var(--xh-tree-row-fg, var(--xh-fg-default)));
+    --xh-collection-fg-selected-hover: var(--xh-tree-row-fg-selected, var(--xh-tree-row-fg, var(--xh-fg-default)));
+    --xh-collection-fg-selected-highlight: var(--xh-tree-row-fg-selected, var(--xh-tree-row-fg, var(--xh-fg-default)));
+    --xh-collection-fg-selected-pressed: var(--xh-tree-row-fg-selected, var(--xh-tree-row-fg, var(--xh-fg-default)));
+    --xh-collection-font-weight-selected: var(--xh-tree-row-selected-font-weight, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected-hover: var(--xh-tree-row-selected-font-weight, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected-highlight: var(--xh-tree-row-selected-font-weight, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected-pressed: var(--xh-tree-row-selected-font-weight, var(--xh-font-weight-regular));
+    --xh-collection-bg-hover: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-keyboard-highlight: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-pressed: var(--xh-tree-row-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected-hover: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-selected-highlight: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-selected-pressed: var(--xh-tree-row-bg-pressed, var(--xh-bg-subtle-hover));
+    /* data-highlighted 跟的是连接层记的焦点行（指针点选也会落焦）：只换面，焦点环在 :focus-visible 下再接回 */
+    --xh-collection-outline-keyboard-highlight: transparent;
+    --xh-collection-outline-selected-highlight: transparent;
+    /* 行尾对号：槽按本部件取名（item-check-fg），标记部件的旧槽留在兜底位 */
+    --xh-collection-indicator-fg-rest: var(--xh-tree-item-check-fg, var(--xh-tree-item-indicator-fg, var(--xh-fg-brand)));
+    --xh-collection-indicator-fg-checked: var(--xh-tree-item-check-fg, var(--xh-tree-item-indicator-fg, var(--xh-fg-brand)));
+    --xh-collection-indicator-fg-selected: var(--xh-tree-item-check-fg, var(--xh-tree-item-indicator-fg, var(--xh-fg-brand)));
+    --xh-collection-indicator-fg-selected-hover: var(--xh-tree-item-check-fg, var(--xh-tree-item-indicator-fg, var(--xh-fg-brand)));
+    --xh-collection-indicator-fg-selected-highlight: var(--xh-tree-item-check-fg, var(--xh-tree-item-indicator-fg, var(--xh-fg-brand)));
+    --xh-collection-indicator-fg-selected-pressed: var(--xh-tree-item-check-fg, var(--xh-tree-item-indicator-fg, var(--xh-fg-brand)));
+
+    display: flex;
+    align-items: center;
+    gap: var(--xh-tree-row-gap, var(--xh-_tree-row-gap));
+    /* 行高留出文字的上下伸展空间，行内那层 overflow:hidden 才不会把字削掉 */
+    line-height: var(--xh-tree-row-leading, var(--xh-leading-normal));
+    white-space: nowrap;
+    user-select: none;
+    /* 换面走家族的时间线（按下 press，其余一律 micro，描边色同样不进过渡）；box-shadow 一并接过渡：
+       换父落点那圈内描边挂在行自己身上，跟着 data-drop 在行间移动。
+       translate 是落下后的换位：宿主写回 collection 之后，连接层把行按旧位置反向补偿，这条过渡带它滑到新位置 */
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 已有节点时重新取数：不换成占位，行保留上一帧、按 micro 淡到禁用透明度，数据到了再淡回；
+     树框（描边与底）不淡，取数在途时行不接指针 */
+  .xh-scope-tree[data-part='tree'][data-loading] :is(.xh-scope-tree[data-part='item'], .xh-scope-tree[data-part='branch-control']) {
+    opacity: var(--xh-tree-row-loading-opacity, var(--xh-state-disabled-opacity));
+    pointer-events: none;
+  }
+
+  /* 分支行的首格是展开箭头，叶子行没有这一格，由行盒自己补出来（对号在行尾，不再替叶子顶这一格），
+     否则叶子会比同级分支往行首缩一格，层级关系读不出来。占位宽度与箭头盒同一把尺 */
+  [data-orientation='vertical'] > .xh-scope-tree[data-part='item'] {
+    padding-inline-start: calc(
+      var(--xh-tree-row-px, var(--xh-_tree-row-px)) +
+        var(--xh-_tree-indicator-size) +
+        var(--xh-tree-row-gap, var(--xh-_tree-row-gap))
+    );
+  }
+
+  /* 家族给了 display，UA 的 [hidden]{display:none} 已被盖掉 */
+  .xh-scope-tree[data-part='item'][hidden],
+  .xh-scope-tree[data-part='branch-control'][hidden] {
+    display: none;
+  }
+
+  /* 键盘焦点出现时环才接回并立即到位，不压在背景过渡的中间帧上：叶子自己承载焦点；
+     分支的焦点在 branch 上、环画在它那一行（见上面 branch:focus-visible 那条） */
+  .xh-scope-tree[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);
+
+    /* 换面即时，只留换位：Alt + 方向键搬的正是这一行，它照样从旧位置滑到新位置 */
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 禁用走 aria-disabled 而非原生 disabled：叶子的禁用面由家族按 aria-disabled 给；
+     分支行不是 treeitem 本体（aria-disabled 在 branch 上），按连接层的 data-disabled 映射到家族槽：
+     字色降级、光标 not-allowed，悬停 / 高亮 / 按下由家族守卫拦掉 */
+  .xh-scope-tree[data-part='branch-control'][data-disabled] {
+    --xh-collection-fg-rest: var(--xh-fg-disabled);
+    --xh-collection-cursor-rest: not-allowed;
+  }
+
+  .xh-scope-tree[data-part='item-text'],
+  .xh-scope-tree[data-part='branch-text'] {
+    flex: 1;
+    /* 弹性子项默认最小尺寸是内容尺寸，不归零则长文本把行撑破、省略号轮不上 */
+    min-inline-size: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* 选中对号落在行尾，与树选择同位：作者在行里摆在哪儿都排到最后，
+     行尾那一格（item-suffix）在它之前；正文吃满剩余宽度，对号因此贴着行的末端。
+     未选中时占位不塌，切换选中不引起行宽抖动。盒尺取指示符档；盒里的对号是指示符，
+     在自己身上把 --xh-icon-size 改接到盒的尺，兜底对号与作者塞进盒里的 XhIcon 读同一把尺、与盒同边长 */
+  .xh-scope-tree[data-part='item-indicator'] {
+    --xh-icon-size: var(--xh-_tree-indicator-size);
+
+    display: inline-flex;
+    flex: none;
+    order: 1;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-_tree-indicator-size);
+  }
+
+  .xh-scope-tree[data-part='item-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 家族只按行的 aria-selected 显示对号：分支行的 aria-selected 在 branch 上、半选没有选中语义，
+     这两档按标记自身的 data-selected / data-indeterminate 显形 */
+  .xh-scope-tree[data-part='item-indicator']:is([data-selected], [data-indeterminate]) {
+    opacity: 1;
+  }
+
+  /* 分支行的禁用不在行的 aria-disabled 上（那在 branch 上），标记按自身的 data-disabled 降级 */
+  .xh-scope-tree[data-part='item-indicator'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 展开箭头与方向指示符：两者都可能被作者用作"点这里展开"的把手，
+     所以尺寸与叶子的勾选标记一致，两种行的文字起点才对得齐。
+     盒里的 chevron 是指示符：与盒同边长，--xh-icon-size 在自己身上改接到盒的尺 */
+  .xh-scope-tree[data-part='branch-trigger'],
+  .xh-scope-tree[data-part='branch-indicator'] {
+    --xh-icon-size: var(--xh-_tree-indicator-size);
+
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-_tree-indicator-size);
+    color: var(--xh-tree-branch-indicator-fg, var(--xh-fg-subtle));
+    transition: rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
+  }
+
+  .xh-scope-tree[data-part='branch-trigger'][hidden],
+  .xh-scope-tree[data-part='branch-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 收起时指向行尾、展开时转向下方，与逻辑书写方向一致：rtl 下行尾在左侧，收起的箭头转半圈；
+     旋转角乘书写方向的符号（ltr 0deg、rtl 180deg），按就近的 dir 走 */
+  .xh-scope-tree[data-part='branch-trigger'],
+  .xh-scope-tree[data-part='branch-indicator'] {
+    rotate: calc(90deg - 90deg * var(--xh-direction-sign));
+  }
+
+  .xh-scope-tree[data-part='branch-trigger'][data-state='open'],
+  .xh-scope-tree[data-part='branch-indicator'][data-state='open'] {
+    rotate: 90deg;
+  }
+
+  .xh-scope-tree[data-part='branch-trigger'][data-disabled],
+  .xh-scope-tree[data-part='branch-indicator'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 层级缩进靠子层容器自己顶：分支物理嵌套着子层，每深一层就多缩一格，
+     无需把层级号写进内联样式，也就不必在两个适配器里各写一遍 */
+  .xh-scope-tree[data-part='branch-content'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-tree-branch-content-gap, var(--xh-list-option-gap));
+    padding-inline-start: var(--xh-tree-indent, var(--xh-_tree-indent));
+  }
+
+  /*
+   * 连接线：父节点展开箭头的中线向下引一道竖线，每个子节点从竖线横出一段接到自己行首（├），
+   * 最后一个子节点的竖线止于它那一行的中线（└），层级深时一眼看得出谁挂在谁下面。
+   * 线由每个子节点自己画：子节点的行画「这一段竖线 + 横出的那一段」，展开着的非末位分支再由它的子层
+   * 把竖线接过它整棵子树，交给下一个兄弟。子节点之间、分支行与子层之间的间距由线向上下伸出补齐，竖线不断开。
+   * 只画在竖排的子层里：顶层节点没有父节点可连，横排的末端层没有行首可接。
+   * 首个与末位子节点按子层里的结构次序认：子层里只放节点，收起的子树整块不显示、不影响次序。
+   * 它是内部分隔的一种，颜色取 border-subtle；行悬停与选中换面时线压在面上照样看得见
+   */
+  .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'] {
+    position: relative;
+  }
+
+  /* 竖线落在父节点展开箭头的中线上：父行的行首内边距加半个箭头盒，换算到缩进了一格的子节点坐标里。
+     向上伸出的量补的是上方那段间距（首个子节点补分支行与子层之间的那段），向下补到下一个兄弟 */
+  .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='item'],
+  .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='branch'] > .xh-scope-tree[data-part='branch-control'] {
+    --xh-_tree-line-x: calc(
+      var(--xh-tree-row-px, var(--xh-_tree-row-px)) +
+        var(--xh-_tree-indicator-size) / 2 -
+        var(--xh-stroke-thin) / 2 -
+        var(--xh-tree-indent, var(--xh-_tree-indent))
+    );
+    --xh-_tree-line-top: 0px;
+    --xh-_tree-line-bottom: var(--xh-tree-branch-content-gap, var(--xh-list-option-gap));
+
+    position: relative;
+  }
+
+  .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='item']:first-child,
+  .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='branch']:first-child > .xh-scope-tree[data-part='branch-control'] {
+    --xh-_tree-line-top: var(--xh-tree-branch-gap, var(--xh-list-option-gap));
+  }
+
+  /* 展开着的非末位分支：行下面先是它自己的子层，竖线只伸到子层顶上，余下那段由子层接着画 */
+  .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='branch'] > .xh-scope-tree[data-part='branch-control'][data-state='open'] {
+    --xh-_tree-line-bottom: var(--xh-tree-branch-gap, var(--xh-list-option-gap));
+  }
+
+  .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='item']::before,
+  .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='branch'] > .xh-scope-tree[data-part='branch-control']::before {
+    content: '';
+    position: absolute;
+    inset-block: calc(var(--xh-_tree-line-top) * -1) calc(var(--xh-_tree-line-bottom) * -1);
+    inset-inline-start: var(--xh-_tree-line-x);
+    /* 分支横出到展开箭头盒的起点；叶子没有箭头，横线穿过占位那一格接到正文前 */
+    inline-size: calc(var(--xh-tree-row-px, var(--xh-_tree-row-px)) - var(--xh-_tree-line-x));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-tree-line-color, var(--xh-border-subtle));
+    /* 横出的那段落在行的中线：线盒上下伸出的量不对称时按差值的一半补回 */
+    background: linear-gradient(var(--xh-tree-line-color, var(--xh-border-subtle)), var(--xh-tree-line-color, var(--xh-border-subtle)))
+      0 calc(50% + (var(--xh-_tree-line-top) - var(--xh-_tree-line-bottom)) / 2) / 100% var(--xh-stroke-thin) no-repeat;
+    pointer-events: none;
+  }
+
+  .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='item']::before {
+    inline-size: calc(
+      var(--xh-tree-row-px, var(--xh-_tree-row-px)) +
+        var(--xh-_tree-indicator-size) -
+        var(--xh-_tree-line-x)
+    );
+  }
+
+  /* 最后一个子节点：竖线止于行的中线并在那里拐向行首（└），下面不再有兄弟要接 */
+  .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='item']:last-child::before,
+  .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='branch']:last-child > .xh-scope-tree[data-part='branch-control']::before {
+    inset-block-end: calc(50% - var(--xh-stroke-thin) / 2);
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-tree-line-color, var(--xh-border-subtle));
+    background: none;
+  }
+
+  /* 展开着的非末位分支：它的子层把父节点那道竖线接过整棵子树，一直伸到下一个兄弟。
+     子层的盒与分支同起点（缩进是子层自己的内边距），竖线位置与分支行里那一段相同 */
+  .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='branch']:not(:last-child) > .xh-scope-tree[data-part='branch-content']::after {
+    content: '';
+    position: absolute;
+    inset-block: 0 calc(var(--xh-tree-branch-content-gap, var(--xh-list-option-gap)) * -1);
+    inset-inline-start: calc(
+      var(--xh-tree-row-px, var(--xh-_tree-row-px)) +
+        var(--xh-tree-indicator-size, var(--xh-_tree-indicator)) / 2 -
+        var(--xh-stroke-thin) / 2 -
+        var(--xh-tree-indent, var(--xh-_tree-indent))
+    );
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-tree-line-color, var(--xh-border-subtle));
+    pointer-events: none;
+  }
+
+  /* 末端那一层横排：子节点并排铺开、必要时折行。缩进照旧由子层容器自己顶——
+     那是这一层相对上一层的位置，与层内怎么排无关 */
+  .xh-scope-tree[data-part='branch-content'][data-orientation='horizontal'] {
+    flex-flow: row wrap;
+    align-items: center;
+    column-gap: var(--xh-tree-leaf-row-gap, var(--xh-space-3));
+    row-gap: var(--xh-tree-branch-content-gap, var(--xh-list-option-gap));
+  }
+
+  /* 横排的一层里节点并排，行盒不能再各自吃满一行 */
+  [data-orientation='horizontal'] > .xh-scope-tree[data-part='item'] {
+    flex: none;
+  }
+
+  /* 收起态的唯一开关：display 会盖掉 hidden 属性的 UA 规则，漏了这条整棵子树就收不起来。
+     作者写的 hidden 与连接层发的 data-state=closed 都收在这里 */
+  .xh-scope-tree[data-part='branch-content'][hidden],
+  .xh-scope-tree[data-part='branch-content'][data-state='closed'] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中。
+     尺寸读部件自己改接过的 --xh-icon-size：chevron 与对号都与盒同边长（见上面两块） */
+  .xh-scope-tree[data-part='branch-trigger']:empty::before,
+  .xh-scope-tree[data-part='branch-indicator']: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;
+  }
+
+  /* 勾与半选杠叠成两层遮罩，按状态只换两层的尺寸：离开半选淡出的那一段里横杠留着，
+     淡出播完才换回勾——不在淡出途中闪出一枚勾 */
+  .xh-scope-tree[data-part='item-indicator']: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 / 100% 100% no-repeat, var(--xh-glyph-mark-minus) center / 0 0 no-repeat;
+    mask: var(--xh-glyph-mark-check) center / 100% 100% no-repeat, var(--xh-glyph-mark-minus) center / 0 0 no-repeat;
+    transition:
+      -webkit-mask-size 0s var(--xh-motion-duration-micro),
+      mask-size 0s var(--xh-motion-duration-micro);
+  }
+
+  .xh-scope-tree[data-part='item-indicator'][data-selected]:empty::before {
+    transition-delay: 0s;
+  }
+
+  .xh-scope-tree[data-part='item-indicator'][data-indeterminate]:not([data-selected]):empty::before {
+    -webkit-mask-size: 0 0, 100% 100%;
+    mask-size: 0 0, 100% 100%;
+    transition-delay: 0s;
+  }
+
+  /* 这一枝在取子节点：展开箭头换成转圈，不再按开合转向；只换字形，颜色沿用箭头的弱前景 */
+  .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-trigger'],
+  .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-indicator'] {
+    rotate: none;
+  }
+
+  .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-trigger']:empty::before,
+  .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-indicator']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-rotate-right);
+    mask-image: var(--xh-glyph-mark-rotate-right);
+    animation: xh-spin var(--xh-motion-loop-spin) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /* 减少动效：转圈停下，静止的箭头仍然读得出「还没好」，在途由分支的 aria-busy 念出。
+     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-trigger']:empty::before,
+    .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-indicator']:empty::before {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-trigger']:empty::before,
+  :where([data-motion='reduce']) .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-indicator']:empty::before {
+    animation: none;
+  }
+
+  /* —— 节点拖拽搬家 —— */
+  /* 整行都是拖动源，光标换成抓手告诉人这一行按得动。
+     这条不写 touch-action：整行关掉纵向手势，树容器自己就滚不动了；
+     触屏那一路交给下面那块专属把手 */
+  .xh-scope-tree[data-part='item'][data-draggable],
+  .xh-scope-tree[data-part='branch-control'][data-draggable] {
+    cursor: grab;
+  }
+
+  /* 节点拖拽把手：行里的一小块专属拖动区，按下即拖。触屏靠它起手，
+     代价只是这一小块地方不再跟着树滚。整行起手那一路原样保留，把手是叠加的第二个入口。
+     touch-action 不在这儿写：连接层按「拖不动就不写」把它写进了内联 style，
+     皮肤再写一遍会盖掉那份条件判断，让不可拖的节点也白白让出滚动 */
+  .xh-scope-tree[data-part='node-drag-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-tree-drag-size, var(--xh-_tree-indicator));
+    block-size: var(--xh-tree-drag-size, var(--xh-_tree-indicator));
+    border-radius: var(--xh-tree-drag-radius, var(--xh-shape-control));
+    color: var(--xh-tree-drag-fg, var(--xh-fg-subtle));
+    cursor: grab;
+  }
+
+  .xh-scope-tree[data-part='node-drag-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 抓手是两条横线：盒子取边框盒，块向两侧的描边就是那两条线，宽高与线宽都走令牌。
+     线的走向与能拖的方向垂直——节点沿块向上下排，画的就是横线。
+     用逻辑属性写，书写模式一换，线跟着排列轴自己转过去。
+     :empty 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起 */
+  .xh-scope-tree[data-part='node-drag-trigger']:empty::after {
+    content: '';
+    display: block;
+    inline-size: var(--xh-tree-drag-grip-long, var(--xh-space-2));
+    block-size: var(--xh-tree-drag-grip-short, var(--xh-space-1));
+    border-block: var(--xh-stroke-thin) solid currentColor;
+  }
+
+  .xh-scope-tree[data-part='node-drag-trigger']:not([data-disabled]):hover,
+  .xh-scope-tree[data-part='node-drag-trigger'][data-dragging] {
+    color: var(--xh-tree-drag-fg-active, var(--xh-fg-default));
+  }
+
+  .xh-scope-tree[data-part='node-drag-trigger'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  /* 不可拖的节点照样带一个把手，这里保住它的位置、只把它压到禁用色。
+     收成 display: none 是不行的：把手占着行首那一格，藏掉之后同一层里能拖与不能拖的两个节点，
+     文字起点会错开一格，层级关系跟着读歪 */
+  .xh-scope-tree[data-part='node-drag-trigger'][data-disabled] {
+    color: var(--xh-tree-drag-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  /* 被拖的那一行压暗，让人看得出正在搬的是它。这里只动 opacity、cursor 与 user-select，
+     一个 transform 都不写：行原地不动，要落到哪儿全交给落点指示 */
+  .xh-scope-tree[data-part='item'][data-dragging],
+  .xh-scope-tree[data-part='branch-control'][data-dragging] {
+    opacity: var(--xh-tree-dragging-opacity, var(--xh-state-dragging-opacity));
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  /* 落点指示线：插到哪一行的哪一侧，横线就画在那一行的那条边上。
+     定位上下文只给要画线的那一行：行平时都不定位，缺了它伪元素会一路上溯到最近的定位祖先，
+     线就画到树外面去；写到所有行上则是给每一行都多担一份，而落点同一时刻只有一个。
+     整块高亮那一档不在此列：它不靠伪元素，用不着这层上下文 */
+  .xh-scope-tree[data-part='item']:is([data-drop='before'], [data-drop='after']),
+  .xh-scope-tree[data-part='branch-control']:is([data-drop='before'], [data-drop='after']) {
+    position: relative;
+  }
+
+  /* 线贯穿整行宽度。行自身不收 overflow，线不会被行裁掉；
+     但仍整条画在行内不压着边——压着边画的话，首行那条上沿线会被树容器的圆角与滚动裁掉半条 */
+  .xh-scope-tree[data-part='item']:is([data-drop='before'], [data-drop='after'])::after,
+  .xh-scope-tree[data-part='branch-control']:is([data-drop='before'], [data-drop='after'])::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    block-size: var(--xh-tree-drop-line, var(--xh-stroke-thick));
+    background: var(--xh-tree-drop-fg, var(--xh-bg-brand));
+  }
+
+  /* 落在上沿还是下沿走逻辑属性，块向跟着书写模式走。
+     换成 box-shadow 的偏移量则是物理的，写不出逻辑方向 */
+  .xh-scope-tree[data-part='item'][data-drop='before']::after,
+  .xh-scope-tree[data-part='branch-control'][data-drop='before']::after {
+    inset-block-start: 0;
+  }
+
+  .xh-scope-tree[data-part='item'][data-drop='after']::after,
+  .xh-scope-tree[data-part='branch-control'][data-drop='after']::after {
+    inset-block-end: 0;
+  }
+
+  /* 放进这个节点里面：整行淡底加一圈内描边，与上下沿那条横线一眼分得开。
+     描边走零偏移的内投影，四边同时着色、不涉及方向，也跟着行的圆角走。
+     选择器里那条 :not([data-disabled]) 是把特指度补到与悬停那条齐平，再靠排在它之后压过它：
+     指针本来就停在落点这一行上，少了这一段，落点底色会被悬停那档灰盖掉。
+     禁用的节点从来不做落点，这一段因此不会漏画任何一处高亮 */
+  .xh-scope-tree[data-part='item'][data-drop='inside']:not([data-disabled]),
+  .xh-scope-tree[data-part='branch-control'][data-drop='inside']:not([data-disabled]) {
+    /* 落点不是选中：品牌淡底专属选中 / 当前，落点面取悬停之上一档的中性面 */
+    background: var(--xh-tree-drop-inside-bg, var(--xh-bg-subtle-hover));
+    box-shadow: inset 0 0 0 var(--xh-tree-drop-line, var(--xh-stroke-thick))
+      var(--xh-tree-drop-fg, var(--xh-bg-brand));
+  }
+
+  /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+  .xh-scope-tree[data-part='live-region'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media print {
+    /* 打印默认丢底色，而对号与半选杠是遮罩出来的一块底色：行本就不换面，丢了它选中在纸上就没了踪影 */
+    .xh-scope-tree[data-part='item-indicator'] {
+      print-color-adjust: exact;
+    }
+
+    /* 转了一半的圈定格在纸上没有意义，停下 */
+    .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-trigger']:empty::before,
+    .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-indicator']:empty::before {
+      animation: none;
+    }
+  }
+
+  /* 强制色：连接线的横段是一块渐变底色、竖段是描边，系统色下一个被抹掉、一个被换成文字色；
+     两段都写 GrayText，并只让连接线不参与强制换色 */
+  @media (forced-colors: active) {
+    .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='item']::before,
+    .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='branch'] > .xh-scope-tree[data-part='branch-control']::before {
+      border-color: GrayText;
+      background-image: linear-gradient(GrayText, GrayText);
+      forced-color-adjust: none;
+    }
+
+    .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='branch'] > .xh-scope-tree[data-part='branch-content']::after {
+      border-color: GrayText;
+      forced-color-adjust: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-tree:is([data-part='branch-trigger'], [data-part='branch-indicator']):empty::before,
+    .xh-scope-tree[data-part='item-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .xh-scope-tree[data-part='branch-control']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])) .xh-scope-tree:is([data-part='branch-trigger'], [data-part='branch-indicator']):empty::before,
+    .xh-scope-tree[data-part='item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])) .xh-scope-tree[data-part='item-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-tree[data-part='branch-control']:is([aria-disabled='true'], [data-disabled]) .xh-scope-tree:is([data-part='branch-trigger'], [data-part='branch-indicator']):empty::before,
+    .xh-scope-tree[data-part='item']:is([aria-disabled='true'], [data-disabled]) .xh-scope-tree[data-part='item-indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
+}