@xihan-ui/styles 2.1.0 → 3.0.0

package/css/color-slider.css

@@ -132,13 +132,14 @@
     box-sizing: border-box;
     inline-size: var(--xh-_thumb-size);
     block-size: var(--xh-_thumb-size);
-    border: var(--xh-stroke-thick) solid var(--xh-color-slider-thumb-border, var(--xh-border-default));
+    /* 描边取装饰边的不透明档：墨色描边半透明，压在当前色上框不住圆点 */
+    border: var(--xh-stroke-thick) solid var(--xh-color-slider-thumb-border, var(--xh-border-default-opaque));
     border-radius: var(--xh-color-slider-thumb-radius, var(--xh-shape-circle));
     background: var(--xh-color-slider-thumb-bg, var(--xh-_color-slider-thumb-color));
     box-shadow: var(--xh-color-slider-thumb-shadow, var(--xh-elevation-raised));
     cursor: grab;
     transition:
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong),
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -159,7 +160,10 @@
 
   /* 放大用 scale 而不是改尺寸：变换绕自身中心发生，圆心不动。海拔从 raised 换到 lifted */
   [data-scope='color-slider'][data-part='thumb'][data-dragging] {
-    scale: var(--xh-color-slider-thumb-scale-dragging, var(--xh-motion-scale-drag));
+    /* 放大比例落进私有槽：挂在拇指里的值气泡读同一支反向缩回原尺寸 */
+    --xh-_color-slider-thumb-scale: var(--xh-color-slider-thumb-scale-dragging, var(--xh-motion-scale-drag));
+
+    scale: var(--xh-_color-slider-thumb-scale);
     cursor: grabbing;
     box-shadow: var(--xh-color-slider-thumb-shadow-dragging, var(--xh-elevation-lifted));
   }
@@ -179,14 +183,19 @@
     cursor: not-allowed;
   }
 
-  /* 值气泡：挂在拇指里，跟着拇指一起走位。默认只在推动那一刻露面 */
+  /* 值气泡：挂在拇指里，跟着拇指一起走位。默认只在推动那一刻露面。
+     气泡宽度由文字撑出，只能靠平移回中：两侧 inset 都钉在 50% 再靠自动外边距回中时可用宽度是 0，
+     气泡比它宽，自动外边距按规范取 0，气泡从拇指中线起排、偏出半个自身宽。平移乘书写方向的符号，
+     rtl 下行内分量掉头。拖动时拇指放大，气泡按同一比例反向缩回、与拇指同一段过渡：文字不跟着放大，
+     缩放原点在贴着拇指那一边 */
   [data-scope='color-slider'][data-part='value-text'] {
     position: absolute;
     inset-block-end: 100%;
-    inset-inline: 50%;
+    inset-inline-start: 50%;
     inline-size: max-content;
     margin-block-end: var(--xh-color-slider-value-text-offset, var(--xh-space-2));
-    margin-inline: auto;
+    translate: calc(-50% * var(--xh-direction-sign)) 0;
+    transform-origin: 50% 100%;
     padding-block: var(--xh-color-slider-value-text-py, var(--xh-space-0_5));
     padding-inline: var(--xh-color-slider-value-text-px, var(--xh-space-2));
     border-radius: var(--xh-color-slider-value-text-radius, var(--xh-shape-control));
@@ -199,7 +208,9 @@
     /* 气泡贴在拇指上方，指针要落到拇指上，不能被它挡住 */
     pointer-events: none;
     opacity: 0;
-    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='color-slider'][data-part='value-text'][hidden] {
@@ -208,15 +219,18 @@
 
   [data-scope='color-slider'][data-part='value-text'][data-dragging] {
     opacity: 1;
+    scale: calc(1 / var(--xh-_color-slider-thumb-scale, 1));
   }
 
-  /* 竖排轨道的气泡挪到行侧：压在拇指上方会挡住上一档的值 */
+  /* 竖排轨道的气泡挪到行侧：压在拇指上方会挡住上一档的值；反向缩放的原点换到贴着拇指的行首那一侧 */
   [data-scope='color-slider'][data-part='value-text'][data-orientation='vertical'] {
     inset-block: 50%;
     inset-inline: 100% auto;
     block-size: max-content;
     margin-block: auto;
     margin-inline: var(--xh-color-slider-value-text-offset, var(--xh-space-2)) 0;
+    translate: none;
+    transform-origin: calc(50% - 50% * var(--xh-direction-sign)) 50%;
   }
 
   /* —— 尺寸 —— */
@@ -239,13 +253,6 @@
 
   /* hidden-input 是 type=hidden 的原生输入，浏览器本就不渲染它，这里一条声明都不给。 */
 
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='color-slider'][data-part='thumb'],
-    [data-scope='color-slider'][data-part='value-text'] {
-      transition: none;
-    }
-  }
-
   /*
    * 高对比档：轨道画的就是颜色本身，被系统换掉之后整条滑杆不再能调色。
    * 轨道与拇指退出强制着色保住原色，各补一圈系统描边把它们从背景里框出来。

package/css/color-swatch-picker.css

@@ -169,7 +169,7 @@
     scale: 0;
     transition:
       opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-settle);
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-settle);
   }
 
   /* 没写内容就由皮肤画勾；作者往部件里塞了自己的图形，这条规则即不命中 */
