@xihan-ui/styles 2.1.0 → 3.1.0

package/css/color-picker.css

@@ -5,9 +5,11 @@
 
 /* 定义 color picker 样式。 */
 
+@import '../family/field-chrome.css';
+@import '../family/action-control.css';
 @import '../family/swatch.css';
 @import '../family/motion.css';
-
+@import '../family/tag-list.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -23,11 +25,10 @@
 
   /* 标签一行、盒一行的两行堆叠 */
   [data-scope='color-picker'][data-part='root'] {
-    /* 盒的度量与标签字号走私有槽中转，与同族的下拉选择一处对一处 */
+    /* 盒的度量走私有槽中转，与同族的下拉选择一处对一处 */
     --xh-_color-picker-h: var(--xh-control-h-md);
     --xh-_color-picker-px: var(--xh-control-px-md);
     --xh-_color-picker-gap: var(--xh-control-gap-md);
-    --xh-_color-picker-label-font-size: var(--xh-control-font-md);
 
     /* 聚焦环恒用固定环色 */
     --xh-_color-picker-ring: var(--xh-ring-focus);
@@ -50,68 +51,85 @@
     --xh-_color-picker-h: var(--xh-control-h-sm);
     --xh-_color-picker-px: var(--xh-control-px-sm);
     --xh-_color-picker-gap: var(--xh-control-gap-sm);
-    --xh-_color-picker-label-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='color-picker']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
     --xh-_color-picker-h: var(--xh-control-h-lg);
     --xh-_color-picker-px: var(--xh-control-px-lg);
     --xh-_color-picker-gap: var(--xh-control-gap-lg);
-    --xh-_color-picker-label-font-size: var(--xh-control-font-lg);
   }
 
   [data-scope='color-picker'][data-part='label'] {
     color: var(--xh-color-picker-label-fg, var(--xh-fg-default));
-    font-size: var(--xh-color-picker-label-font-size, var(--xh-_color-picker-label-font-size));
+    /* 字段标签不随档：与同族字段同一档标签字号 */
+    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));
   }
 
-  /* 盒：描边、底色、控件高度与行内内衬都落在这一层，
-     另加一档静态落影把它从页面里抬起一层 */
+  /* 盒：接字段外壳家族（data-xh-field-chrome），描边、底色、控件高度、行内内衬、悬停与聚焦面
+     都由家族按 data-variant 与状态画，与同族的下拉选择一处对一处；这里只把组件自己的覆盖槽桥接进去。
+     静息无影、悬停取家族的 45% 淡底、聚焦边一律 --xh-border-control-focus（不随语气） */
   [data-scope='color-picker'][data-part='control'] {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--xh-color-picker-control-gap, var(--xh-_color-picker-gap));
