@xihan-ui/styles 2.0.0 → 3.0.0

package/css/color-swatch-picker.css

@@ -51,7 +51,7 @@
     --xh-_color-swatch-picker-indicator: var(--xh-control-indicator-lg);
   }
 
-  /* 标题独占一行，格子从下一行起排。复合单字段的标签（§6.4）：14 / 500 / fg-default，不随档；
+  /* 标题独占一行，格子从下一行起排。复合单字段的标签：14 / 500 / fg-default，不随档；
      与格子的距离贴控件 space-1——容器的 gap 归格子之间，标签在它之上补一段差值把距离收成目标值 */
   [data-scope='color-swatch-picker'][data-part='label'] {
     flex-basis: 100%;
@@ -80,7 +80,7 @@
     flex: none;
     inline-size: var(--xh-color-swatch-picker-item-size, var(--xh-_color-swatch-picker-cell));
     block-size: var(--xh-color-swatch-picker-item-size, var(--xh-_color-swatch-picker-cell));
-    /* 色块 item 的身份是 inset（§6.3：嵌在 control 内的小块） */
+    /* 色块 item 的身份是 inset（嵌在 control 内的小块） */
     border-radius: var(--xh-color-swatch-picker-item-radius, var(--xh-shape-inset));
     outline: none;
     cursor: pointer;
@@ -88,12 +88,12 @@
   }
 
   /* 指到哪一格：描边换到控件的悬停边（border-strong 只留给 contrast-more 与登记的强调边）；
-     选中的那一格保留自己的品牌描边（§9.3 选中身份不被悬停盖掉） */
+     选中的那一格保留自己的品牌描边（选中身份不被悬停盖掉） */
   [data-scope='color-swatch-picker'][data-part='item']:not([data-disabled], [data-readonly], [data-state='checked']):hover {
     --xh-_color-swatch-picker-edge: var(--xh-color-swatch-picker-swatch-border-hover, var(--xh-border-control-hover));
   }
 
-  /* 这一格的底色就是它要展示的那个颜色，换底等于把展示物盖掉（§9.1 的「同时换底」在这里落不下去），
+  /* 这一格的底色就是它要展示的那个颜色，换底等于把展示物盖掉（的「同时换底」在这里落不下去），
      交互回执只能落在别处：按下去看下压，描边同时换到品牌色作第二通道（按住即将选中的那一格）。
      置灰与只读的都不压；指针 :active 与 Headless 投影的 data-pressed 看见同一副按压面 */
   [data-scope='color-swatch-picker'][data-part='item']:not([data-disabled], [data-readonly]):is(:active, [data-pressed]) {
@@ -162,14 +162,14 @@
     inline-size: var(--xh-color-swatch-picker-indicator-size, var(--xh-_color-swatch-picker-indicator));
     block-size: var(--xh-color-swatch-picker-indicator-size, var(--xh-_color-swatch-picker-indicator));
     border: var(--xh-stroke-thin) solid var(--xh-color-swatch-picker-indicator-border, var(--xh-bg-canvas));
-    /* 正方盒取 circle（§6.3：宽高同槽的盒不得用 pill 冒充圆） */
+    /* 正方盒取 circle（宽高同槽的盒不得用 pill 冒充圆） */
     border-radius: var(--xh-shape-circle);
     background: var(--xh-color-swatch-picker-indicator-bg, var(--xh-_color-swatch-picker-accent));
     opacity: 0;
     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;
@@ -85,7 +88,7 @@
 
     /* 作者塞进指示符槽的图标跟着控件的尺寸档走；它自己写了 size 时仍以作者的为准。
        浮层条目里自绘的状态字形（勾选标记所在的标记盒与盒里的勾）不读这支：它们是指示符，走
-       --xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size 改接到盒的尺（§6.5） */
+       --xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size 改接到盒的尺 */
     --xh-icon-size: var(--xh-combobox-icon-size, var(--xh-glyph-size-md));
 
     /* 语气只落在勾选标记上，单选与多选正文使用同一颜色。 */
@@ -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,10 +323,9 @@
     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);
