@xihan-ui/styles 1.0.0 → 2.0.0

package/css/tree.css

@@ -1,3 +1,12 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 tree 样式。 */
+
+@import '../family/collection-item.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='tree'] {
@@ -5,8 +14,11 @@
   }
 
   [data-scope='tree'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-tree-icon-size, var(--xh-glyph-size-text));
+    /* 行外的字形（空态 / 在途占位里作者塞的图标）按档取尺，树没有 size 轴、固定 md；
+       行内的由家族随 data-xh-collection-size 下发（§6.5）。这支只管作者放进行里的图标：
+       树自绘的状态字形（展开方向、叶子对号、勾选把手里的勾）是指示符，各部件在自己身上
+       把 --xh-icon-size 改接到 --xh-control-indicator-* 一族的盒尺 */
+    --xh-icon-size: var(--xh-tree-icon-size, var(--xh-glyph-size-md));
 
     display: flex;
     flex-direction: column;
@@ -17,6 +29,20 @@
     display: none;
   }
 
+  /* 淡底档：描边透明、底换成 subtle；outline 即基础规则。
+     形态由 root 的 data-variant 向容器下发，容器基础规则直接写 border-default / bg-surface，
+     与 list / descriptions 的 outline 面同源（列表容器族） */
+  [data-scope='tree'][data-part='root'][data-variant='subtle'] [data-scope='tree'][data-part='tree'] {
+    border-color: transparent;
+    background: var(--xh-tree-bg, var(--xh-bg-subtle));
+  }
+
+  /* 无框档：边框留着但透明，去掉外框不会让行的位置跳一格 */
+  [data-scope='tree'][data-part='root'][data-variant='ghost'] [data-scope='tree'][data-part='tree'] {
+    border-color: transparent;
+    background: transparent;
+  }
+
   [data-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));
@@ -50,6 +76,46 @@
     display: none;
   }
 