@@ -236,7 +236,9 @@
       background: Highlight;
     }
 
+    /* 勾是 mask 挖出来的一块底色：退出强制换色、直接写系统色，否则底色被换成 Canvas、勾跟着消失 */
     [data-scope='color-swatch-picker'][data-part='indicator']:empty::after {
+      forced-color-adjust: none;
       background-color: HighlightText;
     }
   }

package/css/combobox.css

@@ -7,9 +7,12 @@
 @import '../family/field-chrome.css';
 @import '../family/action-control.css';
 @import '../family/collection-item.css';
+@import '../family/loading-ring.css';
 
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
+@import '../family/material.css';
+@import '../family/tag-list.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -25,8 +28,8 @@
     /* 落定那一侧的可用宽度，同样由定位引擎经内联自定义属性写进来，行内轴据此夹取；
        引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口宽 */
     --xh-_combobox-available-w: 100vw;
-    /* 输入框实测宽度，由定位引擎经内联自定义属性写进来，内容层拿它当最小宽的下界；
-       引擎没算（尚未落位 / 无引擎）时为 0，max 取静态档，等于不抬宽 */
+    /* 字段盒实测宽度，由定位引擎经内联自定义属性写进来，内容层与它等宽；
+       引擎没算（尚未落位 / 无引擎）时为 0，面板取下界 */
     --xh-_combobox-anchor-w: 0px;
     /* 每层使用自身落位方向，不继承外层弹窗留下的方向。 */
     --xh-_overlay-enter-up: 0;
@@ -183,6 +186,15 @@
     --xh-field-placeholder-fg: var(--xh-combobox-placeholder-fg, var(--xh-fg-subtle));
     --xh-field-autofill-bg: var(--xh-combobox-input-autofill-bg, var(--xh-bg-canvas));
     --xh-field-autofill-fg: var(--xh-combobox-input-autofill-fg, var(--xh-fg-default));
+
+    /* 多选的标签排在它前面：标签再多也给打字留出这一截，挤不下时标签先截断、再折进 +N */
+    min-inline-size: var(--xh-combobox-input-min-w, var(--xh-control-input-min-w));
+  }
+
+  /* 标签行：盒里、输入框之前收着已选值标签与 +N 那一枚的一行，行里每一枚都是 tag（data-scope="tag"），
+     样子归 tag.css；行怎么排、标签怎么进出归标签行家族配方（family/tag-list.css），这里只把使用者的间距槽接进去 */
+  [data-scope='combobox'][data-part='tag-list'] {
+    --xh-tag-list-gap: var(--xh-combobox-tag-list-gap, var(--xh-space-1));
   }
 
   [data-scope='combobox'][data-part='input'][hidden] {
@@ -232,7 +244,7 @@
      按钮自带悬停底色，整个按钮转会带着底色一起转；家族按压缩放的是整钮，不影响这里的转向 */
   [data-scope='combobox'][data-part='trigger']:empty::before,
   [data-scope='combobox'][data-part='trigger'] > * {
-    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong);
+    transition: rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
   }
 
   /* 没写内容就由皮肤画箭头；作者往部件里塞了自己的图形，这条规则即不命中 */
@@ -266,49 +278,39 @@
   }
 
   [data-scope='combobox'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-combobox-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-combobox-content-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-combobox-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-combobox-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-combobox-content-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-combobox-content-highlight, var(--xh-_material-highlight));
+
     position: relative;
     display: flex;
     flex-direction: column;
     gap: var(--xh-combobox-content-gap, var(--xh-list-option-gap));
     grid-area: 1 / 1;
