@xihan-ui/styles 3.2.0 → 4.0.0

package/dist/css/empty-state.css

@@ -20,7 +20,7 @@
     --xh-_empty-state-gap: var(--xh-stack-gap-md);
     --xh-_empty-state-py: var(--xh-section-py-md);
     --xh-_empty-state-icon-size: var(--xh-glyph-size-2xl);
-    /* 标题走 Surface / Feedback 标题档 14/600；sm 同档只缩图形与留白，lg 升到页面级 heading-3 */
+    /* 标题走小面标题档 14/500；sm 同档只缩图形与留白，lg 升到区块标题 heading-3 */
     --xh-_empty-state-title-size: var(--xh-text-label-size);
     /* 图标区的强调色：由 data-status（状态码）或 data-tone（语气）换掉；两样都没写就退成中性 */
     --xh-_empty-state-accent: var(--xh-fg-subtle);
@@ -76,6 +76,17 @@
     --xh-_empty-state-accent: var(--xh-_tone-fg);
   }
 
+  /* 结果页（写了语气）：图标坐进一枚 44px 语气淡底圆，字形收到 20px；淡底由语气层按 data-tone 给 */
+  .xh-scope-empty-state[data-part='root'][data-tone] .xh-scope-empty-state[data-part='indicator'] {
+    --xh-icon-size: var(--xh-empty-state-icon-size, var(--xh-glyph-size-md));
+
+    inline-size: var(--xh-empty-state-indicator-box, var(--xh-control-box-lg));
+    block-size: var(--xh-empty-state-indicator-box, var(--xh-control-box-lg));
+    border-radius: var(--xh-empty-state-indicator-radius, var(--xh-shape-circle));
+    background: var(--xh-empty-state-indicator-bg, var(--xh-_tone-subtle));
+    font-size: var(--xh-empty-state-icon-size, var(--xh-glyph-size-md));
+  }
+
   /*
    * 插画槽。它与图标槽二选一，尺寸另走一档：插画塞进按字形量的图标槽会被压到 40px 以下，
    * 而空状态的插画通常是这个尺度的两倍。默认由图标档翻一倍派生，跟着三个尺寸档一起走。
@@ -110,8 +121,13 @@
     margin: 0;
     color: var(--xh-empty-state-title-fg, var(--xh-fg-default));
     font-size: var(--xh-empty-state-title-font-size, var(--xh-_empty-state-title-size));
-    font-weight: var(--xh-empty-state-title-font-weight, var(--xh-font-weight-semibold));
-    line-height: var(--xh-empty-state-title-leading, var(--xh-leading-tight));
+    font-weight: var(--xh-empty-state-title-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-empty-state-title-leading, var(--xh-leading-normal));
+  }
+
+  /* 标题与说明是一组：两者之间只留 4px，图形与它们、它们与动作之间才是整档间距 */
+  .xh-scope-empty-state[data-part='title'] + .xh-scope-empty-state[data-part='description'] {
+    margin-block-start: calc(var(--xh-space-1) - var(--xh-empty-state-gap, var(--xh-_empty-state-gap)));
   }
 
   .xh-scope-empty-state[data-part='description'] {
@@ -128,6 +144,8 @@
     align-items: center;
     justify-content: center;
     gap: var(--xh-empty-state-action-gap, var(--xh-space-2));
+    /* 动作区比图文之间多让出 4px，操作与说明分得开 */
+    margin-block-start: var(--xh-space-1);
   }
 
   /* 图标、标题、说明、动作按次序开幕，间隔由交错步长派生。

package/dist/css/field-array.css

@@ -72,8 +72,11 @@
   }
 
   /* 行里放什么控件归作者，这里只给它一条能撑开也能收窄的轨道。
-     min-inline-size 归零：不写的话里面的输入框按 UA 默认宽度顶住，长内容会把整行撑破 */
+     min-inline-size 归零：不写的话里面的输入框按 UA 默认宽度顶住，长内容会把整行撑破。
+     字段族控件放进来铺满这条轨道，与放进 Field 时一样；并排几个就平分，各自的压缩底线照旧 */
   .xh-scope-field-array[data-part='item-content'] {
+    --xh-control-w: 100%;
+
     display: flex;
     flex: 1 1 auto;
     align-items: center;

package/dist/css/field.css

@@ -17,7 +17,8 @@
   .xh-scope-field[data-part='root'] {
     display: flex;
     flex-direction: column;
-    gap: var(--xh-field-gap, var(--xh-space-1));
+    /* 说明与错误文案紧贴控件：那一行辅助行自己有最小高（description.css），在表单里就是项距 */
+    gap: var(--xh-field-gap, var(--xh-space-0));
     /* 字段族控件放进字段即铺满字段宽：字段的宽由表单的列给，控件跟着列走，
        不必逐个组件在根上写 inline-size: 100%。单独摆放的控件仍是 16rem 缺省宽；
        单类钉宽（--xh-<组件>-control-w）照旧压过这一条 */
@@ -28,8 +29,8 @@
      整表据此对齐；描述与错误文案跟着控件走第二列 */
   .xh-scope-form[data-part='root'][data-layout='horizontal'] .xh-scope-field[data-part='root'] {
     display: grid;
-    grid-template-columns: var(--xh-form-label-w, 30%) minmax(0, 1fr);
-    column-gap: var(--xh-field-label-gap, var(--xh-space-3));
+    grid-template-columns: var(--xh-form-label-w, calc(100% * 5 / 24)) minmax(0, 1fr);
+    column-gap: var(--xh-field-label-gap, var(--xh-space-4));
     align-items: start;
   }
 
@@ -62,12 +63,11 @@
        横排表单里标签列是一段比例宽度，这行让标签在那一列里折行，而不是从列的左边顶出去 */
     overflow-wrap: anywhere;
     /* 竖排时标签与控件之间的距离：容器的 gap 之上补一段差值，
-       --xh-field-label-gap-block 给多少最终就是多少；不给时差值算成 0，
-       这段距离仍由 --xh-field-gap 与描述、错误文案那两段同宽。 */
+       --xh-field-label-gap-block 给多少最终就是多少，与描述、错误文案那两段（归 --xh-field-gap）各管各的 */
     margin-block-end: calc(
-      var(--xh-field-label-gap-block, var(--xh-field-gap, var(--xh-space-1))) - var(--xh-field-gap, var(--xh-space-1))
+      var(--xh-field-label-gap-block, var(--xh-space-2)) - var(--xh-field-gap, var(--xh-space-0))
     );
-    color: var(--xh-field-label-fg, var(--xh-fg-default));
+    color: var(--xh-field-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-field-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-field-label-font-weight, var(--xh-text-label-weight));
     /* 转无效或转禁用时标签换色，两档之间接一段过渡（与字段集组标题同一档） */
@@ -75,11 +75,11 @@
   }
 
   .xh-scope-field[data-part='label'][data-disabled] {
-    color: var(--xh-field-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-field-label-fg-disabled, var(--xh-fg-muted));
   }
 
-  /* 必填星号的字形、间距与默认色在 label.css 公共层；这里只把颜色接到本组件的覆盖槽上 */
-  .xh-scope-field[data-part='label'][data-required]::after {
+  /* 必填星号的字形、字号、间距与默认色在 label.css 公共层；这里只把颜色接到本组件的覆盖槽上 */
+  .xh-scope-field[data-part='label'][data-required]::before {
     color: var(--xh-field-label-star, var(--xh-fg-danger));
   }
 
@@ -102,8 +102,6 @@
     --xh-field-border-focus: var(--xh-field-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-field-control-border-invalid, var(--xh-_field-variant-border-invalid));
     /* 焦点环与家族同一支公共环，不再留逐组件的环色槽（焦点边与环一律公共） */
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-field-control-shadow, none);
 
     inline-size: 100%;
@@ -120,8 +118,8 @@
   /* 说明与错误文案的角色（外边距、行距、默认字号与字色）在 description.css 公共层；
      这里只把字色与字号接到本组件的覆盖槽上 */
   .xh-scope-field[data-part='description'] {
-    color: var(--xh-field-description-fg, var(--xh-fg-muted));
-    font-size: var(--xh-field-description-font-size, var(--xh-text-secondary-size));
+    color: var(--xh-field-description-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-field-description-font-size, var(--xh-text-caption-size));
     /* 与标签同一档过渡：整个字段转禁用时两处一起变淡 */
     transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
@@ -132,7 +130,7 @@
 
   .xh-scope-field[data-part='error-text'] {
     color: var(--xh-field-error-fg, var(--xh-fg-danger));
-    font-size: var(--xh-field-error-font-size, var(--xh-text-secondary-size));
+    font-size: var(--xh-field-error-font-size, var(--xh-text-caption-size));
   }
 
   /* 辅助文字那一行的占位：字段渲染了错误文案、当前又没在报错时，收起的错误文案自己留在流里占住一行
@@ -142,15 +140,16 @@
      没有在场的 description 才这样占：描述已经占着这一行了，报错时由描述让位给错误文案（见 description.css），
      收起的错误文案按公共层不占位。没渲染错误文案的字段本来就没有这一行。
 
-     高度按错误文案那一档的字号乘行距算，得到的正是它一行的高度。
+     高度取辅助行的最小高与错误文案一行（字号乘行距）里大的那个，得到的正是它报错时的高度。
      不写 1lh：那个单位晚于本库声明的浏览器地板，取不到时整条声明被丢弃、占位高退回 0，
      字段又会随报错撑高一次，而这种失效不报错。
      与前一块的距离由根的 gap 给，和错误文案顶上来时是同一段；横排表单里它与别的子块一样落在控件那一列。 */
   .xh-scope-field[data-part='root']:not(:has(> .xh-scope-field[data-part='description']:not([hidden])))
     > .xh-scope-field[data-part='error-text'][hidden] {
     position: static;
-    block-size: calc(
-      var(--xh-field-error-font-size, var(--xh-text-secondary-size)) * var(--xh-leading-normal)
+    block-size: max(
+      var(--xh-space-5),
+      calc(var(--xh-field-error-font-size, var(--xh-text-caption-size)) * var(--xh-leading-normal))
     );
     transition:
       opacity var(--xh-motion-duration-exit) var(--xh-motion-ease-exit),

package/dist/css/fieldset.css

@@ -13,28 +13,48 @@
 
   /* 抹掉 UA 给 <fieldset> 的边框、内外边距与 min-content 下限，间距全部改由令牌给。
      display 落在 fieldset 的匿名内容盒上：首个 <legend> 不在这个盒子里，
-     所以 gap 只作用于组内各块，legend 与内容之间的留白由 legend 自己的下外边距给。 */
+     legend 与内容之间的留白由 legend 自己的下外边距给。
+     组内项距与 Form 同一套，不走 gap：字段带辅助行（说明，或给错误文案留的那一行）时那一行就是项距，
+     没有辅助行的块才在下方补一段项距（见下面两条） */
   .xh-scope-fieldset[data-part='root'] {
+    --xh-_fieldset-item-gap: var(--xh-fieldset-gap, var(--xh-space-5));
+
     display: flex;
     flex-direction: column;
-    gap: var(--xh-fieldset-gap, var(--xh-space-4));
+    row-gap: 0;
     margin: 0;
     border: 0;
     padding: 0;
     min-inline-size: 0;
   }
 
+  /* 每一块在下方留一段项距，最后一块不留。:where() 不计特指度：legend 的下外边距、组说明与错误文案
+     归零的外边距（description.css）和作者给自己节点写的外边距都压得过它 */
+  :where(.xh-scope-fieldset[data-part='root']) > :where(:not(:last-child)) {
+    margin-block-end: var(--xh-_fieldset-item-gap);
+  }
+
+  /* 字段或并排的一段里有字段带辅助行：辅助行（最小高 --xh-space-5）紧贴控件、自己就是项距，不再另留；
+     只留错误文案占位的那一行同样算，无效时被收起的说明不算（判据与 Form 的项同一条） */
+  .xh-scope-fieldset[data-part='root'] > :is(.xh-scope-field[data-part='root'], .xh-scope-fieldset[data-part='field-group']):has(
+    .xh-scope-field[data-part='error-text'],
+    .xh-scope-field[data-part='description']:not([hidden], .xh-scope-field[data-part='root'][data-invalid] > *)
+  ) {
+    margin-block-end: 0;
+  }
+
   .xh-scope-fieldset[data-part='root'][hidden] {
     display: none;
   }
 
   .xh-scope-fieldset[data-part='legend'] {
     padding: 0;
-    margin-block-end: var(--xh-fieldset-legend-gap, var(--xh-space-2));
-    /* 组标题是「一组字段的标题」，归集合标题角色：fg-muted，与组 --xh-space-2，字号字重同字段标签 */
-    color: var(--xh-fieldset-legend-fg, var(--xh-fg-muted));
-    font-size: var(--xh-fieldset-legend-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-fieldset-legend-font-weight, var(--xh-text-label-weight));
+    margin-block-end: var(--xh-fieldset-legend-gap, var(--xh-space-4));
+    /* 组标题是表单里一段的标题，与区块标题同一档：heading-3 + 正文色，与组内首项隔 --xh-space-4；
+       组里每个字段自己的标签是 muted，组标题压在它们上面要高一级 */
+    color: var(--xh-fieldset-legend-fg, var(--xh-fg-default));
+    font-size: var(--xh-fieldset-legend-font-size, var(--xh-text-heading-3-size));
+    font-weight: var(--xh-fieldset-legend-font-weight, var(--xh-text-heading-3-weight));
     line-height: var(--xh-leading-tight);
     /* 整组转无效或转禁用时组标题换色，两档之间接一段过渡 */
     transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
@@ -46,22 +66,22 @@
     color: var(--xh-fieldset-legend-fg-invalid, var(--xh-fg-danger));
   }
 
-  /* 整组禁用时组标题跟着变淡；组内控件由原生 fieldset[disabled] 各自呈现禁用态。
+  /* 整组禁用时组标题跟着变淡；组内组件库的控件经作用域配置拿到 disabled，按各自的禁用面画。
      选择器权重高于上一条且排在后面，禁用与无效同时为真时以禁用为准。 */
   .xh-scope-fieldset[data-part='root'] > .xh-scope-fieldset[data-part='legend'][data-disabled] {
     color: var(--xh-fieldset-legend-fg-disabled, var(--xh-fg-subtle));
   }
 
-  /* 必填星号的字形、间距与默认色在 label.css 公共层；这里只把颜色接到本组件的覆盖槽上 */
-  .xh-scope-fieldset[data-part='legend'][data-required]::after {
+  /* 必填星号的字形、字号、间距与默认色在 label.css 公共层；这里只把颜色接到本组件的覆盖槽上 */
+  .xh-scope-fieldset[data-part='legend'][data-required]::before {
     color: var(--xh-fieldset-legend-star, var(--xh-fg-danger));
   }
 
   /* 说明与错误文案的角色（外边距、行距、默认字号与字色）在 description.css 公共层；
      这里只把字色与字号接到本组件的覆盖槽上 */
   .xh-scope-fieldset[data-part='description'] {
-    color: var(--xh-fieldset-description-fg, var(--xh-fg-muted));
-    font-size: var(--xh-fieldset-description-font-size, var(--xh-text-secondary-size));
+    color: var(--xh-fieldset-description-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-fieldset-description-font-size, var(--xh-text-caption-size));
     /* 与组标题同一档过渡：整组转禁用时两处一起变淡 */
     transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
@@ -97,6 +117,6 @@
 
   .xh-scope-fieldset[data-part='error-text'] {
     color: var(--xh-fieldset-error-fg, var(--xh-fg-danger));
-    font-size: var(--xh-fieldset-error-font-size, var(--xh-text-secondary-size));
+    font-size: var(--xh-fieldset-error-font-size, var(--xh-text-caption-size));
   }
 }

package/dist/css/file-upload.css

@@ -16,7 +16,7 @@
   }
 
   .xh-scope-file-upload[data-part='root'] {
-    /* 作者放进缩略图槽、删除钮与清空钮里的图标跟着字号走，与皮肤画的兜底叉同一把尺。
+    /* 作者放进删除钮与清空钮里的图标跟着字号走（缩略图位另取 16px 图标尺）。
        条目行首自绘的状态标记（传完的勾、失败的警示）不读这支：它们是指示符，与同一行里 icon 档的
        删除钮并排、走 --xh-control-indicator-* 一族，尺寸由 --xh-file-upload-item-mark-size 单独控 */
     --xh-icon-size: var(--xh-file-upload-icon-size, var(--xh-glyph-size-text));
@@ -32,30 +32,33 @@
   }
 
   .xh-scope-file-upload[data-part='label'] {
-    color: var(--xh-file-upload-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-file-upload-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-file-upload-label-gap, var(--xh-space-2)) - var(--xh-file-upload-gap, var(--xh-space-3)));
+    color: var(--xh-file-upload-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-file-upload-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-file-upload-label-font-weight, var(--xh-text-label-weight));
   }
 
   .xh-scope-file-upload[data-part='label'][data-disabled] {
-    color: var(--xh-file-upload-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-file-upload-label-fg-disabled, var(--xh-fg-muted));
   }
 
-  /* 虚线框是"这里能放东西"的通用说法，实线框看起来只是一个普通面板。
-     整块可点、可聚焦（连接层给了 role=button 与 tabindex），所以指针形状用 pointer */
+  /* 虚线框是"这里能放东西"的通用说法，实线框看起来只是一个普通面板；铺一层淡底，
+     整块在页面上读得出是一块可放置的面。整块可点、可聚焦（连接层给了 role=button 与 tabindex），
+     所以指针形状用 pointer */
   .xh-scope-file-upload[data-part='dropzone'] {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: var(--xh-file-upload-dropzone-gap, var(--xh-space-2));
-    min-block-size: var(--xh-file-upload-dropzone-min-h, 8rem);
+    min-block-size: var(--xh-file-upload-dropzone-min-h, var(--xh-dropzone-min-h));
     padding-block: var(--xh-file-upload-dropzone-py, var(--xh-space-5));
     padding-inline: var(--xh-file-upload-dropzone-px, var(--xh-space-4));
-    border: var(--xh-stroke-thick) dashed var(--xh-file-upload-dropzone-border, var(--xh-border-control));
-    border-radius: var(--xh-file-upload-dropzone-radius, var(--xh-shape-surface));
-    background: var(--xh-file-upload-dropzone-bg, transparent);
-    color: var(--xh-file-upload-dropzone-fg, var(--xh-fg-muted));
+    border: var(--xh-stroke-thin) dashed var(--xh-file-upload-dropzone-border, var(--xh-border-control));
+    border-radius: var(--xh-file-upload-dropzone-radius, var(--xh-shape-control));
+    background: var(--xh-file-upload-dropzone-bg, var(--xh-bg-subtle));
+    color: var(--xh-file-upload-dropzone-fg, var(--xh-fg-default));
     font-size: var(--xh-file-upload-dropzone-font-size, var(--xh-text-body-size));
     text-align: center;
     cursor: pointer;
@@ -70,10 +73,10 @@
   }
 
   /* hover 只在中性态命中：invalid 与 dragging 正拿边框颜色说事，被 hover 盖掉那条信息就没了。
-     描边与底一起换：这块面有整整八行高，只挪一圈 1px 的描边在这个面积上几乎读不出来 */
+     描边与底一起换（淡底承载的阶梯升一档）：这块面有十来行高，只挪一圈 1px 的描边在这个面积上几乎读不出来 */
   .xh-scope-file-upload[data-part='dropzone']:hover:not([data-disabled], [data-invalid], [data-dragging]) {
-    border-color: var(--xh-file-upload-dropzone-border-hover, var(--xh-border-control-hover));
-    background: var(--xh-file-upload-dropzone-bg-hover, var(--xh-bg-subtle));
+    border-color: var(--xh-file-upload-dropzone-border-hover, var(--xh-border-strong));
+    background: var(--xh-file-upload-dropzone-bg-hover, var(--xh-bg-subtle-hover));
   }
 
   /* 键盘落焦时描边跟着语气走，与聚焦环同族；环由 focus.css 统一画。
@@ -82,10 +85,11 @@
     border-color: var(--xh-file-upload-dropzone-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
   }
 
-  /* 悬停在上方：整块换成品牌色描边加浅底，比只换边框显眼得多 */
+  /* 拖着文件悬在上方：描边换品牌色、底升一档，比只换边框显眼得多。
+     底仍是中性淡底：品牌淡底专属选中 / 当前，拖入不是选中 */
   .xh-scope-file-upload[data-part='dropzone'][data-dragging] {
     border-color: var(--xh-file-upload-dropzone-border-dragging, var(--xh-bg-brand));
-    background: var(--xh-file-upload-dropzone-bg-dragging, var(--xh-bg-subtle));
+    background: var(--xh-file-upload-dropzone-bg-dragging, var(--xh-bg-subtle-hover));
   }
 
   .xh-scope-file-upload[data-part='dropzone'][data-invalid] {
@@ -151,7 +155,7 @@
     max-block-size: var(--xh-file-upload-list-max-h, var(--xh-viewport-h-md));
     overflow-y: auto;
     flex-direction: column;
-    gap: var(--xh-file-upload-item-gap, var(--xh-space-2));
+    gap: var(--xh-file-upload-item-gap, var(--xh-space-3));
   }
 
   .xh-scope-file-upload[data-part='list'][hidden] {
@@ -159,21 +163,24 @@
   }
 
   /* 私有槽一个：传输进度的 0..1 比例，由连接层写进进度条的内联样式，
-     这里给个 0 的缺省——没接上传器时进度条根本不露面，也就没有宽度可算。 */
+     这里给个 0 的缺省——没接上传器时进度条根本不露面，也就没有宽度可算。
+     文件行是一条无描边的淡底行（描边位留着、透明）；行里的删除钮坐在淡底上，承载阶梯按淡底取（200 → 300） */
   .xh-scope-file-upload[data-part='item'] {
     --xh-_file-upload-progress: 0;
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
 
     display: flex;
     /* 一行排不下就换行：文件名有自己的下限，挤到那个下限之后由后面的部件另起一行，
        而不是把文件名继续压到零宽 */
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--xh-file-upload-item-inner-gap, var(--xh-control-gap-md));
+    gap: var(--xh-file-upload-item-inner-gap, var(--xh-space-3));
     padding-block: var(--xh-file-upload-item-py, var(--xh-space-2));
     padding-inline: var(--xh-file-upload-item-px, var(--xh-space-3));
-    border: var(--xh-stroke-thin) solid var(--xh-file-upload-item-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-file-upload-item-border, transparent);
     border-radius: var(--xh-file-upload-item-radius, var(--xh-shape-control));
-    background: var(--xh-file-upload-item-bg, var(--xh-bg-surface));
+    background: var(--xh-file-upload-item-bg, var(--xh-bg-subtle));
     color: var(--xh-file-upload-item-fg, var(--xh-fg-default));
     font-size: var(--xh-file-upload-item-font-size, var(--xh-text-body-size));
   }
@@ -204,14 +211,23 @@
   }
 
   /* 上传失败的那一行必须一眼认出来：不标出来的话它跟传完的行渲染完全一致，
-     用户不知道该按哪一条的重试。红边之外再补一枚警示字形——只靠颜色的话，
-     色觉障碍用户与灰度打印下这一档等于没有。
+     用户不知道该按哪一条的重试。文件名标红之外再补一枚警示字形——只靠颜色的话，
+     色觉障碍用户与灰度打印下这一档等于没有。行底换回承载面：危险色字压在淡底（暗色下连字段淡底）上到不了 4.5:1，
+     描边位仍透明。行里的删除钮跟着换回白底承载阶梯（100 → 200）：留在淡底阶梯上，悬停就一步跳到 200。
      警示与下面的勾都是固定状态标记（不是 :empty 兜底，作者塞进条目的部件顶不掉）：按指示符档取尺
      （comfortable 16 / compact 14，随密度换档），不读只管作者图标的 --xh-icon-size——随文 1em 落在
      14 上下，comfortable 下比同一行里的指示符档小一圈、compact 下又不换档 */
   .xh-scope-file-upload[data-part='item'][data-state='error'],
   .xh-scope-file-upload[data-part='item'][data-state='closed']:has(> [data-part='item-progress'][data-state='error']) {
-    border-color: var(--xh-file-upload-item-border-error, var(--xh-border-invalid));
+    --xh-action-host-bg-hover: var(--xh-bg-subtle);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-hover);
+
+    border-color: var(--xh-file-upload-item-border-error, transparent);
+    background: var(--xh-file-upload-item-bg-error, var(--xh-bg-surface));
+  }
+
+  .xh-scope-file-upload[data-part='item'][data-state='error'] > [data-part='item-name']:where(.xh-scope-file-upload),
+  .xh-scope-file-upload[data-part='item'][data-state='closed']:has(> [data-part='item-progress'][data-state='error']) > [data-part='item-name']:where(.xh-scope-file-upload) {
     color: var(--xh-file-upload-item-fg-error, var(--xh-fg-danger));
   }
 