-    /* 只在开着的这一档挂：合成层随 data-state 一起收走，收起后不再占着 */
-    will-change: opacity, translate;
   }
 
   /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
@@ -352,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] {
@@ -371,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));
@@ -425,7 +433,7 @@
 
   /* 勾选标记落在家族网格的 indicator 列，只在选中项上显形（家族按 aria-selected / data-state=checked 给）；
      未选中时占位不塌，切换选中不引起行宽抖动。
-     盒与盒里的勾是指示符（§6.5）：盒按指示符档取尺，并在自己身上把 --xh-icon-size 改接到盒的尺，皮肤画的
+     盒与盒里的勾是指示符：盒按指示符档取尺，并在自己身上把 --xh-icon-size 改接到盒的尺，皮肤画的
      兜底勾与作者塞进盒里的 XhIcon 读同一把尺、与盒同边长（勾选标记不是勾选格，不取 × 0.75，与 Select /
      Listbox / Menu 族同口径）；不读 root / positioner 按档下发的 --xh-icon-size——那支只管作者放进条目里的
      图标，按图标档取的 20px 比 16 / 14 的指示符档大一圈 */
@@ -464,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);
@@ -483,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);
@@ -497,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,
@@ -518,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 {
@@ -19,7 +21,7 @@
      谁先命中谁给出这一档的取值；条目、检索框与提示条都从面板继承下去 */
   [data-scope='command']:is([data-part='positioner'], [data-part='content']) {
     /* 条目外的字形（分组标题、底部提示条）按档取尺，缺省 md，随 data-size 换档；命令里的图标由家族随
-       data-xh-collection-size 下发（§6.5） */
+       data-xh-collection-size 下发 */
     --xh-icon-size: var(--xh-command-icon-size, var(--xh-glyph-size-md));
 
     /* 尺寸档只换这六个私有槽，换档不必给每个部件各写一条选择器 */
@@ -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);
   }
 
@@ -118,7 +121,7 @@
     max-inline-size: var(--xh-command-max-w, var(--xh-_command-max-w));
     /* 封顶才有可滚的余量：不封顶结果列表会一路撑到视口外，滚动条永远出不来 */
     max-block-size: var(--xh-command-max-h, var(--xh-overlay-max-h));
-    /* 模态命令面板与 Dialog 同档：overlay 圆角 + sheet 三件套（material-elevated 的边 / 底 / 影，§8.4），
+    /* 模态命令面板与 Dialog 同档：overlay 圆角 + sheet 三件套（material-elevated 的边 / 底 / 影），
        边界由描边承担，不再只靠落影 */
     border: var(--xh-stroke-thin) solid var(--xh-command-border, var(--xh-material-elevated-border));
     border-radius: var(--xh-command-radius, var(--xh-shape-overlay));
@@ -146,10 +149,9 @@
     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);
-    /* 只在开着的这一档挂：合成层随 data-state 一起收走，收起后不再占着 */
-    will-change: opacity, scale, translate;
   }
 
   /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
@@ -159,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;
   }
 
   /* 自动填充态：浏览器给填过的框强加一套系统色（多数引擎是黄底黑字），
@@ -205,9 +211,10 @@
     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));
-    /* 模态面板里的滚动面：到底后不把滚动链穿透给页面（§6.6） */
+    /* 模态面板里的滚动面：到底后不把滚动链穿透给页面 */
     overflow-y: auto;
     overscroll-behavior: contain;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 没有可见命令时不保留列表的上下内距；只排除列表内部 hidden 祖先，退场中的外壳不影响判断。 */
@@ -242,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);
@@ -260,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));
@@ -287,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'] {
@@ -329,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;
@@ -339,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));
   }
@@ -369,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));
   }