+  /* 空态占位：待在 root 里、tree 的兄弟（role=tree 只许拥有 treeitem 与 group）。
+     盒归 tree，这里只画一句居中的次要文字 */
+  [data-scope='tree'][data-part='empty'] {
+    display: block;
+    padding-block: var(--xh-tree-empty-py, var(--xh-space-3));
+    padding-inline: var(--xh-tree-empty-px, var(--xh-space-3));
+    color: var(--xh-tree-empty-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-tree-empty-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  /* 上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
+  [data-scope='tree'][data-part='empty'][hidden] {
+    display: none;
+  }
+
+  [data-scope='tree'][data-part='empty'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
+  [data-scope='tree'][data-part='loading'] {
+    display: block;
+    padding-block: var(--xh-tree-loading-py, var(--xh-space-3));
+    padding-inline: var(--xh-tree-loading-px, var(--xh-space-3));
+    color: var(--xh-tree-loading-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-tree-loading-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  [data-scope='tree'][data-part='loading'][hidden] {
+    display: none;
+  }
+
+  [data-scope='tree'][data-part='loading'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
   /* 焦点在树外时容器自己进 Tab 序列兜底，落焦不画环：高亮永远长在行上 */
   [data-scope='tree'][data-part='tree']:focus-visible {
     outline: none;
@@ -76,59 +142,112 @@
 
   [data-scope='tree'][data-part='branch']:focus-visible > [data-scope='tree'][data-part='branch-control'] {
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    /* 往内收：行是撑满宽度的，环画在外沿会被容器裁掉 */
-    outline-offset: calc(-1 * var(--xh-ring-width));
+    outline-offset: var(--xh-ring-offset);
   }
 
-  /* 行：叶子与分支共用同一套盒子，两种行在视觉上必须齐平 */
+  /* 行：叶子与分支共用同一套盒子，两种行在视觉上必须齐平。
+     行走 Collection Item 的 page 语境（页内持久集合，§7.3）：悬停 / 高亮 / 按下面（白底承载 hover 100 →
+     pressed 200）与选中面（品牌淡底 + 淡底前景 + 前导标记，selected+hover 20% / +pressed 28%）都由家族按
+     aria-selected / data-selected 与 aria-disabled / data-disabled 给出；这里只把公开槽映射到桥接槽。
+     布局保持 flex 而不用家族网格：一行里可以并排多个前导部件（箭头、勾选把手、拖拽把手）与作者自己的图标、
+     按钮，单列的 prefix 放不下；间距统一由行的 gap 给，家族按槽下发的外边距（--xh-collection-gap）归零 */
   [data-scope='tree'][data-part='item'],
   [data-scope='tree'][data-part='branch-control'] {
+    --xh-collection-block-padding: var(--xh-tree-row-py, var(--xh-list-option-py-md));
+    --xh-collection-inline-padding: var(--xh-tree-row-px, var(--xh-control-px-md));
+    --xh-collection-gap: 0;
+    --xh-collection-font-size: var(--xh-tree-row-font-size, var(--xh-text-body-size));
+    --xh-collection-radius: var(--xh-tree-row-radius, var(--xh-shape-control));
+    /* 作者的图标尺槽经桥接槽下发到行，家族缺省按 md 档 */
+    --xh-collection-glyph-size: var(--xh-tree-icon-size, var(--xh-_collection-glyph-size));
+    /* 箭头 / 对号盒与叶子的占位同一把尺：指示符档（§6.5），与同一行里的勾选把手、拖拽把手同走
+       --xh-control-indicator-size（comfortable 16 / compact 14）。不读家族按档下发的 --xh-icon-size——
+       那支只管作者放进行里的图标，按图标档取的 20px 会比 16px 的勾选把手大一圈 */
+    --xh-_tree-indicator-size: var(--xh-tree-indicator-size, var(--xh-control-indicator-size));
+    --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-fg-on-brand-subtle));
+    --xh-collection-fg-selected-hover: var(--xh-tree-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-highlight: var(--xh-tree-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-pressed: var(--xh-tree-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --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: var(--xh-tree-row-bg-selected, var(--xh-bg-brand-subtle));
+    /* 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-control-gap-md));
-    padding-block: var(--xh-tree-row-py, var(--xh-list-option-py-md));
-    padding-inline: var(--xh-tree-row-px, var(--xh-control-px-md));
-    border-radius: var(--xh-tree-row-radius, var(--xh-shape-control));
-    color: var(--xh-tree-row-fg, var(--xh-fg-default));
-    font-size: var(--xh-tree-row-font-size, var(--xh-text-body-size));
     /* 行高留出文字的上下伸展空间，行内那层 overflow:hidden 才不会把字削掉 */
     line-height: var(--xh-tree-row-leading, var(--xh-leading-normal));
     white-space: nowrap;
-    cursor: pointer;
     user-select: none;
+    /* 换面走家族的按下 / 释放时间线（与家族基础块同一份，描边色同样不进过渡）；box-shadow 一并接过渡：
+       换父落点那圈内描边挂在行自己身上，跟着 data-drop 在行间移动 */
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+      background-color var(--xh-motion-duration-release) var(--xh-motion-ease-release),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 分支行的首格是展开箭头，叶子行没有这一格。作者摆了 item-indicator 时由它顶着，
      没摆（如勾选档首位直接是 item-checkbox）就由行盒自己补出来，
-     否则叶子会比同级分支往行首缩一格，层级关系读不出来 */
+     否则叶子会比同级分支往行首缩一格，层级关系读不出来。占位宽度与箭头 / 对号盒同一把尺 */
   [data-orientation='vertical'] > [data-scope='tree'][data-part='item']:not(
       :has(> [data-scope='tree'][data-part='item-indicator'])
     ) {
     padding-inline-start: calc(
       var(--xh-tree-row-px, var(--xh-control-px-md)) +
-        var(--xh-tree-indicator-size, var(--xh-control-indicator-size)) +
+        var(--xh-_tree-indicator-size) +
         var(--xh-tree-row-gap, var(--xh-control-gap-md))
     );
   }
 
+  /* 家族给了 display，UA 的 [hidden]{display:none} 已被盖掉 */
   [data-scope='tree'][data-part='item'][hidden],
   [data-scope='tree'][data-part='branch-control'][hidden] {
     display: none;
   }
 
-  /* 悬停与键盘锚点共用中性灰轻档：data-highlighted 跟的是连接层记的焦点行，
-     与选中互相独立，键盘落焦另有聚焦环标记位置 */
-  [data-scope='tree'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]),
-  [data-scope='tree'][data-part='branch-control']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
+  /* 键盘焦点出现时环才接回并立即到位，不压在背景过渡的中间帧上：叶子自己承载焦点；
+     分支的焦点在 branch 上、环画在它那一行（见上面 branch:focus-visible 那条） */
+  [data-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);
+
+    transition: none;
+  }
+
+  /* 禁用走 aria-disabled 而非原生 disabled：叶子的禁用面由家族按 aria-disabled 给；
+     分支行不是 treeitem 本体（aria-disabled 在 branch 上），按连接层的 data-disabled 映射到家族槽：
+     字色降级、光标 not-allowed，悬停 / 高亮 / 按下由家族守卫拦掉 */
+  [data-scope='tree'][data-part='branch-control'][data-disabled] {
+    --xh-collection-fg-rest: var(--xh-fg-disabled);
+    --xh-collection-cursor-rest: not-allowed;
   }
 
   /* 勾选把手：勾选态只画在它身上，不碰行底色——底色那条通道归高亮 */
   [data-scope='tree'][data-part='item-checkbox'],
   [data-scope='tree'][data-part='branch-checkbox'] {
+    /* 方框里的勾按边长的比例取尺（与 Checkbox 同一比例），不吃家族按档下发的行内字形尺 */
+    --xh-icon-size: calc(var(--xh-tree-checkbox-size, var(--xh-control-indicator-size)) * 0.75);
+
     display: inline-grid;
     place-items: center;
     flex: none;
@@ -136,7 +255,7 @@
     block-size: var(--xh-tree-checkbox-size, var(--xh-control-indicator-size));
     border: var(--xh-stroke-thin) solid var(--xh-tree-checkbox-border, var(--xh-border-control));
     border-radius: var(--xh-tree-checkbox-radius, var(--xh-shape-inset));
-    background: var(--xh-tree-checkbox-bg, var(--xh-bg-canvas));
+    background: var(--xh-tree-checkbox-bg, transparent);
     color: var(--xh-tree-checkbox-fg, var(--xh-fg-on-brand));
   }
 
@@ -146,6 +265,16 @@
     background: var(--xh-tree-checkbox-bg-checked, var(--xh-bg-brand));
   }
 
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
+     勾满与半选铺的是同一块实心底，两态一起收 */
+  [data-scope='tree'][data-part='item-checkbox'][data-selected]:focus-visible,
+  [data-scope='tree'][data-part='item-checkbox'][data-indeterminate]:focus-visible,
+  [data-scope='tree'][data-part='branch-checkbox'][data-selected]:focus-visible,
+  [data-scope='tree'][data-part='branch-checkbox'][data-indeterminate]:focus-visible {
+    --xh-_ring-color: currentColor;
+  }
+
   /* 半选：级联勾选下「子树勾了一部分」的第三态，此前发了 data-indeterminate 却没人画 */
   [data-scope='tree'][data-part='item-checkbox'][data-indeterminate]:not([data-selected]),
   [data-scope='tree'][data-part='branch-checkbox'][data-indeterminate]:not([data-selected]) {
@@ -180,29 +309,7 @@
 
   [data-scope='tree'][data-part='item-checkbox'][data-disabled],
   [data-scope='tree'][data-part='branch-checkbox'][data-disabled] {
-    border-color: var(--xh-tree-checkbox-border-disabled, var(--xh-border-subtle));
-  }
-
-  /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，
-     两者因此能同时看见 */
-  [data-scope='tree'][data-part='item'][data-selected],
-  [data-scope='tree'][data-part='branch-control'][data-selected] {
-    color: var(--xh-tree-row-fg-selected, var(--xh-fg-brand-strong));
-    font-weight: var(--xh-tree-row-selected-font-weight, var(--xh-font-weight-medium));
-  }
-
-  /* 叶子自己就是 treeitem，环直接画在它身上 */
-  [data-scope='tree'][data-part='item']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-width));
-  }
-
-  /* 禁用走 aria-disabled 而非原生 disabled：节点仍要可聚焦（它还得当方向键的起点），
-     所以只能靠 data-disabled 表达，写 :disabled 永远不命中 */
-  [data-scope='tree'][data-part='item'][data-disabled],
-  [data-scope='tree'][data-part='branch-control'][data-disabled] {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+    border-color: var(--xh-tree-checkbox-border-disabled, var(--xh-border-default));
   }
 
   [data-scope='tree'][data-part='item-text'],
