@xihan-ui/styles 3.1.0 → 4.0.0

package/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 @@
   }
 
   [data-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 @@
   }
 
   [data-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 @@
   [data-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;
   }
 
+  /* 取色区排在面板最前时贴着面板顶边通栏：往外撑掉顶边与两侧的内衬、不取圆角，
+     四角由面板（滚动面）自己的圆角裁出；后面的内容照常留内衬 */
+  [data-scope='color-picker'][data-part='content'] > [data-part='saturation-area']:first-child:where([data-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 色彩空间自带的两个端点，不是主题色，因此不走令牌 */
   [data-scope='color-picker'][data-part='saturation-area']::before {
     position: absolute;
@@ -328,9 +340,9 @@
   [data-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 那侧 */
   [data-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 走，不必再各写一遍 */
   [data-scope='color-picker'][data-part='hue-slider'],
   [data-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 的当前色点。
+     颜色带本身就是一排颜色，拇指整颗填当前色会融进色带里，留白盘才分得出拇指在哪；
+     当前色点读滑块自己按拇指写的那支色 */
+  [data-scope='color-picker']:is([data-part='hue-slider'], [data-part='alpha-slider']) [data-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));
+  }
+
   /* 标题与轨道之间的间隙 */
   [data-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 环） */
   [data-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;
   }
 
-  [data-scope='color-picker'][data-part='channel-input']:focus-visible {
+  [data-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));
+  }
+
+  [data-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));
+  }
+
+  [data-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-*，只映射到家族桥接槽 */
   [data-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 @@
      浮层里的色板走小号格子：与滑块的拇指、数值框一个量级，整块面板才不会被色板撑开。
      最近使用色是同一台色块选择器，挂载点同一套 */
   [data-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) {
+    [data-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));
+    }
+  }
+
+  /* 色板区与上面的取色控件之间一条通栏分隔：撑掉两侧内衬铺满面板宽，线取面板材质的描边档；
+     两块色板挨着时只在头一块上画 */
+  [data-scope='color-picker'][data-part='content']
+    > :is([data-part='swatch-picker'], [data-part='recent-swatch-picker']):where([data-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 环 */
+    [data-scope='color-picker'][data-part='channel-input']:focus {
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
+
     /* 标签前的色点画的也是颜色本身：同样退出强制着色，用系统文字色描一圈 */
     [data-scope='color-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'][data-value]::before {
       forced-color-adjust: none;

package/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，禁用不另变色 */
   [data-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));
   }
 
   [data-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 @@
   [data-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));
   }
 
   [data-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/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 归格子之间，标签在它之上补一段差值把距离收成目标值 */
   [data-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));
   }
 
   [data-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));
   }
 
   /* 一格：正方形命中区，里面铺满色块面。
@@ -186,10 +186,12 @@
   }
 
   /* 作者塞进来的图形跟着勾同一套显隐 */
+  /* 显隐写在 indicator 自己的私有槽上、图形只读槽：作者的图形没有可认的特征，
+     规则主体不能挂在 data-state 后面（翻转时会让全页同名属性的变化整棵子树重算） */
   [data-scope='color-swatch-picker'][data-part='indicator'] > * {
     position: relative;
     color: var(--xh-color-swatch-picker-indicator-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
-    opacity: 0;
+    opacity: var(--xh-_color-swatch-picker-glyph-opacity, 0);
     transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -199,8 +201,11 @@
     scale: 1;
   }
 
-  [data-scope='color-swatch-picker'][data-part='indicator'][data-state='checked']:empty::after,
-  [data-scope='color-swatch-picker'][data-part='indicator'][data-state='checked'] > * {
+  [data-scope='color-swatch-picker'][data-part='indicator'][data-state='checked'] {
+    --xh-_color-swatch-picker-glyph-opacity: 1;
+  }
+
+  [data-scope='color-swatch-picker'][data-part='indicator'][data-state='checked']:empty::after {
     opacity: 1;
   }
 
@@ -227,7 +232,7 @@
    */
   @media (forced-colors: active) {
     /* 家族在这一档把色块描边统一钉成 CanvasText，选中的那一格要在它之上换成高亮色 */
-    [data-scope='color-swatch-picker'][data-part='item'][data-state='checked'] > [data-part='swatch'] {
+    [data-scope='color-swatch-picker'][data-part='item'][data-state='checked'] > [data-part='swatch']:where([data-scope='color-swatch-picker']) {
       border-color: Highlight;
     }
 

package/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 @@
   }
 
   [data-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);
   }
 
   [data-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));
@@ -236,14 +239,19 @@
   /* 有值时清空钮顶上来，展开钮让位：两颗并排堆着用户分不清点哪个，换来换去还会让盒的宽度跳一下。
      判据是盒里此刻有一颗没收起的清空钮——没写清空钮的结构里展开钮照常留着；
      输入框仍是展开的入口（打字、方向键、openOnClick） */
-  [data-scope='combobox'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='trigger'] {
+  [data-scope='combobox'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='trigger']:where([data-scope='combobox']) {
     display: none;
   }
 
   /* 展开时箭头翻个面，指向与列表的去向一致。转的是字形或作者塞的图形，不转按钮本体：
      按钮自带悬停底色，整个按钮转会带着底色一起转；家族按压缩放的是整钮，不影响这里的转向 */
-  [data-scope='combobox'][data-part='trigger']:empty::before,
+  [data-scope='combobox'][data-part='trigger']:empty::before {
+    transition: rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 作者的箭头是任意节点：转向写在 trigger 自己的私有槽上，箭头只读槽（规则主体无特征时不挂在 data-state 后面） */
   [data-scope='combobox'][data-part='trigger'] > * {
+    rotate: var(--xh-_combobox-trigger-turn, none);
     transition: rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
   }
 
@@ -272,11 +280,14 @@
   }
 
   /* 打开中与悬停同档：展开钮不另上底，方向由箭头转向承担 */
-  [data-scope='combobox'][data-part='trigger'][data-state='open']:empty::before,
-  [data-scope='combobox'][data-part='trigger'][data-state='open'] > * {
+  [data-scope='combobox'][data-part='trigger'][data-state='open']:empty::before {
     rotate: 180deg;
   }
 
+  [data-scope='combobox'][data-part='trigger'][data-state='open'] {
+    --xh-_combobox-trigger-turn: 180deg;
+  }
+
   [data-scope='combobox'][data-part='content'] {
     /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
        这里只把使用者槽接进来 */
@@ -303,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;
     /* 浮层滚动面：滚到头不把页面一起带走 */
@@ -376,10 +387,11 @@
      语境给（选中 = 透明底 + 行尾对号，正文保持 rest 色与常规字重），公开 Combobox 槽只映射到家族合同 */
   [data-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));
@@ -388,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));

package/css/command.css

@@ -29,6 +29,7 @@
     --xh-_command-input-h: var(--xh-control-h-md);
     --xh-_command-px: var(--xh-control-px-md);
     --xh-_command-item-py: var(--xh-list-option-py-md);
+    --xh-_command-item-h: var(--xh-list-option-h-md);
     --xh-_command-gap: var(--xh-control-gap-md);
     --xh-_command-font-size: var(--xh-control-font-md);
   }
@@ -47,6 +48,7 @@
     --xh-_command-input-h: var(--xh-control-h-sm);
     --xh-_command-px: var(--xh-control-px-sm);
     --xh-_command-item-py: var(--xh-list-option-py-sm);
+    --xh-_command-item-h: var(--xh-list-option-h-sm);
     --xh-_command-gap: var(--xh-control-gap-sm);
     --xh-_command-font-size: var(--xh-control-font-sm);
   }
