@xihan-ui/styles 2.1.0 → 3.0.0

package/css/editable.css

@@ -273,4 +273,23 @@
       forced-color-adjust: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='editable']:is([data-part='edit-trigger'], [data-part='submit-trigger'], [data-part='cancel-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='editable']:is([data-part='edit-trigger'], [data-part='submit-trigger'], [data-part='cancel-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='editable']:is([data-part='edit-trigger'], [data-part='submit-trigger'], [data-part='cancel-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/empty-state.css

@@ -131,12 +131,13 @@
   }
 
   /* 图标、标题、说明、动作按次序开幕，间隔由交错步长派生。
-     backwards 不能省：等待期间起帧不生效的话，后三段会先露一下再跳回去 */
-  [data-scope='empty-state'][data-part='media'],
-  [data-scope='empty-state'][data-part='indicator'],
-  [data-scope='empty-state'][data-part='title'],
-  [data-scope='empty-state'][data-part='description'],
-  [data-scope='empty-state'][data-part='action'] {
+     backwards 不能省：等待期间起帧不生效的话，后三段会先露一下再跳回去。
+     随页面首屏就在的空状态带 data-instant 直接呈现，之后每一次出现才开幕 */
+  [data-scope='empty-state'][data-part='media']:not([data-instant]),
+  [data-scope='empty-state'][data-part='indicator']:not([data-instant]),
+  [data-scope='empty-state'][data-part='title']:not([data-instant]),
+  [data-scope='empty-state'][data-part='description']:not([data-instant]),
+  [data-scope='empty-state'][data-part='action']:not([data-instant]) {
     animation: xh-rise-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
   }
 

package/css/field-array.css

@@ -7,6 +7,8 @@
 
 /* FieldArray 独立皮肤同时传递引入把手的动作控件配方；full bundle 递归去重。 */
 @import '../family/action-control.css';
+/* 行的进场与退场取共享关键帧。 */
+@import '../family/motion.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -19,6 +21,8 @@
     display: flex;
     flex-direction: column;
     gap: var(--xh-field-array-gap, var(--xh-space-2));
+    /* 删掉的行由替身绝对定位在原处播完退场，定位基准是根节点 */
+    position: relative;
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
@@ -33,6 +37,19 @@
     gap: var(--xh-field-array-item-gap, var(--xh-space-2));
     padding: var(--xh-field-array-item-padding, var(--xh-space-0));
     border-radius: var(--xh-field-array-item-radius, var(--xh-shape-surface));
+    /* 增删与上移下移带来的换位：由列表动效先反向补偿、再沿这条过渡滑到新位置 */
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 新增的行进场，同一批按到达顺序错开；首帧就在的直接呈现（自己或根节点带 data-instant） */
+  [data-scope='field-array'][data-part='item']:not([data-instant], [data-instant] > *) {
+    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));
+  }
+
+  /* 删掉的行：替身留在原处淡出，播完即移除 */
+  [data-scope='field-array'][data-part='item'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   [data-scope='field-array'][data-part='item'][hidden] {
@@ -187,4 +204,23 @@
   [data-scope='field-array'][data-part='item-action'][hidden] {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='field-array']:is([data-part='move-up-trigger'], [data-part='move-down-trigger'], [data-part='item-delete-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='field-array']:is([data-part='move-up-trigger'], [data-part='move-down-trigger'], [data-part='item-delete-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='field-array']:is([data-part='move-up-trigger'], [data-part='move-down-trigger'], [data-part='item-delete-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/field.css

@@ -53,11 +53,6 @@
     grid-column: 2;
   }
 
-  /* 横排下这一列是网格的自动流，占位块跟着控件走第二列（选择器不匹配伪元素，单列一条） */
-  [data-scope='form'][data-part='root'][data-layout='horizontal'] [data-scope='field'][data-part='root']::after {
-    grid-column: 2;
-  }
-
   [data-scope='field'][data-part='label'] {
     /* 一段不带空格的长标识（字段名、英文标识符）在窄处从词内断开：
        横排表单里标签列是一段比例宽度，这行让标签在那一列里折行，而不是从列的左边顶出去 */
@@ -71,6 +66,8 @@
     color: var(--xh-field-label-fg, var(--xh-fg-default));
     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));
+    /* 转无效或转禁用时标签换色，两档之间接一段过渡（与字段集组标题同一档） */
+    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='field'][data-part='label'][data-disabled] {
@@ -121,6 +118,8 @@
   [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));
+    /* 与标签同一档过渡：整个字段转禁用时两处一起变淡 */
+    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='field'][data-part='description'][data-disabled] {
@@ -132,27 +131,26 @@
     font-size: var(--xh-field-error-font-size, var(--xh-text-secondary-size));
   }
 
-  /* 辅助文字那一行的占位：字段渲染了错误文案、当前又没在报错时，补一个与错误文案等高的空块。
-     报错时这个空块让位给错误文案，字段的外框高度前后一样，表单不会因为一段错误文字重新排版，
-     定高或限高的父级里也不会把控件挤出去。
+  /* 辅助文字那一行的占位：字段渲染了错误文案、当前又没在报错时，收起的错误文案自己留在流里占住一行
+     （不可见、不进可及树），与报错时的错误文案等高。字段的外框高度前后一样，表单不会因为一段错误文字
+     重新排版，定高或限高的父级里也不会把控件挤出去；退场就在这一行里淡出，播完才藏起。
 
-     两个条件缺一不可：
-     渲染了 error-text 且它带 hidden——没有错误文案可显示的字段不占这一行；
-     没有在场的 description——描述已经占着这一行了，报错时由描述让位给错误文案（见 description.css）。
+     没有在场的 description 才这样占：描述已经占着这一行了，报错时由描述让位给错误文案（见 description.css），
+     收起的错误文案按公共层不占位。没渲染错误文案的字段本来就没有这一行。
 
      高度按错误文案那一档的字号乘行距算，得到的正是它一行的高度。
      不写 1lh：那个单位晚于本库声明的浏览器地板，取不到时整条声明被丢弃、占位高退回 0，
      字段又会随报错撑高一次，而这种失效不报错。
-     与前一块的距离由根的 gap 给，和错误文案顶上来时是同一段。 */
-  [data-scope='field'][data-part='root']:has(> [data-scope='field'][data-part='error-text'][hidden]):not(
-      :has(> [data-scope='field'][data-part='description']:not([hidden]))
-    )::after {
-    content: '';
+     与前一块的距离由根的 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)
     );
-    font-size: var(--xh-field-error-font-size, var(--xh-text-secondary-size));
-    line-height: var(--xh-leading-normal);
+    transition:
+      opacity var(--xh-motion-duration-exit) var(--xh-motion-ease-exit),
+      visibility 0s var(--xh-motion-duration-exit);
   }
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。

