@xihan-ui/styles 2.0.0 → 3.0.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'] {
@@ -107,7 +18,7 @@
   /* root 留在页面原地，只是 data-side / data-state 的落点，不该凭空多出一层盒子把
      trigger 从作者的 flex / grid 行里挤出去，故 display: contents。 */
   [data-scope='drawer'][data-part='root'] {
-    /* 作者塞进面板里的图标按控件档取（§6.5）；触发器与关闭钮另由家族配方按各自的档下发字形尺 */
+    /* 作者塞进面板里的图标按控件档取；触发器与关闭钮另由家族配方按各自的档下发字形尺 */
     --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-md));
 
     display: contents;
@@ -125,7 +36,7 @@
   }
 
   /*
-   * 触发器是页面上的独立文字按钮（§9.1）：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
+   * 触发器是页面上的独立文字按钮：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
    * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出（此前自写描边盒型，hover 落 200 / active 落 300）。
    * 这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射。
    */
@@ -159,7 +70,7 @@
   }
 
   /* 抽屉展开期间触发按钮压住不弹起：面板贴在视口边上，它和按钮往往离得很远，
-     按钮自己得说明"这一扇是我开的"。open 与家族 hover 同档中性（§7.2 第 8 条）：
+     按钮自己得说明"这一扇是我开的"。open 与家族 hover 同档中性：
      白底承载的 --xh-bg-subtle（100）+ 悬停描边，聚焦时这块面留着 */
   [data-scope='drawer'][data-part='trigger'][data-state='open'] {
     --xh-action-bg-rest: var(--xh-drawer-trigger-bg-open, var(--xh-bg-subtle));
@@ -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 也是同一个道理） */
@@ -259,13 +171,13 @@
       env(safe-area-inset-left),
       env(safe-area-inset-right)
     );
-    /* M4 sheet 三件套（§8.4）：任何浮层不得只靠 box-shadow 分层，亮色下面板与页面同色，
+    /* M4 sheet 三件套：任何浮层不得只靠 box-shadow 分层，亮色下面板与页面同色，
        1px 描边才是它的边界；影只是加成 */
     border: var(--xh-stroke-thin) solid var(--xh-drawer-border, var(--xh-material-elevated-border));
     background: var(--xh-drawer-bg, var(--xh-material-elevated-bg));
     color: var(--xh-drawer-fg, var(--xh-material-elevated-fg));
     box-shadow: var(--xh-drawer-shadow, var(--xh-material-elevated-shadow));
-    /* 作者不用 header / body / footer 三段时它是唯一的滚动层：模态面滚到头不把页面一起带走（§6.6） */
+    /* 作者不用 header / body / footer 三段时它是唯一的滚动层：模态面滚到头不把页面一起带走 */
     overflow: auto;
     overscroll-behavior: contain;
     /* 尺寸是照视口那条边算出来的，padding 再往外顶就会把面板挤出屏幕、
@@ -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,45 +263,44 @@
     border-start-end-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
   }
 
-  /* 展开期间面板整块推到一屏之外再推回来：只在开着的这一档挂，
-     合成层随 data-state 一起收走，收起后不再占着 */
-  [data-scope='drawer'][data-part='content'][data-state='open'] {
-    will-change: translate;
-  }
+  /* 滑入/滑出共用整幅滑入关键帧，四条边只在两个方向槽里写起点。位移取整幅位移令牌，
+     translate 的百分比参照面板自己的边框盒，所以不管 --xh-drawer-size 被改成多少，
+     "正好推到视口外"这件事都成立。
 
-  /* 滑入/滑出按边配对。入场是整面板从画外推入的大尺度位移（§9.5）：走 --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;
-  }
-
-  [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;
   }
 
   /* —— 面板三段 —— */
@@ -413,7 +325,7 @@
 
   /* 正文段：面板里唯一会滚的一段。最小高度归零，
      否则弹性项按内容撑高，容器再矮也不产生溢出，滚动条永远出不来。
-     模态 body 是原生细条滚动面（§6.6）：细条由 reset 层统一给，滚到头不把页面一起带走 */
+     模态 body 是原生细条滚动面：细条由 reset 层统一给，滚到头不把页面一起带走 */
   [data-scope='drawer'][data-part='body'] {
     flex: 1 1 auto;
     min-block-size: 0;
@@ -451,7 +363,7 @@
     color: var(--xh-drawer-title-fg, var(--xh-fg-default));
   }
 
-  /* 说明文字走说明档（§6.4）：13px + fg-muted */
+  /* 说明文字走说明档：13px + fg-muted */
   [data-scope='drawer'][data-part='description'] {
     margin: 0;
     font-size: var(--xh-drawer-description-font-size, var(--xh-text-secondary-size));
@@ -466,7 +378,7 @@
   }
 
   /*
-   * 关闭钮是面板角落的单图标钮（§9.1）：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
+   * 关闭钮是面板角落的单图标钮：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
    * 由家族配方给出——白面上走画布承载阶梯悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200），
    * 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与摆放，
    * 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面（与 dialog 一致），缺省仍是透明底与悬停字色；
@@ -506,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

@@ -20,7 +20,7 @@
     --xh-_empty-state-gap: var(--xh-stack-gap-md);
     --xh-_empty-state-py: var(--xh-section-py-md);
     --xh-_empty-state-icon-size: var(--xh-glyph-size-2xl);
-    /* 标题走 Surface / Feedback 标题档 14/600（§6.4）；sm 同档只缩图形与留白，lg 升到页面级 heading-3 */
+    /* 标题走 Surface / Feedback 标题档 14/600；sm 同档只缩图形与留白，lg 升到页面级 heading-3 */
     --xh-_empty-state-title-size: var(--xh-text-label-size);
     /* 图标区的强调色：由 data-status（状态码）或 data-tone（语气）换掉；两样都没写就退成中性 */
     --xh-_empty-state-accent: var(--xh-fg-subtle);
@@ -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] {
@@ -100,7 +97,7 @@
     --xh-field-border-hover: var(--xh-field-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-field-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-field-control-border-invalid, var(--xh-_field-variant-border-invalid));
-    /* 焦点环与家族同一支公共环，不再留逐组件的环色槽（§7.2.5 焦点边与环一律公共） */
+    /* 焦点环与家族同一支公共环，不再留逐组件的环色槽（焦点边与环一律公共） */
     --xh-field-ring-focus: var(--xh-ring-focus);
     --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-field-control-shadow, none);
@@ -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/fieldset.css

@@ -31,7 +31,7 @@
   [data-scope='fieldset'][data-part='legend'] {
     padding: 0;
     margin-block-end: var(--xh-fieldset-legend-gap, var(--xh-space-2));
-    /* 组标题是「一组字段的标题」，归集合标题角色（§6.4）：fg-muted，与组 --xh-space-2，字号字重同字段标签 */
+    /* 组标题是「一组字段的标题」，归集合标题角色：fg-muted，与组 --xh-space-2，字号字重同字段标签 */
     color: var(--xh-fieldset-legend-fg, var(--xh-fg-muted));
     font-size: var(--xh-fieldset-legend-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-fieldset-legend-font-weight, var(--xh-text-label-weight));