@xihan-ui/styles 1.0.0-alpha.0 → 1.0.0-alpha.1

package/index.unlayered.css

@@ -4,11 +4,16 @@
  * 无层 reset/normalize 时使用。取舍见文档站的「安装与接入」。
  */
 
+/* 层序声明必须最先：级联层的先后由首次出现定死，layers.css 打头才立得住序。 */
+
+/* styles/layers.css */
+/* 库层序单一真源：级联顺序由首次声明决定，与 @import 顺序解耦。 */
+
 /* 令牌先于一切：皮肤里不写兜底值，令牌缺席就是缺陷，不是降级。
    tokens.css 自带 @layer xihan.tokens，层序由 layers.css 定。 */
 @import '@xihan-ui/tokens/tokens.css';
 
-/* 层序声明必须最先，其余按层归属排列。 */
+/* 其余按层归属排列。 */
 
 /* styles/affix.css */
 /* 占位盒就是 content 在常规流里占的那块地方。
@@ -149,7 +154,7 @@
   inline-size: var(--xh-back-top-trigger-size, var(--xh-_back-top-size));
   block-size: var(--xh-back-top-trigger-size, var(--xh-_back-top-size));
   padding: 0;
-  border: var(--xh-stroke-thin) solid var(--xh-back-top-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-back-top-border, var(--xh-border-control));
   border-radius: var(--xh-back-top-radius, var(--xh-shape-pill));
   /* 使用者令牌排在语气之前：写了覆盖钩子就以它为准，没写才退到语气，最后才是中性缺省 */
   background: var(--xh-back-top-bg, var(--xh-bg-surface-raised));
@@ -165,7 +170,7 @@
 /* 悬停只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
 @media (hover: hover) {
   [data-scope='back-top'][data-part='trigger']:hover {
-    border-color: var(--xh-back-top-border-hover, var(--xh-border-strong));
+    border-color: var(--xh-back-top-border-hover, var(--xh-border-control-hover));
     background: var(--xh-back-top-bg-hover, var(--xh-bg-subtle-hover));
   }
 }
@@ -257,7 +262,7 @@
 /* 段的描边归组画（两个适配器各一条选择器：Vue 的段就是直接子节点，WC 的段在行为宿主里面）：合边本来就是组的事，按钮那边没有描边色的槽位可以流 */
 [data-scope='button-group'][data-part='root'][data-variant='outline'] > *,
 [data-scope='button-group'][data-part='root'][data-variant='outline'] > * [data-scope='button'][data-part='root'] {
-  border-color: var(--xh-_tone-border, var(--xh-border-default));
+  border-color: var(--xh-_tone-border-control, var(--xh-border-control));
 }
 
 /* —— 合边 —— */
@@ -651,7 +656,7 @@
   gap: var(--xh-dynamic-input-action-gap, var(--xh-space-1));
   block-size: var(--xh-dynamic-input-add-height, var(--xh-control-h-md));
   padding-inline: var(--xh-dynamic-input-add-px, var(--xh-control-px-md));
-  border: var(--xh-stroke-thin) dashed var(--xh-dynamic-input-add-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) dashed var(--xh-dynamic-input-add-border, var(--xh-border-control));
   border-radius: var(--xh-dynamic-input-add-radius, var(--xh-shape-control));
   background: var(--xh-dynamic-input-add-bg, transparent);
   color: var(--xh-dynamic-input-add-fg, var(--xh-fg-brand));
@@ -669,7 +674,7 @@
 }
 
 [data-scope='dynamic-input'][data-part='add-trigger']:hover:not([aria-disabled='true']) {
-  border-color: var(--xh-dynamic-input-add-border-hover, var(--xh-border-strong));
+  border-color: var(--xh-dynamic-input-add-border-hover, var(--xh-border-control-hover));
   background: var(--xh-dynamic-input-add-bg-hover, var(--xh-bg-subtle-hover));
 }
 
@@ -883,7 +888,7 @@
   inline-size: var(--xh-_float-button-size);
   block-size: var(--xh-_float-button-size);
   padding: 0;
-  border: var(--xh-stroke-thin) solid var(--xh-float-button-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-float-button-border, var(--xh-border-control));
   border-radius: var(--xh-_float-button-radius);
   /* 使用者令牌排在缺省之前：写了覆盖钩子就以它为准，没写才退到中性缺省 */
   background: var(--xh-float-button-bg, var(--xh-bg-surface-raised));
@@ -899,7 +904,7 @@
 /* 悬停只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
 @media (hover: hover) {
   [data-scope='float-button'][data-part='trigger']:not([data-disabled]):hover {
-    border-color: var(--xh-float-button-border-hover, var(--xh-border-strong));
+    border-color: var(--xh-float-button-border-hover, var(--xh-border-control-hover));
     background: var(--xh-float-button-bg-hover, var(--xh-bg-subtle-hover));
   }
 }
@@ -1543,9 +1548,6 @@
   display: none;
 }
 
-/* styles/layers.css */
-/* 库层序单一真源：级联顺序由首次声明决定，与 @import 顺序解耦。 */
-
 /* styles/layout.css */
 /* 页面骨架排成三行两列：头与脚各横贯一整行，侧栏与内容并排占中间那一行。
    缺哪一段，对应的行/列就没有条目，宽高自动收成 0，不必为"少写一段"另立规则。
@@ -2089,14 +2091,11 @@
 
   /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
   --xh-_mention-input-bg: var(--xh-bg-canvas);
-  --xh-_mention-input-border: var(--xh-border-default);
-  --xh-_mention-input-border-hover: var(--xh-border-strong);
+  --xh-_mention-input-border: var(--xh-border-control);
+  --xh-_mention-input-border-hover: var(--xh-border-control-hover);
 
-  /* 强调色随语气走，只落在聚焦与高亮上，正文文字色不动。
-     没写 data-tone 时 --xh-_tone 没被声明，三处都退回原来的取值 */
+  /* 聚焦环恒用固定环色，不随语气走 */
   --xh-_mention-ring: var(--xh-ring-focus);
-  --xh-_mention-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
-  --xh-_mention-item-highlight-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
   display: block;
 }
@@ -2127,21 +2126,21 @@
    形态只决定描边与底色怎么用，用哪族颜色由 data-tone 决定 */
 [data-scope='mention'][data-part='root'][data-variant='outline'] {
   --xh-_mention-input-bg: var(--xh-bg-canvas);
-  --xh-_mention-input-border: var(--xh-border-default);
-  --xh-_mention-input-border-hover: var(--xh-border-strong);
+  --xh-_mention-input-border: var(--xh-border-control);
+  --xh-_mention-input-border-hover: var(--xh-border-control-hover);
 }
 
 /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
 [data-scope='mention'][data-part='root'][data-variant='subtle'] {
   --xh-_mention-input-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   --xh-_mention-input-border: transparent;
-  --xh-_mention-input-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_mention-input-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 [data-scope='mention'][data-part='root'][data-variant='ghost'] {
   --xh-_mention-input-bg: transparent;
   --xh-_mention-input-border: transparent;
-  --xh-_mention-input-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_mention-input-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 /* 框与聚焦环都长在输入框自己身上：这里没有把输入框和别的控件裹成一体的输入行，
@@ -2246,8 +2245,8 @@
   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));
-  padding-inline: var(--xh-mention-item-px, var(--xh-control-px-sm));
+  padding-block: var(--xh-mention-item-py, var(--xh-space-1_5));
+  padding-inline: var(--xh-mention-item-px, var(--xh-control-px-md));
   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));
@@ -2256,18 +2255,19 @@
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 [data-scope='mention'][data-part='item'][hidden] {
   display: none;
 }
 
-/* 只认 data-highlighted，不写 :hover：指针划过时连接层已经把高亮搬过来了，
+/* 键盘锚点走中性灰轻档。只认 data-highlighted，不写 :hover：指针划过时连接层已经把高亮搬过来了，
    两套底色各画各的会出现"鼠标停在 A 上、回车却插进了 B" */
 [data-scope='mention'][data-part='item'][data-highlighted]:not([data-disabled]) {
-  background: var(--xh-mention-item-bg-highlight, var(--xh-_mention-item-highlight-bg));
-  color: var(--xh-mention-item-fg-highlight, var(--xh-_mention-item-highlight-fg));
-  font-weight: var(--xh-mention-item-font-weight-highlight, var(--xh-font-weight-medium));
+  background: var(--xh-mention-item-bg-hover, var(--xh-bg-subtle));
 }
 
 /* 禁用走 aria-disabled 而非原生 disabled（原生 disabled 不派 click，禁用守卫就走不到），
@@ -2290,12 +2290,6 @@
   display: none;
 }
 
-/* 候选行里除文本以外的部分（作者摆的头像、副标题）由作者自己画；
-   这里只把强调色透出去，作者要用就取它 */
-[data-scope='mention'][data-part='item'][data-highlighted] [data-part='item-text'] {
-  color: var(--xh-mention-item-fg-highlight, var(--xh-_mention-item-highlight-fg));
-}
-
 [data-scope='mention'][data-part='item'][data-disabled] [data-part='item-text'] {
   color: var(--xh-fg-disabled);
 }
@@ -2539,6 +2533,29 @@
   color: var(--xh-popconfirm-confirm-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
 }
 
+/* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
+@keyframes xh-popconfirm-rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+/* 异步确认挂起：按钮转圈、指针挂起；不是禁用，焦点与对比度都保持 */
+[data-scope='popconfirm'][data-part='confirm-trigger'][data-loading] {
+  cursor: wait;
+}
+
+[data-scope='popconfirm'][data-part='confirm-trigger'][data-loading]::before {
+  content: '';
+  inline-size: 1em;
+  block-size: 1em;
+  margin-inline-end: var(--xh-space-1);
+  border: var(--xh-stroke-thin) solid transparent;
+  border-block-start-color: currentcolor;
+  border-radius: var(--xh-shape-pill);
+  animation: xh-popconfirm-rotate var(--xh-popconfirm-loading-duration, calc(var(--xh-duration-slow) * 2)) linear infinite;
+}
+
 [data-scope='popconfirm'][data-part='confirm-trigger']:hover {
   background: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
 }
@@ -2578,14 +2595,13 @@
 
   /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
   --xh-_popselect-trigger-bg: var(--xh-bg-canvas);
-  --xh-_popselect-trigger-border: var(--xh-border-default);
-  --xh-_popselect-trigger-border-hover: var(--xh-border-strong);
+  --xh-_popselect-trigger-border: var(--xh-border-control);
+  --xh-_popselect-trigger-border-hover: var(--xh-border-control-hover);
 
-  /* 强调色随语气走，只落在聚焦与选中上，正文文字色不动。
-     没写 data-tone 时 --xh-_tone 没被声明，三处都退回原来的取值 */
+  /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
+     没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
   --xh-_popselect-ring: var(--xh-ring-focus);
   --xh-_popselect-accent: var(--xh-_tone, var(--xh-bg-brand));
-  --xh-_popselect-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
   --xh-_popselect-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
   display: inline-flex;
@@ -2611,21 +2627,21 @@
 /* 形态只决定描边与底色怎么用，用哪族颜色由 data-tone 决定 */
 [data-scope='popselect'][data-part='root'][data-variant='outline'] {
   --xh-_popselect-trigger-bg: var(--xh-bg-canvas);
-  --xh-_popselect-trigger-border: var(--xh-border-default);
-  --xh-_popselect-trigger-border-hover: var(--xh-border-strong);
+  --xh-_popselect-trigger-border: var(--xh-border-control);
+  --xh-_popselect-trigger-border-hover: var(--xh-border-control-hover);
 }
 
 /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
 [data-scope='popselect'][data-part='root'][data-variant='subtle'] {
   --xh-_popselect-trigger-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   --xh-_popselect-trigger-border: transparent;
-  --xh-_popselect-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_popselect-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 [data-scope='popselect'][data-part='root'][data-variant='ghost'] {
   --xh-_popselect-trigger-bg: transparent;
   --xh-_popselect-trigger-border: transparent;
-  --xh-_popselect-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_popselect-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 [data-scope='popselect'][data-part='trigger'] {
@@ -2699,8 +2715,14 @@
   display: none;
 }
 
-/* 容器只是焦点域兜底落点，落焦不画环：高亮永远长在条目上 */
-[data-scope='popselect'][data-part='content']:focus-visible {
+/* 焦点落在容器上只有一种情形：指针打开、无选中值、还没有任何条目当锚点。
+   那一刻它认领着 Tab 位，环画在浮层内沿；有锚点时环长在条目上，容器不再画 */
+[data-scope='popselect'][data-part='content'][tabindex='0']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: calc(-1 * var(--xh-ring-width));
+}
+
+[data-scope='popselect'][data-part='content']:not([tabindex='0']):focus-visible {
   outline: none;
 }
 
@@ -2712,8 +2734,8 @@
   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));
-  padding-inline: var(--xh-popselect-item-px, var(--xh-control-px-sm));
+  padding-block: var(--xh-popselect-item-py, var(--xh-space-1_5));
+  padding-inline: var(--xh-popselect-item-px, var(--xh-control-px-md));
   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));
@@ -2722,11 +2744,14 @@
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
-/* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边 */
+/* 悬停与键盘锚点共用中性灰轻档：条目本身承载焦点，不另画描边 */
 [data-scope='popselect'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
-  background: var(--xh-popselect-item-bg-highlight, var(--xh-_popselect-item-highlight-bg));
+  background: var(--xh-popselect-item-bg-hover, var(--xh-bg-subtle));
 }
 
 /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，两者因此能同时看见 */
@@ -2735,7 +2760,14 @@
   font-weight: var(--xh-popselect-item-font-weight-selected, var(--xh-font-weight-medium));
 }
 
-[data-scope='popselect'][data-part='item']:focus {
+/* 键盘走到条目上要画环：轻档底色对白底只有 1.1:1，够不上焦点指示器的对比度要求。
+   指针悬停走的是程序化聚焦，鼠标模态下 :focus-visible 不匹配，不会误画 */
+[data-scope='popselect'][data-part='item']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: calc(-1 * var(--xh-ring-width));
+}
+
+[data-scope='popselect'][data-part='item']:focus:not(:focus-visible) {
   outline: none;
 }
 
@@ -3624,6 +3656,9 @@
   --xh-_tone-subtle-hover: color-mix(in oklab, var(--xh-_tone) 20%, var(--xh-bg-surface));
   --xh-_tone-subtle-active: color-mix(in oklab, var(--xh-_tone) 28%, var(--xh-bg-surface));
   --xh-_tone-border: color-mix(in oklab, var(--xh-_tone) 40%, var(--xh-bg-surface));
+  /* 控件的可操作区边界要 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));
 }
@@ -3669,6 +3704,25 @@
   --xh-_tone-shift: var(--xh-color-neutral-0);
 }
 
+/* 主色本体在各自的底上有两族够不到 3:1：黄在白底上只有 2.70，中性在深色底上只有 2.54。
+   语气色是固定原语、不随主题翻，所以这两族只能按主题各兜一次。
+   浅色是缺省态（不写 data-theme 也算浅色），深色靠属性选择器压过它 */
+[data-tone='warning'] {
+  --xh-_tone-border-control: var(--xh-color-warning-700);
+}
+
+[data-theme='dark'] [data-tone='warning'] {
+  --xh-_tone-border-control: var(--xh-color-warning-600);
+}
+
+[data-tone='neutral'] {
+  --xh-_tone-border-control: var(--xh-color-neutral-600);
+}
+
+[data-theme='dark'] [data-tone='neutral'] {
+  --xh-_tone-border-control: var(--xh-color-neutral-550);
+}
+
 /* styles/alert.css */
 [data-scope='alert'][data-part='root'] {
   /* 强调色随语气走，底色/描边/图标色都由它推导出来，换语气不必逐条属性各写一遍。
@@ -4552,7 +4606,7 @@
   --xh-_bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-active));
   --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
 
-  border-color: var(--xh-_tone-border, var(--xh-border-default));
+  border-color: var(--xh-_tone-border-control, var(--xh-border-control));
 }
 
 [data-scope='button'][data-part='root'][data-variant='ghost'] {
@@ -4770,7 +4824,7 @@
 
 /* 今天：只描一圈边，不占用选中色——今天与被选中是两件事，得能同时看得出来 */
 [data-scope='calendar'][data-part='cell-trigger'][data-today] {
-  border-color: var(--xh-calendar-today-border, var(--xh-border-strong));
+  border-color: var(--xh-calendar-today-border, var(--xh-border-control));
 }
 
 [data-scope='calendar'][data-part='cell-trigger'][data-selected] {
@@ -4999,7 +5053,7 @@
   justify-content: center;
   inline-size: var(--xh-carousel-trigger-size, var(--xh-control-h-md));
   block-size: var(--xh-carousel-trigger-size, var(--xh-control-h-md));
-  border: var(--xh-stroke-thin) solid var(--xh-carousel-trigger-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-carousel-trigger-border, var(--xh-border-control));
   border-radius: var(--xh-carousel-trigger-radius, var(--xh-shape-pill));
   background: var(--xh-carousel-trigger-bg, var(--xh-bg-surface));
   color: var(--xh-carousel-trigger-fg, var(--xh-fg-default));
@@ -5081,7 +5135,7 @@
   padding: 0;
   border: 0;
   border-radius: var(--xh-carousel-indicator-radius, var(--xh-radius-full));
-  background: var(--xh-carousel-indicator-bg, var(--xh-border-strong));
+  background: var(--xh-carousel-indicator-bg, var(--xh-border-control));
   font-size: 0;
   cursor: pointer;
   transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
@@ -5122,13 +5176,16 @@
 
   /* 形态档只换触发框的描边与底色这三个槽，浮层与列不跟着变：
      变的是「这是个输入位」的表达方式，不是弹出内容的表达方式 */
-  --xh-_cascader-border: var(--xh-border-default);
-  --xh-_cascader-border-hover: var(--xh-border-strong);
+  --xh-_cascader-border: var(--xh-border-control);
+  --xh-_cascader-border-hover: var(--xh-border-control-hover);
   --xh-_cascader-bg: var(--xh-bg-canvas);
 
   /* 选中条目的文字色随语气走，没写 data-tone 时退回品牌强调色 */
   --xh-_cascader-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
+  /* 展开路径的底色：随语气走淡底，没写 data-tone 时退回品牌淡底 */
+  --xh-_cascader-active-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
@@ -5144,15 +5201,15 @@
 /* 形态只决定描边与底色怎么用；用哪族颜色由 data-tone 决定，没写 tone 就沿用原来的中性配色 */
 /* outline 就是缺省那一身：描边加画布底，写出来只为让三档并列可读 */
 [data-scope='cascader'][data-part='root'][data-variant='outline'] {
-  --xh-_cascader-border: var(--xh-border-default);
-  --xh-_cascader-border-hover: var(--xh-border-strong);
+  --xh-_cascader-border: var(--xh-border-control);
+  --xh-_cascader-border-hover: var(--xh-border-control-hover);
   --xh-_cascader-bg: var(--xh-bg-canvas);
 }
 
 /* subtle 是填充式：底色接过「这里能点」的表达，描边随之让位 */
 [data-scope='cascader'][data-part='root'][data-variant='subtle'] {
   --xh-_cascader-border: transparent;
-  --xh-_cascader-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_cascader-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   --xh-_cascader-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
 }
 
@@ -5228,9 +5285,9 @@
 }
 
 /* trigger 是整个控件唯一的 Tab 停靠点（展开后停靠点才移进列里），落焦必须看得见。
-   语气落在环上：没写 data-tone 时 --xh-_tone 没被声明，退回原来的聚焦环色 */
+   聚焦环恒用固定环色，不随语气走 */
 [data-scope='cascader'][data-part='trigger']:focus-visible {
-  outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
   outline-offset: var(--xh-ring-offset);
 }
 
@@ -5281,6 +5338,11 @@
   display: none;
 }
 