-    /* 下界跟着输入框走，面板不窄于它；可用宽度的夹取写在这一侧：
-       min-inline-size 恒压过 max-inline-size，锚点比可用区还宽时只夹 max 等于没夹 */
-    min-inline-size: min(
-      max(var(--xh-combobox-content-min-w, var(--xh-overlay-min-w)), var(--xh-_combobox-anchor-w)),
+    /* 列表型浮层与字段盒等宽：长选项在条目里截断，面板不随最长的一条变宽。锚点比下界还窄时取下界，
+       比可用区还宽时收成可用宽度；要封顶由作者另写上界槽 */
+    inline-size: min(
+      max(var(--xh-combobox-content-min-w, var(--xh-overlay-menu-min-w)), var(--xh-_combobox-anchor-w)),
       var(--xh-_combobox-available-w)
     );
-    /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
-    max-inline-size: min(var(--xh-combobox-content-max-w, var(--xh-overlay-max-w)), var(--xh-_combobox-available-w));
+    max-inline-size: var(--xh-combobox-content-max-w, none);
     /* 空列表也保留完整状态面的高度；empty/loading 先隐藏时，Presence 退场不会塌成细边条。 */
     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-max-h)), var(--xh-_combobox-available-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));
-    border: var(--xh-stroke-thin) solid var(--xh-combobox-content-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-combobox-content-radius, var(--xh-shape-overlay));
-    background: var(--xh-combobox-content-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-combobox-content-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-combobox-content-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-combobox-content-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-combobox-content-backdrop, var(--xh-material-frosted-backdrop));
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
     pointer-events: auto;
   }
 
-  /* 顶光只沿表面上边缘绘制，不参与列表布局、不拦截候选交互。 */
-  [data-scope='combobox'][data-part='content']::before {
-    content: '';
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-    block-size: var(--xh-stroke-thin);
-    border-radius: inherit;
-    background: var(--xh-combobox-content-highlight, var(--xh-material-frosted-highlight));
-    pointer-events: none;
-  }
-
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
      收起态连接层会给 content 打 hidden，而上面那条 display 正是要盖掉 UA 的
      [hidden]{display:none}——退场动画得先能播。presence 读的是 content 的 animationName，
@@ -321,7 +323,8 @@
     outline: none;
   }
 
-  [data-scope='combobox'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='combobox'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -350,12 +353,19 @@
   [data-scope='combobox'][data-part='group-label'] {
     display: block;
     padding-block: var(--xh-combobox-group-label-py, var(--xh-space-1));
-    padding-inline: var(--xh-combobox-group-label-px, var(--xh-control-px-md));
+    padding-inline: var(--xh-combobox-group-label-px, var(--xh-_combobox-item-px));
     color: var(--xh-combobox-group-label-fg, var(--xh-material-frosted-fg-muted));
     font-size: var(--xh-combobox-group-label-font-size, var(--xh-text-caption-size));
     font-weight: var(--xh-combobox-group-label-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-none);
     user-select: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 刷新：已有候选时后台在取，保留上一帧，条目与分组标题按 micro 淡下，数据到了再淡回；在途占位此时让位。
+     淡的是内容不是面：content 是整块磨砂面，整块淡下去面就透了 */
+  [data-scope='combobox'][data-part='content'][aria-busy='true'] [data-scope='combobox']:is([data-part='item'], [data-part='group-label']) {
+    opacity: var(--xh-state-disabled-opacity);
   }
 
   [data-scope='combobox'][data-part='group-label'][hidden] {
@@ -369,7 +379,7 @@
     --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-control));
+    --xh-collection-radius: var(--xh-combobox-item-radius, var(--xh-shape-inset));
     --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));
@@ -462,7 +472,7 @@
     justify-content: center;
     grid-area: 1 / 1;
     padding-block: var(--xh-combobox-empty-py, var(--xh-space-3));
-    padding-inline: var(--xh-combobox-empty-px, var(--xh-control-px-md));
+    padding-inline: var(--xh-combobox-empty-px, var(--xh-_combobox-item-px));
     color: var(--xh-combobox-empty-fg, var(--xh-material-frosted-fg-muted));
     font-size: var(--xh-combobox-empty-font-size, var(--xh-_combobox-font-size));
     line-height: var(--xh-leading-none);
@@ -481,9 +491,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: var(--xh-_combobox-gap);
     grid-area: 1 / 1;
     padding-block: var(--xh-combobox-loading-py, var(--xh-space-3));
