@xihan-ui/styles 2.1.0 → 3.0.0

package/css/tree.css

@@ -5,7 +5,10 @@
 
 /* 定义 tree 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 @import '../family/collection-item.css';
+@import '../family/loading-ring.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -14,10 +17,17 @@
   }
 
   [data-scope='tree'][data-part='root'] {
-    /* 行外的字形（空态 / 在途占位里作者塞的图标）按档取尺，树没有 size 轴、固定 md；
-       行内的由家族随 data-xh-collection-size 下发。这支只管作者放进行里的图标：
-       树自绘的状态字形（展开方向、行尾对号与半选杠）是指示符，各部件在自己身上
-       把 --xh-icon-size 改接到 --xh-control-indicator-* 一族的盒尺 */
+    /* 尺寸档只换这几支私有槽，行、指示符盒、缩进与占位从 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;
@@ -25,6 +35,26 @@
     gap: var(--xh-tree-gap, var(--xh-space-2));
   }
 
+  [data-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));
+  }
+
+  [data-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));
+  }
+
   [data-scope='tree'][data-part='root'][hidden] {
     display: none;
   }
@@ -77,14 +107,16 @@
   }
 
   /* 空态占位：待在 root 里、tree 的兄弟（role=tree 只许拥有 treeitem 与 group）。
-     盒归 tree，这里只画一句居中的次要文字 */
+     与在途占位同一副排版：一行居中的次要文字，字号与行内内衬随尺寸档与条目同档，块向内距一档 */
   [data-scope='tree'][data-part='empty'] {
-    display: block;
+    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-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);
+    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;
   }
 
@@ -97,17 +129,28 @@
     color: var(--xh-fg-disabled);
   }
 
-  /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
+  /* 在途占位：与空态占位同一个位置、同一副排版，两者不同屏。还没有节点时一枚加载环排在文案之前 */
   [data-scope='tree'][data-part='loading'] {
-    display: block;
+    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-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);
+    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 淡入并转），这里只给它盒子：直径取尺寸档的图标档 */
+  [data-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));
+  }
+
   [data-scope='tree'][data-part='loading'][hidden] {
     display: none;
   }
@@ -153,17 +196,17 @@
      按钮，单列的 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-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-text-body-size));
-    --xh-collection-radius: var(--xh-tree-row-radius, var(--xh-shape-control));
+    --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));
-    /* 箭头 / 对号盒与叶子的占位同一把尺：指示符档，与同一行里的拖拽把手同走
-       --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));
+    /* 箭头 / 对号盒与叶子的占位同一把尺：指示符档（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));
@@ -195,26 +238,36 @@
 
     display: flex;
     align-items: center;
-    gap: var(--xh-tree-row-gap, var(--xh-control-gap-md));
+    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;
-    /* 换面走家族的按下 / 释放时间线（与家族基础块同一份，描边色同样不进过渡）；box-shadow 一并接过渡：
-       换父落点那圈内描边挂在行自己身上，跟着 data-drop 在行间移动 */
+    /* 换面走家族的时间线（按下 press，其余一律 micro，描边色同样不进过渡）；box-shadow 一并接过渡：
+       换父落点那圈内描边挂在行自己身上，跟着 data-drop 在行间移动。
+       translate 是落下后的换位：宿主写回 collection 之后，连接层把行按旧位置反向补偿，这条过渡带它滑到新位置 */
     transition:
-      background-color var(--xh-motion-duration-release) var(--xh-motion-ease-release),
+      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);
+      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 淡到禁用透明度，数据到了再淡回；
+     树框（描边与底）不淡，取数在途时行不接指针 */
+  [data-scope='tree'][data-part='tree'][data-loading] :is([data-scope='tree'][data-part='item'], [data-scope='tree'][data-part='branch-control']) {
+    opacity: var(--xh-tree-row-loading-opacity, var(--xh-state-disabled-opacity));
+    pointer-events: none;
   }
 
   /* 分支行的首格是展开箭头，叶子行没有这一格，由行盒自己补出来（对号在行尾，不再替叶子顶这一格），
      否则叶子会比同级分支往行首缩一格，层级关系读不出来。占位宽度与箭头盒同一把尺 */
   [data-orientation='vertical'] > [data-scope='tree'][data-part='item'] {
     padding-inline-start: calc(
-      var(--xh-tree-row-px, var(--xh-control-px-md)) +
+      var(--xh-tree-row-px, var(--xh-_tree-row-px)) +
         var(--xh-_tree-indicator-size) +
-        var(--xh-tree-row-gap, var(--xh-control-gap-md))
+        var(--xh-tree-row-gap, var(--xh-_tree-row-gap))
     );
   }
 