+/* 没写内容就由皮肤画箭头；作者往部件里塞了自己的图形，这条规则即不命中 */
+[data-scope='cascader'][data-part='indicator']:empty::before {
+  content: '▾';
+}
+
 [data-scope='cascader'][data-part='indicator'][data-state='open'] {
   rotate: 180deg;
 }
@@ -5326,7 +5388,7 @@
 /* 清空按钮退出了 Tab 序列（tabindex=-1），正常操作走不到这里；
    留着是给程序化聚焦兜底，落焦时得看得见 */
 [data-scope='cascader'][data-part='clear-trigger']:focus-visible {
-  outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
   outline-offset: var(--xh-ring-offset);
 }
 
@@ -5378,16 +5440,24 @@
 }
 
 [data-scope='cascader'][data-part='content'][data-state='open'] {
+  /* 入场横移沿书写方向起始缘：位移量经私有槽供给关键帧，rtl 只翻符号 */
+  --xh-_cascader-slide: -0.25rem;
+
   animation: xh-cascader-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
 }
 
-/* 一列：自己定宽、自己滚。列与列之间用一条分隔线，比留白更能说明「这是下一级」 */
+[dir='rtl'] [data-scope='cascader'][data-part='content'][data-state='open'] {
+  --xh-_cascader-slide: 0.25rem;
+}
+
+/* 一列：宽度由内容撑出、设下限防塌，高度定死——切换展开路径时浮层不上下跳动，
+   溢出的条目在列内自己滚。列与列之间用一条分隔线，比留白更能说明「这是下一级」 */
 [data-scope='cascader'][data-part='column'] {
   display: flex;
   flex: none;
   flex-direction: column;
-  inline-size: var(--xh-cascader-column-w, 11rem);
-  max-block-size: var(--xh-cascader-column-max-h, 16rem);
+  min-inline-size: var(--xh-cascader-column-min-w, 7rem);
+  block-size: var(--xh-cascader-column-h, 11.25rem);
   padding-block: var(--xh-cascader-column-py, var(--xh-space-1));
   padding-inline: var(--xh-cascader-column-px, var(--xh-space-1));
   overflow-y: auto;
@@ -5405,8 +5475,14 @@
   border-inline-start: var(--xh-stroke-thin) solid var(--xh-cascader-column-divider, var(--xh-border-subtle));
 }
 
-/* 列不进 Tab 序列也不承载焦点，落焦不画环：高亮永远长在条目上 */
-[data-scope='cascader'][data-part='column']:focus-visible {
+/* 焦点落在根列上只有一种情形：指针打开、无选中值、还没有任何条目当锚点。
+   那一刻它认领着 Tab 位，环画在列内沿；有锚点时环长在条目上，列不再画 */
+[data-scope='cascader'][data-part='column'][tabindex='0']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: calc(-1 * var(--xh-ring-width));
+}
+
+[data-scope='cascader'][data-part='column']:not([tabindex='0']):focus-visible {
   outline: none;
 }
 
@@ -5414,8 +5490,9 @@
   display: flex;
   align-items: center;
   gap: var(--xh-cascader-row-gap, var(--xh-_cascader-gap));
-  padding-block: var(--xh-cascader-row-py, var(--xh-space-1));
-  padding-inline: var(--xh-cascader-row-px, var(--xh-control-px-sm));
+  max-inline-size: var(--xh-cascader-row-max-w, 25rem);
+  padding-block: var(--xh-cascader-row-py, var(--xh-space-1_5));
+  padding-inline: var(--xh-cascader-row-px, var(--xh-control-px-md));
   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));
@@ -5424,6 +5501,9 @@
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 /* 条目常挂不卸载：不属于当前这一列的那些靠 hidden 收起。
@@ -5432,14 +5512,21 @@
   display: none;
 }
 
-/* 指针悬停、键盘高亮与展开路径共用同一张底：三者都是「此刻停在这儿」，
-   data-highlighted 跟的是连接层记的焦点条目 */
-[data-scope='cascader'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted], [data-active]) {
-  background: var(--xh-cascader-row-bg-highlight, var(--xh-bg-subtle-hover));
+/* 底色分两档、靠色相分家：悬停与键盘锚点是中性灰轻档，展开路径是品牌淡底加粗。
+   hover 恒中性灰、不接语气槽——两档同色相的话路径就认不出来了。
+   悬停展开把路径挪走后留在原地的锚点降回轻档，每列至多一条路径高亮 */
+[data-scope='cascader'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
+  background: var(--xh-cascader-row-bg-hover, var(--xh-bg-subtle));
 }
 
-/* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给悬停，
-   两者因此能同时看见 */
+/* 必须排在轻档之后：锚点走到路径上时同特指度靠书写顺序压过轻档 */
+[data-scope='cascader'][data-part='item']:not([data-disabled])[data-active] {
+  background: var(--xh-cascader-row-bg-active, var(--xh-_cascader-active-bg));
+  font-weight: var(--xh-cascader-row-active-font-weight, var(--xh-font-weight-semibold));
+}
+
+/* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色强档归展开路径、轻档归悬停，
+   三者因此能同时看见 */
 [data-scope='cascader'][data-part='item'][data-selected] {
   color: var(--xh-cascader-row-fg-selected, var(--xh-_cascader-selected-fg));
   font-weight: var(--xh-cascader-row-selected-font-weight, var(--xh-font-weight-medium));
@@ -5447,7 +5534,7 @@
 
 /* 条目自己就是 option，环直接画在它身上；往内收，行是撑满列宽的，环画在外沿会被裁掉 */
 [data-scope='cascader'][data-part='item']:focus-visible {
-  outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
   outline-offset: calc(-1 * var(--xh-ring-width));
 }
 
@@ -5458,6 +5545,28 @@
   cursor: not-allowed;
 }
 
+/* 分支条目行尾画右向小箭头：不点开也看得出还有下一级。
+   全边框描好后抹掉块末与行首两边，剩下的直角旋成箭头；位置由 item-text 的 flex:1 顶到行尾 */
+[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;
+}
+
+[data-scope='cascader'][data-part='item'][data-branch][data-disabled]::after {
+  border-color: var(--xh-fg-disabled);
+}
+
 [data-scope='cascader'][data-part='item-text'] {
   flex: 1;
   min-inline-size: 0;
@@ -5472,7 +5581,7 @@
   flex: none;
   align-items: center;
   justify-content: center;
-  inline-size: var(--xh-cascader-indicator-size, var(--xh-control-indicator-size));
+  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)));
   visibility: hidden;
 }
@@ -5481,20 +5590,140 @@
   display: none;
 }
 
+/* 没写内容就由皮肤画勾；作者往部件里塞了自己的图形，这条规则即不命中 */
+[data-scope='cascader'][data-part='item-indicator']:empty::before {
+  content: '✓';
+}
+
 [data-scope='cascader'][data-part='item-indicator'][data-selected] {
   visibility: visible;
 }
 
+/* 级联勾选的半选态只在皮肤自绘（:empty）时露面画横杠：
+   作者塞了自己的选中图形时，半选放出来会顶着一个语义相反的勾，表达交还作者 */
+[data-scope='cascader'][data-part='item-indicator'][data-indeterminate]:empty {
+  visibility: visible;
+}
+
+[data-scope='cascader'][data-part='item-indicator'][data-indeterminate]:not([data-selected]):empty::before {
+  content: '−';
+  font-weight: var(--xh-font-weight-semibold);
+}
+
 [data-scope='cascader'][data-part='item-indicator'][data-disabled] {
   color: var(--xh-fg-disabled);
 }
 
+/* —— 搜索视图：输入框横占整行排在列上方，候选列表替换列视图 —— */
+[data-scope='cascader'][data-part='content']:has([data-part='input']:not([hidden])) {
+  flex-wrap: wrap;
+}
+
+[data-scope='cascader'][data-part='input'] {
+  flex-basis: 100%;
+  min-inline-size: 0;
+  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-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+  background: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--xh-cascader-input-font-size, var(--xh-_cascader-font-size));
+  line-height: var(--xh-leading-normal);
+}
+
+[data-scope='cascader'][data-part='input']:focus-visible {
+  outline: none;
+}
+
+[data-scope='cascader'][data-part='input'][hidden] {
+  display: none;
+}
+
+[data-scope='cascader'][data-part='search-list'] {
+  display: flex;
+  flex-basis: 100%;
+  flex-direction: column;
+  max-block-size: var(--xh-cascader-search-max-h, 11.25rem);
+  padding: var(--xh-cascader-search-p, var(--xh-space-1));
+  overflow-y: auto;
+}
+
+[data-scope='cascader'][data-part='search-list'][hidden] {
+  display: none;
+}
+
+/* 无候选时列表自身不占位，空态交给 empty 部件出面 */
+[data-scope='cascader'][data-part='search-list'][data-empty] {
+  padding: 0;
+}
+
+/* 搜索视图里列整体让位 */
+[data-scope='cascader'][data-part='content'][data-searching] [data-part='column'] {
+  display: none;
+}
+
+/* 候选与列内条目同一套行度量，虚拟高亮与悬停同用轻档 */
+[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));
+  overflow: hidden;
+  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));
+  line-height: var(--xh-cascader-row-leading, var(--xh-leading-normal));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+}
+
+[data-scope='cascader'][data-part='search-item']:not([data-disabled]):is(:hover, [data-highlighted]) {
+  background: var(--xh-cascader-row-bg-hover, var(--xh-bg-subtle));
+}
+
+[data-scope='cascader'][data-part='search-item'][data-disabled] {
+  color: var(--xh-fg-disabled);
+  cursor: not-allowed;
+}
+
+[data-scope='cascader'][data-part='search-item'][hidden] {
+  display: none;
+}
+
+/* —— 空态：当前视图没有条目时由 empty 部件出面，文案由适配器或作者供给，皮肤只管排版 —— */
+/* 根列没有条目时那条空列让位，占位面接管整个浮层 */
+[data-scope='cascader'][data-part='content'][data-empty] [data-part='column'] {
+  display: none;
+}
+
+[data-scope='cascader'][data-part='empty'] {
+  display: flex;
+  flex: 1 1 100%;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--xh-cascader-column-min-w, 7rem);
+  min-block-size: var(--xh-cascader-empty-min-h, 5rem);
+  padding: var(--xh-cascader-empty-p, var(--xh-space-3));
+  color: var(--xh-cascader-empty-fg, var(--xh-fg-subtle));
+  font-size: var(--xh-cascader-row-font-size, var(--xh-_cascader-font-size));
+}
+
+[data-scope='cascader'][data-part='empty'][hidden] {
+  display: none;
+}
+
 /* 浮层是横向长出来的：淡入之外再沿书写方向起始缘推一小段，观感上像列被「拉开」。
+   位移量从 content 上的私有槽取，rtl 侧翻符号后同一份关键帧两个方向都对。
    关键帧写在本文件里、名字带组件前缀，不动公共的那一份 */
 @keyframes xh-cascader-in {
   from {
     opacity: 0;
-    translate: -0.25rem 0;
+    translate: var(--xh-_cascader-slide, -0.25rem) 0;
   }
 
   to {
@@ -5523,7 +5752,7 @@
   inline-size: var(--xh-_checkbox-box);
   block-size: var(--xh-_checkbox-box);
   padding: 0;
-  border: 1px solid var(--xh-checkbox-border, var(--xh-border-default));
+  border: 1px solid var(--xh-checkbox-border, var(--xh-border-control));
   border-radius: var(--xh-radius-sm);
   background: var(--xh-checkbox-bg, var(--xh-bg-canvas));
   color: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
@@ -5666,19 +5895,19 @@
 /* 全选格与条目格共用同一套盒子，并成一条规则写：分开写迟早只改到一半，两个方框就此走形。
    尺寸与选中态照 checkbox 的 root 搬，同一份视觉语言在单体与集合里必须一致。
    trigger 那格没有对应的角色节点（anatomy 到 trigger 为止），只能由伪元素补出来 */
-[data-scope='checkbox-group'][data-part='item-control'],
+[data-scope='checkbox-group'][data-part='indicator'],
 [data-scope='checkbox-group'][data-part='trigger']::before {
   display: inline-flex;
   flex: none;
   align-items: center;
   justify-content: center;
-  inline-size: var(--xh-checkbox-group-control-size, 16px);
-  block-size: var(--xh-checkbox-group-control-size, 16px);
-  border: var(--xh-stroke-thin) solid var(--xh-checkbox-group-control-border, var(--xh-border-default));
-  border-radius: var(--xh-checkbox-group-control-radius, var(--xh-radius-sm));
-  background: var(--xh-checkbox-group-control-bg, var(--xh-bg-canvas));
-  color: var(--xh-checkbox-group-control-fg, var(--xh-fg-on-brand));
-  font-size: var(--xh-checkbox-group-control-font-size, 12px);
+  inline-size: var(--xh-checkbox-group-indicator-size, 16px);
+  block-size: var(--xh-checkbox-group-indicator-size, 16px);
+  border: var(--xh-stroke-thin) solid var(--xh-checkbox-group-indicator-border, var(--xh-border-control));
+  border-radius: var(--xh-checkbox-group-indicator-radius, var(--xh-radius-sm));
+  background: var(--xh-checkbox-group-indicator-bg, var(--xh-bg-canvas));
+  color: var(--xh-checkbox-group-indicator-fg, var(--xh-fg-on-brand));
+  font-size: var(--xh-checkbox-group-indicator-font-size, 12px);
   line-height: var(--xh-leading-none);
   transition:
     background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
@@ -5686,7 +5915,7 @@
 }
 
 /* content 只能给伪元素，绝不能并进上面那条：content 落在普通元素上会顶掉它的全部子节点，
-   item-control 里作者写的图标就此消失 */
+   indicator 里作者写的图标就此消失 */
 [data-scope='checkbox-group'][data-part='trigger']::before {
   content: '';
 }
@@ -5694,19 +5923,19 @@
 /* 悬停只加深空方框的描边。已选中的那一格必须排除：这条选择器的权重高过下面那条填色规则，
    不排除就会在悬停时把 brand 描边换回灰色，方框看起来"缺了一圈" */
 [data-scope='checkbox-group'][data-part='item']:not([data-disabled]):hover
-  [data-scope='checkbox-group'][data-part='item-control']:not([data-state='checked']) {
-  border-color: var(--xh-checkbox-group-control-border-hover, var(--xh-border-strong));
+  [data-scope='checkbox-group'][data-part='indicator']:not([data-state='checked']) {
+  border-color: var(--xh-checkbox-group-indicator-border-hover, var(--xh-border-control-hover));
 }
 
 /* 选中即填色：条目是二态，全选格三态里 all 与 some 都算"有值"，共用同一副填色 */
-[data-scope='checkbox-group'][data-part='item-control'][data-state='checked'],
+[data-scope='checkbox-group'][data-part='indicator'][data-state='checked'],
 [data-scope='checkbox-group'][data-part='trigger']:is([data-state='all'], [data-state='some'])::before {
-  border-color: var(--xh-checkbox-group-control-border-checked, var(--xh-bg-brand));
-  background: var(--xh-checkbox-group-control-bg-checked, var(--xh-bg-brand));
+  border-color: var(--xh-checkbox-group-indicator-border-checked, var(--xh-bg-brand));
+  background: var(--xh-checkbox-group-indicator-bg-checked, var(--xh-bg-brand));
 }
 
-/* 勾号由皮肤补，作者不必自己往 item-control 里塞字符 */
-[data-scope='checkbox-group'][data-part='item-control'][data-state='checked']::before {
+/* 勾号由皮肤补，作者不必自己往 indicator 里塞字符 */
+[data-scope='checkbox-group'][data-part='indicator'][data-state='checked']::before {
   content: '✓';
 }
 
@@ -5722,8 +5951,8 @@
 
 /* 校验失败标在每个方框上：root 上的 data-invalid 是唯一出处，条目自己不带这个属性 */
 [data-scope='checkbox-group'][data-part='root'][data-invalid]
-  [data-scope='checkbox-group'][data-part='item-control'] {
-  border-color: var(--xh-checkbox-group-control-border-invalid, var(--xh-color-danger-500));
+  [data-scope='checkbox-group'][data-part='indicator'] {
+  border-color: var(--xh-checkbox-group-indicator-border-invalid, var(--xh-color-danger-500));
 }
 
 [data-scope='checkbox-group'][data-part='item-text'] {
@@ -5766,7 +5995,7 @@
 /* 表单出口：连接层已经把整套视觉隐藏写进内联 style（absolute + 1px + clip-path），
    这里绝不能再补 display:none——那份输入必须留在布局里，原生校验提示要有处可贴。
    只补一条不吃指针，免得它挡住条目的点击 */
-[data-scope='checkbox-group'][data-part='item-hidden-input'] {
+[data-scope='checkbox-group'][data-part='hidden-input'] {
   pointer-events: none;
 }
 
@@ -5774,7 +6003,7 @@
    不补的话作者给节点加 hidden 后它照样显示 */
 [data-scope='checkbox-group'][data-part='root'][hidden],
 [data-scope='checkbox-group'][data-part='item'][hidden],
-[data-scope='checkbox-group'][data-part='item-control'][hidden],
+[data-scope='checkbox-group'][data-part='indicator'][hidden],
 [data-scope='checkbox-group'][data-part='trigger'][hidden] {
   display: none;
 }
@@ -5819,7 +6048,7 @@
   block-size: var(--xh-clipboard-input-h, var(--xh-control-h-md));
   padding-inline: var(--xh-clipboard-input-px, var(--xh-control-px-md));
   padding-block: 0;
-  border: var(--xh-stroke-thin) solid var(--xh-clipboard-input-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-clipboard-input-border, var(--xh-border-control));
   border-radius: var(--xh-clipboard-input-radius, var(--xh-shape-control));
   /* 只读态压低底色表示"改不动"，但仍可聚焦、可选中复制 */
   background: var(--xh-clipboard-input-bg, var(--xh-bg-subtle));
@@ -5847,7 +6076,7 @@
   block-size: var(--xh-clipboard-trigger-h, var(--xh-control-h-md));
   padding-inline: var(--xh-clipboard-trigger-px, var(--xh-control-px-md));
   padding-block: 0;
-  border: var(--xh-stroke-thin) solid var(--xh-clipboard-trigger-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-clipboard-trigger-border, var(--xh-border-control));
   border-radius: var(--xh-clipboard-trigger-radius, var(--xh-shape-control));
   background: var(--xh-clipboard-trigger-bg, var(--xh-bg-canvas));
   color: var(--xh-clipboard-trigger-fg, var(--xh-fg-default));
@@ -5870,7 +6099,7 @@
 }
 
 [data-scope='clipboard'][data-part='trigger']:hover {
-  border-color: var(--xh-clipboard-trigger-border-hover, var(--xh-border-strong));
+  border-color: var(--xh-clipboard-trigger-border-hover, var(--xh-border-control-hover));
   background: var(--xh-clipboard-trigger-bg-hover, var(--xh-bg-subtle-hover));
 }
 
@@ -6099,7 +6328,7 @@
   min-inline-size: var(--xh-color-picker-trigger-min-w, 9rem);
   block-size: var(--xh-color-picker-trigger-h, var(--xh-control-h-md));
   padding-inline: var(--xh-color-picker-trigger-px, var(--xh-control-px-md));
-  border: var(--xh-stroke-thin) solid var(--xh-color-picker-trigger-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-color-picker-trigger-border, var(--xh-border-control));
   border-radius: var(--xh-color-picker-trigger-radius, var(--xh-shape-control));
   background: var(--xh-color-picker-trigger-bg, var(--xh-bg-canvas));
   color: var(--xh-color-picker-trigger-fg, var(--xh-fg-default));
@@ -6111,7 +6340,7 @@
 }
 
 [data-scope='color-picker'][data-part='trigger']:hover:not(:disabled) {
-  border-color: var(--xh-color-picker-trigger-border-hover, var(--xh-border-strong));
+  border-color: var(--xh-color-picker-trigger-border-hover, var(--xh-border-control-hover));
 }
 
 [data-scope='color-picker'][data-part='trigger']:focus-visible {
@@ -6357,7 +6586,7 @@
   min-inline-size: 0;
   block-size: var(--xh-color-picker-input-h, var(--xh-control-h-sm));
   padding-inline: var(--xh-color-picker-input-px, var(--xh-control-px-sm));
-  border: var(--xh-stroke-thin) solid var(--xh-color-picker-input-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-color-picker-input-border, var(--xh-border-control));
   border-radius: var(--xh-color-picker-input-radius, var(--xh-shape-control));
   background: var(--xh-color-picker-input-bg, var(--xh-bg-canvas));
   color: inherit;
@@ -6397,7 +6626,7 @@
   inline-size: var(--xh-color-picker-action-size, 1.75rem);
   block-size: var(--xh-color-picker-action-size, 1.75rem);
   padding: 0;
-  border: var(--xh-stroke-thin) solid var(--xh-color-picker-action-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-color-picker-action-border, var(--xh-border-control));
   border-radius: var(--xh-color-picker-action-radius, var(--xh-shape-control));
   background: var(--xh-color-picker-action-bg, transparent);
   color: var(--xh-color-picker-action-fg, var(--xh-fg-muted));
@@ -6441,7 +6670,7 @@
   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-default));
+  border: var(--xh-stroke-thin) solid var(--xh-color-picker-swatch-border, var(--xh-border-control));
   border-radius: var(--xh-color-picker-swatch-radius, var(--xh-radius-sm));
   cursor: pointer;
 }
@@ -6478,6 +6707,22 @@
   display: none;
 }
 
+/* 连接层把它写成 type=hidden，UA 自己就不渲染；这里的视觉隐藏是给元素升级前那一瞬兜底
+   （作者手写的是一个普通 input，升级完成前它是可见的文本框）。
+   刻意不写 display：写了反而会盖掉 UA 对 type=hidden 的收起，把它显出来 */
+[data-scope='color-picker'][data-part='hidden-input'] {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 /* styles/combobox.css */
 [data-scope='combobox'][data-part='root'] {
   /* 尺寸档只换这五个私有槽，输入行、标题与候选都从 root 继承它们，
@@ -6490,14 +6735,13 @@
 
   /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
   --xh-_combobox-control-bg: var(--xh-bg-canvas);
-  --xh-_combobox-control-border: var(--xh-border-default);
-  --xh-_combobox-control-border-hover: var(--xh-border-strong);
+  --xh-_combobox-control-border: var(--xh-border-control);
+  --xh-_combobox-control-border-hover: var(--xh-border-control-hover);
 
-  /* 强调色随语气走，只落在聚焦与选中上，正文文字色不动。
-     没写 data-tone 时 --xh-_tone 没被声明，三处都退回原来的取值 */
+  /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
+     没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
   --xh-_combobox-ring: var(--xh-ring-focus);
   --xh-_combobox-accent: var(--xh-_tone, var(--xh-bg-brand));
-  --xh-_combobox-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
   --xh-_combobox-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
   display: inline-flex;
@@ -6533,21 +6777,21 @@
    形态只决定描边与底色怎么用，用哪族颜色由 data-tone 决定 */
 [data-scope='combobox'][data-part='root'][data-variant='outline'] {
   --xh-_combobox-control-bg: var(--xh-bg-canvas);
-  --xh-_combobox-control-border: var(--xh-border-default);
-  --xh-_combobox-control-border-hover: var(--xh-border-strong);
+  --xh-_combobox-control-border: var(--xh-border-control);
+  --xh-_combobox-control-border-hover: var(--xh-border-control-hover);
 }
 
 /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
 [data-scope='combobox'][data-part='root'][data-variant='subtle'] {
   --xh-_combobox-control-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   --xh-_combobox-control-border: transparent;
-  --xh-_combobox-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_combobox-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 [data-scope='combobox'][data-part='root'][data-variant='ghost'] {
   --xh-_combobox-control-bg: transparent;
   --xh-_combobox-control-border: transparent;
-  --xh-_combobox-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_combobox-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 [data-scope='combobox'][data-part='label'] {
@@ -6685,11 +6929,11 @@
   display: none;
 }
 
-/* 展开时箭头翻个面，指向与列表的去向一致；transition 要重写全份，只补一条会覆盖掉上面那条 */
-[data-scope='combobox'][data-part='trigger'] {
-  transition:
-    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-    rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+/* 展开时箭头翻个面，指向与列表的去向一致。转的是字形或作者塞的图形，不转按钮本体：
+   按钮自带悬停底色，整个按钮转会带着底色一起转 */
+[data-scope='combobox'][data-part='trigger']:empty::before,
+[data-scope='combobox'][data-part='trigger'] > * {
+  transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 /* 没写内容就由皮肤画箭头；作者往部件里塞了自己的图形，这条规则即不命中 */
@@ -6702,7 +6946,8 @@
   content: '✕';
 }
 
-[data-scope='combobox'][data-part='trigger'][data-state='open'] {
+[data-scope='combobox'][data-part='trigger'][data-state='open']:empty::before,
+[data-scope='combobox'][data-part='trigger'][data-state='open'] > * {
   rotate: 180deg;
 }
 
@@ -6795,7 +7040,7 @@
 [data-scope='combobox'][data-part='item-group-label'] {
   display: block;
   padding-block: var(--xh-combobox-group-label-py, var(--xh-space-1));
-  padding-inline: var(--xh-combobox-group-label-px, var(--xh-control-px-sm));
+  padding-inline: var(--xh-combobox-group-label-px, var(--xh-control-px-md));
   color: var(--xh-combobox-group-label-fg, var(--xh-fg-subtle));
   font-size: var(--xh-combobox-group-label-font-size, var(--xh-font-size-xs));
   font-weight: var(--xh-combobox-group-label-font-weight, var(--xh-font-weight-medium));
@@ -6811,8 +7056,8 @@
   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));
-  padding-inline: var(--xh-combobox-item-px, var(--xh-control-px-sm));
+  padding-block: var(--xh-combobox-item-py, var(--xh-space-1_5));
+  padding-inline: var(--xh-combobox-item-px, var(--xh-control-px-md));
   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));
@@ -6821,6 +7066,9 @@
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 /* 候选按需收起（作者自己藏掉某几条）时要让位，有 display 就得补这条 */
@@ -6828,10 +7076,10 @@
   display: none;
 }
 
-/* 只认 data-highlighted，不写 :hover：指针划过时连接层已经把高亮搬过来了，
+/* 键盘锚点走中性灰轻档。只认 data-highlighted，不写 :hover：指针划过时连接层已经把高亮搬过来了，
    两套底色各画各的会出现"鼠标停在 A 上、回车提交的却是 B" */
 [data-scope='combobox'][data-part='item'][data-highlighted]:not([data-disabled]) {
-  background: var(--xh-combobox-item-bg-highlight, var(--xh-_combobox-item-highlight-bg));
+  background: var(--xh-combobox-item-bg-hover, var(--xh-bg-subtle));
 }
 
 /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，
@@ -6921,7 +7169,7 @@
   align-items: flex-end;
   gap: var(--xh-composer-gap, var(--xh-control-gap-md));
   padding: var(--xh-composer-p, var(--xh-space-2));
-  border: var(--xh-stroke-thin) solid var(--xh-composer-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-composer-border, var(--xh-border-control));
   border-radius: var(--xh-composer-radius, var(--xh-shape-surface));
   background: var(--xh-composer-bg, var(--xh-bg-surface));
 }
@@ -7044,13 +7292,16 @@
   /* 尺寸档只换这四个私有槽，条目与分组标题都从 root 继承它们，
      换档不必给每个部件各写一条选择器。浮层在 positioner 里、也是 root 的后代，一并继承
      （display:contents 不影响继承：自定义属性沿 DOM 树传） */
-  --xh-_context-menu-item-py: var(--xh-space-2);
-  --xh-_context-menu-item-px: var(--xh-control-px-sm);
+  --xh-_context-menu-item-py: var(--xh-space-1_5);
+  --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);
 
-  /* 条目高亮底与标记位强调色随语气走。没写 data-tone 时这两个语气槽没被声明，各自退回原来的取值 */
-  --xh-_context-menu-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+  /* 打开子菜单的触发条目走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底。
+     悬停与键盘焦点恒中性灰轻档、不接语气槽——两档同色相的话打开路径就认不出来了 */
+  --xh-_context-menu-item-active-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+
+  /* 标记位强调色随语气走，没写 data-tone 时退回原来的取值 */
   --xh-_context-menu-accent: var(--xh-_tone, var(--xh-fg-subtle));
 
   display: contents;
@@ -7061,18 +7312,18 @@
 }
 
 /* —— 尺寸 —— */
-/* 缺省档写在上面的基础规则里。条目内外边距缺省档本就不在 control-h/px 那把尺上
-   （高度由 padding 撑出来、行内内缩取的是 sm 档），故按 space 档上下各挪一级 */
+/* 缺省档写在上面的基础规则里。条目高度由 padding 撑出来：
+   纵向走 space 档、行内内缩走 control-px 档（随密度轴），换档各挪一级 */
 [data-scope='context-menu'][data-part='root'][data-size='sm'] {
   --xh-_context-menu-item-py: var(--xh-space-1);
-  --xh-_context-menu-item-px: var(--xh-space-1);
+  --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-font-size-sm);
 }
 
 [data-scope='context-menu'][data-part='root'][data-size='lg'] {
-  --xh-_context-menu-item-py: var(--xh-space-3);
-  --xh-_context-menu-item-px: var(--xh-space-3);
+  --xh-_context-menu-item-py: var(--xh-space-2);
+  --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-font-size-lg);
 }