-    padding-inline: var(--xh-combobox-loading-px, var(--xh-control-px-md));
+    padding-inline: var(--xh-combobox-loading-px, var(--xh-_combobox-item-px));
     color: var(--xh-combobox-loading-fg, var(--xh-material-frosted-fg-muted));
     font-size: var(--xh-combobox-loading-font-size, var(--xh-_combobox-font-size));
     line-height: var(--xh-leading-none);
@@ -495,6 +506,15 @@
     display: none;
   }
 
+  /* 首次加载：文案前一枚加载环，由加载环配方画（连接层投影 data-xh-loading-ring 与 data-loading），
+     直径取所在尺寸档的图标档 */
+  [data-scope='combobox'][data-part='loading']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
   /* 自动结构没收到状态文案时，空 status 不生成盒；打开着的空 listbox 也不画无意义表面。
      closed 不命中：有文案的空态刚关闭时，content 仍要作为 Presence 宿主完成退场。 */
   [data-scope='combobox'][data-part='empty']:empty,
@@ -516,4 +536,31 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='combobox']:is([data-part='trigger'], [data-part='clear-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='combobox'][data-part='item-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='combobox']:is([data-part='trigger'], [data-part='clear-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before,
+    [data-scope='combobox'][data-part='item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])) [data-scope='combobox'][data-part='item-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='combobox']:is([data-part='trigger'], [data-part='clear-trigger'])[data-disabled]:empty::before,
+    [data-scope='combobox'][data-part='item']:is([aria-disabled='true'], [data-disabled]) [data-scope='combobox'][data-part='item-indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/command.css

@@ -7,6 +7,8 @@
 
 /* 共享关键帧由 family/motion.css 提供，命令走 Collection Item 家族；本皮肤 @import 它们，单独引入仍成立。 */
 @import '../family/collection-item.css';
+@import '../family/field-chrome.css';
+@import '../family/loading-ring.css';
 @import '../family/motion.css';
 
 @layer xihan.components {
@@ -31,9 +33,10 @@
     --xh-_command-font-size: var(--xh-control-font-md);
   }
 
-  /* 面板从上方落下来一小段：方向槽写在定位层上，面板继承过去喂给进场那支动画 */
+  /* 面板从上方落下来一小段：起点在终点之上（up 一侧写 1），与锚在顶缘的缩放同向。
+     方向槽写在定位层上，面板继承过去喂给进场那支动画 */
   [data-scope='command'][data-part='positioner'] {
-    --xh-_overlay-enter-down: 1;
+    --xh-_overlay-enter-up: 1;
   }
 
   /* —— 尺寸 —— */
@@ -76,7 +79,7 @@
     background: transparent;
   }
 
-  [data-scope='command'][data-part='backdrop'][data-state='open'] {
+  [data-scope='command'][data-part='backdrop'][data-state='open']:not([data-instant]) {
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
@@ -146,7 +149,8 @@
     outline: none;
   }
 
-  [data-scope='command'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='command'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -157,24 +161,28 @@
   }
 
   /* —— 检索框 —— */
-  /* 通栏一行，底下一道线把它与结果分开；框自己不画边不画底，边界归面板 */
+  /* 面板内嵌的搜索框：通栏一行，控件高与字号随尺寸档，底下一道面内分隔（sheet 面的分隔令牌）把它与结果分开；
+     框自己不画边不画底，边界归面板。重置与占位前景由字段家族按 data-xh-field-input 给 */
   [data-scope='command'][data-part='input'] {
+    --xh-field-placeholder-fg: var(--xh-command-placeholder-fg, var(--xh-fg-subtle));
+
     flex: none;
     inline-size: 100%;
     block-size: var(--xh-command-input-h, var(--xh-_command-input-h));
     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-border-subtle));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-command-input-border, var(--xh-material-elevated-separator));
     border-radius: 0;
     background: transparent;
     color: var(--xh-command-input-fg, var(--xh-fg-default));
     font-family: inherit;
-    font-size: var(--xh-command-input-font-size, var(--xh-text-body-size));
+    font-size: var(--xh-command-input-font-size, var(--xh-_command-font-size));
   }
 
-  [data-scope='command'][data-part='input']::placeholder {
-    color: var(--xh-command-placeholder-fg, var(--xh-fg-subtle));
+  /* 聚焦不画环：插入符就是焦点指示。框没有外壳，全局那圈键盘焦点环只会压在通栏一行上 */
+  [data-scope='command'][data-part='input']:focus-visible {
+    outline: none;
   }
 
   /* 自动填充态：浏览器给填过的框强加一套系统色（多数引擎是黄底黑字），
@@ -206,6 +214,7 @@
     /* 模态面板里的滚动面：到底后不把滚动链穿透给页面 */
     overflow-y: auto;
     overscroll-behavior: contain;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 没有可见命令时不保留列表的上下内距；只排除列表内部 hidden 祖先，退场中的外壳不影响判断。 */
@@ -240,7 +249,7 @@
     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-subtle));