@@ -221,7 +237,7 @@
     flex: none;
     inline-size: var(--xh-file-upload-item-mark-size, var(--xh-control-indicator-size));
     block-size: var(--xh-file-upload-item-mark-size, var(--xh-control-indicator-size));
-    background-color: currentColor;
+    background-color: var(--xh-file-upload-item-fg-error, var(--xh-fg-danger));
     -webkit-mask: var(--xh-glyph-mark-warning) center / contain no-repeat;
     mask: var(--xh-glyph-mark-warning) center / contain no-repeat;
   }
@@ -281,20 +297,32 @@
     display: none;
   }
 
-  /* 缩略图占位：作者往里塞图标或真缩略图，尺寸由这里定死，一行行的图标才对得齐 */
+  /* 缩略图位：缺省是 16px 的品牌色图标位、不带底，作者往里塞图标或真缩略图（要大图把尺寸槽调大），
+     尺寸由这里定死，一行行的图标才对得齐；放进来的图标与空着时画的那枚文件字形同一把尺 */
   .xh-scope-file-upload[data-part='item-preview'] {
+    --xh-icon-size: var(--xh-glyph-size-sm);
+
     display: inline-flex;
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-file-upload-preview-size, var(--xh-control-h-md));
-    block-size: var(--xh-file-upload-preview-size, var(--xh-control-h-md));
+    inline-size: var(--xh-file-upload-preview-size, var(--xh-glyph-size-sm));
+    block-size: var(--xh-file-upload-preview-size, var(--xh-glyph-size-sm));
     border-radius: var(--xh-file-upload-preview-radius, var(--xh-shape-control));