@@ -7122,8 +7373,14 @@
   display: none;
 }
 
-/* 容器只是焦点域兜底落点，落焦不画环：高亮永远长在条目上 */
-[data-scope='context-menu'][data-part='content']:focus-visible {
+/* 焦点落在容器上只有一种情形：指针打开、还没有任何条目当锚点。那一刻它认领着 Tab 位，
+   环画在浮层内沿，用户才看得出键盘此刻在哪儿；有锚点时环长在条目上，容器不再画 */
+[data-scope='context-menu'][data-part='content'][tabindex='0']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: calc(-1 * var(--xh-ring-width));
+}
+
+[data-scope='context-menu'][data-part='content']:not([tabindex='0']):focus-visible {
   outline: none;
 }
 
@@ -7175,10 +7432,13 @@
   border-radius: var(--xh-context-menu-item-radius, var(--xh-shape-control));
   color: var(--xh-context-menu-item-fg, var(--xh-fg-default));
   font-size: var(--xh-context-menu-item-font-size, var(--xh-_context-menu-font-size));
-  line-height: var(--xh-leading-none);
+  line-height: var(--xh-context-menu-item-leading, var(--xh-leading-normal));
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 /* 条目可以按需收起（按上下文过滤掉的命令），有 display 就得补这条 */
@@ -7186,14 +7446,28 @@
   display: none;
 }
 
-/* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边。
+/* 悬停与键盘焦点共用中性灰轻档：条目本身承载焦点，不另画描边。
    data-highlighted 跟的是连接层记的焦点条目，与 :focus 说的是同一件事，
    子部件够不着那个伪类，只能读这个标记 */
 [data-scope='context-menu'][data-part='item']:not([data-disabled]):is(:hover, :focus, [data-highlighted]) {
-  background: var(--xh-context-menu-item-bg-highlight, var(--xh-_context-menu-item-highlight-bg));
+  background: var(--xh-context-menu-item-bg-hover, var(--xh-bg-subtle));
+}
+
+/* 打开子菜单的触发条目是展开路径，走品牌淡底加粗强档。
+   必须排在轻档之后：悬停或焦点回到它身上时同特指度靠书写顺序压过轻档 */
+[data-scope='context-menu'][data-part='item']:not([data-disabled])[data-state='open'] {
+  background: var(--xh-context-menu-item-bg-active, var(--xh-_context-menu-item-active-bg));
+  font-weight: var(--xh-context-menu-item-active-font-weight, var(--xh-font-weight-semibold));
+}
+
+/* 键盘走到条目上要画环：轻档底色只有 1.1:1，够不上焦点指示器的对比度要求。
+   指针悬停走的是程序化聚焦，鼠标模态下 :focus-visible 不匹配，不会误画 */
+[data-scope='context-menu'][data-part='item']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: calc(-1 * var(--xh-ring-width));
 }
 
-[data-scope='context-menu'][data-part='item']:focus {
+[data-scope='context-menu'][data-part='item']:focus:not(:focus-visible) {
   outline: none;
 }
 
@@ -7244,11 +7518,15 @@
 }
 
 /* 箭头是旋转 45° 的方块，只保留朝向锚点那两条边的描边；
-   引擎不产出箭头偏移，因此沿交叉轴固定居中 */
+   交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
 [data-scope='context-menu'][data-part='arrow'] {
+  --xh-_context-menu-arrow-size: var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size));
+  --xh-_context-menu-arrow-x: 50%;
+  --xh-_context-menu-arrow-y: 50%;
+
   position: absolute;
-  inline-size: var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size));
-  block-size: var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size));
+  inline-size: var(--xh-_context-menu-arrow-size);
+  block-size: var(--xh-_context-menu-arrow-size);
   background: var(--xh-context-menu-bg, var(--xh-bg-surface));
   border: var(--xh-stroke-thin) solid var(--xh-context-menu-border, var(--xh-border-default));
   rotate: 45deg;