+    color: var(--xh-command-group-label-fg, var(--xh-fg-muted));
     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));
     line-height: var(--xh-leading-none);
@@ -258,7 +267,7 @@
     --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-control));
+    --xh-collection-radius: var(--xh-command-item-radius, var(--xh-shape-inset));
     --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));
@@ -285,32 +294,13 @@
     user-select: none;
   }
 
-  /* 开幕：结果自上而下逐条冒出来。筛掉的条目带 hidden 不生成盒子，重新露面时这段动画重新起跑，
-     所以每改一次检索串都会重播一遍。backwards 让每条在自己那份延迟里保持起始帧 */
-  [data-scope='command'][data-part='list'] [data-part='item'] {
+  /* 新插进列表的命令（宿主追加、异步取回的一批）自上而下逐条冒出来，同一批按到达顺序错开（序号封顶，命令再多也
+     不会拖出一条越来越慢的尾巴）。打开时已有的结果直接呈现：自己或本列表带 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] *) {
     animation: xh-rise-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
-  }
-
-  /* 交错的间隔：第二条起逐级往后推，第六条起统一钉在第五级，命令再多也不会拖出一条越来越慢的尾巴。
-     列表里同时挂着被筛掉的条目（收起态），计数把它们排掉，序号才对得上看得见的那几条 */
-  [data-scope='command'][data-part='list'] [data-part='item']:nth-child(2 of :not([hidden])) {
-    animation-delay: var(--xh-motion-stagger-step);
-  }
-
-  [data-scope='command'][data-part='list'] [data-part='item']:nth-child(3 of :not([hidden])) {
-    animation-delay: calc(2 * var(--xh-motion-stagger-step));
-  }
-
-  [data-scope='command'][data-part='list'] [data-part='item']:nth-child(4 of :not([hidden])) {
-    animation-delay: calc(3 * var(--xh-motion-stagger-step));
-  }
-
-  [data-scope='command'][data-part='list'] [data-part='item']:nth-child(5 of :not([hidden])) {
-    animation-delay: calc(4 * var(--xh-motion-stagger-step));
-  }
-
-  [data-scope='command'][data-part='list'] [data-part='item']:nth-child(n + 6 of :not([hidden])) {
-    animation-delay: calc(5 * var(--xh-motion-stagger-step));
+    animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
   }
 
   [data-scope='command'][data-part='item-text'] {
@@ -327,9 +317,9 @@
   [data-scope='command'][data-part='empty'] {
     display: block;
     flex: none;
-    padding-block: var(--xh-command-empty-py, var(--xh-space-6));
+    padding-block: var(--xh-command-empty-py, var(--xh-space-3));
     padding-inline: var(--xh-command-empty-px, var(--xh-_command-px));
-    color: var(--xh-command-empty-fg, var(--xh-fg-subtle));
+    color: var(--xh-command-empty-fg, var(--xh-fg-muted));
     font-size: var(--xh-command-empty-font-size, var(--xh-_command-font-size));
     line-height: var(--xh-leading-none);
     text-align: center;
@@ -337,23 +327,35 @@
 
   /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
   [data-scope='command'][data-part='loading'] {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-_command-gap);
     flex: none;
-    padding-block: var(--xh-command-loading-py, var(--xh-space-6));
+    padding-block: var(--xh-command-loading-py, var(--xh-space-3));
     padding-inline: var(--xh-command-loading-px, var(--xh-_command-px));
-    color: var(--xh-command-loading-fg, var(--xh-fg-subtle));
+    color: var(--xh-command-loading-fg, var(--xh-fg-muted));
     font-size: var(--xh-command-loading-font-size, var(--xh-_command-font-size));
     line-height: var(--xh-leading-none);
     text-align: center;
   }
 
+  /* 首次加载：文案前一枚加载环，由加载环配方画（连接层投影 data-xh-loading-ring 与 data-loading），
+     直径取所在尺寸档的图标档 */
+  [data-scope='command'][data-part='loading']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
   /* 未提供状态内容时不渲染一块纯留白，提示文案仍由作者明确提供。 */
   [data-scope='command'][data-part='empty']:empty,
   [data-scope='command'][data-part='loading']:empty {
     display: none;
   }
 
-  /* 取数在途：列表压暗一档，与在途占位一起说明这块正在变 */
+  /* 刷新：已有命令时后台在取，保留上一帧，列表按 micro 淡下，数据到了再淡回；在途占位此时让位 */
   [data-scope='command'][data-part='list'][aria-busy='true'] {
     opacity: var(--xh-command-list-busy-opacity, var(--xh-state-disabled-opacity));
   }
@@ -367,7 +369,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-border-subtle));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-command-footer-border, var(--xh-material-elevated-separator));
     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