@@ -57,6 +59,7 @@
     --xh-_command-input-h: var(--xh-control-h-lg);
     --xh-_command-px: var(--xh-control-px-lg);
     --xh-_command-item-py: var(--xh-list-option-py-lg);
+    --xh-_command-item-h: var(--xh-list-option-h-lg);
     --xh-_command-gap: var(--xh-control-gap-lg);
     --xh-_command-font-size: var(--xh-control-font-lg);
   }
@@ -172,7 +175,7 @@
     padding-block: 0;
     padding-inline: var(--xh-command-input-px, var(--xh-_command-px));
     border: 0;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-command-input-border, var(--xh-material-elevated-separator));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-command-input-border, var(--xh-material-elevated-border));
     border-radius: 0;
     background: transparent;
     color: var(--xh-command-input-fg, var(--xh-fg-default));
@@ -209,8 +212,9 @@
     flex-direction: column;
     gap: var(--xh-command-list-gap, var(--xh-list-option-gap));
     min-block-size: 0;
-    padding-block: var(--xh-command-list-py, var(--xh-space-2));
-    padding-inline: var(--xh-command-list-px, var(--xh-space-2));
+    /* 行通栏：列表左右不留内衬，行面贴到面板两缘；上下各留 4px */
+    padding-block: var(--xh-command-list-py, var(--xh-space-1));
+    padding-inline: var(--xh-command-list-px, var(--xh-space-0));
     /* 模态面板里的滚动面：到底后不把滚动链穿透给页面 */
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -241,7 +245,7 @@
 
   /* 组间留白只加在后继分组上：首组顶上已经有列表的内边距，再加一层会显得头重 */
   [data-scope='command'][data-part='group'] + [data-scope='command'][data-part='group'] {
-    margin-block-start: var(--xh-command-group-spacing, var(--xh-space-1_5));
+    margin-block-start: var(--xh-command-group-spacing, var(--xh-space-2));
   }
 
   /* 分组标题不是命令、进不了导航，画成小号次要文字，内缩与条目对齐 */