@@ -215,40 +322,37 @@
     text-overflow: ellipsis;
   }
 
-  /* 勾选标记只在选中项上出现；未选中时占位不塌，切换选中不引起行宽抖动 */
+  /* 勾选标记是 page 语境的前导对号：显隐与颜色由家族按行的选中态给；
+     未选中时占位不塌，切换选中不引起行宽抖动。盒尺取指示符档；盒里的对号是指示符（§6.5），
+     在自己身上把 --xh-icon-size 改接到盒的尺，兜底对号与作者塞进盒里的 XhIcon 读同一把尺、与盒同边长 */
   [data-scope='tree'][data-part='item-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, var(--xh-control-indicator-size));
-    color: var(--xh-tree-indicator-fg, var(--xh-fg-brand));
-    visibility: hidden;
+    inline-size: var(--xh-_tree-indicator-size);
   }
 
   [data-scope='tree'][data-part='item-indicator'][hidden] {
     display: none;
   }
 
-  [data-scope='tree'][data-part='item-indicator'][data-selected] {
-    visibility: visible;
-  }
-
-  [data-scope='tree'][data-part='item-indicator'][data-disabled] {
-    color: var(--xh-fg-disabled);
-  }
-
   /* 展开箭头与方向指示符：两者都可能被作者用作"点这里展开"的把手，
-     所以尺寸与叶子的勾选标记一致，两种行的文字起点才对得齐 */
+     所以尺寸与叶子的勾选标记一致，两种行的文字起点才对得齐。
+     盒里的 chevron 是指示符（§6.5）：与盒同边长，--xh-icon-size 在自己身上改接到盒的尺 */
   [data-scope='tree'][data-part='branch-trigger'],
   [data-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, var(--xh-control-indicator-size));
