@xihan-ui/styles 3.2.0 → 4.0.0

package/dist/css/clipboard.css

@@ -72,8 +72,11 @@
     display: none;
   }
 
+  /* 带输入框的用法是一件单行字段，标签与其余字段同一副字段标签排版：次要文字色、标签字号字重。
+     竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-clipboard-label-gap 给多少最终就是多少 */
   .xh-scope-clipboard[data-part='label'] {
-    color: var(--xh-clipboard-label-fg, var(--xh-fg-default));
+    margin-block-end: calc(var(--xh-clipboard-label-gap, var(--xh-space-2)) - var(--xh-clipboard-gap, var(--xh-space-1)));
+    color: var(--xh-clipboard-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-clipboard-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-clipboard-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
@@ -121,9 +124,14 @@
     border-end-end-radius: 0;
   }
 
-  /* 焦点边一律 --xh-border-control-focus，不随 tone */
-  .xh-scope-clipboard[data-part='input']:focus-visible {
+  /* 照只读字段外壳标出焦点：换承载面底 + 品牌描边（不随 tone），不画环；点进去选字也算聚焦 */
+  .xh-scope-clipboard[data-part='input']:focus-within {
     border-color: var(--xh-clipboard-input-border-focus, var(--xh-border-control-focus));
+    background: var(--xh-clipboard-input-bg-focus, var(--xh-bg-surface));
+  }
+
+  .xh-scope-clipboard[data-part='input']:focus-visible {
+    outline: none;
   }
 
   /* 自动填充：引擎给填过的框强加一套系统色（多数是黄底黑字），盖得过 background 与 color，
@@ -203,7 +211,7 @@
     );
   }
 
-  .xh-scope-clipboard[data-part='control'] > .xh-scope-clipboard[data-part='input']:focus-visible,
+  .xh-scope-clipboard[data-part='control'] > .xh-scope-clipboard[data-part='input']:focus-within,
   .xh-scope-clipboard[data-part='control'] > .xh-scope-clipboard[data-part='copy-trigger']:focus-visible,
   .xh-scope-clipboard[data-part='control'] > .xh-scope-clipboard[data-part='copy-trigger']:hover {
     position: relative;
@@ -312,4 +320,12 @@
     clip-path: inset(50%);
     white-space: nowrap;
   }
+
+  /* 只读框聚焦不画环、描边又被换成系统色，补一圈 Highlight 环 */
+  @media (forced-colors: active) {
+    .xh-scope-clipboard[data-part='input']:focus {
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
+  }
 }

package/dist/css/collapsible.css

@@ -22,9 +22,14 @@
     /* 作者塞进正文里的图标与皮肤画的兜底字形同一把尺：md 档，触发器上另按家族档取值 */
     --xh-icon-size: var(--xh-collapsible-icon-size, var(--xh-glyph-size-md));
 
+    /* 触发器比家族 disclosure-trigger 档收一截：md 上下 10px + 一行正文行高 21px = 41px 高，横向 12px；
+       正文与触发器同一条起点，上下各留 8px */
     --xh-_collapsible-trigger-gap: var(--xh-control-gap-md);
-    --xh-_collapsible-content-px: var(--xh-space-4);
-    --xh-_collapsible-content-pb: var(--xh-space-4);
+    --xh-_collapsible-trigger-py: var(--xh-space-2_5);
+    --xh-_collapsible-trigger-px: var(--xh-space-3);
+    --xh-_collapsible-content-px: var(--xh-space-3);
+    --xh-_collapsible-content-pt: var(--xh-space-2);
+    --xh-_collapsible-content-pb: var(--xh-space-2);
 
     /* 语气落在展开着的触发器上，指示器写在触发器里、跟着继承这个色，不另立规则。
        没写 data-tone 时 --xh-_tone-fg 没被声明，退回原来的前景色。
@@ -48,14 +53,20 @@
   /* 缺省档写在上面那条里 */
   .xh-scope-collapsible[data-part='root'][data-size='sm'] {
     --xh-_collapsible-trigger-gap: var(--xh-control-gap-sm);
-    --xh-_collapsible-content-px: var(--xh-space-3);
-    --xh-_collapsible-content-pb: var(--xh-space-3);
+    --xh-_collapsible-trigger-py: var(--xh-space-1_5);
+    --xh-_collapsible-trigger-px: var(--xh-space-2_5);
+    --xh-_collapsible-content-px: var(--xh-space-2_5);
+    --xh-_collapsible-content-pt: var(--xh-space-1_5);
+    --xh-_collapsible-content-pb: var(--xh-space-1_5);
   }
 
   .xh-scope-collapsible[data-part='root'][data-size='lg'] {
     --xh-_collapsible-trigger-gap: var(--xh-control-gap-lg);
-    --xh-_collapsible-content-px: var(--xh-space-5);
-    --xh-_collapsible-content-pb: var(--xh-space-5);
+    --xh-_collapsible-trigger-py: var(--xh-space-3);
+    --xh-_collapsible-trigger-px: var(--xh-space-4);
+    --xh-_collapsible-content-px: var(--xh-space-4);
+    --xh-_collapsible-content-pt: var(--xh-space-3);
+    --xh-_collapsible-content-pb: var(--xh-space-3);
   }
 
   /* 触发器铺满一行，盒型、三档几何、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给
@@ -65,8 +76,8 @@
   .xh-scope-collapsible[data-part='trigger'] {
     --xh-action-gap: var(--xh-collapsible-trigger-gap, var(--xh-_action-profile-gap));
     --xh-action-visual-size: var(--xh-collapsible-trigger-h, var(--xh-_action-profile-visual-size));
-    --xh-action-padding-block: var(--xh-collapsible-trigger-py, var(--xh-_action-profile-padding-block));
-    --xh-action-padding-inline: var(--xh-collapsible-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-padding-block: var(--xh-collapsible-trigger-py, var(--xh-_collapsible-trigger-py));
+    --xh-action-padding-inline: var(--xh-collapsible-trigger-px, var(--xh-_collapsible-trigger-px));
     --xh-action-radius: var(--xh-collapsible-trigger-radius, var(--xh-_action-profile-radius));
     --xh-action-bg-rest: var(--xh-collapsible-trigger-bg, var(--xh-_action-variant-bg-rest));
     --xh-action-bg-hover: var(--xh-collapsible-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
@@ -74,10 +85,11 @@
     --xh-action-fg-hover: var(--xh-collapsible-trigger-fg, var(--xh-_action-variant-fg-hover));
     --xh-action-fg-pressed: var(--xh-collapsible-trigger-fg, var(--xh-_action-variant-fg-pressed));
     --xh-action-font-size: var(--xh-collapsible-trigger-font-size, var(--xh-_action-profile-font-size));
-    --xh-icon-size: var(--xh-collapsible-icon-size, var(--xh-_action-profile-glyph-size));
+    --xh-icon-size: var(--xh-collapsible-icon-size, var(--xh-glyph-size-sm));
 
     border-width: 0;
     font-weight: var(--xh-collapsible-trigger-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-normal);
   }
 
   /* 展开着的那一档单开一个槽：与常态共用一个的话，作者一改常态字色就把展开态也改掉了。
@@ -86,6 +98,8 @@
     --xh-action-fg-rest: var(--xh-collapsible-trigger-fg-open, var(--xh-_collapsible-open-fg));
     --xh-action-fg-hover: var(--xh-collapsible-trigger-fg-open, var(--xh-_collapsible-open-fg));
     --xh-action-fg-pressed: var(--xh-collapsible-trigger-fg-open, var(--xh-_collapsible-open-fg));
+
+    font-weight: var(--xh-collapsible-trigger-font-weight-open, var(--xh-font-weight-medium));
   }
 
   /* 禁用前景换成禁用色，不靠 opacity 压暗（家族按 data-disabled 给禁用面与指针，字色槽在这里保留优先） */
@@ -99,7 +113,7 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    color: var(--xh-collapsible-indicator-fg, var(--xh-fg-muted));
+    color: var(--xh-collapsible-indicator-fg, var(--xh-fg-subtle));
     line-height: var(--xh-leading-none);
   }
 
@@ -132,17 +146,18 @@
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }：补了动画一帧都播不出来。
      收起由适配器在退场结束后写内联 display 落成，退场窗口内靠 connect 发的 inert 挡住焦点 */
   .xh-scope-collapsible[data-part='content'] {
-    /* 行高与内缩同帧动的共享关键帧读这条槽：只有末端有内缩，起端不写、按 0 动 */
+    /* 行高与内缩同帧动的共享关键帧读这两条槽，两端内缩一起收放 */
+    --xh-_disclosure-pt: var(--xh-collapsible-content-pt, var(--xh-_collapsible-content-pt));
     --xh-_disclosure-pb: var(--xh-collapsible-content-pb, var(--xh-_collapsible-content-pb));
 
     display: grid;
     grid-template-rows: 1fr;
     overflow: clip;
-    padding-block-start: 0;
+    padding-block-start: var(--xh-collapsible-content-pt, var(--xh-_collapsible-content-pt));
     padding-block-end: var(--xh-collapsible-content-pb, var(--xh-_collapsible-content-pb));
     padding-inline: var(--xh-collapsible-content-px, var(--xh-_collapsible-content-px));
-    color: var(--xh-collapsible-content-fg, var(--xh-fg-muted));
-    font-size: var(--xh-collapsible-content-font-size, var(--xh-text-secondary-size));
+    color: var(--xh-collapsible-content-fg, var(--xh-fg-default));
+    font-size: var(--xh-collapsible-content-font-size, var(--xh-text-body-size));
     line-height: var(--xh-leading-normal);
   }
 

