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

package/index.unlayered.css

@@ -56,9 +56,13 @@
 /* 一排叠放的头像：后一枚压在前一枚上。
    组内共用的直径与字号在容器上写一次，沿继承流给每一枚；自己写了档位的那一枚仍按自己的档走 */
 [data-scope='avatar-group'][data-part='root'] {
+  /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+     既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+  isolation: isolate;
+
   /* 私有槽位：整组共用的直径、字号与叠放量，换档只改这三个 */
   --xh-_avatar-group-size: var(--xh-avatar-group-size, var(--xh-control-h-md));
-  --xh-_avatar-group-font-size: var(--xh-avatar-group-font-size, var(--xh-text-secondary-size));
+  --xh-_avatar-group-font-size: var(--xh-avatar-group-font-size, var(--xh-control-caption-md));
   --xh-_avatar-group-overlap: var(--xh-avatar-group-overlap, var(--xh-space-2_5));
 
   /* 流给组内每一枚 */
@@ -215,6 +219,12 @@
   mask: var(--xh-glyph-mark-chevron-up) center / contain no-repeat;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='back-top'][data-part='trigger'][hidden] {
+  display: none;
+}
+
 /* styles/button-group.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='button-group'] {
@@ -225,6 +235,10 @@
    排布只能读 data-orientation——role=group 不收 aria-orientation，连接层根本不输出它。
    圆角槽位在容器上先收成 0，组内每段都取得到，两端的圆角再逐段补回来 */
 [data-scope='button-group'][data-part='root'] {
+  /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+     既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+  isolation: isolate;
+
   --xh-button-radius: 0;
 
   display: inline-flex;
@@ -392,7 +406,7 @@
   --xh-_descriptions-label-gap: var(--xh-space-2);
   --xh-_descriptions-py: var(--xh-space-2);
   --xh-_descriptions-px: var(--xh-space-3);
-  --xh-_descriptions-font-size: var(--xh-text-body-size);
+  --xh-_descriptions-font-size: var(--xh-control-font-md);
   /* 标签在左时那一列的宽度：收到最长的那个标签 */
   --xh-_descriptions-label-w: max-content;
 
@@ -497,9 +511,9 @@
   > [data-scope='descriptions'][data-part='item'] {
   padding-block: var(--xh-descriptions-item-py, var(--xh-_descriptions-py));
   padding-inline: var(--xh-descriptions-item-px, var(--xh-_descriptions-px));
-  border-block-start: var(--xh-stroke-thin) solid var(--xh-descriptions-border, var(--xh-border-subtle));
+  border-block-start: var(--xh-stroke-thin) solid var(--xh-descriptions-divider, var(--xh-border-subtle));
   /* 每行一组时左边没有邻居，宽度按列数补回来 */
-  border-inline-start: 0 solid var(--xh-descriptions-border, var(--xh-border-subtle));
+  border-inline-start: 0 solid var(--xh-descriptions-divider, var(--xh-border-subtle));
 }
 
 [data-scope='descriptions'][data-part='root'][data-bordered]
@@ -583,6 +597,12 @@
   border-block-start-width: 0;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='descriptions'][data-part='item'][hidden] {
+  display: none;
+}
+
 /* styles/download-trigger.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='download-trigger'] {
@@ -872,6 +892,13 @@
   mask: var(--xh-glyph-mark-close) center / contain no-repeat;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='dynamic-input'][data-part='item-content'][hidden],
+[data-scope='dynamic-input'][data-part='item-action'][hidden] {
+  display: none;
+}
+
 /* styles/ellipsis.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='ellipsis'] {
@@ -918,6 +945,12 @@
   outline-offset: var(--xh-ring-offset);
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='ellipsis'][data-part='root'][hidden] {
+  display: none;
+}
+
 /* styles/fieldset.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='fieldset'] {
@@ -1006,11 +1039,11 @@
 }
 
 /* —— 方向 —— */
-[data-scope='flex'][data-part='root'][data-direction='row'] {
+[data-scope='flex'][data-part='root'][data-orientation='horizontal'] {
   flex-direction: row;
 }
 
-[data-scope='flex'][data-part='root'][data-direction='column'] {
+[data-scope='flex'][data-part='root'][data-orientation='vertical'] {
   flex-direction: column;
 }
 
@@ -1068,23 +1101,29 @@
 /* —— 间距档位 —— */
 /* 每一档指向一个间距令牌，折行时行与行之间也吃这份间距 */
 [data-scope='flex'][data-part='root'][data-gap='xs'] {
-  gap: var(--xh-flex-gap, var(--xh-space-1));
+  gap: var(--xh-flex-gap, var(--xh-layout-gap-xs));
 }
 
 [data-scope='flex'][data-part='root'][data-gap='sm'] {
-  gap: var(--xh-flex-gap, var(--xh-space-2));
+  gap: var(--xh-flex-gap, var(--xh-layout-gap-sm));
 }
 
 [data-scope='flex'][data-part='root'][data-gap='md'] {
-  gap: var(--xh-flex-gap, var(--xh-space-3));
+  gap: var(--xh-flex-gap, var(--xh-layout-gap-md));
 }
 
 [data-scope='flex'][data-part='root'][data-gap='lg'] {
-  gap: var(--xh-flex-gap, var(--xh-space-4));
+  gap: var(--xh-flex-gap, var(--xh-layout-gap-lg));
 }
 
 [data-scope='flex'][data-part='root'][data-gap='xl'] {
-  gap: var(--xh-flex-gap, var(--xh-space-6));
+  gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
+}
+
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='flex'][data-part='root'][hidden] {
+  display: none;
 }
 
 /* styles/float-button.css */
@@ -1228,6 +1267,13 @@
   mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='float-button'][data-part='root'][hidden],
+[data-scope='float-button'][data-part='trigger'][hidden] {
+  display: none;
+}
+
 /* styles/floating-panel.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='floating-panel'] {
@@ -1247,6 +1293,12 @@
   display: contents;
 }
 
+/* 浮层被搬到 portal 落点，继承不到 root 上的槽：这把尺在被搬走的那一侧再声明一次，
+   关闭钮与条目里作者塞的图标才和皮肤画的兜底字形一样大 */
+[data-scope='floating-panel'][data-part='content'] {
+  --xh-icon-size: var(--xh-floating-panel-icon-size, var(--xh-glyph-size-text));
+}
+
 [data-scope='floating-panel'][data-part='root'][hidden] {
   display: none;
 }
@@ -1876,23 +1928,23 @@
 /* —— 间距档位 —— */
 /* 每一档指向一个间距令牌，行与行之间也吃这同一份间距 */
 [data-scope='grid'][data-part='root'][data-gap='xs'] {
-  gap: var(--xh-grid-gap, var(--xh-space-1));
+  gap: var(--xh-grid-gap, var(--xh-layout-gap-xs));
 }
 
 [data-scope='grid'][data-part='root'][data-gap='sm'] {
-  gap: var(--xh-grid-gap, var(--xh-space-2));
+  gap: var(--xh-grid-gap, var(--xh-layout-gap-sm));
 }
 
 [data-scope='grid'][data-part='root'][data-gap='md'] {
-  gap: var(--xh-grid-gap, var(--xh-space-3));
+  gap: var(--xh-grid-gap, var(--xh-layout-gap-md));
 }
 
 [data-scope='grid'][data-part='root'][data-gap='lg'] {
-  gap: var(--xh-grid-gap, var(--xh-space-4));
+  gap: var(--xh-grid-gap, var(--xh-layout-gap-lg));
 }
 
 [data-scope='grid'][data-part='root'][data-gap='xl'] {
-  gap: var(--xh-grid-gap, var(--xh-space-6));
+  gap: var(--xh-grid-gap, var(--xh-layout-gap-xl));
 }
 
 /* —— 块向对齐 —— */
@@ -2038,6 +2090,12 @@
   --xh-_grid-start: 12;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='grid'][data-part='root'][hidden] {
+  display: none;
+}
+
 /* styles/heatmap.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='heatmap'] {
@@ -2161,10 +2219,11 @@
   gap: var(--xh-heatmap-grid-gap, var(--xh-_heatmap-gap));
 }
 
-/* 网格自己只在没有格子可落焦点时才占 Tab 位，那几帧里也该看得出焦点在哪 */
+/* 网格自己只在没有格子可落焦点时才占 Tab 位，那几帧里也该看得出焦点在哪。
+   环往内收：网格铺满 root，root 那层 overflow-x: auto 会把画在外沿的环裁掉 */
 [data-scope='heatmap'][data-part='grid']: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='heatmap'][data-part='row'] {
@@ -2463,7 +2522,7 @@
 /* 浏览器给 mark 的默认底色是一个固定的亮黄，暗色主题下压在深底上刺眼、
    配的黑字也不随主题走；这里整份换成随主题走的品牌淡底 */
 [data-scope='highlight'][data-part='mark'] {
-  padding-inline: var(--xh-space-0_5);
+  padding-inline: var(--xh-highlight-mark-px, var(--xh-space-0_5));
   border-radius: var(--xh-highlight-radius, var(--xh-shape-inset));
   background: var(--xh-highlight-bg, var(--xh-bg-brand-subtle));
   color: var(--xh-highlight-fg, var(--xh-fg-brand-strong));
@@ -2483,7 +2542,7 @@
 /* 一排键帽连着连接符。整块不换行：一组组合被折成两行就读不出是一组了 */
 [data-scope='hotkeys'][data-part='root'] {
   /* 尺寸档只换这两个私有槽，键帽从 root 继承它们，换档不必给每个部件各写一条选择器 */
-  --xh-_hotkeys-font-size: var(--xh-text-secondary-size);
+  --xh-_hotkeys-font-size: var(--xh-control-caption-md);
   --xh-_hotkeys-key-px: var(--xh-space-1);
 
   display: inline-flex;
@@ -2704,9 +2763,10 @@
   cursor: not-allowed;
 }
 
+/* 环往内收：裁切框长在视口里，视口那层 overflow: hidden 会把画在外沿的环裁掉 */
 [data-scope='image-cropper'][data-part='crop-area']: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));
 }
 
 /* 三分构图参考线：两条竖线、两条横线，落点写死在三分处，不占节点、不吃指针。
@@ -2769,9 +2829,10 @@
   content: '';
 }
 
+/* 与裁切框同一口径：把手也在视口的 overflow: hidden 里，环画在外沿会被裁掉 */
 [data-scope='image-cropper'][data-part='crop-handle']: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='image-cropper'][data-part='crop-handle'][data-resizing] {
@@ -2903,7 +2964,7 @@
   /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
   --xh-icon-size: var(--xh-json-viewer-icon-size, var(--xh-glyph-size-text));
 
-  --xh-_json-viewer-font-size: var(--xh-text-secondary-size);
+  --xh-_json-viewer-font-size: var(--xh-control-caption-md);
   --xh-_json-viewer-row-py: var(--xh-space-0_5);
   --xh-_json-viewer-indent: var(--xh-space-4);
   --xh-json-viewer-key-fg: var(--xh-fg-brand-strong);
@@ -2913,6 +2974,11 @@
   --xh-json-viewer-number-fg: var(--xh-syntax-number);
   --xh-json-viewer-boolean-fg: var(--xh-syntax-keyword);
 
+  /* 两档的自绘条浮在内容之上：轨道不上底色，实色轨道会沿容器边缘糊出一条灰带 */
+  --xh-scrollbar-track-bg: transparent;
+
+  /* 自绘条绝对定位贴这一层的内边距盒，它得是定位盒 */
+  position: relative;
   display: block;
   color: var(--xh-json-viewer-fg, var(--xh-fg-default));
   font-family: var(--xh-json-viewer-font, var(--xh-font-family-mono));
@@ -2951,6 +3017,34 @@
   overflow: auto;
 }
 
+/* 原文档：与树档共用同一套边框、内衬与高度令牌，两档切过去盒子不跳。
+   整块可框选——这一档存在的理由就是把与后端一字不差的那份原文交到手上 */
+[data-scope='json-viewer'][data-part='text'] {
+  margin: 0;
+  max-block-size: var(--xh-json-viewer-max-h, var(--xh-viewport-max-h));
+  padding-block: var(--xh-json-viewer-py, var(--xh-space-2));
+  padding-inline: var(--xh-json-viewer-px, var(--xh-space-2));
+  border: var(--xh-stroke-thin) solid var(--xh-json-viewer-border, var(--xh-border-default));
+  border-radius: var(--xh-json-viewer-radius, var(--xh-shape-surface));
+  background: var(--xh-json-viewer-bg, var(--xh-bg-surface));
+  color: var(--xh-json-viewer-text-fg, var(--xh-fg-default));
+  font-family: var(--xh-json-viewer-font, var(--xh-font-family-mono));
+  /* 缩进靠空格，行不折：折行会把层级读乱，横向给滚动条 */
+  white-space: pre;
+  tab-size: 2;
+  overflow: auto;
+  user-select: text;
+}
+
+[data-scope='json-viewer'][data-part='text'][hidden] {
+  display: none;
+}
+
+/* 这一档没有行可落焦，环画在整块上 */
+[data-scope='json-viewer'][data-part='text']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: calc(-1 * var(--xh-ring-width));
+}
 [data-scope='json-viewer'][data-part='tree'][hidden] {
   display: none;
 }
@@ -3174,9 +3268,9 @@
   display: flex;
   grid-area: header;
   align-items: center;
-  gap: var(--xh-space-3);
+  gap: var(--xh-layout-header-gap, var(--xh-space-3));
   block-size: var(--xh-_layout-header-h);
-  padding-inline: var(--xh-space-4);
+  padding-inline: var(--xh-layout-header-px, var(--xh-space-4));
   background: var(--xh-layout-header-bg, var(--xh-bg-surface));
 }
 
@@ -3185,7 +3279,7 @@
   grid-area: sider;
   inline-size: var(--xh-_layout-sider-w);
   overflow: hidden;
-  padding: var(--xh-space-3);
+  padding: var(--xh-layout-sider-padding, var(--xh-space-3));
   background: var(--xh-layout-sider-bg, var(--xh-bg-subtle));
   transition: inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
 }
@@ -3200,12 +3294,12 @@
   grid-area: content;
   /* 内容列已是 minmax(0, 1fr)，这里再声明一次，宽表格与长串文本才撑不破列 */
   min-inline-size: 0;
-  padding: var(--xh-space-4);
+  padding: var(--xh-layout-content-padding, var(--xh-space-4));
 }
 
 [data-scope='layout'][data-part='footer'] {
   grid-area: footer;
-  padding: var(--xh-space-3) var(--xh-space-4);
+  padding: var(--xh-layout-footer-padding, var(--xh-space-3) var(--xh-space-4));
   background: var(--xh-layout-footer-bg, var(--xh-bg-surface));
   color: var(--xh-fg-muted);
   font-size: var(--xh-text-secondary-size);
@@ -3216,9 +3310,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--xh-control-gap-sm);
+  gap: var(--xh-layout-sider-trigger-gap, var(--xh-control-gap-sm));
   block-size: var(--xh-control-h-sm);
-  padding-inline: var(--xh-control-px-sm);
+  padding-inline: var(--xh-layout-sider-trigger-px, var(--xh-control-px-sm));
   border: 0;
   border-radius: var(--xh-layout-sider-trigger-radius, var(--xh-shape-control));
   background: var(--xh-layout-sider-trigger-bg, transparent);
@@ -3302,6 +3396,14 @@
   overflow-y: auto;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='layout'][data-part='root'][hidden],
+[data-scope='layout'][data-part='header'][hidden],
+[data-scope='layout'][data-part='sider-trigger'][hidden] {
+  display: none;
+}
+
 /* styles/list.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='list'] {
@@ -3312,7 +3414,7 @@
   /* 一个尺寸档只换这几个私有槽，条目与两行文字都从根上继承它们，
      换档不必给每个部件各写一条选择器 */
   --xh-_list-item-py: var(--xh-list-item-py-md);
-  --xh-_list-item-px: var(--xh-space-4);
+  --xh-_list-item-px: var(--xh-list-item-px-md);
   --xh-_list-item-gap: var(--xh-space-3);
   --xh-_list-title-size: var(--xh-control-font-md);
   --xh-_list-description-size: var(--xh-control-caption-md);
@@ -3334,7 +3436,7 @@
 /* —— 尺寸 —— */
 [data-scope='list'][data-part='root'][data-size='sm'] {
   --xh-_list-item-py: var(--xh-list-item-py-sm);
-  --xh-_list-item-px: var(--xh-space-3);
+  --xh-_list-item-px: var(--xh-list-item-px-sm);
   --xh-_list-item-gap: var(--xh-space-2);
   --xh-_list-title-size: var(--xh-control-font-sm);
   --xh-_list-description-size: var(--xh-control-caption-sm);
@@ -3342,7 +3444,7 @@
 
 [data-scope='list'][data-part='root'][data-size='lg'] {
   --xh-_list-item-py: var(--xh-list-item-py-lg);
-  --xh-_list-item-px: var(--xh-space-5);
+  --xh-_list-item-px: var(--xh-list-item-px-lg);
   --xh-_list-item-gap: var(--xh-space-4);
   --xh-_list-title-size: var(--xh-control-font-lg);
 }
@@ -3370,11 +3472,11 @@
 [data-scope='list'][data-part='root'][data-split]
   > [data-scope='list'][data-part='item']
   + [data-scope='list'][data-part='item'] {
-  border-block-start: var(--xh-stroke-thin) solid var(--xh-list-border, var(--xh-border-subtle));
+  border-block-start: var(--xh-stroke-thin) solid var(--xh-list-divider, var(--xh-border-subtle));
 }
 
 [data-scope='list'][data-part='root'][data-hoverable] > [data-scope='list'][data-part='item'] {
-  transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 /* 悬停换底色：只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
@@ -3424,6 +3526,15 @@
   margin-inline-start: auto;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='list'][data-part='item'][hidden],
+[data-scope='list'][data-part='item-media'][hidden],
+[data-scope='list'][data-part='item-content'][hidden],
+[data-scope='list'][data-part='item-action'][hidden] {
+  display: none;
+}
+
 /* styles/log.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='log'] {
@@ -3454,14 +3565,18 @@
    flex-basis 取 auto，连接层写的按行数高度才算数，同时外层给了高度时还能撑满；
    min-block-size: 0 让它在弹性父级里能被压缩从而真的溢出；
    两个轴都 auto：长行不折，横向也要能滚；
-   overscroll-behavior: contain 阻止滚动量传给页面；
-   scrollbar-gutter: stable 避免滚动条出现与消失时推动文字。 */
+   overscroll-behavior: contain 阻止滚动量传给页面。 */
 [data-scope='log'][data-part='viewport'] {
   flex: 1 1 auto;
   min-block-size: 0;
   block-size: calc(var(--xh-_log-line-h) * var(--xh-log-rows, 16));
   overflow: auto;
   overscroll-behavior: contain;
+}
+
+/* 还在用原生滚动条的视口留一条空道，滚动条出现与消失时不推动文字。
+   带 data-xh-scrollbar 的容器已经把原生条藏成零宽，这条空道对它没有布局作用，排除掉 */
+[data-scope='log'][data-part='viewport']:not([data-xh-scrollbar]) {
   scrollbar-gutter: stable;
 }
 
@@ -3733,23 +3848,23 @@
 /* —— 间距档位 —— */
 /* 每一档指向一个间距令牌，列之间与列内项之间吃同一份间距 */
 [data-scope='masonry'][data-part='root'][data-gap='xs'] {
-  --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-1));
+  --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-layout-gap-xs));
 }
 
 [data-scope='masonry'][data-part='root'][data-gap='sm'] {
-  --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-2));
+  --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-layout-gap-sm));
 }
 
 [data-scope='masonry'][data-part='root'][data-gap='md'] {
-  --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-3));
+  --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-layout-gap-md));
 }
 
 [data-scope='masonry'][data-part='root'][data-gap='lg'] {
-  --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-4));
+  --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-layout-gap-lg));
 }
 
 [data-scope='masonry'][data-part='root'][data-gap='xl'] {
-  --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-6));
+  --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-layout-gap-xl));
 }
 
 /* styles/mention.css */
@@ -3789,6 +3904,9 @@
      引擎没算（尚未落位 / 无引擎）时不额外限高 */
   --xh-_mention-available-h: 100vh;
 
+  /* 候选列表的自绘条浮在内容之上：轨道不上底色，实色轨道会在列表右缘糊一条竖灰带 */
+  --xh-scrollbar-track-bg: transparent;
+
   position: fixed;
   z-index: var(--xh-mention-layer, var(--xh-layer-popover));
   /* 空壳不吃指针，交互只发生在 content 上 */
@@ -3805,9 +3923,11 @@
   /* 尺寸档只换这五个私有槽，输入框与候选都从这两处继承它们，换档不必给每个部件各写一条选择器 */
   --xh-_mention-h: var(--xh-control-h-md);
   --xh-_mention-px: var(--xh-control-px-md);
+  --xh-_mention-item-py: var(--xh-list-option-py-md);
+  --xh-_mention-item-px: var(--xh-control-px-md);
   --xh-_mention-py: var(--xh-field-py);
   --xh-_mention-gap: var(--xh-control-gap-md);
-  --xh-_mention-font-size: var(--xh-text-body-size);
+  --xh-_mention-font-size: var(--xh-control-font-md);
 
   /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
   --xh-_mention-input-bg: var(--xh-bg-canvas);
@@ -3832,6 +3952,8 @@
 [data-scope='mention']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
   --xh-_mention-h: var(--xh-control-h-sm);
   --xh-_mention-px: var(--xh-control-px-sm);
+  --xh-_mention-item-py: var(--xh-list-option-py-sm);
+  --xh-_mention-item-px: var(--xh-control-px-sm);
   --xh-_mention-py: var(--xh-space-1);
   --xh-_mention-gap: var(--xh-control-gap-sm);
   --xh-_mention-font-size: var(--xh-control-font-sm);
@@ -3840,6 +3962,8 @@
 [data-scope='mention']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
   --xh-_mention-h: var(--xh-control-h-lg);
   --xh-_mention-px: var(--xh-control-px-lg);
+  --xh-_mention-item-py: var(--xh-list-option-py-lg);
+  --xh-_mention-item-px: var(--xh-control-px-lg);
   --xh-_mention-py: var(--xh-space-3);
   --xh-_mention-gap: var(--xh-control-gap-lg);
   --xh-_mention-font-size: var(--xh-control-font-lg);
