@xihan-ui/styles 2.1.0 → 3.1.0

package/css/drawer.css

@@ -9,95 +9,6 @@
 @import '../family/motion.css';
 @import '../family/action-control.css';
 
-@layer xihan.motion {
-  /* 四条边各一对滑入/滑出。位移量用 translate 的百分比，参照的是面板自己的边框盒，
-     所以不管 --xh-drawer-size 被改成多少，"正好推到视口外"这件事都成立。
-
-     位移写成两个私有槽位而不是写死 ±100%：贴边用的是逻辑 inset（inset-inline-start 等），
-     RTL 下 inline-end 落在物理左边；transform 没有逻辑等价物，若这里写死物理方向，
-     就会出现"面板贴在左边、却从右边滑进来"。槽位在 RTL 下翻符号，两者才始终同向。
-     竖排书写模式下 block 轴不再是 Y 轴，位移会退化为纵向，但贴边本身仍由逻辑 inset 保证。 */
-  @keyframes xh-drawer-in-right {
-    from {
-      translate: var(--xh-_drawer-shift-inline, 100%) 0;
-    }
-
-    to {
-      translate: 0 0;
-    }
-  }
-
-  @keyframes xh-drawer-out-right {
-    from {
-      translate: 0 0;
-    }
-
-    to {
-      translate: var(--xh-_drawer-shift-inline, 100%) 0;
-    }
-  }
-
-  @keyframes xh-drawer-in-left {
-    from {
-      translate: calc(-1 * var(--xh-_drawer-shift-inline, 100%)) 0;
-    }
-
-    to {
-      translate: 0 0;
-    }
-  }
-
-  @keyframes xh-drawer-out-left {
-    from {
-      translate: 0 0;
-    }
-
-    to {
-      translate: calc(-1 * var(--xh-_drawer-shift-inline, 100%)) 0;
-    }
-  }
-
-  @keyframes xh-drawer-in-top {
-    from {
-      translate: 0 calc(-1 * var(--xh-_drawer-shift-block, 100%));
-    }
-
-    to {
-      translate: 0 0;
-    }
-  }
-
-  @keyframes xh-drawer-out-top {
-    from {
-      translate: 0 0;
-    }
-
-    to {
-      translate: 0 calc(-1 * var(--xh-_drawer-shift-block, 100%));
-    }
-  }
-
-  @keyframes xh-drawer-in-bottom {
-    from {
-      translate: 0 var(--xh-_drawer-shift-block, 100%);
-    }
-
-    to {
-      translate: 0 0;
-    }
-  }
-
-  @keyframes xh-drawer-out-bottom {
-    from {
-      translate: 0 0;
-    }
-
-    to {
-      translate: 0 var(--xh-_drawer-shift-block, 100%);
-    }
-  }
-}
-
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='drawer'] {
@@ -209,7 +120,8 @@
     background: transparent;
   }
 