package/dist/css/color-field.css

@@ -57,13 +57,15 @@
   }
 
   .xh-scope-color-field[data-part='label'] {
-    color: var(--xh-color-field-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-color-field-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-color-field-label-gap, var(--xh-space-2)) - var(--xh-color-field-gap, var(--xh-space-1)));
+    color: var(--xh-color-field-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-color-field-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-color-field-label-font-weight, var(--xh-text-label-weight));
   }
 
   .xh-scope-color-field[data-part='label'][data-disabled] {
-    color: var(--xh-color-field-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-color-field-label-fg-disabled, var(--xh-fg-muted));
   }
 
   .xh-scope-color-field[data-part='control'] {
@@ -81,8 +83,6 @@
     --xh-field-border-hover: var(--xh-color-field-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-color-field-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-color-field-control-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-color-field-control-shadow, none);
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
     --xh-field-glyph-size: var(--xh-color-field-icon-size, var(--xh-_field-size-glyph-size));

package/dist/css/color-picker.css

@@ -30,8 +30,6 @@
     --xh-_color-picker-px: var(--xh-control-px-md);
     --xh-_color-picker-gap: var(--xh-control-gap-md);
 
-    /* 聚焦环恒用固定环色 */
-    --xh-_color-picker-ring: var(--xh-ring-focus);
 
     display: inline-flex;
     flex-direction: column;
@@ -60,7 +58,9 @@
   }
 
   .xh-scope-color-picker[data-part='label'] {
-    color: var(--xh-color-picker-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-color-picker-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-color-picker-label-gap, var(--xh-space-2)) - var(--xh-color-picker-gap, var(--xh-space-1)));
+    color: var(--xh-color-picker-label-fg, var(--xh-fg-muted));
     /* 字段标签不随档：与同族字段同一档标签字号 */
     font-size: var(--xh-color-picker-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-color-picker-label-font-weight, var(--xh-text-label-weight));