@@ -230,7 +283,8 @@
     --xh-collection-outline-keyboard-highlight: var(--xh-ring-focus);
     --xh-collection-outline-selected-highlight: var(--xh-ring-focus);
 
-    transition: none;
+    /* 换面即时，只留换位：Alt + 方向键搬的正是这一行，它照样从旧位置滑到新位置 */
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   /* 禁用走 aria-disabled 而非原生 disabled：叶子的禁用面由家族按 aria-disabled 给；
@@ -273,7 +327,7 @@
   /* 家族只按行的 aria-selected 显示对号：分支行的 aria-selected 在 branch 上、半选没有选中语义，
      这两档按标记自身的 data-selected / data-indeterminate 显形 */
   [data-scope='tree'][data-part='item-indicator']:is([data-selected], [data-indeterminate]) {
-    visibility: visible;
+    opacity: 1;
   }
 
   /* 分支行的禁用不在行的 aria-disabled 上（那在 branch 上），标记按自身的 data-disabled 降级 */
@@ -294,7 +348,7 @@
     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-micro) var(--xh-motion-ease-enter-strong);
+    transition: rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='tree'][data-part='branch-trigger'][hidden],
@@ -302,20 +356,15 @@
     display: none;
   }
 
-  /* 收起时朝向行首、展开时转向下方，与逻辑书写方向一致：
-     rtl 下 inline-start 在右侧，箭头因此要反着转 */
-  [data-scope='tree'][data-part='branch-trigger'][data-state='open'],
-  [data-scope='tree'][data-part='branch-indicator'][data-state='open'] {
-    rotate: 90deg;
-  }
-
-  [dir='rtl'] [data-scope='tree'][data-part='branch-trigger'],
-  [dir='rtl'] [data-scope='tree'][data-part='branch-indicator'] {
-    rotate: 180deg;
+  /* 收起时指向行尾、展开时转向下方，与逻辑书写方向一致：rtl 下行尾在左侧，收起的箭头转半圈；
+     旋转角乘书写方向的符号（ltr 0deg、rtl 180deg），按就近的 dir 走 */
+  [data-scope='tree'][data-part='branch-trigger'],
+  [data-scope='tree'][data-part='branch-indicator'] {
+    rotate: calc(90deg - 90deg * var(--xh-direction-sign));
   }
 
-  [dir='rtl'] [data-scope='tree'][data-part='branch-trigger'][data-state='open'],
-  [dir='rtl'] [data-scope='tree'][data-part='branch-indicator'][data-state='open'] {
+  [data-scope='tree'][data-part='branch-trigger'][data-state='open'],
+  [data-scope='tree'][data-part='branch-indicator'][data-state='open'] {
     rotate: 90deg;
   }
 
@@ -330,7 +379,31 @@
     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-space-4));