+    inline-size: var(--xh-_tree-indicator-size);
     color: var(--xh-tree-branch-indicator-fg, var(--xh-fg-subtle));
-    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='tree'][data-part='branch-trigger'][hidden],
@@ -301,12 +405,15 @@
     flex: none;
   }
 
-  /* 收起态的唯一开关：display 会盖掉 hidden 属性的 UA 规则，漏了这条整棵子树就收不起来 */
-  [data-scope='tree'][data-part='branch-content'][hidden] {
+  /* 收起态的唯一开关：display 会盖掉 hidden 属性的 UA 规则，漏了这条整棵子树就收不起来。
+     作者写的 hidden 与连接层发的 data-state=closed 都收在这里 */
+  [data-scope='tree'][data-part='branch-content'][hidden],
+  [data-scope='tree'][data-part='branch-content'][data-state='closed'] {
     display: none;
   }
 
-  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中。
+     尺寸读部件自己改接过的 --xh-icon-size：chevron 与对号都与盒同边长（见上面两块） */
   [data-scope='tree'][data-part='branch-trigger']:empty::before,
   [data-scope='tree'][data-part='branch-indicator']:empty::before {
     content: '';
@@ -330,8 +437,133 @@
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
 
+  /* —— 节点拖拽搬家 —— */
+  /* 整行都是拖动源，光标换成抓手告诉人这一行按得动。
+     这条不写 touch-action：整行关掉纵向手势，树容器自己就滚不动了；
+     触屏那一路交给下面那块专属把手 */
+  [data-scope='tree'][data-part='item'][data-draggable],
+  [data-scope='tree'][data-part='branch-control'][data-draggable] {
+    cursor: grab;
+  }
+
+  /* 节点拖拽把手：行里的一小块专属拖动区，按下即拖。触屏靠它起手，
+     代价只是这一小块地方不再跟着树滚。整行起手那一路原样保留，把手是叠加的第二个入口。
+     touch-action 不在这儿写：连接层按「拖不动就不写」把它写进了内联 style，
+     皮肤再写一遍会盖掉那份条件判断，让不可拖的节点也白白让出滚动 */
+  [data-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-control-indicator-size));
+    block-size: var(--xh-tree-drag-size, var(--xh-control-indicator-size));
+    border-radius: var(--xh-tree-drag-radius, var(--xh-shape-control));
+    color: var(--xh-tree-drag-fg, var(--xh-fg-subtle));
+    cursor: grab;
+  }
+
+  [data-scope='tree'][data-part='node-drag-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 抓手是两条横线：盒子取边框盒，块向两侧的描边就是那两条线，宽高与线宽都走令牌。
+     线的走向与能拖的方向垂直——节点沿块向上下排，画的就是横线。
+     用逻辑属性写，书写模式一换，线跟着排列轴自己转过去。
+     :empty 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起 */
+  [data-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;
+  }
+
+  [data-scope='tree'][data-part='node-drag-trigger']:not([data-disabled]):hover,
+  [data-scope='tree'][data-part='node-drag-trigger'][data-dragging] {
+    color: var(--xh-tree-drag-fg-active, var(--xh-fg-default));
+  }
+
+  [data-scope='tree'][data-part='node-drag-trigger'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  /* 不可拖的节点照样带一个把手，这里保住它的位置、只把它压到禁用色。
+     收成 display: none 是不行的：把手占着行首那一格，藏掉之后同一层里能拖与不能拖的两个节点，
+     文字起点会错开一格，层级关系跟着读歪 */
+  [data-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 都不写：行原地不动，要落到哪儿全交给落点指示 */
+  [data-scope='tree'][data-part='item'][data-dragging],
+  [data-scope='tree'][data-part='branch-control'][data-dragging] {
+    opacity: var(--xh-tree-dragging-opacity, var(--xh-state-dragging-opacity));
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  /* 落点指示线：插到哪一行的哪一侧，横线就画在那一行的那条边上。
+     定位上下文只给要画线的那一行：行平时都不定位，缺了它伪元素会一路上溯到最近的定位祖先，
+     线就画到树外面去；写到所有行上则是给每一行都多担一份，而落点同一时刻只有一个。
+     整块高亮那一档不在此列：它不靠伪元素，用不着这层上下文 */
+  [data-scope='tree'][data-part='item']:is([data-drop='before'], [data-drop='after']),
+  [data-scope='tree'][data-part='branch-control']:is([data-drop='before'], [data-drop='after']) {
+    position: relative;
+  }
+
+  /* 线贯穿整行宽度。行自身不收 overflow，线不会被行裁掉；
+     但仍整条画在行内不压着边——压着边画的话，首行那条上沿线会被树容器的圆角与滚动裁掉半条 */
+  [data-scope='tree'][data-part='item']:is([data-drop='before'], [data-drop='after'])::after,
+  [data-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-border-control-focus));
+  }
+
+  /* 落在上沿还是下沿走逻辑属性，块向跟着书写模式走。
+     换成 box-shadow 的偏移量则是物理的，写不出逻辑方向 */
+  [data-scope='tree'][data-part='item'][data-drop='before']::after,
+  [data-scope='tree'][data-part='branch-control'][data-drop='before']::after {
+    inset-block-start: 0;
+  }
+
+  [data-scope='tree'][data-part='item'][data-drop='after']::after,
+  [data-scope='tree'][data-part='branch-control'][data-drop='after']::after {
+    inset-block-end: 0;
+  }
+
+  /* 放进这个节点里面：整行淡底加一圈内描边，与上下沿那条横线一眼分得开。
+     描边走零偏移的内投影，四边同时着色、不涉及方向，也跟着行的圆角走。
+     选择器里那条 :not([data-disabled]) 是把特指度补到与悬停那条齐平，再靠排在它之后压过它：
+     指针本来就停在落点这一行上，少了这一段，落点底色会被悬停那档灰盖掉。
+     禁用的节点从来不做落点，这一段因此不会漏画任何一处高亮 */
+  [data-scope='tree'][data-part='item'][data-drop='inside']:not([data-disabled]),
+  [data-scope='tree'][data-part='branch-control'][data-drop='inside']:not([data-disabled]) {
+    /* 落点不是选中：品牌淡底专属选中 / 当前（§7.1），落点面取悬停之上一档的中性面 */
+    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-border-control-focus));
+  }
+
+  /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+  [data-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;
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='tree'][data-part='item-checkbox'][hidden],
   [data-scope='tree'][data-part='branch-checkbox'][hidden] {
     display: none;
   }