@@ -7,7 +7,9 @@
 
 /* 共享关键帧由 family/motion.css 提供，条目走 Collection Item 家族；本皮肤 @import 它们，单独引入仍成立。 */
 @import '../family/collection-item.css';
+@import '../family/menu-choice.css';
 @import '../family/motion.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -83,6 +85,15 @@
   }
 
   [data-scope='context-menu'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-context-menu-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-context-menu-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-context-menu-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-context-menu-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-context-menu-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-context-menu-highlight, var(--xh-_material-highlight));
+
     position: relative;
     display: flex;
     flex-direction: column;
@@ -94,13 +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));
-    border: var(--xh-stroke-thin) solid var(--xh-context-menu-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-context-menu-content-radius, var(--xh-shape-overlay));
-    background: var(--xh-context-menu-content-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-context-menu-content-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-context-menu-content-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-context-menu-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-context-menu-backdrop, var(--xh-material-frosted-backdrop));
     /* 条目超过上限就在菜单内部滚；内收焦点环不会被内边距缘裁掉。
        浮层滚动面：到底后不把滚动链穿透给页面 */
     overflow-y: auto;
@@ -108,18 +113,6 @@
     pointer-events: auto;
   }
 
-  /* 顶光单独叠在真实四边 border 内侧；强制色归零后轮廓仍在。 */
-  [data-scope='context-menu'][data-part='content']::before {
-    content: '';
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-    block-size: var(--xh-stroke-thin);
-    border-radius: inherit;
-    background: var(--xh-context-menu-highlight, var(--xh-material-frosted-highlight));
-    pointer-events: none;
-  }
-
   [data-scope='context-menu'][data-part='root'][hidden] {
     display: none;
   }
@@ -147,7 +140,7 @@
      长按会先选中区域内的文字，长按菜单弹出时手指底下是一片高亮，很难看 */
   [data-scope='context-menu'][data-part='trigger'] {
     user-select: none;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 触屏没有右键，菜单靠长按计时打开。这段等待里若一点变化都没有，用户会当成没按上而提前
@@ -177,7 +170,8 @@
   }
 
   /* 首帧落位后从锚点一侧淡入短移，不缩放整张面。 */
-  [data-scope='context-menu'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='context-menu'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -224,7 +218,7 @@
     --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-control));
+    --xh-collection-radius: var(--xh-context-menu-item-radius, var(--xh-shape-inset));
     --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));
@@ -321,7 +315,8 @@
     order: 2;
     min-inline-size: 0;
     color: var(--xh-context-menu-item-description-fg, var(--xh-material-frosted-fg-muted));
-    font-size: var(--xh-context-menu-item-description-font-size, var(--xh-text-caption-size));
+    /* 与同一行的快捷键、Select 等列表的说明同档：控件次级字号，不取 caption 令牌 */
+    font-size: var(--xh-context-menu-item-description-font-size, var(--xh-control-caption-md));
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -382,6 +377,28 @@
     -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='context-menu'][data-part='item'][aria-haspopup='menu']::after,
+    [data-scope='context-menu'][data-part='item-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='context-menu'][data-part='item'][aria-haspopup='menu']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after,
+    [data-scope='context-menu'][data-part='item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])) [data-scope='context-menu'][data-part='item-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='context-menu'][data-part='item'][aria-haspopup='menu']:is([aria-disabled='true'], [data-disabled])::after,
+    [data-scope='context-menu'][data-part='item']:is([aria-disabled='true'], [data-disabled]) [data-scope='context-menu'][data-part='item-indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
 }
 
 @layer xihan.motion {