-  [data-scope='drawer'][data-part='backdrop'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，遮罩与面板都直接呈现 */
+  [data-scope='drawer'][data-part='backdrop'][data-state='open']:not([data-instant]) {
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
@@ -235,9 +147,9 @@
      不构成固定定位的包含块，两种结构下参照的都是视口，位置一致；
      contained 时上面那条把它一并换成 absolute，参照的就是作者那个容器。 */
   [data-scope='drawer'][data-part='content'] {
-    /* 位移方向的私有槽位：默认按 LTR，RTL 在下面整体翻符号 */
-    --xh-_drawer-shift-inline: 100%;
-    --xh-_drawer-shift-block: 100%;
+    /* 位移方向的私有槽位：默认按 LTR，RTL 在下面整体翻符号。幅度取整幅位移令牌，减弱动效下归零 */
+    --xh-_drawer-shift-inline: var(--xh-motion-travel);
+    --xh-_drawer-shift-block: var(--xh-motion-travel);
     /* 尺寸档只换这一个私有槽：左右放置时它是面板宽度、上下放置时是面板高度，
        两种取法都在下面「四条边」那两条规则里。声明在 content 而不是 root：
        content 会被 portal 到 body，root 上的槽位继承不过来（data-side 也是同一个道理） */
@@ -276,7 +188,7 @@
   }
 
   [data-scope='drawer'][data-part='content']:dir(rtl) {
-    --xh-_drawer-shift-inline: -100%;
+    --xh-_drawer-shift-inline: calc(-1 * var(--xh-motion-travel));
   }
 
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致。
@@ -312,7 +224,8 @@
   [data-scope='drawer'][data-part='content'][data-side='left'],
   [data-scope='drawer'][data-part='content'][data-side='right'] {
     inset-block: 0;
-    inline-size: var(--xh-drawer-size, var(--xh-_drawer-size));
+    /* 调过厚度就按连接层写进私有槽的像素走，压过 size 档与使用者槽 */
+    inline-size: var(--xh-_drawer-panel-size, var(--xh-drawer-size, var(--xh-_drawer-size)));
     /* 视口比抽屉还窄时让位，否则面板会顶出一条横向滚动条 */
     max-inline-size: 100%;
   }
@@ -334,7 +247,7 @@
   [data-scope='drawer'][data-part='content'][data-side='top'],
   [data-scope='drawer'][data-part='content'][data-side='bottom'] {
     inset-inline: 0;
-    block-size: var(--xh-drawer-size, var(--xh-_drawer-size));
+    block-size: var(--xh-_drawer-panel-size, var(--xh-drawer-size, var(--xh-_drawer-size)));
     max-block-size: 100%;
   }
 
@@ -350,39 +263,44 @@
     border-start-end-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
   }
 
-  /* 滑入/滑出按边配对。入场是整面板从画外推入的大尺度位移：走 --xh-motion-duration-slide
-     与 --xh-motion-ease-slide；退场仍走 exit 档。退场一律 forwards：presence 要等 animationend 才卸载，
-     不定住终态，面板会在最后一帧弹回原位再消失。 */
-  [data-scope='drawer'][data-part='content'][data-side='right'][data-state='open'] {
-    animation: xh-drawer-in-right var(--xh-motion-duration-slide) var(--xh-motion-ease-slide);
-  }
-
-  [data-scope='drawer'][data-part='content'][data-side='right'][data-state='closed'] {
-    animation: xh-drawer-out-right var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
-  }
+  /* 滑入/滑出共用整幅滑入关键帧，四条边只在两个方向槽里写起点。位移取整幅位移令牌，
+     translate 的百分比参照面板自己的边框盒，所以不管 --xh-drawer-size 被改成多少，
+     "正好推到视口外"这件事都成立。
 
-  [data-scope='drawer'][data-part='content'][data-side='left'][data-state='open'] {
-    animation: xh-drawer-in-left var(--xh-motion-duration-slide) var(--xh-motion-ease-slide);
+     方向槽由上面的 --xh-_drawer-shift-* 换算而不是写死物理方向：贴边用的是逻辑 inset
+     （inset-inline-start 等），RTL 下 inline-end 落在物理左边；translate 没有逻辑等价物，
+     若这里写死物理方向，就会出现"面板贴在左边、却从右边滑进来"。shift 槽在 RTL 下翻符号，
+     两者才始终同向。竖排书写模式下 block 轴不再是 Y 轴，位移会退化为纵向，但贴边本身仍由逻辑 inset 保证。 */
+  [data-scope='drawer'][data-part='content'][data-side='right'] {
+    --xh-_slide-from-x: var(--xh-_drawer-shift-inline);
   }
 
-  [data-scope='drawer'][data-part='content'][data-side='left'][data-state='closed'] {
-    animation: xh-drawer-out-left var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  [data-scope='drawer'][data-part='content'][data-side='left'] {
+    --xh-_slide-from-x: calc(-1 * var(--xh-_drawer-shift-inline));
   }
 
-  [data-scope='drawer'][data-part='content'][data-side='top'][data-state='open'] {
-    animation: xh-drawer-in-top var(--xh-motion-duration-slide) var(--xh-motion-ease-slide);
+  [data-scope='drawer'][data-part='content'][data-side='top'] {
+    --xh-_slide-from-y: calc(-1 * var(--xh-_drawer-shift-block));
   }
 
-  [data-scope='drawer'][data-part='content'][data-side='top'][data-state='closed'] {
-    animation: xh-drawer-out-top var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  [data-scope='drawer'][data-part='content'][data-side='bottom'] {
+    --xh-_slide-from-y: var(--xh-_drawer-shift-block);
   }
 
-  [data-scope='drawer'][data-part='content'][data-side='bottom'][data-state='open'] {
-    animation: xh-drawer-in-bottom var(--xh-motion-duration-slide) var(--xh-motion-ease-slide);
+  /* 入场是整面板从画外推入的大尺度位移：走 --xh-motion-duration-slide 与 --xh-motion-ease-slide；
+     退场仍走 exit 档。并列的一段淡变取淡变档：缺省起止都是不透明、看不出来，减弱动效下
+     整幅位移归零、进出场由它表达。退场一律 forwards：presence 要等 animationend 才卸载，
+     不定住终态，面板会在最后一帧弹回原位再消失。 */
+  [data-scope='drawer'][data-part='content'][data-state='open']:not([data-instant]) {
+    animation:
+      xh-slide-in var(--xh-motion-duration-slide) var(--xh-motion-ease-slide),
+      xh-slide-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
-  [data-scope='drawer'][data-part='content'][data-side='bottom'][data-state='closed'] {
-    animation: xh-drawer-out-bottom var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  [data-scope='drawer'][data-part='content'][data-state='closed'] {
+    animation:
+      xh-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards,
+      xh-slide-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   /* —— 面板三段 —— */
@@ -500,12 +418,135 @@
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
 
+  /* —— 改尺 ——
+     把手是一条透明的命中区，贴在朝向页面的那条边上，中间一段指示条标出这里能推：
+     左右放置时是竖条、上下放置时是横条。贴边用逻辑属性：right 贴的是行尾侧，把手落在行首那条边，
+     与机器按书写方向翻转推动方向同源。厚度跟手，不挂过渡 */
+  [data-scope='drawer'][data-part='content'][data-resizing] {
+    user-select: none;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'] {
+    --xh-_drawer-resize-indicator: var(--xh-drawer-resize-trigger-bg, var(--xh-border-control));
+
+    position: absolute;
+    display: block;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    touch-action: none;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger']::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    border-radius: var(--xh-drawer-resize-trigger-radius, var(--xh-shape-pill));
+    background: var(--xh-_drawer-resize-indicator);
+    pointer-events: none;
+    /* 起点是逻辑属性、平移是物理通道：行内分量乘方向符号，RTL 下指示条才落回把手正中 */
+    translate: calc(-50% * var(--xh-direction-sign)) -50%;
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger']:hover {
+    --xh-_drawer-resize-indicator: var(--xh-drawer-resize-trigger-bg-hover, var(--xh-border-control-hover));
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-resizing] {
+    --xh-_drawer-resize-indicator: var(--xh-drawer-resize-trigger-bg-active, var(--xh-bg-brand));
+  }
+
+  /* 键盘落在把手上时指示条换成焦点色：命中区贴着面板边，外扩的环会压到页面上 */
+  [data-scope='drawer'][data-part='resize-trigger']:focus-visible {
+    --xh-_drawer-resize-indicator: var(--xh-ring-focus);
+
+    outline: none;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='left'],
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='right'] {
+    inset-block: 0;
+    inline-size: var(--xh-drawer-resize-trigger-size, var(--xh-space-2));
+    cursor: ew-resize;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='right'] {
+    inset-inline-start: 0;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='left'] {
+    inset-inline-end: 0;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='top'],
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='bottom'] {
+    inset-inline: 0;
+    block-size: var(--xh-drawer-resize-trigger-size, var(--xh-space-2));
+    cursor: ns-resize;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='top'] {
+    inset-block-end: 0;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][data-side='bottom'] {
+    inset-block-start: 0;
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger']:is([data-side='left'], [data-side='right'])::after {
+    inline-size: var(--xh-drawer-resize-indicator-thickness, var(--xh-stroke-strong));
+    block-size: var(--xh-drawer-resize-indicator-length, var(--xh-space-8));
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger']:is([data-side='top'], [data-side='bottom'])::after {
+    inline-size: var(--xh-drawer-resize-indicator-length, var(--xh-space-8));
+    block-size: var(--xh-drawer-resize-indicator-thickness, var(--xh-stroke-strong));
+  }
+
+  [data-scope='drawer'][data-part='resize-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 强制色下指示条的底色会被系统色吃掉：改画成正文色，调整中与聚焦时取高亮色 */
+  @media (forced-colors: active) {
+    [data-scope='drawer'][data-part='resize-trigger']::after {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+
+    [data-scope='drawer'][data-part='resize-trigger']:is([data-resizing], :focus-visible)::after {
+      background: Highlight;
+    }
+  }
+
   @media print {
     /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
        收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
     [data-scope='drawer'][data-part='backdrop'],
-    [data-scope='drawer'][data-part='positioner'] {
+    [data-scope='drawer'][data-part='positioner'],
+    [data-scope='drawer'][data-part='resize-trigger'] {
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='drawer'][data-part='close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='drawer'][data-part='close-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='drawer'][data-part='close-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

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

@@ -18,6 +18,10 @@
     display: flex;
     flex-direction: column;
     gap: var(--xh-field-gap, var(--xh-space-1));
+    /* 字段族控件放进字段即铺满字段宽：字段的宽由表单的列给，控件跟着列走，
+       不必逐个组件在根上写 inline-size: 100%。单独摆放的控件仍是 16rem 缺省宽；
+       单类钉宽（--xh-<组件>-control-w）照旧压过这一条 */
+    --xh-control-w: 100%;
   }
 
   /* 表单横排（标签左置）：字段转两列网格，标签列宽由表单的 --xh-form-label-w 统一给，
@@ -53,11 +57,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 +70,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 +122,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 +135,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}，收起态得自己还回去。