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

package/css/cascader.css

@@ -6,6 +6,9 @@
 
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   [data-scope='cascader'][data-part='positioner'] {
+    /* 列区的自绘条浮在内容之上：轨道不上底色，实色轨道会在列区下缘糊出一条灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
     position: fixed;
     z-index: var(--xh-cascader-layer, var(--xh-layer-popover));
     /* 空壳不吃指针，交互只发生在 content 里 */
@@ -25,9 +28,11 @@
     /* 尺寸档只换这几个私有槽，盒与列里的条目都从这两处继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_cascader-h: var(--xh-control-h-md);
     --xh-_cascader-px: var(--xh-control-px-md);
+    --xh-_cascader-row-py: var(--xh-list-option-py-md);
+    --xh-_cascader-row-px: var(--xh-control-px-md);
     --xh-_cascader-gap: var(--xh-control-gap-md);
-    --xh-_cascader-font-size: var(--xh-text-body-size);
-    --xh-_cascader-label-font-size: var(--xh-text-label-size);
+    --xh-_cascader-font-size: var(--xh-control-font-md);
+    --xh-_cascader-label-font-size: var(--xh-control-font-md);
 
     /* 形态档只换触发框的描边与底色这三个槽，浮层与列不跟着变：
        变的是「这是个输入位」的表达方式，不是弹出内容的表达方式 */
@@ -86,6 +91,8 @@
     --xh-icon-size: var(--xh-cascader-icon-size, var(--xh-glyph-size-sm));
     --xh-_cascader-h: var(--xh-control-h-sm);
     --xh-_cascader-px: var(--xh-control-px-sm);
+    --xh-_cascader-row-py: var(--xh-list-option-py-sm);
+    --xh-_cascader-row-px: var(--xh-control-px-sm);
     --xh-_cascader-gap: var(--xh-control-gap-sm);
     --xh-_cascader-font-size: var(--xh-control-font-sm);
     --xh-_cascader-label-font-size: var(--xh-control-font-sm);
@@ -95,6 +102,8 @@
     --xh-icon-size: var(--xh-cascader-icon-size, var(--xh-glyph-size-lg));
     --xh-_cascader-h: var(--xh-control-h-lg);
     --xh-_cascader-px: var(--xh-control-px-lg);
+    --xh-_cascader-row-py: var(--xh-list-option-py-lg);
+    --xh-_cascader-row-px: var(--xh-control-px-lg);
     --xh-_cascader-gap: var(--xh-control-gap-lg);
     --xh-_cascader-font-size: var(--xh-control-font-lg);
     --xh-_cascader-label-font-size: var(--xh-control-font-lg);
@@ -334,6 +343,7 @@
     display: flex;
     flex: none;
     flex-direction: column;
+    gap: var(--xh-cascader-column-gap, var(--xh-list-option-gap));
     min-inline-size: var(--xh-cascader-column-min-w, 7rem);
     block-size: var(--xh-cascader-column-h, var(--xh-viewport-h-sm));
     padding-block: var(--xh-cascader-column-py, var(--xh-space-1));
@@ -369,8 +379,8 @@
     align-items: center;
     gap: var(--xh-cascader-row-gap, var(--xh-_cascader-gap));
     max-inline-size: var(--xh-cascader-row-max-w, var(--xh-overlay-max-w));
-    padding-block: var(--xh-cascader-row-py, var(--xh-space-1_5));
-    padding-inline: var(--xh-cascader-row-px, var(--xh-control-px-md));
+    padding-block: var(--xh-cascader-row-py, var(--xh-_cascader-row-py));
+    padding-inline: var(--xh-cascader-row-px, var(--xh-_cascader-row-px));
     border-radius: var(--xh-cascader-row-radius, var(--xh-shape-control));
     color: var(--xh-cascader-row-fg, var(--xh-fg-default));
     font-size: var(--xh-cascader-row-font-size, var(--xh-_cascader-font-size));
@@ -423,22 +433,17 @@
     cursor: not-allowed;
   }
 