@@ -7259,29 +7537,29 @@
 }
 
 [data-scope='context-menu'][data-part='arrow'][data-placement^='bottom'] {
-  inset-block-start: calc(var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-inline-start: calc(50% - var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-block-start: calc(var(--xh-_context-menu-arrow-size) / -2);
+  inset-inline-start: calc(var(--xh-_context-menu-arrow-x) - var(--xh-_context-menu-arrow-size) / 2);
   border-block-end: 0;
   border-inline-end: 0;
 }
 
 [data-scope='context-menu'][data-part='arrow'][data-placement^='top'] {
-  inset-block-end: calc(var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-inline-start: calc(50% - var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-block-end: calc(var(--xh-_context-menu-arrow-size) / -2);
+  inset-inline-start: calc(var(--xh-_context-menu-arrow-x) - var(--xh-_context-menu-arrow-size) / 2);
   border-block-start: 0;
   border-inline-start: 0;
 }
 
 [data-scope='context-menu'][data-part='arrow'][data-placement^='right'] {
-  inset-inline-start: calc(var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-block-start: calc(50% - var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-inline-start: calc(var(--xh-_context-menu-arrow-size) / -2);
+  inset-block-start: calc(var(--xh-_context-menu-arrow-y) - var(--xh-_context-menu-arrow-size) / 2);
   border-block-start: 0;
   border-inline-end: 0;
 }
 
 [data-scope='context-menu'][data-part='arrow'][data-placement^='left'] {
-  inset-inline-end: calc(var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-block-start: calc(50% - var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-inline-end: calc(var(--xh-_context-menu-arrow-size) / -2);
+  inset-block-start: calc(var(--xh-_context-menu-arrow-y) - var(--xh-_context-menu-arrow-size) / 2);
   border-block-end: 0;
   border-inline-start: 0;
 }
@@ -7309,8 +7587,8 @@
   --xh-_date-field-label-font-size: var(--xh-text-label-size);
   /* 形态档只换这三个私有槽：底色与两档描边 */
   --xh-_date-field-control-bg: var(--xh-bg-canvas);
-  --xh-_date-field-control-border: var(--xh-border-default);
-  --xh-_date-field-control-border-hover: var(--xh-border-strong);
+  --xh-_date-field-control-border: var(--xh-border-control);
+  --xh-_date-field-control-border-hover: var(--xh-border-control-hover);
   /* 聚焦环与段位反白随语气走。没写 data-tone 时这几个 --xh-_tone* 没被声明，退回原来的焦点色与品牌色 */
   --xh-_date-field-ring: var(--xh-ring-focus);
   --xh-_date-field-segment-bg: var(--xh-_tone, var(--xh-bg-brand));
@@ -7340,15 +7618,15 @@
 /* 描边式：与缺省等价，写出来是为了三档形态在皮肤里都看得见 */
 [data-scope='date-field'][data-part='root'][data-variant='outline'] {
   --xh-_date-field-control-bg: var(--xh-bg-canvas);
-  --xh-_date-field-control-border: var(--xh-border-default);
-  --xh-_date-field-control-border-hover: var(--xh-border-strong);
+  --xh-_date-field-control-border: var(--xh-border-control);
+  --xh-_date-field-control-border-hover: var(--xh-border-control-hover);
 }
 
 /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
 [data-scope='date-field'][data-part='root'][data-variant='subtle'] {
   --xh-_date-field-control-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   --xh-_date-field-control-border: transparent;
-  --xh-_date-field-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_date-field-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 /* 无框式：底与边都让开，可见反馈只剩聚焦那一档 */
@@ -7540,7 +7818,7 @@
   block-size: var(--xh-date-picker-control-h, var(--xh-control-h-md));
   padding-inline: var(--xh-date-picker-control-px, var(--xh-control-px-md));
   padding-block: 0;
-  border: var(--xh-stroke-thin) solid var(--xh-date-picker-control-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-date-picker-control-border, var(--xh-border-control));
   border-radius: var(--xh-date-picker-control-radius, var(--xh-shape-control));
   background: var(--xh-date-picker-control-bg, var(--xh-bg-canvas));
   color: var(--xh-date-picker-control-fg, var(--xh-fg-default));
@@ -7553,7 +7831,7 @@
 
 /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
 [data-scope='date-picker'][data-part='control']:hover:not([data-disabled], [data-invalid]) {
-  border-color: var(--xh-date-picker-control-border-hover, var(--xh-border-strong));
+  border-color: var(--xh-date-picker-control-border-hover, var(--xh-border-control-hover));
 }
 
 /* 焦点落在某一段或某个按钮上，而边框长在 control 上：焦点环得由内向外借一层。
@@ -7715,6 +7993,70 @@
   display: none;
 }
 
+/* —— showTime：时间列贴在日历右侧、逐列滚动，确认按钮收口 ——
+   content 是 block，作者把日历与时间列包进一行排布；列自身只管滚与选项画法 */
+[data-scope='date-picker'][data-part='time-column'] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-block-size: var(--xh-date-picker-time-column-h, 14rem);
+  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));
+}
+
+[data-scope='date-picker'][data-part='time-column'][hidden] {
+  display: none;
+}
+
+[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);
+  font-size: var(--xh-font-size-sm);
+  line-height: var(--xh-leading-normal);
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+[data-scope='date-picker'][data-part='time-item']:hover {
+  background: var(--xh-date-picker-time-item-bg-hover, var(--xh-bg-subtle));
+}
+
+[data-scope='date-picker'][data-part='time-item'][data-selected] {
+  background: var(--xh-date-picker-time-item-bg-selected, var(--xh-bg-brand-subtle));
+  color: var(--xh-date-picker-time-item-fg-selected, var(--xh-fg-brand));
+  font-weight: var(--xh-font-weight-medium);
+}
+
+[data-scope='date-picker'][data-part='confirm-trigger'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--xh-control-h-sm);
+  padding-inline: var(--xh-control-px-sm);
+  border: none;
+  border-radius: var(--xh-shape-control);
+  background: var(--xh-date-picker-confirm-bg, var(--xh-bg-brand));
+  color: var(--xh-date-picker-confirm-fg, var(--xh-fg-on-brand));
+  font-size: var(--xh-font-size-sm);
+  cursor: pointer;
+}
+
+[data-scope='date-picker'][data-part='confirm-trigger']:hover {
+  background: var(--xh-date-picker-confirm-bg-hover, var(--xh-bg-brand-hover));
+}
+
+[data-scope='date-picker'][data-part='confirm-trigger']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+[data-scope='date-picker'][data-part='confirm-trigger'][hidden] {
+  display: none;
+}
+
 /* 浮层进场：淡入 + 轻微上浮。名字带组件前缀，不与公共关键帧抢名 */
 @keyframes xh-date-picker-in {
   from {
@@ -7967,7 +8309,7 @@
   gap: var(--xh-drawer-trigger-gap, var(--xh-control-gap-md));
   block-size: var(--xh-drawer-trigger-h, var(--xh-control-h-md));
   padding-inline: var(--xh-drawer-trigger-px, var(--xh-control-px-md));
-  border: var(--xh-stroke-thin) solid var(--xh-drawer-trigger-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-drawer-trigger-border, var(--xh-border-control));
   border-radius: var(--xh-drawer-trigger-radius, var(--xh-shape-control));
   background: var(--xh-drawer-trigger-bg, var(--xh-bg-canvas));
   color: var(--xh-drawer-trigger-fg, var(--xh-fg-default));
@@ -7987,14 +8329,14 @@
 
 [data-scope='drawer'][data-part='trigger']:hover:not(:disabled) {
   background: var(--xh-drawer-trigger-bg-hover, var(--xh-bg-subtle-hover));
-  border-color: var(--xh-drawer-trigger-border-hover, var(--xh-border-strong));
+  border-color: var(--xh-drawer-trigger-border-hover, var(--xh-border-control-hover));
 }
 
 /* 抽屉展开期间触发按钮压住不弹起：面板贴在视口边上，它和按钮往往离得很远，
    按钮自己得说明"这一扇是我开的"。 */
 [data-scope='drawer'][data-part='trigger'][data-state='open'] {
   background: var(--xh-drawer-trigger-bg-open, var(--xh-bg-subtle-active));
-  border-color: var(--xh-drawer-trigger-border-open, var(--xh-border-strong));
+  border-color: var(--xh-drawer-trigger-border-open, var(--xh-border-control-hover));
 }
 
 [data-scope='drawer'][data-part='trigger']:focus-visible {
@@ -8330,7 +8672,7 @@
   block-size: var(--xh-editable-input-h, var(--xh-control-h-md));
   padding-inline: var(--xh-editable-input-px, var(--xh-control-px-md));
   padding-block: 0;
-  border: var(--xh-stroke-thin) solid var(--xh-editable-input-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-editable-input-border, var(--xh-border-control));
   border-radius: var(--xh-editable-input-radius, var(--xh-shape-control));
   background: var(--xh-editable-input-bg, var(--xh-bg-canvas));
   color: var(--xh-editable-input-fg, var(--xh-fg-default));
@@ -8358,7 +8700,7 @@
 
 /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
 [data-scope='editable'][data-part='input']:hover:not(:disabled, [data-invalid]) {
-  border-color: var(--xh-editable-input-border-hover, var(--xh-border-strong));
+  border-color: var(--xh-editable-input-border-hover, var(--xh-border-control-hover));
 }
 
 [data-scope='editable'][data-part='input']:focus-visible {
@@ -8405,7 +8747,7 @@
   block-size: var(--xh-editable-trigger-h, var(--xh-control-h-sm));
   padding-inline: var(--xh-editable-trigger-px, var(--xh-control-px-sm));
   padding-block: 0;
-  border: var(--xh-stroke-thin) solid var(--xh-editable-trigger-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-editable-trigger-border, var(--xh-border-control));
   border-radius: var(--xh-editable-trigger-radius, var(--xh-shape-control));
   background: var(--xh-editable-trigger-bg, var(--xh-bg-subtle));
   color: var(--xh-editable-trigger-fg, var(--xh-fg-default));
@@ -8429,7 +8771,7 @@
 [data-scope='editable'][data-part='edit-trigger']:hover:not(:disabled),
 [data-scope='editable'][data-part='submit-trigger']:hover:not(:disabled),
 [data-scope='editable'][data-part='cancel-trigger']:hover:not(:disabled) {
-  border-color: var(--xh-editable-trigger-border-hover, var(--xh-border-strong));
+  border-color: var(--xh-editable-trigger-border-hover, var(--xh-border-control-hover));
   background: var(--xh-editable-trigger-bg-hover, var(--xh-bg-subtle-hover));
 }
 
@@ -8465,12 +8807,12 @@
 }
 
 [data-scope='editable'][data-part='submit-trigger']:hover:not(:disabled) {
-  border-color: var(--xh-editable-submit-bg-hover, var(--xh-bg-brand-hover));
+  border-color: var(--xh-editable-submit-border-hover, var(--xh-editable-submit-bg-hover, var(--xh-bg-brand-hover)));
   background: var(--xh-editable-submit-bg-hover, var(--xh-bg-brand-hover));
 }
 
 [data-scope='editable'][data-part='submit-trigger']:active:not(:disabled) {
-  border-color: var(--xh-editable-submit-bg-active, var(--xh-bg-brand-active));
+  border-color: var(--xh-editable-submit-border-active, var(--xh-editable-submit-bg-active, var(--xh-bg-brand-active)));
   background: var(--xh-editable-submit-bg-active, var(--xh-bg-brand-active));
 }
 
@@ -8481,23 +8823,54 @@
   gap: var(--xh-field-gap, var(--xh-space-1));
 }
 
-[data-scope='field'][data-part='label'] {
-  color: var(--xh-field-label-fg, var(--xh-fg-default));
-  font-size: var(--xh-field-label-font-size, var(--xh-text-label-size));
-  font-weight: var(--xh-field-label-font-weight, var(--xh-text-label-weight));
-  line-height: var(--xh-leading-none);
+/* 表单横排（标签左置）：字段转两列网格，标签列宽由表单的 --xh-form-label-w 统一给，
+   整表据此对齐；描述与错误文案跟着控件走第二列 */
+[data-scope='form'][data-part='root'][data-layout='horizontal'] [data-scope='field'][data-part='root'] {
+  display: grid;
+  grid-template-columns: var(--xh-form-label-w) minmax(0, 1fr);
+  column-gap: var(--xh-field-label-gap, var(--xh-space-3));
+  align-items: start;
 }
 
-[data-scope='field'][data-part='label'][data-disabled] {
-  color: var(--xh-field-label-fg-disabled, var(--xh-fg-subtle));
+[data-scope='form'][data-part='root'][data-layout='horizontal'] [data-scope='field'][data-part='label'] {
+  grid-column: 1;
+  justify-self: end;
+  /* 与控件的首行文字对齐：按控件高度撑一行再居中 */
+  line-height: var(--xh-control-h-md);
 }
 
-/* control 是作者自己的输入控件，这里只给一套可被覆盖的基础皮肤 */
+[data-scope='form'][data-part='root'][data-layout='horizontal'][data-label-align='start'] [data-scope='field'][data-part='label'] {
+  justify-self: start;
+}
+
+[data-scope='form'][data-part='root'][data-layout='horizontal'] [data-scope='field'][data-part='root'] > :not([data-part='label']) {
+  grid-column: 2;
+}
+
+[data-scope='field'][data-part='label'] {
+  color: var(--xh-field-label-fg, var(--xh-fg-default));
+  font-size: var(--xh-field-label-font-size, var(--xh-text-label-size));
+  font-weight: var(--xh-field-label-font-weight, var(--xh-text-label-weight));
+  line-height: var(--xh-leading-none);
+}
+
+[data-scope='field'][data-part='label'][data-disabled] {
+  color: var(--xh-field-label-fg-disabled, var(--xh-fg-subtle));
+}
+
+/* 必填星号：跟着根上的 data-required 亮，选填不标 */
+[data-scope='field'][data-part='root'][data-required] [data-part='label']::after {
+  content: '*';
+  margin-inline-start: var(--xh-space-1);
+  color: var(--xh-field-label-star, var(--xh-fg-danger));
+}
+
+/* control 是作者自己的输入控件，这里只给一套可被覆盖的基础皮肤 */
 [data-scope='field'][data-part='control'] {
   inline-size: 100%;
   block-size: var(--xh-field-control-h, var(--xh-control-h-md));
   padding-inline: var(--xh-field-control-px, var(--xh-control-px-md));
-  border: var(--xh-stroke-thin) solid var(--xh-field-control-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-field-control-border, var(--xh-border-control));
   border-radius: var(--xh-field-control-radius, var(--xh-shape-control));
   background: var(--xh-field-control-bg, var(--xh-bg-canvas));
   color: var(--xh-field-control-fg, var(--xh-fg-default));
@@ -8573,7 +8946,7 @@
   min-block-size: var(--xh-file-upload-dropzone-min-h, 8rem);
   padding-block: var(--xh-file-upload-dropzone-py, var(--xh-space-5));
   padding-inline: var(--xh-file-upload-dropzone-px, var(--xh-space-4));
-  border: var(--xh-stroke-thick) dashed var(--xh-file-upload-dropzone-border, var(--xh-border-default));
+  border: var(--xh-stroke-thick) dashed var(--xh-file-upload-dropzone-border, var(--xh-border-control));
   border-radius: var(--xh-file-upload-dropzone-radius, var(--xh-shape-surface));
   background: var(--xh-file-upload-dropzone-bg, var(--xh-bg-canvas));
   color: var(--xh-file-upload-dropzone-fg, var(--xh-fg-muted));
@@ -8592,7 +8965,7 @@
 
 /* hover 只在中性态换描边：invalid 与 dragging 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
 [data-scope='file-upload'][data-part='dropzone']:hover:not([data-disabled], [data-invalid], [data-dragging]) {
-  border-color: var(--xh-file-upload-dropzone-border-hover, var(--xh-border-strong));
+  border-color: var(--xh-file-upload-dropzone-border-hover, var(--xh-border-control-hover));
 }
 
 /* 投放区自己承载焦点（它就是那个大按钮），所以画环而不是 outline:none */
@@ -8627,7 +9000,7 @@
   gap: var(--xh-file-upload-trigger-gap, var(--xh-control-gap-md));
   block-size: var(--xh-file-upload-trigger-h, var(--xh-control-h-md));
   padding-inline: var(--xh-file-upload-trigger-px, var(--xh-control-px-md));
-  border: var(--xh-stroke-thin) solid var(--xh-file-upload-trigger-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-file-upload-trigger-border, var(--xh-border-control));
   border-radius: var(--xh-file-upload-trigger-radius, var(--xh-shape-control));
   background: var(--xh-file-upload-trigger-bg, var(--xh-bg-surface));
   color: var(--xh-file-upload-trigger-fg, var(--xh-fg-default));
@@ -8851,6 +9224,18 @@
   display: none;
 }
 
+/* 标签左置：标签列宽的缺省档在这儿，labelWidth 会以行内样式盖过它 */
+[data-scope='form'][data-part='root'][data-layout='horizontal'] {
+  --xh-form-label-w: 30%;
+}
+
+/* 横排一行流：字段并肩排，放不下自动折行 */
+[data-scope='form'][data-part='root'][data-layout='inline'] {
+  flex-flow: row wrap;
+  align-items: start;
+  column-gap: var(--xh-form-inline-gap, var(--xh-space-4));
+}
+
 /* 字段容器只管排版与状态标记：标题、控件、描述、错误文案都是里面那个 Field 的活儿 */
 [data-scope='form'][data-part='field-group'] {
   display: flex;
@@ -8943,7 +9328,7 @@
   block-size: var(--xh-form-trigger-h, var(--xh-control-h-md));
   padding-block: 0;
   padding-inline: var(--xh-form-trigger-px, var(--xh-control-px-md));
-  border: var(--xh-stroke-thin) solid var(--xh-form-trigger-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-form-trigger-border, var(--xh-border-control));
   border-radius: var(--xh-form-trigger-radius, var(--xh-shape-control));
   background: var(--xh-form-trigger-bg, var(--xh-bg-subtle));
   color: var(--xh-form-trigger-fg, var(--xh-fg-default));
@@ -8964,7 +9349,7 @@
 
 [data-scope='form'][data-part='submit-trigger']:hover:not(:disabled),
 [data-scope='form'][data-part='reset-trigger']:hover:not(:disabled) {
-  border-color: var(--xh-form-trigger-border-hover, var(--xh-border-strong));
+  border-color: var(--xh-form-trigger-border-hover, var(--xh-border-control-hover));
   background: var(--xh-form-trigger-bg-hover, var(--xh-bg-subtle-hover));
 }
 
@@ -8991,18 +9376,18 @@
 
 /* 提交是这一组里的主操作，给它一层实心底色区分开 */
 [data-scope='form'][data-part='submit-trigger']:not(:disabled) {
-  border-color: var(--xh-form-submit-bg, var(--xh-bg-brand));
+  border-color: var(--xh-form-submit-border, var(--xh-form-submit-bg, var(--xh-bg-brand)));
   background: var(--xh-form-submit-bg, var(--xh-bg-brand));
   color: var(--xh-form-submit-fg, var(--xh-fg-on-brand));
 }
 
 [data-scope='form'][data-part='submit-trigger']:hover:not(:disabled) {
-  border-color: var(--xh-form-submit-bg-hover, var(--xh-bg-brand-hover));
+  border-color: var(--xh-form-submit-border-hover, var(--xh-form-submit-bg-hover, var(--xh-bg-brand-hover)));
   background: var(--xh-form-submit-bg-hover, var(--xh-bg-brand-hover));
 }
 
 [data-scope='form'][data-part='submit-trigger']:active:not(:disabled) {
-  border-color: var(--xh-form-submit-bg-active, var(--xh-bg-brand-active));
+  border-color: var(--xh-form-submit-border-active, var(--xh-form-submit-bg-active, var(--xh-bg-brand-active)));
   background: var(--xh-form-submit-bg-active, var(--xh-bg-brand-active));
 }
 
@@ -9122,40 +9507,44 @@
 }
 
 /* 箭头是旋转 45° 的方块，只保留朝向锚点那两条边的描边；
-   引擎不产出箭头偏移，因此沿交叉轴固定居中 */
+   交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
 [data-scope='hover-card'][data-part='arrow'] {
+  --xh-_hover-card-arrow-size: var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size));
+  --xh-_hover-card-arrow-x: 50%;
+  --xh-_hover-card-arrow-y: 50%;
+
   position: absolute;
-  inline-size: var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size));
-  block-size: var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size));
+  inline-size: var(--xh-_hover-card-arrow-size);
+  block-size: var(--xh-_hover-card-arrow-size);
   border: var(--xh-stroke-thin) solid var(--xh-hover-card-border, var(--xh-border-default));
   background: var(--xh-hover-card-bg, var(--xh-bg-surface));
   rotate: 45deg;
 }
 
 [data-scope='hover-card'][data-part='arrow'][data-placement^='bottom'] {
-  inset-block-start: calc(var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-inline-start: calc(50% - var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-block-start: calc(var(--xh-_hover-card-arrow-size) / -2);
+  inset-inline-start: calc(var(--xh-_hover-card-arrow-x) - var(--xh-_hover-card-arrow-size) / 2);
   border-block-end: 0;
   border-inline-end: 0;
 }
 
 [data-scope='hover-card'][data-part='arrow'][data-placement^='top'] {
-  inset-block-end: calc(var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-inline-start: calc(50% - var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-block-end: calc(var(--xh-_hover-card-arrow-size) / -2);
+  inset-inline-start: calc(var(--xh-_hover-card-arrow-x) - var(--xh-_hover-card-arrow-size) / 2);
   border-block-start: 0;
   border-inline-start: 0;
 }
 
 [data-scope='hover-card'][data-part='arrow'][data-placement^='right'] {
-  inset-inline-start: calc(var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-block-start: calc(50% - var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-inline-start: calc(var(--xh-_hover-card-arrow-size) / -2);
+  inset-block-start: calc(var(--xh-_hover-card-arrow-y) - var(--xh-_hover-card-arrow-size) / 2);
   border-block-start: 0;
   border-inline-end: 0;
 }
 
 [data-scope='hover-card'][data-part='arrow'][data-placement^='left'] {
-  inset-inline-end: calc(var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-block-start: calc(50% - var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-inline-end: calc(var(--xh-_hover-card-arrow-size) / -2);
+  inset-block-start: calc(var(--xh-_hover-card-arrow-y) - var(--xh-_hover-card-arrow-size) / 2);
   border-block-end: 0;
   border-inline-start: 0;
 }
@@ -9265,6 +9654,182 @@
   display: none;
 }
 
+/* styles/image-viewer.css */
+[data-scope='image-viewer'][data-part='backdrop'] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--xh-layer-modal);
+  /* 看片要压住页面底色，遮罩比普通对话框更深 */
+  background: var(--xh-image-viewer-backdrop-bg, color-mix(in oklab, var(--xh-color-neutral-950) 78%, transparent));
+}
+
+[data-scope='image-viewer'][data-part='backdrop'][data-state='open'] {
+  animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+}
+
+[data-scope='image-viewer'][data-part='backdrop'][data-state='closed'] {
+  animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
+}
+
+[data-scope='image-viewer'][data-part='positioner'] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--xh-layer-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-scope='image-viewer'][data-part='content'] {
+  position: relative;
+  inline-size: 100%;
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  /* 深色底上的工具条与计数固定用浅字，不随主题翻 */
+  color: var(--xh-image-viewer-fg, var(--xh-color-neutral-0));
+}
+
+[data-scope='image-viewer'][data-part='content'][data-state='open'] {
+  animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+}
+
+[data-scope='image-viewer'][data-part='content'][data-state='closed'] {
+  animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
+}
+
+[data-scope='image-viewer'][data-part='content'][hidden] {
+  display: none;
+}
+
+[data-scope='image-viewer'][data-part='viewport'] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  cursor: grab;
+  /* 平移与滚轮都归指针会话，浏览器手势不抢 */
+  touch-action: none;
+}
+
+[data-scope='image-viewer'][data-part='viewport'][data-panning] {
+  cursor: grabbing;
+}
+
+[data-scope='image-viewer'][data-part='image'] {
+  max-inline-size: 90%;
+  max-block-size: 85%;
+  user-select: none;
+  /* 变换是内联 style 写的，只给缩放旋转一点缓动；拖拽平移要跟手，不缓 */
+  transition: transform var(--xh-duration-fast) var(--xh-ease-out);
+}
+
+[data-scope='image-viewer'][data-part='image'][data-panning] {
+  transition: none;
+}
+
+/* —— 悬浮件共用：半透明深底加浅字 —— */
+[data-scope='image-viewer'][data-part='toolbar'],
+[data-scope='image-viewer'][data-part='counter'],
+[data-scope='image-viewer'][data-part='prev-trigger'],
+[data-scope='image-viewer'][data-part='next-trigger'],
+[data-scope='image-viewer'][data-part='close-trigger'] {
+  position: absolute;
+  z-index: 1;
+  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);
+}
+
+[data-scope='image-viewer'][data-part='toolbar'] {
+  inset-block-end: var(--xh-space-6);
+  inset-inline-start: 50%;
+  translate: -50% 0;
+  display: flex;
+  align-items: center;
+  gap: var(--xh-space-1);
+  padding: var(--xh-space-1_5) var(--xh-space-3);
+}
+
+/* 工具条里的按钮：底色交给工具条，本体只管命中区 */
+[data-scope='image-viewer'][data-part='toolbar'] > [data-part] {
+  position: static;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--xh-control-action-size);
+  block-size: var(--xh-control-action-size);
+  background: none;
+  border: none;
+  border-radius: var(--xh-shape-control);
+  color: inherit;
+  font-size: var(--xh-glyph-size-sm);
+  cursor: pointer;
+}
+
+[data-scope='image-viewer'][data-part='counter'] {
+  inset-block-start: var(--xh-space-6);
+  inset-inline-start: 50%;
+  translate: -50% 0;
+  padding: var(--xh-space-1) var(--xh-space-3);
+  font-size: var(--xh-font-size-sm);
+}
+
+[data-scope='image-viewer'][data-part='prev-trigger'],
+[data-scope='image-viewer'][data-part='next-trigger'],
+[data-scope='image-viewer'][data-part='close-trigger'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--xh-control-h-lg);
+  block-size: var(--xh-control-h-lg);
+  font-size: var(--xh-glyph-size-md);
+  cursor: pointer;
+}
+
+[data-scope='image-viewer'][data-part='prev-trigger'] {
+  inset-inline-start: var(--xh-space-6);
+  inset-block-start: 50%;
+  translate: 0 -50%;
+}
+
+[data-scope='image-viewer'][data-part='next-trigger'] {
+  inset-inline-end: var(--xh-space-6);
+  inset-block-start: 50%;
+  translate: 0 -50%;
+}
+
+[data-scope='image-viewer'][data-part='close-trigger'] {
+  inset-block-start: var(--xh-space-6);
+  inset-inline-end: var(--xh-space-6);
+}
+
+[data-scope='image-viewer'] button[data-part]:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+[data-scope='image-viewer'] button[data-part]:disabled {
+  opacity: var(--xh-state-disabled-opacity);
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-scope='image-viewer'][data-part='backdrop'],
+  [data-scope='image-viewer'][data-part='content'] {
+    animation-duration: 0.01ms;
+  }
+
+  [data-scope='image-viewer'][data-part='image'] {
+    transition: none;
+  }
+}
+
 /* styles/listbox.css */
 [data-scope='listbox'][data-part='root'] {
   display: flex;
@@ -9341,7 +9906,7 @@
 [data-scope='listbox'][data-part='item-group-label'] {
   display: block;
   padding-block: var(--xh-listbox-group-label-py, var(--xh-space-1));
-  padding-inline: var(--xh-listbox-group-label-px, var(--xh-control-px-sm));
+  padding-inline: var(--xh-listbox-group-label-px, var(--xh-control-px-md));
   color: var(--xh-listbox-group-label-fg, var(--xh-fg-subtle));
   font-size: var(--xh-listbox-group-label-font-size, var(--xh-font-size-xs));
   font-weight: var(--xh-listbox-group-label-font-weight, var(--xh-font-weight-medium));
@@ -9361,8 +9926,8 @@
   display: flex;
   align-items: center;
   gap: var(--xh-listbox-item-gap, var(--xh-control-gap-md));
-  padding-block: var(--xh-listbox-item-py, var(--xh-space-1));
-  padding-inline: var(--xh-listbox-item-px, var(--xh-control-px-sm));
+  padding-block: var(--xh-listbox-item-py, var(--xh-space-1_5));
+  padding-inline: var(--xh-listbox-item-px, var(--xh-control-px-md));
   border-radius: var(--xh-listbox-item-radius, var(--xh-shape-control));
   color: var(--xh-listbox-item-fg, var(--xh-fg-default));
   font-size: var(--xh-listbox-item-font-size, var(--xh-text-body-size));
@@ -9371,6 +9936,9 @@
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 /* 条目可以按需收起（过滤掉的选项），有 display 就得补这条 */
@@ -9378,10 +9946,10 @@
   display: none;
 }
 
-/* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边。
-   data-highlighted 跟的是连接层记的焦点条目，与选中互相独立 */
+/* 悬停与键盘锚点共用中性灰轻档：data-highlighted 跟的是连接层记的焦点条目，
+   与选中互相独立 */
 [data-scope='listbox'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
-  background: var(--xh-listbox-item-bg-highlight, var(--xh-bg-subtle-hover));
+  background: var(--xh-listbox-item-bg-hover, var(--xh-bg-subtle));
 }
 
 /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，
@@ -9522,13 +10090,14 @@
 [data-scope='menu'][data-part='content'] {
   /* 尺寸档只换这四个私有槽，条目从 content 继承它们，换档不必给每个部件各写一条选择器。
      菜单没有 root 部件（浮层树的最外层就是 content），三轴属性都落在这里 */
-  --xh-_menu-item-py: var(--xh-space-2);
-  --xh-_menu-item-px: var(--xh-control-px-sm);
+  --xh-_menu-item-py: var(--xh-space-1_5);
+  --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);
 
-  /* 条目高亮底随语气走。没写 data-tone 时 --xh-_tone-subtle-hover 没被声明，退回原来的取值 */
-  --xh-_menu-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+  /* 打开子菜单的触发条目走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底。
+     悬停与键盘焦点恒中性灰轻档、不接语气槽——两档同色相的话打开路径就认不出来了 */
+  --xh-_menu-item-active-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
 
   display: flex;
   flex-direction: column;
@@ -9559,18 +10128,18 @@
 }
 
 /* —— 尺寸 —— */
-/* 缺省档写在 content 的基础规则里。条目内外边距缺省档本就不在 control-h/px 那把尺上
-   （高度由 padding 撑出来、行内内缩取的是 sm 档），故按 space 档上下各挪一级 */
+/* 缺省档写在 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-px: var(--xh-space-1);
+  --xh-_menu-item-px: var(--xh-control-px-sm);
   --xh-_menu-item-gap: var(--xh-control-gap-sm);
   --xh-_menu-font-size: var(--xh-font-size-sm);
 }
 
 [data-scope='menu'][data-part='content'][data-size='lg'] {
-  --xh-_menu-item-py: var(--xh-space-3);
-  --xh-_menu-item-px: var(--xh-space-3);
+  --xh-_menu-item-py: var(--xh-space-2);
+  --xh-_menu-item-px: var(--xh-control-px-lg);
   --xh-_menu-item-gap: var(--xh-control-gap-lg);
   --xh-_menu-font-size: var(--xh-font-size-lg);
 }
@@ -9584,15 +10153,25 @@
   border-radius: var(--xh-menu-item-radius, var(--xh-shape-control));
   color: var(--xh-menu-item-fg, var(--xh-fg-default));
   font-size: var(--xh-menu-item-font-size, var(--xh-_menu-font-size));
-  line-height: var(--xh-leading-none);
+  line-height: var(--xh-menu-item-leading, var(--xh-leading-normal));
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
-/* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边 */
+/* 悬停与键盘焦点共用中性灰轻档：条目本身承载焦点，不另画描边 */
 [data-scope='menu'][data-part='item']:not([data-disabled]):is(:hover, :focus) {
-  background: var(--xh-menu-item-bg-highlight, var(--xh-_menu-item-highlight-bg));
+  background: var(--xh-menu-item-bg-hover, var(--xh-bg-subtle));
+}
+
+/* 打开子菜单的触发条目是展开路径，走品牌淡底加粗强档。
+   必须排在轻档之后：悬停或焦点回到它身上时同特指度靠书写顺序压过轻档 */
+[data-scope='menu'][data-part='item']:not([data-disabled])[data-state='open'] {
+  background: var(--xh-menu-item-bg-active, var(--xh-_menu-item-active-bg));
+  font-weight: var(--xh-menu-item-active-font-weight, var(--xh-font-weight-semibold));
 }
 
 [data-scope='menu'][data-part='item']:focus {
@@ -9611,40 +10190,44 @@
 }
 
 /* 箭头是旋转 45° 的方块，只保留朝向锚点那两条边的描边；
-   引擎不产出箭头偏移，因此沿交叉轴固定居中 */
+   交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
 [data-scope='menu'][data-part='arrow'] {
+  --xh-_menu-arrow-size: var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size));
+  --xh-_menu-arrow-x: 50%;
+  --xh-_menu-arrow-y: 50%;
+
   position: absolute;
-  inline-size: var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size));
-  block-size: var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size));
+  inline-size: var(--xh-_menu-arrow-size);
+  block-size: var(--xh-_menu-arrow-size);
   background: var(--xh-menu-bg, var(--xh-bg-surface));
   border: var(--xh-stroke-thin) solid var(--xh-menu-border, var(--xh-border-default));
   rotate: 45deg;
 }
 
 [data-scope='menu'][data-part='arrow'][data-placement^='bottom'] {
-  inset-block-start: calc(var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-inline-start: calc(50% - var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-block-start: calc(var(--xh-_menu-arrow-size) / -2);
+  inset-inline-start: calc(var(--xh-_menu-arrow-x) - var(--xh-_menu-arrow-size) / 2);
   border-block-end: 0;
   border-inline-end: 0;
 }
 
 [data-scope='menu'][data-part='arrow'][data-placement^='top'] {
-  inset-block-end: calc(var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-inline-start: calc(50% - var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-block-end: calc(var(--xh-_menu-arrow-size) / -2);
+  inset-inline-start: calc(var(--xh-_menu-arrow-x) - var(--xh-_menu-arrow-size) / 2);
   border-block-start: 0;
   border-inline-start: 0;
 }
 
 [data-scope='menu'][data-part='arrow'][data-placement^='right'] {
-  inset-inline-start: calc(var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-block-start: calc(50% - var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-inline-start: calc(var(--xh-_menu-arrow-size) / -2);
+  inset-block-start: calc(var(--xh-_menu-arrow-y) - var(--xh-_menu-arrow-size) / 2);
   border-block-start: 0;
   border-inline-end: 0;
 }
 
 [data-scope='menu'][data-part='arrow'][data-placement^='left'] {
-  inset-inline-end: calc(var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-block-start: calc(50% - var(--xh-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-inline-end: calc(var(--xh-_menu-arrow-size) / -2);
+  inset-block-start: calc(var(--xh-_menu-arrow-y) - var(--xh-_menu-arrow-size) / 2);
   border-block-end: 0;
   border-inline-start: 0;
 }
@@ -9656,14 +10239,14 @@
      换档不必给每个部件各写一条选择器。菜单浮层在 positioner 里、也是 root 的后代，一并继承 */
   --xh-_menubar-trigger-py: var(--xh-space-1);
   --xh-_menubar-trigger-px: var(--xh-control-px-sm);
-  --xh-_menubar-item-py: var(--xh-space-2);
-  --xh-_menubar-item-px: var(--xh-control-px-sm);
+  --xh-_menubar-item-py: var(--xh-space-1_5);
+  --xh-_menubar-item-px: var(--xh-control-px-md);
   --xh-_menubar-font-size: var(--xh-text-body-size);
 
-  /* 高亮底随语气走：展开着的那张菜单的 trigger 与菜单里的高亮条目共用这一档。
-     没写 data-tone 时 --xh-_tone-subtle-hover 没被声明，退回原来的中性底。
+  /* 展开着的那张菜单的 trigger 走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底。
+     悬停与键盘焦点恒中性灰轻档、不接语气槽——两档同色相的话哪张开着就认不出来了。
      聚焦环不在其列，它恒是 --xh-ring-focus */
-  --xh-_menubar-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+  --xh-_menubar-active-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
 
   display: flex;
   align-items: center;
@@ -9685,21 +10268,21 @@
 }
 
 /* —— 尺寸 —— */
-/* 缺省档写在上面的基础规则里。内边距的缺省档已经落在控件内边距尺的 sm 那一格，
-   往下没有更小的一格，sm 档改取空间尺；lg 档回到控件尺的下一格 */
+/* 缺省档写在上面的基础规则里。trigger 的行内内缩缺省落在控件尺 sm 档、再往下取空间尺；
+   条目纵向走 space 档、行内内缩走 control-px 档（随密度轴），换档各挪一级 */
 [data-scope='menubar'][data-part='root'][data-size='sm'] {
   --xh-_menubar-trigger-py: var(--xh-space-0_5);
   --xh-_menubar-trigger-px: var(--xh-space-1_5);
-  --xh-_menubar-item-py: var(--xh-space-1_5);
-  --xh-_menubar-item-px: var(--xh-space-1_5);
+  --xh-_menubar-item-py: var(--xh-space-1);
+  --xh-_menubar-item-px: var(--xh-control-px-sm);
   --xh-_menubar-font-size: var(--xh-font-size-sm);
 }
 
 [data-scope='menubar'][data-part='root'][data-size='lg'] {
   --xh-_menubar-trigger-py: var(--xh-space-2);
   --xh-_menubar-trigger-px: var(--xh-control-px-md);
-  --xh-_menubar-item-py: var(--xh-space-3);
-  --xh-_menubar-item-px: var(--xh-control-px-md);
+  --xh-_menubar-item-py: var(--xh-space-2);
+  --xh-_menubar-item-px: var(--xh-control-px-lg);
   --xh-_menubar-font-size: var(--xh-font-size-lg);
 }
 
@@ -9729,15 +10312,23 @@
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 [data-scope='menubar'][data-part='trigger'][hidden] {
   display: none;
 }
 
-/* 展开着的那一项与指针悬停共用一套底色：菜单栏里"哪一张开着"必须一眼看得出来 */
-[data-scope='menubar'][data-part='trigger']:not([data-disabled]):is(:hover, [data-state='open']) {
-  background: var(--xh-menubar-trigger-bg-active, var(--xh-_menubar-highlight-bg));
+/* 指针悬停走中性灰轻档 */
+[data-scope='menubar'][data-part='trigger']:not([data-disabled]):hover {
+  background: var(--xh-menubar-trigger-bg-hover, var(--xh-bg-subtle));
+}
+
+/* 展开着的那一张是打开路径，走品牌淡底强档：菜单栏里"哪一张开着"必须一眼看得出来。
+   不加粗：横排的栏加粗会推挤相邻触发器。
+   必须排在轻档之后：指针回到它身上时同特指度靠书写顺序压过轻档 */
+[data-scope='menubar'][data-part='trigger']:not([data-disabled])[data-state='open'] {
+  background: var(--xh-menubar-trigger-bg-active, var(--xh-_menubar-active-bg));
 }
 
 /* trigger 自带 Tab 位（整条菜单栏唯一的那个），必须画得出焦点 */
@@ -9840,10 +10431,13 @@
   border-radius: var(--xh-menubar-item-radius, var(--xh-shape-control));
   color: var(--xh-menubar-item-fg, var(--xh-fg-default));
   font-size: var(--xh-menubar-item-font-size, var(--xh-_menubar-font-size));
-  line-height: var(--xh-leading-none);
+  line-height: var(--xh-menubar-item-leading, var(--xh-leading-normal));
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 /* 条目可以按需收起（按上下文过滤掉的命令），有 display 就得补这条 */
@@ -9851,11 +10445,11 @@
   display: none;
 }
 
-/* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边。
+/* 悬停与键盘焦点共用中性灰轻档：条目本身承载焦点，不另画描边。
    data-highlighted 跟的是连接层记的焦点条目，与 :focus 说的是同一件事，
    子部件够不着那个伪类，只能读这个标记 */
 [data-scope='menubar'][data-part='item']:not([data-disabled]):is(:hover, :focus, [data-highlighted]) {
-  background: var(--xh-menubar-item-bg-highlight, var(--xh-_menubar-highlight-bg));
+  background: var(--xh-menubar-item-bg-hover, var(--xh-bg-subtle));
 }
 
 [data-scope='menubar'][data-part='item']:focus {
@@ -10200,18 +10794,18 @@
 
   /* 形态档只换这几个私有槽：输入框的底与描边，加减钮的底与描边 */
   --xh-_number-field-bg: var(--xh-bg-canvas);
-  --xh-_number-field-border: var(--xh-border-default);
-  --xh-_number-field-border-hover: var(--xh-border-strong);
+  --xh-_number-field-border: var(--xh-border-control);
+  --xh-_number-field-border-hover: var(--xh-border-control-hover);
   --xh-_number-field-trigger-bg: var(--xh-bg-subtle);
   --xh-_number-field-trigger-bg-hover: var(--xh-bg-subtle-hover);
   --xh-_number-field-trigger-bg-active: var(--xh-bg-subtle-active);
-  --xh-_number-field-trigger-border: var(--xh-border-default);
-  --xh-_number-field-trigger-border-hover: var(--xh-border-strong);
+  --xh-_number-field-trigger-border: var(--xh-border-control);
+  --xh-_number-field-trigger-border-hover: var(--xh-border-control-hover);
 
   /* 语气只落在聚焦这一处：环与聚焦态描边。框里的数字不归它管。
      没写 data-tone 时 --xh-_tone 没被声明，退回原来的聚焦环色与常态描边 */
   --xh-_number-field-ring: var(--xh-ring-focus);
-  --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-default)));
+  --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-control)));
 
   display: inline-flex;
   flex-direction: column;
@@ -10246,14 +10840,14 @@
    输入框没有实心档：填满一个要往里打字的框，字与底就没法同时读 */
 [data-scope='number-field'][data-part='root'][data-variant='outline'] {
   --xh-_number-field-bg: var(--xh-bg-canvas);
-  --xh-_number-field-border: var(--xh-border-default);
-  --xh-_number-field-border-hover: var(--xh-border-strong);
+  --xh-_number-field-border: var(--xh-border-control);
+  --xh-_number-field-border-hover: var(--xh-border-control-hover);
   --xh-_number-field-trigger-bg: var(--xh-bg-subtle);
   --xh-_number-field-trigger-bg-hover: var(--xh-bg-subtle-hover);
   --xh-_number-field-trigger-bg-active: var(--xh-bg-subtle-active);
-  --xh-_number-field-trigger-border: var(--xh-border-default);
-  --xh-_number-field-trigger-border-hover: var(--xh-border-strong);
-  --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-default)));
+  --xh-_number-field-trigger-border: var(--xh-border-control);
+  --xh-_number-field-trigger-border-hover: var(--xh-border-control-hover);
+  --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-control)));
 }
 
 /* 填充式：底色顶替描边表达边界。描边只退成透明而不去掉，1px 的位置留着，
@@ -10261,26 +10855,26 @@
 [data-scope='number-field'][data-part='root'][data-variant='subtle'] {
   --xh-_number-field-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   --xh-_number-field-border: transparent;
-  --xh-_number-field-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_number-field-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   --xh-_number-field-trigger-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   --xh-_number-field-trigger-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
   --xh-_number-field-trigger-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
   --xh-_number-field-trigger-border: transparent;
-  --xh-_number-field-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
-  --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-default));
+  --xh-_number-field-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
+  --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-control));
 }
 
 /* 无框：底与描边都透明，平时只看得见数字，悬停与聚焦才浮出边界 */
 [data-scope='number-field'][data-part='root'][data-variant='ghost'] {
   --xh-_number-field-bg: transparent;
   --xh-_number-field-border: transparent;
-  --xh-_number-field-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_number-field-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   --xh-_number-field-trigger-bg: transparent;
   --xh-_number-field-trigger-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle-hover));
   --xh-_number-field-trigger-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
   --xh-_number-field-trigger-border: transparent;