package/css/file-upload.css

@@ -5,6 +5,10 @@
 
 /* 定义 file upload 样式。 */
 
+/* 文件行的进场、退场与完成对号的淡入取共享关键帧。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='file-upload'] {
@@ -95,54 +99,34 @@
     color: var(--xh-fg-disabled);
   }
 
+  /* 「选择文件」是定尺的独立动作按钮：盒型、三档几何、悬停 100 / 按下 200 与 0.97 按压、焦点环、禁用面与
+     粗指针命中区由 Action Control 家族按 text 档 outline 给（连接层投影），不再悬停抬 raised 影。
+     这里只把使用者槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省） */
   [data-scope='file-upload'][data-part='trigger'] {
-    display: inline-flex;
+    --xh-action-bg-rest: var(--xh-file-upload-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-file-upload-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-file-upload-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-file-upload-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-file-upload-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-file-upload-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: var(--xh-file-upload-trigger-border, var(--xh-_action-variant-border-rest));
+    /* 矩阵各态无影：使用者槽仍可自行加 */
+    --xh-action-shadow-hover: var(--xh-file-upload-trigger-shadow-hover, none);
+    --xh-action-radius: var(--xh-file-upload-trigger-radius, var(--xh-shape-control));
+    --xh-action-visual-size: var(--xh-file-upload-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-file-upload-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-gap: var(--xh-file-upload-trigger-gap, var(--xh-_action-profile-gap));
+    --xh-action-font-size: var(--xh-file-upload-trigger-font-size, var(--xh-_action-profile-font-size));
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
     flex: none;
-    align-items: center;
-    justify-content: center;
-    gap: var(--xh-file-upload-trigger-gap, var(--xh-control-gap-md));
-    block-size: var(--xh-file-upload-trigger-h, var(--xh-control-h-md));
-    padding-inline: var(--xh-file-upload-trigger-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) solid var(--xh-file-upload-trigger-border, var(--xh-border-control));
-    border-radius: var(--xh-file-upload-trigger-radius, var(--xh-shape-control));
-    background: var(--xh-file-upload-trigger-bg, var(--xh-bg-surface));
-    color: var(--xh-file-upload-trigger-fg, var(--xh-fg-default));
-    /* 表单控件不继承页面字体，只给字号会让按钮用 UA 默认字族 */
-    font-family: inherit;
-    font-size: var(--xh-file-upload-trigger-font-size, var(--xh-text-body-size));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
+    font-weight: var(--xh-file-upload-trigger-font-weight, var(--xh-text-label-weight));
   }
 
   [data-scope='file-upload'][data-part='trigger'][hidden] {
     display: none;
   }
 
-  /* 悬停换底色的同时把这块面抬起一档：只换底色的回执在一颗按钮上太轻 */
-  [data-scope='file-upload'][data-part='trigger']:hover:not(:disabled) {
-    background: var(--xh-file-upload-trigger-bg-hover, var(--xh-bg-subtle-hover));
-    box-shadow: var(--xh-file-upload-trigger-shadow-hover, var(--xh-elevation-raised));
-  }
-
-  /* 按下：换到按压档底色并轻微下压，抬起的那一档同时落回，松手弹回；禁用钮不压 */
-  [data-scope='file-upload'][data-part='trigger']:not(:disabled):is(:active, [data-pressed]) {
-    background: var(--xh-file-upload-trigger-bg-active, var(--xh-bg-subtle-active));
-    box-shadow: none;
-    scale: var(--xh-motion-scale-press);
-    transition-duration: var(--xh-motion-duration-press);
-    transition-timing-function: var(--xh-motion-ease-press);
-  }
-
-  /* 单体控件走原生 disabled（与集合条目的 aria-disabled 相反），因此用 :disabled */
-  [data-scope='file-upload'][data-part='trigger']:disabled {
-    background: var(--xh-bg-subtle);
-    color: var(--xh-fg-disabled);
-  }
-
   /* 连接层已经把这一套视觉隐藏写进了内联 style，这里是给元素升级前那一瞬兜底
      （作者手写的是一个普通 file input，接线完成前它是可见的）。
      刻意不写 display：藏起来的输入仍要留在布局里，原生表单校验的气泡才有可指的锚点 */
@@ -159,8 +143,10 @@
   }
 
   /* 文件条数由用户一次选进来多少给，行数没有尽头：
-     列表到这个高度就不再长，剩下的行在列表内滚出来，投放区与触发钮不会被推出视野 */
+     列表到这个高度就不再长，剩下的行在列表内滚出来，投放区与触发钮不会被推出视野。
+     定位是给列表动效放离场替身用的：删掉的那一行在原排布位上播完退场 */
   [data-scope='file-upload'][data-part='list'] {
+    position: relative;
     display: flex;
     max-block-size: var(--xh-file-upload-list-max-h, var(--xh-viewport-h-md));
     overflow-y: auto;
@@ -192,6 +178,23 @@
     font-size: var(--xh-file-upload-item-font-size, var(--xh-text-body-size));
   }
 
+  /* 列表动效：新收下的文件进场，同一批按到达顺序错开；首帧就在的直接呈现（自己或列表带 data-instant）。
+     删掉的那一行由替身留在原处淡出，播完即移除；其余行先按旧位置反向补偿、再沿 translate 过渡滑到新位置 */
+  [data-scope='file-upload'][data-part='item'] {
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  [data-scope='file-upload'][data-part='item']:not([data-instant], [data-instant] > *) {
+    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));
+  }
+
+  /* 替身的 data-state 换成了 closed，传输状态从进度条（同一份状态事实）上读回来：
+     失败与传完那一行退场时仍带着行首标记与失败配色，文件名不会在淡出途中往行首一跳 */
+  [data-scope='file-upload'][data-part='item'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
   [data-scope='file-upload'][data-part='item'][hidden] {
     display: none;
   }
@@ -206,12 +209,14 @@
      警示与下面的勾都是固定状态标记（不是 :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='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));
     color: var(--xh-file-upload-item-fg-error, var(--xh-fg-danger));
   }
 