-  /* 分支条目行尾画右向小箭头：不点开也看得出还有下一级。
-     全边框描好后抹掉块末与行首两边，剩下的直角旋成箭头；位置由 item-text 的 flex:1 顶到行尾 */
+  /* 分支条目行尾画右向小箭头：不点开也看得出还有下一级。位置由 item-text 的 flex:1 顶到行尾。
+     与菜单族的子菜单箭头同走字形令牌——此前这里是「描全边框再抹掉两条、把剩下的直角旋 45 度」，
+     作者换掉标记时换不动它，RTL 还得再翻一次旋转角 */
   [data-scope='cascader'][data-part='item'][data-branch]::after {
     content: '';
     flex: none;
-    inline-size: var(--xh-cascader-branch-arrow-size, var(--xh-space-1_5));
-    block-size: var(--xh-cascader-branch-arrow-size, var(--xh-space-1_5));
-    border: var(--xh-glyph-stroke-light) solid var(--xh-cascader-branch-arrow-fg, var(--xh-fg-subtle));
-    border-block-end: 0;
-    border-inline-start: 0;
-    rotate: 45deg;
-  }
-
-  /* rtl 下剩下的是块首与行末（物理左上）两边，反向旋 45 度才指向行进方向 */
-  [dir='rtl'] [data-scope='cascader'][data-part='item'][data-branch]::after {
-    rotate: -45deg;
+    inline-size: var(--xh-cascader-branch-arrow-size, var(--xh-icon-size, var(--xh-glyph-size-text)));
+    block-size: var(--xh-cascader-branch-arrow-size, var(--xh-icon-size, var(--xh-glyph-size-text)));
+    background-color: var(--xh-cascader-branch-arrow-fg, var(--xh-fg-subtle));
+    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
   }
 
   [data-scope='cascader'][data-part='item'][data-branch][data-disabled]::after {
@@ -460,7 +465,7 @@
     align-items: center;
     justify-content: center;
     inline-size: var(--xh-cascader-item-indicator-size, var(--xh-control-indicator-size));
-    color: var(--xh-cascader-item-indicator-fg, var(--xh-_tone, var(--xh-bg-brand)));
+    color: var(--xh-cascader-item-indicator-fg, var(--xh-_tone, var(--xh-fg-brand)));
     visibility: hidden;
   }
 
@@ -486,11 +491,11 @@
 
   /* 级联勾选的半选态只在皮肤自绘（:empty）时露面画横杠：
      作者塞了自己的选中图形时，半选放出来会顶着一个语义相反的勾，表达交还作者 */
