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

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);

package/css/date-picker.css

@@ -10,6 +10,9 @@
        引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
     --xh-_date-picker-available-h: 100vh;
 
+    /* 面板的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊出一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
     position: fixed;
     z-index: var(--xh-date-picker-layer, var(--xh-layer-popover));
     /* 空壳不吃指针，交互只发生在 content 里 */
@@ -28,8 +31,8 @@
     --xh-_date-picker-control-h: var(--xh-control-h-md);
     --xh-_date-picker-control-px: var(--xh-control-px-md);
     --xh-_date-picker-gap: var(--xh-control-gap-md);
-    --xh-_date-picker-font-size: var(--xh-text-body-size);
-    --xh-_date-picker-label-font-size: var(--xh-text-label-size);
+    --xh-_date-picker-font-size: var(--xh-control-font-md);
+    --xh-_date-picker-label-font-size: var(--xh-control-font-md);
 
     /* 形态档只换这三个私有槽：底色与两档描边 */
     --xh-_date-picker-control-bg: var(--xh-bg-canvas);
@@ -326,6 +329,11 @@
     border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-panel-divider, var(--xh-border-subtle));
   }
 
+  /* 快捷选项列与它旁边那张日历之间留出同样的空当，两道分隔线左右对称 */
+  [data-scope='date-picker'][data-part='presets'] + [data-scope='date-picker'][data-part='calendar'] {
+    padding-inline-start: var(--xh-date-picker-panel-gap, var(--xh-space-3));
+  }
+
   [data-scope='date-picker'][data-part='calendar'] {
     display: flex;
     flex-direction: column;
@@ -342,13 +350,15 @@
   [data-scope='date-picker'][data-part='presets'] {
     display: flex;
     flex: none;
+    /* 这一列的高度由并排的日历给：不写就按内容收，右侧那道分隔线只画到最后一条选项 */
+    align-self: stretch;
     flex-direction: column;
-    gap: var(--xh-date-picker-presets-gap, var(--xh-space-0_5));
+    gap: var(--xh-date-picker-presets-gap, var(--xh-list-option-gap));
     /* 选项多起来时这一列自己滚，不把整张面板撑高 */
-    max-block-size: var(--xh-date-picker-presets-h, var(--xh-viewport-h-sm));
-    padding: var(--xh-space-1);
+    max-block-size: var(--xh-date-picker-presets-h, var(--xh-viewport-h-lg));
+    padding: var(--xh-date-picker-presets-padding, var(--xh-space-1));
     overflow-y: auto;
-    border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-picker-content-border, var(--xh-border-default));
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-border-subtle));
   }
 
   [data-scope='date-picker'][data-part='presets'][hidden] {
@@ -356,9 +366,9 @@
   }
 
   [data-scope='date-picker'][data-part='preset'] {
-    padding-block: var(--xh-space-1);
-    padding-inline: var(--xh-space-3);
-    border-radius: var(--xh-shape-control);
+    padding-block: var(--xh-date-picker-preset-py, var(--xh-space-1));
+    padding-inline: var(--xh-date-picker-preset-px, var(--xh-space-3));
+    border-radius: var(--xh-date-picker-preset-radius, var(--xh-shape-control));
     font-size: var(--xh-text-secondary-size);
     line-height: var(--xh-leading-normal);
     white-space: nowrap;
@@ -393,12 +403,12 @@
   [data-scope='date-picker'][data-part='time-column'] {
     display: flex;
     flex-direction: column;
-    gap: var(--xh-date-picker-time-column-gap, var(--xh-space-0_5));
+    gap: var(--xh-date-picker-time-column-gap, var(--xh-list-option-gap));
     /* 几列并排：定高而不是随内容收，否则时列与分列的可选值一多一少就错位 */
     block-size: var(--xh-date-picker-time-column-h, var(--xh-viewport-h-sm));
-    padding: var(--xh-space-1);
+    padding: var(--xh-date-picker-time-column-padding, var(--xh-space-1));
     overflow-y: auto;
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-content-border, var(--xh-border-default));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-border-subtle));
   }
 
   [data-scope='date-picker'][data-part='time-column'][hidden] {
@@ -406,9 +416,9 @@
   }
 
   [data-scope='date-picker'][data-part='time-item'] {
-    padding-block: var(--xh-space-1);
-    padding-inline: var(--xh-space-3);
-    border-radius: var(--xh-shape-control);
+    padding-block: var(--xh-date-picker-time-item-py, var(--xh-space-1));
+    padding-inline: var(--xh-date-picker-time-item-px, var(--xh-space-3));
+    border-radius: var(--xh-date-picker-time-item-radius, var(--xh-shape-control));
     font-size: var(--xh-text-secondary-size);
     line-height: var(--xh-leading-normal);
     text-align: center;
@@ -438,9 +448,9 @@
     align-items: center;
     justify-content: center;
     block-size: var(--xh-control-h-sm);
-    padding-inline: var(--xh-control-px-sm);
+    padding-inline: var(--xh-date-picker-confirm-trigger-px, var(--xh-control-px-sm));
     border: none;
-    border-radius: var(--xh-shape-control);
+    border-radius: var(--xh-date-picker-confirm-trigger-radius, var(--xh-shape-control));
     background: var(--xh-date-picker-confirm-bg, var(--xh-_date-picker-accent));
     color: var(--xh-date-picker-confirm-fg, var(--xh-_date-picker-accent-fg));
     font-size: var(--xh-text-secondary-size);

package/css/descriptions.css

@@ -12,7 +12,7 @@
     --xh-_descriptions-label-gap: var(--xh-space-2);
     --xh-_descriptions-py: var(--xh-space-2);
     --xh-_descriptions-px: var(--xh-space-3);
-    --xh-_descriptions-font-size: var(--xh-text-body-size);
+    --xh-_descriptions-font-size: var(--xh-control-font-md);
     /* 标签在左时那一列的宽度：收到最长的那个标签 */
     --xh-_descriptions-label-w: max-content;
 
@@ -117,9 +117,9 @@
     > [data-scope='descriptions'][data-part='item'] {
     padding-block: var(--xh-descriptions-item-py, var(--xh-_descriptions-py));
     padding-inline: var(--xh-descriptions-item-px, var(--xh-_descriptions-px));
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-descriptions-border, var(--xh-border-subtle));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-descriptions-divider, var(--xh-border-subtle));
     /* 每行一组时左边没有邻居，宽度按列数补回来 */