-    background: var(--xh-file-upload-preview-bg, var(--xh-bg-subtle));
-    color: var(--xh-file-upload-preview-fg, var(--xh-fg-muted));
+    background: var(--xh-file-upload-preview-bg, transparent);
+    color: var(--xh-file-upload-preview-fg, var(--xh-fg-brand));
     overflow: hidden;
   }
 
+  .xh-scope-file-upload[data-part='item-preview']:empty::before {
+    content: '';
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-file) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-file) center / contain no-repeat;
+  }
+
   .xh-scope-file-upload[data-part='item-preview'][hidden] {
     display: none;
   }
@@ -338,8 +366,8 @@
     color: var(--xh-fg-disabled);
   }
 
-  /* 删除是一行里的小图标钮：Action Control icon 档 ghost、xs 视觉盒，悬停 100 / 按下 200 与 0.97 按压由家族给；
-     悬停与按下时字换危险色，说明这一下会删掉。钮里的叉按 xs 档的字形尺画 */
+  /* 删除是一行里的小图标钮：Action Control icon 档 ghost、xs 视觉盒，坐在淡底行上按淡底承载阶梯换面（行上声明），
+     按压由家族给；悬停与按下时字换危险色，说明这一下会删掉。钮里的叉取指示符小档（12px），不抢文件名 */
   .xh-scope-file-upload[data-part='item-delete-trigger'] {
     --xh-action-bg-hover: var(--xh-file-upload-delete-bg-hover, var(--xh-_action-variant-bg-hover));
     --xh-action-bg-pressed: var(--xh-file-upload-delete-bg-active, var(--xh-_action-variant-bg-pressed));
@@ -348,7 +376,7 @@
     --xh-action-fg-pressed: var(--xh-file-upload-delete-fg-hover, var(--xh-fg-danger-hover));
     --xh-action-radius: var(--xh-file-upload-delete-radius, var(--xh-shape-control));
     --xh-action-visual-size: var(--xh-file-upload-delete-size, var(--xh-_action-profile-visual-size));
-    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+    --xh-icon-size: var(--xh-control-indicator-sm);
 
     flex: none;
   }