-  [data-scope='cascader'][data-part='item-indicator'][data-indeterminate]:empty {
+  [data-scope='cascader'][data-part='item-indicator'][data-state='indeterminate']:empty {
     visibility: visible;
   }
 
-  [data-scope='cascader'][data-part='item-indicator'][data-indeterminate]:not([data-state='checked']):empty::before {
+  [data-scope='cascader'][data-part='item-indicator'][data-state='indeterminate']:empty::before {
     content: '';
     display: inline-block;
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
@@ -517,7 +522,7 @@
     padding-block: var(--xh-cascader-input-py, var(--xh-space-2));
     padding-inline: var(--xh-cascader-input-px, var(--xh-control-px-md));
     border: none;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-cascader-content-border, var(--xh-border-default));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-cascader-search-divider, var(--xh-border-subtle));
     border-start-start-radius: inherit;
     border-start-end-radius: inherit;
     background: none;
@@ -540,6 +545,7 @@
     display: flex;
     flex-basis: 100%;
     flex-direction: column;
+    gap: var(--xh-cascader-search-list-gap, var(--xh-list-option-gap));
     block-size: var(--xh-cascader-column-h, var(--xh-viewport-h-sm));
     padding: var(--xh-cascader-search-p, var(--xh-space-1));
     overflow-y: auto;
@@ -561,8 +567,8 @@
 
   /* 候选与列内条目同一套行度量，虚拟高亮与悬停同用轻档 */
   [data-scope='cascader'][data-part='search-item'] {
-    padding-block: var(--xh-cascader-row-py, var(--xh-space-1_5));
-    padding-inline: var(--xh-cascader-row-px, var(--xh-control-px-md));
+    padding-block: var(--xh-cascader-row-py, var(--xh-_cascader-row-py));
+    padding-inline: var(--xh-cascader-row-px, var(--xh-_cascader-row-px));
     overflow: hidden;
     border-radius: var(--xh-cascader-row-radius, var(--xh-shape-control));
     color: var(--xh-cascader-row-fg, var(--xh-fg-default));

package/css/checkbox-group.css

@@ -129,25 +129,51 @@
   }
 
   /* 全选格的三态：checked 打勾、indeterminate 打横杠、unchecked 留空。
-     indeterminate 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state */
-  [data-scope='checkbox-group'][data-part='trigger'][data-state='checked']::before {
+     indeterminate 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state。
+
+     字形走 ::after 而不是画方框的那颗 ::before：mask 会把所在元素的描边与底色一并裁成
+     字形的轮廓，写在 ::before 上就等于把方框本身裁没了，只剩一枚白勾。条目那一侧是
+     真实节点当方框、它的 ::before 当字形的两层结构，这里 anatomy 到 trigger 为止、
+     没有第二个节点，只能用第二个伪元素补上那一层。
+     方框是行首那颗 ::before、宽度即指示符尺寸，所以字形按「盒与字形的宽度差之半」
+     内推即落在圆心；纵向靠 inset-block: 0 + margin-block: auto 居中。
+     font-size 与 ::before 同值，--xh-icon-size 的 1em 兜底才和条目那侧量得一样大 */
+  [data-scope='checkbox-group'][data-part='trigger'][data-state='checked']::after {
     content: '';
-    display: inline-block;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    margin-block: auto;
+    margin-inline-start: calc(
+      (
+        var(--xh-checkbox-group-indicator-size, var(--xh-control-indicator-size)) -
+          var(--xh-icon-size, var(--xh-glyph-size-text))
+      ) / 2
+    );
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
     block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    vertical-align: var(--xh-glyph-baseline-shift);
-    background-color: currentColor;
+    background-color: var(--xh-checkbox-group-indicator-fg, var(--xh-fg-on-brand));
+    font-size: var(--xh-checkbox-group-indicator-font-size, calc(var(--xh-control-indicator-size) * 0.75));
     -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
 
-  [data-scope='checkbox-group'][data-part='trigger'][data-state='indeterminate']::before {
+  [data-scope='checkbox-group'][data-part='trigger'][data-state='indeterminate']::after {
     content: '';
-    display: inline-block;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    margin-block: auto;
+    margin-inline-start: calc(
+      (
+        var(--xh-checkbox-group-indicator-size, var(--xh-control-indicator-size)) -
+          var(--xh-icon-size, var(--xh-glyph-size-text))
+      ) / 2
+    );
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
     block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    vertical-align: var(--xh-glyph-baseline-shift);
-    background-color: currentColor;
+    background-color: var(--xh-checkbox-group-indicator-fg, var(--xh-fg-on-brand));
+    font-size: var(--xh-checkbox-group-indicator-font-size, calc(var(--xh-control-indicator-size) * 0.75));
     -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
     mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
@@ -164,8 +190,10 @@
   }
 
   /* 全选格与条目同形，但字重加一档，读起来才不像又一个普通选项。
-     它是普通元素而非原生控件（三态只有非原生控件表达得出），禁用态同样只能读 data-disabled */
+     它是普通元素而非原生控件（三态只有非原生控件表达得出），禁用态同样只能读 data-disabled。
+     position 是给叠在方框上的那颗字形 ::after 当定位基准 */
   [data-scope='checkbox-group'][data-part='trigger'] {
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: var(--xh-checkbox-group-trigger-gap, var(--xh-control-gap-md));

package/css/checkbox.css

@@ -10,7 +10,7 @@
 
     /* 尺寸档只换方框边长这一个私有槽，勾的字号按边长的比例跟着走；
        指示器从 root 继承这两个槽，换档不必给每个部件各写一条选择器 */
-    --xh-_checkbox-box: var(--xh-control-indicator-size);
+    --xh-_checkbox-box: var(--xh-control-indicator-md);
     --xh-_checkbox-glyph: calc(var(--xh-_checkbox-box) * 0.75);
 
     /* 选中态的底与描边随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
@@ -27,7 +27,7 @@
     block-size: var(--xh-_checkbox-box);
     padding: 0;
     border: var(--xh-stroke-thin) solid var(--xh-checkbox-border, var(--xh-border-control));
-    border-radius: var(--xh-shape-inset);
+    border-radius: var(--xh-checkbox-radius, var(--xh-shape-inset));
     background: var(--xh-checkbox-bg, var(--xh-bg-canvas));
     color: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
     cursor: pointer;
@@ -37,7 +37,7 @@
   }
 
   /* 半选与全选同样是「有值」，方框都得填上：
-     只填全选的话，半选那条横杠是实心底上的前景色（白），压在白画布上等于没画 */
+     只填全选的话，半选那条横杠是实心底上的前景色，压在同色画布上等于没画 */
   [data-scope='checkbox'][data-part='root'][data-state='checked'],
   [data-scope='checkbox'][data-part='root'][data-state='indeterminate'] {
     border-color: var(--xh-checkbox-border-checked, var(--xh-_checkbox-accent));
@@ -71,11 +71,11 @@
   /* —— 尺寸 —— */
   /* 缺省档写在上面的基础规则里 */
   [data-scope='checkbox'][data-part='root'][data-size='sm'] {
-    --xh-_checkbox-box: calc(var(--xh-control-indicator-size) - var(--xh-space-1));
+    --xh-_checkbox-box: var(--xh-control-indicator-sm);
   }
 
   [data-scope='checkbox'][data-part='root'][data-size='lg'] {
-    --xh-_checkbox-box: calc(var(--xh-control-indicator-size) + var(--xh-space-1));
+    --xh-_checkbox-box: var(--xh-control-indicator-lg);
   }
 
   [data-scope='checkbox'][data-part='indicator'] {
@@ -104,7 +104,9 @@
     display: none;
   }
 
-  /* 半选画一条横杠盖住勾：aria-checked=mixed 在视觉上也得与「全选」分得开 */
+  /* 半选换一枚横杠字形盖住勾：aria-checked=mixed 在视觉上也得与「全选」分得开。
+     横杠与勾同走字形令牌，作者换掉标记时两态一起换；此前这条是手画的几何盒
+     （60% × stroke-thick），同一页上会出现两种横杠 */
   [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate'] {
     position: relative;
     color: transparent;
@@ -112,11 +114,12 @@
 
   [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate']::after {
     position: absolute;
-    inline-size: 60%;
-    block-size: var(--xh-stroke-thick);
-    border-radius: var(--xh-shape-pill);
-    background: var(--xh-checkbox-indicator-fg, var(--xh-_checkbox-on-accent));
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    background-color: var(--xh-checkbox-indicator-fg, var(--xh-_checkbox-on-accent));
     content: '';
+    -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
 
   /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox-group 的条目同一副样子 —— */
@@ -139,4 +142,12 @@
     color: inherit;
     user-select: none;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='checkbox'][data-part='root'][hidden],
+  [data-scope='checkbox'][data-part='indicator'][hidden],
+  [data-scope='checkbox'][data-part='label'][hidden] {
+    display: none;
+  }
 }

package/css/collapsible.css

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

package/css/color-picker.css

@@ -40,7 +40,7 @@
     --xh-_color-picker-h: var(--xh-control-h-md);
     --xh-_color-picker-px: var(--xh-control-px-md);
     --xh-_color-picker-gap: var(--xh-control-gap-md);
-    --xh-_color-picker-label-font-size: var(--xh-text-label-size);
+    --xh-_color-picker-label-font-size: var(--xh-control-font-md);
 
     /* 聚焦环恒用固定环色 */
     --xh-_color-picker-ring: var(--xh-ring-focus);
@@ -50,6 +50,23 @@
     gap: var(--xh-color-picker-gap, var(--xh-space-1));
   }
 
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里。浮层那一侧也要挂：positioner 被搬到 portal 落点，
+     继承不到根上的私有槽，所以两个部件一起收 */
+  [data-scope='color-picker']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
+    --xh-_color-picker-h: var(--xh-control-h-sm);
+    --xh-_color-picker-px: var(--xh-control-px-sm);
+    --xh-_color-picker-gap: var(--xh-control-gap-sm);
+    --xh-_color-picker-label-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='color-picker']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
+    --xh-_color-picker-h: var(--xh-control-h-lg);
+    --xh-_color-picker-px: var(--xh-control-px-lg);
+    --xh-_color-picker-gap: var(--xh-control-gap-lg);
+    --xh-_color-picker-label-font-size: var(--xh-control-font-lg);
+  }
+
   [data-scope='color-picker'][data-part='label'] {
     color: var(--xh-color-picker-label-fg, var(--xh-fg-default));
     font-size: var(--xh-color-picker-label-font-size, var(--xh-_color-picker-label-font-size));
@@ -161,6 +178,9 @@
        引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
     --xh-_color-picker-available-h: 100vh;
 
+    /* 面板的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊出一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
     position: fixed;
     z-index: var(--xh-color-picker-layer, var(--xh-layer-popover));
     /* 空壳不吃指针，交互只发生在 content 上 */
@@ -456,7 +476,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-control));
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-swatch-border, var(--xh-border-default));
     border-radius: var(--xh-color-picker-swatch-radius, var(--xh-shape-inset));
     cursor: pointer;
   }