-  [data-scope='file-upload'][data-part='item'][data-state='error']::before {
+  [data-scope='file-upload'][data-part='item'][data-state='error']::before,
+  [data-scope='file-upload'][data-part='item'][data-state='closed']:has(> [data-part='item-progress'][data-state='error'])::before {
     content: '';
     flex: none;
     inline-size: var(--xh-file-upload-item-mark-size, var(--xh-control-indicator-size));
@@ -223,7 +228,8 @@
 
   /* 传完的那一行补一枚对勾，与失败那一枚警示字形对称：
      不标出来的话「传完了」与「还没开始」在这一行上看不出分别 */
-  [data-scope='file-upload'][data-part='item'][data-state='done']::before {
+  [data-scope='file-upload'][data-part='item'][data-state='done']::before,
+  [data-scope='file-upload'][data-part='item'][data-state='closed']:has(> [data-part='item-progress'][data-state='done'])::before {
     content: '';
     flex: none;
     inline-size: var(--xh-file-upload-item-mark-size, var(--xh-control-indicator-size));
@@ -233,30 +239,42 @@
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
 
-  /* 传输进度条：只在传输中露面，宽度按连接层写下的比例走。
-     进度是连续量，走 continuous 曲线，不是入场曲线 */
+  /* 这一会儿才传完的那一行：进度条走满之后与对号交叉——条子淡出、对号淡入。
+     已经落定的与远程附件没有进度条可播，对号直接呈现 */
+  [data-scope='file-upload'][data-part='item'][data-state='done']:has(> [data-part='item-progress']:not([hidden]))::before {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) var(--xh-motion-duration-move) backwards;
+  }
+
+  /* 传输进度条：只在传输中不透明，填充按连接层写下的比例平移到位；进度是连续量，走 continuous 曲线。
+     传完那一刻不当场收起：填充先走满（move），随后整条淡出（exit，延后一个 move），播完连接层才写 hidden。
+     没在传也没刚传完的由连接层写 hidden */
   [data-scope='file-upload'][data-part='item-progress'] {
-    display: none;
+    display: block;
     overflow: hidden;
     flex: none;
     inline-size: var(--xh-file-upload-item-progress-w, calc(var(--xh-control-h-md) * 2));
     block-size: var(--xh-file-upload-item-progress-h, var(--xh-stroke-thick));
     border-radius: var(--xh-file-upload-item-progress-radius, var(--xh-shape-pill));
     background: var(--xh-file-upload-item-progress-track, var(--xh-bg-subtle));
+    opacity: 0;
+    transition: opacity var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) var(--xh-motion-duration-move);
   }
 
   [data-scope='file-upload'][data-part='item-progress'][data-state='uploading'] {
-    display: block;
+    opacity: 1;
   }
 
-  [data-scope='file-upload'][data-part='item-progress'][data-state='uploading']::before {
+  /* 铺满轨道，往行首平移藏起未完成的那一截、由轨道裁掉：推进只走合成，不重排也不重绘。
+     translate 只认物理方向，乘书写方向的符号，RTL 下平移方向翻转 */
+  [data-scope='file-upload'][data-part='item-progress']::before {
     content: '';
     display: block;
     block-size: 100%;
     border-radius: inherit;
     background: var(--xh-file-upload-item-progress-fill, var(--xh-bg-brand));
-    inline-size: calc(var(--xh-_file-upload-progress, 0) * 100%);
-    transition: inline-size var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous);
+    inline-size: 100%;
+    translate: calc((var(--xh-_file-upload-progress, 0) - 1) * 100% * var(--xh-direction-sign)) 0;
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   [data-scope='file-upload'][data-part='item-progress'][hidden] {
@@ -320,108 +338,52 @@
     color: var(--xh-fg-disabled);
   }
 
-  /* 删除是一行里的小图标按钮：正方形、无边框，靠底色表达 hover */
+  /* 删除是一行里的小图标钮：Action Control icon 档 ghost、xs 视觉盒，悬停 100 / 按下 200 与 0.97 按压由家族给；
+     悬停与按下时字换危险色，说明这一下会删掉。钮里的叉按 xs 档的字形尺画 */
   [data-scope='file-upload'][data-part='item-delete-trigger'] {
-    display: inline-flex;
+    --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));
+    --xh-action-fg-rest: var(--xh-file-upload-delete-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-file-upload-delete-fg-hover, var(--xh-fg-danger-hover));
+    --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);
+
     flex: none;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--xh-file-upload-delete-size, var(--xh-control-action-size));