-  --xh-_number-field-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
-  --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-default));
+  --xh-_number-field-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
+  --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-control));
 }
 
 [data-scope='number-field'][data-part='label'] {
@@ -10563,8 +11157,8 @@
   --xh-_pin-input-label-font-size: var(--xh-text-label-size);
   /* 形态档只换这三个私有槽，缺省这一份就是描边式（描边 + 画布底） */
   --xh-_pin-input-box-bg: var(--xh-bg-canvas);
-  --xh-_pin-input-box-border: var(--xh-border-default);
-  --xh-_pin-input-box-border-hover: var(--xh-border-strong);
+  --xh-_pin-input-box-border: var(--xh-border-control);
+  --xh-_pin-input-box-border-hover: var(--xh-border-control-hover);
   /* 聚焦环与填满态的强调色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的取值 */
   --xh-_pin-input-ring: var(--xh-ring-focus);
   --xh-_pin-input-accent: var(--xh-_tone, var(--xh-bg-brand));
@@ -10584,22 +11178,22 @@
    不做 solid：实心填充盖住了"这里能打字"这件事，输入框用不上它 */
 [data-scope='pin-input'][data-part='root'][data-variant='outline'] {
   --xh-_pin-input-box-bg: var(--xh-bg-canvas);
-  --xh-_pin-input-box-border: var(--xh-border-default);
-  --xh-_pin-input-box-border-hover: var(--xh-border-strong);
+  --xh-_pin-input-box-border: var(--xh-border-control);
+  --xh-_pin-input-box-border-hover: var(--xh-border-control-hover);
 }
 
 /* 填充式：底色说明这里是一格输入位，描边让位给底色 */
 [data-scope='pin-input'][data-part='root'][data-variant='subtle'] {
   --xh-_pin-input-box-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   --xh-_pin-input-box-border: transparent;
-  --xh-_pin-input-box-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_pin-input-box-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 /* 无边框、透明底：静息时格子完全隐入背景，可见反馈全靠悬停描边与聚焦环 */
 [data-scope='pin-input'][data-part='root'][data-variant='ghost'] {
   --xh-_pin-input-box-bg: transparent;
   --xh-_pin-input-box-border: transparent;
-  --xh-_pin-input-box-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_pin-input-box-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 /* —— 尺寸 —— */
@@ -10822,40 +11416,44 @@
 }
 
 /* 箭头是旋转 45° 的方块，只保留朝向锚点那两条边的描边；
-   引擎不产出箭头偏移，因此沿交叉轴固定居中 */
+   交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
 [data-scope='popover'][data-part='arrow'] {
+  --xh-_popover-arrow-size: var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size));
+  --xh-_popover-arrow-x: 50%;
+  --xh-_popover-arrow-y: 50%;
+
   position: absolute;
-  inline-size: var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size));
-  block-size: var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size));
+  inline-size: var(--xh-_popover-arrow-size);
+  block-size: var(--xh-_popover-arrow-size);
   background: var(--xh-popover-bg, var(--xh-bg-surface));
   border: var(--xh-stroke-thin) solid var(--xh-popover-border, var(--xh-border-default));
   rotate: 45deg;
 }
 
 [data-scope='popover'][data-part='arrow'][data-placement^='bottom'] {
-  inset-block-start: calc(var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-inline-start: calc(50% - var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-block-start: calc(var(--xh-_popover-arrow-size) / -2);
+  inset-inline-start: calc(var(--xh-_popover-arrow-x) - var(--xh-_popover-arrow-size) / 2);
   border-block-end: 0;
   border-inline-end: 0;
 }
 
 [data-scope='popover'][data-part='arrow'][data-placement^='top'] {
-  inset-block-end: calc(var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-inline-start: calc(50% - var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-block-end: calc(var(--xh-_popover-arrow-size) / -2);
+  inset-inline-start: calc(var(--xh-_popover-arrow-x) - var(--xh-_popover-arrow-size) / 2);
   border-block-start: 0;
   border-inline-start: 0;
 }
 
 [data-scope='popover'][data-part='arrow'][data-placement^='right'] {
-  inset-inline-start: calc(var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-block-start: calc(50% - var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-inline-start: calc(var(--xh-_popover-arrow-size) / -2);
+  inset-block-start: calc(var(--xh-_popover-arrow-y) - var(--xh-_popover-arrow-size) / 2);
   border-block-start: 0;
   border-inline-end: 0;
 }
 
 [data-scope='popover'][data-part='arrow'][data-placement^='left'] {
-  inset-inline-end: calc(var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-block-start: calc(50% - var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-inline-end: calc(var(--xh-_popover-arrow-size) / -2);
+  inset-block-start: calc(var(--xh-_popover-arrow-y) - var(--xh-_popover-arrow-size) / 2);
   border-block-end: 0;
   border-inline-start: 0;
 }
@@ -10888,7 +11486,7 @@
 }
 
 /* —— 尺寸 —— */
-/* 只有厚度分档；中间档不写规则，缺省即中档 */
+/* 线形只有厚度分档；中间档不写规则，缺省即中档 */
 [data-scope='progress'][data-part='root'][data-size='sm'] {
   --xh-_thickness: var(--xh-progress-thickness, var(--xh-space-1));
 }
@@ -10897,6 +11495,73 @@
   --xh-_thickness: var(--xh-progress-thickness, var(--xh-space-2));
 }
 
+/* —— 环形 —— */
+/* 环画在固定的 100×100 viewBox 里，直径由这里的尺寸决定；
+   画面与环心文字叠在同一格上，文字因此恒在圆心 */
+[data-scope='progress'][data-part='root'][data-variant='circle'],
+[data-scope='progress'][data-part='root'][data-variant='dashboard'] {
+  --xh-_diameter: var(--xh-progress-size, 7.5rem);
+
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--xh-_diameter);
+  block-size: var(--xh-_diameter);
+}
+
+[data-scope='progress'][data-part='root'][data-variant='circle'][data-size='sm'],
+[data-scope='progress'][data-part='root'][data-variant='dashboard'][data-size='sm'] {
+  --xh-_diameter: var(--xh-progress-size, 5rem);
+}
+
+[data-scope='progress'][data-part='root'][data-variant='circle'][data-size='lg'],
+[data-scope='progress'][data-part='root'][data-variant='dashboard'][data-size='lg'] {
+  --xh-_diameter: var(--xh-progress-size, 10rem);
+}
+
+[data-scope='progress'][data-part='canvas'],
+[data-scope='progress'][data-part='label'] {
+  grid-area: 1 / 1;
+}
+
+[data-scope='progress'][data-part='canvas'] {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+/* 环心文字：占位不撑格子，长内容自己换行由作者定 */
+[data-scope='progress'][data-part='label'] {
+  color: var(--xh-progress-label-fg, var(--xh-fg-default));
+  font-size: var(--xh-progress-label-font-size, var(--xh-text-body-size));
+  line-height: var(--xh-leading-none);
+  text-align: center;
+}
+
+/* 圆心、半径与那两段虚线都由连接层算好写进内联样式，这里只上色。
+   底槽不跟着语气换族：只有已完成的那段换色，才读得出"完成了多少" */
+[data-scope='progress'][data-part='track'][data-variant='circle'],
+[data-scope='progress'][data-part='track'][data-variant='dashboard'] {
+  stroke: var(--xh-progress-track, var(--xh-bg-subtle-active));
+}
+
+[data-scope='progress'][data-part='range'][data-variant='circle'],
+[data-scope='progress'][data-part='range'][data-variant='dashboard'] {
+  stroke: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
+  stroke-linecap: var(--xh-progress-linecap, round);
+  transition: stroke-dashoffset var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+}
+
+/* 零进度：圆角端点会在长度为 0 处画出一个圆点，收掉它 */
+[data-scope='progress'][data-part='range'][data-empty] {
+  visibility: hidden;
+}
+
+/* 关掉动效的用户不该被进度条的补间晃一下；这里只管本组件 */
+@media (prefers-reduced-motion: reduce) {
+  [data-scope='progress'][data-part='range'] {
+    transition-duration: 0.01ms;
+  }
+}
+
 /* styles/radio-group.css */
 [data-scope='radio-group'][data-part='root'] {
   /* 尺寸档只换这两个私有槽，标题与条目都从 root 继承它们，换档不必给每个部件各写一条选择器 */
@@ -10968,7 +11633,7 @@
   justify-content: center;
   inline-size: 16px;
   block-size: 16px;
-  border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-control));
   border-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);
@@ -11325,14 +11990,13 @@
 
   /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
   --xh-_select-trigger-bg: var(--xh-bg-canvas);
-  --xh-_select-trigger-border: var(--xh-border-default);
-  --xh-_select-trigger-border-hover: var(--xh-border-strong);
+  --xh-_select-trigger-border: var(--xh-border-control);
+  --xh-_select-trigger-border-hover: var(--xh-border-control-hover);
 
-  /* 强调色随语气走，只落在聚焦与选中上，正文文字色不动。
-     没写 data-tone 时 --xh-_tone 没被声明，三处都退回原来的取值 */
+  /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
+     没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
   --xh-_select-ring: var(--xh-ring-focus);
   --xh-_select-accent: var(--xh-_tone, var(--xh-bg-brand));
-  --xh-_select-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
   --xh-_select-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
   display: inline-flex;
@@ -11365,21 +12029,21 @@
    形态只决定描边与底色怎么用，用哪族颜色由 data-tone 决定 */
 [data-scope='select'][data-part='root'][data-variant='outline'] {
   --xh-_select-trigger-bg: var(--xh-bg-canvas);
-  --xh-_select-trigger-border: var(--xh-border-default);
-  --xh-_select-trigger-border-hover: var(--xh-border-strong);
+  --xh-_select-trigger-border: var(--xh-border-control);
+  --xh-_select-trigger-border-hover: var(--xh-border-control-hover);
 }
 
 /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
 [data-scope='select'][data-part='root'][data-variant='subtle'] {
   --xh-_select-trigger-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   --xh-_select-trigger-border: transparent;
-  --xh-_select-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_select-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 [data-scope='select'][data-part='root'][data-variant='ghost'] {
   --xh-_select-trigger-bg: transparent;
   --xh-_select-trigger-border: transparent;
-  --xh-_select-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_select-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 [data-scope='select'][data-part='label'] {
@@ -11413,10 +12077,126 @@
   cursor: pointer;
 }
 
-[data-scope='select'][data-part='trigger']:hover:not(:disabled) {
+/* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
+[data-scope='select'][data-part='trigger']:hover:not(:disabled, [data-invalid]) {
   border-color: var(--xh-select-trigger-border-hover, var(--xh-_select-trigger-border-hover));
 }
 
+[data-scope='select'][data-part='trigger'][data-invalid] {
+  border-color: var(--xh-select-trigger-border-invalid, var(--xh-color-danger-500));
+}
+
+/* 收纳容器：触发器与清空按钮的定位基准，触发器在里面占满一行 */
+[data-scope='select'][data-part='control'] {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+[data-scope='select'][data-part='control'] > [data-part='trigger'] {
+  flex: 1;
+}
+
+/* 清空按钮：trigger 的兄弟节点，幽灵小圆钮；没选中或禁用时连接层给 hidden */
+[data-scope='select'][data-part='clear-trigger'] {
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--xh-select-clear-size, var(--xh-control-indicator-size));
+  block-size: var(--xh-select-clear-size, var(--xh-control-indicator-size));
+  padding: 0;
+  border: none;
+  border-radius: var(--xh-shape-pill);
+  background: none;
+  color: var(--xh-select-clear-fg, var(--xh-fg-subtle));
+
+  /* 字号行高钉死：继承页面字号会让行框高过按钮，字形被基线顶离正中 */
+  font-size: var(--xh-select-clear-font-size, var(--xh-font-size-xs));
+  line-height: var(--xh-leading-none);
+  cursor: pointer;
+}
+
+[data-scope='select'][data-part='clear-trigger']:hover {
+  background: var(--xh-select-clear-bg-hover, var(--xh-bg-subtle-hover));
+  color: var(--xh-select-clear-fg-hover, var(--xh-fg-default));
+}
+
+[data-scope='select'][data-part='clear-trigger']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-_select-ring);
+  outline-offset: var(--xh-ring-offset);
+}
+
+[data-scope='select'][data-part='clear-trigger'][hidden] {
+  display: none;
+}
+
+/* 进了 control 就嵌进触发器右端（与展开指示符同位），纵向钉在正中；平时不占位也不接指针 */
+[data-scope='select'][data-part='control'] [data-part='clear-trigger'] {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--xh-select-trigger-px, var(--xh-_select-px));
+  translate: 0 -50%;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* 悬停或键盘聚到清空钮上时显形 */
+[data-scope='select'][data-part='control']:hover [data-part='clear-trigger']:not([hidden]),
+[data-scope='select'][data-part='control'] [data-part='clear-trigger']:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* 清空钮显形期间展开指示符让位，两个图标不叠在一起 */
+[data-scope='select'][data-part='control']:hover:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator'],
+[data-scope='select'][data-part='control']:has([data-part='clear-trigger']:focus-visible) [data-part='indicator'] {
+  opacity: 0;
+}
+
+/* 多选标签：淡底小药丸；放触发器里是纯展示，放外面配 tag-remove 可删 */
+[data-scope='select'][data-part='tag'] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--xh-select-tag-gap, var(--xh-space-1));
+  padding-block: 0;
+  padding-inline: var(--xh-select-tag-px, var(--xh-space-2));
+  border-radius: var(--xh-select-tag-radius, var(--xh-shape-pill));
+  background: var(--xh-select-tag-bg, var(--xh-bg-subtle));
+  color: var(--xh-select-tag-fg, var(--xh-fg-default));
+  font-size: var(--xh-select-tag-font-size, var(--xh-font-size-xs));
+  line-height: var(--xh-leading-normal);
+  white-space: nowrap;
+}
+
+[data-scope='select'][data-part='tag'][data-disabled] {
+  color: var(--xh-fg-disabled);
+}
+
+[data-scope='select'][data-part='tag-remove'] {
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  border: none;
+  border-radius: var(--xh-shape-pill);
+  background: none;
+  color: var(--xh-select-tag-remove-fg, var(--xh-fg-subtle));
+  font-size: inherit;
+  cursor: pointer;
+}
+
+[data-scope='select'][data-part='tag-remove']:hover {
+  color: var(--xh-select-tag-remove-fg-hover, var(--xh-fg-default));
+}
+
+[data-scope='select'][data-part='tag-remove']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-_select-ring);
+  outline-offset: var(--xh-ring-offset);
+}
+
+[data-scope='select'][data-part='tag-remove'][data-disabled] {
+  color: var(--xh-fg-disabled);
+  cursor: not-allowed;
+}
+
 [data-scope='select'][data-part='trigger']:focus-visible {
   outline: var(--xh-ring-width) solid var(--xh-_select-ring);
   outline-offset: var(--xh-ring-offset);
@@ -11496,8 +12276,14 @@
   display: none;
 }
 
-/* 容器只是焦点域兜底落点，落焦不画环：高亮永远长在条目上 */
-[data-scope='select'][data-part='content']:focus-visible {
+/* 焦点落在容器上只有一种情形：指针打开、无选中值、还没有任何条目当锚点。
+   那一刻它认领着 Tab 位，环画在浮层内沿；有锚点时环长在条目上，容器不再画 */
+[data-scope='select'][data-part='content'][tabindex='0']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: calc(-1 * var(--xh-ring-width));
+}
+
+[data-scope='select'][data-part='content']:not([tabindex='0']):focus-visible {
   outline: none;
 }
 
@@ -11509,8 +12295,8 @@
   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));