+    padding-inline-start: var(--xh-tree-indent, var(--xh-_tree-indent));
+  }
+
+  /*
+   * 缩进参考线：每一层子节点的行首画一道竖线，对齐父节点展开箭头的中线，层级深时一眼看得出谁跟谁同层。
+   * 线画在子层容器自己的伪元素上：定位在子层里，只贯穿这一层的全部子孙，不越出父节点的范围。
+   * 它是内部分隔的一种，颜色取 border-subtle；行悬停与选中换面时线压在面上照样看得见
+   */
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'] {
+    position: relative;
+  }
+
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content']::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    /* 父行的行首内边距加半个箭头盒：竖线正好落在父节点展开箭头的中线上 */
+    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
+    );
+    inline-size: var(--xh-stroke-thin);
+    background: var(--xh-tree-line-color, var(--xh-border-subtle));
+    pointer-events: none;
   }
 
   /* 末端那一层横排：子节点并排铺开、必要时折行。缩进照旧由子层容器自己顶——
@@ -368,6 +441,8 @@
     mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
   }
 
+  /* 勾与半选杠叠成两层遮罩，按状态只换两层的尺寸：离开半选淡出的那一段里横杠留着，
+     淡出播完才换回勾——不在淡出途中闪出一枚勾 */
   [data-scope='tree'][data-part='item-indicator']:empty::before {
     content: '';
     display: inline-block;
@@ -375,13 +450,48 @@
     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;
+    -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);
+  }
+
+  [data-scope='tree'][data-part='item-indicator'][data-selected]:empty::before {
+    transition-delay: 0s;
   }
 
   [data-scope='tree'][data-part='item-indicator'][data-indeterminate]:not([data-selected]):empty::before {
-    -webkit-mask-image: var(--xh-glyph-mark-minus);
-    mask-image: var(--xh-glyph-mark-minus);
+    -webkit-mask-size: 0 0, 100% 100%;
+    mask-size: 0 0, 100% 100%;
+    transition-delay: 0s;
+  }
+
+  /* 这一枝在取子节点：展开箭头换成转圈，不再按开合转向；只换字形，颜色沿用箭头的弱前景 */
+  [data-scope='tree'][data-part='branch'][data-loading] > [data-scope='tree'][data-part='branch-control'] [data-scope='tree'][data-part='branch-trigger'],
+  [data-scope='tree'][data-part='branch'][data-loading] > [data-scope='tree'][data-part='branch-control'] [data-scope='tree'][data-part='branch-indicator'] {
+    rotate: none;
+  }
+
+  [data-scope='tree'][data-part='branch'][data-loading] > [data-scope='tree'][data-part='branch-control'] [data-scope='tree'][data-part='branch-trigger']:empty::before,
+  [data-scope='tree'][data-part='branch'][data-loading] > [data-scope='tree'][data-part='branch-control'] [data-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) {
+    [data-scope='tree'][data-part='branch'][data-loading] > [data-scope='tree'][data-part='branch-control'] [data-scope='tree'][data-part='branch-trigger']:empty::before,
+    [data-scope='tree'][data-part='branch'][data-loading] > [data-scope='tree'][data-part='branch-control'] [data-scope='tree'][data-part='branch-indicator']:empty::before {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='tree'][data-part='branch'][data-loading] > [data-scope='tree'][data-part='branch-control'] [data-scope='tree'][data-part='branch-trigger']:empty::before,
+  :where([data-motion='reduce']) [data-scope='tree'][data-part='branch'][data-loading] > [data-scope='tree'][data-part='branch-control'] [data-scope='tree'][data-part='branch-indicator']:empty::before {
+    animation: none;
   }
 
   /* —— 节点拖拽搬家 —— */
@@ -402,8 +512,8 @@
     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));
+    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;
@@ -467,7 +577,7 @@
     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));
+    background: var(--xh-tree-drop-fg, var(--xh-bg-brand));
   }
 
   /* 落在上沿还是下沿走逻辑属性，块向跟着书写模式走。
@@ -492,7 +602,7 @@
     /* 落点不是选中：品牌淡底专属选中 / 当前，落点面取悬停之上一档的中性面 */
     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));
+      var(--xh-tree-drop-fg, var(--xh-bg-brand));
   }
 
   /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
@@ -513,5 +623,41 @@
     [data-scope='tree'][data-part='item-indicator'] {
       print-color-adjust: exact;
     }
+
+    /* 转了一半的圈定格在纸上没有意义，停下 */
+    [data-scope='tree'][data-part='branch'][data-loading] > [data-scope='tree'][data-part='branch-control'] [data-scope='tree'][data-part='branch-trigger']:empty::before,
+    [data-scope='tree'][data-part='branch'][data-loading] > [data-scope='tree'][data-part='branch-control'] [data-scope='tree'][data-part='branch-indicator']:empty::before {
+      animation: none;
+    }
+  }
+
+  /* 强制色：参考线是一块底色，系统色下会被抹成 Canvas；换成 GrayText 并只让这条线不参与强制换色 */
+  @media (forced-colors: active) {
+    [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content']::before {
+      background: GrayText;
+      forced-color-adjust: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='tree']:is([data-part='branch-trigger'], [data-part='branch-indicator']):empty::before,
+    [data-scope='tree'][data-part='item-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-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])) [data-scope='tree']:is([data-part='branch-trigger'], [data-part='branch-indicator']):empty::before,
+    [data-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])) [data-scope='tree'][data-part='item-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='tree'][data-part='branch-control']:is([aria-disabled='true'], [data-disabled]) [data-scope='tree']:is([data-part='branch-trigger'], [data-part='branch-indicator']):empty::before,
+    [data-scope='tree'][data-part='item']:is([aria-disabled='true'], [data-disabled]) [data-scope='tree'][data-part='item-indicator']:empty::before {
+      background-color: GrayText;
+    }
   }
 }

package/css/truncate.css

@@ -42,24 +42,67 @@
     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-middle-text] {
+    position: relative;
+    text-overflow: clip;
+    -webkit-text-fill-color: transparent;
   }
 
-  /* 是按钮的那一档才提亮：指针停在上面时这段文字与正文分开，
-     按不动的短文本不给这个反馈 */
-  [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);
+  [data-scope='truncate'][data-part='root'][data-middle-text]::before,
+  [data-scope='truncate'][data-part='root'][data-middle-text]::after {
+    position: absolute;
+    inset-block: 0;
+    inline-size: 50%;
+    overflow: hidden;
+    white-space: nowrap;
+    -webkit-text-fill-color: currentColor;
+    pointer-events: none;
+  }
+
+  /* 替代文字给空串：这两段只是画出来的样子，读屏念的是盒子里的原文 */
+  [data-scope='truncate'][data-part='root'][data-middle-text]::before {
+    content: attr(data-middle-text) / '';
+    inset-inline-start: 0;
+    text-overflow: ellipsis;
+  }
+
+  /* 后一半的盒子贴在末尾侧，文字照正文的方向排：弹性容器按末端对齐，放不下的部分从起始侧溢出，
+     露出来的正是原文的结尾。不翻方向，也就不用分书写方向各写一版 */
+  [data-scope='truncate'][data-part='root'][data-middle-text]::after {
+    content: attr(data-middle-text) / '';
+    inset-inline-end: 0;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  /* —— 展开按钮 —— */
+  /* 盒型、悬停与按下面由 Action Control 的文字档给（ghost、sm）；排在文字盒子之后另起一行，
+     起始端对齐正文，不被外层的弹性布局拉宽 */
+  [data-scope='truncate'][data-part='trigger'] {
+    flex: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 这一档不保证文字填色照写的走：退回末尾省略，原文按系统色直接显示 */
+    [data-scope='truncate'][data-part='root'][data-middle-text] {
+      text-overflow: ellipsis;
+      -webkit-text-fill-color: currentColor;
+    }
+
+    [data-scope='truncate'][data-part='root'][data-middle-text]::before,
+    [data-scope='truncate'][data-part='root'][data-middle-text]::after {
+      content: none;
+    }
   }
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
-  [data-scope='truncate'][data-part='root'][hidden] {
+  [data-scope='truncate'][data-part='root'][hidden],
+  [data-scope='truncate'][data-part='trigger'][hidden] {
     display: none;
   }
 }

package/css/typography.css

@@ -6,6 +6,17 @@
 /* 定义 typography 样式。 */
 
 @layer xihan.components {
+  /* 渐变字的前景：缺省透明，透出裁进字形的渐变；高对比作用域里换成实色，盖住渐变。
+     轴边界上只路由这一个简单值，渐变本身仍在文字上按本地的两端颜色与走向求值，
+     内层 default / more 能双向重置，也不会把未解析的组件变量冻结在祖先上。 */
+  :where(:root, [data-contrast='default']) {
+    --xh-_typography-gradient-fg: transparent;
+  }
+
+  :where([data-contrast='more']) {
+    --xh-_typography-gradient-fg: var(--xh-fg-default);
+  }
+
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='typography'] {
     --xh-typography-skin: 1;
@@ -183,6 +194,37 @@
     color: var(--xh-typography-text-fg-tone, var(--xh-_tone-fg));
   }
 
+  /* 删除线与下划线是同一条装饰线的两个取值，两个开关都开时两条都画 */
+  [data-scope='typography'][data-part='text'][data-strikethrough] {
+    text-decoration-line: line-through;
+  }
+
+  [data-scope='typography'][data-part='text'][data-underline] {
+    text-decoration-line: underline;
+    text-underline-offset: var(--xh-typography-text-underline-offset, var(--xh-space-0_5));
+  }
+
+  [data-scope='typography'][data-part='text'][data-underline][data-strikethrough] {
+    text-decoration-line: underline line-through;
+  }
+
+  /* 标记：与文本高亮的命中片段同一副淡底、字色与收边，两处被标出的文字看起来是一回事。
+     排在语气之后：同时写语气时底与字色一起换成该族，只写语气不写标记仍只换字色。
+     跨行时两半各自收边，否则圆角与内边距只画在整段的首尾；两条都写：WebKit 只认带前缀那条 */
+  [data-scope='typography'][data-part='text'][data-marked] {
+    padding-inline: var(--xh-typography-mark-px, var(--xh-space-0_5));
+    border-radius: var(--xh-typography-mark-radius, var(--xh-shape-inset));
+    background: var(--xh-typography-mark-bg, var(--xh-bg-brand-subtle));
+    color: var(--xh-typography-mark-fg, var(--xh-fg-brand-strong));
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+
+  [data-scope='typography'][data-part='text'][data-marked][data-tone] {
+    background: var(--xh-typography-mark-bg, var(--xh-_tone-subtle));
+    color: var(--xh-typography-mark-fg, var(--xh-_tone-fg));
+  }
+
   /* 字重排在形态之后：与 strong 一起写时，粗到哪一档由字重说了算 */
   [data-scope='typography'][data-part='text'][data-weight='regular'] {
     font-weight: var(--xh-font-weight-regular);
@@ -200,6 +242,42 @@
     font-weight: var(--xh-font-weight-bold);
   }
 
+  /* —— 渐变字 —— */
+  /* 渐变画在背景上，再用 background-clip 把背景裁进字形里；前景必须透明才透得出底下的渐变。
+     两条 background-clip 都写：WebKit 只认带前缀那条。
+     -webkit-text-fill-color 在 WebKit 里决定字形填充色并盖过 color，跟着 color 走。
+     排在语气之后：语气写的是前景色，渐变字的前景要留给上面那支透明槽 */
+  [data-scope='typography'][data-part='text'][data-variant='gradient'] {
+    /* 两端颜色各收一个私有槽：语气档换的是这两支，使用者槽仍排在它们前面 */
+    --xh-_typography-gradient-from: var(--xh-gradient-brand-from);
+    --xh-_typography-gradient-to: var(--xh-gradient-brand-to);
+
+    background-image: linear-gradient(
+      var(--xh-typography-gradient-direction, to right),
+      var(--xh-typography-gradient-from, var(--xh-_typography-gradient-from)),
+      var(--xh-typography-gradient-to, var(--xh-_typography-gradient-to))
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: var(--xh-_typography-gradient-fg);
+    -webkit-text-fill-color: currentColor;
+  }
+
+  /* 语气换的是两端颜色：取该族主色与它压深一档的取值，深浅两态自动跟随 */
+  [data-scope='typography'][data-part='text'][data-variant='gradient'][data-tone] {
+    --xh-_typography-gradient-from: var(--xh-_tone);
+    --xh-_typography-gradient-to: var(--xh-_tone-active);
+  }
+
+  /* 无 JS 时的系统高对比、强制色与打印统一退回单色；显式局部轴由文件头那支前景槽负责 */
+  @media (prefers-contrast: more), (forced-colors: active), print {
+    [data-scope='typography'][data-part='text'][data-variant='gradient'] {
+      background-image: none;
+      color: inherit;
+      -webkit-text-fill-color: currentColor;
+    }
+  }
+
   /* —— 行内链接 —— */
   [data-scope='typography'][data-part='link'] {
     border-radius: var(--xh-typography-link-radius, var(--xh-shape-inset));
@@ -376,4 +454,19 @@
   [data-scope='typography'][data-part='prose'] :where(th) {
     font-weight: var(--xh-typography-prose-th-font-weight, var(--xh-font-weight-semibold));
   }
+
+  @media (forced-colors: active) {
+    /* 这一档里自定义底色一律被换成 Canvas，标记会与正文分不开；用系统高亮反色把那一段画回来 */
+    [data-scope='typography'][data-part='text'][data-marked] {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢底色，标记只剩字色，被标出的那段在纸上就不显眼了 */
+    [data-scope='typography'][data-part='text'][data-marked] {
+      print-color-adjust: exact;
+    }
+  }
 }