-    min-inline-size: min(var(--xh-color-picker-control-min-w, var(--xh-control-min-w)), 100%);
-    block-size: var(--xh-color-picker-control-h, var(--xh-_color-picker-h));
-    padding-inline: var(--xh-color-picker-control-px, var(--xh-_color-picker-px));
-    border: var(--xh-stroke-thin) solid var(--xh-color-picker-control-border, var(--xh-border-control));
-    border-radius: var(--xh-color-picker-control-radius, var(--xh-shape-control));
-    background: var(--xh-color-picker-control-bg, transparent);
-    box-shadow: var(--xh-color-picker-control-shadow, var(--xh-elevation-raised));
-    color: var(--xh-color-picker-control-fg, var(--xh-fg-default));
-    cursor: pointer;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    --xh-field-control-height: var(--xh-color-picker-control-h, var(--xh-_color-picker-h));
+    --xh-field-control-padding-inline: var(--xh-color-picker-control-px, var(--xh-_color-picker-px));
+    --xh-field-control-gap: var(--xh-color-picker-control-gap, var(--xh-_color-picker-gap));
+    --xh-field-control-min-inline-size: var(--xh-color-picker-control-min-w, var(--xh-control-min-w));
+    --xh-field-control-radius: var(--xh-color-picker-control-radius, var(--xh-shape-control));
+    --xh-field-bg-rest: var(--xh-color-picker-control-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-color-picker-control-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-read-only: var(--xh-color-picker-control-bg-readonly, var(--xh-_field-variant-bg-read-only));
+    --xh-field-bg-disabled: var(--xh-color-picker-control-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-fg-rest: var(--xh-color-picker-control-fg, var(--xh-fg-default));
+    --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;
   }
 
   [data-scope='color-picker'][data-part='control'][hidden] {
     display: none;
   }
 
-  /* 悬停换描边的同时换填充：这个盒里大半面积是那块色样，只挪一圈 1px 的描边读不出来。
-     只读档摘掉：它正拿压低一档的底色说「改不动」，被悬停的填充盖掉那条信息就没了 */
-  [data-scope='color-picker'][data-part='control']:hover:not([data-disabled], [data-readonly]) {
-    border-color: var(--xh-color-picker-control-border-hover, var(--xh-border-control-hover));
-    background: var(--xh-color-picker-control-bg-hover, var(--xh-bg-subtle));
+  /* 多选的标签行：选中的颜色在盒里排成标签，超过 maxTagCount 的折进 +N。
+     行里每一枚都是 tag（data-scope="tag"），样子归 tag.css；行怎么排、标签怎么进出归标签行家族配方。
+     基准取 0：只吃触发钮剩下的宽度、在自己里面折行；按内容宽算基准的话，盒子会先在钮前面折行，把钮挤到最后一行 */
+  [data-scope='color-picker'][data-part='tag-list'] {
+    --xh-tag-list-gap: var(--xh-color-picker-tag-list-gap, var(--xh-space-1));
+
+    flex: 1 1 0;
+    flex-wrap: wrap;
   }
 
-  /* Tab 停靠点是盒里的 trigger，环画在盒上 */
-  [data-scope='color-picker'][data-part='control']:focus-within:not([data-disabled]) {
-    border-color: var(--xh-color-picker-control-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
-    outline: var(--xh-ring-width) solid var(--xh-_color-picker-ring);
-    outline-offset: var(--xh-ring-offset);
+  /* 颜色标签是定长的值串，截短了就读不出是哪个颜色：不收缩，排不下就折到下一行，
+     盒随行数长高（字段家族的 multi-tag 布局给），到上限后在盒内滚动 */
+  [data-scope='color-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'] {
+    flex: none;
   }
 
-  [data-scope='color-picker'][data-part='control'][data-disabled] {
-    background: var(--xh-color-picker-control-bg-disabled, var(--xh-bg-subtle));
-    color: var(--xh-fg-disabled);
+  /* 每枚标签前一个色点，颜色由连接层写进内联私有槽；+N 那一枚没有 data-value，不画。
+     白色与近底色的颜色靠一圈默认描边从标签底上分出来 */
+  [data-scope='color-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'][data-value]::before {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--xh-color-picker-tag-dot-size, var(--xh-control-indicator-sm));
+    block-size: var(--xh-color-picker-tag-dot-size, var(--xh-control-indicator-sm));
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-tag-dot-border, var(--xh-border-default));
+    border-radius: var(--xh-shape-circle);
+    background-color: var(--xh-_color-picker-tag-color, transparent);
+    content: '';
+    print-color-adjust: exact;
   }
 
-  /* 只读仍可聚焦、浮层照开，只是改不动：不置灰，只把底色压下去 */
-  [data-scope='color-picker'][data-part='control'][data-readonly] {
-    background: var(--xh-color-picker-control-bg-readonly, var(--xh-bg-subtle));
+  [data-scope='color-picker'][data-part='control'][data-xh-field-layout='multi-tag'] {
+    max-block-size: var(--xh-color-picker-control-max-h, var(--xh-viewport-h-sm));
+    overflow-y: auto;
+  }
+
+  /* 多选时值文字让位，触发钮只剩一颗显示工作色的色块：不再占满剩余宽度，标签行吃掉余下的位置 */
+  [data-scope='color-picker'][data-part='control'][data-xh-field-layout='multi-tag'] > [data-scope='color-picker'][data-part='trigger'] {
+    flex: none;
   }
 
   /* 盒内那颗可聚焦的按钮：不画描边不铺底也不自带高度，只占满剩余宽度、排布色块与值文本 */
@@ -229,13 +247,14 @@
     pointer-events: auto;
   }
 
-  [data-scope='color-picker'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现；常驻形态的取色面一直在，没有进退场 */
+  [data-scope='color-picker'][data-part='content'][data-state='open']:not([data-instant], [data-inline]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
   /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
      免得动画结束到真收起之间闪一下原样 */
-  [data-scope='color-picker'][data-part='content'][data-state='closed'] {
+  [data-scope='color-picker'][data-part='content'][data-state='closed']:not([data-inline]) {
     animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
@@ -244,6 +263,22 @@
     outline: none;
   }
 
+  /* 常驻形态：根不再取字段缺省宽，跟着取色面走 */
+  [data-scope='color-picker'][data-part='root'][data-inline] {
+    inline-size: auto;
+    min-inline-size: 0;
+  }
+
+  /* 常驻形态的取色面是页面里的静态内容面（solid）：surface 圆角、border-default 描边、实体底、不落影。
+     没有定位层给出可用宽高，不限高也不自己滚；它一直在，没有进退场 */
+  [data-scope='color-picker'][data-part='content'][data-inline] {
+    max-inline-size: 100%;
+    max-block-size: none;
+    overflow-y: visible;
+    border-radius: var(--xh-color-picker-content-radius, var(--xh-shape-surface));
+    box-shadow: var(--xh-color-picker-content-shadow, none);
+  }
+
   /* 二维取色区。底色是当前色相（连接层内联给），两层渐变盖在上面：
      横轴由白到透明 = 饱和度，纵轴由透明到黑 = 明度。
      两层都收在一个 ::before 里：它是盒树里的第一个子节点，作者写的拇指排在它后面，
@@ -301,7 +336,7 @@
     background: transparent;
     box-shadow: var(--xh-color-picker-thumb-shadow, var(--xh-elevation-raised));
     cursor: grab;
-    transition: scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong);
+    transition: scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
   }
 
   /* 取色区的纵轴也由连接层给（inset-block-start），回拉同样按 block-start 那侧 */
@@ -364,7 +399,8 @@
   }
 
   [data-scope='color-picker'][data-part='channel-input']:focus-visible {
-    border-color: var(--xh-color-picker-input-border-focus, var(--xh-_tone, var(--xh-border-control-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);
   }
@@ -401,13 +437,14 @@
     cursor: pointer;
     user-select: none;
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
   }
 
   [data-scope='color-picker'][data-part='eye-dropper-trigger']:hover:not(:disabled) {
-    background: var(--xh-color-picker-action-bg-hover, var(--xh-bg-subtle-hover));
+    /* 坐在浮层白底上：白底承载阶梯 hover 100 → pressed 200 */
+    background: var(--xh-color-picker-action-bg-hover, var(--xh-bg-subtle));
     color: var(--xh-color-picker-action-fg-hover, var(--xh-fg-default));
   }
 
@@ -415,7 +452,7 @@
      松手那一刻浮层多半已经被系统的取色镜头盖住，按下的回执只有这一瞬看得见。
      指针 :active 与 Headless 投影的 data-pressed（Space / Enter 与触屏按住）看见同一副按压面 */
   [data-scope='color-picker'][data-part='eye-dropper-trigger']:not(:disabled):is(:active, [data-pressed]) {
-    background: var(--xh-color-picker-action-bg-active, var(--xh-bg-subtle-active));
+    background: var(--xh-color-picker-action-bg-active, var(--xh-bg-subtle-hover));
     scale: var(--xh-motion-scale-press);
     transition-duration: var(--xh-motion-duration-press);
     transition-timing-function: var(--xh-motion-ease-press);
@@ -432,11 +469,45 @@
     color: var(--xh-fg-disabled);
   }
 
+  /* 「添加」沉到面板的行尾：它是多选时整块面板的出口，不跟取色面左对齐 */
+  [data-scope='color-picker'][data-part='content'] > [data-scope='color-picker'][data-part='confirm-trigger'] {
+    flex: none;
+    align-self: flex-end;
+  }
+
+  /* 「添加」是面板里唯一的主要动作：品牌实心、悬停 / 按下与 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-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));
+    --xh-action-bg-hover: var(--xh-color-picker-confirm-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-color-picker-confirm-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-color-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-color-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-color-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: var(--xh-color-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-hover: var(--xh-color-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-color-picker-confirm-trigger-shadow, none);
+    --xh-action-font-size: var(--xh-text-secondary-size);
+
+    border-width: 0;
+  }
+
+  /* 单选时连接层给的是 hidden 属性；家族那条 display 会把 UA 规则盖掉 */
+  [data-scope='color-picker'][data-part='confirm-trigger'][hidden] {
+    display: none;
+  }
+
   /* 预设色板的挂载点，同时充当色板的根节点：color-swatch-picker 那份皮的 root 规则落在
      [data-scope='color-swatch-picker'][data-part='root'] 上，而这里没有那个节点，所以根上挂的那几个私有槽
      （格子边长、间距、徽标尺寸、语气色、图标尺）与排布得在这儿照抄一遍；格子的皮仍归色板那一份。
-     浮层里的色板走小号格子：与滑块的拇指、数值框一个量级，整块面板才不会被色板撑开 */
-  [data-scope='color-picker'][data-part='swatch-picker'] {
+     浮层里的色板走小号格子：与滑块的拇指、数值框一个量级，整块面板才不会被色板撑开。
+     最近使用色是同一台色块选择器，挂载点同一套 */
+  [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-indicator: var(--xh-control-indicator-sm);
@@ -450,7 +521,7 @@
     gap: var(--xh-color-picker-swatch-picker-gap, var(--xh-_color-swatch-picker-gap));
   }
 
-  [data-scope='color-picker'][data-part='swatch-picker'][data-disabled] {
+  [data-scope='color-picker']:is([data-part='swatch-picker'], [data-part='recent-swatch-picker'])[data-disabled] {
     cursor: not-allowed;
   }
 
@@ -464,7 +535,8 @@
   [data-scope='color-picker'][data-part='hue-slider'][hidden],
   [data-scope='color-picker'][data-part='alpha-slider'][hidden],
   [data-scope='color-picker'][data-part='eye-dropper-trigger'][hidden],
-  [data-scope='color-picker'][data-part='swatch-picker'][hidden] {
+  [data-scope='color-picker'][data-part='swatch-picker'][hidden],
+  [data-scope='color-picker'][data-part='recent-swatch-picker'][hidden] {
     display: none;
   }
 
@@ -513,5 +585,11 @@
       outline: var(--xh-stroke-thin) solid ButtonBorder;
       outline-offset: calc(-1 * var(--xh-stroke-thin));
     }
+
+    /* 标签前的色点画的也是颜色本身：同样退出强制着色，用系统文字色描一圈 */
+    [data-scope='color-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'][data-value]::before {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+    }
   }
 }

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;
+    }
+  }
 }