package/css/truncate.css

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 truncate 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='truncate'] {
+    --xh-truncate-skin: 1;
+  }
+
+  /* 单行：一行装不下就收成省略号。
+     行数由连接层写进这个盒子的内联 style，样式表这一行只是它缺席时的落点 */
+  [data-scope='truncate'][data-part='root'] {
+    --xh-_truncate-lines: 1;
+
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* 多行：按行数裁，裁掉的那一行末尾收省略号 */
+  [data-scope='truncate'][data-part='root'][data-multiline] {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    /* 使用者槽排在前面：连接层把行数写成根上的内联私有槽，
+       在外层写一句 --xh-truncate-lines 即可整片改档，不必逐处改标记 */
+    -webkit-line-clamp: var(--xh-truncate-lines, var(--xh-_truncate-lines));
+    white-space: normal;
+    /* 一长串没有断点的字符（网址、编号）也得断开，否则它一路撑出去，裁不住 */
+    overflow-wrap: break-word;
+  }
+
+  /* 铺开：裁剪整个撤掉。写在两档之后，压得住上面同权重的那两条 */
+  [data-scope='truncate'][data-part='root'][data-state='open'] {
+    display: block;
+    overflow: visible;
+    white-space: normal;
+  }
+
+  /* 真被裁了才是那颗按钮：装得下的短文本按下去什么都不变，摆出手型等于许一个按不动的按钮。
+     铺开态另收一条——那一档量不出"被裁"，但收回去的入口必须留着 */
+  [data-scope='truncate'][data-part='root'][data-expandable][data-overflowing],
+  [data-scope='truncate'][data-part='root'][data-expandable][data-state='open'] {
+    cursor: pointer;
+    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 是按钮的那一档才提亮：指针停在上面时这段文字与正文分开，
+     按不动的短文本不给这个反馈 */
+  [data-scope='truncate'][data-part='root'][data-expandable][data-overflowing]:hover,
+  [data-scope='truncate'][data-part='root'][data-expandable][data-state='open']:hover {
+    color: var(--xh-fg-default);
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='truncate'][data-part='root'][hidden] {
+    display: none;
+  }
+}