-  padding-inline: var(--xh-select-item-px, var(--xh-control-px-sm));
+  padding-block: var(--xh-select-item-py, var(--xh-space-1_5));
+  padding-inline: var(--xh-select-item-px, var(--xh-control-px-md));
   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));
@@ -11519,11 +12305,14 @@
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
-/* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边 */
+/* 悬停与键盘锚点共用中性灰轻档：条目本身承载焦点，不另画描边 */
 [data-scope='select'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
-  background: var(--xh-select-item-bg-highlight, var(--xh-_select-item-highlight-bg));
+  background: var(--xh-select-item-bg-hover, var(--xh-bg-subtle));
 }
 
 /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，
@@ -11533,7 +12322,14 @@
   font-weight: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-medium));
 }
 
-[data-scope='select'][data-part='item']:focus {
+/* 键盘走到条目上要画环：轻档底色对白底只有 1.1:1，够不上焦点指示器的对比度要求。
+   指针悬停走的是程序化聚焦，鼠标模态下 :focus-visible 不匹配，不会误画 */
+[data-scope='select'][data-part='item']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: calc(-1 * var(--xh-ring-width));
+}
+
+[data-scope='select'][data-part='item']:focus:not(:focus-visible) {
   outline: none;
 }
 
@@ -11594,6 +12390,169 @@
   block-size: 100%;
 }
 
