@xihan-ui/styles 3.1.0 → 4.0.0

package/css/editable.css

@@ -26,9 +26,6 @@
     --xh-_editable-font-size: var(--xh-control-font-md);
     --xh-_editable-control-gap: 0;
 
-    /* 盒内那道分隔线的长度：取钮高的一半，线的上下各留一截空白，不与钮等高 */
-    --xh-_editable-divider-h: 50%;
-
     display: inline-flex;
     flex-direction: column;
     gap: var(--xh-editable-gap, var(--xh-space-1));
@@ -61,7 +58,9 @@
   }
 
   [data-scope='editable'][data-part='label'] {
-    color: var(--xh-editable-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-editable-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-editable-label-gap, var(--xh-space-2)) - var(--xh-editable-gap, var(--xh-space-1)));
+    color: var(--xh-editable-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-editable-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-editable-label-font-weight, var(--xh-text-label-weight));
     /* 点标题会把人送进编辑态（预览态下 for 指着的输入框是收起的，点了没反应），
@@ -70,7 +69,7 @@
   }
 
   [data-scope='editable'][data-part='label'][data-disabled] {
-    color: var(--xh-editable-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-editable-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 预览区只是 control 里的内容段，不再自成一只带圆角的盒子。 */
@@ -165,8 +164,6 @@
     --xh-field-border-focus: var(--xh-editable-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-editable-control-border-invalid, var(--xh-_field-variant-border-invalid));
     --xh-field-border-disabled: var(--xh-editable-control-border-disabled, var(--xh-_field-variant-border-disabled));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-editable-control-shadow, none);
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
     --xh-field-glyph-size: var(--xh-editable-icon-size, var(--xh-_field-size-glyph-size));
@@ -179,9 +176,10 @@
     display: none;
   }
 
