@xihan-ui/styles 2.1.0 → 3.1.0

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