+/* styles/side-nav.css */
+[data-scope='side-nav'][data-part='root'] {
+  inline-size: var(--xh-side-nav-w, 240px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--xh-side-nav-gap, var(--xh-space-1));
+  padding: var(--xh-side-nav-p, var(--xh-space-2));
+  color: var(--xh-side-nav-fg, var(--xh-fg-default));
+}
+
+/* 折叠成图标栏：整栏收窄，文字随行宽被裁掉 */
+[data-scope='side-nav'][data-part='root'][data-collapsed] {
+  inline-size: var(--xh-side-nav-collapsed-w, 56px);
+}
+
+[data-scope='side-nav'][data-part='list'],
+[data-scope='side-nav'][data-part='branch-content'] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xh-side-nav-gap, var(--xh-space-1));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* 子层靠嵌套缩进，层级越深自然越靠里 */
+[data-scope='side-nav'][data-part='branch-content'] {
+  padding-inline-start: var(--xh-side-nav-indent, var(--xh-space-4));
+}
+
+[data-scope='side-nav'][data-part='branch-content'][hidden] {
+  display: none;
+}
+
+[data-scope='side-nav'][data-part='group'] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xh-side-nav-gap, var(--xh-space-1));
+  list-style: none;
+}
+
+[data-scope='side-nav'][data-part='group-label'] {
+  padding-block: var(--xh-space-1);
+  padding-inline: var(--xh-control-px-md);
+  font-size: var(--xh-font-size-xs);
+  color: var(--xh-fg-subtle);
+  user-select: none;
+}
+
+/* 折叠时分组标题没有落点，藏掉 */
+[data-scope='side-nav'][data-part='group-label'][data-collapsed] {
+  display: none;
+}
+
+[data-scope='side-nav'][data-part='branch'] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xh-side-nav-gap, var(--xh-space-1));
+  list-style: none;
+}
+
+/* —— 行：分支按钮与链接同一副长相 —— */
+[data-scope='side-nav'][data-part='branch-trigger'],
+[data-scope='side-nav'][data-part='link'] {
+  display: flex;
+  align-items: center;
+  gap: var(--xh-control-gap-md);
+  inline-size: 100%;
+  min-block-size: var(--xh-control-h-md);
+  padding-inline: var(--xh-control-px-md);
+  border: none;
+  border-radius: var(--xh-shape-control);
+  background: none;
+  color: inherit;
+  font-size: var(--xh-text-body-size);
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+[data-scope='side-nav'][data-part='branch-trigger']:hover,
+[data-scope='side-nav'][data-part='link']:hover {
+  background: var(--xh-bg-subtle-hover);
+}
+
+[data-scope='side-nav'][data-part='branch-trigger']:focus-visible,
+[data-scope='side-nav'][data-part='link']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+/* 选中的那条：品牌淡底 + 强调字 */
+[data-scope='side-nav'][data-part='link'][data-selected] {
+  background: var(--xh-bg-brand-subtle);
+  color: var(--xh-fg-brand);
+  font-weight: var(--xh-font-weight-medium);
+}
+
+/* 选中项的祖先枝：只染字色，一路指到当前页 */
+[data-scope='side-nav'][data-part='branch-trigger'][data-active] {
+  color: var(--xh-fg-brand);
+}
+
+[data-scope='side-nav'][data-part='branch-trigger'][data-disabled],
+[data-scope='side-nav'][data-part='link'][data-disabled] {
+  color: var(--xh-fg-disabled);
+  cursor: not-allowed;
+}
+
+[data-scope='side-nav'][data-part='branch-text'],
+[data-scope='side-nav'][data-part='link-text'] {
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 折叠成图标栏：文字与展开指示整个藏掉、行内容居中，不裁半个字。
+   弹出面板里的行不在此列——面板是正常宽度的浮层，文字照常显示 */
+[data-scope='side-nav'][data-part='root'][data-collapsed] [data-part='branch-text']:not([data-popout] *),
+[data-scope='side-nav'][data-part='root'][data-collapsed] [data-part='link-text']:not([data-popout] *),
+[data-scope='side-nav'][data-part='root'][data-collapsed] [data-part='branch-indicator']:not([data-popout] *) {
+  display: none;
+}
+
+[data-scope='side-nav'][data-part='root'][data-collapsed] [data-part='branch-trigger']:not([data-popout] *),
+[data-scope='side-nav'][data-part='root'][data-collapsed] [data-part='link']:not([data-popout] *) {
+  justify-content: center;
+  padding-inline: 0;
+}
+
+/* 折叠态的弹出面板：贴着触发按钮旁侧的浮层卡片，坐标由连接层写在行内样式上。
+   面板自己不吃子层缩进（padding 整圈盖掉），面板内的嵌套子层照常缩进 */
+[data-scope='side-nav'][data-part='branch-content'][data-popout] {
+  z-index: var(--xh-side-nav-popout-layer, var(--xh-layer-popover));
+  min-inline-size: var(--xh-side-nav-popout-min-w, var(--xh-overlay-menu-min-w));
+  max-inline-size: var(--xh-side-nav-popout-max-w, var(--xh-overlay-max-w));
+  padding: var(--xh-side-nav-popout-p, var(--xh-space-1));
+  border: var(--xh-stroke-thin) solid var(--xh-side-nav-popout-border, var(--xh-border-default));
+  border-radius: var(--xh-side-nav-popout-radius, var(--xh-shape-surface));
+  background: var(--xh-side-nav-popout-bg, var(--xh-bg-surface));
+  box-shadow: var(--xh-side-nav-popout-shadow, var(--xh-elevation-2));
+  pointer-events: auto;
+}
+
+[data-scope='side-nav'][data-part='branch-indicator'] {
+  margin-inline-start: auto;
+  display: inline-flex;
+  flex: none;
+  transition: rotate var(--xh-duration-fast) var(--xh-ease-standard);
+}
+
+[data-scope='side-nav'][data-part='branch-indicator'][data-state='open'] {
+  rotate: 90deg;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-scope='side-nav'][data-part='branch-indicator'] {
+    transition: none;
+  }
+}
+
 /* styles/slider.css */
 /* 定位分工：已选区间与拇指在**主轴**上的起点与长度，由连接层每帧写进内联样式——
    水平是 inset-inline-start / inline-size，竖直是 inset-block-end / block-size。
@@ -11782,6 +12741,61 @@
   --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-space-2));
 }
 
+/* —— 刻度：圆点钉在轨道上、文案排在轨道外侧，坐标由连接层按百分比内联给出 —— */
+[data-scope='slider'][data-part='marks'] {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+[data-scope='slider'][data-part='mark'] {
+  position: absolute;
+  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);
+  background: var(--xh-slider-mark-bg, var(--xh-border-strong));
+  translate: -50% -50%;
+}
+
+/* 落进已选区间的刻度点跟 range 同色 */
+[data-scope='slider'][data-part='mark'][data-active] {
+  background: var(--xh-slider-mark-bg-active, var(--xh-_tone, var(--xh-bg-brand)));
+}
+
+[data-scope='slider'][data-part='mark-label'] {
+  position: absolute;
+  inset-block-start: 100%;
+  margin-block-start: var(--xh-slider-mark-label-gap, var(--xh-space-1));
+  color: var(--xh-slider-mark-label-fg, var(--xh-fg-subtle));
+  font-size: var(--xh-slider-mark-label-font-size, var(--xh-font-size-xs));
+  line-height: var(--xh-leading-none);
+  white-space: nowrap;
+  translate: -50% 0;
+  cursor: pointer;
+  pointer-events: auto;
+  user-select: none;
+}
+
+[data-scope='slider'][data-part='mark-label'][data-active] {
+  color: var(--xh-slider-mark-label-fg-active, var(--xh-fg-default));
+}
+
+/* 竖直轨道：点与文案换轴，坐标由连接层写在 block 轴上 */
+[data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='mark'] {
+  inset-block-start: auto;
+  inset-inline-start: 50%;
+  translate: -50% 50%;
+}
+
+[data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='mark-label'] {
+  inset-block-start: auto;
+  inset-inline-start: 100%;
+  margin-block-start: 0;
+  margin-inline-start: var(--xh-slider-mark-label-gap, var(--xh-space-1));
+  translate: 0 50%;
+}
+
 /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位 */
 [data-scope='slider'][data-part='root'][hidden],
 [data-scope='slider'][data-part='control'][hidden] {
@@ -12096,8 +13110,8 @@
 }
 
 [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='indicator'] {
-  border-color: var(--xh-fg-disabled);
-  color: var(--xh-fg-disabled);
+  border-color: var(--xh-steps-indicator-border-disabled, var(--xh-fg-disabled));
+  color: var(--xh-steps-indicator-fg-disabled, var(--xh-fg-disabled));
 }
 
 /* 标题与说明都在右列：不给 display，网格布局会替它们块级化，
@@ -12231,6 +13245,33 @@
   translate: var(--xh-_switch-thumb-size) 0;
 }
 
+/* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
+@keyframes xh-switch-rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+/* 提交中：指针挂起、滑块里转圈；不是禁用，焦点与对比度都保持 */
+[data-scope='switch'][data-part='root'][data-loading] {
+  cursor: wait;
+}
+
+[data-scope='switch'][data-part='thumb'][data-loading] {
+  display: grid;
+  place-items: center;
+}
+
+[data-scope='switch'][data-part='thumb'][data-loading]::after {
+  content: '';
+  inline-size: 60%;
+  block-size: 60%;
+  border: var(--xh-stroke-thin) solid transparent;
+  border-block-start-color: var(--xh-switch-loading-fg, var(--xh-bg-brand));
+  border-radius: var(--xh-shape-pill);
+  animation: xh-switch-rotate var(--xh-switch-loading-duration, calc(var(--xh-duration-slow) * 2)) linear infinite;
+}
+
 /* styles/table.css */
 /* 加载态自己冒出来，用户没按任何键：一段极轻的呼吸就够，别抢走正在读表的注意力 */
 @keyframes xh-table-loading-pulse {
@@ -12366,10 +13407,10 @@
   border-block-end: none;
 }
 
-/* 键盘高亮与指针高亮共用一套底色。data-highlighted 跟的是连接层记的焦点行，
+/* 悬停与键盘锚点共用中性灰轻档。data-highlighted 跟的是连接层记的焦点行，
    与选中互相独立：可以停在一个没被选中的行上 */
 [data-scope='table'][data-part='body'] > [data-scope='table'][data-part='row']:not([data-disabled]):is(:hover, [data-highlighted]) {
-  background: var(--xh-table-row-bg-highlight, var(--xh-bg-subtle-hover));
+  background: var(--xh-table-row-bg-hover, var(--xh-bg-subtle));
 }
 
 /* 选中比高亮更"实"：它表达的是数据状态，翻页回来还在 */
@@ -12454,14 +13495,14 @@
    切换选中不引起行宽抖动 */
 [data-scope='table'][data-part='select-all-trigger'],
 [data-scope='table'][data-part='row-select-trigger'] {
-  border: var(--xh-stroke-thin) solid var(--xh-table-trigger-border, var(--xh-border-strong));
+  border: var(--xh-stroke-thin) solid var(--xh-table-trigger-border, var(--xh-border-control));
   color: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
   visibility: visible;
 }
 
 [data-scope='table'][data-part='select-all-trigger']:is([data-state='all'], [data-state='some']),
 [data-scope='table'][data-part='row-select-trigger'][data-selected] {
-  border-color: var(--xh-table-trigger-bg-checked, var(--xh-bg-brand));
+  border-color: var(--xh-table-trigger-border-checked, var(--xh-table-trigger-bg-checked, var(--xh-bg-brand)));
   background: var(--xh-table-trigger-bg-checked, var(--xh-bg-brand));
 }
 
@@ -12610,7 +13651,7 @@
 }
 
 /* 两个状态节点常挂，只在表体为空时才显形 */
-[data-scope='table'][data-part='empty-state'],
+[data-scope='table'][data-part='empty'],
 [data-scope='table'][data-part='loading-state'] {
   display: flex;
   flex-direction: column;
@@ -12624,7 +13665,7 @@
   text-align: center;
 }
 
-[data-scope='table'][data-part='empty-state'][hidden],
+[data-scope='table'][data-part='empty'][hidden],
 [data-scope='table'][data-part='loading-state'][hidden] {
   display: none;
 }
@@ -12804,8 +13845,8 @@
   --xh-_tags-input-label-font-size: var(--xh-text-label-size);
   /* 形态档只换这三个私有槽，缺省这一份就是描边式（描边 + 画布底） */
   --xh-_tags-input-control-bg: var(--xh-bg-canvas);
-  --xh-_tags-input-control-border: var(--xh-border-default);
-  --xh-_tags-input-control-border-hover: var(--xh-border-strong);
+  --xh-_tags-input-control-border: var(--xh-border-control);
+  --xh-_tags-input-control-border-hover: var(--xh-border-control-hover);
   /* 聚焦环与标签块的强调色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的取值 */
   --xh-_tags-input-ring: var(--xh-ring-focus);
   --xh-_tags-input-accent: var(--xh-_tone, var(--xh-bg-brand));
@@ -12827,22 +13868,22 @@
    不做 solid：实心填充盖住了"这里能打字"这件事，输入框用不上它 */
 [data-scope='tags-input'][data-part='root'][data-variant='outline'] {
   --xh-_tags-input-control-bg: var(--xh-bg-canvas);
-  --xh-_tags-input-control-border: var(--xh-border-default);
-  --xh-_tags-input-control-border-hover: var(--xh-border-strong);
+  --xh-_tags-input-control-border: var(--xh-border-control);
+  --xh-_tags-input-control-border-hover: var(--xh-border-control-hover);
 }
 
 /* 填充式：底色圈出可输入的范围，描边让位给底色 */
 [data-scope='tags-input'][data-part='root'][data-variant='subtle'] {
   --xh-_tags-input-control-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   --xh-_tags-input-control-border: transparent;
-  --xh-_tags-input-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_tags-input-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 /* 无边框、透明底：静息时框完全隐入背景，可见反馈全靠悬停描边与聚焦环 */
 [data-scope='tags-input'][data-part='root'][data-variant='ghost'] {
   --xh-_tags-input-control-bg: transparent;
   --xh-_tags-input-control-border: transparent;
-  --xh-_tags-input-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_tags-input-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 /* —— 尺寸 —— */
@@ -13082,7 +14123,7 @@
   max-inline-size: 100%;
   padding-block: var(--xh-tags-input-item-py, var(--xh-space-1));
   padding-inline: var(--xh-tags-input-item-px, var(--xh-space-2));
-  border: var(--xh-stroke-thin) solid var(--xh-tags-input-item-input-border, var(--xh-border-strong));
+  border: var(--xh-stroke-thin) solid var(--xh-tags-input-item-input-border, var(--xh-border-control));
   border-radius: var(--xh-tags-input-item-radius, var(--xh-shape-pill));
   background: var(--xh-tags-input-item-input-bg, var(--xh-bg-canvas));
   color: var(--xh-tags-input-item-input-fg, var(--xh-fg-default));
@@ -13165,13 +14206,13 @@
 
   /* 形态档只换这三个私有槽：底、常态描边、悬停描边 */
   --xh-_text-field-bg: var(--xh-bg-canvas);
-  --xh-_text-field-border: var(--xh-border-default);
-  --xh-_text-field-border-hover: var(--xh-border-strong);
+  --xh-_text-field-border: var(--xh-border-control);
+  --xh-_text-field-border-hover: var(--xh-border-control-hover);
 
   /* 语气只落在聚焦这一处：环与聚焦态描边。正文颜色不归它管。
      没写 data-tone 时 --xh-_tone 没被声明，退回原来的聚焦环色与常态描边 */
   --xh-_text-field-ring: var(--xh-ring-focus);
-  --xh-_text-field-border-focus: var(--xh-text-field-input-border, var(--xh-_tone, var(--xh-border-default)));
+  --xh-_text-field-border-focus: var(--xh-text-field-input-border, var(--xh-_tone, var(--xh-border-control)));
 
   display: inline-flex;
   flex-direction: column;
@@ -13206,9 +14247,9 @@
    输入框没有实心档：填满一个要往里打字的框，字与底就没法同时读 */
 [data-scope='text-field'][data-part='root'][data-variant='outline'] {
   --xh-_text-field-bg: var(--xh-bg-canvas);
-  --xh-_text-field-border: var(--xh-border-default);
-  --xh-_text-field-border-hover: var(--xh-border-strong);
-  --xh-_text-field-border-focus: var(--xh-text-field-input-border, var(--xh-_tone, var(--xh-border-default)));
+  --xh-_text-field-border: var(--xh-border-control);
+  --xh-_text-field-border-hover: var(--xh-border-control-hover);
+  --xh-_text-field-border-focus: var(--xh-text-field-input-border, var(--xh-_tone, var(--xh-border-control)));
 }
 
 /* 填充式：底色顶替描边表达边界。描边只退成透明而不去掉，1px 的位置留着，
@@ -13216,16 +14257,16 @@
 [data-scope='text-field'][data-part='root'][data-variant='subtle'] {
   --xh-_text-field-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   --xh-_text-field-border: transparent;
-  --xh-_text-field-border-hover: var(--xh-_tone-border, var(--xh-border-default));
-  --xh-_text-field-border-focus: var(--xh-_tone, var(--xh-border-default));
+  --xh-_text-field-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
+  --xh-_text-field-border-focus: var(--xh-_tone, var(--xh-border-control));
 }
 
 /* 无框：底与描边都透明，平时只看得见字，悬停与聚焦才浮出边界 */
 [data-scope='text-field'][data-part='root'][data-variant='ghost'] {
   --xh-_text-field-bg: transparent;
   --xh-_text-field-border: transparent;
-  --xh-_text-field-border-hover: var(--xh-_tone-border, var(--xh-border-default));
-  --xh-_text-field-border-focus: var(--xh-_tone, var(--xh-border-default));
+  --xh-_text-field-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
+  --xh-_text-field-border-focus: var(--xh-_tone, var(--xh-border-control));
 }
 
 [data-scope='text-field'][data-part='label'] {
@@ -13254,6 +14295,19 @@
   transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
+/* 多行宿主：定高换成行数撑高，纵向留出内边距；autoSize 接管高度后拉柄与滚动都收掉 */
+[data-scope='text-field'][data-part='input'][data-multiline] {
+  block-size: auto;
+  min-block-size: var(--xh-text-field-input-h, var(--xh-_text-field-h));
+  padding-block: var(--xh-text-field-textarea-py, var(--xh-space-2));
+  resize: vertical;
+}
+
+[data-scope='text-field'][data-part='input'][data-multiline][data-autosize] {
+  overflow: hidden;
+  resize: none;
+}
+
 [data-scope='text-field'][data-part='input']::placeholder {
   color: var(--xh-text-field-placeholder-fg, var(--xh-fg-subtle));
 }
@@ -13404,7 +14458,7 @@
   min-inline-size: var(--xh-thread-scroll-button-h, var(--xh-control-h-md));
   block-size: var(--xh-thread-scroll-button-h, var(--xh-control-h-md));
   padding-inline: var(--xh-thread-scroll-button-px, var(--xh-control-px-md));
-  border: var(--xh-stroke-thin) solid var(--xh-thread-scroll-button-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-thread-scroll-button-border, var(--xh-border-control));
   border-radius: var(--xh-thread-scroll-button-radius, var(--xh-shape-pill));
   background: var(--xh-thread-scroll-button-bg, var(--xh-bg-surface));
   color: var(--xh-thread-scroll-button-fg, var(--xh-fg-default));
@@ -13462,8 +14516,8 @@
   --xh-_time-field-label-font-size: var(--xh-text-label-size);
   /* 形态档只换这三个私有槽：底色与两档描边 */
   --xh-_time-field-control-bg: var(--xh-bg-canvas);
-  --xh-_time-field-control-border: var(--xh-border-default);
-  --xh-_time-field-control-border-hover: var(--xh-border-strong);
+  --xh-_time-field-control-border: var(--xh-border-control);
+  --xh-_time-field-control-border-hover: var(--xh-border-control-hover);
   /* 聚焦描边与段位反白随语气走。没写 data-tone 时这几个 --xh-_tone* 没被声明，退回原来的焦点色与品牌色 */
   --xh-_time-field-ring: var(--xh-ring-focus);
   --xh-_time-field-segment-bg: var(--xh-_tone, var(--xh-bg-brand));
@@ -13493,15 +14547,15 @@
 /* 描边式：与缺省等价，写出来是为了三档形态在皮肤里都看得见 */
 [data-scope='time-field'][data-part='root'][data-variant='outline'] {
   --xh-_time-field-control-bg: var(--xh-bg-canvas);
-  --xh-_time-field-control-border: var(--xh-border-default);
-  --xh-_time-field-control-border-hover: var(--xh-border-strong);
+  --xh-_time-field-control-border: var(--xh-border-control);
+  --xh-_time-field-control-border-hover: var(--xh-border-control-hover);
 }
 
 /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
 [data-scope='time-field'][data-part='root'][data-variant='subtle'] {
   --xh-_time-field-control-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   --xh-_time-field-control-border: transparent;
-  --xh-_time-field-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_time-field-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
 }
 
 /* 无框式：底与边都让开，可见反馈只剩聚焦那一档 */
@@ -13689,7 +14743,7 @@
   block-size: var(--xh-time-picker-control-h, var(--xh-control-h-md));
   padding-inline: var(--xh-time-picker-control-px, var(--xh-control-px-md));
   padding-block: 0;
-  border: var(--xh-stroke-thin) solid var(--xh-time-picker-control-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-time-picker-control-border, var(--xh-border-control));
   border-radius: var(--xh-time-picker-control-radius, var(--xh-shape-control));
   background: var(--xh-time-picker-control-bg, var(--xh-bg-canvas));
   color: var(--xh-time-picker-control-fg, var(--xh-fg-default));
@@ -13708,7 +14762,7 @@
 
 /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
 [data-scope='time-picker'][data-part='control']:hover:not([data-disabled], [data-invalid]) {
-  border-color: var(--xh-time-picker-control-border-hover, var(--xh-border-strong));
+  border-color: var(--xh-time-picker-control-border-hover, var(--xh-border-control-hover));
 }
 
 /* 焦点真正落在段或按钮上，但整块看起来才是一个控件：内部有焦点时整框亮起来。
@@ -13896,8 +14950,7 @@
   max-block-size: var(--xh-time-picker-column-max-h, 12rem);
   padding-inline: var(--xh-time-picker-column-px, var(--xh-space-1));
   overflow-y: auto;
-  /* 滚动容器在某些浏览器里会被自动塞进 Tab 序列，落焦时不画环——
-     焦点该落在格上，列只在整列被界卡空时才兜底占一个 Tab 位 */
+  /* 滚动容器在某些浏览器里会被自动塞进 Tab 序列，是否画环见下方按 tabindex 分档的两条 */
   scrollbar-width: thin;
 }
 
@@ -13910,51 +14963,62 @@
   border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-border-subtle));
 }
 
-[data-scope='time-picker'][data-part='column']:focus-visible {
+/* 焦点落在列上有两种情形：指针打开、这一段还空着、还没有任何格当锚点，或整列被界裁空。
+   那一刻它认领着 Tab 位，环画在列内沿；有锚点时环长在格上，列不再画 */
+[data-scope='time-picker'][data-part='column'][tabindex='0']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: calc(-1 * var(--xh-ring-width));
+}
+
+[data-scope='time-picker'][data-part='column']:not([tabindex='0']):focus-visible {
   outline: none;
 }
 