-  /* 三颗动作与 NumberField 的加减钮一样是 control 内部的分段：正方视觉盒、inset 圆角、
-     悬停 100 / 按下 200 与 0.97 按压、粗指针热区、:focus-visible 关环与禁用面全由 Action Control 的
-     field-inset ghost 档给，组件只映射既有覆盖槽。常态只剩符号，悬停与按下才浮出底色 */
+  /* 三颗动作是 control 内部的分段：inset 圆角、按承载面取的悬停 / 按下阶梯、粗指针热区、
+     :focus-visible 关环与禁用面全由 Action Control 的 field-inset ghost 档给，组件只映射既有覆盖槽。
+     视觉盒按字段内钮尺寸表随字段档（sm 取控件内动作档、md 取 control-h-sm、lg 取 control-h-md），
+     由 field-inset 档按 data-xh-action-size 给；常态只剩符号、取次要前景，悬停与按下才浮出底色 */
   [data-scope='editable'][data-part='edit-trigger'],
   [data-scope='editable'][data-part='submit-trigger'],
   [data-scope='editable'][data-part='cancel-trigger'] {
@@ -193,7 +191,7 @@
     --xh-action-bg-hover: var(--xh-editable-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
     --xh-action-bg-pressed: var(--xh-editable-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
     --xh-action-bg-disabled: var(--xh-editable-trigger-bg-disabled, var(--xh-_action-variant-bg-disabled));
-    --xh-action-fg-rest: var(--xh-editable-trigger-fg, var(--xh-fg-default));
+    --xh-action-fg-rest: var(--xh-editable-trigger-fg, var(--xh-fg-muted));
     --xh-action-fg-hover: var(--xh-editable-trigger-fg-hover, var(--xh-fg-default));
     --xh-action-border-rest: transparent;
     --xh-action-highlight-rest: transparent;
@@ -213,6 +211,12 @@
     margin-inline-start: auto;
   }
 
+  /* 确认与取消两颗挨着：紧凑 sm 档钮只有 20px，两钮中心距凑不够 24px 就落不进 SC 2.5.8 的间距例外，
+     两颗之间隔一格 --xh-space-1；其余档钮不低于 24px，这一格只把两块悬停面分开 */
+  [data-scope='editable'][data-part='cancel-trigger'] {
+    margin-inline-start: var(--xh-space-1);
+  }
+
   /* 三颗动作默认是纯图标按钮；作者放了自己的图标后 :empty 不命中，不会叠两层。 */
   [data-scope='editable']:is([data-part='edit-trigger'], [data-part='submit-trigger'], [data-part='cancel-trigger']):empty::before {
     content: '';
@@ -236,27 +240,6 @@
     --xh-_editable-trigger-glyph: var(--xh-glyph-mark-close);
   }
 
-  /* 动作组第一颗与内容段之间只有一道短分隔线；确认与取消之间不再拼第二个按钮框。
-     线不画在钮的边框上：边框会跟着钮的圆角与悬停底走，而这道线要独立于钮的各态，长度也短于钮自己。
-     ::before 已被兜底字形占着，::after 在粗指针下是家族给的 44px 热区，几何只能落在
-     background-image 上：一条 1px × 半高的渐变贴在逻辑起始侧，底色换态时它仍叠在上层。
-     background-position 是物理轴，RTL 另给一条换边 */
-  [data-scope='editable'][data-part='edit-trigger'],
-  [data-scope='editable'][data-part='submit-trigger'] {
-    background-image: linear-gradient(
-      var(--xh-editable-trigger-divider, var(--xh-material-soft-separator)),
-      var(--xh-editable-trigger-divider, var(--xh-material-soft-separator))
-    );
-    background-repeat: no-repeat;
-    background-position: 0 50%;
-    background-size: var(--xh-stroke-thin) var(--xh-editable-trigger-divider-h, var(--xh-_editable-divider-h));
-  }
-
-  [dir='rtl'] [data-scope='editable'][data-part='edit-trigger'],
-  [dir='rtl'] [data-scope='editable'][data-part='submit-trigger'] {
-    background-position: 100% 50%;
-  }
-
   /* 三颗按钮按形态轮流收起，连接层给的是 hidden 属性；
      家族那条 display 已把 UA 规则盖掉，少了这里三条按钮就一直杵着 */
   [data-scope='editable'][data-part='edit-trigger'][hidden],
@@ -265,15 +248,6 @@
     display: none;
   }
 
-  /* 高对比档整层丢弃 background-image，分隔线改用系统色重画，并关掉这两颗钮的强制换色 */
-  @media (forced-colors: active) {
-    [data-scope='editable'][data-part='edit-trigger'],
-    [data-scope='editable'][data-part='submit-trigger'] {
-      background-image: linear-gradient(ButtonText, ButtonText);
-      forced-color-adjust: none;
-    }
-  }
-
   @media (forced-colors: active) {
     /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
        字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：

package/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 给 */
+  [data-scope='empty-state'][data-part='root'][data-tone] [data-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，图形与它们、它们与动作之间才是整档间距 */
+  [data-scope='empty-state'][data-part='title'] + [data-scope='empty-state'][data-part='description'] {
+    margin-block-start: calc(var(--xh-space-1) - var(--xh-empty-state-gap, var(--xh-_empty-state-gap)));
   }
 
   [data-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/css/field-array.css

@@ -42,7 +42,7 @@
   }
 
   /* 新增的行进场，同一批按到达顺序错开；首帧就在的直接呈现（自己或根节点带 data-instant） */
-  [data-scope='field-array'][data-part='item']:not([data-instant], [data-instant] > *) {
+  [data-scope='field-array'][data-part='item']:not([data-instant], [data-instant] > :where([data-scope='field-array'])) {
     animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
     animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
   }
@@ -72,8 +72,11 @@
   }
 
   /* 行里放什么控件归作者，这里只给它一条能撑开也能收窄的轨道。
-     min-inline-size 归零：不写的话里面的输入框按 UA 默认宽度顶住，长内容会把整行撑破 */
+     min-inline-size 归零：不写的话里面的输入框按 UA 默认宽度顶住，长内容会把整行撑破。
+     字段族控件放进来铺满这条轨道，与放进 Field 时一样；并排几个就平分，各自的压缩底线照旧 */
   [data-scope='field-array'][data-part='item-content'] {
+    --xh-control-w: 100%;
+
     display: flex;
     flex: 1 1 auto;
     align-items: center;

package/css/field.css

@@ -17,7 +17,8 @@
   [data-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 @@
      整表据此对齐；描述与错误文案跟着控件走第二列 */
   [data-scope='form'][data-part='root'][data-layout='horizontal'] [data-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 @@
   }
 
   [data-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 公共层；这里只把颜色接到本组件的覆盖槽上 */
-  [data-scope='field'][data-part='label'][data-required]::after {
+  /* 必填星号的字形、字号、间距与默认色在 label.css 公共层；这里只把颜色接到本组件的覆盖槽上 */
+  [data-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 公共层；
      这里只把字色与字号接到本组件的覆盖槽上 */
   [data-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 @@
 
   [data-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 给，和错误文案顶上来时是同一段；横排表单里它与别的子块一样落在控件那一列。 */
   [data-scope='field'][data-part='root']:not(:has(> [data-scope='field'][data-part='description']:not([hidden])))
     > [data-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/css/fieldset.css

@@ -13,28 +13,48 @@
 
   /* 抹掉 UA 给 <fieldset> 的边框、内外边距与 min-content 下限，间距全部改由令牌给。
      display 落在 fieldset 的匿名内容盒上：首个 <legend> 不在这个盒子里，
-     所以 gap 只作用于组内各块，legend 与内容之间的留白由 legend 自己的下外边距给。 */
+     legend 与内容之间的留白由 legend 自己的下外边距给。
+     组内项距与 Form 同一套，不走 gap：字段带辅助行（说明，或给错误文案留的那一行）时那一行就是项距，
+     没有辅助行的块才在下方补一段项距（见下面两条） */
   [data-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([data-scope='fieldset'][data-part='root']) > :where(:not(:last-child)) {
+    margin-block-end: var(--xh-_fieldset-item-gap);
+  }
+
+  /* 字段或并排的一段里有字段带辅助行：辅助行（最小高 --xh-space-5）紧贴控件、自己就是项距，不再另留；
+     只留错误文案占位的那一行同样算，无效时被收起的说明不算（判据与 Form 的项同一条） */
+  [data-scope='fieldset'][data-part='root'] > :is([data-scope='field'][data-part='root'], [data-scope='fieldset'][data-part='field-group']):has(
+    [data-scope='field'][data-part='error-text'],
+    [data-scope='field'][data-part='description']:not([hidden], [data-scope='field'][data-part='root'][data-invalid] > *)
+  ) {
+    margin-block-end: 0;
+  }
+
   [data-scope='fieldset'][data-part='root'][hidden] {
     display: none;
   }
 
   [data-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，按各自的禁用面画。
      选择器权重高于上一条且排在后面，禁用与无效同时为真时以禁用为准。 */
   [data-scope='fieldset'][data-part='root'] > [data-scope='fieldset'][data-part='legend'][data-disabled] {
     color: var(--xh-fieldset-legend-fg-disabled, var(--xh-fg-subtle));
   }
 
-  /* 必填星号的字形、间距与默认色在 label.css 公共层；这里只把颜色接到本组件的覆盖槽上 */
-  [data-scope='fieldset'][data-part='legend'][data-required]::after {
+  /* 必填星号的字形、字号、间距与默认色在 label.css 公共层；这里只把颜色接到本组件的覆盖槽上 */
+  [data-scope='fieldset'][data-part='legend'][data-required]::before {
     color: var(--xh-fieldset-legend-star, var(--xh-fg-danger));
   }
 
   /* 说明与错误文案的角色（外边距、行距、默认字号与字色）在 description.css 公共层；
      这里只把字色与字号接到本组件的覆盖槽上 */
   [data-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 @@
 
   [data-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/css/file-upload.css

@@ -16,7 +16,7 @@
   }
 
   [data-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 @@
   }
 
   [data-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));
   }
 
   [data-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 */
   [data-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 的描边在这个面积上几乎读不出来 */
   [data-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)));
   }
 
-  /* 悬停在上方：整块换成品牌色描边加浅底，比只换边框显眼得多 */
+  /* 拖着文件悬在上方：描边换品牌色、底升一档，比只换边框显眼得多。
+     底仍是中性淡底：品牌淡底专属选中 / 当前，拖入不是选中 */
   [data-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));
   }
 
   [data-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));
   }
 
   [data-scope='file-upload'][data-part='list'][hidden] {
@@ -159,21 +163,24 @@
   }
 
   /* 私有槽一个：传输进度的 0..1 比例，由连接层写进进度条的内联样式，
-     这里给个 0 的缺省——没接上传器时进度条根本不露面，也就没有宽度可算。 */
+     这里给个 0 的缺省——没接上传器时进度条根本不露面，也就没有宽度可算。
+     文件行是一条无描边的淡底行（描边位留着、透明）；行里的删除钮坐在淡底上，承载阶梯按淡底取（200 → 300） */
   [data-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));
   }
@@ -184,7 +191,7 @@
     transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
-  [data-scope='file-upload'][data-part='item']:not([data-instant], [data-instant] > *) {
+  [data-scope='file-upload'][data-part='item']:not([data-instant], [data-instant] > :where([data-scope='file-upload'])) {
     animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
     animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
   }
@@ -204,14 +211,23 @@
   }
 
   /* 上传失败的那一行必须一眼认出来：不标出来的话它跟传完的行渲染完全一致，
-     用户不知道该按哪一条的重试。红边之外再补一枚警示字形——只靠颜色的话，
-     色觉障碍用户与灰度打印下这一档等于没有。
+     用户不知道该按哪一条的重试。文件名标红之外再补一枚警示字形——只靠颜色的话，
+     色觉障碍用户与灰度打印下这一档等于没有。行底换回承载面：危险色字压在淡底（暗色下连字段淡底）上到不了 4.5:1，
+     描边位仍透明。行里的删除钮跟着换回白底承载阶梯（100 → 200）：留在淡底阶梯上，悬停就一步跳到 200。
      警示与下面的勾都是固定状态标记（不是 :empty 兜底，作者塞进条目的部件顶不掉）：按指示符档取尺
      （comfortable 16 / compact 14，随密度换档），不读只管作者图标的 --xh-icon-size——随文 1em 落在
      14 上下，comfortable 下比同一行里的指示符档小一圈、compact 下又不换档 */
   [data-scope='file-upload'][data-part='item'][data-state='error'],
   [data-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));
+  }
+
+  [data-scope='file-upload'][data-part='item'][data-state='error'] > [data-part='item-name']:where([data-scope='file-upload']),
+  [data-scope='file-upload'][data-part='item'][data-state='closed']:has(> [data-part='item-progress'][data-state='error']) > [data-part='item-name']:where([data-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 的品牌色图标位、不带底，作者往里塞图标或真缩略图（要大图把尺寸槽调大），
+     尺寸由这里定死，一行行的图标才对得齐；放进来的图标与空着时画的那枚文件字形同一把尺 */
   [data-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;
   }
 
+  [data-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;
+  }
+
   [data-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），不抢文件名 */
   [data-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;
     }
 
+    [data-scope='file-upload'][data-part='item-preview']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
     [data-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;
     }