iter(g214): 浮层入场动效收敛为统一 keyframes

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-26T11:52:57.122Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-26T11:54:31.013Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -50,10 +50,12 @@
 
 ## @ui-arch/ui（skin-dom）v0.1.0
 
-28 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。
+70 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。
 
 阴影对照表：下拉弹层=shadow-2 / 浮层与悬浮按钮=shadow-3 / 模态弹窗与抽屉及通知=shadow-4 / 卡片与输入组轻浮起=shadow-1；主按钮与强调件的主题色投影=shadow-accent / shadow-accent-strong，组件内不得再手写 box-shadow 字面值。
 
+浮层入场统一：新弹层用 animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both（自上而下 4px 淡入），弹层翻到触发器上方时叠 .is-flip 覆盖成 ua-pop-rise（自下而上），不要再为单个组件自造 keyframes——方向与时长各写一份就会出现「翻转后还朝下入场」的错位。
+
 ### image — 图片 Image
 
 参数：

packages/skin/ui/ua.manifest.json

@@ -138,7 +138,7 @@
     "无障碍基线：装饰性占位（skeleton）aria-hidden、加载指示（spinner）role=status、关闭按钮必须 aria-label、弹层弹窗 aria-haspopup/expanded、读屏可见的状态一律同步 aria-*"
   ],
   "docs": {
-    "intro": "28 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。\n\n阴影对照表：下拉弹层=shadow-2 / 浮层与悬浮按钮=shadow-3 / 模态弹窗与抽屉及通知=shadow-4 / 卡片与输入组轻浮起=shadow-1；主按钮与强调件的主题色投影=shadow-accent / shadow-accent-strong，组件内不得再手写 box-shadow 字面值。",
+    "intro": "70 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。\n\n阴影对照表：下拉弹层=shadow-2 / 浮层与悬浮按钮=shadow-3 / 模态弹窗与抽屉及通知=shadow-4 / 卡片与输入组轻浮起=shadow-1；主按钮与强调件的主题色投影=shadow-accent / shadow-accent-strong，组件内不得再手写 box-shadow 字面值。\n\n浮层入场统一：新弹层用 animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both（自上而下 4px 淡入），弹层翻到触发器上方时叠 .is-flip 覆盖成 ua-pop-rise（自下而上），不要再为单个组件自造 keyframes——方向与时长各写一份就会出现「翻转后还朝下入场」的错位。",
     "steps": [
       "安装依赖：pnpm add @ui-arch/ui @ui-arch/frame（workspace 内自动链接）",
       "引入样式：在应用入口 import '@ui-arch/ui/ui.css'，暗色主题在根元素设 data-theme='dark'",

packages/skin/ui/ui.css

@@ -1956,6 +1956,15 @@ button.ua-step-dot:hover {
     opacity: 0;
   }
 }
+/* 浮层入场：自上而下 4px 淡入（触发在下方、弹层向下展开）；翻转态改用 ua-pop-rise 反向 */
+@keyframes ua-pop-drop {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes ua-pop-rise {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: none; }
+}
 @keyframes ua-pop-in {
   from {
     opacity: 0;
@@ -3188,7 +3197,7 @@ button.ua-step-dot:hover {
 }
 .ua-cascader-pop.ua-open {
   display: block;
-  animation: ua-cascader-in var(--ua-duration-fast) ease both;
+  animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
 }
 .ua-cascader-pop.is-flip {
   margin-top: 0;
@@ -3248,10 +3257,6 @@ button.ua-step-dot:hover {
   color: var(--ua-color-text-muted);
   font-size: var(--ua-font-size-xs);
 }
-@keyframes ua-cascader-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
 @media (prefers-reduced-motion: reduce) {
   .ua-cascader-pop.ua-open { animation: none; }
   .ua-cascader-trigger,
@@ -3348,7 +3353,7 @@ button.ua-step-dot:hover {
 }
 .ua-autocomplete-pop.ua-open {
   display: block;
-  animation: ua-ac-in var(--ua-duration-fast) ease both;
+  animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
 }
 .ua-autocomplete-pop.is-flip {
   margin-top: 0;
@@ -3387,10 +3392,6 @@ button.ua-step-dot:hover {
   font-size: var(--ua-font-size-sm);
   color: var(--ua-color-text-muted);
 }
-@keyframes ua-ac-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
 @media (prefers-reduced-motion: reduce) {
   .ua-autocomplete-pop.ua-open { animation: none; }
   .ua-autocomplete-input,
@@ -3449,7 +3450,7 @@ button.ua-step-dot:hover {
 }
 .ua-datepicker-pop.ua-open {
   display: block;
-  animation: ua-dp-in var(--ua-duration-fast) ease both;
+  animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
 }
 .ua-datepicker-pop.is-flip {
   margin-top: 0;
@@ -3564,10 +3565,6 @@ button.ua-step-dot:hover {
   border-color: var(--ua-color-accent);
   background: var(--ua-color-tint-accent-weak);
 }
-@keyframes ua-dp-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
 @media (prefers-reduced-motion: reduce) {
   .ua-datepicker-pop.ua-open { animation: none; }
   .ua-datepicker-trigger,
@@ -3693,7 +3690,7 @@ button.ua-step-dot:hover {
 }
 .ua-colorpicker-pop.ua-open {
   display: block;
-  animation: ua-cp-in var(--ua-duration-fast) ease both;
+  animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
 }
 .ua-colorpicker-pop.is-flip {
   margin-top: 0;
@@ -3747,10 +3744,6 @@ button.ua-step-dot:hover {
 .ua-colorpicker-hex:focus {
   border-color: var(--ua-color-accent);
 }
-@keyframes ua-cp-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
 @media (prefers-reduced-motion: reduce) {
   .ua-colorpicker-pop.ua-open { animation: none; }
   .ua-colorpicker-trigger,
@@ -3962,7 +3955,7 @@ button.ua-step-dot:hover {
 }
 .ua-multiselect-pop.ua-open {
   display: block;
-  animation: ua-ms-in var(--ua-duration-fast) ease both;
+  animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
 }
 .ua-multiselect-pop.is-flip {
   margin-top: 0;
@@ -4017,10 +4010,6 @@ button.ua-step-dot:hover {
   font-size: var(--ua-font-size-sm);
   color: var(--ua-color-text-muted);
 }
-@keyframes ua-ms-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
 @media (prefers-reduced-motion: reduce) {
   .ua-multiselect-pop.ua-open { animation: none; }
   .ua-multiselect-box,
@@ -4565,7 +4554,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
 }
 .ua-mentions.is-open .ua-mentions-pop {
   display: block;
-  animation: ua-mentions-in var(--ua-duration-fast) var(--ua-ease);
+  animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
 }
 .ua-mentions-item {
   display: flex;
@@ -4586,10 +4575,6 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
   color: var(--ua-color-text-muted);
   font-size: var(--ua-font-size-sm);
 }
-@keyframes ua-mentions-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: none; }
-}
 @media (prefers-reduced-motion: reduce) {
   .ua-mentions.is-open .ua-mentions-pop {
     animation: none;
@@ -4664,11 +4649,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
 }
 .ua-treeselect.is-open .ua-treeselect-pop {
   display: block;
-  animation: ua-treeselect-in var(--ua-duration-fast) var(--ua-ease);
+  animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
-}
-@keyframes ua-treeselect-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: none; }
 }
 @media (prefers-reduced-motion: reduce) {
   .ua-treeselect.is-open .ua-treeselect-pop {
@@ -5146,3 +5127,20 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
     transform: none;
   }
 }
+
+/* ---- 浮层入场方向：翻转态的动画名覆盖（放在末尾，靠特异性 ua-open + is-flip 生效） ---- */
+.ua-cascader-pop.ua-open.is-flip {
+  animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */
+}
+.ua-autocomplete-pop.ua-open.is-flip {
+  animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */
+}
+.ua-datepicker-pop.ua-open.is-flip {
+  animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */
+}
+.ua-colorpicker-pop.ua-open.is-flip {
+  animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */
+}
+.ua-multiselect-pop.ua-open.is-flip {
+  animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */
+}