package/css/combobox.css

@@ -37,6 +37,9 @@
        引擎没算（尚未落位 / 无引擎）时不额外限高 */
     --xh-_combobox-available-h: 100vh;
 
+    /* 候选列表的自绘条浮在内容之上：轨道不上底色，实色轨道会在列表右缘糊一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
     position: fixed;
     z-index: var(--xh-combobox-layer, var(--xh-layer-popover));
     /* 空壳不吃指针，交互只发生在 content 与 empty 上 */
@@ -54,9 +57,11 @@
        换档不必给每个部件各写一条选择器 */
     --xh-_combobox-h: var(--xh-control-h-md);
     --xh-_combobox-px: var(--xh-control-px-md);
+    --xh-_combobox-item-py: var(--xh-list-option-py-md);
+    --xh-_combobox-item-px: var(--xh-control-px-md);
     --xh-_combobox-gap: var(--xh-control-gap-md);
-    --xh-_combobox-font-size: var(--xh-text-body-size);
-    --xh-_combobox-label-font-size: var(--xh-text-label-size);
+    --xh-_combobox-font-size: var(--xh-control-font-md);
+    --xh-_combobox-label-font-size: var(--xh-control-font-md);
 
     /* 作者塞进指示符槽的图标跟着控件的尺寸档走；它自己写了 size 时仍以作者的为准 */
     --xh-icon-size: var(--xh-combobox-icon-size, var(--xh-glyph-size-md));