@@ -418,6 +446,11 @@
       background-color: ButtonText;
     }
 
+    .xh-scope-file-upload[data-part='item-preview']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
     .xh-scope-file-upload:is([data-part='item-delete-trigger'], [data-part='clear-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
       background-color: HighlightText;
     }

package/dist/css/float-button.css

@@ -24,11 +24,11 @@
      所以别往覆盖钩子里加这几个属性。 */
   .xh-scope-float-button[data-part='root'] {
     --xh-_float-button-offset: var(--xh-space-6);
-    /* 展开列表里原生动作项的身量与字形尺：触发器自己走 Action Control floating 档
-       （sm = box-sm / md = box-md / lg = box-lg，字形 sm / md / lg），
-       原生动作项不是 Headless 部件、配方打不到它，这两支私有槽按同一张表镜像，换档只改这里 */
-    --xh-_float-button-size: var(--xh-control-box-md);
-    --xh-_float-button-glyph-size: var(--xh-glyph-size-md);
+    /* 触发器与展开列表里原生动作项的身量与字形尺，同一张表：md 取独立浮钮的直径（40px），
+       sm / lg 取方格档；字形比控件内图标低一档（sm / md 16px、lg 20px）。
+       原生动作项不是 Headless 部件、配方打不到它，触发器也读这两支私有槽，换档只改这里 */
+    --xh-_float-button-size: var(--xh-control-float-md);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-sm);
     /* 作者塞进指示符槽的图标跟着尺寸档走，与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-_float-button-glyph-size));
 
@@ -167,17 +167,15 @@
   /* —— 尺寸：原生动作项与触发器的 floating 档逐档同表 —— */
   .xh-scope-float-button[data-part='root'][data-size='sm'] {
     --xh-_float-button-size: var(--xh-control-box-sm);
-    --xh-_float-button-glyph-size: var(--xh-glyph-size-sm);
   }
 
   .xh-scope-float-button[data-part='root'][data-size='md'] {
-    --xh-_float-button-size: var(--xh-control-box-md);
-    --xh-_float-button-glyph-size: var(--xh-glyph-size-md);
+    --xh-_float-button-size: var(--xh-control-float-md);
   }
 
   .xh-scope-float-button[data-part='root'][data-size='lg'] {
     --xh-_float-button-size: var(--xh-control-box-lg);
-    --xh-_float-button-glyph-size: var(--xh-glyph-size-lg);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-md);
   }
 
   /* —— 形态：给展开列表里原生动作项用的面 ——
@@ -201,7 +199,8 @@
     --xh-_float-button-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle-opaque));
     --xh-_float-button-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover-opaque));
     --xh-_float-button-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active-opaque));
-    --xh-_float-button-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    /* 与形态矩阵 subtle 档的中性字同一支（次要字色），触发器与动作项一致 */
+    --xh-_float-button-fg: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_float-button-border: transparent;
     --xh-_float-button-border-hover: transparent;
     --xh-_float-button-shadow: none;