@@ -83,7 +83,6 @@
     --xh-field-border-rest: var(--xh-color-picker-control-border, var(--xh-_field-variant-border-rest));
     --xh-field-border-hover: var(--xh-color-picker-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-color-picker-control-border-focus, var(--xh-_field-variant-border-focus));
-    --xh-field-ring-focus: var(--xh-_color-picker-ring);
     --xh-field-shadow-rest: var(--xh-color-picker-control-shadow, none);
     --xh-field-cursor-rest: pointer;
   }
@@ -224,16 +223,20 @@
   }
 
   .xh-scope-color-picker[data-part='content'] {
+    /* 内衬落进私有槽：贴顶通栏的取色区与色板区的通栏分隔按同一份内衬往外撑 */
+    --xh-_color-picker-content-py: var(--xh-color-picker-content-py, var(--xh-space-3));
+    --xh-_color-picker-content-px: var(--xh-color-picker-content-px, var(--xh-space-3));
+
     position: relative;
     display: flex;
     flex-direction: column;
     gap: var(--xh-color-picker-content-gap, var(--xh-space-3));
-    inline-size: var(--xh-color-picker-content-w, var(--xh-overlay-min-w));
+    inline-size: var(--xh-color-picker-content-w, var(--xh-overlay-max-w-sm));
     /* 定宽的面板也要夹一道：窄视口下伸出去，右半边的取色区就点不到了 */
     max-inline-size: var(--xh-_color-picker-available-w);
-    padding-block: var(--xh-color-picker-content-py, var(--xh-space-3));
-    padding-inline: var(--xh-color-picker-content-px, var(--xh-space-3));
-    max-block-size: min(var(--xh-color-picker-max-h, var(--xh-viewport-h-md)), var(--xh-_color-picker-available-h));
+    padding-block: var(--xh-_color-picker-content-py);
+    padding-inline: var(--xh-_color-picker-content-px);
+    max-block-size: min(var(--xh-color-picker-max-h, var(--xh-viewport-h-lg)), var(--xh-_color-picker-available-h));
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
@@ -287,11 +290,20 @@
   .xh-scope-color-picker[data-part='saturation-area'] {
     position: relative;
     display: block;
-    block-size: var(--xh-color-picker-saturation-area-h, 9rem);
+    flex: none;
+    block-size: var(--xh-color-picker-saturation-area-h, var(--xh-overlay-color-area-h));
     border-radius: var(--xh-color-picker-saturation-area-radius, var(--xh-shape-control));
     cursor: crosshair;
   }
 
+  /* 取色区排在面板最前时贴着面板顶边通栏：往外撑掉顶边与两侧的内衬、不取圆角，
+     四角由面板（滚动面）自己的圆角裁出；后面的内容照常留内衬 */
+  .xh-scope-color-picker[data-part='content'] > [data-part='saturation-area']:first-child:where(.xh-scope-color-picker) {
+    margin-block-start: calc(-1 * var(--xh-_color-picker-content-py));
+    margin-inline: calc(-1 * var(--xh-_color-picker-content-px));
+    border-radius: var(--xh-color-picker-saturation-area-radius, 0);
+  }
+
   /* white / black 是 HSV 色彩空间自带的两个端点，不是主题色，因此不走令牌 */
   .xh-scope-color-picker[data-part='saturation-area']::before {
     position: absolute;
@@ -328,9 +340,9 @@
   .xh-scope-color-picker[data-part='area-thumb'] {
     position: absolute;
     box-sizing: border-box;
-    inline-size: var(--xh-color-picker-thumb-size, 14px);
-    block-size: var(--xh-color-picker-thumb-size, 14px);
-    margin-inline-start: calc(var(--xh-color-picker-thumb-size, 14px) / -2);
+    inline-size: var(--xh-color-picker-thumb-size, var(--xh-control-indicator-md));
+    block-size: var(--xh-color-picker-thumb-size, var(--xh-control-indicator-md));
+    margin-inline-start: calc(var(--xh-color-picker-thumb-size, var(--xh-control-indicator-md)) / -2);
     border: var(--xh-stroke-thick) solid var(--xh-color-picker-thumb-border, var(--xh-color-neutral-0));
     border-radius: var(--xh-color-picker-thumb-radius, var(--xh-shape-circle));
     background: transparent;
@@ -341,7 +353,7 @@
 
   /* 取色区的纵轴也由连接层给（inset-block-start），回拉同样按 block-start 那侧 */
   .xh-scope-color-picker[data-part='area-thumb'] {
-    margin-block-start: calc(var(--xh-color-picker-thumb-size, 14px) / -2);
+    margin-block-start: calc(var(--xh-color-picker-thumb-size, var(--xh-control-indicator-md)) / -2);
   }
 
   /* 只有手真正拖着时带 data-dragging：放大与光标不会几处一起变。
@@ -361,13 +373,23 @@
      滑块内部的皮仍归 color-slider 那一份。尺寸档跟着浮层上的 data-size 走，不必再各写一遍 */
   .xh-scope-color-picker[data-part='hue-slider'],
   .xh-scope-color-picker[data-part='alpha-slider'] {
-    --xh-_thumb-size: var(--xh-color-picker-slider-thumb-size, var(--xh-track-thumb-size));
+    --xh-_thumb-size: var(--xh-color-picker-slider-thumb-size, var(--xh-control-indicator-md));
     --xh-_track-thickness: var(--xh-color-picker-slider-track-thickness, var(--xh-space-3));
 
     display: flex;
     flex-direction: column;
   }
 
+  /* 面板里两条滑块的拇指：一枚承载面色的白盘 + 1px 描边，正中一颗 8px 的当前色点。
+     颜色带本身就是一排颜色，拇指整颗填当前色会融进色带里，留白盘才分得出拇指在哪；
+     当前色点读滑块自己按拇指写的那支色 */
+  .xh-scope-color-picker:is([data-part='hue-slider'], [data-part='alpha-slider']) .xh-scope-color-slider[data-part='thumb'] {
+    border-width: var(--xh-stroke-thin);
+    background:
+      radial-gradient(circle, var(--xh-_color-slider-thumb-color) 0 var(--xh-space-1), transparent var(--xh-space-1)),
+      var(--xh-color-picker-slider-thumb-bg, var(--xh-bg-surface-raised));
+  }
+
   /* 标题与轨道之间的间隙 */
   .xh-scope-color-picker[data-part='hue-slider'] {
     gap: var(--xh-color-picker-hue-slider-gap, var(--xh-stack-gap-md));
@@ -383,26 +405,35 @@
     opacity: var(--xh-state-disabled-opacity);
   }
 
+  /* 通道输入照字段外壳：字段淡底 + 控件描边、24px 小号盒、说明档字号；悬停描边升一档，
+     聚焦换承载面底 + 品牌描边、不画环（焦点由描边换色与底色差标出，强制色档补一圈 Highlight 环） */
   .xh-scope-color-picker[data-part='channel-input'] {
     inline-size: 100%;
     min-inline-size: 0;
-    block-size: var(--xh-color-picker-input-h, var(--xh-control-h-sm));
+    block-size: var(--xh-color-picker-input-h, var(--xh-control-action-size));
     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-control));
     border-radius: var(--xh-color-picker-input-radius, var(--xh-shape-control));
-    background: var(--xh-color-picker-input-bg, transparent);
+    background: var(--xh-color-picker-input-bg, var(--xh-bg-field));
     color: inherit;
     /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族，与周围文本对不上 */
     font-family: inherit;
-    font-size: var(--xh-color-picker-input-font-size, var(--xh-text-secondary-size));
+    font-size: var(--xh-color-picker-input-font-size, var(--xh-text-caption-size));
     text-align: center;
   }
 
-  .xh-scope-color-picker[data-part='channel-input']:focus-visible {
+  .xh-scope-color-picker[data-part='channel-input']:hover:not(:disabled, :focus, [data-readonly], [data-invalid]) {
+    border-color: var(--xh-color-picker-input-border-hover, var(--xh-border-strong));
+  }
+
+  .xh-scope-color-picker[data-part='channel-input']:focus {
     /* 焦点边一律 --xh-border-control-focus，不随语气 */
     border-color: var(--xh-color-picker-input-border-focus, var(--xh-border-control-focus));
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+    background: var(--xh-color-picker-input-bg-focus, var(--xh-bg-surface));
+  }
+
+  .xh-scope-color-picker[data-part='channel-input']:focus-visible {
+    outline: none;
   }
 
   /* 打到一半的串：框里留着草稿，但值没动——描边提示"这串还没被收下" */
@@ -478,7 +509,7 @@
   /* 「添加」是面板里唯一的主要动作：品牌实心、悬停 / 按下与 0.97 按压、焦点环全由 Action Control 的
      text solid 档给；槽名统一按部件取 --xh-color-picker-confirm-trigger-*，只映射到家族桥接槽 */
   .xh-scope-color-picker[data-part='confirm-trigger'] {
-    --xh-action-visual-size: var(--xh-color-picker-confirm-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-visual-size: var(--xh-color-picker-confirm-trigger-h, var(--xh-control-action-size));
     --xh-action-padding-inline: var(--xh-color-picker-confirm-trigger-px, var(--xh-_action-profile-padding-inline));
     --xh-action-radius: var(--xh-color-picker-confirm-trigger-radius, var(--xh-shape-control));
     --xh-action-bg-rest: var(--xh-color-picker-confirm-trigger-bg, var(--xh-_action-variant-bg-rest));
@@ -508,8 +539,8 @@
      浮层里的色板走小号格子：与滑块的拇指、数值框一个量级，整块面板才不会被色板撑开。
      最近使用色是同一台色块选择器，挂载点同一套 */
   .xh-scope-color-picker:is([data-part='swatch-picker'], [data-part='recent-swatch-picker']) {
-    --xh-_color-swatch-picker-cell: var(--xh-color-picker-swatch-cell, var(--xh-control-h-sm));
-    --xh-_color-swatch-picker-gap: var(--xh-color-picker-swatch-gap, var(--xh-control-gap-sm));
+    --xh-_color-swatch-picker-cell: var(--xh-color-picker-swatch-cell, var(--xh-glyph-size-sm));
+    --xh-_color-swatch-picker-gap: var(--xh-color-picker-swatch-gap, var(--xh-space-2));
     --xh-_color-swatch-picker-indicator: var(--xh-control-indicator-sm);
     --xh-_color-swatch-picker-mark: calc(var(--xh-_color-swatch-picker-indicator) - var(--xh-space-1));
     --xh-_color-swatch-picker-accent: var(--xh-_tone, var(--xh-bg-brand));
@@ -525,6 +556,23 @@
     cursor: not-allowed;
   }
 
+  /* 粗指针：16px 的格子手指压不准，格子回到小号控件高 */
+  @media (pointer: coarse) {
+    .xh-scope-color-picker:is([data-part='swatch-picker'], [data-part='recent-swatch-picker']) {
+      --xh-_color-swatch-picker-cell: var(--xh-color-picker-swatch-cell, var(--xh-control-h-sm));
+    }
+  }
+
+  /* 色板区与上面的取色控件之间一条通栏分隔：撑掉两侧内衬铺满面板宽，线取面板材质的描边档；
+     两块色板挨着时只在头一块上画 */
+  .xh-scope-color-picker[data-part='content']
+    > :is([data-part='swatch-picker'], [data-part='recent-swatch-picker']):where(.xh-scope-color-picker):not(:is([data-part='swatch-picker'], [data-part='recent-swatch-picker']) + *) {
+    margin-inline: calc(-1 * var(--xh-_color-picker-content-px));
+    padding-block-start: var(--xh-_color-picker-content-py);
+    padding-inline: var(--xh-_color-picker-content-px);
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-color-picker-separator, var(--xh-material-solid-border));
+  }
+
   /* 任何 display 都会盖掉 UA 的 [hidden]{display:none}：
      凡是被赋了 display 的角色节点都要显式让位，漏一处收起态就失效。
      content 的收起交给 presence：退场结束后由适配器写内联 display:none，避免截断动画。 */
@@ -586,6 +634,12 @@
       outline-offset: calc(-1 * var(--xh-stroke-thin));
     }
 
+    /* 通道输入聚焦不画环，靠描边换色；这一档描边被换成系统色，补一圈 Highlight 环 */
+    .xh-scope-color-picker[data-part='channel-input']:focus {
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
+
     /* 标签前的色点画的也是颜色本身：同样退出强制着色，用系统文字色描一圈 */
     .xh-scope-color-picker[data-part='tag-list'] > .xh-scope-tag[data-part='root'][data-value]::before {
       forced-color-adjust: none;

package/dist/css/color-slider.css

@@ -36,15 +36,17 @@
   /* 禁用不整体压暗：标签是文字，换到禁用前景；颜色带与拇指画的是颜色本身，换不得色，
      压暗只做一次、落在 control 上（track / thumb 各自再叠一层 opacity 会越叠越黑），拇指另收掉抬升 */
 
-  /* 字段标签：14 / 500 / fg-default，禁用换到 --xh-fg-subtle */
+  /* 字段标签：14 / 400 / fg-muted，与控件隔 space-2，禁用不另变色 */
   .xh-scope-color-slider[data-part='label'] {
-    color: var(--xh-color-slider-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-color-slider-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-color-slider-label-gap, var(--xh-space-2)) - var(--xh-color-slider-gap, var(--xh-space-1)));
+    color: var(--xh-color-slider-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-color-slider-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-color-slider-label-font-weight, var(--xh-text-label-weight));
   }
 
   .xh-scope-color-slider[data-part='label'][data-disabled] {
-    color: var(--xh-color-slider-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-color-slider-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 拇指以它为定位上下文（拇指常常浮出轨道，挂在 track 上会被轨道的盒子束住）。
@@ -84,7 +86,7 @@
   .xh-scope-color-slider[data-part='track'] {
     position: relative;
     border-radius: var(--xh-color-slider-track-radius, var(--xh-shape-pill));
-    box-shadow: inset 0 0 0 var(--xh-stroke-thin) var(--xh-color-slider-track-border, var(--xh-border-subtle));
+    box-shadow: inset 0 0 0 var(--xh-stroke-thin) var(--xh-color-slider-track-border, var(--xh-border-default));
   }
 
   .xh-scope-color-slider[data-part='track'][data-orientation='horizontal'] {
@@ -108,10 +110,10 @@
     border-radius: inherit;
     background-color: var(--xh-color-slider-checker-base, var(--xh-bg-surface));
     background-image:
-      linear-gradient(45deg, var(--xh-color-slider-checker, var(--xh-color-neutral-300)) 25%, transparent 25%),
-      linear-gradient(-45deg, var(--xh-color-slider-checker, var(--xh-color-neutral-300)) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--xh-color-slider-checker, var(--xh-color-neutral-300)) 75%),
-      linear-gradient(-45deg, transparent 75%, var(--xh-color-slider-checker, var(--xh-color-neutral-300)) 75%);
+      linear-gradient(45deg, var(--xh-color-slider-checker, var(--xh-bg-subtle)) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--xh-color-slider-checker, var(--xh-bg-subtle)) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--xh-color-slider-checker, var(--xh-bg-subtle)) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--xh-color-slider-checker, var(--xh-bg-subtle)) 75%);
     background-position: 0 0, 0 4px, 4px -4px, -4px 0;
     background-size: 8px 8px;
   }

package/dist/css/color-swatch-picker.css

@@ -51,21 +51,21 @@
     --xh-_color-swatch-picker-indicator: var(--xh-control-indicator-lg);
   }
 