-    block-size: var(--xh-file-upload-delete-size, var(--xh-control-action-size));
-    padding: 0;
-    border: 0;
-    border-radius: var(--xh-file-upload-delete-radius, var(--xh-shape-control));
-    background: transparent;
-    color: var(--xh-file-upload-delete-fg, var(--xh-fg-muted));
-    font-family: inherit;
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
   }
 
   [data-scope='file-upload'][data-part='item-delete-trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='file-upload'][data-part='item-delete-trigger']:hover:not(:disabled) {
-    background: var(--xh-file-upload-delete-bg-hover, var(--xh-bg-subtle-hover));
-    color: var(--xh-file-upload-delete-fg-hover, var(--xh-fg-danger-hover));
-  }
-
-  /* 按下：换到按压档底色并轻微下压，松手弹回；禁用钮不压 */
-  [data-scope='file-upload'][data-part='item-delete-trigger']:not(:disabled):is(:active, [data-pressed]) {
-    background: var(--xh-file-upload-delete-bg-active, var(--xh-bg-subtle-active));
-    scale: var(--xh-motion-scale-press);
-    transition-duration: var(--xh-motion-duration-press);
-    transition-timing-function: var(--xh-motion-ease-press);
-  }
-
-  [data-scope='file-upload'][data-part='item-delete-trigger']:disabled {
-    color: var(--xh-fg-disabled);
-  }
-
-  /* 清空是收尾动作，画成不带底色的文字按钮：它比"选择文件"次要 */
+  /* 清空是收尾动作，画成不带底的文字钮：Action Control text 档 ghost、sm，比「选择文件」小一档 */
   [data-scope='file-upload'][data-part='clear-trigger'] {
-    display: inline-flex;
+    --xh-action-bg-hover: var(--xh-file-upload-clear-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-file-upload-clear-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-file-upload-clear-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-file-upload-clear-fg-hover, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-file-upload-clear-fg-hover, var(--xh-fg-default));
+    --xh-action-radius: var(--xh-file-upload-clear-radius, var(--xh-shape-control));
+    --xh-action-visual-size: var(--xh-file-upload-clear-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-file-upload-clear-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-gap: var(--xh-file-upload-clear-gap, var(--xh-_action-profile-gap));
+    --xh-action-font-size: var(--xh-file-upload-clear-font-size, var(--xh-_action-profile-font-size));
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
     flex: none;
     align-self: flex-start;
-    align-items: center;
-    justify-content: center;
-    gap: var(--xh-file-upload-clear-gap, var(--xh-control-gap-sm));
-    block-size: var(--xh-file-upload-clear-h, var(--xh-control-h-sm));
-    padding-inline: var(--xh-file-upload-clear-px, var(--xh-control-px-sm));
-    border: 0;
-    border-radius: var(--xh-file-upload-clear-radius, var(--xh-shape-control));
-    background: transparent;
-    color: var(--xh-file-upload-clear-fg, var(--xh-fg-muted));
-    font-family: inherit;
-    font-size: var(--xh-file-upload-clear-font-size, var(--xh-text-caption-size));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
   }
 
   [data-scope='file-upload'][data-part='clear-trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='file-upload'][data-part='clear-trigger']:hover:not(:disabled) {
-    background: var(--xh-file-upload-clear-bg-hover, var(--xh-bg-subtle-hover));
-    color: var(--xh-file-upload-clear-fg-hover, var(--xh-fg-default));
-  }
-
-  /* 按下：换到按压档底色并轻微下压，松手弹回；禁用钮不压 */
-  [data-scope='file-upload'][data-part='clear-trigger']:not(:disabled):is(:active, [data-pressed]) {
-    background: var(--xh-file-upload-clear-bg-active, var(--xh-bg-subtle-active));
-    scale: var(--xh-motion-scale-press);
-    transition-duration: var(--xh-motion-duration-press);
-    transition-timing-function: var(--xh-motion-ease-press);
-  }
-
-  /* 空列表时按钮照常可按（收起它会让焦点掉回 body），只把前景压淡一档 */
+  /* 空列表时按钮照常可按（收起它会让焦点掉回 body），只把前景压淡一档；三态一起压，家族的悬停规则更特定 */
   [data-scope='file-upload'][data-part='clear-trigger'][data-empty] {
-    color: var(--xh-fg-subtle);
-  }
-
-  [data-scope='file-upload'][data-part='clear-trigger']:disabled {
-    color: var(--xh-fg-disabled);
-  }
-
-  /*
-   * 高对比档：三颗钮的按压面常态靠换底表出，这一档里底色被统一换成 Canvas，按住那一下与静息塌成同一个样子；
-   * 用系统高亮反色画回来，兜底字形读 currentColor、自己跟着换
-   */
-  @media (forced-colors: active) {
-    [data-scope='file-upload'][data-part='trigger']:not(:disabled):is(:active, [data-pressed]),
-    [data-scope='file-upload'][data-part='item-delete-trigger']:not(:disabled):is(:active, [data-pressed]),
-    [data-scope='file-upload'][data-part='clear-trigger']:not(:disabled):is(:active, [data-pressed]) {
-      background: Highlight;
-      color: HighlightText;
-    }
+    --xh-action-fg-rest: var(--xh-fg-subtle);
+    --xh-action-fg-hover: var(--xh-fg-subtle);
+    --xh-action-fg-pressed: var(--xh-fg-subtle);
   }
 
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
@@ -436,4 +398,32 @@
     -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       落在 Canvas 面上的取 CanvasText；
+       禁用取 GrayText */
+    [data-scope='file-upload'][data-part='item'][data-state='error']::before,
+    [data-scope='file-upload'][data-part='item'][data-state='closed']:has(> [data-part='item-progress'][data-state='error'])::before,
+    [data-scope='file-upload'][data-part='item'][data-state='done']::before,
+    [data-scope='file-upload'][data-part='item'][data-state='closed']:has(> [data-part='item-progress'][data-state='done'])::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='file-upload']:is([data-part='item-delete-trigger'], [data-part='clear-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [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;
+    }
+
+    [data-scope='file-upload']:is([data-part='item-delete-trigger'], [data-part='clear-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }