@xihan-ui/styles 1.0.0-alpha.3 → 1.0.0

package/css/toggle-group.css

@@ -7,10 +7,36 @@
   /* 分段控件：段与段之间不留缝，靠共边连成一体，所以 root 不设 gap。
      排布只能读 data-orientation——aria-orientation 在多选模式下连接层根本不输出（role=group 不收） */
   [data-scope='toggle-group'][data-part='root'] {
+    /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+       既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+    isolation: isolate;
+
+    /* 段的度量与字号走私有槽中转，与同族的分段控件一处对一处 */
+    --xh-_toggle-group-h: var(--xh-control-h-md);
+    --xh-_toggle-group-px: var(--xh-control-px-md);
+    --xh-_toggle-group-gap: var(--xh-control-gap-md);
+    --xh-_toggle-group-font-size: var(--xh-control-font-md);
+
     display: inline-flex;
     align-items: stretch;
   }
 
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  [data-scope='toggle-group'][data-part='root'][data-size='sm'] {
+    --xh-_toggle-group-h: var(--xh-control-h-sm);
+    --xh-_toggle-group-px: var(--xh-control-px-sm);
+    --xh-_toggle-group-gap: var(--xh-control-gap-sm);
+    --xh-_toggle-group-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='toggle-group'][data-part='root'][data-size='lg'] {
+    --xh-_toggle-group-h: var(--xh-control-h-lg);
+    --xh-_toggle-group-px: var(--xh-control-px-lg);
+    --xh-_toggle-group-gap: var(--xh-control-gap-lg);
+    --xh-_toggle-group-font-size: var(--xh-control-font-lg);
+  }
+
   [data-scope='toggle-group'][data-part='root'][data-orientation='horizontal'] {
     flex-direction: row;
   }
@@ -45,15 +71,15 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--xh-toggle-group-item-gap, var(--xh-control-gap-md));
-    block-size: var(--xh-toggle-group-item-h, var(--xh-control-h-md));
-    padding-inline: var(--xh-toggle-group-item-px, var(--xh-control-px-md));
+    gap: var(--xh-toggle-group-item-gap, var(--xh-_toggle-group-gap));
+    block-size: var(--xh-toggle-group-item-h, var(--xh-_toggle-group-h));
+    padding-inline: var(--xh-toggle-group-item-px, var(--xh-_toggle-group-px));
     border: var(--xh-stroke-thin) solid var(--xh-_border);
     /* 中间段一律直角，圆角只由首末两端补回来 */
     border-radius: 0;
     background: var(--xh-_bg);
     color: var(--xh-_fg);
-    font-size: var(--xh-toggle-group-item-font-size, var(--xh-text-label-size));
+    font-size: var(--xh-toggle-group-item-font-size, var(--xh-_toggle-group-font-size));
     font-weight: var(--xh-toggle-group-item-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
     white-space: nowrap;

package/css/toggle.css

@@ -105,4 +105,10 @@
     padding-inline: var(--xh-toggle-px, var(--xh-control-px-lg));
     font-size: var(--xh-toggle-font-size, var(--xh-control-font-lg));
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='toggle'][data-part='root'][hidden] {
+    display: none;
+  }
 }

package/css/tone.css

@@ -9,19 +9,25 @@
  * 这里只声明私有槽，各组件的形态规则去消费。所以加一个语气是改这一处 6 条规则，
  * 而不是逐个组件写 6 遍。
  *
- * --xh-_tone-on 是实心底上的前景色，按实测对比度分派而非统一白字：
- * 600 档上白字对 brand 5.08、neutral 7.80、danger 4.83 达标，而 success 3.04、
- * warning 2.70、info 3.47 都不到 4.5，这三族必须配深字。
+ * --xh-_tone-on 是实心底上的前景色，--xh-_tone-shift 是交互态要往哪个方向挪
+ * （永远背离前景色走，悬停与按下才不会反过来压低对比度）。两者都由 --xh-_tone 现推：
+ * 按 WCAG 的权重算出语气色的相对亮度，低于 0.179 配白字、高于配深字，shift 取反面。
+ * 0.179 是白字与黑字对比度相等的那一点，解析解。
  *
- * --xh-_tone-shift 是交互态要往哪个方向挪：永远背离前景色走，悬停与按下才不会
- * 反过来压低对比度。白字族往深处挪，深字族往浅处挪。
+ * 现推是因为语气色可换肤：写死的分派只对本仓这套 600 档成立，使用者换一套调色板
+ * 配对就不再成立，而门禁只验本仓的色，换肤后的失配一路绿灯。
  *
- * 这两个槽用的都是固定原语而不是 --xh-fg-default：实心底本身是原语色、不随主题翻，
- * 配色若跟着主题翻，暗色下就会变成白字压在浅黄底上（实测对比度 2.70）。
+ * 够不到相对颜色语法的引擎退回逐族写死的那一份，取值是本仓这套色的实测结果：
+ * 600 档上白字对 brand 5.08、neutral 7.80、danger 4.83 达标，而 success 3.04、
+ * warning 2.70、info 3.47 都不到 4.5，这三族配深字。兜底那一份用的是固定原语而不是
+ * --xh-fg-default：实心底本身是原语色、不随主题翻，配色若跟着主题翻，暗色下就会变成
+ * 白字压在浅黄底上（实测对比度 2.70）。
  *
  * brand 是例外：那一族的色相归使用者，所以它的底与前景走 --xh-bg-brand / --xh-fg-on-brand
  * 这两个语义令牌。缺省主题下它们就解析成 brand-600 与 neutral-0，与其余五族同值；
  * 改写过品牌色的使用者只改这两个令牌，实心底与它上面的字就一起跟着走。
+ * 底与前景既然随主题翻，brand 的 shift 也必须随主题翻——现推那一档自动跟着底色走，
+ * 文件末尾那条深色覆盖是给兜底那一档用的。
  */
 @layer xihan.components {
   [data-tone] {
@@ -29,9 +35,6 @@
        而不是让 --xh-_tone 悬空——悬空会让下面每条 color-mix 变成计算期无效，
        用它的声明会整条失效，且 var() 兜底也救不回来（槽位是「已声明但无效」）。 */
     --xh-_tone: var(--xh-color-neutral-600);
-    /* 装饰性强调（色条、图标这类）用 500 档：600 是给实心底与文字用的强调档，
-       压在细长的色条上偏重。alert 与 toast 原本就用 500，接语气层不该改变它们的观感 */
-    --xh-_tone-soft: var(--xh-color-neutral-500);
     --xh-_tone-on: var(--xh-color-neutral-0);
     --xh-_tone-shift: var(--xh-color-neutral-950);
 
@@ -45,13 +48,18 @@
     /* 控件的可操作区边界要 3:1，兑了底色的 --xh-_tone-border 六族全在 1.44–2.18，够不着。
        这一支直接取主色本体；两族在各自的底上仍不够，在下面按主题单独兜 */
     --xh-_tone-border-control: var(--xh-_tone);
-    /* 在普通背景上表达该语气的文字色：往前景色兑，浅色态变深、深色态变浅 */
-    --xh-_tone-fg: color-mix(in oklab, var(--xh-_tone) 72%, var(--xh-fg-default));
+    /* 装饰性强调（色条、指示条、锚点高亮这类）是非文字图形，同样要 3:1，
+       要求与可操作区边界一模一样，就直接跟着那一支走，连它按主题兜的两族一并继承。
+       要读得清的状态文字不在此列，那些走 --xh-_tone-fg */
+    --xh-_tone-soft: var(--xh-_tone-border-control);
+    /* 在普通背景上表达该语气的文字色：往前景色兑，浅色态变深、深色态变浅。
+       兑到 60% 是实测出来的：这一档要同时压得住淡底的静态/悬停/按下三态、面与抬起的面
+       共五种底，72% 时六族里有三族够不到 4.5（最低 3.66），60% 全部达标且留有余量 */
+    --xh-_tone-fg: color-mix(in oklab, var(--xh-_tone) 60%, var(--xh-fg-default));
   }
 
   [data-tone='brand'] {
     --xh-_tone: var(--xh-bg-brand);
-    --xh-_tone-soft: var(--xh-color-brand-500);
     --xh-_tone-on: var(--xh-fg-on-brand);
     --xh-_tone-shift: var(--xh-color-neutral-950);
   }
@@ -64,28 +72,24 @@
 
   [data-tone='danger'] {
     --xh-_tone: var(--xh-color-danger-600);
-    --xh-_tone-soft: var(--xh-color-danger-500);
     --xh-_tone-on: var(--xh-color-neutral-0);
     --xh-_tone-shift: var(--xh-color-neutral-950);
   }
 
   [data-tone='success'] {
     --xh-_tone: var(--xh-color-success-600);
-    --xh-_tone-soft: var(--xh-color-success-500);
     --xh-_tone-on: var(--xh-color-neutral-950);
     --xh-_tone-shift: var(--xh-color-neutral-0);
   }
 
   [data-tone='warning'] {
     --xh-_tone: var(--xh-color-warning-600);
-    --xh-_tone-soft: var(--xh-color-warning-500);
     --xh-_tone-on: var(--xh-color-neutral-950);
     --xh-_tone-shift: var(--xh-color-neutral-0);
   }
 
   [data-tone='info'] {
     --xh-_tone: var(--xh-color-info-600);
-    --xh-_tone-soft: var(--xh-color-info-500);
     --xh-_tone-on: var(--xh-color-neutral-950);
     --xh-_tone-shift: var(--xh-color-neutral-0);
   }
@@ -109,4 +113,30 @@
   :is([data-theme='dark'] *, [data-theme='dark'])[data-tone='neutral'] {
     --xh-_tone-border-control: var(--xh-color-neutral-550);
   }
+
+  /* 把语气色转成线性 sRGB 分量、按 WCAG 的权重算出相对亮度：低于 0.179 前景取白、
+     高于取黑，挪动方向取前景的反面。三个通道写同一个式子，算出来的是纯白或纯黑；
+     alpha 显式写 1，不然会连语气色的透明度一起继承过来。
+     探针按这里实际用到的整个形态测，只测得起 color(from …) 的引擎不会落进半截支持。
+     上面各族写死的那一份是兜底：引擎不认这条语法时整块丢弃，退回那一份 */
+  @supports (color: color(from red srgb-linear clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1) 0 0 / 1)) {
+    [data-tone] {
+      --xh-_tone-on: color(from var(--xh-_tone) srgb-linear
+        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1)
+        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1)
+        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1) / 1);
+      --xh-_tone-shift: color(from var(--xh-_tone) srgb-linear
+        clamp(0, ((0.2126 * r + 0.7152 * g + 0.0722 * b) - 0.179) * infinity, 1)
+        clamp(0, ((0.2126 * r + 0.7152 * g + 0.0722 * b) - 0.179) * infinity, 1)
+        clamp(0, ((0.2126 * r + 0.7152 * g + 0.0722 * b) - 0.179) * infinity, 1) / 1);
+    }
+  }
+
+  /* brand 的底与前景走语义令牌、随主题翻，所以它的 shift 也必须跟着翻，
+     否则深色下前景是深字而 shift 仍往深处挪，悬停与按下反而压低对比度
+     （实测 5.29 → 4.25 → 3.49，而不写 tone 的品牌链是 5.29 → 7.33 → 10.85）。
+     其余五族的底是固定原语、不随主题翻，shift 也就不必翻 */
+  :is([data-theme='dark'] *, [data-theme='dark'])[data-tone='brand'] {
+    --xh-_tone-shift: var(--xh-color-neutral-0);
+  }
 }

package/css/tooltip.css

@@ -69,7 +69,7 @@
        箭头是它的后代，语气槽一并继承 */
     --xh-_tooltip-py: var(--xh-space-1);
     --xh-_tooltip-px: var(--xh-space-2);
-    --xh-_tooltip-font-size: var(--xh-text-secondary-size);
+    --xh-_tooltip-font-size: var(--xh-control-caption-md);
 
     /* 与 positioner 相反：浮层本体要能接指针，指针停在提示上就不该收起
        （长文案需要停留细看）。positioner 仍是 none，空白区域照样点得穿。 */
@@ -127,4 +127,10 @@
 
     background: var(--xh-tooltip-bg, var(--xh-_tone, var(--xh-fg-default)));
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='tooltip'][data-part='trigger'][hidden] {
+    display: none;
+  }
 }

package/css/tour.css

@@ -87,6 +87,12 @@
     color: var(--xh-tour-fg, var(--xh-fg-default));
   }
 
+  /* 浮层被搬到 portal 落点，继承不到 root 上的槽：这把尺在被搬走的那一侧再声明一次，
+     关闭钮与条目里作者塞的图标才和皮肤画的兜底字形一样大 */
+  [data-scope='tour'][data-part='content'] {
+    --xh-icon-size: var(--xh-tour-icon-size, var(--xh-glyph-size-text));
+  }
+
   /* 遮罩：整页压暗，把注意力逼到高亮框那一块上 */
   [data-scope='tour'][data-part='backdrop'] {
     position: fixed;
@@ -165,7 +171,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--xh-space-4);
+    padding: var(--xh-tour-positioner-padding, var(--xh-space-4));
   }
 
   /* 必须排在 data-position='center' 之后：两条选择器的特指度相同（都是三个属性），
@@ -246,9 +252,9 @@
     align-items: center;
     justify-content: center;
     block-size: var(--xh-control-h-sm);
-    padding-inline: var(--xh-control-px-md);
+    padding-inline: var(--xh-tour-skip-trigger-px, var(--xh-control-px-md));
     border: var(--xh-stroke-thin) solid transparent;
-    border-radius: var(--xh-shape-control);
+    border-radius: var(--xh-tour-action-radius, var(--xh-shape-control));
     font-size: var(--xh-text-secondary-size);
     cursor: pointer;
   }

package/css/transfer.css

@@ -130,6 +130,7 @@
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
+    gap: var(--xh-transfer-list-gap, var(--xh-list-option-gap));
     block-size: var(--xh-transfer-list-h, var(--xh-viewport-h-md));
     padding-block: var(--xh-transfer-list-py, var(--xh-space-1));
     padding-inline: var(--xh-transfer-list-px, var(--xh-space-1));
@@ -222,8 +223,7 @@
   }
 
   /* 没写内容就由皮肤画勾；作者往格子里塞了自己的图形，这条规则即不命中。
-     底下两处（全选格的两态）不带这条守卫：那里的 ::before 是方框本身，
-     而触发器里装的是全选那行文字，:empty 恒不命中，加了勾号会整个消失 */
+     底下两处（全选格的两态）不带这条守卫：触发器里装的是全选那行文字，:empty 恒不命中 */
   [data-scope='transfer'][data-part='item-checkbox'][data-state='checked']:empty::before {
     content: '';
     display: inline-block;
@@ -236,25 +236,47 @@
   }
 
   /* 全选格的三态：all 打勾、some 打横杠、none 留空。
-     some 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state */
-  [data-scope='transfer'][data-part='select-all-trigger'][data-state='checked']::before {
+     some 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state。
+
+     字形走 ::after 而不是画方框的那颗 ::before：mask 会把所在元素的描边与底色一并裁成
+     字形的轮廓，写在 ::before 上就等于把方框本身裁没了，只剩一枚白勾。条目那一侧是
+     真实节点当方框、它的 ::before 当字形的两层结构，这里没有第二个节点，只能用
+     第二个伪元素补上那一层。
+     方框是行首那颗 ::before、宽度即勾选格尺寸，所以字形按「盒与字形的宽度差之半」
+     内推即落在圆心；纵向靠 inset-block: 0 + margin-block: auto 居中。
+     font-size 与 ::before 同值，--xh-icon-size 的 1em 兜底才和条目那侧量得一样大 */
+  [data-scope='transfer'][data-part='select-all-trigger'][data-state='checked']::after {
     content: '';
-    display: inline-block;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    margin-block: auto;
+    margin-inline-start: calc(
+      (var(--xh-transfer-checkbox-size, var(--xh-control-indicator-size)) - var(--xh-icon-size, var(--xh-glyph-size-text))) /
+        2
+    );
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
     block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    vertical-align: var(--xh-glyph-baseline-shift);
-    background-color: currentColor;
+    background-color: var(--xh-transfer-checkbox-fg, var(--xh-fg-on-brand));
+    font-size: var(--xh-transfer-checkbox-font-size, calc(var(--xh-control-indicator-size) * 0.75));
     -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
 
-  [data-scope='transfer'][data-part='select-all-trigger'][data-state='indeterminate']::before {
+  [data-scope='transfer'][data-part='select-all-trigger'][data-state='indeterminate']::after {
     content: '';
-    display: inline-block;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    margin-block: auto;
+    margin-inline-start: calc(
+      (var(--xh-transfer-checkbox-size, var(--xh-control-indicator-size)) - var(--xh-icon-size, var(--xh-glyph-size-text))) /
+        2
+    );
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
     block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    vertical-align: var(--xh-glyph-baseline-shift);
-    background-color: currentColor;
+    background-color: var(--xh-transfer-checkbox-fg, var(--xh-fg-on-brand));
+    font-size: var(--xh-transfer-checkbox-font-size, calc(var(--xh-control-indicator-size) * 0.75));
     -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
     mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
@@ -266,7 +288,9 @@
 
   /* 全选格是原生按钮（三态经 aria-checked 上报，激活由平台负责），
      禁用因此写 :disabled，不写 data-disabled */
+  /* position 是给叠在方框上的那颗字形 ::after 当定位基准 */
   [data-scope='transfer'][data-part='select-all-trigger'] {
+    position: relative;
     display: inline-flex;
     flex: none;
     gap: var(--xh-transfer-select-all-gap, var(--xh-control-gap-sm));
@@ -282,9 +306,11 @@
     cursor: pointer;
   }
 
+  /* 往内收，与搜索框、条目同一口径：全选格长在面板里，面板收 overflow，
+     环画在外沿会被裁掉 */
   [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);
+    outline-offset: calc(-1 * var(--xh-ring-width));
   }
 
   [data-scope='transfer'][data-part='select-all-trigger']:disabled {

package/css/tree-select.css

@@ -37,6 +37,9 @@
        引擎没算（尚未落位 / 无引擎）时不额外限高 */
     --xh-_tree-select-available-h: 100vh;
 
+    /* 树的自绘条浮在内容之上：轨道不上底色，实色轨道会沿内容边缘糊出一条灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
     position: fixed;
     z-index: var(--xh-tree-select-layer, var(--xh-layer-popover));
     /* 空壳不吃指针，交互只发生在 content 里 */
@@ -56,9 +59,11 @@
     /* 尺寸档只换这几个私有槽，盒与树里的行都从这两处继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_tree-select-h: var(--xh-control-h-md);
     --xh-_tree-select-px: var(--xh-control-px-md);
+    --xh-_tree-select-row-py: var(--xh-list-option-py-md);
+    --xh-_tree-select-row-px: var(--xh-control-px-md);
     --xh-_tree-select-gap: var(--xh-control-gap-md);
-    --xh-_tree-select-font-size: var(--xh-text-body-size);
-    --xh-_tree-select-label-font-size: var(--xh-text-label-size);
+    --xh-_tree-select-font-size: var(--xh-control-font-md);
+    --xh-_tree-select-label-font-size: var(--xh-control-font-md);
 
     /* 形态档只换触发框的描边与底色这三个槽，浮层与树不跟着变：
        变的是「这是个输入位」的表达方式，不是弹出内容的表达方式 */
@@ -114,6 +119,8 @@
     --xh-icon-size: var(--xh-tree-select-icon-size, var(--xh-glyph-size-sm));
     --xh-_tree-select-h: var(--xh-control-h-sm);
     --xh-_tree-select-px: var(--xh-control-px-sm);
+    --xh-_tree-select-row-py: var(--xh-list-option-py-sm);
+    --xh-_tree-select-row-px: var(--xh-control-px-sm);
     --xh-_tree-select-gap: var(--xh-control-gap-sm);
     --xh-_tree-select-font-size: var(--xh-control-font-sm);
     --xh-_tree-select-label-font-size: var(--xh-control-font-sm);
@@ -123,6 +130,8 @@
     --xh-icon-size: var(--xh-tree-select-icon-size, var(--xh-glyph-size-lg));
     --xh-_tree-select-h: var(--xh-control-h-lg);
     --xh-_tree-select-px: var(--xh-control-px-lg);
+    --xh-_tree-select-row-py: var(--xh-list-option-py-lg);
+    --xh-_tree-select-row-px: var(--xh-control-px-lg);
     --xh-_tree-select-gap: var(--xh-control-gap-lg);
     --xh-_tree-select-font-size: var(--xh-control-font-lg);
     --xh-_tree-select-label-font-size: var(--xh-control-font-lg);
@@ -352,6 +361,7 @@
   [data-scope='tree-select'][data-part='tree'] {
     display: flex;
     flex-direction: column;
+    gap: var(--xh-tree-select-tree-gap, var(--xh-list-option-gap));
   }
 
   [data-scope='tree-select'][data-part='tree'][hidden] {
@@ -369,6 +379,20 @@
     outline: none;
   }
 
+  /* 分支是"这一行 + 它的子层"的外壳，不自带内边距：真正长成一行的是 branch-control，
+     子层缩进归 branch-content。行距由这里出：分支自己那一行与它展开的子层之间，
+     同样按条目间距断开 */
+  [data-scope='tree-select'][data-part='branch'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-tree-select-branch-gap, var(--xh-list-option-gap));
+  }
+
+  /* display 盖掉了 UA 的 [hidden]{display:none}，收起时要显式让位 */
+  [data-scope='tree-select'][data-part='branch'][hidden] {
+    display: none;
+  }
+
   /* 焦点落在 branch 上（它才是 treeitem），但环画在它自己那一行上：
      整棵子树套一圈描边会把展开的层级全框进去 */
   [data-scope='tree-select'][data-part='branch']:focus-visible {
@@ -387,8 +411,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-tree-select-row-gap, var(--xh-_tree-select-gap));
-    padding-block: var(--xh-tree-select-row-py, var(--xh-space-1_5));
-    padding-inline: var(--xh-tree-select-row-px, var(--xh-control-px-md));
+    padding-block: var(--xh-tree-select-row-py, var(--xh-_tree-select-row-py));
+    padding-inline: var(--xh-tree-select-row-px, var(--xh-_tree-select-row-px));
     border-radius: var(--xh-tree-select-row-radius, var(--xh-shape-control));
     color: var(--xh-tree-select-row-fg, var(--xh-fg-default));
     font-size: var(--xh-tree-select-row-font-size, var(--xh-_tree-select-font-size));
@@ -452,7 +476,7 @@
     align-items: center;
     justify-content: center;
     inline-size: var(--xh-tree-select-indicator-size, var(--xh-control-indicator-size));
-    color: var(--xh-tree-select-item-indicator-fg, var(--xh-_tone, var(--xh-bg-brand)));
+    color: var(--xh-tree-select-item-indicator-fg, var(--xh-_tone, var(--xh-fg-brand)));
     visibility: hidden;
   }
 
@@ -513,6 +537,7 @@
   [data-scope='tree-select'][data-part='branch-content'] {
     display: flex;
     flex-direction: column;
+    gap: var(--xh-tree-select-branch-content-gap, var(--xh-list-option-gap));
     padding-inline-start: var(--xh-tree-select-indent, var(--xh-space-4));
   }
 

package/css/tree.css

@@ -33,6 +33,7 @@
   [data-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));
@@ -54,8 +55,15 @@
     outline: none;
   }
 
-  /* 分支只是"这一行 + 它的子层"的外壳，不自带行距与内边距：
-     真正长成一行的是 branch-control，子层缩进归 branch-content */
+  /* 分支只是"这一行 + 它的子层"的外壳，不自带内边距：
+     真正长成一行的是 branch-control，子层缩进归 branch-content。
+     行距由这里出：分支自己那一行与它展开的子层之间，同样按条目间距断开 */
+  [data-scope='tree'][data-part='branch'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-tree-branch-gap, var(--xh-list-option-gap));
+  }
+
   [data-scope='tree'][data-part='branch'][hidden] {
     display: none;
   }
@@ -78,7 +86,7 @@
     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-space-1_5));
+    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));
@@ -93,6 +101,19 @@
       color 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-row-gap, var(--xh-control-gap-md))
+    );
+  }
+
   [data-scope='tree'][data-part='item'][hidden],
   [data-scope='tree'][data-part='branch-control'][hidden] {
     display: none;
@@ -201,7 +222,7 @@
     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-bg-brand));
+    color: var(--xh-tree-indicator-fg, var(--xh-fg-brand));
     visibility: hidden;
   }
 
@@ -262,9 +283,24 @@
   [data-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-space-4));
   }
 
+  /* 末端那一层横排：子节点并排铺开、必要时折行。缩进照旧由子层容器自己顶——
+     那是这一层相对上一层的位置，与层内怎么排无关 */
+  [data-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'] > [data-scope='tree'][data-part='item'] {
+    flex: none;
+  }
+
   /* 收起态的唯一开关：display 会盖掉 hidden 属性的 UA 规则，漏了这条整棵子树就收不起来 */
   [data-scope='tree'][data-part='branch-content'][hidden] {
     display: none;
@@ -293,4 +329,10 @@
     -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='tree'][data-part='branch-checkbox'][hidden] {
+    display: none;
+  }
 }