-[data-scope='time-picker'][data-part='option'] {
+[data-scope='time-picker'][data-part='item'] {
   display: flex;
   flex: none;
   align-items: center;
   justify-content: center;
-  padding-block: var(--xh-time-picker-option-py, var(--xh-space-1));
-  padding-inline: var(--xh-time-picker-option-px, var(--xh-space-2));
-  border-radius: var(--xh-time-picker-option-radius, var(--xh-shape-control));
-  color: var(--xh-time-picker-option-fg, var(--xh-fg-default));
-  font-size: var(--xh-time-picker-option-font-size, var(--xh-text-body-size));
+  padding-block: var(--xh-time-picker-item-py, var(--xh-space-1_5));
+  padding-inline: var(--xh-time-picker-item-px, var(--xh-control-px-md));
+  border-radius: var(--xh-time-picker-item-radius, var(--xh-shape-control));
+  color: var(--xh-time-picker-item-fg, var(--xh-fg-default));
+  font-size: var(--xh-time-picker-item-font-size, var(--xh-text-body-size));
+  /* 居中的单个数字格没有截断层，行高保持紧排，列内多露几格 */
   line-height: var(--xh-leading-none);
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 /* 作者自己藏掉某几格时要让位，有 display 就得补这条 */
-[data-scope='time-picker'][data-part='option'][hidden] {
+[data-scope='time-picker'][data-part='item'][hidden] {
   display: none;
 }
 
-/* 焦点所在与选中互相独立：可以停在一个没被选中的格上 */
-[data-scope='time-picker'][data-part='option'][data-highlighted]:not([data-disabled]),
-[data-scope='time-picker'][data-part='option']:hover:not([data-disabled]) {
-  background: var(--xh-time-picker-option-bg-highlight, var(--xh-bg-subtle-hover));
+/* 悬停与键盘锚点共用中性灰轻档；焦点所在与选中互相独立：可以停在一个没被选中的格上 */
+[data-scope='time-picker'][data-part='item'][data-highlighted]:not([data-disabled]),
+[data-scope='time-picker'][data-part='item']:hover:not([data-disabled]) {
+  background: var(--xh-time-picker-item-bg-hover, var(--xh-bg-subtle));
 }
 
-[data-scope='time-picker'][data-part='option'][data-state='checked'] {
-  background: var(--xh-time-picker-option-bg-checked, var(--xh-bg-brand));
-  color: var(--xh-time-picker-option-fg-checked, var(--xh-fg-on-brand));
-  font-weight: var(--xh-time-picker-option-weight-checked, var(--xh-font-weight-medium));
+[data-scope='time-picker'][data-part='item'][data-state='checked'] {
+  background: var(--xh-time-picker-item-bg-checked, var(--xh-bg-brand));
+  color: var(--xh-time-picker-item-fg-checked, var(--xh-fg-on-brand));
+  font-weight: var(--xh-time-picker-item-weight-checked, var(--xh-font-weight-medium));
 }
 
-/* 选中格上再落焦点或悬停时，底色留在品牌色一侧：上面那条中性高亮的选择器更具体，
+/* 选中格上再落焦点或悬停时，底色留在品牌色一侧：上面那条中性轻档的选择器更具体，
    不写这条就只有底色被换走、文字仍是品牌底上的反白色 */
-[data-scope='time-picker'][data-part='option'][data-state='checked'][data-highlighted]:not([data-disabled]),
-[data-scope='time-picker'][data-part='option'][data-state='checked']:hover:not([data-disabled]) {
-  background: var(--xh-time-picker-option-bg-checked-highlight, var(--xh-bg-brand-hover));
+[data-scope='time-picker'][data-part='item'][data-state='checked'][data-highlighted]:not([data-disabled]),
+[data-scope='time-picker'][data-part='item'][data-state='checked']:hover:not([data-disabled]) {
+  background: var(--xh-time-picker-item-bg-checked-hover, var(--xh-bg-brand-hover));
 }
 
-[data-scope='time-picker'][data-part='option']:focus-visible {
+[data-scope='time-picker'][data-part='item']:focus-visible {
   outline: var(--xh-ring-width) solid var(--xh-ring-focus);
   /* 往内收：选项在滚动列里挨着排，环画在外沿会被列的溢出裁掉 */
   outline-offset: calc(-1 * var(--xh-ring-offset));
@@ -13962,7 +15026,7 @@
 
 /* 禁用走 aria-disabled 而非原生 disabled（原生 disabled 不派 click，禁用守卫就走不到），
    所以只能靠 data-disabled 表达，写 :disabled 永远不命中 */
-[data-scope='time-picker'][data-part='option'][data-disabled] {
+[data-scope='time-picker'][data-part='item'][data-disabled] {
   color: var(--xh-fg-disabled);
   cursor: not-allowed;
 }
@@ -14329,7 +15393,7 @@
   --xh-_bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
   --xh-_fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
 
-  border-color: var(--xh-_tone-border, var(--xh-border-default));
+  border-color: var(--xh-_tone-border-control, var(--xh-border-control));
 }
 
 [data-scope='toggle'][data-part='root'][data-variant='ghost'] {
@@ -14395,7 +15459,7 @@
   --xh-_bg-hover: var(--xh-toggle-group-item-bg-hover, var(--xh-bg-subtle-hover));
   --xh-_bg-active: var(--xh-toggle-group-item-bg-active, var(--xh-bg-subtle-active));
   --xh-_fg: var(--xh-toggle-group-item-fg, var(--xh-fg-default));
-  --xh-_border: var(--xh-toggle-group-item-border, var(--xh-border-default));
+  --xh-_border: var(--xh-toggle-group-item-border, var(--xh-border-control));
 
   /* 相邻两段靠负外边距压掉一条重边，谁的描边浮在上面必须能指定，
      因此条目必须是定位元素——静态元素的 z-index 不生效 */
@@ -14710,33 +15774,38 @@
   --xh-_tooltip-font-size: var(--xh-font-size-md);
 }
 
-/* 箭头是旋转 45° 的方块，按落定朝向贴在 content 对侧边的中点 */
+/* 箭头是旋转 45° 的方块，按自报的落定朝向贴在 content 对侧边上；
+   交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
 [data-scope='tooltip'][data-part='arrow'] {
+  --xh-_tooltip-arrow-size: var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size));
+  --xh-_tooltip-arrow-x: 50%;
+  --xh-_tooltip-arrow-y: 50%;
+
   position: absolute;
-  inline-size: var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size));
-  block-size: var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size));
+  inline-size: var(--xh-_tooltip-arrow-size);
+  block-size: var(--xh-_tooltip-arrow-size);
   background: var(--xh-tooltip-bg, var(--xh-_tone, var(--xh-fg-default)));
   transform: rotate(45deg);
 }
 
-[data-scope='tooltip'][data-part='positioner'][data-placement^='bottom'] [data-scope='tooltip'][data-part='arrow'] {
-  inset-block-start: calc(var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-inline-start: calc(50% - var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+[data-scope='tooltip'][data-part='arrow'][data-placement^='bottom'] {
+  inset-block-start: calc(var(--xh-_tooltip-arrow-size) / -2);
+  inset-inline-start: calc(var(--xh-_tooltip-arrow-x) - var(--xh-_tooltip-arrow-size) / 2);
 }
 
-[data-scope='tooltip'][data-part='positioner'][data-placement^='top'] [data-scope='tooltip'][data-part='arrow'] {
-  inset-block-end: calc(var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-inline-start: calc(50% - var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+[data-scope='tooltip'][data-part='arrow'][data-placement^='top'] {
+  inset-block-end: calc(var(--xh-_tooltip-arrow-size) / -2);
+  inset-inline-start: calc(var(--xh-_tooltip-arrow-x) - var(--xh-_tooltip-arrow-size) / 2);
 }
 
-[data-scope='tooltip'][data-part='positioner'][data-placement^='left'] [data-scope='tooltip'][data-part='arrow'] {
-  inset-block-start: calc(50% - var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / 2);
-  inset-inline-end: calc(var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+[data-scope='tooltip'][data-part='arrow'][data-placement^='left'] {
+  inset-block-start: calc(var(--xh-_tooltip-arrow-y) - var(--xh-_tooltip-arrow-size) / 2);
+  inset-inline-end: calc(var(--xh-_tooltip-arrow-size) / -2);
 }
 
-[data-scope='tooltip'][data-part='positioner'][data-placement^='right'] [data-scope='tooltip'][data-part='arrow'] {
-  inset-block-start: calc(50% - var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / 2);
-  inset-inline-start: calc(var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+[data-scope='tooltip'][data-part='arrow'][data-placement^='right'] {
+  inset-block-start: calc(var(--xh-_tooltip-arrow-y) - var(--xh-_tooltip-arrow-size) / 2);
+  inset-inline-start: calc(var(--xh-_tooltip-arrow-size) / -2);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -14956,7 +16025,7 @@
 }
 
 [data-scope='tour'][data-part='prev-trigger'] {
-  border-color: var(--xh-border-default);
+  border-color: var(--xh-border-control);
   color: var(--xh-fg-default);
 }
 
@@ -15006,11 +16075,15 @@
 }
 
 /* 箭头是旋转 45° 的方块，只保留朝向目标那两条边的描边；
-   引擎不产出箭头偏移，因此沿交叉轴固定居中。居中步没有锚点，连接层会给它发 hidden */
+   交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中。居中步没有锚点，连接层会给它发 hidden */
 [data-scope='tour'][data-part='arrow'] {
+  --xh-_tour-arrow-size: var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size));
+  --xh-_tour-arrow-x: 50%;
+  --xh-_tour-arrow-y: 50%;
+
   position: absolute;
-  inline-size: var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size));
-  block-size: var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size));
+  inline-size: var(--xh-_tour-arrow-size);
+  block-size: var(--xh-_tour-arrow-size);
   background: var(--xh-tour-bg, var(--xh-bg-surface));
   border: var(--xh-stroke-thin) solid var(--xh-tour-border, var(--xh-border-default));
   rotate: 45deg;
@@ -15021,29 +16094,29 @@
 }
 
 [data-scope='tour'][data-part='arrow'][data-placement^='bottom'] {
-  inset-block-start: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-inline-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-block-start: calc(var(--xh-_tour-arrow-size) / -2);
+  inset-inline-start: calc(var(--xh-_tour-arrow-x) - var(--xh-_tour-arrow-size) / 2);
   border-block-end: 0;
   border-inline-end: 0;
 }
 
 [data-scope='tour'][data-part='arrow'][data-placement^='top'] {
-  inset-block-end: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-inline-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-block-end: calc(var(--xh-_tour-arrow-size) / -2);
+  inset-inline-start: calc(var(--xh-_tour-arrow-x) - var(--xh-_tour-arrow-size) / 2);
   border-block-start: 0;
   border-inline-start: 0;
 }
 
 [data-scope='tour'][data-part='arrow'][data-placement^='right'] {
-  inset-inline-start: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-block-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-inline-start: calc(var(--xh-_tour-arrow-size) / -2);
+  inset-block-start: calc(var(--xh-_tour-arrow-y) - var(--xh-_tour-arrow-size) / 2);
   border-block-start: 0;
   border-inline-end: 0;
 }
 
 [data-scope='tour'][data-part='arrow'][data-placement^='left'] {
-  inset-inline-end: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  inset-block-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  inset-inline-end: calc(var(--xh-_tour-arrow-size) / -2);
+  inset-block-start: calc(var(--xh-_tour-arrow-y) - var(--xh-_tour-arrow-size) / 2);
   border-block-end: 0;
   border-inline-start: 0;
 }
@@ -15109,7 +16182,7 @@
   gap: var(--xh-transfer-header-gap, var(--xh-control-gap-md));
   align-items: center;
   padding-block: var(--xh-transfer-header-py, var(--xh-space-2));
-  padding-inline: var(--xh-transfer-header-px, var(--xh-control-px-sm));
+  padding-inline: var(--xh-transfer-header-px, var(--xh-control-px-md));
   border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-panel-border, var(--xh-border-default));
 }
 
@@ -15145,9 +16218,9 @@
   display: block;
   inline-size: 100%;
   block-size: var(--xh-transfer-search-h, var(--xh-control-h-sm));
-  padding-inline: var(--xh-transfer-search-px, var(--xh-control-px-sm));
+  padding-inline: var(--xh-transfer-search-px, var(--xh-control-px-md));
   border: 0;
-  border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-panel-border, var(--xh-border-default));
+  border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-search-border, var(--xh-border-control));
   background: var(--xh-transfer-search-bg, transparent);
   color: var(--xh-transfer-search-fg, var(--xh-fg-default));
   font: inherit;
@@ -15186,8 +16259,8 @@
   flex: none;
   gap: var(--xh-transfer-item-gap, var(--xh-control-gap-md));
   align-items: center;
-  padding-block: var(--xh-transfer-item-py, var(--xh-space-1));
-  padding-inline: var(--xh-transfer-item-px, var(--xh-control-px-sm));
+  padding-block: var(--xh-transfer-item-py, var(--xh-space-1_5));
+  padding-inline: var(--xh-transfer-item-px, var(--xh-control-px-md));
   border-radius: var(--xh-transfer-item-radius, var(--xh-shape-control));
   color: var(--xh-transfer-item-fg, var(--xh-fg-default));
   font-size: var(--xh-transfer-item-font-size, var(--xh-text-body-size));
@@ -15196,13 +16269,15 @@
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
-  transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
-/* 键盘高亮与指针悬停共用一套底色：条目本身承载焦点，不另画描边。
+/* 悬停与键盘锚点共用中性灰轻档：条目本身承载焦点，不另画描边。
    data-highlighted 跟的是连接层记的焦点条目，与勾选互相独立 */
 [data-scope='transfer'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
-  background: var(--xh-transfer-item-bg-highlight, var(--xh-bg-subtle-hover));
+  background: var(--xh-transfer-item-bg-hover, var(--xh-bg-subtle));
 }
 
 [data-scope='transfer'][data-part='item']:focus-visible {
@@ -15235,7 +16310,7 @@
   justify-content: center;
   inline-size: var(--xh-transfer-checkbox-size, 16px);
   block-size: var(--xh-transfer-checkbox-size, 16px);
-  border: var(--xh-stroke-thin) solid var(--xh-transfer-checkbox-border, var(--xh-border-default));
+  border: var(--xh-stroke-thin) solid var(--xh-transfer-checkbox-border, var(--xh-border-control));
   border-radius: var(--xh-transfer-checkbox-radius, var(--xh-radius-sm));
   background: var(--xh-transfer-checkbox-bg, var(--xh-bg-canvas));
   color: var(--xh-transfer-checkbox-fg, var(--xh-fg-on-brand));
@@ -15438,8 +16513,8 @@
   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));
-  padding-inline: var(--xh-tree-row-px, var(--xh-control-px-sm));
+  padding-block: var(--xh-tree-row-py, var(--xh-space-1_5));
+  padding-inline: var(--xh-tree-row-px, var(--xh-control-px-md));
   border-radius: var(--xh-tree-row-radius, var(--xh-shape-control));
   color: var(--xh-tree-row-fg, var(--xh-fg-default));
   font-size: var(--xh-tree-row-font-size, var(--xh-text-body-size));
@@ -15448,6 +16523,9 @@
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 [data-scope='tree'][data-part='item'][hidden],
@@ -15455,11 +16533,11 @@
   display: none;
 }
 
-/* 键盘高亮与指针高亮共用一套底色。data-highlighted 跟的是连接层记的焦点行，
-   与选中互相独立：可以停在一个没被选中的节点上 */
+/* 悬停与键盘锚点共用中性灰轻档：data-highlighted 跟的是连接层记的焦点行，
+   与选中互相独立，键盘落焦另有聚焦环标记位置 */
 [data-scope='tree'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]),
 [data-scope='tree'][data-part='branch-control']:not([data-disabled]):is(:hover, [data-highlighted]) {
-  background: var(--xh-tree-row-bg-highlight, var(--xh-bg-subtle-hover));
+  background: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
 }
 
 /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，
@@ -15584,8 +16662,8 @@
 
   /* 形态档只换触发框的描边与底色这三个槽，浮层与树不跟着变：
      变的是「这是个输入位」的表达方式，不是弹出内容的表达方式 */
-  --xh-_tree-select-border: var(--xh-border-default);
-  --xh-_tree-select-border-hover: var(--xh-border-strong);
+  --xh-_tree-select-border: var(--xh-border-control);
+  --xh-_tree-select-border-hover: var(--xh-border-control-hover);
   --xh-_tree-select-bg: var(--xh-bg-canvas);
 
   /* 选中行的文字色随语气走，没写 data-tone 时退回品牌强调色 */
@@ -15606,15 +16684,15 @@
 /* 形态只决定描边与底色怎么用；用哪族颜色由 data-tone 决定，没写 tone 就沿用原来的中性配色 */
 /* outline 就是缺省那一身：描边加画布底，写出来只为让三档并列可读 */
 [data-scope='tree-select'][data-part='root'][data-variant='outline'] {
-  --xh-_tree-select-border: var(--xh-border-default);
-  --xh-_tree-select-border-hover: var(--xh-border-strong);
+  --xh-_tree-select-border: var(--xh-border-control);
+  --xh-_tree-select-border-hover: var(--xh-border-control-hover);
   --xh-_tree-select-bg: var(--xh-bg-canvas);
 }
 
 /* subtle 是填充式：底色接过「这里能点」的表达，描边随之让位 */
 [data-scope='tree-select'][data-part='root'][data-variant='subtle'] {
   --xh-_tree-select-border: transparent;
-  --xh-_tree-select-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  --xh-_tree-select-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   --xh-_tree-select-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
 }
 
@@ -15689,10 +16767,9 @@
   border-color: var(--xh-tree-select-trigger-border-hover, var(--xh-_tree-select-border-hover));
 }
 
-/* trigger 是整个控件唯一的 Tab 停靠点（展开后停靠点才移进树里），落焦必须看得见。
-   语气落在环上：没写 data-tone 时 --xh-_tone 没被声明，退回原来的聚焦环色 */
+/* trigger 是整个控件唯一的 Tab 停靠点（展开后停靠点才移进树里），落焦必须看得见 */
 [data-scope='tree-select'][data-part='trigger']:focus-visible {
-  outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
   outline-offset: var(--xh-ring-offset);
 }
 
@@ -15791,7 +16868,7 @@
 /* 清空按钮退出了 Tab 序列（tabindex=-1），正常操作走不到这里；
    留着是给程序化聚焦兜底，落焦时得看得见 */
 [data-scope='tree-select'][data-part='clear-trigger']:focus-visible {
-  outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
   outline-offset: var(--xh-ring-offset);
 }
 
@@ -15857,8 +16934,14 @@
   display: none;
 }
 
-/* 没有锚点时容器自己进 Tab 序列兜底，落焦不画环：高亮永远长在行上 */
-[data-scope='tree-select'][data-part='tree']:focus-visible {
+/* 焦点落在树容器上只有一种情形：指针打开、还没有任何行当锚点。那一刻它认领着 Tab 位，
+   环画在内沿，用户才看得出键盘此刻在哪儿；有锚点时环长在行上，容器不再画 */
+[data-scope='tree-select'][data-part='tree'][tabindex='0']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: calc(-1 * var(--xh-ring-width));
+}
+
+[data-scope='tree-select'][data-part='tree']:not([tabindex='0']):focus-visible {
   outline: none;
 }
 
@@ -15869,7 +16952,7 @@
 }
 
 [data-scope='tree-select'][data-part='branch']:focus-visible > [data-scope='tree-select'][data-part='branch-control'] {
-  outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
   /* 往内收：行是撑满宽度的，环画在外沿会被容器裁掉 */
   outline-offset: calc(-1 * var(--xh-ring-width));
 }
@@ -15880,8 +16963,8 @@
   display: flex;
   align-items: center;
   gap: var(--xh-tree-select-row-gap, var(--xh-_tree-select-gap));
-  padding-block: var(--xh-tree-select-row-py, var(--xh-space-1));
-  padding-inline: var(--xh-tree-select-row-px, var(--xh-control-px-sm));
+  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));
   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));
@@ -15890,6 +16973,9 @@
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
+  transition:
+    background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+    color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
 }
 
 [data-scope='tree-select'][data-part='item'][hidden],
@@ -15897,11 +16983,11 @@
   display: none;
 }
 
-/* 键盘高亮与指针高亮共用一套底色。data-highlighted 跟的是连接层记的焦点行，
-   与选中互相独立：可以停在一个没被选中的节点上 */
+/* 悬停与键盘锚点共用中性灰轻档：data-highlighted 跟的是连接层记的焦点行，
+   与选中互相独立，键盘落焦另有聚焦环标记位置 */
 [data-scope='tree-select'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]),
 [data-scope='tree-select'][data-part='branch-control']:not([data-disabled]):is(:hover, [data-highlighted]) {
-  background: var(--xh-tree-select-row-bg-highlight, var(--xh-bg-subtle-hover));
+  background: var(--xh-tree-select-row-bg-hover, var(--xh-bg-subtle));
 }
 
 /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，
@@ -15914,7 +17000,7 @@
 
 /* 叶子自己就是 treeitem，环直接画在它身上 */
 [data-scope='tree-select'][data-part='item']:focus-visible {
-  outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
   outline-offset: calc(-1 * var(--xh-ring-width));
 }