-  /* 标题独占一行，格子从下一行起排。复合单字段的标签：14 / 500 / fg-default，不随档；
-     与格子的距离贴控件 space-1——容器的 gap 归格子之间，标签在它之上补一段差值把距离收成目标值 */
+  /* 标题独占一行，格子从下一行起排。复合单字段的标签：14 / 400 / fg-muted，不随档；
+     与格子隔 space-2——容器的 gap 归格子之间，标签在它之上补一段差值把距离收成目标值 */
   .xh-scope-color-swatch-picker[data-part='label'] {
     flex-basis: 100%;
     margin-block-end: calc(
-      var(--xh-color-swatch-picker-label-gap, var(--xh-space-1))
+      var(--xh-color-swatch-picker-label-gap, var(--xh-space-2))
       - var(--xh-color-swatch-picker-gap, var(--xh-_color-swatch-picker-gap))
     );
-    color: var(--xh-color-swatch-picker-label-fg, var(--xh-fg-default));
+    color: var(--xh-color-swatch-picker-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-color-swatch-picker-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-color-swatch-picker-label-font-weight, var(--xh-text-label-weight));
   }
 
   .xh-scope-color-swatch-picker[data-part='label'][data-disabled] {
-    color: var(--xh-color-swatch-picker-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-color-swatch-picker-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 一格：正方形命中区，里面铺满色块面。

package/dist/css/combobox.css

@@ -82,6 +82,7 @@
     --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-h: var(--xh-list-option-h-md);
     --xh-_combobox-item-px: var(--xh-control-px-md);
     --xh-_combobox-gap: var(--xh-control-gap-md);
     --xh-_combobox-font-size: var(--xh-control-font-md);
@@ -118,6 +119,7 @@
     --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-h: var(--xh-list-option-h-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);
@@ -129,6 +131,7 @@
     --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-h: var(--xh-list-option-h-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);
@@ -137,14 +140,16 @@
   }
 
   .xh-scope-combobox[data-part='label'] {
-    color: var(--xh-combobox-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-combobox-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-combobox-label-gap, var(--xh-space-2)) - var(--xh-combobox-gap, var(--xh-space-1)));
+    color: var(--xh-combobox-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-combobox-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-combobox-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
   }
 
   .xh-scope-combobox[data-part='label'][data-disabled] {
-    color: var(--xh-combobox-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-combobox-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 画成一个框的是 control 而不是 input：输入框、展开按钮、清空按钮三者要看起来是一体的，
@@ -166,8 +171,6 @@
     --xh-field-border-hover: var(--xh-combobox-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-combobox-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-combobox-control-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-combobox-control-shadow, none);
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
     --xh-field-glyph-size: var(--xh-combobox-icon-size, var(--xh-_field-size-glyph-size));
@@ -311,7 +314,7 @@
     min-block-size: var(--xh-combobox-content-min-h, var(--xh-_combobox-h));
     max-block-size: min(var(--xh-combobox-content-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_combobox-available-h));
     padding-block: var(--xh-combobox-content-py, var(--xh-space-1));
-    padding-inline: var(--xh-combobox-content-px, var(--xh-space-1));
+    padding-inline: var(--xh-combobox-content-px, 0);
     border-radius: var(--xh-combobox-content-radius, var(--xh-shape-overlay));
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
@@ -384,10 +387,11 @@
      语境给（选中 = 透明底 + 行尾对号，正文保持 rest 色与常规字重），公开 Combobox 槽只映射到家族合同 */
   .xh-scope-combobox[data-part='item'] {
     --xh-collection-block-padding: var(--xh-combobox-item-py, var(--xh-_combobox-item-py));
+    --xh-collection-row-h: var(--xh-combobox-item-h, var(--xh-_combobox-item-h));
     --xh-collection-inline-padding: var(--xh-combobox-item-px, var(--xh-_combobox-item-px));
     --xh-collection-gap: var(--xh-combobox-item-gap, var(--xh-_combobox-gap));
     --xh-collection-font-size: var(--xh-combobox-item-font-size, var(--xh-_combobox-font-size));
-    --xh-collection-radius: var(--xh-combobox-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-combobox-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-combobox-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-combobox-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-combobox-item-fg, var(--xh-material-frosted-fg));
@@ -396,10 +400,10 @@
     --xh-collection-fg-selected-hover: var(--xh-combobox-item-fg-selected, var(--xh-combobox-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-pressed: var(--xh-combobox-item-fg-selected, var(--xh-combobox-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-pressed: var(--xh-combobox-item-fg, var(--xh-material-frosted-fg));
-    --xh-collection-font-weight-selected: var(--xh-combobox-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-combobox-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-combobox-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-combobox-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-combobox-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-combobox-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-combobox-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-combobox-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-combobox-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-combobox-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-selected-highlight: var(--xh-combobox-item-bg-hover, var(--xh-bg-subtle));