@@ -3939,6 +4063,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='mention'][data-part='content'] {
   display: flex;
   flex-direction: column;
+  gap: var(--xh-mention-content-gap, var(--xh-list-option-gap));
   min-inline-size: var(--xh-mention-content-min-w, var(--xh-overlay-min-w));
   max-inline-size: var(--xh-mention-content-max-w, var(--xh-overlay-max-w));
   max-block-size: min(var(--xh-mention-content-max-h, var(--xh-overlay-max-h)), var(--xh-_mention-available-h));
@@ -3985,8 +4110,8 @@ input[data-scope='mention'][data-part='input'] {
   display: flex;
   align-items: center;
   gap: var(--xh-mention-item-gap, var(--xh-_mention-gap));
-  padding-block: var(--xh-mention-item-py, var(--xh-space-1_5));
-  padding-inline: var(--xh-mention-item-px, var(--xh-control-px-md));
+  padding-block: var(--xh-mention-item-py, var(--xh-_mention-item-py));
+  padding-inline: var(--xh-mention-item-px, var(--xh-_mention-item-px));
   border-radius: var(--xh-mention-item-radius, var(--xh-shape-control));
   color: var(--xh-mention-item-fg, var(--xh-fg-default));
   font-size: var(--xh-mention-item-font-size, var(--xh-_mention-font-size));
@@ -4164,6 +4289,13 @@ input[data-scope='mention'][data-part='input'] {
   line-height: var(--xh-leading-normal);
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='page-header'][data-part='back-trigger'][hidden],
+[data-scope='page-header'][data-part='extra'][hidden] {
+  display: none;
+}
+
 /* styles/password-input.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='password-input'] {
@@ -4183,11 +4315,11 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_password-input-h: var(--xh-control-h-md);
   --xh-_password-input-px: var(--xh-control-px-md);
   --xh-_password-input-gap: var(--xh-control-gap-md);
-  --xh-_password-input-font-size: var(--xh-text-body-size);
-  --xh-_password-input-label-font-size: var(--xh-text-label-size);
+  --xh-_password-input-font-size: var(--xh-control-font-md);
+  --xh-_password-input-label-font-size: var(--xh-control-font-md);
   /* 提示与切换钮里的字形都比正文小一档，三个尺寸档各自换过，不是一个恒等的中转 */
-  --xh-_password-input-hint-font-size: var(--xh-text-secondary-size);
-  --xh-_password-input-trigger-font-size: var(--xh-text-secondary-size);
+  --xh-_password-input-hint-font-size: var(--xh-control-caption-md);
+  --xh-_password-input-trigger-font-size: var(--xh-control-caption-md);
 
   /* 盒子的圆角 */
   --xh-_password-input-radius: var(--xh-password-input-input-radius, var(--xh-shape-control));
@@ -4659,9 +4791,9 @@ input[data-scope='mention'][data-part='input'] {
   align-items: center;
   justify-content: center;
   block-size: var(--xh-control-h-sm);
-  padding-inline: var(--xh-control-px-sm);
+  padding-inline: var(--xh-popconfirm-cancel-trigger-px, var(--xh-control-px-sm));
   border: var(--xh-stroke-thin) solid transparent;
-  border-radius: var(--xh-shape-control);
+  border-radius: var(--xh-popconfirm-action-radius, var(--xh-shape-control));
   font-size: var(--xh-text-secondary-size);
   font-weight: var(--xh-text-label-weight);
   line-height: var(--xh-leading-none);
@@ -4746,6 +4878,13 @@ input[data-scope='mention'][data-part='input'] {
   animation: none;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='popconfirm'][data-part='root'][hidden],
+[data-scope='popconfirm'][data-part='cancel-trigger'][hidden] {
+  display: none;
+}
+
 /* styles/popselect.css */
 /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
    动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
@@ -4783,6 +4922,9 @@ input[data-scope='mention'][data-part='input'] {
      引擎没算（尚未落位 / 无引擎 / 贴边归零）时退回自己那档静态上限 */
   --xh-_popselect-available-h: 100vh;
 
+  /* 候选列表的自绘条浮在内容之上：轨道不上底色，实色轨道会在列表右缘糊一条竖灰带 */
+  --xh-scrollbar-track-bg: transparent;
+
   position: fixed;
   z-index: var(--xh-popselect-layer, var(--xh-layer-popover));
   /* 空壳不吃指针，交互只发生在 content 上 */
@@ -4799,8 +4941,10 @@ input[data-scope='mention'][data-part='input'] {
   /* 尺寸档只换这四个私有槽，触发器与条目都从这两处继承它们，换档不必给每个部件各写一条选择器 */
   --xh-_popselect-h: var(--xh-control-h-md);
   --xh-_popselect-px: var(--xh-control-px-md);
+  --xh-_popselect-item-py: var(--xh-list-option-py-md);
+  --xh-_popselect-item-px: var(--xh-control-px-md);
   --xh-_popselect-gap: var(--xh-control-gap-md);
-  --xh-_popselect-font-size: var(--xh-text-body-size);
+  --xh-_popselect-font-size: var(--xh-control-font-md);
 
   /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
   --xh-_popselect-control-bg: var(--xh-bg-canvas);
@@ -4810,7 +4954,7 @@ input[data-scope='mention'][data-part='input'] {
   /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
      没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
   --xh-_popselect-ring: var(--xh-ring-focus);
-  --xh-_popselect-accent: var(--xh-_tone, var(--xh-bg-brand));
+  --xh-_popselect-accent: var(--xh-_tone, var(--xh-fg-brand));
   --xh-_popselect-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 }
 
@@ -4837,6 +4981,8 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='popselect']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
   --xh-_popselect-h: var(--xh-control-h-sm);
   --xh-_popselect-px: var(--xh-control-px-sm);
+  --xh-_popselect-item-py: var(--xh-list-option-py-sm);
+  --xh-_popselect-item-px: var(--xh-control-px-sm);
   --xh-_popselect-gap: var(--xh-control-gap-sm);
   --xh-_popselect-font-size: var(--xh-control-font-sm);
 }
@@ -4844,6 +4990,8 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='popselect']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
   --xh-_popselect-h: var(--xh-control-h-lg);
   --xh-_popselect-px: var(--xh-control-px-lg);
+  --xh-_popselect-item-py: var(--xh-list-option-py-lg);
+  --xh-_popselect-item-px: var(--xh-control-px-lg);
   --xh-_popselect-gap: var(--xh-control-gap-lg);
   --xh-_popselect-font-size: var(--xh-control-font-lg);
 }
@@ -4991,6 +5139,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='popselect'][data-part='content'] {
   display: flex;
   flex-direction: column;
+  gap: var(--xh-popselect-content-gap, var(--xh-list-option-gap));
   min-inline-size: var(--xh-popselect-content-min-w, var(--xh-overlay-menu-min-w));
   max-inline-size: var(--xh-popselect-content-max-w, var(--xh-overlay-max-w));
   max-block-size: min(var(--xh-popselect-content-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_popselect-available-h));
@@ -5036,8 +5185,8 @@ input[data-scope='mention'][data-part='input'] {
   display: flex;
   align-items: center;
   gap: var(--xh-popselect-item-gap, var(--xh-_popselect-gap));
-  padding-block: var(--xh-popselect-item-py, var(--xh-space-1_5));
-  padding-inline: var(--xh-popselect-item-px, var(--xh-control-px-md));
+  padding-block: var(--xh-popselect-item-py, var(--xh-_popselect-item-py));
+  padding-inline: var(--xh-popselect-item-px, var(--xh-_popselect-item-px));
   border-radius: var(--xh-popselect-item-radius, var(--xh-shape-control));
   color: var(--xh-popselect-item-fg, var(--xh-fg-default));
   font-size: var(--xh-popselect-item-font-size, var(--xh-_popselect-font-size));
@@ -5115,6 +5264,16 @@ input[data-scope='mention'][data-part='input'] {
   visibility: visible;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='popselect'][data-part='root'][hidden],
+[data-scope='popselect'][data-part='control'][hidden],
+[data-scope='popselect'][data-part='trigger'][hidden],
+[data-scope='popselect'][data-part='item'][hidden],
+[data-scope='popselect'][data-part='item-indicator'][hidden] {
+  display: none;
+}
+
 /* styles/qr-code.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='qr-code'] {
@@ -5220,7 +5379,7 @@ input[data-scope='mention'][data-part='input'] {
   /* 三个尺寸档只换这几个私有槽，图标与标题都从 root 继承它们，
      换档不必给每个部件各写一条选择器 */
   --xh-_result-gap: var(--xh-stack-gap-md);
-  --xh-_result-py: var(--xh-section-py);
+  --xh-_result-py: var(--xh-section-py-md);
   --xh-_result-icon-size: var(--xh-glyph-size-3xl);
   --xh-_result-title-size: var(--xh-text-heading-3-size);
   /* 说明的读行宽度：整句话不收窄就会拉成一条难读的长行 */
@@ -5246,15 +5405,15 @@ input[data-scope='mention'][data-part='input'] {
 
 /* —— 尺寸 —— */
 [data-scope='result'][data-part='root'][data-size='sm'] {
-  --xh-_result-gap: var(--xh-space-3);
-  --xh-_result-py: var(--xh-space-6);
+  --xh-_result-gap: var(--xh-stack-gap-sm);
+  --xh-_result-py: var(--xh-section-py-sm);
   --xh-_result-icon-size: var(--xh-glyph-size-2xl);
   --xh-_result-title-size: var(--xh-control-font-lg);
 }
 
 [data-scope='result'][data-part='root'][data-size='lg'] {
-  --xh-_result-gap: var(--xh-space-6);
-  --xh-_result-py: var(--xh-space-8);
+  --xh-_result-gap: var(--xh-stack-gap-lg);
+  --xh-_result-py: var(--xh-section-py-lg);
   --xh-_result-icon-size: var(--xh-glyph-size-4xl);
   --xh-_result-title-size: var(--xh-text-heading-2-size);
 }
@@ -5287,6 +5446,9 @@ input[data-scope='mention'][data-part='input'] {
   align-items: center;
   justify-content: center;
   flex: none;
+  /* 作者塞进图标槽的 XhIcon 与皮肤画的字形同一把尺，都按展示档的图标框量 */
+  --xh-icon-size: var(--xh-result-icon-size, var(--xh-_result-icon-size));
+
   block-size: var(--xh-result-icon-size, var(--xh-_result-icon-size));
   inline-size: var(--xh-result-icon-size, var(--xh-_result-icon-size));
   color: var(--xh-result-icon-fg, var(--xh-_result-accent));
@@ -5319,6 +5481,13 @@ input[data-scope='mention'][data-part='input'] {
   gap: var(--xh-result-action-gap, var(--xh-space-2));
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='result'][data-part='icon'][hidden],
+[data-scope='result'][data-part='action'][hidden] {
+  display: none;
+}
+
 /* styles/segmented.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='segmented'] {
@@ -5332,7 +5501,7 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_segmented-h: var(--xh-control-h-md);
   --xh-_segmented-px: var(--xh-control-px-md);
   --xh-_segmented-gap: var(--xh-control-gap-md);
-  --xh-_segmented-font-size: var(--xh-text-label-size);
+  --xh-_segmented-font-size: var(--xh-control-font-md);
   /* 指示器底色与选中段的文字色；没写 data-tone 时就是这里的取值 */
   --xh-_segmented-indicator-bg: var(--xh-bg-surface);
   --xh-_segmented-fg-selected: var(--xh-fg-default);
@@ -5688,7 +5857,7 @@ input[data-scope='mention'][data-part='input'] {
   display: flex;
   flex-wrap: nowrap;
   /* 不写档位也按 md 留白，这是与裸弹性容器的分野；使用者槽位排在档位之前，写死一个值即盖过所有档 */
-  gap: var(--xh-space-gap, var(--xh-space-3));
+  gap: var(--xh-space-gap, var(--xh-layout-gap-md));
 }
 
 /* 声明了 display 就盖掉了 UA 的 [hidden] 规则，这里还回去 */
@@ -5776,23 +5945,23 @@ input[data-scope='mention'][data-part='input'] {
 /* —— 间距档位 —— */
 /* 每一档指向一个间距令牌，折行时行与行之间也吃这份间距 */
 [data-scope='space'][data-part='root'][data-gap='xs'] {
-  gap: var(--xh-space-gap, var(--xh-space-1));
+  gap: var(--xh-space-gap, var(--xh-layout-gap-xs));
 }
 
 [data-scope='space'][data-part='root'][data-gap='sm'] {
-  gap: var(--xh-space-gap, var(--xh-space-2));
+  gap: var(--xh-space-gap, var(--xh-layout-gap-sm));
 }
 
 [data-scope='space'][data-part='root'][data-gap='md'] {
-  gap: var(--xh-space-gap, var(--xh-space-3));
+  gap: var(--xh-space-gap, var(--xh-layout-gap-md));
 }
 
 [data-scope='space'][data-part='root'][data-gap='lg'] {
-  gap: var(--xh-space-gap, var(--xh-space-4));
+  gap: var(--xh-space-gap, var(--xh-layout-gap-lg));
 }
 
 [data-scope='space'][data-part='root'][data-gap='xl'] {
-  gap: var(--xh-space-gap, var(--xh-space-6));
+  gap: var(--xh-space-gap, var(--xh-layout-gap-xl));
 }
 
 /* styles/statistic.css */
@@ -5999,8 +6168,10 @@ input[data-scope='mention'][data-part='input'] {
   color: var(--xh-tag-fg, var(--xh-fg-default));
 }
 
+/* 描边档的边就是这枚标签的全部轮廓，走「可操作区边界」那一支：
+   兑了底色的 --xh-_tone-border 六族都在 1.44-2.18，当轮廓看不清 */
 [data-scope='tag'][data-part='root'][data-variant='outline'][data-tone] {
-  border-color: var(--xh-tag-border, var(--xh-_tone-border, var(--xh-border-default)));
+  border-color: var(--xh-tag-border, var(--xh-_tone-border-control, var(--xh-border-default)));
   color: var(--xh-tag-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
 }
 
@@ -6081,7 +6252,7 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_timeline-dot-size: var(--xh-space-2_5);
   --xh-_timeline-gutter: var(--xh-space-3);
   --xh-_timeline-item-gap: var(--xh-space-5);
-  --xh-_timeline-title-font-size: var(--xh-text-label-size);
+  --xh-_timeline-title-font-size: var(--xh-control-font-md);
   --xh-_timeline-caption-font-size: var(--xh-text-caption-size);
   /* 标题首行占多高。圆点按它居中下移，圆心才落在标题这一行的中线上 */
   --xh-_timeline-line-h: calc(
@@ -6163,7 +6334,7 @@ input[data-scope='mention'][data-part='input'] {
   justify-content: center;
   inline-size: var(--xh-timeline-indicator-size, var(--xh-_timeline-dot-size));
   block-size: var(--xh-timeline-indicator-size, var(--xh-_timeline-dot-size));
-  border-radius: var(--xh-shape-pill);
+  border-radius: var(--xh-timeline-indicator-radius, var(--xh-shape-pill));
   /* 使用者令牌排在语气之前；两者都没有时退回一个中性的实心点 */
   background: var(--xh-timeline-indicator-bg, var(--xh-_tone-soft, var(--xh-fg-muted)));
   color: var(--xh-timeline-indicator-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
@@ -6191,7 +6362,7 @@ input[data-scope='mention'][data-part='input'] {
 
 /* —— 连线 —— */
 [data-scope='timeline'][data-part='connector'] {
-  border-radius: var(--xh-shape-pill);
+  border-radius: var(--xh-timeline-connector-radius, var(--xh-shape-pill));
   background: var(--xh-timeline-connector-bg, var(--xh-border-default));
 }
 
@@ -6229,7 +6400,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='timeline'][data-part='content'] {
   display: flex;
   flex-direction: column;
-  gap: var(--xh-space-1);
+  gap: var(--xh-timeline-content-gap, var(--xh-space-1));
   min-inline-size: 0;
 }
 
@@ -6247,7 +6418,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='timeline'][data-part='item'][data-orientation='horizontal'] [data-scope='timeline'][data-part='content'] {
   grid-column: 1 / -1;
   grid-row: 2;
-  padding-block-start: var(--xh-space-2);
+  padding-block-start: var(--xh-timeline-content-pt, var(--xh-space-2));
   padding-inline-end: var(--xh-timeline-item-gap, var(--xh-_timeline-item-gap));
 }
 
@@ -6312,7 +6483,7 @@ input[data-scope='mention'][data-part='input'] {
   grid-row: 1;
   align-self: end;
   padding-block-start: 0;
-  padding-block-end: var(--xh-space-2);
+  padding-block-end: var(--xh-timeline-content-pb, var(--xh-space-2));
 }
 
 [data-scope='timeline'][data-part='item'][data-orientation='horizontal'][data-placement='alternate'] {
@@ -6333,7 +6504,7 @@ input[data-scope='mention'][data-part='input'] {
   grid-row: 1;
   align-self: end;
   padding-block-start: 0;
-  padding-block-end: var(--xh-space-2);
+  padding-block-end: var(--xh-timeline-content-pb, var(--xh-space-2));
 }
 
 /* —— 文字 —— */
@@ -6604,7 +6775,7 @@ input[data-scope='mention'][data-part='input'] {
   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));
 }
 
@@ -6662,6 +6833,7 @@ input[data-scope='mention'][data-part='input'] {
   xh-menu,
   xh-menubar,
   xh-navigation-menu,
+  xh-pagination,
   xh-popconfirm,
   xh-popover,
   xh-popselect,
@@ -6707,19 +6879,25 @@ input[data-scope='mention'][data-part='input'] {
  * 这里只声明私有槽，各组件的形态规则去消费。所以加一个语气是改这一处 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 也必须随主题翻——现推那一档自动跟着底色走，
+ * 文件末尾那条深色覆盖是给兜底那一档用的。
  */
 
 [data-tone] {
@@ -6727,9 +6905,6 @@ input[data-scope='mention'][data-part='input'] {
      而不是让 --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);
 
@@ -6743,13 +6918,18 @@ input[data-scope='mention'][data-part='input'] {
   /* 控件的可操作区边界要 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);
 }
@@ -6762,28 +6942,24 @@ input[data-scope='mention'][data-part='input'] {
 
 [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);
 }
@@ -6808,6 +6984,32 @@ input[data-scope='mention'][data-part='input'] {
   --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);
+}
+
 /* styles/alert.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='alert'] {
@@ -6818,13 +7020,11 @@ input[data-scope='mention'][data-part='input'] {
   /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
   --xh-icon-size: var(--xh-alert-icon-size, var(--xh-glyph-size-text));
 
-  /* 强调色随语气走，底色/描边/图标色都由它推导出来，换语气不必逐条属性各写一遍。
-     没写 data-tone 时 --xh-_tone 没被声明，退回原来的 info 蓝 */
-  --xh-_alert-accent: var(--xh-_tone-soft, var(--xh-color-info-500));
-  /* 底色与描边由语气色兑进当前表面色得到：表面色本身跟着深浅模式翻，
-     兑出来的淡底也就跟着翻，不必为深色再写一套选择器 */
-  --xh-_alert-tint: color-mix(in oklab, var(--xh-_alert-accent) 12%, var(--xh-bg-surface));
-  --xh-_alert-edge: color-mix(in oklab, var(--xh-_alert-accent) 32%, var(--xh-bg-surface));
+  /* 底色、描边、图标色一律取语气层派生好的槽：连接层给 alert 兜了 tone=info 的缺省，
+     data-tone 恒在，语气层的槽也就恒被声明。此前这里自己又兑了一遍（12% / 32%），
+     与语气层的公式差一档，图标压上去只有 1.79–2.47 */
+  --xh-_alert-tint: var(--xh-_tone-subtle);
+  --xh-_alert-edge: var(--xh-_tone-border);
 
   display: flex;
   /* 说明用 flex: 1 1 100% 独占一行，容器不换行的话它只会挤在标题旁边 */
@@ -6854,8 +7054,8 @@ input[data-scope='mention'][data-part='input'] {
   flex: none;
   /* 与首行文字对齐：图标框高取一行正文的行高 */
   block-size: calc(var(--xh-text-body-size) * var(--xh-leading-normal));
-  inline-size: var(--xh-alert-icon-size, var(--xh-control-indicator-size));
-  color: var(--xh-alert-icon-fg, var(--xh-_alert-accent));
+  inline-size: var(--xh-alert-icon-box, var(--xh-control-indicator-size));
+  color: var(--xh-alert-icon-fg, var(--xh-_tone-fg));
 }
 
 /* 标题与说明摞成一列，占满 root 剩下的横向空间，
@@ -6946,6 +7146,12 @@ input[data-scope='mention'][data-part='input'] {
   mask: var(--xh-glyph-mark-close) center / contain no-repeat;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='alert'][data-part='icon'][hidden] {
+  display: none;
+}
+
 /* styles/empty-state.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='empty-state'] {
@@ -6956,7 +7162,7 @@ input[data-scope='mention'][data-part='input'] {
   /* 三个尺寸档只换这几个私有槽，图标与标题都从 root 继承它们，
      换档不必给每个部件各写一条选择器 */
   --xh-_empty-state-gap: var(--xh-stack-gap-md);
-  --xh-_empty-state-py: var(--xh-section-py);
+  --xh-_empty-state-py: var(--xh-section-py-md);
   --xh-_empty-state-icon-size: var(--xh-glyph-size-2xl);
   --xh-_empty-state-title-size: var(--xh-control-font-lg);
   /* 说明的读行宽度：整句话不收窄就会拉成一条难读的长行 */
@@ -6979,15 +7185,15 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 [data-scope='empty-state'][data-part='root'][data-size='sm'] {
-  --xh-_empty-state-gap: var(--xh-space-2);
-  --xh-_empty-state-py: var(--xh-space-4);
+  --xh-_empty-state-gap: var(--xh-stack-gap-sm);
+  --xh-_empty-state-py: var(--xh-section-py-sm);
   --xh-_empty-state-icon-size: var(--xh-glyph-size-xl);
   --xh-_empty-state-title-size: var(--xh-control-font-md);
 }
 
 [data-scope='empty-state'][data-part='root'][data-size='lg'] {
-  --xh-_empty-state-gap: var(--xh-space-6);
-  --xh-_empty-state-py: var(--xh-space-8);
+  --xh-_empty-state-gap: var(--xh-stack-gap-lg);
+  --xh-_empty-state-py: var(--xh-section-py-lg);
   --xh-_empty-state-icon-size: var(--xh-glyph-size-3xl);
   --xh-_empty-state-title-size: var(--xh-text-heading-3-size);
 }
@@ -6997,11 +7203,14 @@ input[data-scope='mention'][data-part='input'] {
   align-items: center;
   justify-content: center;
   flex: none;
+  /* 作者塞进图标槽的 XhIcon 与皮肤画的字形同一把尺，都按展示档的图标框量 */
+  --xh-icon-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
+
   block-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
   inline-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
   color: var(--xh-empty-state-icon-fg, var(--xh-fg-subtle));
   /* 图标常是一个字形，字号跟着图标框走，line-height 不再另占高度 */
-  font-size: var(--xh-empty-state-icon-font-size, var(--xh-text-heading-1-size));
+  font-size: var(--xh-empty-state-icon-font-size, var(--xh-_empty-state-icon-size));
   line-height: var(--xh-leading-none);
 }
 
@@ -7029,6 +7238,13 @@ input[data-scope='mention'][data-part='input'] {
   gap: var(--xh-empty-state-action-gap, var(--xh-space-2));
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='empty-state'][data-part='icon'][hidden],
+[data-scope='empty-state'][data-part='action'][hidden] {
+  display: none;
+}
+
 /* styles/skeleton.css */
 /* 一条比底色略亮的窄带从头扫到尾。背景图比自身宽一倍，靠移动背景位置扫过去，
    不动 transform 也不动布局，整段动画只在合成层上跑 */
@@ -7221,7 +7437,7 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_accordion-trigger-h: var(--xh-control-h-md);
   --xh-_accordion-trigger-px: var(--xh-control-px-md);
   --xh-_accordion-trigger-gap: var(--xh-control-gap-md);
-  --xh-_accordion-trigger-font-size: var(--xh-text-label-size);
+  --xh-_accordion-trigger-font-size: var(--xh-control-font-md);
 
   /* 语气落在展开着的标题上，指示器写在标题里、跟着继承这个色，不另立规则。
      没写 data-tone 时 --xh-_tone-fg 没被声明，退回原来的前景色。
@@ -7254,10 +7470,25 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 [data-scope='accordion'][data-part='item'] {
-  border-block-end: var(--xh-stroke-thin) solid var(--xh-accordion-item-border, var(--xh-border-default));
   min-inline-size: 0;
 }
 
+/* 分隔线画在后一条的起始边，条与条之间才只有一条，末条也不会留一条悬空线
+   （根没有外框接住它）。只认自己的直接子条目：套在条目里的另一份手风琴由它自己的根管。
+   横排时换成行内轴那一侧 */
+[data-scope='accordion'][data-part='root']
+  > [data-scope='accordion'][data-part='item']
+  + [data-scope='accordion'][data-part='item'] {
+  border-block-start: var(--xh-stroke-thin) solid var(--xh-accordion-item-border, var(--xh-border-subtle));
+}
+
+[data-scope='accordion'][data-part='root'][data-orientation='horizontal']
+  > [data-scope='accordion'][data-part='item']
+  + [data-scope='accordion'][data-part='item'] {
+  border-block-start: 0;
+  border-inline-start: var(--xh-stroke-thin) solid var(--xh-accordion-item-border, var(--xh-border-subtle));
+}
+
 [data-scope='accordion'][data-part='header'] {
   margin: 0;
   font: inherit;
@@ -7369,6 +7600,14 @@ input[data-scope='mention'][data-part='input'] {
   }
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='accordion'][data-part='root'][hidden],
+[data-scope='accordion'][data-part='trigger'][hidden],
+[data-scope='accordion'][data-part='indicator'][hidden] {
+  display: none;
+}
+
 /* styles/anchor.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='anchor'] {
@@ -7379,7 +7618,7 @@ input[data-scope='mention'][data-part='input'] {
    这里不给 display，UA 的 [hidden]{display:none} 就仍然压得住 */
 [data-scope='anchor'][data-part='root'] {
   /* 尺寸档只换这两个私有槽，链接从 root 继承它们，换档不必给每个部件各写一条选择器 */
-  --xh-_anchor-font-size: var(--xh-text-label-size);
+  --xh-_anchor-font-size: var(--xh-control-font-md);
   --xh-_anchor-link-px: var(--xh-control-px-md);
   /* 当前那一节的指示条与文字随语气走。没写 data-tone 时这两个槽都没被声明，退回原来的品牌色。
      指示条是装饰性的色条，取柔和档；文字要压在普通背景上读，取语气的文字档。
@@ -7571,73 +7810,137 @@ input[data-scope='mention'][data-part='input'] {
   display: none;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='avatar'][data-part='root'][hidden] {
+  display: none;
+}
+
 /* styles/badge.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='badge'] {
   --xh-badge-skin: 1;
 }
 
+/* 锚点：被标记的那个东西（按钮、头像、标签页）放进它里面。
+   角标绝对定位在它的角上，所以这一层必须建定位上下文，且不能自己撑出尺寸 */
 [data-scope='badge'][data-part='root'] {
+  position: relative;
+  display: inline-flex;
+  /* 角标探出宿主边界是常态，不能被裁掉 */
+  overflow: visible;
+  vertical-align: middle;
+}
+
+/* 锚点也可能被作者整块收起 */
+[data-scope='badge'][data-part='root'][hidden] {
+  display: none;
+}
+
+/* 角标本身。档位换的是圆点直径、两位数时的最小宽度与字号——
+   不是药丸那套内衬与行高：那是 tag 的活 */
+[data-scope='badge'][data-part='indicator'] {
+  /* 每一档的盒都要大于字号：两位数在等高的盒里会被撑破。
+     字号刻度最小就是 12px，所以往上抬盒子而不是往下压字 */
+  --xh-_badge-dot: var(--xh-space-2);
+  --xh-_badge-min: var(--xh-space-5);
+  --xh-_badge-px: var(--xh-space-1);
+  --xh-_badge-font: var(--xh-text-secondary-size);
+
+  /* 不设 z-index：角标在 DOM 序里排在宿主之后，本来就压在上面 */
+  position: absolute;
   display: inline-flex;
   align-items: center;
-  gap: var(--xh-space-1);
-  padding-inline: var(--xh-space-2);
-  padding-block: var(--xh-space-0_5);
-  border: var(--xh-stroke-thin) solid transparent;
-  border-radius: var(--xh-shape-pill);
-  background: var(--xh-badge-bg, var(--xh-bg-subtle));
-  color: var(--xh-badge-fg, var(--xh-fg-default));
-  font-size: var(--xh-badge-font-size, var(--xh-text-caption-size));
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: var(--xh-badge-min-size, var(--xh-_badge-min));
+  block-size: var(--xh-badge-min-size, var(--xh-_badge-min));
+  padding-inline: var(--xh-badge-px, var(--xh-_badge-px));
+  border: var(--xh-stroke-thin) solid var(--xh-badge-ring, var(--xh-bg-surface));
+  border-radius: var(--xh-badge-radius, var(--xh-shape-pill));
+  /* 角标默认就是实心的：贴在别的东西上，淡底与描边都看不清 */
+  background: var(--xh-badge-bg, var(--xh-_tone, var(--xh-bg-brand)));
+  color: var(--xh-badge-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
+  font-size: var(--xh-badge-font-size, var(--xh-_badge-font));
   font-weight: var(--xh-badge-font-weight, var(--xh-font-weight-medium));
   line-height: var(--xh-leading-none);
+  /* 出的是计数，数字必须等宽：不然 9 跳到 10 时角标的宽度会抖一下 */
+  font-variant-numeric: tabular-nums;
   white-space: nowrap;
+  pointer-events: none;
 }
 
 /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
    计数为 0 且没开 showZero 时连接层会发 hidden */
-[data-scope='badge'][data-part='root'][hidden] {
+[data-scope='badge'][data-part='indicator'][hidden] {
   display: none;
 }
 
 /* 圆点形态：只表示「有」，不表示「有几个」——收掉内边距与文字盒 */
-[data-scope='badge'][data-part='root'][data-dot] {
-  inline-size: var(--xh-badge-dot-size, var(--xh-space-2));
-  block-size: var(--xh-badge-dot-size, var(--xh-space-2));
+[data-scope='badge'][data-part='indicator'][data-dot] {
+  min-inline-size: var(--xh-badge-dot-size, var(--xh-_badge-dot));
+  inline-size: var(--xh-badge-dot-size, var(--xh-_badge-dot));
+  block-size: var(--xh-badge-dot-size, var(--xh-_badge-dot));
   padding: 0;
   font-size: 0;
 }
 
-/* —— 变体 —— */
-/* 形态只决定颜色怎么用；用哪族颜色由 data-tone 决定，没写 tone 就沿用原来的品牌/中性配色 */
-[data-scope='badge'][data-part='root'][data-variant='solid'] {
-  background: var(--xh-_tone, var(--xh-bg-brand));
-  color: var(--xh-_tone-on, var(--xh-fg-on-brand));
+/* —— 落点 —— */
+/* 用 inset 的逻辑属性写，rtl 下 end 自动落到左边；translate 让角标压住宿主的角 */
+[data-scope='badge'][data-part='indicator'][data-placement='top-end'] {
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  translate: 50% -50%;
 }
 
-[data-scope='badge'][data-part='root'][data-variant='subtle'] {
-  background: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-  color: var(--xh-_tone-fg, var(--xh-fg-default));
+[data-scope='badge'][data-part='indicator'][data-placement='top-start'] {
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  translate: -50% -50%;
 }
 
-[data-scope='badge'][data-part='root'][data-variant='outline'] {
-  border-color: var(--xh-_tone-border, var(--xh-border-default));
-  background: transparent;
-  color: var(--xh-_tone-fg, var(--xh-fg-default));
+[data-scope='badge'][data-part='indicator'][data-placement='bottom-end'] {
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  translate: 50% 50%;
+}
+
+[data-scope='badge'][data-part='indicator'][data-placement='bottom-start'] {
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  translate: -50% 50%;
+}
+
+/* rtl 下 translate 的行内轴要跟着翻，否则角标会往宿主外面跑 */
+[dir='rtl'] [data-scope='badge'][data-part='indicator'][data-placement='top-end'] {
+  translate: -50% -50%;
+}
+
+[dir='rtl'] [data-scope='badge'][data-part='indicator'][data-placement='top-start'] {
+  translate: 50% -50%;
+}
+
+[dir='rtl'] [data-scope='badge'][data-part='indicator'][data-placement='bottom-end'] {
+  translate: -50% 50%;
+}
+
+[dir='rtl'] [data-scope='badge'][data-part='indicator'][data-placement='bottom-start'] {
+  translate: 50% 50%;
 }
 
 /* —— 尺寸 —— */
-/* 徽标是随文排的药丸，不占控件行高，档位走间距与字号而不是 control-h */
-[data-scope='badge'][data-part='root'][data-size='sm'] {
-  gap: var(--xh-space-0_5);
-  padding-inline: var(--xh-space-1_5);
-  padding-block: var(--xh-space-0);
+[data-scope='badge'][data-part='indicator'][data-size='sm'] {
+  --xh-_badge-dot: var(--xh-space-1_5);
+  --xh-_badge-min: var(--xh-space-4);
+  --xh-_badge-px: var(--xh-space-0_5);
+  --xh-_badge-font: var(--xh-text-caption-size);
 }
 
-[data-scope='badge'][data-part='root'][data-size='lg'] {
-  gap: var(--xh-space-1_5);
-  padding-inline: var(--xh-space-3);
-  padding-block: var(--xh-space-1);
-  font-size: var(--xh-text-secondary-size);
+[data-scope='badge'][data-part='indicator'][data-size='lg'] {
+  --xh-_badge-dot: var(--xh-space-2_5);
+  --xh-_badge-min: var(--xh-space-6);
+  --xh-_badge-px: var(--xh-space-1_5);
+  --xh-_badge-font: var(--xh-text-body-size);
 }
 
 /* styles/breadcrumb.css */
@@ -7653,7 +7956,7 @@ input[data-scope='mention'][data-part='input'] {
   --xh-icon-size: var(--xh-breadcrumb-icon-size, var(--xh-glyph-size-text));
 
   /* 尺寸档只换这两个私有槽，列表与链接都从 root 继承它们，换档不必给每个部件各写一条选择器 */
-  --xh-_breadcrumb-font-size: var(--xh-text-label-size);
+  --xh-_breadcrumb-font-size: var(--xh-control-font-md);
   --xh-_breadcrumb-gap: var(--xh-space-2);
   /* 当前项与链接悬停的强调色随语气走。没写 data-tone 时 --xh-_tone-fg 没被声明，
      退回原来的前景色。聚焦环不在其列，它恒是 --xh-ring-focus */
@@ -7934,6 +8237,12 @@ input[data-scope='mention'][data-part='input'] {
   animation: none;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='button'][data-part='root'][hidden] {
+  display: none;
+}
+
 /* styles/calendar.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='calendar'] {
@@ -8034,33 +8343,33 @@ input[data-scope='mention'][data-part='input'] {
   transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
-[data-scope='calendar'][data-part='prev-year-trigger'],
+[data-scope='calendar'][data-part='prev-year-trigger'][hidden],
 [data-scope='calendar'][data-part='prev-trigger'][hidden],
-[data-scope='calendar'][data-part='next-year-trigger'],
+[data-scope='calendar'][data-part='next-year-trigger'][hidden],
 [data-scope='calendar'][data-part='next-trigger'][hidden] {
   display: none;
 }
 
-[data-scope='calendar'][data-part='prev-year-trigger'],
+[data-scope='calendar'][data-part='prev-year-trigger']:hover:not(:disabled),
 [data-scope='calendar'][data-part='prev-trigger']:hover:not(:disabled),
-[data-scope='calendar'][data-part='next-year-trigger'],
+[data-scope='calendar'][data-part='next-year-trigger']:hover:not(:disabled),
 [data-scope='calendar'][data-part='next-trigger']:hover:not(:disabled) {
   background: var(--xh-calendar-nav-bg-hover, var(--xh-bg-subtle-hover));
   color: var(--xh-fg-default);
 }
 
 /* 翻月是单体控件，禁用走原生 :disabled（连接层输出的正是原生 disabled） */
-[data-scope='calendar'][data-part='prev-year-trigger'],
+[data-scope='calendar'][data-part='prev-year-trigger']:disabled,
 [data-scope='calendar'][data-part='prev-trigger']:disabled,
-[data-scope='calendar'][data-part='next-year-trigger'],
+[data-scope='calendar'][data-part='next-year-trigger']:disabled,
 [data-scope='calendar'][data-part='next-trigger']:disabled {
   color: var(--xh-fg-disabled);
   cursor: not-allowed;
 }
 
-[data-scope='calendar'][data-part='prev-year-trigger'],
+[data-scope='calendar'][data-part='prev-year-trigger']:focus-visible,
 [data-scope='calendar'][data-part='prev-trigger']:focus-visible,
-[data-scope='calendar'][data-part='next-year-trigger'],
+[data-scope='calendar'][data-part='next-year-trigger']:focus-visible,
 [data-scope='calendar'][data-part='next-trigger']:focus-visible {
   outline: var(--xh-ring-width) solid var(--xh-ring-focus);
   outline-offset: var(--xh-ring-offset);
@@ -8160,9 +8469,10 @@ input[data-scope='mention'][data-part='input'] {
   display: none;
 }
 
-/* 格子是区间底色的画布：连续背景铺在这一层，圆角的选中片留给 trigger。
+/* 格子是区间底色的画布：底色由格子的 ::before 铺出来，圆角的选中片留给 trigger。
    铺在 trigger 上会被格间空隙切断，区间看起来就是一串断开的圆点 */
 [data-scope='calendar'][data-part='cell'] {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8173,22 +8483,46 @@ input[data-scope='mention'][data-part='input'] {
   display: none;
 }
 
-[data-scope='calendar'][data-part='cell'][data-in-range] {
+/* 区间底色：横向铺满格子，相邻两格接成一条；纵向收在格子内衬里，行与行之间留出空当 */
+[data-scope='calendar'][data-part='cell'][data-in-range]::before {
+  content: '';
+  position: absolute;
+  inset-block: var(--xh-calendar-cell-gap, var(--xh-space-0_5));
+  inset-inline: 0;
   background: var(--xh-calendar-range-bg, var(--xh-bg-brand-subtle));
 }
 
-/* 区间两端各自收圆：中间那些格子保持直角，底色才连成一条 */
-[data-scope='calendar'][data-part='cell'][data-range-start] {
+/* 两端那一格只铺半格，另外半格由选中片占满：区间收在圆点上而不是收在格子边上。
+   起止落在同一格时两条一起生效，底色宽度归零，只剩那枚圆点 */
+[data-scope='calendar'][data-part='cell'][data-in-range][data-range-start]::before {
+  inset-inline-start: 50%;
+}
+
+[data-scope='calendar'][data-part='cell'][data-in-range][data-range-end]::before {
+  inset-inline-end: 50%;
+}
+
+/* 行首与行尾收圆：区间跨周时每一行各是一条两头圆的横杠。
+   摆了周序号格的行里，行首那一格排在它后面 */
+[data-scope='calendar'][data-part='week-row'] > [data-part='cell'][data-in-range]:first-child::before,
+[data-scope='calendar'][data-part='week-row'] > [data-part='week-number'] + [data-part='cell'][data-in-range]::before {
   border-start-start-radius: var(--xh-calendar-cell-radius, var(--xh-shape-pill));
   border-end-start-radius: var(--xh-calendar-cell-radius, var(--xh-shape-pill));
 }
 
-[data-scope='calendar'][data-part='cell'][data-range-end] {
+[data-scope='calendar'][data-part='week-row'] > [data-part='cell'][data-in-range]:last-child::before {
   border-start-end-radius: var(--xh-calendar-cell-radius, var(--xh-shape-pill));
   border-end-end-radius: var(--xh-calendar-cell-radius, var(--xh-shape-pill));
 }
 
+/* 粗粒度的格子之间有间隙，底色本就接不成一条，每一格各自收圆 */
+[data-scope='calendar'][data-part='grid']:is([data-view='month'], [data-view='quarter'], [data-view='year']) > [data-part='cell'][data-in-range]::before {
+  border-radius: var(--xh-calendar-cell-radius, var(--xh-shape-pill));
+}
+
 [data-scope='calendar'][data-part='cell-trigger'] {
+  /* 区间底色是格子上绝对定位的伪元素，选中片得定位才排在它之后 */
+  position: relative;
   display: flex;
   flex: 1;
   align-items: center;
@@ -8344,10 +8678,10 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='card'][data-part='header'] {
   display: flex;
   flex-direction: column;
-  gap: var(--xh-space-1);
+  gap: var(--xh-card-header-gap, var(--xh-space-1));
   padding: var(--xh-_card-pad);
   /* 头下面若还有别的段，间距由那一段自己的内边距接上，这里不重复留白 */
-  padding-block-end: var(--xh-space-2);
+  padding-block-end: var(--xh-card-header-pb, var(--xh-space-2));
 }
 
 [data-scope='card'][data-part='title'] {
@@ -8373,22 +8707,22 @@ input[data-scope='mention'][data-part='input'] {
 
 /* 头与身相邻时，头已经收窄了下边距，身不必再从顶上留一份 */
 [data-scope='card'][data-part='header'] + [data-part='body'] {
-  padding-block-start: var(--xh-space-2);
+  padding-block-start: var(--xh-card-body-pt, var(--xh-space-2));
 }
 
 [data-scope='card'][data-part='footer'] {
   display: flex;
   align-items: center;
-  gap: var(--xh-space-2);
+  gap: var(--xh-card-footer-gap, var(--xh-space-2));
   padding: var(--xh-_card-pad);
-  padding-block-start: var(--xh-space-2);
+  padding-block-start: var(--xh-card-footer-pt, var(--xh-space-2));
 }
 
 /* —— 分段 —— */
 /* 分隔线画在下一段的上边，段与段之间才只有一条 */
 [data-scope='card'][data-part='root'][data-segmented] [data-part='body'],
 [data-scope='card'][data-part='root'][data-segmented] [data-part='footer'] {
-  border-block-start: var(--xh-stroke-thin) solid var(--xh-card-border, var(--xh-border-subtle));
+  border-block-start: var(--xh-stroke-thin) solid var(--xh-card-divider, var(--xh-border-subtle));
   padding-block-start: var(--xh-_card-pad);
 }
 
@@ -8396,6 +8730,15 @@ input[data-scope='mention'][data-part='input'] {
   padding-block-end: var(--xh-_card-pad);
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='card'][data-part='root'][hidden],
+[data-scope='card'][data-part='cover'][hidden],
+[data-scope='card'][data-part='header'][hidden],
+[data-scope='card'][data-part='footer'][hidden] {
+  display: none;
+}
+
 /* styles/carousel.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='carousel'] {
@@ -8633,6 +8976,9 @@ input[data-scope='mention'][data-part='input'] {
 
 /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
 [data-scope='cascader'][data-part='positioner'] {
+  /* 列区的自绘条浮在内容之上：轨道不上底色，实色轨道会在列区下缘糊出一条灰带 */
+  --xh-scrollbar-track-bg: transparent;
+
   position: fixed;
   z-index: var(--xh-cascader-layer, var(--xh-layer-popover));
   /* 空壳不吃指针，交互只发生在 content 里 */
@@ -8652,9 +8998,11 @@ input[data-scope='mention'][data-part='input'] {
   /* 尺寸档只换这几个私有槽，盒与列里的条目都从这两处继承它们，换档不必给每个部件各写一条选择器 */
   --xh-_cascader-h: var(--xh-control-h-md);
   --xh-_cascader-px: var(--xh-control-px-md);
+  --xh-_cascader-row-py: var(--xh-list-option-py-md);
+  --xh-_cascader-row-px: var(--xh-control-px-md);
   --xh-_cascader-gap: var(--xh-control-gap-md);
-  --xh-_cascader-font-size: var(--xh-text-body-size);
-  --xh-_cascader-label-font-size: var(--xh-text-label-size);
+  --xh-_cascader-font-size: var(--xh-control-font-md);
+  --xh-_cascader-label-font-size: var(--xh-control-font-md);
 
   /* 形态档只换触发框的描边与底色这三个槽，浮层与列不跟着变：
      变的是「这是个输入位」的表达方式，不是弹出内容的表达方式 */
@@ -8713,6 +9061,8 @@ input[data-scope='mention'][data-part='input'] {
   --xh-icon-size: var(--xh-cascader-icon-size, var(--xh-glyph-size-sm));
   --xh-_cascader-h: var(--xh-control-h-sm);
   --xh-_cascader-px: var(--xh-control-px-sm);
+  --xh-_cascader-row-py: var(--xh-list-option-py-sm);
+  --xh-_cascader-row-px: var(--xh-control-px-sm);
   --xh-_cascader-gap: var(--xh-control-gap-sm);
   --xh-_cascader-font-size: var(--xh-control-font-sm);
   --xh-_cascader-label-font-size: var(--xh-control-font-sm);
@@ -8722,6 +9072,8 @@ input[data-scope='mention'][data-part='input'] {
   --xh-icon-size: var(--xh-cascader-icon-size, var(--xh-glyph-size-lg));
   --xh-_cascader-h: var(--xh-control-h-lg);
   --xh-_cascader-px: var(--xh-control-px-lg);
+  --xh-_cascader-row-py: var(--xh-list-option-py-lg);
+  --xh-_cascader-row-px: var(--xh-control-px-lg);
   --xh-_cascader-gap: var(--xh-control-gap-lg);
   --xh-_cascader-font-size: var(--xh-control-font-lg);
   --xh-_cascader-label-font-size: var(--xh-control-font-lg);
@@ -8961,6 +9313,7 @@ input[data-scope='mention'][data-part='input'] {
   display: flex;
   flex: none;
   flex-direction: column;
+  gap: var(--xh-cascader-column-gap, var(--xh-list-option-gap));
   min-inline-size: var(--xh-cascader-column-min-w, 7rem);
   block-size: var(--xh-cascader-column-h, var(--xh-viewport-h-sm));
   padding-block: var(--xh-cascader-column-py, var(--xh-space-1));
@@ -8996,8 +9349,8 @@ input[data-scope='mention'][data-part='input'] {
   align-items: center;
   gap: var(--xh-cascader-row-gap, var(--xh-_cascader-gap));
   max-inline-size: var(--xh-cascader-row-max-w, var(--xh-overlay-max-w));
-  padding-block: var(--xh-cascader-row-py, var(--xh-space-1_5));
-  padding-inline: var(--xh-cascader-row-px, var(--xh-control-px-md));
+  padding-block: var(--xh-cascader-row-py, var(--xh-_cascader-row-py));
+  padding-inline: var(--xh-cascader-row-px, var(--xh-_cascader-row-px));
   border-radius: var(--xh-cascader-row-radius, var(--xh-shape-control));
   color: var(--xh-cascader-row-fg, var(--xh-fg-default));
   font-size: var(--xh-cascader-row-font-size, var(--xh-_cascader-font-size));
@@ -9050,22 +9403,17 @@ input[data-scope='mention'][data-part='input'] {
   cursor: not-allowed;
 }
 
-/* 分支条目行尾画右向小箭头：不点开也看得出还有下一级。
-   全边框描好后抹掉块末与行首两边，剩下的直角旋成箭头；位置由 item-text 的 flex:1 顶到行尾 */
+/* 分支条目行尾画右向小箭头：不点开也看得出还有下一级。位置由 item-text 的 flex:1 顶到行尾。
+   与菜单族的子菜单箭头同走字形令牌——此前这里是「描全边框再抹掉两条、把剩下的直角旋 45 度」，
+   作者换掉标记时换不动它，RTL 还得再翻一次旋转角 */
 [data-scope='cascader'][data-part='item'][data-branch]::after {
   content: '';
   flex: none;
-  inline-size: var(--xh-cascader-branch-arrow-size, var(--xh-space-1_5));
-  block-size: var(--xh-cascader-branch-arrow-size, var(--xh-space-1_5));
-  border: var(--xh-glyph-stroke-light) solid var(--xh-cascader-branch-arrow-fg, var(--xh-fg-subtle));
-  border-block-end: 0;
-  border-inline-start: 0;
-  rotate: 45deg;
-}
-
-/* rtl 下剩下的是块首与行末（物理左上）两边，反向旋 45 度才指向行进方向 */
-[dir='rtl'] [data-scope='cascader'][data-part='item'][data-branch]::after {
-  rotate: -45deg;
+  inline-size: var(--xh-cascader-branch-arrow-size, var(--xh-icon-size, var(--xh-glyph-size-text)));
+  block-size: var(--xh-cascader-branch-arrow-size, var(--xh-icon-size, var(--xh-glyph-size-text)));
+  background-color: var(--xh-cascader-branch-arrow-fg, var(--xh-fg-subtle));
+  -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+  mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
 }
 
 [data-scope='cascader'][data-part='item'][data-branch][data-disabled]::after {
@@ -9087,7 +9435,7 @@ input[data-scope='mention'][data-part='input'] {
   align-items: center;
   justify-content: center;
   inline-size: var(--xh-cascader-item-indicator-size, var(--xh-control-indicator-size));
-  color: var(--xh-cascader-item-indicator-fg, var(--xh-_tone, var(--xh-bg-brand)));
+  color: var(--xh-cascader-item-indicator-fg, var(--xh-_tone, var(--xh-fg-brand)));
   visibility: hidden;
 }
 
@@ -9113,11 +9461,11 @@ input[data-scope='mention'][data-part='input'] {
 
 /* 级联勾选的半选态只在皮肤自绘（:empty）时露面画横杠：
    作者塞了自己的选中图形时，半选放出来会顶着一个语义相反的勾，表达交还作者 */
-[data-scope='cascader'][data-part='item-indicator'][data-indeterminate]:empty {
+[data-scope='cascader'][data-part='item-indicator'][data-state='indeterminate']:empty {
   visibility: visible;
 }
 
-[data-scope='cascader'][data-part='item-indicator'][data-indeterminate]:not([data-state='checked']):empty::before {
+[data-scope='cascader'][data-part='item-indicator'][data-state='indeterminate']:empty::before {
   content: '';
   display: inline-block;
   inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
@@ -9144,7 +9492,7 @@ input[data-scope='mention'][data-part='input'] {
   padding-block: var(--xh-cascader-input-py, var(--xh-space-2));
   padding-inline: var(--xh-cascader-input-px, var(--xh-control-px-md));
   border: none;
-  border-block-end: var(--xh-stroke-thin) solid var(--xh-cascader-content-border, var(--xh-border-default));
+  border-block-end: var(--xh-stroke-thin) solid var(--xh-cascader-search-divider, var(--xh-border-subtle));
   border-start-start-radius: inherit;
   border-start-end-radius: inherit;
   background: none;
@@ -9167,6 +9515,7 @@ input[data-scope='mention'][data-part='input'] {
   display: flex;
   flex-basis: 100%;
   flex-direction: column;
+  gap: var(--xh-cascader-search-list-gap, var(--xh-list-option-gap));
   block-size: var(--xh-cascader-column-h, var(--xh-viewport-h-sm));
   padding: var(--xh-cascader-search-p, var(--xh-space-1));
   overflow-y: auto;
@@ -9188,8 +9537,8 @@ input[data-scope='mention'][data-part='input'] {
 
 /* 候选与列内条目同一套行度量，虚拟高亮与悬停同用轻档 */
 [data-scope='cascader'][data-part='search-item'] {
-  padding-block: var(--xh-cascader-row-py, var(--xh-space-1_5));
-  padding-inline: var(--xh-cascader-row-px, var(--xh-control-px-md));
+  padding-block: var(--xh-cascader-row-py, var(--xh-_cascader-row-py));
+  padding-inline: var(--xh-cascader-row-px, var(--xh-_cascader-row-px));
   overflow: hidden;
   border-radius: var(--xh-cascader-row-radius, var(--xh-shape-control));
   color: var(--xh-cascader-row-fg, var(--xh-fg-default));
@@ -9293,7 +9642,7 @@ input[data-scope='mention'][data-part='input'] {
 
   /* 尺寸档只换方框边长这一个私有槽，勾的字号按边长的比例跟着走；
      指示器从 root 继承这两个槽，换档不必给每个部件各写一条选择器 */
-  --xh-_checkbox-box: var(--xh-control-indicator-size);
+  --xh-_checkbox-box: var(--xh-control-indicator-md);
   --xh-_checkbox-glyph: calc(var(--xh-_checkbox-box) * 0.75);
 
   /* 选中态的底与描边随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
@@ -9310,7 +9659,7 @@ input[data-scope='mention'][data-part='input'] {
   block-size: var(--xh-_checkbox-box);
   padding: 0;
   border: var(--xh-stroke-thin) solid var(--xh-checkbox-border, var(--xh-border-control));
-  border-radius: var(--xh-shape-inset);
+  border-radius: var(--xh-checkbox-radius, var(--xh-shape-inset));
   background: var(--xh-checkbox-bg, var(--xh-bg-canvas));
   color: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
   cursor: pointer;
@@ -9320,7 +9669,7 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 /* 半选与全选同样是「有值」，方框都得填上：
-   只填全选的话，半选那条横杠是实心底上的前景色（白），压在白画布上等于没画 */
+   只填全选的话，半选那条横杠是实心底上的前景色，压在同色画布上等于没画 */
 [data-scope='checkbox'][data-part='root'][data-state='checked'],
 [data-scope='checkbox'][data-part='root'][data-state='indeterminate'] {
   border-color: var(--xh-checkbox-border-checked, var(--xh-_checkbox-accent));
@@ -9354,11 +9703,11 @@ input[data-scope='mention'][data-part='input'] {
 /* —— 尺寸 —— */
 /* 缺省档写在上面的基础规则里 */
 [data-scope='checkbox'][data-part='root'][data-size='sm'] {
-  --xh-_checkbox-box: calc(var(--xh-control-indicator-size) - var(--xh-space-1));
+  --xh-_checkbox-box: var(--xh-control-indicator-sm);
 }
 
 [data-scope='checkbox'][data-part='root'][data-size='lg'] {
-  --xh-_checkbox-box: calc(var(--xh-control-indicator-size) + var(--xh-space-1));
+  --xh-_checkbox-box: var(--xh-control-indicator-lg);
 }
 
 [data-scope='checkbox'][data-part='indicator'] {
@@ -9387,7 +9736,9 @@ input[data-scope='mention'][data-part='input'] {
   display: none;
 }
 
-/* 半选画一条横杠盖住勾：aria-checked=mixed 在视觉上也得与「全选」分得开 */
+/* 半选换一枚横杠字形盖住勾：aria-checked=mixed 在视觉上也得与「全选」分得开。
+   横杠与勾同走字形令牌，作者换掉标记时两态一起换；此前这条是手画的几何盒
+   （60% × stroke-thick），同一页上会出现两种横杠 */
 [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate'] {
   position: relative;
   color: transparent;
@@ -9395,11 +9746,12 @@ input[data-scope='mention'][data-part='input'] {
 
 [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate']::after {
   position: absolute;
-  inline-size: 60%;
-  block-size: var(--xh-stroke-thick);
-  border-radius: var(--xh-shape-pill);
-  background: var(--xh-checkbox-indicator-fg, var(--xh-_checkbox-on-accent));
+  inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+  block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+  background-color: var(--xh-checkbox-indicator-fg, var(--xh-_checkbox-on-accent));
   content: '';
+  -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+  mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
 }
 
 /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox-group 的条目同一副样子 —— */
@@ -9423,6 +9775,14 @@ input[data-scope='mention'][data-part='input'] {
   user-select: none;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='checkbox'][data-part='root'][hidden],
+[data-scope='checkbox'][data-part='indicator'][hidden],
+[data-scope='checkbox'][data-part='label'][hidden] {
+  display: none;
+}
+
 /* styles/checkbox-group.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='checkbox-group'] {
@@ -9554,25 +9914,51 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 /* 全选格的三态：checked 打勾、indeterminate 打横杠、unchecked 留空。
-   indeterminate 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state */
-[data-scope='checkbox-group'][data-part='trigger'][data-state='checked']::before {
+   indeterminate 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state。
+
+   字形走 ::after 而不是画方框的那颗 ::before：mask 会把所在元素的描边与底色一并裁成
+   字形的轮廓，写在 ::before 上就等于把方框本身裁没了，只剩一枚白勾。条目那一侧是
+   真实节点当方框、它的 ::before 当字形的两层结构，这里 anatomy 到 trigger 为止、
+   没有第二个节点，只能用第二个伪元素补上那一层。
+   方框是行首那颗 ::before、宽度即指示符尺寸，所以字形按「盒与字形的宽度差之半」
+   内推即落在圆心；纵向靠 inset-block: 0 + margin-block: auto 居中。
+   font-size 与 ::before 同值，--xh-icon-size 的 1em 兜底才和条目那侧量得一样大 */
+[data-scope='checkbox-group'][data-part='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-checkbox-group-indicator-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-checkbox-group-indicator-fg, var(--xh-fg-on-brand));
+  font-size: var(--xh-checkbox-group-indicator-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='checkbox-group'][data-part='trigger'][data-state='indeterminate']::before {
+[data-scope='checkbox-group'][data-part='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-checkbox-group-indicator-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-checkbox-group-indicator-fg, var(--xh-fg-on-brand));
+  font-size: var(--xh-checkbox-group-indicator-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;
 }
@@ -9589,8 +9975,10 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 /* 全选格与条目同形，但字重加一档，读起来才不像又一个普通选项。
-   它是普通元素而非原生控件（三态只有非原生控件表达得出），禁用态同样只能读 data-disabled */
+   它是普通元素而非原生控件（三态只有非原生控件表达得出），禁用态同样只能读 data-disabled。
+   position 是给叠在方框上的那颗字形 ::after 当定位基准 */
 [data-scope='checkbox-group'][data-part='trigger'] {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--xh-checkbox-group-trigger-gap, var(--xh-control-gap-md));
@@ -9877,7 +10265,7 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_collapsible-trigger-h: var(--xh-control-h-md);
   --xh-_collapsible-trigger-px: var(--xh-control-px-md);
   --xh-_collapsible-trigger-gap: var(--xh-control-gap-md);
-  --xh-_collapsible-trigger-font-size: var(--xh-text-label-size);
+  --xh-_collapsible-trigger-font-size: var(--xh-control-font-md);
 }
 
 /* —— 尺寸 —— */
@@ -9971,6 +10359,12 @@ input[data-scope='mention'][data-part='input'] {
   }
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='collapsible'][data-part='trigger'][hidden] {
+  display: none;
+}
+
 /* styles/color-picker.css */
 @keyframes xh-pop-in {
   from {
@@ -10011,7 +10405,7 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_color-picker-h: var(--xh-control-h-md);
   --xh-_color-picker-px: var(--xh-control-px-md);
   --xh-_color-picker-gap: var(--xh-control-gap-md);
-  --xh-_color-picker-label-font-size: var(--xh-text-label-size);
+  --xh-_color-picker-label-font-size: var(--xh-control-font-md);
 
   /* 聚焦环恒用固定环色 */
   --xh-_color-picker-ring: var(--xh-ring-focus);
@@ -10021,6 +10415,23 @@ input[data-scope='mention'][data-part='input'] {
   gap: var(--xh-color-picker-gap, var(--xh-space-1));
 }
 
+/* —— 尺寸 —— */
+/* 缺省档写在上面的基础规则里。浮层那一侧也要挂：positioner 被搬到 portal 落点，
+   继承不到根上的私有槽，所以两个部件一起收 */
+[data-scope='color-picker']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
+  --xh-_color-picker-h: var(--xh-control-h-sm);
+  --xh-_color-picker-px: var(--xh-control-px-sm);
+  --xh-_color-picker-gap: var(--xh-control-gap-sm);
+  --xh-_color-picker-label-font-size: var(--xh-control-font-sm);
+}
+
+[data-scope='color-picker']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
+  --xh-_color-picker-h: var(--xh-control-h-lg);
+  --xh-_color-picker-px: var(--xh-control-px-lg);
+  --xh-_color-picker-gap: var(--xh-control-gap-lg);
+  --xh-_color-picker-label-font-size: var(--xh-control-font-lg);
+}
+
 [data-scope='color-picker'][data-part='label'] {
   color: var(--xh-color-picker-label-fg, var(--xh-fg-default));
   font-size: var(--xh-color-picker-label-font-size, var(--xh-_color-picker-label-font-size));
@@ -10132,6 +10543,9 @@ input[data-scope='mention'][data-part='input'] {
      引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
   --xh-_color-picker-available-h: 100vh;
 
+  /* 面板的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊出一条竖灰带 */
+  --xh-scrollbar-track-bg: transparent;
+
   position: fixed;
   z-index: var(--xh-color-picker-layer, var(--xh-layer-popover));
   /* 空壳不吃指针，交互只发生在 content 上 */
@@ -10427,7 +10841,7 @@ input[data-scope='mention'][data-part='input'] {
   inline-size: var(--xh-color-picker-swatch-item-size, 1.25rem);
   block-size: var(--xh-color-picker-swatch-item-size, 1.25rem);
   padding: 0;
-  border: var(--xh-stroke-thin) solid var(--xh-color-picker-swatch-border, var(--xh-border-control));
+  border: var(--xh-stroke-thin) solid var(--xh-color-picker-swatch-border, var(--xh-border-default));
   border-radius: var(--xh-color-picker-swatch-radius, var(--xh-shape-inset));
   cursor: pointer;
 }
@@ -10517,6 +10931,9 @@ input[data-scope='mention'][data-part='input'] {
      引擎没算（尚未落位 / 无引擎）时不额外限高 */
   --xh-_combobox-available-h: 100vh;
 
+  /* 候选列表的自绘条浮在内容之上：轨道不上底色，实色轨道会在列表右缘糊一条竖灰带 */
+  --xh-scrollbar-track-bg: transparent;
+
   position: fixed;
   z-index: var(--xh-combobox-layer, var(--xh-layer-popover));
   /* 空壳不吃指针，交互只发生在 content 与 empty 上 */
@@ -10534,9 +10951,11 @@ input[data-scope='mention'][data-part='input'] {
      换档不必给每个部件各写一条选择器 */
   --xh-_combobox-h: var(--xh-control-h-md);
   --xh-_combobox-px: var(--xh-control-px-md);
+  --xh-_combobox-item-py: var(--xh-list-option-py-md);
+  --xh-_combobox-item-px: var(--xh-control-px-md);
   --xh-_combobox-gap: var(--xh-control-gap-md);
-  --xh-_combobox-font-size: var(--xh-text-body-size);
-  --xh-_combobox-label-font-size: var(--xh-text-label-size);
+  --xh-_combobox-font-size: var(--xh-control-font-md);
+  --xh-_combobox-label-font-size: var(--xh-control-font-md);
 
   /* 作者塞进指示符槽的图标跟着控件的尺寸档走；它自己写了 size 时仍以作者的为准 */
   --xh-icon-size: var(--xh-combobox-icon-size, var(--xh-glyph-size-md));
@@ -10549,7 +10968,7 @@ input[data-scope='mention'][data-part='input'] {
   /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
      没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
   --xh-_combobox-ring: var(--xh-ring-focus);
-  --xh-_combobox-accent: var(--xh-_tone, var(--xh-bg-brand));
+  --xh-_combobox-accent: var(--xh-_tone, var(--xh-fg-brand));
   --xh-_combobox-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 }
 
@@ -10569,6 +10988,8 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='combobox']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
   --xh-_combobox-h: var(--xh-control-h-sm);
   --xh-_combobox-px: var(--xh-control-px-sm);
+  --xh-_combobox-item-py: var(--xh-list-option-py-sm);
+  --xh-_combobox-item-px: var(--xh-control-px-sm);
   --xh-_combobox-gap: var(--xh-control-gap-sm);
   --xh-_combobox-font-size: var(--xh-control-font-sm);
   --xh-_combobox-label-font-size: var(--xh-control-font-sm);
@@ -10579,6 +11000,8 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='combobox']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
   --xh-_combobox-h: var(--xh-control-h-lg);
   --xh-_combobox-px: var(--xh-control-px-lg);
+  --xh-_combobox-item-py: var(--xh-list-option-py-lg);
+  --xh-_combobox-item-px: var(--xh-control-px-lg);
   --xh-_combobox-gap: var(--xh-control-gap-lg);
   --xh-_combobox-font-size: var(--xh-control-font-lg);
   --xh-_combobox-label-font-size: var(--xh-control-font-lg);
@@ -10697,7 +11120,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='combobox'][data-part='control']:has([data-part='input'][data-multiline]) {
   align-items: start;
   block-size: auto;
-  padding-block: var(--xh-field-py);
+  padding-block: var(--xh-combobox-input-py, var(--xh-field-py));
 }
 
 [data-scope='combobox'][data-part='input'][data-multiline] {
@@ -10810,6 +11233,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='combobox'][data-part='content'] {
   display: flex;
   flex-direction: column;
+  gap: var(--xh-combobox-content-gap, var(--xh-list-option-gap));
   min-inline-size: var(--xh-combobox-content-min-w, var(--xh-overlay-min-w));
   max-inline-size: var(--xh-combobox-content-max-w, var(--xh-overlay-max-w));
   max-block-size: min(var(--xh-combobox-content-max-h, var(--xh-overlay-max-h)), var(--xh-_combobox-available-h));
@@ -10849,6 +11273,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='combobox'][data-part='item-group'] {
   display: flex;
   flex-direction: column;
+  gap: var(--xh-combobox-item-group-gap, var(--xh-list-option-gap));
 }
 
 [data-scope='combobox'][data-part='item-group'][hidden] {
@@ -10857,7 +11282,7 @@ input[data-scope='mention'][data-part='input'] {
 
 /* 组间留白只加在后继分组上：首组顶上已经有 content 的内边距，再加一层会显得头重 */
 [data-scope='combobox'][data-part='item-group'] + [data-scope='combobox'][data-part='item-group'] {
-  margin-block-start: var(--xh-combobox-group-gap, var(--xh-space-2));
+  margin-block-start: var(--xh-combobox-group-gap, var(--xh-space-1_5));
 }
 
 /* 分组标题不是候选、进不了导航，画成小号次要文字，内缩与候选对齐（同一个 padding-inline） */
@@ -10880,8 +11305,8 @@ input[data-scope='mention'][data-part='input'] {
   display: flex;
   align-items: center;
   gap: var(--xh-combobox-item-gap, var(--xh-_combobox-gap));
-  padding-block: var(--xh-combobox-item-py, var(--xh-space-1_5));
-  padding-inline: var(--xh-combobox-item-px, var(--xh-control-px-md));
+  padding-block: var(--xh-combobox-item-py, var(--xh-_combobox-item-py));
+  padding-inline: var(--xh-combobox-item-px, var(--xh-_combobox-item-px));
   border-radius: var(--xh-combobox-item-radius, var(--xh-shape-control));
   color: var(--xh-combobox-item-fg, var(--xh-fg-default));
   font-size: var(--xh-combobox-item-font-size, var(--xh-_combobox-font-size));
@@ -11139,6 +11564,9 @@ input[data-scope='mention'][data-part='input'] {
      引擎没算（尚未落位 / 无引擎）时不额外限高 */
   --xh-_context-menu-available-h: 100vh;
 
+  /* 条目列表的自绘条浮在内容之上：轨道不上底色，实色轨道会在菜单右缘糊一条竖灰带 */
+  --xh-scrollbar-track-bg: transparent;
+
   position: fixed;
   z-index: var(--xh-context-menu-layer, var(--xh-layer-popover));
   /* 空壳不吃指针，交互只发生在 content 上 */
@@ -11154,10 +11582,10 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='context-menu']:is([data-part='root'], [data-part='positioner']) {
   /* 尺寸档只换这四个私有槽，条目与分组标题都从这两处继承它们，
      换档不必给每个部件各写一条选择器 */
-  --xh-_context-menu-item-py: var(--xh-space-1_5);
+  --xh-_context-menu-item-py: var(--xh-list-option-py-md);
   --xh-_context-menu-item-px: var(--xh-control-px-md);
   --xh-_context-menu-item-gap: var(--xh-control-gap-md);
-  --xh-_context-menu-font-size: var(--xh-text-body-size);
+  --xh-_context-menu-font-size: var(--xh-control-font-md);
 
   /* 打开子菜单的触发条目走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底。
      悬停与键盘焦点恒中性灰轻档、不接语气槽——两档同色相的话打开路径就认不出来了 */
@@ -11172,6 +11600,12 @@ input[data-scope='mention'][data-part='input'] {
   display: contents;
 }
 
+/* 浮层被搬到 portal 落点，继承不到 root 上的槽：这把尺在被搬走的那一侧再声明一次，
+   关闭钮与条目里作者塞的图标才和皮肤画的兜底字形一样大 */
+[data-scope='context-menu'][data-part='content'] {
+  --xh-icon-size: var(--xh-context-menu-icon-size, var(--xh-glyph-size-text));
+}
+
 [data-scope='context-menu'][data-part='root'][hidden] {
   display: none;
 }
@@ -11180,14 +11614,14 @@ input[data-scope='mention'][data-part='input'] {
 /* 缺省档写在上面的基础规则里。条目高度由 padding 撑出来：
    纵向走 space 档、行内内缩走 control-px 档（随密度轴），换档各挪一级 */
 [data-scope='context-menu']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
-  --xh-_context-menu-item-py: var(--xh-space-1);
+  --xh-_context-menu-item-py: var(--xh-list-option-py-sm);
   --xh-_context-menu-item-px: var(--xh-control-px-sm);
   --xh-_context-menu-item-gap: var(--xh-control-gap-sm);
   --xh-_context-menu-font-size: var(--xh-control-font-sm);
 }
 
 [data-scope='context-menu']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
-  --xh-_context-menu-item-py: var(--xh-space-2);
+  --xh-_context-menu-item-py: var(--xh-list-option-py-lg);
   --xh-_context-menu-item-px: var(--xh-control-px-lg);
   --xh-_context-menu-item-gap: var(--xh-control-gap-lg);
   --xh-_context-menu-font-size: var(--xh-control-font-lg);
@@ -11208,6 +11642,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='context-menu'][data-part='content'] {
   display: flex;
   flex-direction: column;
+  gap: var(--xh-context-menu-content-gap, var(--xh-list-option-gap));
   min-inline-size: var(--xh-context-menu-min-w, var(--xh-overlay-menu-min-w));
   max-inline-size: var(--xh-context-menu-max-w, var(--xh-overlay-max-w));
   /* 两道上限取更小的那道：自己的高度上限，以及落定那一侧真正剩下的空间。
@@ -11257,6 +11692,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='context-menu'][data-part='group'] {
   display: flex;
   flex-direction: column;
+  gap: var(--xh-context-menu-group-gap, var(--xh-list-option-gap));
 }
 
 [data-scope='context-menu'][data-part='group'][hidden] {
@@ -11370,7 +11806,7 @@ input[data-scope='mention'][data-part='input'] {
   align-items: center;
   justify-content: center;
   inline-size: var(--xh-context-menu-item-indicator-size, var(--xh-control-indicator-size));
-  color: var(--xh-context-menu-item-indicator-fg, var(--xh-fg-brand));
+  color: var(--xh-context-menu-item-indicator-fg, var(--xh-_tone, var(--xh-fg-brand)));
 }
 
 [data-scope='context-menu'][data-part='item-indicator'][hidden] {
@@ -11383,7 +11819,7 @@ input[data-scope='mention'][data-part='input'] {
 
 [data-scope='context-menu'][data-part='separator'] {
   block-size: var(--xh-context-menu-separator-thickness, var(--xh-stroke-thin));
-  margin-block: var(--xh-context-menu-separator-my, var(--xh-space-1));
+  margin-block: var(--xh-context-menu-separator-my, var(--xh-space-0_5));
   background: var(--xh-context-menu-separator-color, var(--xh-border-default));
 }
 
@@ -11459,8 +11895,8 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_date-field-control-h: var(--xh-control-h-md);
   --xh-_date-field-control-px: var(--xh-control-px-md);
   --xh-_date-field-gap: var(--xh-control-gap-md);
-  --xh-_date-field-font-size: var(--xh-text-body-size);
-  --xh-_date-field-label-font-size: var(--xh-text-label-size);
+  --xh-_date-field-font-size: var(--xh-control-font-md);
+  --xh-_date-field-label-font-size: var(--xh-control-font-md);
   /* 形态档只换这三个私有槽：底色与两档描边 */
   --xh-_date-field-control-bg: var(--xh-bg-canvas);
   --xh-_date-field-control-border: var(--xh-border-control);
@@ -11738,6 +12174,9 @@ input[data-scope='mention'][data-part='input'] {
      引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
   --xh-_date-picker-available-h: 100vh;
 
+  /* 面板的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊出一条竖灰带 */
+  --xh-scrollbar-track-bg: transparent;
+
   position: fixed;
   z-index: var(--xh-date-picker-layer, var(--xh-layer-popover));
   /* 空壳不吃指针，交互只发生在 content 里 */
@@ -11756,8 +12195,8 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_date-picker-control-h: var(--xh-control-h-md);
   --xh-_date-picker-control-px: var(--xh-control-px-md);
   --xh-_date-picker-gap: var(--xh-control-gap-md);
-  --xh-_date-picker-font-size: var(--xh-text-body-size);
-  --xh-_date-picker-label-font-size: var(--xh-text-label-size);
+  --xh-_date-picker-font-size: var(--xh-control-font-md);
+  --xh-_date-picker-label-font-size: var(--xh-control-font-md);
 
   /* 形态档只换这三个私有槽：底色与两档描边 */
   --xh-_date-picker-control-bg: var(--xh-bg-canvas);
@@ -12053,6 +12492,11 @@ input[data-scope='mention'][data-part='input'] {
   border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-panel-divider, var(--xh-border-subtle));
 }
 
+/* 快捷选项列与它旁边那张日历之间留出同样的空当，两道分隔线左右对称 */
+[data-scope='date-picker'][data-part='presets'] + [data-scope='date-picker'][data-part='calendar'] {
+  padding-inline-start: var(--xh-date-picker-panel-gap, var(--xh-space-3));
+}
+
 [data-scope='date-picker'][data-part='calendar'] {
   display: flex;
   flex-direction: column;
@@ -12069,13 +12513,15 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='date-picker'][data-part='presets'] {
   display: flex;
   flex: none;
+  /* 这一列的高度由并排的日历给：不写就按内容收，右侧那道分隔线只画到最后一条选项 */
+  align-self: stretch;
   flex-direction: column;
-  gap: var(--xh-date-picker-presets-gap, var(--xh-space-0_5));
+  gap: var(--xh-date-picker-presets-gap, var(--xh-list-option-gap));
   /* 选项多起来时这一列自己滚，不把整张面板撑高 */
-  max-block-size: var(--xh-date-picker-presets-h, var(--xh-viewport-h-sm));
-  padding: var(--xh-space-1);
+  max-block-size: var(--xh-date-picker-presets-h, var(--xh-viewport-h-lg));
+  padding: var(--xh-date-picker-presets-padding, var(--xh-space-1));
   overflow-y: auto;
-  border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-picker-content-border, var(--xh-border-default));
+  border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-border-subtle));
 }
 
 [data-scope='date-picker'][data-part='presets'][hidden] {
@@ -12083,9 +12529,9 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 [data-scope='date-picker'][data-part='preset'] {
-  padding-block: var(--xh-space-1);
-  padding-inline: var(--xh-space-3);
-  border-radius: var(--xh-shape-control);
+  padding-block: var(--xh-date-picker-preset-py, var(--xh-space-1));
+  padding-inline: var(--xh-date-picker-preset-px, var(--xh-space-3));
+  border-radius: var(--xh-date-picker-preset-radius, var(--xh-shape-control));
   font-size: var(--xh-text-secondary-size);
   line-height: var(--xh-leading-normal);
   white-space: nowrap;
@@ -12120,12 +12566,12 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='date-picker'][data-part='time-column'] {
   display: flex;
   flex-direction: column;
-  gap: var(--xh-date-picker-time-column-gap, var(--xh-space-0_5));
+  gap: var(--xh-date-picker-time-column-gap, var(--xh-list-option-gap));
   /* 几列并排：定高而不是随内容收，否则时列与分列的可选值一多一少就错位 */
   block-size: var(--xh-date-picker-time-column-h, var(--xh-viewport-h-sm));
-  padding: var(--xh-space-1);
+  padding: var(--xh-date-picker-time-column-padding, var(--xh-space-1));
   overflow-y: auto;
-  border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-content-border, var(--xh-border-default));
+  border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-border-subtle));
 }
 
 [data-scope='date-picker'][data-part='time-column'][hidden] {
@@ -12133,9 +12579,9 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 [data-scope='date-picker'][data-part='time-item'] {
-  padding-block: var(--xh-space-1);
-  padding-inline: var(--xh-space-3);
-  border-radius: var(--xh-shape-control);
+  padding-block: var(--xh-date-picker-time-item-py, var(--xh-space-1));
+  padding-inline: var(--xh-date-picker-time-item-px, var(--xh-space-3));
+  border-radius: var(--xh-date-picker-time-item-radius, var(--xh-shape-control));
   font-size: var(--xh-text-secondary-size);
   line-height: var(--xh-leading-normal);
   text-align: center;
@@ -12165,9 +12611,9 @@ input[data-scope='mention'][data-part='input'] {
   align-items: center;
   justify-content: center;
   block-size: var(--xh-control-h-sm);
-  padding-inline: var(--xh-control-px-sm);
+  padding-inline: var(--xh-date-picker-confirm-trigger-px, var(--xh-control-px-sm));
   border: none;
-  border-radius: var(--xh-shape-control);
+  border-radius: var(--xh-date-picker-confirm-trigger-radius, var(--xh-shape-control));
   background: var(--xh-date-picker-confirm-bg, var(--xh-_date-picker-accent));
   color: var(--xh-date-picker-confirm-fg, var(--xh-_date-picker-accent-fg));
   font-size: var(--xh-text-secondary-size);
@@ -12315,7 +12761,7 @@ input[data-scope='mention'][data-part='input'] {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--xh-space-4);
+  padding: var(--xh-dialog-positioner-padding, var(--xh-space-4));
 }
 
 [data-scope='dialog'][data-part='positioner'][data-position='top'] {
@@ -12446,6 +12892,12 @@ input[data-scope='mention'][data-part='input'] {
   mask: var(--xh-glyph-mark-close) center / contain no-repeat;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='dialog'][data-part='positioner'][hidden] {
+  display: none;
+}
+
 /* styles/drawer.css */
 /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
    动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
@@ -12570,6 +13022,12 @@ input[data-scope='mention'][data-part='input'] {
   display: contents;
 }
 
+/* 浮层被搬到 portal 落点，继承不到 root 上的槽：这把尺在被搬走的那一侧再声明一次，
+   关闭钮与条目里作者塞的图标才和皮肤画的兜底字形一样大 */
+[data-scope='drawer'][data-part='content'] {
+  --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-text));
+}
+
 /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，作者手写 hidden 时得还回去 */
 [data-scope='drawer'][data-part='root'][hidden] {
   display: none;
@@ -12630,11 +13088,14 @@ input[data-scope='mention'][data-part='input'] {
   background: var(--xh-drawer-backdrop-bg, var(--xh-bg-overlay));
 }
 
-/* 挂在局部容器里：遮罩与定位层从视口坐标换成容器坐标，只罩住那个容器。
+/* 挂在局部容器里：遮罩、定位层与面板一起从视口坐标换成容器坐标，只罩住那个容器。
    作者要给那个容器加 position（relative 之类），否则 absolute 会往上找到别的定位祖先——
-   这一条写进了示例与 props 说明 */
+   这一条写进了示例与 props 说明。
+   content 必须一起换：它的贴边是 inset-block/inline 参照包含块算的，留在 fixed 上就会
+   照旧贴视口边，遮罩缩进容器、面板却跑到屏幕边上——与 contained 的承诺正好相反 */
 [data-scope='drawer'][data-part='backdrop'][data-contained],
-[data-scope='drawer'][data-part='positioner'][data-contained] {
+[data-scope='drawer'][data-part='positioner'][data-contained],
+[data-scope='drawer'][data-part='content'][data-contained] {
   position: absolute;
 }
 
@@ -12660,8 +13121,9 @@ input[data-scope='mention'][data-part='input'] {
 /* 贴边写在 content 自己身上，而不是交给 positioner：
    positioner 在抽屉里不是必需部件，最小合规结构只有 root + content，
    贴边若挂在 positioner 上，那种结构下面板会直接塌回文档流。
-   content 是 fixed，包住它的 positioner 没有 transform / filter，
-   不构成固定定位的包含块，两种结构下参照的都是视口，位置一致。 */
+   非 contained 时 content 是 fixed，包住它的 positioner 没有 transform / filter，
+   不构成固定定位的包含块，两种结构下参照的都是视口，位置一致；
+   contained 时上面那条把它一并换成 absolute，参照的就是作者那个容器。 */
 [data-scope='drawer'][data-part='content'] {
   /* 位移方向的私有槽位：默认按 LTR，RTL 在下面整体翻符号 */
   --xh-_drawer-shift-inline: 100%;
@@ -13228,6 +13690,13 @@ input[data-scope='mention'][data-part='input'] {
   line-height: var(--xh-leading-normal);
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='field'][data-part='root'][hidden],
+[data-scope='form'][data-part='root'][hidden] {
+  display: none;
+}
+
 /* styles/file-upload.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='file-upload'] {
@@ -13423,7 +13892,7 @@ input[data-scope='mention'][data-part='input'] {
    只挑图标色不换底色：底色一换，一列文件里图片那几行会跳出来抢戏。
    取语义 token 而不是品牌色阶原值，深色主题才跟着走 */
 [data-scope='file-upload'][data-part='item-preview'][data-file-type^='image/'] {
-  color: var(--xh-file-upload-preview-fg-image, var(--xh-bg-brand));
+  color: var(--xh-file-upload-preview-fg-image, var(--xh-fg-brand));
 }
 
 /* 塞进来的真缩略图撑满这个方框，长宽比不对就裁掉，不许把格子顶变形 */
@@ -13836,6 +14305,9 @@ input[data-scope='mention'][data-part='input'] {
      引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
   --xh-_hover-card-available-h: 100vh;
 
+  /* 卡片内容的自绘条浮在内容之上：轨道不上底色，实色轨道会在卡片右缘糊一条竖灰带 */
+  --xh-scrollbar-track-bg: transparent;
+
   position: fixed;
   z-index: var(--xh-hover-card-layer, var(--xh-layer-popover));
   /* 空壳不吃指针：trigger 与 content 之间那段间隙要能点得穿，
@@ -14088,6 +14560,10 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 [data-scope='image-viewer'][data-part='content'] {
+  /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+     既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+  isolation: isolate;
+
   /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
   --xh-icon-size: var(--xh-image-viewer-icon-size, var(--xh-glyph-size-text));
 
@@ -14148,7 +14624,7 @@ input[data-scope='mention'][data-part='input'] {
   background: var(--xh-image-viewer-chrome-bg, color-mix(in oklab, var(--xh-color-neutral-950) 55%, transparent));
   color: inherit;
   border: none;
-  border-radius: var(--xh-shape-pill);
+  border-radius: var(--xh-image-viewer-overlay-radius, var(--xh-shape-pill));
 }
 
 [data-scope='image-viewer'][data-part='toolbar'] {
@@ -14157,8 +14633,8 @@ input[data-scope='mention'][data-part='input'] {
   translate: -50% 0;
   display: flex;
   align-items: center;
-  gap: var(--xh-space-1);
-  padding: var(--xh-space-1_5) var(--xh-space-3);
+  gap: var(--xh-image-viewer-toolbar-gap, var(--xh-space-1));
+  padding: var(--xh-image-viewer-toolbar-padding, var(--xh-space-1_5) var(--xh-space-3));
 }
 
 /* 工具条里的按钮：底色交给工具条，本体只管命中区 */
@@ -14171,7 +14647,7 @@ input[data-scope='mention'][data-part='input'] {
   block-size: var(--xh-control-action-size);
   background: none;
   border: none;
-  border-radius: var(--xh-shape-control);
+  border-radius: var(--xh-image-viewer-toolbar-radius, var(--xh-shape-control));
   color: inherit;
   font-size: var(--xh-glyph-size-sm);
   cursor: pointer;
@@ -14181,7 +14657,7 @@ input[data-scope='mention'][data-part='input'] {
   inset-block-start: var(--xh-space-6);
   inset-inline-start: 50%;
   translate: -50% 0;
-  padding: var(--xh-space-1) var(--xh-space-3);
+  padding: var(--xh-image-viewer-counter-padding, var(--xh-space-1) var(--xh-space-3));
   font-size: var(--xh-text-secondary-size);
 }
 
@@ -14353,6 +14829,15 @@ input[data-scope='mention'][data-part='input'] {
   mask: var(--xh-glyph-mark-close) center / contain no-repeat;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='image-viewer'][data-part='positioner'][hidden],
+[data-scope='image-viewer'][data-part='viewport'][hidden],
+[data-scope='image-viewer'][data-part='toolbar'][hidden],
+[data-scope='image-viewer'][data-part='next-trigger'][hidden] {
+  display: none;
+}
+
 /* styles/listbox.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='listbox'] {
@@ -14389,6 +14874,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='listbox'][data-part='content'] {
   display: flex;
   flex-direction: column;
+  gap: var(--xh-listbox-content-gap, var(--xh-list-option-gap));
   max-block-size: var(--xh-listbox-content-max-h, var(--xh-viewport-h-md));
   padding-block: var(--xh-listbox-content-py, var(--xh-space-1));
   padding-inline: var(--xh-listbox-content-px, var(--xh-space-1));
@@ -14421,6 +14907,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='listbox'][data-part='item-group'] {
   display: flex;
   flex-direction: column;
+  gap: var(--xh-listbox-item-group-gap, var(--xh-list-option-gap));
 }
 
 [data-scope='listbox'][data-part='item-group'][hidden] {
@@ -14429,7 +14916,7 @@ input[data-scope='mention'][data-part='input'] {
 
 /* 组间留白只加在后继分组上：首组顶上已经有 content 的内边距，再加一层会显得头重 */
 [data-scope='listbox'][data-part='item-group'] + [data-scope='listbox'][data-part='item-group'] {
-  margin-block-start: var(--xh-listbox-group-gap, var(--xh-space-2));
+  margin-block-start: var(--xh-listbox-group-gap, var(--xh-space-1_5));
 }
 
 /* 分组标题不是选项、进不了导航，画成小号次要文字，
@@ -14523,7 +15010,7 @@ input[data-scope='mention'][data-part='input'] {
   align-items: center;
   justify-content: center;
   inline-size: var(--xh-listbox-item-indicator-size, var(--xh-control-indicator-size));
-  color: var(--xh-listbox-item-indicator-fg, var(--xh-bg-brand));
+  color: var(--xh-listbox-item-indicator-fg, var(--xh-fg-brand));
   visibility: hidden;
 }
 
@@ -14584,8 +15071,9 @@ input[data-scope='mention'][data-part='input'] {
   display: none;
 }
 
-/* 冲到 100 之后进入淡出：机器会在淡出窗口走完之前一直停在 finishing，
-   这段过渡才有时间跑完；窗口与时长两处默认值都是 200ms，改一处记得对齐另一处 */
+/* 冲到 100 之后进入淡出：机器会在淡出窗口走完之前一直停在 finishing，这段过渡才有时间跑完。
+   窗口（machine 的 LOADING_BAR_FADE_DURATION，200ms）比过渡本身（motion-duration-exit，120ms）
+   宽出一截是有意的余量；两者不是同一个数，改窗口时只要保证它仍不短于过渡 */
 [data-scope='loading-bar'][data-part='root'][data-state='finishing'] {
   opacity: 0;
 }
@@ -14603,8 +15091,8 @@ input[data-scope='mention'][data-part='input'] {
  * 进度段。宽度那条轴（inline-size）由连接层写进内联样式，这里绝不重复写。
  * 背景色同理：给了 color 就走内联，盖过下面这条。
  *
- * 语气取柔和档 --xh-_tone-soft（500）而不是 --xh-_tone（600）：600 是给实心底与
- * 文字用的强调档，压在这么一条细带上偏重。槽位由 root 上的 data-tone 声明，继承下来。
+ * 语气取装饰档 --xh-_tone-soft：那一档压在画布上够 3:1，细带才看得出来。
+ * 槽位由 root 上的 data-tone 声明，继承下来。
  * 没写 data-tone 时该槽没被声明，退回原来的品牌色。
  */
 [data-scope='loading-bar'][data-part='range'] {
@@ -14665,6 +15153,9 @@ input[data-scope='mention'][data-part='input'] {
      引擎没算（尚未落位 / 无引擎）时不额外限高 */
   --xh-_menu-available-h: 100vh;
 
+  /* 条目列表的自绘条浮在内容之上：轨道不上底色，实色轨道会在菜单右缘糊一条竖灰带 */
+  --xh-scrollbar-track-bg: transparent;
+
   position: fixed;
   z-index: var(--xh-menu-layer, var(--xh-layer-popover));
   /* 空壳不吃指针，交互只发生在 content 上 */
@@ -14695,10 +15186,10 @@ input[data-scope='mention'][data-part='input'] {
 
   /* 尺寸档只换这四个私有槽，条目从 content 继承它们，换档不必给每个部件各写一条选择器。
      菜单没有 root 部件（浮层树的最外层就是 content），三轴属性都落在这里 */
-  --xh-_menu-item-py: var(--xh-space-1_5);
+  --xh-_menu-item-py: var(--xh-list-option-py-md);
   --xh-_menu-item-px: var(--xh-control-px-md);
   --xh-_menu-item-gap: var(--xh-control-gap-md);
-  --xh-_menu-font-size: var(--xh-text-body-size);
+  --xh-_menu-font-size: var(--xh-control-font-md);
 
   /* 打开子菜单的触发条目走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底。
      悬停与键盘焦点恒中性灰轻档、不接语气槽——两档同色相的话打开路径就认不出来了 */
@@ -14706,6 +15197,7 @@ input[data-scope='mention'][data-part='input'] {
 
   display: flex;
   flex-direction: column;
+  gap: var(--xh-menu-content-gap, var(--xh-list-option-gap));
   min-inline-size: var(--xh-menu-min-w, var(--xh-overlay-menu-min-w));
   max-inline-size: var(--xh-menu-max-w, var(--xh-overlay-max-w));
   /* 两道上限取更小的那道：自己的高度上限，以及落定那一侧真正剩下的空间。
@@ -14748,14 +15240,14 @@ input[data-scope='mention'][data-part='input'] {
 /* 缺省档写在 content 的基础规则里。条目高度由 padding 撑出来：
    纵向走 space 档、行内内缩走 control-px 档（随密度轴），换档各挪一级 */
 [data-scope='menu'][data-part='content'][data-size='sm'] {
-  --xh-_menu-item-py: var(--xh-space-1);
+  --xh-_menu-item-py: var(--xh-list-option-py-sm);
   --xh-_menu-item-px: var(--xh-control-px-sm);
   --xh-_menu-item-gap: var(--xh-control-gap-sm);
   --xh-_menu-font-size: var(--xh-control-font-sm);
 }
 
 [data-scope='menu'][data-part='content'][data-size='lg'] {
-  --xh-_menu-item-py: var(--xh-space-2);
+  --xh-_menu-item-py: var(--xh-list-option-py-lg);
   --xh-_menu-item-px: var(--xh-control-px-lg);
   --xh-_menu-item-gap: var(--xh-control-gap-lg);
   --xh-_menu-font-size: var(--xh-control-font-lg);
@@ -14828,6 +15320,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='menu'][data-part='group'] {
   display: flex;
   flex-direction: column;
+  gap: var(--xh-menu-group-gap, var(--xh-list-option-gap));
 }
 
 [data-scope='menu'][data-part='group'][hidden] {
@@ -14853,7 +15346,7 @@ input[data-scope='mention'][data-part='input'] {
 
 [data-scope='menu'][data-part='separator'] {
   block-size: var(--xh-menu-separator-thickness, var(--xh-stroke-thin));
-  margin-block: var(--xh-menu-separator-my, var(--xh-space-1));
+  margin-block: var(--xh-menu-separator-my, var(--xh-space-0_5));
   background: var(--xh-menu-separator-color, var(--xh-border-default));
 }
 
@@ -14870,6 +15363,12 @@ input[data-scope='mention'][data-part='input'] {
   border: var(--xh-stroke-thin) solid var(--xh-menu-border, var(--xh-border-default));
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='menu'][data-part='item'][hidden] {
+  display: none;
+}
+
 /* styles/menubar.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='menubar'] {
@@ -14891,6 +15390,12 @@ input[data-scope='mention'][data-part='input'] {
   color: var(--xh-menubar-root-fg, var(--xh-fg-default));
 }
 
+/* 浮层被搬到 portal 落点，继承不到 root 上的槽：这把尺在被搬走的那一侧再声明一次，
+   关闭钮与条目里作者塞的图标才和皮肤画的兜底字形一样大 */
+[data-scope='menubar'][data-part='content'] {
+  --xh-icon-size: var(--xh-menubar-icon-size, var(--xh-glyph-size-text));
+}
+
 [data-scope='menubar'][data-part='root'][hidden] {
   display: none;
 }
@@ -14983,10 +15488,10 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='menubar']:is([data-part='root'], [data-part='positioner']) {
   --xh-_menubar-trigger-py: var(--xh-space-1);
   --xh-_menubar-trigger-px: var(--xh-control-px-md);
-  --xh-_menubar-item-py: var(--xh-space-1_5);
+  --xh-_menubar-item-py: var(--xh-list-option-py-md);
   --xh-_menubar-item-px: var(--xh-control-px-md);
   --xh-_menubar-item-gap: var(--xh-control-gap-md);
-  --xh-_menubar-font-size: var(--xh-text-body-size);
+  --xh-_menubar-font-size: var(--xh-control-font-md);
 
   /* 展开着的那张菜单的 trigger 走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底。
      悬停与键盘焦点恒中性灰轻档、不接语气槽——两档同色相的话哪张开着就认不出来了。
@@ -15000,7 +15505,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='menubar'][data-size='sm']:is([data-part='root'], [data-part='positioner']) {
   --xh-_menubar-trigger-py: var(--xh-space-0_5);
   --xh-_menubar-trigger-px: var(--xh-control-px-sm);
-  --xh-_menubar-item-py: var(--xh-space-1);
+  --xh-_menubar-item-py: var(--xh-list-option-py-sm);
   --xh-_menubar-item-px: var(--xh-control-px-sm);
   --xh-_menubar-item-gap: var(--xh-control-gap-sm);
   --xh-_menubar-font-size: var(--xh-control-font-sm);
@@ -15009,7 +15514,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='menubar'][data-size='lg']:is([data-part='root'], [data-part='positioner']) {
   --xh-_menubar-trigger-py: var(--xh-space-2);
   --xh-_menubar-trigger-px: var(--xh-control-px-lg);
-  --xh-_menubar-item-py: var(--xh-space-2);
+  --xh-_menubar-item-py: var(--xh-list-option-py-lg);
   --xh-_menubar-item-px: var(--xh-control-px-lg);
   --xh-_menubar-item-gap: var(--xh-control-gap-lg);
   --xh-_menubar-font-size: var(--xh-control-font-lg);
@@ -15018,6 +15523,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='menubar'][data-part='content'] {
   display: flex;
   flex-direction: column;
+  gap: var(--xh-menubar-content-gap, var(--xh-list-option-gap));
   min-inline-size: var(--xh-menubar-min-w, var(--xh-overlay-menu-min-w));
   max-inline-size: var(--xh-menubar-max-w, var(--xh-overlay-max-w));
   /* 两道上限取更小的那道：自己的高度上限，以及落定那一侧真正剩下的空间。
@@ -15067,6 +15573,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='menubar'][data-part='group'] {
   display: flex;
   flex-direction: column;
+  gap: var(--xh-menubar-group-gap, var(--xh-list-option-gap));
 }
 
 [data-scope='menubar'][data-part='group'][hidden] {
@@ -15178,7 +15685,7 @@ input[data-scope='mention'][data-part='input'] {
   align-items: center;
   justify-content: center;
   inline-size: var(--xh-menubar-item-indicator-size, var(--xh-control-indicator-size));
-  color: var(--xh-menubar-item-indicator-fg, var(--xh-fg-brand));
+  color: var(--xh-menubar-item-indicator-fg, var(--xh-_tone, var(--xh-fg-brand)));
 }
 
 [data-scope='menubar'][data-part='item-indicator'][hidden] {
@@ -15193,7 +15700,7 @@ input[data-scope='mention'][data-part='input'] {
    不给 display，因此 UA 的 [hidden]{display:none} 自己就压得住 */
 [data-scope='menubar'][data-part='separator'] {
   block-size: var(--xh-menubar-separator-thickness, var(--xh-stroke-thin));
-  margin-block: var(--xh-menubar-separator-my, var(--xh-space-1));
+  margin-block: var(--xh-menubar-separator-my, var(--xh-space-0_5));
   background: var(--xh-menubar-separator-color, var(--xh-border-default));
 }
 
@@ -15271,13 +15778,13 @@ input[data-scope='mention'][data-part='input'] {
   /* 尺寸档只换这五个私有槽，trigger 与面板里的链接都从 root 继承它们，
      换档不必给每个部件各写一条选择器。面板与共享外壳都是 root 的后代，一并继承。
      trigger 写的是 font: inherit，字号跟着 root 这一档走，不另立槽 */
-  --xh-_navigation-menu-font-size: var(--xh-text-label-size);
+  --xh-_navigation-menu-font-size: var(--xh-control-font-md);
   --xh-_navigation-menu-trigger-h: var(--xh-control-h-md);
   --xh-_navigation-menu-trigger-px: var(--xh-control-px-md);
   --xh-_navigation-menu-trigger-gap: var(--xh-control-gap-md);
   --xh-_navigation-menu-link-py: var(--xh-space-1_5);
   --xh-_navigation-menu-link-px: var(--xh-control-px-md);
-  --xh-_navigation-menu-link-font-size: var(--xh-text-body-size);
+  --xh-_navigation-menu-link-font-size: var(--xh-control-font-md);
 
   /* 悬停与键盘锚点恒中性灰轻档、不接语气槽——两档同色相的话打开路径就认不出来了 */
   --xh-_navigation-menu-highlight-bg: var(--xh-bg-subtle);
@@ -15532,6 +16039,381 @@ input[data-scope='mention'][data-part='input'] {
   inset-inline-start: calc(100% + var(--xh-navigation-menu-content-offset, var(--xh-space-1)));
 }
 
+/* styles/notification.css */
+/*
+ * 九个位共用同一条进出场，位移不跟着落位走：要按位置分方向，就得从 group 的
+ * data-placement 反向选到卡片上，落位一改名整条动效静默失效。
+ * 竖向一小段位移在九个位上都说得通。
+ */
+@keyframes xh-notification-in {
+  from {
+    opacity: 0;
+    translate: 0 var(--xh-motion-distance-md);
+    scale: var(--xh-motion-scale-enter);
+  }
+
+  to {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+  }
+}
+
+/* loading 那枚字形自己转。逐皮肤自带一份：跨皮肤共用动画名，
+   引用方那份皮肤不在场时动画就静默不跑 */
+@keyframes xh-notification-spin {
+  to {
+    rotate: 360deg;
+  }
+}
+
+@keyframes xh-notification-out {
+  from {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+  }
+
+  to {
+    opacity: 0;
+    translate: 0 var(--xh-motion-distance-md);
+    scale: var(--xh-motion-scale-enter);
+  }
+}
+
+/* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+[data-scope='notification'] {
+  --xh-notification-skin: 1;
+}
+
+/* 作用域包装不占布局：通知落在哪儿由九个 group 各自的 fixed 说了算，
+   root 只是把队列的作用域圈起来（地标挂在那一摞上，不在这里）。
+   它若留下一个块盒，写在页面中段的用法（按钮和队列摆在一起）就会凭空多出一行空白。
+   另一件必须提防的事：fixed 认的是视口，祖先上一旦出现
+   transform / filter / backdrop-filter / contain，包含块就被抢走，整摞通知立刻贴错位置——
+   所以这里连 position 都不碰，也别往覆盖钩子里加这几个属性。 */
+[data-scope='notification'][data-part='root'] {
+  display: contents;
+}
+
+/* 只要声明过 display，就盖掉了 UA 的 [hidden]{display:none}，收起态得自己补回来 */
+[data-scope='notification'][data-part='root'][hidden] {
+  display: none;
+}
+
+/*
+ * 一摞 = 一整面视口大小的定位面：贴边靠 padding，九个位靠 justify/align 表达。
+ * 不用四角 inset 逐个摆，是因为 column flex 的 align-items 走的是行内轴，
+ * RTL 下 start/end 自动跟着翻；写死 inset-inline-start 的话居中那三个位
+ * 还得再配一次 translate，方向一变就错。
+ * 条目次序按队列原样（旧的在前）：贴底那三个位于是新的离屏幕边最近，符合直觉。
+ */
+[data-scope='notification'][data-part='group'] {
+  position: fixed;
+  inset-block: 0;
+  inset-inline: 0;
+  z-index: var(--xh-notification-layer, var(--xh-layer-toast));
+  display: flex;
+  flex-direction: column;
+  /* 基线按默认落位 bottom-end 写，下面只覆盖跟它不同的那几个位 */
+  justify-content: flex-end;
+  align-items: center;
+  padding-block: var(--xh-notification-inset, var(--xh-space-6));
+  padding-inline: var(--xh-notification-inset, var(--xh-space-6));
+  /* 摞内间距由连接层写进内联 style（两个适配器共用同一份），这里绝不重复写：
+     写了也会被内联盖掉，只会让人误以为间距归样式层管 */
+  /* 整面铺开就等于罩住了整块视口。面本身不吃指针，只有卡片吃（见下），
+     否则九个位一叠，底下的页面就再也点不动了 */
+  pointer-events: none;
+}
+
+[data-scope='notification'][data-part='group'][hidden] {
+  display: none;
+}
+
+/* 空摞直接撤掉：九个位同时挂九张全屏定位面，白白多九个合成层 */
+[data-scope='notification'][data-part='group'][data-empty] {
+  display: none;
+}
+
+/* 块轴落位：^= 一次吃掉某一行的三个位（top / top-start / top-end） */
+[data-scope='notification'][data-part='group'][data-placement^='top'] {
+  justify-content: flex-start;
+}
+
+[data-scope='notification'][data-part='group'][data-placement^='middle'] {
+  justify-content: center;
+}
+
+/* 行内轴落位：不带后缀的 top / middle / bottom 用基线的居中 */
+[data-scope='notification'][data-part='group'][data-placement$='-start'] {
+  align-items: flex-start;
+}
+
+[data-scope='notification'][data-part='group'][data-placement$='-end'] {
+  align-items: flex-end;
+}
+
+/*
+ * 一张通知卡：左列一枚类型字形，右列「标题 + 说明 + 操作」竖着排，叉钉在右上角。
+ * 用网格而不是竖排 flex：叉要脱离文档流钉到角上，正文要在字形右边成一列——
+ * 竖排 flex 里这两件事都做不到（叉会变成第三行）。
+ * 底与描边一律中性，语气只由左列那枚字形承载：整片兑色是轻提示那条的做法，
+ * 一张有标题有正文的卡片全片染色会把两层文字都压在同一片语气色上。
+ */
+[data-scope='notification'][data-part='item'] {
+  /* 叉与操作钮的兜底字形按控件指示符那一档走；左列那枚类型字形另有自己的尺寸 */
+  --xh-icon-size: var(--xh-notification-icon-size, var(--xh-control-indicator-size));
+
+  position: relative;
+  display: grid;
+  /* 左列宽度由字形自己决定，作者不放指示符时它就是 0，正文自然贴到左内衬 */
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  column-gap: var(--xh-notification-gap, var(--xh-space-3));
+  row-gap: var(--xh-notification-row-gap, var(--xh-space-2));
+  inline-size: var(--xh-notification-w, var(--xh-overlay-max-w-lg));
+  /* 摞是整面视口宽的定位面且带内边距，取 100% 就等于自动让出两侧留白，
+     窄屏上不必再算一遍 viewport 减法 */
+  max-inline-size: 100%;
+  padding-block: var(--xh-notification-py, var(--xh-space-4));
+  padding-inline: var(--xh-notification-px, var(--xh-space-4));
+  border: var(--xh-stroke-thin) solid var(--xh-notification-border, var(--xh-border-default));
+  border-radius: var(--xh-notification-radius, var(--xh-shape-surface));
+  background: var(--xh-notification-bg, var(--xh-bg-surface-raised));
+  color: var(--xh-notification-fg, var(--xh-fg-default));
+  box-shadow: var(--xh-notification-shadow, var(--xh-elevation-sheet));
+  font-size: var(--xh-notification-font-size, var(--xh-text-body-size));
+  line-height: var(--xh-notification-leading, var(--xh-text-body-leading));
+  /* 摞的定位面整面铺开且不吃指针，卡片必须自己吃回来：
+     悬停按住计时、按钮可点、焦点进出，全指着这一条 */
+  pointer-events: auto;
+}
+
+/* 除指示符外一律落第二列：作者往卡片里塞的任何东西都跟着正文走 */
+[data-scope='notification'][data-part='item'] > *:not([data-part='item-indicator']) {
+  grid-column: 2;
+}
+
+/* 退场窗口走完连接层给的是 hidden 属性，而上面声明了 display——
+   漏掉这条，已经"卸载"的通知会一直杵在屏幕上，且再也没人来收 */
+[data-scope='notification'][data-part='item'][hidden] {
+  display: none;
+}
+
+/* 生命周期只有三段，unmounted 那段由上面的 [hidden] 收走，这里只管前两段 */
+[data-scope='notification'][data-part='item'][data-state='visible'] {
+  animation: xh-notification-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+}
+
+/* forwards 不能省：退场窗口（removeDelay 默认 200ms）比退场动画长，
+   不定住末帧的话动画跑完会弹回全不透明，卡片在被收起前先闪一下 */
+[data-scope='notification'][data-part='item'][data-state='dismissing'] {
+  animation: xh-notification-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+}
+
+/* 独占第一列第一行，并与标题首行顶对齐：盒高取一行标题的行高，
+   字形在盒里居中，标题字号改了也不会错位 */
+[data-scope='notification'][data-part='item-indicator'] {
+  --xh-icon-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-md));
+
+  grid-column: 1;
+  grid-row: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: calc(var(--xh-notification-title-font-size, var(--xh-text-label-size)) * var(--xh-leading-tight));
+  inline-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-md));
+  color: var(--xh-notification-indicator-fg, var(--xh-_tone-fg));
+}
+
+[data-scope='notification'][data-part='item-indicator'][hidden] {
+  display: none;
+}
+
+/* 作者没往指示符里写内容就由皮肤画兜底字形，按语气各画一枚；
+   塞了自己的图形这几条即不命中 */
+[data-scope='notification'][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-info) center / contain no-repeat;
+  mask: var(--xh-glyph-mark-info) center / contain no-repeat;
+}
+
+[data-scope='notification'][data-part='item'][data-type='success'] [data-part='item-indicator']:empty::before {
+  -webkit-mask-image: var(--xh-glyph-mark-check);
+  mask-image: var(--xh-glyph-mark-check);
+}
+
+[data-scope='notification'][data-part='item'][data-type='warning'] [data-part='item-indicator']:empty::before {
+  -webkit-mask-image: var(--xh-glyph-mark-warning);
+  mask-image: var(--xh-glyph-mark-warning);
+}
+
+[data-scope='notification'][data-part='item'][data-type='error'] [data-part='item-indicator']:empty::before {
+  -webkit-mask-image: var(--xh-glyph-mark-close);
+  mask-image: var(--xh-glyph-mark-close);
+}
+
+/* loading 说的是「事情还没完」，不是好消息也不是坏消息：走中性前景档而不是语气色 */
+[data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator'] {
+  color: var(--xh-notification-indicator-fg, var(--xh-fg-muted));
+}
+
+[data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator']:empty::before {
+  -webkit-mask-image: var(--xh-glyph-mark-rotate-right);
+  mask-image: var(--xh-glyph-mark-rotate-right);
+  animation: xh-notification-spin var(--xh-spin-duration) linear infinite;
+}
+
+/* 减少动效：转圈停下，静止的箭头仍然读得出「还没好」；
+   "在等什么"由卡片上的 role=status 与可见文案继续承担。
+   两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+@media (prefers-reduced-motion: reduce) {
+  [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator']:empty::before {
+    animation: none;
+  }
+}
+
+:where([data-motion='reduce']) [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator']:empty::before {
+  animation: none;
+}
+
+[data-scope='notification'][data-part='item-title'] {
+  /* 作者可能把它写成 h2/p，外边距得先归零，否则卡片内的行距对不上 */
+  margin: 0;
+  color: var(--xh-notification-title-fg, var(--xh-fg-default));
+  font-size: var(--xh-notification-title-font-size, var(--xh-text-label-size));
+  font-weight: var(--xh-notification-title-font-weight, var(--xh-font-weight-semibold));
+  line-height: var(--xh-notification-title-leading, var(--xh-leading-tight));
+}
+
+/* 叉钉在右上角，标题得给它让位；说明与操作在第二行往下，不受影响 */
+[data-scope='notification'][data-part='item']:has([data-part='item-close-trigger']) [data-part='item-title'] {
+  padding-inline-end: calc(var(--xh-notification-close-size, var(--xh-control-h-sm)) + var(--xh-space-2));
+}
+
+[data-scope='notification'][data-part='item-description'] {
+  margin: 0;
+  color: var(--xh-notification-description-fg, var(--xh-fg-muted));
+  font-size: var(--xh-notification-description-font-size, var(--xh-text-secondary-size));
+}
+
+/* 没给文案的那一个仍然要留在 DOM 里（aria-labelledby / aria-describedby 指着它），
+   但空盒子会照吃一份 gap，卡片看着就多出一截莫名的留白 */
+[data-scope='notification'][data-part='item-title']:empty,
+[data-scope='notification'][data-part='item-description']:empty {
+  display: none;
+}
+
+[data-scope='notification'][data-part='item-title'][hidden],
+[data-scope='notification'][data-part='item-description'][hidden] {
+  display: none;
+}
+
+[data-scope='notification'][data-part='item-action-trigger'] {
+  /* 网格列默认拉满，按钮要贴着起始侧收成自己的宽度 */
+  justify-self: start;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--xh-notification-action-h, var(--xh-control-h-sm));
+  padding-inline: var(--xh-notification-action-px, var(--xh-control-px-sm));
+  border: var(--xh-stroke-thin) solid var(--xh-notification-action-border, var(--xh-border-default));
+  border-radius: var(--xh-notification-action-radius, var(--xh-shape-control));
+  background: var(--xh-notification-action-bg, var(--xh-bg-subtle));
+  color: var(--xh-notification-action-fg, var(--xh-fg-default));
+  /* 按钮不继承字族字号，不接回来的话卡片里会突然冒出一段系统 UI 字体 */
+  font: inherit;
+  font-weight: var(--xh-notification-action-font-weight, var(--xh-font-weight-medium));
+  line-height: var(--xh-leading-none);
+  cursor: pointer;
+}
+
+[data-scope='notification'][data-part='item-action-trigger'][hidden] {
+  display: none;
+}
+
+[data-scope='notification'][data-part='item-action-trigger']:hover:not(:disabled) {
+  background: var(--xh-notification-action-bg-hover, var(--xh-bg-subtle-hover));
+}
+
+[data-scope='notification'][data-part='item-action-trigger']:active:not(:disabled) {
+  background: var(--xh-notification-action-bg-active, var(--xh-bg-subtle-active));
+}
+
+[data-scope='notification'][data-part='item-action-trigger']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+/* 钉在右上角的内衬处，不参与网格排布——留在流里它会变成正文下面的第三行 */
+[data-scope='notification'][data-part='item-close-trigger'] {
+  position: absolute;
+  inset-block-start: var(--xh-notification-close-inset, var(--xh-space-3));
+  inset-inline-end: var(--xh-notification-close-inset, var(--xh-space-3));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--xh-notification-close-size, var(--xh-control-h-sm));
+  inline-size: var(--xh-notification-close-size, var(--xh-control-h-sm));
+  border: 0;
+  border-radius: var(--xh-notification-close-radius, var(--xh-shape-control));
+  background: transparent;
+  color: var(--xh-notification-close-fg, var(--xh-fg-muted));
+  font: inherit;
+  line-height: var(--xh-leading-none);
+  cursor: pointer;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+}
+
+/* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半：
+   上面声明了 display，不补回来就会留下一个按不动的叉，比压根没有叉更让人困惑 */
+[data-scope='notification'][data-part='item-close-trigger'][hidden] {
+  display: none;
+}
+
+[data-scope='notification'][data-part='item-close-trigger']:hover:not(:disabled) {
+  background: var(--xh-notification-close-bg-hover, var(--xh-bg-subtle-hover));
+  color: var(--xh-notification-close-fg-hover, var(--xh-fg-default));
+}
+
+[data-scope='notification'][data-part='item-close-trigger']:active {
+  background: var(--xh-notification-close-bg-active, var(--xh-bg-subtle-active));
+  scale: var(--xh-motion-scale-press);
+}
+
+/* 单体控件用原生 disabled。常规路径下它与 hidden 同时出现看不见，
+   但作者若在覆盖层把收起改了回来，至少还能看出这颗叉是按不动的 */
+[data-scope='notification'][data-part='item-close-trigger']:disabled {
+  color: var(--xh-fg-disabled);
+  cursor: not-allowed;
+}
+
+[data-scope='notification'][data-part='item-close-trigger']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+/* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+[data-scope='notification'][data-part='item-close-trigger']: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-close) center / contain no-repeat;
+  mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+}
+
 /* styles/number-field.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='number-field'] {
@@ -15551,9 +16433,9 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_number-field-h: var(--xh-control-h-md);
   --xh-_number-field-px: var(--xh-control-px-md);
   --xh-_number-field-gap: var(--xh-control-gap-md);
-  --xh-_number-field-font-size: var(--xh-text-body-size);
-  --xh-_number-field-label-font-size: var(--xh-text-label-size);
-  --xh-_number-field-trigger-font-size: var(--xh-text-body-size);
+  --xh-_number-field-font-size: var(--xh-control-font-md);
+  --xh-_number-field-label-font-size: var(--xh-control-font-md);
+  --xh-_number-field-trigger-font-size: var(--xh-control-font-md);
 
   /* 盒子的圆角 */
   --xh-_number-field-radius: var(--xh-number-field-input-radius, var(--xh-shape-control));
@@ -15913,7 +16795,38 @@ input[data-scope='mention'][data-part='input'] {
   mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='number-field'][data-part='control'][hidden] {
+  display: none;
+}
+
 /* styles/pagination.css */
+/* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+   动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+@keyframes xh-pop-in {
+  from {
+    opacity: 0;
+    scale: var(--xh-motion-scale-enter);
+  }
+
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+@keyframes xh-pop-out {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+
+  to {
+    opacity: 0;
+    scale: var(--xh-motion-scale-enter);
+  }
+}
+
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='pagination'] {
   --xh-pagination-skin: 1;
@@ -15923,11 +16836,14 @@ input[data-scope='mention'][data-part='input'] {
    页数为 0 时连接层会打 data-empty，这里不拿它做隐藏：作者常把「第 x-y 条」这类
    区间回显也写在 nav 里，整块藏掉会连那行字一起吞了，是否隐藏交给作者决定 */
 [data-scope='pagination'][data-part='root'] {
+  /* 作者塞进上一页/下一页的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+  --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-text));
+
   /* 尺寸档只换这三个私有槽，上一页/下一页、页码与省略号都从 root 继承它们，
      换档不必给每个部件各写一条选择器 */
   --xh-_pagination-item-size: var(--xh-control-h-md);
   --xh-_pagination-item-px: var(--xh-control-px-md);
-  --xh-_pagination-font-size: var(--xh-text-label-size);
+  --xh-_pagination-font-size: var(--xh-control-font-md);
 
   /* 当前页的选中态随语气走。没写 data-tone 时这几个 --xh-_tone-* 都没被声明，
      退回原来的品牌底与其配色。聚焦环不在其列，它恒是 --xh-ring-focus */
@@ -16048,22 +16964,149 @@ input[data-scope='mention'][data-part='input'] {
   color: var(--xh-pagination-item-fg-selected, var(--xh-_pagination-selected-fg));
 }
 
-[data-scope='pagination'][data-part='item'][data-current]:hover {
-  border-color: var(--xh-pagination-item-border-selected-hover, var(--xh-_pagination-selected-bg-hover));
-  background: var(--xh-pagination-item-bg-selected-hover, var(--xh-_pagination-selected-bg-hover));
+[data-scope='pagination'][data-part='item'][data-current]:hover {
+  border-color: var(--xh-pagination-item-border-selected-hover, var(--xh-_pagination-selected-bg-hover));
+  background: var(--xh-pagination-item-bg-selected-hover, var(--xh-_pagination-selected-bg-hover));
+}
+
+[data-scope='pagination'][data-part='item'][data-current]:active {
+  border-color: var(--xh-pagination-item-border-selected-active, var(--xh-_pagination-selected-bg-active));
+  background: var(--xh-pagination-item-bg-selected-active, var(--xh-_pagination-selected-bg-active));
+}
+
+/* 省略号是纯视觉占位，读屏那边已被 aria-hidden 摘掉：
+   吞掉指针事件，免得它出现悬停反馈、看起来像一颗点得动的按钮 */
+[data-scope='pagination'][data-part='ellipsis'] {
+  color: var(--xh-pagination-ellipsis-fg, var(--xh-fg-subtle));
+  cursor: default;
+  pointer-events: none;
+}
+/* 每页条数控制器：原生 select，抹掉系统外观后与页码格子共用同一副骨架。
+   箭头用背景图而非伪元素——原生 select 不生成 ::before */
+[data-scope='pagination'][data-part='page-size-select'] {
+  flex: none;
+  block-size: var(--xh-pagination-item-h, var(--xh-_pagination-item-size));
+  padding-inline: var(--xh-pagination-item-px, var(--xh-_pagination-item-px));
+  /* 右侧让开箭头 */
+  padding-inline-end: calc(
+    var(--xh-pagination-item-px, var(--xh-_pagination-item-px)) +
+      var(--xh-icon-size, var(--xh-glyph-size-text)) + var(--xh-space-1)
+  );
+  border: var(--xh-stroke-thin) solid var(--xh-pagination-page-size-border, var(--xh-border-default));
+  border-radius: var(--xh-pagination-item-radius, var(--xh-shape-control));
+  background: var(--xh-pagination-page-size-bg, var(--xh-bg-surface));
+  color: var(--xh-pagination-item-fg, var(--xh-fg-default));
+  font-size: var(--xh-pagination-font-size, var(--xh-_pagination-font-size));
+  line-height: var(--xh-leading-none);
+  appearance: none;
+  cursor: pointer;
+}
+
+[data-scope='pagination'][data-part='page-size-select']:hover:not(:disabled) {
+  border-color: var(--xh-pagination-page-size-border-hover, var(--xh-border-strong));
+}
+
+[data-scope='pagination'][data-part='page-size-select']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+[data-scope='pagination'][data-part='page-size-select']:disabled {
+  color: var(--xh-fg-disabled);
+  cursor: not-allowed;
+}
+
+/* 摊开省略位的定位层。三处坐标系必须同为 fixed：机器交给引擎的 strategy、
+   连接层的内联 position、这里 —— 差一处就会算在错的坐标系里 */
+[data-scope='pagination'][data-part='positioner'] {
+  /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，面板继承它限高；
+     引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
+  --xh-_pagination-available-h: 100vh;
+
+  /* 页码面板的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊一条竖灰带 */
+  --xh-scrollbar-track-bg: transparent;
+
+  position: fixed;
+  z-index: var(--xh-pagination-layer, var(--xh-layer-popover));
+  /* 空壳不吃指针：省略位与面板之间那段间隙要能点得穿 */
+  pointer-events: none;
+}
+
+/* 锚点被滚出可视区：整个浮层随之收起 */
+[data-scope='pagination'][data-part='positioner'][data-hidden] {
+  visibility: hidden;
+}
+
+/* 摊开的页码面板：一串页码格子，横着排、必要时折行 */
+[data-scope='pagination'][data-part='content'] {
+  /* 浮层被搬到 portal 落点，继承不到 root 上那把尺，这里再声明一遍 */
+  --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-text));
+
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--xh-pagination-gap, var(--xh-space-1));
+  /* 页码不可预知有多少：不限高就整块伸出视口且滚不到 */
+  max-inline-size: var(--xh-pagination-content-max-w, var(--xh-overlay-max-w));
+  max-block-size: min(
+    var(--xh-pagination-content-max-h, var(--xh-overlay-max-h)),
+    var(--xh-_pagination-available-h)
+  );
+  overflow-y: auto;
+  padding: var(--xh-pagination-content-p, var(--xh-space-1));
+  border: var(--xh-stroke-thin) solid var(--xh-pagination-content-border, var(--xh-border-default));
+  border-radius: var(--xh-pagination-content-radius, var(--xh-shape-surface));
+  background: var(--xh-pagination-content-bg, var(--xh-bg-surface));
+  box-shadow: var(--xh-pagination-content-shadow, var(--xh-elevation-floating));
+  /* 定位层不吃指针，面板本体必须吃：里面的页码要点得到 */
+  pointer-events: auto;
+}
+
+[data-scope='pagination'][data-part='content'][data-state='open'] {
+  animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+}
+
+/* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
+   免得动画结束到真收起之间闪一下原样 */
+[data-scope='pagination'][data-part='content'][data-state='closed'] {
+  animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+}
+
+/* 这里刻意没有 [data-part='content'][hidden] { display: none }：
+   补了退场就一帧都播不出来，真正的收起由适配器落成内联 display */
+
+/* 没写内容就由皮肤画兜底字形：上一页/下一页默认就是两枚箭头，
+   作者往部件里塞了自己的图形或文字，这两条即不命中 */
+[data-scope='pagination'][data-part='prev-trigger']: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-left) center / contain no-repeat;
+  mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+}
+
+[data-scope='pagination'][data-part='next-trigger']: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;
 }
 
-[data-scope='pagination'][data-part='item'][data-current]:active {
-  border-color: var(--xh-pagination-item-border-selected-active, var(--xh-_pagination-selected-bg-active));
-  background: var(--xh-pagination-item-bg-selected-active, var(--xh-_pagination-selected-bg-active));
+/* rtl 下页序从右往左走，箭头跟着指向行进方向 */
+[dir='rtl'] [data-scope='pagination'][data-part='prev-trigger']:empty::before {
+  -webkit-mask-image: var(--xh-glyph-mark-chevron-right);
+  mask-image: var(--xh-glyph-mark-chevron-right);
 }
 
-/* 省略号是纯视觉占位，读屏那边已被 aria-hidden 摘掉：
-   吞掉指针事件，免得它出现悬停反馈、看起来像一颗点得动的按钮 */
-[data-scope='pagination'][data-part='ellipsis'] {
-  color: var(--xh-pagination-ellipsis-fg, var(--xh-fg-subtle));
-  cursor: default;
-  pointer-events: none;
+[dir='rtl'] [data-scope='pagination'][data-part='next-trigger']:empty::before {
+  -webkit-mask-image: var(--xh-glyph-mark-chevron-left);
+  mask-image: var(--xh-glyph-mark-chevron-left);
 }
 
 /* styles/pin-input.css */
@@ -16076,9 +17119,9 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='pin-input'][data-part='root'] {
   /* 尺寸档只换这四个私有槽，标题与格子都从 root 继承它们，换档不必给每个部件各写一条选择器 */
   --xh-_pin-input-box-size: var(--xh-control-box-md);
-  --xh-_pin-input-box-gap: var(--xh-space-2);
+  --xh-_pin-input-box-gap: var(--xh-control-gap-md);
   --xh-_pin-input-box-font-size: var(--xh-text-heading-3-size);
-  --xh-_pin-input-label-font-size: var(--xh-text-label-size);
+  --xh-_pin-input-label-font-size: var(--xh-control-font-md);
   /* 形态档只换这三个私有槽，缺省这一份就是描边式（描边 + 画布底） */
   --xh-_pin-input-box-bg: var(--xh-bg-canvas);
   --xh-_pin-input-box-border: var(--xh-border-control);
@@ -16269,6 +17312,9 @@ input[data-scope='mention'][data-part='input'] {
      引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
   --xh-_popover-available-h: 100vh;
 
+  /* 面板内容的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊一条竖灰带 */
+  --xh-scrollbar-track-bg: transparent;
+
   position: fixed;
   z-index: var(--xh-popover-layer, var(--xh-layer-popover));
   /* 空壳不吃指针，交互只发生在 content 上 */
@@ -16458,7 +17504,7 @@ input[data-scope='mention'][data-part='input'] {
   overflow: hidden;
   inline-size: 100%;
   block-size: var(--xh-_thickness);
-  border-radius: var(--xh-shape-pill);
+  border-radius: var(--xh-progress-track-radius, var(--xh-shape-pill));
   background: var(--xh-progress-track, var(--xh-bg-subtle-active));
 }
 
@@ -16466,7 +17512,7 @@ input[data-scope='mention'][data-part='input'] {
    轨道不跟着换族：只有已完成的那段换色，底槽保持中性才读得出"完成了多少"。 */
 [data-scope='progress'][data-part='range'] {
   block-size: 100%;
-  border-radius: var(--xh-shape-pill);
+  border-radius: var(--xh-progress-range-radius, var(--xh-shape-pill));
   background: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
   transition: inline-size var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
@@ -16573,6 +17619,12 @@ input[data-scope='mention'][data-part='input'] {
   visibility: hidden;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='progress'][data-part='root'][hidden] {
+  display: none;
+}
+
 /* styles/radio-group.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='radio-group'] {
@@ -16582,7 +17634,8 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='radio-group'][data-part='root'] {
   /* 尺寸档只换这两个私有槽，标题与条目都从 root 继承它们，换档不必给每个部件各写一条选择器 */
   --xh-_radio-group-item-gap: var(--xh-control-gap-md);
-  --xh-_radio-group-font-size: var(--xh-text-label-size);
+  --xh-_radio-group-font-size: var(--xh-control-font-md);
+  --xh-_radio-group-indicator: var(--xh-control-indicator-md);
   /* 选中色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
   --xh-_radio-group-accent: var(--xh-_tone, var(--xh-bg-brand));
 
@@ -16603,11 +17656,13 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='radio-group'][data-part='root'][data-size='sm'] {
   --xh-_radio-group-item-gap: var(--xh-control-gap-sm);
   --xh-_radio-group-font-size: var(--xh-control-font-sm);
+  --xh-_radio-group-indicator: var(--xh-control-indicator-sm);
 }
 
 [data-scope='radio-group'][data-part='root'][data-size='lg'] {
   --xh-_radio-group-item-gap: var(--xh-control-gap-lg);
   --xh-_radio-group-font-size: var(--xh-control-font-lg);
+  --xh-_radio-group-indicator: var(--xh-control-indicator-lg);
 }
 
 [data-scope='radio-group'][data-part='label'] {
@@ -16646,10 +17701,10 @@ input[data-scope='mention'][data-part='input'] {
   flex: none;
   align-items: center;
   justify-content: center;
-  inline-size: var(--xh-radio-group-indicator-size, var(--xh-control-indicator-size));
-  block-size: var(--xh-radio-group-indicator-size, var(--xh-control-indicator-size));
+  inline-size: var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator));
+  block-size: var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator));
   border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-control));
-  border-radius: var(--xh-shape-pill);
+  border-radius: var(--xh-radio-group-indicator-radius, var(--xh-shape-pill));
   background: var(--xh-radio-group-indicator-bg, var(--xh-bg-canvas));
   transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
@@ -16668,8 +17723,8 @@ input[data-scope='mention'][data-part='input'] {
    直径取指示器的一半：换尺寸档时圈与点一起走，比例不散 */
 [data-scope='radio-group'][data-part='indicator']::before {
   content: '';
-  inline-size: calc(var(--xh-radio-group-indicator-size, var(--xh-control-indicator-size)) / 2);
-  block-size: calc(var(--xh-radio-group-indicator-size, var(--xh-control-indicator-size)) / 2);
+  inline-size: calc(var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator)) / 2);
+  block-size: calc(var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator)) / 2);
   border-radius: var(--xh-shape-pill);
   background: var(--xh-radio-group-indicator-dot, var(--xh-_radio-group-accent));
   scale: 0;
@@ -16685,6 +17740,14 @@ input[data-scope='mention'][data-part='input'] {
   user-select: none;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='radio-group'][data-part='root'][hidden],
+[data-scope='radio-group'][data-part='item'][hidden],
+[data-scope='radio-group'][data-part='indicator'][hidden] {
+  display: none;
+}
+
 /* styles/rating.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='rating'] {
@@ -16695,9 +17758,9 @@ input[data-scope='mention'][data-part='input'] {
    根上不留基准它就会贴到更外层的定位祖先上，原生校验提示跟着飘到页面别处。 */
 [data-scope='rating'][data-part='root'] {
   /* 尺寸档只换这三个私有槽，标题与星星都从 root 继承它们，换档不必给每个部件各写一条选择器 */
-  --xh-_rating-item-gap: var(--xh-space-1);
+  --xh-_rating-item-gap: var(--xh-control-gap-md);
   --xh-_rating-item-size: var(--xh-font-size-2xl);
-  --xh-_rating-font-size: var(--xh-text-label-size);
+  --xh-_rating-font-size: var(--xh-control-font-md);
   /* 点亮色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的警示色 */
   --xh-_rating-accent: var(--xh-_tone, var(--xh-color-warning-500));
 
@@ -17007,6 +18070,9 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_scrollbar-thickness: var(--xh-scrollbar-thickness-md);
 
   position: absolute;
+  /* 浮层的 positioner 一律 pointer-events: none，条子作为它的子节点会继承到，拖不动也点不着；
+     收起态那条规则优先级更高，仍旧穿透 */
+  pointer-events: auto;
   /* touch-action 关掉浏览器自己的手势：不关的话手指一按滑块页面就跟着滚，
      指针随即被系统收走（pointercancel），拖到一半的滑块停在原地。
      user-select 同理——拖动时选中页面文字会让滑块"粘"住。 */
@@ -17199,9 +18265,11 @@ input[data-scope='mention'][data-part='input'] {
      换档不必给每个部件各写一条选择器 */
   --xh-_select-h: var(--xh-control-h-md);
   --xh-_select-px: var(--xh-control-px-md);
+  --xh-_select-item-py: var(--xh-list-option-py-md);
+  --xh-_select-item-px: var(--xh-control-px-md);
   --xh-_select-gap: var(--xh-control-gap-md);
-  --xh-_select-font-size: var(--xh-text-body-size);
-  --xh-_select-label-font-size: var(--xh-text-label-size);
+  --xh-_select-font-size: var(--xh-control-font-md);
+  --xh-_select-label-font-size: var(--xh-control-font-md);
 
   /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
   --xh-_select-control-bg: var(--xh-bg-canvas);
@@ -17211,7 +18279,7 @@ input[data-scope='mention'][data-part='input'] {
   /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
      没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
   --xh-_select-ring: var(--xh-ring-focus);
-  --xh-_select-accent: var(--xh-_tone, var(--xh-bg-brand));
+  --xh-_select-accent: var(--xh-_tone, var(--xh-fg-brand));
   --xh-_select-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 }
 
@@ -17231,6 +18299,8 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='select']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
   --xh-_select-h: var(--xh-control-h-sm);
   --xh-_select-px: var(--xh-control-px-sm);
+  --xh-_select-item-py: var(--xh-list-option-py-sm);
+  --xh-_select-item-px: var(--xh-control-px-sm);
   --xh-_select-gap: var(--xh-control-gap-sm);
   --xh-_select-font-size: var(--xh-control-font-sm);
   --xh-_select-label-font-size: var(--xh-control-font-sm);
@@ -17248,6 +18318,8 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='select']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
   --xh-_select-h: var(--xh-control-h-lg);
   --xh-_select-px: var(--xh-control-px-lg);
+  --xh-_select-item-py: var(--xh-list-option-py-lg);
+  --xh-_select-item-px: var(--xh-control-px-lg);
   --xh-_select-gap: var(--xh-control-gap-lg);
   --xh-_select-font-size: var(--xh-control-font-lg);
   --xh-_select-label-font-size: var(--xh-control-font-lg);
@@ -17296,8 +18368,6 @@ input[data-scope='mention'][data-part='input'] {
   block-size: var(--xh-select-control-h, var(--xh-_select-h));
   padding-inline: var(--xh-select-control-px, var(--xh-_select-px));
   min-inline-size: var(--xh-select-control-min-w, var(--xh-control-min-w));
-  /* 多选会把 N 项的文本连成一串，框宽必须封顶；与浮层同一个上限，两半看着才是一件东西 */
-  max-inline-size: var(--xh-select-control-max-w, var(--xh-overlay-max-w));
   border: var(--xh-stroke-thin) solid var(--xh-select-control-border, var(--xh-_select-control-border));
   border-radius: var(--xh-select-control-radius, var(--xh-shape-control));
   background: var(--xh-select-control-bg, var(--xh-_select-control-bg));
@@ -17544,6 +18614,7 @@ input[data-scope='mention'][data-part='input'] {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
+  gap: var(--xh-select-list-gap, var(--xh-list-option-gap));
   min-block-size: 0;
   overflow-y: auto;
 }
@@ -17598,8 +18669,8 @@ input[data-scope='mention'][data-part='input'] {
   display: flex;
   align-items: center;
   gap: var(--xh-select-item-gap, var(--xh-_select-gap));
-  padding-block: var(--xh-select-item-py, var(--xh-space-1_5));
-  padding-inline: var(--xh-select-item-px, var(--xh-control-px-md));
+  padding-block: var(--xh-select-item-py, var(--xh-_select-item-py));
+  padding-inline: var(--xh-select-item-px, var(--xh-_select-item-px));
   border-radius: var(--xh-select-item-radius, var(--xh-shape-control));
   color: var(--xh-select-item-fg, var(--xh-fg-default));
   font-size: var(--xh-select-item-font-size, var(--xh-_select-font-size));
@@ -17706,6 +18777,19 @@ input[data-scope='mention'][data-part='input'] {
   mask: var(--xh-glyph-mark-close) center / contain no-repeat;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='select'][data-part='root'][hidden],
+[data-scope='select'][data-part='control'][hidden],
+[data-scope='select'][data-part='trigger'][hidden],
+[data-scope='select'][data-part='tag'][hidden],
+[data-scope='select'][data-part='indicator'][hidden],
+[data-scope='select'][data-part='list'][hidden],
+[data-scope='select'][data-part='item'][hidden],
+[data-scope='select'][data-part='item-indicator'][hidden] {
+  display: none;
+}
+
 /* styles/separator.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='separator'] {
@@ -17804,8 +18888,8 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 [data-scope='side-nav'][data-part='group-label'] {
-  padding-block: var(--xh-space-1);
-  padding-inline: var(--xh-control-px-md);
+  padding-block: var(--xh-side-nav-group-label-py, var(--xh-space-1));
+  padding-inline: var(--xh-side-nav-group-label-px, var(--xh-control-px-md));
   font-size: var(--xh-text-caption-size);
   color: var(--xh-fg-subtle);
   user-select: none;
@@ -17835,12 +18919,12 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='side-nav'][data-part='link'] {
   display: flex;
   align-items: center;
-  gap: var(--xh-control-gap-md);
+  gap: var(--xh-side-nav-link-gap, var(--xh-control-gap-md));
   inline-size: 100%;
   min-block-size: var(--xh-control-h-md);
-  padding-inline: var(--xh-control-px-md);
+  padding-inline: var(--xh-side-nav-link-px, var(--xh-control-px-md));
   border: none;
-  border-radius: var(--xh-shape-control);
+  border-radius: var(--xh-side-nav-link-radius, var(--xh-shape-control));
   background: none;
   color: inherit;
   font-size: var(--xh-text-body-size);
@@ -17986,6 +19070,17 @@ input[data-scope='mention'][data-part='input'] {
   mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='side-nav'][data-part='root'][hidden],
+[data-scope='side-nav'][data-part='group'][hidden],
+[data-scope='side-nav'][data-part='branch'][hidden],
+[data-scope='side-nav'][data-part='item'][hidden],
+[data-scope='side-nav'][data-part='link'][hidden],
+[data-scope='side-nav'][data-part='branch-indicator'][hidden] {
+  display: none;
+}
+
 /* styles/slider.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='slider'] {
@@ -18120,7 +19215,9 @@ input[data-scope='mention'][data-part='input'] {
   background: var(--xh-slider-thumb-bg, var(--xh-_tone, var(--xh-bg-brand)));
   box-shadow: var(--xh-slider-thumb-shadow, var(--xh-elevation-raised));
   cursor: grab;
-  transition: scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  transition:
+    scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 /* 内联样式把 inset-inline-start 定在值所在的比例上，那是拇指的**起始边**不是圆心；
@@ -18191,7 +19288,7 @@ input[data-scope='mention'][data-part='input'] {
   inset-block-start: 50%;
   inline-size: var(--xh-slider-mark-size, var(--xh-space-1));
   block-size: var(--xh-slider-mark-size, var(--xh-space-1));
-  border-radius: var(--xh-shape-pill);
+  border-radius: var(--xh-slider-mark-radius, var(--xh-shape-pill));
   background: var(--xh-slider-mark-bg, var(--xh-border-strong));
   translate: -50% -50%;
 }
@@ -18387,8 +19484,8 @@ input[data-scope='mention'][data-part='input'] {
 
   /* 尺寸档只换这三个私有槽，序号圆点、标题与说明都从 root 继承它们，
      换档不必给每个部件各写一条选择器 */
-  --xh-_steps-indicator-size: var(--xh-control-h-sm);
-  --xh-_steps-title-font-size: var(--xh-text-label-size);
+  --xh-_steps-indicator-size: var(--xh-space-7);
+  --xh-_steps-title-font-size: var(--xh-control-font-md);
   --xh-_steps-caption-font-size: var(--xh-text-caption-size);
 
   /* 语气落在走过与当前这两步的标记和连接线上：强调色画描边与填充，
@@ -18530,8 +19627,8 @@ input[data-scope='mention'][data-part='input'] {
   justify-content: center;
   inline-size: var(--xh-steps-indicator-size, var(--xh-_steps-indicator-size));
   block-size: var(--xh-steps-indicator-size, var(--xh-_steps-indicator-size));
-  border: var(--xh-stroke-thin) solid var(--xh-steps-indicator-border, var(--xh-border-strong));
-  border-radius: var(--xh-shape-pill);
+  border: var(--xh-stroke-thin) solid var(--xh-steps-indicator-border, var(--xh-border-control));
+  border-radius: var(--xh-steps-indicator-radius, var(--xh-shape-pill));
   background: var(--xh-steps-indicator-bg, transparent);
   color: var(--xh-steps-indicator-fg, var(--xh-fg-muted));
   font-size: var(--xh-steps-indicator-font-size, var(--xh-_steps-caption-font-size));
@@ -18563,7 +19660,7 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='indicator'] {
-  border-color: var(--xh-steps-indicator-border-disabled, var(--xh-fg-disabled));
+  border-color: var(--xh-steps-indicator-border-disabled, var(--xh-border-subtle));
   color: var(--xh-steps-indicator-fg-disabled, var(--xh-fg-disabled));
 }
 
@@ -18599,7 +19696,7 @@ input[data-scope='mention'][data-part='input'] {
   flex: 1;
   min-inline-size: var(--xh-steps-separator-min-length, var(--xh-space-4));
   block-size: var(--xh-steps-separator-thickness, var(--xh-stroke-thick));
-  border-radius: var(--xh-shape-pill);
+  border-radius: var(--xh-steps-separator-radius, var(--xh-shape-pill));
   background: var(--xh-steps-separator-bg, var(--xh-border-default));
   transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
@@ -18679,7 +19776,7 @@ input[data-scope='mention'][data-part='input'] {
   block-size: var(--xh-_switch-track-h);
   padding: var(--xh-_switch-pad);
   border: 0;
-  border-radius: var(--xh-shape-pill);
+  border-radius: var(--xh-switch-radius, var(--xh-shape-pill));
   background: var(--xh-switch-bg, var(--xh-bg-subtle-active));
   cursor: pointer;
   transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
@@ -18717,7 +19814,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='switch'][data-part='thumb'] {
   inline-size: var(--xh-_switch-thumb-size);
   block-size: var(--xh-_switch-thumb-size);
-  border-radius: var(--xh-shape-pill);
+  border-radius: var(--xh-switch-thumb-radius, var(--xh-shape-pill));
   background: var(--xh-switch-thumb, var(--xh-bg-canvas));
   box-shadow: var(--xh-switch-thumb-shadow, var(--xh-elevation-raised));
   transition: translate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
@@ -18784,6 +19881,13 @@ input[data-scope='mention'][data-part='input'] {
   animation: none;
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='switch'][data-part='root'][hidden],
+[data-scope='switch'][data-part='label'][hidden] {
+  display: none;
+}
+
 /* styles/table.css */
 /* 加载态自己冒出来，用户没按任何键：一段极轻的呼吸就够，别抢走正在读表的注意力 */
 @keyframes xh-table-loading-pulse {
@@ -18803,13 +19907,17 @@ input[data-scope='mention'][data-part='input'] {
 
 /* 表格自己滚动：吸顶表头与横向吸附列都要一个确定的滚动容器才钉得住 */
 [data-scope='table'][data-part='root'] {
+  /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+     既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+  isolation: isolate;
+
   /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
   --xh-icon-size: var(--xh-table-icon-size, var(--xh-glyph-size-text));
 
   /* 密度档只换这两个私有槽：单元格与列标题从 root 继承前者，字号靠 font-size 本身继承下去，
      换档不必给每个部件各写一条选择器，列宽那套算法也一点不碰 */
   --xh-_table-cell-py: var(--xh-table-cell-py-md);
-  --xh-_table-font-size: var(--xh-text-body-size);
+  --xh-_table-font-size: var(--xh-control-font-md);
 
   display: flex;
   position: relative;
@@ -19068,7 +20176,8 @@ input[data-scope='mention'][data-part='input'] {
   color: transparent;
 }
 
-/* 半选画一条横杠盖住勾：aria-checked=mixed 在视觉上也得与"全选"分得开 */
+/* 半选换一枚横杠字形盖住勾：aria-checked=mixed 在视觉上也得与"全选"分得开。
+   横杠与勾同走字形令牌，作者换掉标记时两态一起换 */
 [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate'] {
   position: relative;
   color: transparent;
@@ -19076,11 +20185,12 @@ input[data-scope='mention'][data-part='input'] {
 
 [data-scope='table'][data-part='select-all-trigger'][data-state='indeterminate']::after {
   position: absolute;
-  inline-size: 60%;
-  block-size: var(--xh-stroke-thick);
-  border-radius: var(--xh-shape-pill);
-  background: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
+  inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+  block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+  background-color: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
   content: '';
+  -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+  mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
 }
 
 [data-scope='table'][data-part='select-all-trigger'][data-disabled],
@@ -19091,10 +20201,12 @@ input[data-scope='mention'][data-part='input'] {
   cursor: not-allowed;
 }
 
-/* 全选把手是表头里独立的 Tab 停靠点，环得画在它自己身上 */
+/* 全选把手是表头里独立的 Tab 停靠点，环得画在它自己身上。
+   往内收，与行、排序把手同一口径：把手长在列头里，列头与根都收 overflow，
+   环画在外沿会被裁掉 */
 [data-scope='table'][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));
 }
 
 /* 行选择把手不占 Tab 位（键盘那一路走 Space），只服务指针 */
@@ -19295,7 +20407,7 @@ input[data-scope='mention'][data-part='input'] {
   /* 尺寸档只换这三个私有槽，标签从 root 继承它们，换档不必给每个部件各写一条选择器 */
   --xh-_tabs-trigger-h: var(--xh-control-h-md);
   --xh-_tabs-trigger-px: var(--xh-control-px-md);
-  --xh-_tabs-trigger-font-size: var(--xh-text-label-size);
+  --xh-_tabs-trigger-font-size: var(--xh-control-font-md);
 
   /* 形态档只换这几个私有槽：列表的底、内边距、基线，与标签的描边、选中底、选中态那道指示。
      缺省档（line）是一条基线加一行标签，选中只换文字色——这里的取值即现状 */
@@ -19447,6 +20559,14 @@ input[data-scope='mention'][data-part='input'] {
   outline-offset: var(--xh-ring-offset);
 }
 
+/* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+   写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+[data-scope='tabs'][data-part='root'][hidden],
+[data-scope='tabs'][data-part='list'][hidden],
+[data-scope='tabs'][data-part='trigger'][hidden] {
+  display: none;
+}
+
 /* styles/tags-input.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='tags-input'] {
@@ -19464,9 +20584,9 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_tags-input-control-h: var(--xh-control-h-md);
   --xh-_tags-input-control-px: var(--xh-control-px-md);
   --xh-_tags-input-control-gap: var(--xh-control-gap-md);
-  --xh-_tags-input-input-font-size: var(--xh-text-body-size);
-  --xh-_tags-input-item-font-size: var(--xh-text-secondary-size);
-  --xh-_tags-input-label-font-size: var(--xh-text-label-size);
+  --xh-_tags-input-input-font-size: var(--xh-control-font-md);
+  --xh-_tags-input-item-font-size: var(--xh-control-caption-md);
+  --xh-_tags-input-label-font-size: var(--xh-control-font-md);
   /* 形态档只换这三个私有槽，缺省这一份就是描边式（描边 + 画布底） */
   --xh-_tags-input-control-bg: var(--xh-bg-canvas);
   --xh-_tags-input-control-border: var(--xh-border-control);
@@ -19868,9 +20988,9 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_text-field-h: var(--xh-control-h-md);
   --xh-_text-field-px: var(--xh-control-px-md);
   --xh-_text-field-gap: var(--xh-control-gap-md);
-  --xh-_text-field-font-size: var(--xh-text-body-size);
-  --xh-_text-field-label-font-size: var(--xh-text-label-size);
-  --xh-_text-field-action-font-size: var(--xh-text-secondary-size);
+  --xh-_text-field-font-size: var(--xh-control-font-md);
+  --xh-_text-field-label-font-size: var(--xh-control-font-md);
+  --xh-_text-field-action-font-size: var(--xh-control-caption-md);
 
   /* 形态档只换这三个私有槽：底、常态描边、悬停描边 */
   --xh-_text-field-bg: var(--xh-bg-canvas);
@@ -20185,6 +21305,10 @@ input[data-scope='mention'][data-part='input'] {
 /* 自建定位上下文，作为绝对定位的回到底部按钮的参照系；
    block-size: 100% 让高度由外部决定，使滚动发生在内部。 */
 [data-scope='thread'][data-part='root'] {
+  /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+     既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+  isolation: isolate;
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -20198,14 +21322,18 @@ input[data-scope='mention'][data-part='input'] {
 
 /* 滚动容器，粘底读的是它的 scrollTop / clientHeight / scrollHeight。
    min-block-size: 0 让弹性子项能被压缩从而触发溢出；
-   overscroll-behavior: contain 阻止滚动量传给页面；
-   scrollbar-gutter: stable 避免滚动条出现与消失时推动文字。 */
+   overscroll-behavior: contain 阻止滚动量传给页面。 */
 [data-scope='thread'][data-part='viewport'] {
   flex: 1;
   min-block-size: 0;
   /* 逻辑属性 overflow-block 尚无可用实现，写物理轴 */
   overflow-y: auto;
   overscroll-behavior: contain;
+}
+
+/* 还在用原生滚动条的视口留一条空道，滚动条出现与消失时不推动文字。
+   带 data-xh-scrollbar 的容器已经把原生条藏成零宽，这条空道对它没有布局作用，排除掉 */
+[data-scope='thread'][data-part='viewport']:not([data-xh-scrollbar]) {
   scrollbar-gutter: stable;
 }
 
@@ -20303,8 +21431,8 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_time-field-control-h: var(--xh-control-h-md);
   --xh-_time-field-control-px: var(--xh-control-px-md);
   --xh-_time-field-gap: var(--xh-control-gap-md);
-  --xh-_time-field-font-size: var(--xh-text-body-size);
-  --xh-_time-field-label-font-size: var(--xh-text-label-size);
+  --xh-_time-field-font-size: var(--xh-control-font-md);
+  --xh-_time-field-label-font-size: var(--xh-control-font-md);
   /* 形态档只换这三个私有槽：底色与两档描边 */
   --xh-_time-field-control-bg: var(--xh-bg-canvas);
   --xh-_time-field-control-border: var(--xh-border-control);
@@ -20600,8 +21728,8 @@ input[data-scope='mention'][data-part='input'] {
   --xh-_time-picker-control-h: var(--xh-control-h-md);
   --xh-_time-picker-control-px: var(--xh-control-px-md);
   --xh-_time-picker-gap: var(--xh-control-gap-md);
-  --xh-_time-picker-font-size: var(--xh-text-body-size);
-  --xh-_time-picker-label-font-size: var(--xh-text-label-size);
+  --xh-_time-picker-font-size: var(--xh-control-font-md);
+  --xh-_time-picker-label-font-size: var(--xh-control-font-md);
   --xh-_time-picker-item-px: var(--xh-control-px-md);
 
   /* 形态档只换这三个私有槽：底色与两档描边 */
@@ -20917,7 +22045,7 @@ input[data-scope='mention'][data-part='input'] {
   display: flex;
   flex: none;
   flex-direction: column;
-  gap: var(--xh-time-picker-presets-gap, var(--xh-space-0_5));
+  gap: var(--xh-time-picker-presets-gap, var(--xh-list-option-gap));
   max-block-size: var(--xh-time-picker-presets-h, var(--xh-viewport-h-sm));
   padding-inline: var(--xh-time-picker-presets-px, var(--xh-space-1));
   overflow-y: auto;
@@ -20932,7 +22060,7 @@ input[data-scope='mention'][data-part='input'] {
 [data-scope='time-picker'][data-part='preset'] {
   padding-block: var(--xh-time-picker-preset-py, var(--xh-space-1));
   padding-inline: var(--xh-time-picker-preset-px, var(--xh-space-3));
-  border-radius: var(--xh-shape-control);
+  border-radius: var(--xh-time-picker-preset-radius, var(--xh-shape-control));
   font-size: var(--xh-text-secondary-size);
   line-height: var(--xh-leading-normal);
   white-space: nowrap;
@@ -20972,7 +22100,7 @@ input[data-scope='mention'][data-part='input'] {
   display: flex;
   flex: none;
   flex-direction: column;
-  gap: var(--xh-time-picker-column-gap, var(--xh-space-0_5));
+  gap: var(--xh-time-picker-column-gap, var(--xh-list-option-gap));
   min-inline-size: var(--xh-time-picker-column-min-w, 3.5rem);
   /* 几列并排：定高而不是随内容收，否则时列与分列的可选值一多一少就错位 */
   block-size: var(--xh-time-picker-column-h, var(--xh-viewport-h-sm));
@@ -21007,7 +22135,7 @@ input[data-scope='mention'][data-part='input'] {
   flex: none;
   align-items: center;
   justify-content: center;
-  padding-block: var(--xh-time-picker-item-py, var(--xh-space-1_5));
+  padding-block: var(--xh-time-picker-item-py, var(--xh-list-option-py-md));
   padding-inline: var(--xh-time-picker-item-px, var(--xh-_time-picker-item-px));
   border-radius: var(--xh-time-picker-item-radius, var(--xh-shape-control));
   color: var(--xh-time-picker-item-fg, var(--xh-fg-default));
@@ -21125,9 +22253,9 @@ input[data-scope='mention'][data-part='input'] {
 
 /* styles/toast.css */
 /*
- * 九个位共用同一条进出场，位移不跟着落位走：要按位置分方向，就得从 toaster 的
- * data-placement 反向选到卡片上，等于把一个组件的动效写进另一个组件的选择器里，
- * 两边任意一侧改名都会静默失效。竖向一小段位移在九个位上都说得通。
+ * 九个位共用同一条进出场，位移不跟着落位走：要按位置分方向就得从摞的
+ * data-placement 反向选到条子上，落位一改名整条动效静默失效。
+ * 竖向一小段位移在九个位上都说得通。
  */
 @keyframes xh-toast-in {
   from {
@@ -21162,45 +22290,95 @@ input[data-scope='mention'][data-part='input'] {
   --xh-toast-skin: 1;
 }
 
+/*
+ * 一摞 = 一整面视口大小的定位面：贴边靠 padding，落位靠 justify/align 表达。
+ * 不用四角 inset 逐个摆，是因为 column flex 的 align-items 走的是行内轴，
+ * RTL 下 start/end 自动跟着翻；写死 inset-inline-start 的话居中那三个位
+ * 还得再配一次 translate，方向一变就错。
+ * 摞由全局服务渲染，没有对应的容器组件——一次操作的反馈落在哪儿是整个服务的口径。
+ */
+[data-scope='toast'][data-part='group'] {
+  position: fixed;
+  inset-block: 0;
+  inset-inline: 0;
+  z-index: var(--xh-toast-layer, var(--xh-layer-toast));
+  display: flex;
+  flex-direction: column;
+  /* 基线按默认落位 top 写，下面只覆盖跟它不同的那几个位 */
+  justify-content: flex-start;
+  align-items: center;
+  padding-block: var(--xh-toast-inset, var(--xh-space-6));
+  padding-inline: var(--xh-toast-inset, var(--xh-space-6));
+  /* 摞内间距由服务写进内联 style，这里绝不重复写：
+     写了也会被内联盖掉，只会让人误以为间距归样式层管 */
+  /* 整面铺开就等于罩住了整块视口。面本身不吃指针，只有条子吃（见下），
+     否则底下的页面就再也点不动了 */
+  pointer-events: none;
+}
+
+[data-scope='toast'][data-part='group'][hidden] {
+  display: none;
+}
+
+/* 块轴落位：^= 一次吃掉某一行的三个位（top / top-start / top-end） */
+[data-scope='toast'][data-part='group'][data-placement^='middle'] {
+  justify-content: center;
+}
+
+[data-scope='toast'][data-part='group'][data-placement^='bottom'] {
+  justify-content: flex-end;
+}
+
+/* 行内轴落位：不带后缀的 top / middle / bottom 用基线的居中 */
+[data-scope='toast'][data-part='group'][data-placement$='-start'] {
+  align-items: flex-start;
+}
+
+[data-scope='toast'][data-part='group'][data-placement$='-end'] {
+  align-items: flex-end;
+}
+
+/*
+ * 一条轻提示是「一句话 + 一枚状态字形」，横排一行、贴着文字收缩。
+ * 语气由淡底、描边与字形三者一起承载，正文留中性——正文也跟着兑成语气色的话，
+ * 绿字压在绿底上，对比度是整条里最差的那一处。
+ */
 [data-scope='toast'][data-part='root'] {
-  /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-  --xh-icon-size: var(--xh-toast-icon-size, var(--xh-glyph-size-text));
+  /* 状态字形按控件指示符那一档走，与 alert 的图标框同一把尺 */
+  --xh-icon-size: var(--xh-toast-icon-size, var(--xh-control-indicator-size));
+
+  /* 底与描边取语气层派生好的槽，不在这儿自己再兑一遍：
+     兑法差一档，字形压上去的对比度就跟着差一档（alert 踩过这个坑） */
+  --xh-_toast-tint: var(--xh-_tone-subtle);
+  --xh-_toast-edge: var(--xh-_tone-border);
 
   display: flex;
-  flex-direction: column;
-  gap: var(--xh-toast-gap, var(--xh-space-1));
-  inline-size: var(--xh-toast-w, var(--xh-overlay-max-w));
+  align-items: center;
+  gap: var(--xh-toast-gap, var(--xh-control-gap-md));
+  /* 收缩包裹：一句「已保存」撑成定宽方块，右边那片空白会让它读起来像一张公告卡 */
+  inline-size: var(--xh-toast-w, auto);
   /* 摞是整面视口宽的定位面且带内边距，取 100% 就等于自动让出两侧留白，
-     窄屏上不必再算一遍 viewport 减法 */
-  max-inline-size: 100%;
-  padding-block: var(--xh-toast-py, var(--xh-surface-py-sm));
+     窄屏上不必再算一遍 viewport 减法；再叠一道绝对上限，免得一条长文案铺成横幅 */
+  max-inline-size: min(var(--xh-overlay-max-w-xl), 100%);
+  /* 纵内衬取控件档而不是面档：面档（12px）叠上 21px 行盒与两道细边就是 47px 高，
+     那是卡片的体量；控件档（8px）落在 39px，与短消息该有的高度一致
+     （带叉 42px、带操作钮 46px，那两档本就不是默认排版） */
+  padding-block: var(--xh-toast-py, var(--xh-field-py));
   padding-inline: var(--xh-toast-px, var(--xh-surface-px-sm));
-  border: var(--xh-stroke-thin) solid var(--xh-toast-border, var(--xh-border-default));
-  /* 语气色条做成起始侧的粗边，而不是伪元素：圆角与阴影都不用再对第二遍。
-     两条必须排在 border 简写之后，否则被简写重置回细边与常规描边色。
-     颜色由 connect 从 type 派生的 data-tone 经语气层给出，作者写 --xh-toast-accent
-     就能把某一条整体改色；两者都没有时退回原来的 info 蓝 */
-  border-inline-start-width: var(--xh-toast-accent-width, var(--xh-space-1));
-  border-inline-start-color: var(--xh-toast-accent, var(--xh-_tone-soft, var(--xh-color-info-500)));
+  border: var(--xh-stroke-thin) solid var(--xh-toast-border, var(--xh-_toast-edge));
   border-radius: var(--xh-toast-radius, var(--xh-shape-surface));
-  background: var(--xh-toast-bg, var(--xh-bg-surface-raised));
+  background: var(--xh-toast-bg, var(--xh-_toast-tint));
   color: var(--xh-toast-fg, var(--xh-fg-default));
   box-shadow: var(--xh-toast-shadow, var(--xh-elevation-sheet));
-  font-size: var(--xh-toast-font-size, var(--xh-text-secondary-size));
-  line-height: var(--xh-toast-leading, var(--xh-leading-normal));
-  /* 摞的定位面整面铺开且不吃指针，卡片必须自己吃回来：
+  font-size: var(--xh-toast-font-size, var(--xh-text-body-size));
+  line-height: var(--xh-toast-leading, var(--xh-text-body-leading));
+  /* 摞的定位面整面铺开且不吃指针，条子必须自己吃回来：
      悬停按住计时、按钮可点、焦点进出，全指着这一条 */
   pointer-events: auto;
 }
 
-/* loading 说的是「事情还没完」，不是好消息也不是坏消息，走中性灰。
-   它不是语气：连接层给它派生的 neutral 档是 500，而这里要的是 fg-muted（600） */
-[data-scope='toast'][data-part='root'][data-type='loading'] {
-  border-inline-start-color: var(--xh-toast-accent, var(--xh-fg-muted));
-}
-
 /* 退场窗口走完连接层给的是 hidden 属性，而上面声明了 display——
-   漏掉这条，已经"卸载"的通知会一直杵在屏幕上，且再也没人来收 */
+   漏掉这条，已经"卸载"的提示会一直杵在屏幕上，且再也没人来收 */
 [data-scope='toast'][data-part='root'][hidden] {
   display: none;
 }
@@ -21211,41 +22389,39 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 /* forwards 不能省：退场窗口（removeDelay 默认 200ms）比退场动画长，
-   不定住末帧的话动画跑完会弹回全不透明，卡片在被收起前先闪一下 */
+   不定住末帧的话动画跑完会弹回全不透明，条子在被收起前先闪一下 */
 [data-scope='toast'][data-part='root'][data-state='dismissing'] {
   animation: xh-toast-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
 }
 
 [data-scope='toast'][data-part='title'] {
-  /* 作者可能把它写成 h2/p，外边距得先归零，否则卡片内的行距对不上 */
+  /* 作者可能把它写成 h2/p，外边距得先归零，否则条子内的行距对不上 */
   margin: 0;
+  /* 吃掉剩余宽度，把操作钮与叉推到行尾；min-inline-size 让它在撞上宽度上限时能换行，
+     flex 项的 min-width 默认是 auto，不归零的话长文案会把条子顶出上限 */
+  flex: 1 1 auto;
+  min-inline-size: 0;
   color: var(--xh-toast-title-fg, var(--xh-fg-default));
-  font-size: var(--xh-toast-title-font-size, var(--xh-text-label-size));
-  font-weight: var(--xh-toast-title-font-weight, var(--xh-font-weight-semibold));
-  line-height: var(--xh-toast-title-leading, var(--xh-leading-tight));
-}
-
-[data-scope='toast'][data-part='description'] {
-  margin: 0;
-  color: var(--xh-toast-description-fg, var(--xh-fg-muted));
-  font-size: var(--xh-toast-description-font-size, var(--xh-text-secondary-size));
+  /* 与条子同字号同行高、不加粗：加粗是"这是标题、下面还有正文"的信号，
+     而轻提示没有正文——那一层是 notification 的 */
+  font-size: var(--xh-toast-title-font-size, var(--xh-text-body-size));
+  font-weight: var(--xh-toast-title-font-weight, var(--xh-text-body-weight));
+  line-height: var(--xh-toast-title-leading, var(--xh-text-body-leading));
 }
 
-/* 没给文案的那一个仍然要留在 DOM 里（aria-labelledby / aria-describedby 指着它），
-   但空盒子会照吃一份 gap，卡片看着就多出一截莫名的留白 */
-[data-scope='toast'][data-part='title']:empty,
-[data-scope='toast'][data-part='description']:empty {
+/* 没给文案时仍然要留在 DOM 里（aria-labelledby 指着它），
+   但空盒子会照吃一份 gap，条子看着就多出一截莫名的留白 */
+[data-scope='toast'][data-part='title']:empty {
   display: none;
 }
 
-[data-scope='toast'][data-part='title'][hidden],
-[data-scope='toast'][data-part='description'][hidden] {
+[data-scope='toast'][data-part='title'][hidden] {
   display: none;
 }
 
 [data-scope='toast'][data-part='action-trigger'] {
-  /* 作为卡片直接子元素时不跟着拉满整行；被作者包进一行里时它只影响交叉轴，无副作用 */
-  align-self: flex-start;
+  /* 条子是单行 flex，按钮不参与伸缩：文案长了该换行的是文字，不是把按钮压扁 */
+  flex: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -21255,7 +22431,7 @@ input[data-scope='mention'][data-part='input'] {
   border-radius: var(--xh-toast-action-radius, var(--xh-shape-control));
   background: var(--xh-toast-action-bg, var(--xh-bg-subtle));
   color: var(--xh-toast-action-fg, var(--xh-fg-default));
-  /* 按钮不继承字族字号，不接回来的话卡片里会突然冒出一段系统 UI 字体 */
+  /* 按钮不继承字族字号，不接回来的话条子里会突然冒出一段系统 UI 字体 */
   font: inherit;
   font-weight: var(--xh-toast-action-font-weight, var(--xh-font-weight-medium));
   line-height: var(--xh-leading-none);
@@ -21280,14 +22456,16 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 [data-scope='toast'][data-part='close-trigger'] {
-  align-self: flex-start;
-  /* 和操作按钮同处一行时把叉推到行尾；单独作为卡片子元素时则贴到行内末侧 */
+  flex: none;
+  /* 推到行内末侧；和操作按钮同处一行时排在它后面 */
   margin-inline-start: auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  block-size: var(--xh-toast-close-size, var(--xh-control-h-sm));
-  inline-size: var(--xh-toast-close-size, var(--xh-control-h-sm));
+  /* 行级动作钮那一档（24px），不是浮层角落钮的 28px：
+     后者比一行正文的行盒还高，单它就把整条顶高一截 */
+  block-size: var(--xh-toast-close-size, var(--xh-control-action-size));
+  inline-size: var(--xh-toast-close-size, var(--xh-control-action-size));
   border: 0;
   border-radius: var(--xh-toast-close-radius, var(--xh-shape-control));
   background: transparent;
@@ -21341,80 +22519,6 @@ input[data-scope='mention'][data-part='input'] {
   mask: var(--xh-glyph-mark-close) center / contain no-repeat;
 }
 
-/* styles/toaster.css */
-/* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-[data-scope='toaster'] {
-  --xh-toaster-skin: 1;
-}
-
-/* 地标容器不占布局：通知落在哪儿由九个 group 各自的 fixed 说了算，
-   root 只是给读屏一个可跳转的落点。它若留下一个块盒，写在页面中段的用法
-   （按钮和队列摆在一起）就会凭空多出一行空白。
-   另一件必须提防的事：fixed 认的是视口，祖先上一旦出现
-   transform / filter / backdrop-filter / contain，包含块就被抢走，整摞通知立刻贴错位置——
-   所以这里连 position 都不碰，也别往覆盖钩子里加这几个属性。 */
-[data-scope='toaster'][data-part='root'] {
-  display: contents;
-}
-
-/* 只要声明过 display，就盖掉了 UA 的 [hidden]{display:none}，收起态得自己补回来 */
-[data-scope='toaster'][data-part='root'][hidden] {
-  display: none;
-}
-
-/*
- * 一摞 = 一整面视口大小的定位面：贴边靠 padding，九个位靠 justify/align 表达。
- * 不用四角 inset 逐个摆，是因为 column flex 的 align-items 走的是行内轴，
- * RTL 下 start/end 自动跟着翻；写死 inset-inline-start 的话居中那三个位
- * 还得再配一次 translate，方向一变就错。
- * 条目次序按队列原样（旧的在前）：贴底那三个位于是新的离屏幕边最近，符合直觉。
- */
-[data-scope='toaster'][data-part='group'] {
-  position: fixed;
-  inset-block: 0;
-  inset-inline: 0;
-  z-index: var(--xh-toaster-layer, var(--xh-layer-toast));
-  display: flex;
-  flex-direction: column;
-  /* 基线按默认落位 bottom-end 写，下面只覆盖跟它不同的那几个位 */
-  justify-content: flex-end;
-  align-items: center;
-  padding-block: var(--xh-toaster-inset, var(--xh-space-6));
-  padding-inline: var(--xh-toaster-inset, var(--xh-space-6));
-  /* 摞内间距由连接层写进内联 style（两个适配器共用同一份），这里绝不重复写：
-     写了也会被内联盖掉，只会让人误以为间距归样式层管 */
-  /* 整面铺开就等于罩住了整块视口。面本身不吃指针，只有卡片吃（见 toast.css），
-     否则九个位一叠，底下的页面就再也点不动了 */
-  pointer-events: none;
-}
-
-[data-scope='toaster'][data-part='group'][hidden] {
-  display: none;
-}
-
-/* 空摞直接撤掉：九个位同时挂九张全屏定位面，白白多九个合成层 */
-[data-scope='toaster'][data-part='group'][data-empty] {
-  display: none;
-}
-
-/* 块轴落位：^= 一次吃掉某一行的三个位（top / top-start / top-end） */
-[data-scope='toaster'][data-part='group'][data-placement^='top'] {
-  justify-content: flex-start;
-}
-
-[data-scope='toaster'][data-part='group'][data-placement^='middle'] {
-  justify-content: center;
-}
-
-/* 行内轴落位：不带后缀的 top / middle / bottom 用基线的居中 */
-[data-scope='toaster'][data-part='group'][data-placement$='-start'] {
-  align-items: flex-start;
-}
-
-[data-scope='toaster'][data-part='group'][data-placement$='-end'] {
-  align-items: flex-end;
-}
-
 /* styles/toggle.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='toggle'] {
@@ -21523,6 +22627,12 @@ input[data-scope='mention'][data-part='input'] {
   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;
+}
+
 /* styles/toggle-group.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='toggle-group'] {
@@ -21532,10 +22642,36 @@ input[data-scope='mention'][data-part='input'] {
 /* 分段控件：段与段之间不留缝，靠共边连成一体，所以 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;
 }
@@ -21570,15 +22706,15 @@ input[data-scope='mention'][data-part='input'] {
   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;
@@ -21876,7 +23012,7 @@ input[data-scope='mention'][data-part='input'] {
      箭头是它的后代，语气槽一并继承 */
   --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，空白区域照样点得穿。 */
@@ -21935,6 +23071,12 @@ input[data-scope='mention'][data-part='input'] {
   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;
+}
+
 /* styles/tour.css */
 /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
    动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
@@ -22022,6 +23164,12 @@ input[data-scope='mention'][data-part='input'] {
   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;
@@ -22100,7 +23248,7 @@ input[data-scope='mention'][data-part='input'] {
   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' 之后：两条选择器的特指度相同（都是三个属性），
@@ -22181,9 +23329,9 @@ input[data-scope='mention'][data-part='input'] {
   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;
 }
@@ -22490,6 +23638,7 @@ input[data-scope='mention'][data-part='input'] {
   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));
@@ -22582,8 +23731,7 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 /* 没写内容就由皮肤画勾；作者往格子里塞了自己的图形，这条规则即不命中。
-   底下两处（全选格的两态）不带这条守卫：那里的 ::before 是方框本身，
-   而触发器里装的是全选那行文字，:empty 恒不命中，加了勾号会整个消失 */
+   底下两处（全选格的两态）不带这条守卫：触发器里装的是全选那行文字，:empty 恒不命中 */
 [data-scope='transfer'][data-part='item-checkbox'][data-state='checked']:empty::before {
   content: '';
   display: inline-block;
@@ -22596,25 +23744,47 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 /* 全选格的三态：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;
 }
@@ -22626,7 +23796,9 @@ input[data-scope='mention'][data-part='input'] {
 
 /* 全选格是原生按钮（三态经 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));
@@ -22642,9 +23814,11 @@ input[data-scope='mention'][data-part='input'] {
   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 {
@@ -22769,6 +23943,7 @@ input[data-scope='mention'][data-part='input'] {
 [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));
@@ -22790,8 +23965,15 @@ input[data-scope='mention'][data-part='input'] {
   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;
 }
@@ -22814,7 +23996,7 @@ input[data-scope='mention'][data-part='input'] {
   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));
@@ -22829,6 +24011,19 @@ input[data-scope='mention'][data-part='input'] {
     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;
@@ -22937,7 +24132,7 @@ input[data-scope='mention'][data-part='input'] {
   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;
 }
 
@@ -22998,9 +24193,24 @@ input[data-scope='mention'][data-part='input'] {
 [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;
@@ -23030,6 +24240,12 @@ input[data-scope='mention'][data-part='input'] {
   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;
+}
+
 /* styles/tree-select.css */
 /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
    动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
@@ -23067,6 +24283,9 @@ input[data-scope='mention'][data-part='input'] {
      引擎没算（尚未落位 / 无引擎）时不额外限高 */
   --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 里 */
@@ -23086,9 +24305,11 @@ input[data-scope='mention'][data-part='input'] {
   /* 尺寸档只换这几个私有槽，盒与树里的行都从这两处继承它们，换档不必给每个部件各写一条选择器 */
   --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);
 
   /* 形态档只换触发框的描边与底色这三个槽，浮层与树不跟着变：
      变的是「这是个输入位」的表达方式，不是弹出内容的表达方式 */
@@ -23144,6 +24365,8 @@ input[data-scope='mention'][data-part='input'] {
   --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);
@@ -23153,6 +24376,8 @@ input[data-scope='mention'][data-part='input'] {
   --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);
@@ -23382,6 +24607,7 @@ input[data-scope='mention'][data-part='input'] {
 [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] {
@@ -23399,6 +24625,20 @@ input[data-scope='mention'][data-part='input'] {
   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 {
@@ -23417,8 +24657,8 @@ input[data-scope='mention'][data-part='input'] {
   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));
@@ -23482,7 +24722,7 @@ input[data-scope='mention'][data-part='input'] {
   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;
 }
 
@@ -23543,6 +24783,7 @@ input[data-scope='mention'][data-part='input'] {
 [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));
 }