package/css/typography.css

@@ -125,7 +125,7 @@
     padding-inline: var(--xh-typography-code-px, var(--xh-space-1));
     border-radius: var(--xh-typography-code-radius, var(--xh-shape-inset));
     background: var(--xh-typography-code-bg, var(--xh-bg-subtle));
-    font-family: var(--xh-font-family-mono);
+    font-family: var(--xh-typography-code-font, var(--xh-font-family-mono));
     font-size: var(--xh-typography-code-font-size, var(--xh-_typography-code-size));
   }
 

package/css/undefined.css

@@ -26,6 +26,7 @@
     xh-menu,
     xh-menubar,
     xh-navigation-menu,
+    xh-pagination,
     xh-popconfirm,
     xh-popover,
     xh-popselect,

package/index.css

@@ -94,6 +94,7 @@
 @import './css/menu.css';
 @import './css/menubar.css';
 @import './css/navigation-menu.css';
+@import './css/notification.css';
 @import './css/number-field.css';
 @import './css/pagination.css';
 @import './css/pin-input.css';
@@ -118,7 +119,6 @@
 @import './css/time-field.css';
 @import './css/time-picker.css';
 @import './css/toast.css';
-@import './css/toaster.css';
 @import './css/toggle.css';
 @import './css/toggle-group.css';
 @import './css/toolbar.css';