From 0821286329b0ffddfb3e8fed51f478988ae66a17 Mon Sep 17 00:00:00 2001
From: HIsheR <shawn1440982358@163.com>
Date: Mon, 26 Oct 2026 18:33:36 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E5=BD=92=E4=BD=8D=20reduced-motion?=
 =?UTF-8?q?=20=E5=85=9C=E5=BA=95=E5=B9=B6=E6=94=B6=E6=95=9B=E5=88=86?=
 =?UTF-8?q?=E5=B1=82=E5=85=A5=E5=9C=BA=E5=BB=B6=E8=BF=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 删除被入场声明反超的 reduced-motion 块，
  modal/drawer 内容层并入末尾 !important 清单，与全库口径统一
- 内容层 delay 由 fast 档 150ms 改为
  --ua-duration-step × 3 = 60ms，与 g200 验收一致
- 补 .ua-btn-ghost:active 撤内高光，键盘/触屏按下不再露白线
- 交错入场第 8 项起锁定同一档（n+8），顺序单调不倒退
- 更正 g201 焦点环注释归因（菜单面板无 overflow，未裁切）
---
 packages/skin/ui/ui.css | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css
index afef044..3a3a2ca 100644
--- a/packages/skin/ui/ui.css
+++ b/packages/skin/ui/ui.css
@@ -56,6 +56,11 @@
   background: var(--ua-color-tint-accent-weak);
   box-shadow: none; /* 透明底上叠内高光会露出一道悬空白线 */
 }
+/* 按下态单独压掉内高光：.ua-btn:active 特异性高于 .ua-btn-ghost，
+   不补这一条时键盘 Space/Enter 与触屏按下会把内高光重新打回透明底 */
+.ua-btn-ghost:active {
+  box-shadow: none;
+}
 .ua-btn-danger {
   background: var(--ua-color-danger);
   border-color: var(--ua-color-danger);
@@ -476,8 +481,8 @@ body.ua-col-resizing {
 .ua-option:active:not(:disabled) {
   background: var(--ua-color-surface-2);
 }
-/* 弹层内的项：所在面板是滚动容器，会把外偏移焦点环裁掉，
-   与 cascader 项一致改用内嵌描边，键盘导航才真看得见焦点 */
+/* 弹层内的项：下拉面板是滚动容器会裁掉外偏移焦点环，菜单面板虽不裁切，
+   但两者的密集列表换成内嵌描边后更整齐；与 cascader 项保持同一口径 */
 .ua-option:focus-visible,
 .ua-menu-item:focus-visible {
   outline: 2px solid var(--ua-color-accent);
@@ -594,7 +599,8 @@ body.ua-col-resizing {
   margin: var(--ua-space-1) var(--ua-space-05);
   background: var(--ua-border-subtle);
 }
-/* —— 弹层子项交错入场：前 8 项逐项递增一个微步（20ms），第 9 项起不打散（长列表错峰会变成拖沓） —— */
+/* —— 弹层子项交错入场：前 7 项逐项递增一个微步（20ms），第 8 项起锁定在同一档，
+   长列表不继续打散（否则错峰累积成拖沓），也保证顺序单调、后段不会抢在前段之前出现 —— */
 .ua-select-pop.ua-open .ua-option,
 .ua-menu-pop.ua-open .ua-menu-item {
   animation: ua-fade var(--ua-duration-fast) var(--ua-ease-out) both;
@@ -611,20 +617,10 @@ body.ua-col-resizing {
 .ua-menu-pop.ua-open .ua-menu-item:nth-child(6) { animation-delay: calc(var(--ua-duration-step) * 5); }
 .ua-select-pop.ua-open .ua-option:nth-child(7),
 .ua-menu-pop.ua-open .ua-menu-item:nth-child(7) { animation-delay: calc(var(--ua-duration-step) * 6); }
-.ua-select-pop.ua-open .ua-option:nth-child(8),
-.ua-menu-pop.ua-open .ua-menu-item:nth-child(8) { animation-delay: calc(var(--ua-duration-step) * 7); }
-/* 减少动效偏好：新增的分层入场与交错一律关掉，并把 delay 清零（否则内容会先隐身一段时间） */
-@media (prefers-reduced-motion: reduce) {
-  .ua-modal-overlay.ua-open .ua-modal-body,
-  .ua-modal-overlay.ua-open .ua-modal-foot,
-  .ua-drawer-overlay.ua-open .ua-drawer-body,
-  .ua-drawer-overlay.ua-open .ua-drawer-foot,
-  .ua-select-pop.ua-open .ua-option,
-  .ua-menu-pop.ua-open .ua-menu-item {
-    animation: none;
-    animation-delay: 0s;
-  }
-}
+.ua-select-pop.ua-open .ua-option:nth-child(n+8),
+.ua-menu-pop.ua-open .ua-menu-item:nth-child(n+8) { animation-delay: calc(var(--ua-duration-step) * 7); }
+/* 减少动效偏好的兜底统一在文件末尾的 prefers-reduced-motion 清单里（那里带 !important，
+   才不会因源码序在后被入场声明覆盖） */
 
 /* —— 面包屑 —— */
 .ua-breadcrumb {
@@ -1979,13 +1975,13 @@ button.ua-step-dot:hover {
 .ua-modal-body {
   padding: var(--ua-space-4);
 }
-/* —— 浮层分层入场：面板先落位，内容层错峰跟随；delay 走 fast 档（≈60ms）近似，不新增时长令牌 —— */
+/* —— 浮层分层入场：面板先落位，内容层错峰跟随；delay 走微步令牌 3 档（20ms × 3 = 60ms），不新增时长令牌 —— */
 .ua-modal-overlay.ua-open .ua-modal-body,
 .ua-modal-overlay.ua-open .ua-modal-foot,
 .ua-drawer-overlay.ua-open .ua-drawer-body,
 .ua-drawer-overlay.ua-open .ua-drawer-foot {
   animation: ua-fade var(--ua-duration-base) var(--ua-ease-out) both;
-  animation-delay: var(--ua-duration-fast);
+  animation-delay: calc(var(--ua-duration-step) * 3);
 }
 .ua-textarea:focus-visible {
   outline: none;
@@ -2104,8 +2100,12 @@ button.ua-step-dot:hover {
   .ua-form-error,
   .ua-modal,
   .ua-modal-overlay,
+  .ua-modal-body,
+  .ua-modal-foot,
   .ua-drawer,
   .ua-drawer-overlay,
+  .ua-drawer-body,
+  .ua-drawer-foot,
   .ua-step-dot,
   .ua-rate-star {
     animation: none !important;