@@ -228,8 +227,8 @@
   }
 
   /* —— 触发器 ——
-     浮在内容之上的单图标圆钮，接 Action Control floating 档：盒型（md = box-lg 48px，圆形）、
-     四态面、0.97 按压与 44px 命中区由家族配方按 data-xh-action-variant / -size 给出。
+     浮在内容之上的单图标圆钮，接 Action Control floating 档：圆形、四态面、按压与 44px 命中区
+     由家族配方按 data-xh-action-variant / -size 给出；视觉盒与字形取根上按档给的尺（与动作项同一张表）。
      这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射 */
   .xh-scope-float-button[data-part='trigger'] {
     --xh-action-bg-rest: var(--xh-float-button-bg, var(--xh-_action-variant-bg-rest));
@@ -253,9 +252,20 @@
     --xh-action-shadow-focus-visible: var(--xh-float-button-shadow, none);
     --xh-action-shadow-disabled: var(--xh-float-button-shadow, none);
     --xh-action-radius: var(--xh-float-button-radius, var(--xh-_action-profile-radius));
-    --xh-action-visual-size: var(--xh-float-button-size, var(--xh-_action-profile-visual-size));
-    /* 作者塞进来的图标跟着 floating 档走（md 24px），与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-_action-profile-glyph-size));
+    --xh-action-visual-size: var(--xh-float-button-size, var(--xh-_float-button-size));
+    --xh-action-min-inline-size: var(--xh-float-button-size, var(--xh-_float-button-size));
+    /* 作者塞进来的图标与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-_float-button-glyph-size));
+  }
+
+  /* subtle 档：形态矩阵的淡底是半透明的墨色，钮钉在内容之上盖不住底下的字；触发器改读上面
+     不透明的那组淡底（与展开组里的原生动作项同一块面），写了语气仍是语气淡底 */
+  .xh-scope-float-button[data-part='root'][data-variant='subtle']
+    .xh-scope-float-button[data-part='trigger'] {
+    --xh-action-bg-rest: var(--xh-float-button-bg, var(--xh-_float-button-bg));
+    --xh-action-bg-hover: var(--xh-float-button-bg-hover, var(--xh-_float-button-bg-hover));
+    --xh-action-bg-pressed: var(--xh-float-button-bg-active, var(--xh-_float-button-bg-active));
+    --xh-action-bg-focus-visible: var(--xh-float-button-bg, var(--xh-_float-button-bg));
   }
 
   /* 缺省 outline 是 frosted 材质面：连接层只在这一档投影 data-xh-material，面由材质家族配方给——

package/dist/css/floating-panel.css

@@ -178,7 +178,7 @@
     flex: 1 1 auto;
     overflow: hidden;
     font-size: var(--xh-floating-panel-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-floating-panel-title-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-floating-panel-title-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-tight);
     white-space: nowrap;
     text-overflow: ellipsis;

package/dist/css/form.css

@@ -17,19 +17,38 @@
     --xh-form-skin: 1;
   }
 
-  /* 表单是一列字段：竖排、字段之间留一档间距。root 就是那个原生 <form> */
+  /* 表单是一列字段，root 就是那个原生 <form>。项距不走 gap：字段带辅助行（说明，或给错误文案留的那一行）时
+     那一行就是项距，没有辅助行的项才在下方补一段项距（见下面两条）。一行流档的项距另取一档 */
   .xh-scope-form[data-part='root'] {
+    --xh-_form-item-gap: var(--xh-form-gap, var(--xh-space-5));
+
     display: flex;
     flex-direction: column;
-    gap: var(--xh-form-gap, var(--xh-stack-gap-md));
+    row-gap: 0;
     margin: 0;
   }
 
+  /* 每一项在下方留一段项距，最后一项不留。:where() 不计特指度，作者给自己的节点写外边距照样压得过 */
+  :where(.xh-scope-form[data-part='root']) > :where(:not(:last-child)) {
+    margin-block-end: var(--xh-_form-item-gap);
+  }
+
+  /* 字段带辅助行：辅助行（最小高 --xh-space-5）紧贴控件、自己就是项距，这一项不再另留；
+     说明收起、只留错误文案占位的那一行同样算。字段无效时它的直接子说明被收起（见 description.css），
+     不占那一行，不算辅助行：没渲染错误文案的无效字段照常留项距 */
+  .xh-scope-form[data-part='field-group']:has(
+    .xh-scope-field[data-part='error-text'],
+    .xh-scope-field[data-part='description']:not([hidden], .xh-scope-field[data-part='root'][data-invalid] > *)
+  ) {
+    margin-block-end: 0;
+  }
+
   /* 网格：字段排进等宽列，各列下限写 0，一段长文本不会把自己那列撑宽。
      列数由 data-columns 逐档给，换档只改 --xh-_form-cols 这一个槽 */
   .xh-scope-form[data-part='root'][data-layout='grid'] {
     display: grid;
     grid-template-columns: repeat(var(--xh-_form-cols), minmax(0, 1fr));
+    column-gap: var(--xh-form-gap, var(--xh-space-5));
 
     --xh-_form-cols: 1;
   }
@@ -41,9 +60,11 @@
 
   /* 横排一行流：字段并肩排，放不下自动折行 */
   .xh-scope-form[data-part='root'][data-layout='inline'] {
+    --xh-_form-item-gap: var(--xh-form-inline-row-gap, var(--xh-space-2));
+
     flex-flow: row wrap;
     align-items: start;
-    column-gap: var(--xh-form-inline-gap, var(--xh-space-4));
+    column-gap: var(--xh-form-inline-gap, var(--xh-space-6));
     /* 一行流里字段按内容收，没有列宽可铺：在表单根上取下此处的字段缺省宽，交给下面的字段还原 */
     --xh-_form-inline-control-w: var(--xh-control-w);
   }
@@ -178,13 +199,6 @@
     --xh-_form-span: 1 / -1;
   }
 
-  /* 出错的字段在起始缘竖一条色带：读屏之外还得有一眼看得见的定位标记。
-     用逻辑属性，RTL 下自动换到右侧 */
-  .xh-scope-form[data-part='field-group'][data-invalid] {
-    padding-inline-start: var(--xh-form-field-invalid-px, var(--xh-space-2));
-    border-inline-start: var(--xh-stroke-thick) solid var(--xh-form-field-invalid-border, var(--xh-border-invalid));
-  }
-
   /* 提交失败后的错误汇总。role=alert 常挂，靠 hidden 显隐 */
   .xh-scope-form[data-part='error-summary'] {
     display: flex;