@@ -69,7 +74,7 @@
     /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
        没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
     --xh-_combobox-ring: var(--xh-ring-focus);
-    --xh-_combobox-accent: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_combobox-accent: var(--xh-_tone, var(--xh-fg-brand));
     --xh-_combobox-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
   }
 
@@ -89,6 +94,8 @@
   [data-scope='combobox']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
     --xh-_combobox-h: var(--xh-control-h-sm);
     --xh-_combobox-px: var(--xh-control-px-sm);
+    --xh-_combobox-item-py: var(--xh-list-option-py-sm);
+    --xh-_combobox-item-px: var(--xh-control-px-sm);
     --xh-_combobox-gap: var(--xh-control-gap-sm);
     --xh-_combobox-font-size: var(--xh-control-font-sm);
     --xh-_combobox-label-font-size: var(--xh-control-font-sm);
@@ -99,6 +106,8 @@
   [data-scope='combobox']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
     --xh-_combobox-h: var(--xh-control-h-lg);
     --xh-_combobox-px: var(--xh-control-px-lg);
+    --xh-_combobox-item-py: var(--xh-list-option-py-lg);
+    --xh-_combobox-item-px: var(--xh-control-px-lg);
     --xh-_combobox-gap: var(--xh-control-gap-lg);
     --xh-_combobox-font-size: var(--xh-control-font-lg);
     --xh-_combobox-label-font-size: var(--xh-control-font-lg);
@@ -217,7 +226,7 @@
   [data-scope='combobox'][data-part='control']:has([data-part='input'][data-multiline]) {
     align-items: start;
     block-size: auto;
-    padding-block: var(--xh-field-py);
+    padding-block: var(--xh-combobox-input-py, var(--xh-field-py));
   }
 
   [data-scope='combobox'][data-part='input'][data-multiline] {
@@ -331,6 +340,7 @@
   [data-scope='combobox'][data-part='content'] {
     display: flex;
     flex-direction: column;
+    gap: var(--xh-combobox-content-gap, var(--xh-list-option-gap));
     min-inline-size: var(--xh-combobox-content-min-w, var(--xh-overlay-min-w));
     max-inline-size: var(--xh-combobox-content-max-w, var(--xh-overlay-max-w));
     max-block-size: min(var(--xh-combobox-content-max-h, var(--xh-overlay-max-h)), var(--xh-_combobox-available-h));
@@ -370,6 +380,7 @@
   [data-scope='combobox'][data-part='item-group'] {
     display: flex;
     flex-direction: column;
+    gap: var(--xh-combobox-item-group-gap, var(--xh-list-option-gap));
   }
 
   [data-scope='combobox'][data-part='item-group'][hidden] {
@@ -378,7 +389,7 @@
 
   /* 组间留白只加在后继分组上：首组顶上已经有 content 的内边距，再加一层会显得头重 */
   [data-scope='combobox'][data-part='item-group'] + [data-scope='combobox'][data-part='item-group'] {
-    margin-block-start: var(--xh-combobox-group-gap, var(--xh-space-2));
+    margin-block-start: var(--xh-combobox-group-gap, var(--xh-space-1_5));
   }
 
   /* 分组标题不是候选、进不了导航，画成小号次要文字，内缩与候选对齐（同一个 padding-inline） */
@@ -401,8 +412,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_5));
-    padding-inline: var(--xh-combobox-item-px, var(--xh-control-px-md));
+    padding-block: var(--xh-combobox-item-py, var(--xh-_combobox-item-py));
+    padding-inline: var(--xh-combobox-item-px, var(--xh-_combobox-item-px));
     border-radius: var(--xh-combobox-item-radius, var(--xh-shape-control));
     color: var(--xh-combobox-item-fg, var(--xh-fg-default));
     font-size: var(--xh-combobox-item-font-size, var(--xh-_combobox-font-size));

package/css/context-menu.css

@@ -10,6 +10,9 @@
        引擎没算（尚未落位 / 无引擎）时不额外限高 */
     --xh-_context-menu-available-h: 100vh;
 
+    /* 条目列表的自绘条浮在内容之上：轨道不上底色，实色轨道会在菜单右缘糊一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
     position: fixed;
     z-index: var(--xh-context-menu-layer, var(--xh-layer-popover));
     /* 空壳不吃指针，交互只发生在 content 上 */
@@ -25,10 +28,10 @@
   [data-scope='context-menu']:is([data-part='root'], [data-part='positioner']) {
     /* 尺寸档只换这四个私有槽，条目与分组标题都从这两处继承它们，
        换档不必给每个部件各写一条选择器 */
-    --xh-_context-menu-item-py: var(--xh-space-1_5);
+    --xh-_context-menu-item-py: var(--xh-list-option-py-md);
     --xh-_context-menu-item-px: var(--xh-control-px-md);
     --xh-_context-menu-item-gap: var(--xh-control-gap-md);
-    --xh-_context-menu-font-size: var(--xh-text-body-size);
+    --xh-_context-menu-font-size: var(--xh-control-font-md);
 
     /* 打开子菜单的触发条目走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底。
        悬停与键盘焦点恒中性灰轻档、不接语气槽——两档同色相的话打开路径就认不出来了 */
@@ -43,6 +46,12 @@
     display: contents;
   }
 
+  /* 浮层被搬到 portal 落点，继承不到 root 上的槽：这把尺在被搬走的那一侧再声明一次，
+     关闭钮与条目里作者塞的图标才和皮肤画的兜底字形一样大 */
+  [data-scope='context-menu'][data-part='content'] {
+    --xh-icon-size: var(--xh-context-menu-icon-size, var(--xh-glyph-size-text));
+  }
+
   [data-scope='context-menu'][data-part='root'][hidden] {
     display: none;
   }
@@ -51,14 +60,14 @@
   /* 缺省档写在上面的基础规则里。条目高度由 padding 撑出来：
      纵向走 space 档、行内内缩走 control-px 档（随密度轴），换档各挪一级 */
   [data-scope='context-menu']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
-    --xh-_context-menu-item-py: var(--xh-space-1);
+    --xh-_context-menu-item-py: var(--xh-list-option-py-sm);
     --xh-_context-menu-item-px: var(--xh-control-px-sm);
     --xh-_context-menu-item-gap: var(--xh-control-gap-sm);
     --xh-_context-menu-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='context-menu']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
-    --xh-_context-menu-item-py: var(--xh-space-2);
+    --xh-_context-menu-item-py: var(--xh-list-option-py-lg);
     --xh-_context-menu-item-px: var(--xh-control-px-lg);
     --xh-_context-menu-item-gap: var(--xh-control-gap-lg);
     --xh-_context-menu-font-size: var(--xh-control-font-lg);
@@ -79,6 +88,7 @@
   [data-scope='context-menu'][data-part='content'] {
     display: flex;
     flex-direction: column;
+    gap: var(--xh-context-menu-content-gap, var(--xh-list-option-gap));
     min-inline-size: var(--xh-context-menu-min-w, var(--xh-overlay-menu-min-w));
     max-inline-size: var(--xh-context-menu-max-w, var(--xh-overlay-max-w));
     /* 两道上限取更小的那道：自己的高度上限，以及落定那一侧真正剩下的空间。
@@ -128,6 +138,7 @@
   [data-scope='context-menu'][data-part='group'] {
     display: flex;
     flex-direction: column;
+    gap: var(--xh-context-menu-group-gap, var(--xh-list-option-gap));
   }
 
   [data-scope='context-menu'][data-part='group'][hidden] {
@@ -241,7 +252,7 @@
     align-items: center;
     justify-content: center;
     inline-size: var(--xh-context-menu-item-indicator-size, var(--xh-control-indicator-size));
-    color: var(--xh-context-menu-item-indicator-fg, var(--xh-fg-brand));
+    color: var(--xh-context-menu-item-indicator-fg, var(--xh-_tone, var(--xh-fg-brand)));
   }
 
   [data-scope='context-menu'][data-part='item-indicator'][hidden] {
@@ -254,7 +265,7 @@
 
   [data-scope='context-menu'][data-part='separator'] {
     block-size: var(--xh-context-menu-separator-thickness, var(--xh-stroke-thin));
-    margin-block: var(--xh-context-menu-separator-my, var(--xh-space-1));
+    margin-block: var(--xh-context-menu-separator-my, var(--xh-space-0_5));
     background: var(--xh-context-menu-separator-color, var(--xh-border-default));
   }
 

package/css/date-field.css

@@ -13,8 +13,8 @@
     --xh-_date-field-control-h: var(--xh-control-h-md);
     --xh-_date-field-control-px: var(--xh-control-px-md);
     --xh-_date-field-gap: var(--xh-control-gap-md);
-    --xh-_date-field-font-size: var(--xh-text-body-size);
-    --xh-_date-field-label-font-size: var(--xh-text-label-size);
+    --xh-_date-field-font-size: var(--xh-control-font-md);
+    --xh-_date-field-label-font-size: var(--xh-control-font-md);
     /* 形态档只换这三个私有槽：底色与两档描边 */
     --xh-_date-field-control-bg: var(--xh-bg-canvas);
     --xh-_date-field-control-border: var(--xh-border-control);