-    border-inline-start: 0 solid var(--xh-descriptions-border, var(--xh-border-subtle));
+    border-inline-start: 0 solid var(--xh-descriptions-divider, var(--xh-border-subtle));
   }
 
   [data-scope='descriptions'][data-part='root'][data-bordered]
@@ -202,4 +202,10 @@
     > [data-scope='descriptions'][data-part='item']:nth-child(-n + 6) {
     border-block-start-width: 0;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='descriptions'][data-part='item'][hidden] {
+    display: none;
+  }
 }

package/css/dialog.css

@@ -81,7 +81,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--xh-space-4);
+    padding: var(--xh-dialog-positioner-padding, var(--xh-space-4));
   }
 
   [data-scope='dialog'][data-part='positioner'][data-position='top'] {
@@ -211,4 +211,10 @@
     -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='dialog'][data-part='positioner'][hidden] {
+    display: none;
+  }
 }

package/css/drawer.css

@@ -124,6 +124,12 @@
     display: contents;
   }
 
+  /* 浮层被搬到 portal 落点，继承不到 root 上的槽：这把尺在被搬走的那一侧再声明一次，
+     关闭钮与条目里作者塞的图标才和皮肤画的兜底字形一样大 */
+  [data-scope='drawer'][data-part='content'] {
+    --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-text));
+  }
+
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，作者手写 hidden 时得还回去 */
   [data-scope='drawer'][data-part='root'][hidden] {
     display: none;
@@ -184,11 +190,14 @@
     background: var(--xh-drawer-backdrop-bg, var(--xh-bg-overlay));
   }
 
-  /* 挂在局部容器里：遮罩与定位层从视口坐标换成容器坐标，只罩住那个容器。
+  /* 挂在局部容器里：遮罩、定位层与面板一起从视口坐标换成容器坐标，只罩住那个容器。
      作者要给那个容器加 position（relative 之类），否则 absolute 会往上找到别的定位祖先——
-     这一条写进了示例与 props 说明 */
+     这一条写进了示例与 props 说明。
+     content 必须一起换：它的贴边是 inset-block/inline 参照包含块算的，留在 fixed 上就会
+     照旧贴视口边，遮罩缩进容器、面板却跑到屏幕边上——与 contained 的承诺正好相反 */
   [data-scope='drawer'][data-part='backdrop'][data-contained],
-  [data-scope='drawer'][data-part='positioner'][data-contained] {
+  [data-scope='drawer'][data-part='positioner'][data-contained],
+  [data-scope='drawer'][data-part='content'][data-contained] {
     position: absolute;
   }
 
@@ -214,8 +223,9 @@
   /* 贴边写在 content 自己身上，而不是交给 positioner：
      positioner 在抽屉里不是必需部件，最小合规结构只有 root + content，
      贴边若挂在 positioner 上，那种结构下面板会直接塌回文档流。
-     content 是 fixed，包住它的 positioner 没有 transform / filter，
-     不构成固定定位的包含块，两种结构下参照的都是视口，位置一致。 */
+     非 contained 时 content 是 fixed，包住它的 positioner 没有 transform / filter，
+     不构成固定定位的包含块，两种结构下参照的都是视口，位置一致；
+     contained 时上面那条把它一并换成 absolute，参照的就是作者那个容器。 */
   [data-scope='drawer'][data-part='content'] {
     /* 位移方向的私有槽位：默认按 LTR，RTL 在下面整体翻符号 */
     --xh-_drawer-shift-inline: 100%;

package/css/dynamic-input.css

@@ -210,4 +210,11 @@
     -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='dynamic-input'][data-part='item-content'][hidden],
+  [data-scope='dynamic-input'][data-part='item-action'][hidden] {
+    display: none;
+  }
 }

package/css/ellipsis.css

@@ -43,4 +43,10 @@
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='ellipsis'][data-part='root'][hidden] {
+    display: none;
+  }
 }