@@ -249,9 +253,9 @@
     display: block;
     padding-block: var(--xh-command-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-command-group-label-px, var(--xh-_command-px));
-    color: var(--xh-command-group-label-fg, var(--xh-fg-muted));
+    color: var(--xh-command-group-label-fg, var(--xh-fg-subtle));
     font-size: var(--xh-command-group-label-font-size, var(--xh-text-caption-size));
-    font-weight: var(--xh-command-group-label-font-weight, var(--xh-font-weight-medium));
+    font-weight: var(--xh-command-group-label-font-weight, var(--xh-font-weight-regular));
     line-height: var(--xh-leading-none);
     user-select: none;
   }
@@ -264,10 +268,11 @@
      布局保持 flex：图标、正文、快捷键按作者顺序排成一行，不用家族网格；间距由行的 gap 给 */
   [data-scope='command'][data-part='item'] {
     --xh-collection-block-padding: var(--xh-command-item-py, var(--xh-_command-item-py));
+    --xh-collection-row-h: var(--xh-command-item-h, var(--xh-_command-item-h));
     --xh-collection-inline-padding: var(--xh-command-item-px, var(--xh-_command-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-command-item-font-size, var(--xh-_command-font-size));
-    --xh-collection-radius: var(--xh-command-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-command-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-command-item-fg, var(--xh-fg-default));
     --xh-collection-fg-hover: var(--xh-command-item-fg, var(--xh-fg-default));
     --xh-collection-fg-keyboard-highlight: var(--xh-command-item-fg, var(--xh-fg-default));
@@ -298,7 +303,7 @@
      不会拖出一条越来越慢的尾巴）。打开时已有的结果直接呈现：自己或本列表带 data-instant。
      检索过滤筛掉的条目带 hidden 不生成盒子，重新露面只是换一批已有结果，机器给它打上 data-instant 直接呈现。
      backwards 让每条在自己那份延迟里保持起始帧 */
-  [data-scope='command'][data-part='list'] [data-part='item']:not([data-instant], [data-scope='command'][data-part='list'][data-instant] *) {
+  [data-scope='command'][data-part='list'] [data-part='item']:where([data-scope='command']):not([data-instant], [data-scope='command'][data-part='list'][data-instant] :where([data-scope='command'])) {
     animation: xh-rise-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
     animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
   }
@@ -369,7 +374,7 @@
     gap: var(--xh-command-footer-gap, var(--xh-space-2));
     padding-block: var(--xh-command-footer-py, var(--xh-space-2));
     padding-inline: var(--xh-command-footer-px, var(--xh-_command-px));
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-command-footer-border, var(--xh-material-elevated-separator));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-command-footer-border, var(--xh-material-elevated-border));
     color: var(--xh-command-footer-fg, var(--xh-fg-muted));
     font-size: var(--xh-command-footer-font-size, var(--xh-text-caption-size));
   }

package/css/context-menu.css

@@ -73,6 +73,7 @@
     /* 尺寸档只换这四个私有槽，条目与分组标题都从这两处继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_context-menu-item-py: var(--xh-list-option-py-md);
+    --xh-_context-menu-item-h: var(--xh-list-option-h-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-control-font-md);
@@ -104,7 +105,7 @@
     /* 两道上限取更小的那道：自己的高度上限，以及落定那一侧真正剩下的空间。 */
     max-block-size: min(var(--xh-context-menu-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_context-menu-available-h));
     padding-block: var(--xh-context-menu-content-py, var(--xh-surface-pad-xs));
-    padding-inline: var(--xh-context-menu-content-px, var(--xh-surface-pad-xs));
+    padding-inline: var(--xh-context-menu-content-px, 0);
     border-radius: var(--xh-context-menu-content-radius, var(--xh-shape-overlay));
     /* 条目超过上限就在菜单内部滚；内收焦点环不会被内边距缘裁掉。
        浮层滚动面：到底后不把滚动链穿透给页面 */
@@ -123,6 +124,7 @@
   [data-scope='context-menu']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
     --xh-icon-size: var(--xh-context-menu-icon-size, var(--xh-glyph-size-sm));
     --xh-_context-menu-item-py: var(--xh-list-option-py-sm);
+    --xh-_context-menu-item-h: var(--xh-list-option-h-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);
@@ -131,6 +133,7 @@
   [data-scope='context-menu']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
     --xh-icon-size: var(--xh-context-menu-icon-size, var(--xh-glyph-size-lg));
     --xh-_context-menu-item-py: var(--xh-list-option-py-lg);
+    --xh-_context-menu-item-h: var(--xh-list-option-h-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);
@@ -192,15 +195,16 @@
     display: none;
   }
 
-  /* 分组标题不是条目、进不了导航，画成小号次要文字，
+  /* 分组标题不是条目、进不了导航，画成小号常规字重的次要文字，上方让出 8px 与上一组分开；
      内缩与条目对齐（同一个 padding-inline），标题与条目文字才在一条竖线上 */
   [data-scope='context-menu'][data-part='group-label'] {
     display: block;
+    margin-block-start: var(--xh-context-menu-group-label-mt, var(--xh-space-2));
     padding-block: var(--xh-context-menu-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-context-menu-group-label-px, var(--xh-_context-menu-item-px));
     color: var(--xh-context-menu-group-label-fg, var(--xh-material-frosted-fg-muted));
     font-size: var(--xh-context-menu-group-label-font-size, var(--xh-text-caption-size));
-    font-weight: var(--xh-context-menu-group-label-font-weight, var(--xh-font-weight-medium));
+    font-weight: var(--xh-context-menu-group-label-font-weight, var(--xh-font-weight-regular));
     line-height: var(--xh-leading-none);
     user-select: none;
   }
@@ -215,10 +219,11 @@
      子菜单箭头是行尾的伪元素；间距统一由行的 gap 给，家族按槽下发的外边距归零 */
   [data-scope='context-menu'][data-part='item'] {
     --xh-collection-block-padding: var(--xh-context-menu-item-py, var(--xh-_context-menu-item-py));
+    --xh-collection-row-h: var(--xh-context-menu-item-h, var(--xh-_context-menu-item-h));
     --xh-collection-inline-padding: var(--xh-context-menu-item-px, var(--xh-_context-menu-item-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-context-menu-item-font-size, var(--xh-_context-menu-font-size));
-    --xh-collection-radius: var(--xh-context-menu-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-context-menu-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-context-menu-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-context-menu-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-context-menu-item-fg, var(--xh-material-frosted-fg));
@@ -261,7 +266,7 @@
     margin-inline-start: auto;
     inline-size: var(--xh-context-menu-submenu-indicator-size, var(--xh-control-indicator-size));
     block-size: var(--xh-context-menu-submenu-indicator-size, var(--xh-control-indicator-size));
-    background-color: var(--xh-context-menu-submenu-indicator-fg, var(--xh-material-frosted-fg-muted));
+    background-color: var(--xh-context-menu-submenu-indicator-fg, currentColor);
     -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
     mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
   }