@xihan-ui/styles 2.0.0 → 3.0.0

package/css/accordion.css

@@ -17,7 +17,7 @@
   }
 
   [data-scope='accordion'][data-part='root'] {
-    /* 作者塞进正文里的图标与皮肤画的兜底字形同一把尺：md 档（§6.5），标题栏上另按家族档取值 */
+    /* 作者塞进正文里的图标与皮肤画的兜底字形同一把尺：md 档，标题栏上另按家族档取值 */
     --xh-icon-size: var(--xh-accordion-icon-size, var(--xh-glyph-size-md));
 
     /* 尺寸档只换正文这两个私有槽，正文从 root 继承它们；标题栏的三档几何由家族 disclosure-trigger 档给 */
@@ -102,7 +102,7 @@
     border-inline-start: 0;
   }
 
-  /* outline：一张静态内容面，--xh-border-default 描边 + surface 底 + 无影（§5.3 边界只由描边承担）；
+  /* outline：一张静态内容面，--xh-border-default 描边 + surface 底 + 无影（边界只由描边承担）；
      根的外边走 --xh-accordion-border，与条与条之间的分隔线槽 --xh-accordion-item-border 各管各的 */
   [data-scope='accordion'][data-part='root'][data-variant='outline'] {
     border: var(--xh-stroke-thin) solid var(--xh-accordion-border, var(--xh-border-default));
@@ -113,7 +113,7 @@
   }
 
   /* subtle：同一块连续表面，底换成淡底，描边让位给底色但留住 1px 边位（三档几何一致）；
-     淡底承载面向标题栏下发 hover 200 → pressed 300（§7.2） */
+     淡底承载面向标题栏下发 hover 200 → pressed 300 */
   [data-scope='accordion'][data-part='root'][data-variant='subtle'] {
     --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
     --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
@@ -142,7 +142,7 @@
   }
 
   /* 标题栏铺满一行，盒型、三档几何、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给
-     （ghost 形态：白底承载 hover 100 → pressed 200，淡底容器由根下发 host 槽；按下只换面不缩放，§9.2）；
+     （ghost 形态：白底承载 hover 100 → pressed 200，淡底容器由根下发 host 槽；按下只换面不缩放）；
      这里只把使用者槽映射到桥接槽：字色三态同值（家族的 hover / pressed 字色规则比皮肤更特定，不映射会被换回
      缺省字色），字形按标题栏自己的档位取 --xh-_action-profile-glyph-size；边归零贴住条目，几何与迁移前一致 */
   [data-scope='accordion'][data-part='trigger'] {
@@ -164,7 +164,7 @@
   }
 
   /* 展开态自带一个槽：与常态共用一个的话，作者一改常态字色，
-     展开那一档的语气高亮就跟着被抹平，再也分不开。悬停 / 按下的面与收起态同档（§7.3 open 与家族 hover 同档中性） */
+     展开那一档的语气高亮就跟着被抹平，再也分不开。悬停 / 按下的面与收起态同档（open 与家族 hover 同档中性） */
   [data-scope='accordion'][data-part='trigger'][data-state='open'] {
     --xh-action-fg-rest: var(--xh-accordion-trigger-fg-open, var(--xh-_accordion-open-fg));
     --xh-action-fg-hover: var(--xh-accordion-trigger-fg-open, var(--xh-_accordion-open-fg));
@@ -184,8 +184,12 @@
     flex: none;
     color: var(--xh-accordion-indicator-fg, var(--xh-fg-muted));
     line-height: var(--xh-leading-none);
-    /* 指示器与正文同档转向（§9.4）：正文 enter 档展开，箭头也用同一段时长翻过去 */
-    transition: rotate var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 指示器与正文同档转向：收起时取 collapse 档，展开时（下面的打开态）取 expand 档。
+     首帧就在的朝向直接呈现（data-instant），第一次开合起才转 */
+  [data-scope='accordion'][data-part='indicator']:not([data-instant]) {
+    transition: rotate var(--xh-motion-duration-collapse) var(--xh-motion-ease-enter-strong);
   }
 
   /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
@@ -204,6 +208,10 @@
     rotate: 180deg;
   }
 
+  [data-scope='accordion'][data-part='indicator'][data-state='open']:not([data-instant]) {
+    transition: rotate var(--xh-motion-duration-expand) var(--xh-motion-ease-enter-strong);
+  }
+
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }：补了动画一帧都播不出来。
      收起由适配器在退场结束后写内联 display 落成，退场窗口内靠 connect 发的 inert 挡住焦点 */
   [data-scope='accordion'][data-part='content'] {
@@ -221,14 +229,32 @@
     line-height: var(--xh-leading-normal);
   }
 
-  /* 展开那一档才提前备好行高这条通道：属性随 data-state 一起消失，收起后不长期占着 */
-  [data-scope='accordion'][data-part='content'][data-state='open'] {
-    will-change: grid-template-rows;
-    animation: xh-disclosure-expand var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  /* 展开与收起只在开合时播：首帧就在的展开 / 收起直接呈现（data-instant） */
+  [data-scope='accordion'][data-part='content'][data-state='open']:not([data-instant]) {
+    animation: xh-disclosure-expand var(--xh-motion-duration-expand) var(--xh-motion-ease-enter-strong);
+  }
+
+  [data-scope='accordion'][data-part='content'][data-state='closed']:not([data-instant]) {
+    animation: xh-disclosure-collapse var(--xh-motion-duration-collapse) var(--xh-motion-ease-exit) forwards;
   }
 
-  [data-scope='accordion'][data-part='content'][data-state='closed'] {
-    animation: xh-disclosure-collapse var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='accordion'][data-part='indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='accordion'][data-part='trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]) [data-scope='accordion'][data-part='indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='accordion'][data-part='trigger'][data-disabled] [data-scope='accordion'][data-part='indicator']:empty::before {
+      background-color: GrayText;
+    }
   }
 }
 

package/css/alert.css

@@ -7,6 +7,23 @@
 
 /* Alert 独立皮肤同时传递引入关闭钮的动作控件配方；full bundle 递归去重。 */
 @import '../family/action-control.css';
+/* 淡出的关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
+@layer xihan.motion {
+  /* 关闭时收起占位：从连接层量下的整块高度收到 0，内缩与描边一起收掉 */
+  @keyframes xh-alert-collapse {
+    from {
+      block-size: var(--xh-_alert-exit-block-size);
+    }
+
+    to {
+      block-size: 0;
+      padding-block: 0;
+      border-block-width: 0;
+    }
+  }
+}
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -14,15 +31,16 @@
     --xh-alert-skin: 1;
   }
 
-  /* 提示本体是一层中性 surface：边界由 --xh-border-default 描边承担、无影（§5.3 静态反馈面），
+  /* 提示本体是一层中性 surface：边界由 --xh-border-default 描边承担、无影（静态反馈面），
      语气只落到图标与标题，不会用整块彩底抢走正文层级。 */
   [data-scope='alert'][data-part='root'] {
-    /* 作者塞进指示符槽的图标与皮肤画的兜底字形同一把尺：Feedback 指示符统一 md 档（§6.5） */
+    /* 作者塞进指示符槽的图标与皮肤画的兜底字形同一把尺：Feedback 指示符统一 md 档 */
     --xh-icon-size: var(--xh-alert-icon-size, var(--xh-glyph-size-md));
 
     display: flex;
     align-items: flex-start;
-    gap: var(--xh-alert-gap, var(--xh-space-4));
+    /* 指示符盒自带 --xh-space-1 内衬：与间距合起来，字形到正文 12px，与 Notification 同一个距离 */
+    gap: var(--xh-alert-gap, var(--xh-space-2));
     padding-block: var(--xh-alert-py, var(--xh-surface-py-sm));
     padding-inline: var(--xh-alert-px, var(--xh-surface-px-sm));
     border: var(--xh-stroke-thin) solid var(--xh-alert-border, var(--xh-border-default));
@@ -34,6 +52,27 @@
     line-height: var(--xh-alert-leading, var(--xh-leading-normal));
   }
 
+  /* 横幅：页面顶部的通栏，贴着页面或容器的边铺满整行。贴边的三条边是页面自己的边，画出来只会压在边上；
+     边界只留朝向页面内容的块尾一道，与页面内容同一层、同一种描边。贴边铺满的栏不取圆角：
+     圆了会在两个角露出底下的页面。面与语气规则与页内提示相同，横幅不换底色 */
+  [data-scope='alert'][data-part='root'][data-banner] {
+    inline-size: 100%;
+    border-block-start-width: 0;
+    border-inline-width: 0;
+    border-radius: 0;
+  }
+
+  /* 关闭的退场：先淡出，再把占位收起——下面的内容跟着一路平移上来，而不是整块跳上来。
+     收占位接在淡出之后（延迟一个 exit），播完连接层才写 hidden。收起态常挂 hidden，这条只在退场途中命中；
+     减弱动效下收占位瞬时完成，淡出照常 */
+  [data-scope='alert'][data-part='root'][data-state='closed'] {
+    box-sizing: border-box;
+    overflow: hidden;
+    animation:
+      xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards,
+      xh-alert-collapse var(--xh-motion-duration-collapse) var(--xh-motion-ease-exit) var(--xh-motion-duration-exit) forwards;
+  }
+
   /* 收起态连接层给的是 hidden 属性，而上面声明了 display——
      漏掉这条，关掉的提示还会一直摊在页面上 */
   [data-scope='alert'][data-part='root'][hidden] {
@@ -186,4 +225,23 @@
   [data-scope='alert'][data-part='action'][hidden] {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='alert'][data-part='close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='alert'][data-part='close-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='alert'][data-part='close-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/anchor.css

@@ -24,7 +24,7 @@
     --xh-_anchor-link-px: var(--xh-control-px-md);
     /* 当前那一节的指示条与文字随语气走。没写 data-tone 时这两个槽都没被声明，退回品牌色。
        指示条是装饰性的色条，取柔和档；文字要压在普通背景上读，取语气的文字档——
-       导航当前页（§7.3）缺省是 --xh-fg-brand-strong，比指示条深一档。
+       导航当前页缺省是 --xh-fg-brand-strong，比指示条深一档。
        聚焦环不在其列，它恒是 --xh-ring-focus */
     --xh-_anchor-accent: var(--xh-_tone-soft, var(--xh-fg-brand));
     --xh-_anchor-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
@@ -86,7 +86,7 @@
   }
 
   /* 链接的几何、字号与面全经家族桥接槽：静息 muted / regular，悬停走白底承载 hover 100 + default 字，
-     按下 pressed 200 只换面（§7.2 / §9.2）；当前那一节（§7.3 导航当前页）brand-strong 字色（随语气的
+     按下 pressed 200 只换面；当前那一节（导航当前页）brand-strong 字色（随语气的
      --xh-_anchor-accent-text）+ medium 字重都跟着变，2px 指示线放了 indicator 部件由部件滑动、没放则由
      下面的静态线规则画在当前链接自己身上。本条 (0,2,0) 压过家族基础块 (0,1,0)，不能再写 color / background。
      position: relative 是静态线的定位参照 */
@@ -127,21 +127,32 @@
     overflow: hidden;
   }
 
-  /* 主轴上的位置与长度由连接层写成内联样式（它量得到，样式表量不到）；
-     这里只管交叉轴的贴边与粗细，以及长什么样。它是可选部件——不渲染它时，
+  /* 当前链接的四个几何量由机器量好、连接层写成私有槽 --xh-_anchor-indicator-x / -y / -w / -h
+     （它量得到，样式表量不到）；这里按排布取主轴那两支，落点交给 translate（只走合成），
+     另管交叉轴的贴边与粗细，以及长什么样。它是可选部件——不渲染它时，
      当前那一节的链接自画一条同规格的静态线（见下） */
   [data-scope='anchor'][data-part='indicator'] {
+    /* 还没量到时的落点，量到即被机器写的私有槽盖过 */
+    --xh-_anchor-indicator-x: 0;
+    --xh-_anchor-indicator-y: 0;
+    --xh-_anchor-indicator-w: 0;
+    --xh-_anchor-indicator-h: 0;
+    --xh-_anchor-indicator-stretch: 0;
+
     position: absolute;
     display: block;
     /* 指示条也是列表项，宿主给 li 的外边距会把绝对定位的它推离条目 */
     margin: 0;
+    inset-block-start: 0;
     inset-inline-start: calc(var(--xh-anchor-indicator-thickness, var(--xh-stroke-thick)) * -1);
     inline-size: var(--xh-anchor-indicator-thickness, var(--xh-stroke-thick));
+    block-size: var(--xh-_anchor-indicator-h);
     border-radius: var(--xh-anchor-indicator-radius, var(--xh-shape-pill));
     background: var(--xh-anchor-indicator-color, var(--xh-_anchor-accent));
+    translate: 0 var(--xh-_anchor-indicator-y);
     transition:
-      inset-block-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+      translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      block-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   /* display 会盖掉 hidden 属性的 UA 规则，无激活项时显式让位 */
@@ -151,16 +162,43 @@
 
   /* 横排：指示条改躺在底边的轨道上，交叉轴换成块轴 */
   [data-scope='anchor'][data-part='indicator'][data-orientation='horizontal'] {
-    inset-inline-start: auto;
+    inset-block-start: auto;
+    inset-inline-start: 0;
     inset-block-end: calc(var(--xh-anchor-indicator-thickness, var(--xh-stroke-thick)) * -1);
-    inline-size: auto;
+    inline-size: var(--xh-_anchor-indicator-w);
     block-size: var(--xh-anchor-indicator-thickness, var(--xh-stroke-thick));
+    translate: var(--xh-_anchor-indicator-x) 0;
     transition:
-      inset-inline-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+      translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* translate 只认物理方向：RTL 下行首在右边，起始缘量出的距离往左推 */
+  [data-scope='anchor'][data-part='indicator'][data-orientation='horizontal']:dir(rtl) {
+    translate: calc(-1 * var(--xh-_anchor-indicator-x)) 0;
+  }
+
+  /* 首次落位与同一项的重量（窗口缩放、换上正式字体）直接到位，只有换项才滑：连接层在这一落点投影
+     data-instant。写在排布那几条之后，同一特异性按先后压过它们单写的过渡 */
+  [data-scope='anchor'][data-part='indicator'][data-instant] {
+    transition: none;
+  }
+
+  /* 液态档：两沿由弹簧逐帧推着走（连接层每一帧写好盒子），几何量不再补过渡；
+     被拉长时在另一个方向上压扁（竖排缺省压行向，横排压块向），表达体积守恒，拉长到目标的两倍时压到 --xh-motion-scale-squash */
+  :where([data-material='liquid']) [data-scope='anchor'][data-part='indicator'] {
+    --xh-_anchor-indicator-squash: max(var(--xh-motion-scale-squash), calc(1 - var(--xh-_anchor-indicator-stretch) * (1 - var(--xh-motion-scale-squash))));
+
+    scale: var(--xh-_anchor-indicator-squash) 1;
+    transition: none;
+  }
+
+  :where([data-material='liquid']) [data-scope='anchor'][data-part='indicator'][data-orientation='horizontal'] {
+    scale: 1 var(--xh-_anchor-indicator-squash);
+    transition: none;
   }
 
-  /* 目录里没放 indicator 部件时，当前那一节的链接自画一条静态指示线（§7.3 导航当前页）：
+  /* 目录里没放 indicator 部件时，当前那一节的链接自画一条静态指示线（导航当前页）：
      与 Tabs line 档同一取法，作者不必为了这条线多放一个部件。
      线画在当前链接的 ::after 上，以链接盒为定位参照（上面已给 position: relative），
      厚度 / 颜色 / 圆角与 indicator 部件读同一组槽与缺省——作者改一处，部件与静态线一起改。

package/css/approval.css

@@ -5,44 +5,11 @@
 
 /* 定义 approval 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 /* 独立皮肤同时传递引入授权行与两颗钮的动作控件配方，full bundle 递归去重。 */
 @import '../family/action-control.css';
-
-@layer xihan.motion {
-  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
-     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
-
-  /* 幅度走令牌，减弱动效时由令牌层归零；位移用独立属性而非 transform 简写 */
-  @keyframes xh-approval-in {
-    from {
-      opacity: 0;
-      translate: 0 var(--xh-motion-distance-md);
-    }
-
-    to {
-      opacity: 1;
-      translate: 0 0;
-    }
-  }
-
-  @keyframes xh-approval-result-in {
-    from {
-      opacity: 0;
-      scale: var(--xh-motion-scale-enter);
-    }
-
-    to {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
-  @keyframes xh-approval-rotate {
-    to {
-      rotate: 360deg;
-    }
-  }
-}
+@import '../family/loading-ring.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -50,10 +17,10 @@
     --xh-approval-skin: 1;
   }
 
-  /* 一块要人做决定的静态内容面：--xh-border-default 描边 + surface 底 + 无影（§5.3 边界只由描边承担），
+  /* 一块要人做决定的静态内容面：--xh-border-default 描边 + surface 底 + 无影（边界只由描边承担），
      作者打了语气时描边染成语气色作强调（下面那条），判定落定后描边退回中性 */
   [data-scope='approval'][data-part='root'] {
-    /* 作者塞进标题 / 说明 / 结果条里的图标按档取尺（§6.5），缺省 md；勾选记号另按盒比例量 */
+    /* 作者塞进标题 / 说明 / 结果条里的图标按档取尺，缺省 md；勾选记号另按盒比例量 */
     --xh-_approval-icon-size: var(--xh-glyph-size-md);
     --xh-icon-size: var(--xh-approval-icon-size, var(--xh-_approval-icon-size));
 
@@ -66,6 +33,8 @@
     --xh-_approval-item-font-size: var(--xh-control-font-md);
     --xh-_approval-note-font-size: var(--xh-control-font-md);
 
+    /* 定位基准：待决的呼吸点钉在右上角 */
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: var(--xh-approval-gap, var(--xh-_approval-gap));
@@ -74,8 +43,13 @@
     border-radius: var(--xh-approval-radius, var(--xh-shape-surface));
     background: var(--xh-approval-bg, var(--xh-bg-surface));
     box-shadow: var(--xh-approval-shadow, none);
-    transition: border-color var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
-    animation: xh-approval-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    /* 判定落定时描边随语气换色：属状态换色，与别处悬停、选中、校验的换色同一档 */
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 卡片出现时滑入；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
+  [data-scope='approval'][data-part='root']:not([data-scope][data-part='item'][data-instant] *) {
+    animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
   /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
@@ -83,12 +57,54 @@
     display: none;
   }
 
+  /* 待决的呼吸点：钉在右上角（RTL 下左上），不占作者排的版面；颜色随语气，没写语气时取警示色。
+     呼吸只表达「正在进行、需要被察觉」：明暗与缩放的起伏持续到判定落定，外扩光环同周期播 3 轮后停下；
+     判过了连接层就收起它，由结果那一格接着表达 */
+  [data-scope='approval'][data-part='pending-indicator'] {
+    position: absolute;
+    inset-block-start: var(--xh-approval-p, var(--xh-_approval-p));
+    inset-inline-end: var(--xh-approval-p, var(--xh-_approval-p));
+    inline-size: var(--xh-approval-pending-indicator-size, var(--xh-space-2));
+    block-size: var(--xh-approval-pending-indicator-size, var(--xh-space-2));
+    border-radius: var(--xh-approval-pending-indicator-radius, var(--xh-shape-circle));
+    background: var(--xh-approval-pending-indicator-color, var(--xh-_tone, var(--xh-fg-warning)));
+    animation: xh-breathe var(--xh-motion-loop-breathe) var(--xh-motion-ease-breathe) infinite;
+  }
+
+  [data-scope='approval'][data-part='pending-indicator']::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: inherit;
+    opacity: 0;
+    pointer-events: none;
+    animation: xh-breathe-halo var(--xh-motion-loop-breathe) var(--xh-motion-ease-breathe) 3;
+  }
+
+  /* 减弱动效：两者都停，圆点停在满不透明度，光环不出现 */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='approval'][data-part='pending-indicator'],
+    [data-scope='approval'][data-part='pending-indicator']::after {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='approval'][data-part='pending-indicator'],
+  :where([data-motion='reduce']) [data-scope='approval'][data-part='pending-indicator']::after {
+    animation: none;
+  }
+
+  [data-scope='approval'][data-part='pending-indicator'][hidden] {
+    display: none;
+  }
+
   /* 语气只染描边：作者定的强调，待决时把这块面从正文里提出来 */
   [data-scope='approval'][data-part='root'][data-tone] {
     border-color: var(--xh-approval-border, var(--xh-_tone, var(--xh-border-default)));
   }
 
-  /* 判过了就不再抢注意力：语气色边退回中性描边（根面外边不取 subtle，§5.3）。
+  /* 判过了就不再抢注意力：语气色边退回中性描边（根面外边不取 subtle）。
      排在语气那条之后：同等特指度，落定要盖得过语气 */
   [data-scope='approval'][data-part='root']:not([data-state='pending']) {
     border-color: var(--xh-approval-border-settled, var(--xh-border-default));
@@ -98,7 +114,7 @@
   /* 缺省档即 outline，写在上面那条基础规则里。
      两档排在落定那条之后：它们把描边整个撤掉，排在前面会被落定那条按同等特指度盖回来 */
   /* 底色分区：描边让位给底色，闸门嵌在别人的面里时不再多一圈线；
-     淡底承载面向授权行与拒绝钮下发 hover 200 → pressed 300（§7.2） */
+     淡底承载面向授权行与拒绝钮下发 hover 200 → pressed 300 */
   [data-scope='approval'][data-part='root'][data-variant='subtle'] {
     --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
     --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
@@ -114,7 +130,7 @@
     box-shadow: none;
   }
 
-  /* 标题走 Surface 标题档 14/600（§6.4） */
+  /* 标题走 Surface 标题档 14/600 */
   [data-scope='approval'][data-part='title'] {
     display: block;
     margin: 0;
@@ -164,9 +180,9 @@
   }
 
   /* 一项授权：整行可点、可聚焦，勾选记号在左。盒型、悬停 / 按下 / 禁用面由 Action Control 的 row 档给
-     （ghost 形态：白底承载 hover 100 → pressed 200，按下只换面不缩放，§9.2；禁用守卫认 data-disabled），
+     （ghost 形态：白底承载 hover 100 → pressed 200，按下只换面不缩放；禁用守卫认 data-disabled），
      这里只把使用者槽映射到桥接槽，内衬与间距沿用本组件的档位。
-     行高不吃家族的单行档：row 档允许换行、高度随内容，一条会折行的授权文案走正文行高（§6.4） */
+     行高不吃家族的单行档：row 档允许换行、高度随内容，一条会折行的授权文案走正文行高 */
   [data-scope='approval'][data-part='item'] {
     --xh-action-gap: var(--xh-approval-item-gap, var(--xh-space-1_5));
     --xh-action-padding-inline: var(--xh-approval-item-px, var(--xh-space-2));
@@ -198,7 +214,7 @@
     inline-size: var(--xh-approval-indicator-size, var(--xh-control-indicator-size));
     block-size: var(--xh-approval-indicator-size, var(--xh-control-indicator-size));
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
@@ -272,6 +288,13 @@
     color: var(--xh-fg-disabled);
   }
 
+  /* 要求写理由而空着就按了拒绝：描边换成无效色；焦点也已带到这里，焦点环压在描边外面，一并换色 */
+  [data-scope='approval'][data-part='note'][data-invalid] {
+    --xh-_ring-color: var(--xh-approval-note-ring-invalid, var(--xh-ring-invalid));
+
+    border-color: var(--xh-approval-note-border-invalid, var(--xh-border-invalid));
+  }
+
   /* 剩余时间：等宽数字，逐秒跳字时不左右晃 */
   [data-scope='approval'][data-part='timer'] {
     display: block;
@@ -289,25 +312,31 @@
     display: inline-flex;
     align-self: flex-start;
     align-items: center;
-    gap: var(--xh-approval-result-gap, var(--xh-space-1_5));
-    padding-inline: var(--xh-approval-result-px, var(--xh-space-2));
-    padding-block: var(--xh-approval-result-py, var(--xh-space-1));
+    gap: var(--xh-approval-result-gap, var(--xh-space-1));
+    padding-inline: var(--xh-approval-result-px, var(--xh-space-1_5));
+    padding-block: var(--xh-approval-result-py, var(--xh-space-0_5));
+    border: var(--xh-stroke-thin) solid transparent;
     border-radius: var(--xh-approval-result-radius, var(--xh-shape-pill));
-    background: var(--xh-approval-result-bg, color-mix(in oklab, var(--xh-fg-success) 12%, var(--xh-bg-surface)));
-    color: var(--xh-approval-result-fg, var(--xh-fg-success));
+    background: var(--xh-approval-result-bg, var(--xh-_tone-subtle));
+    color: var(--xh-approval-result-fg, var(--xh-_tone-fg));
     font-size: var(--xh-approval-result-font-size, var(--xh-text-caption-size));
-    font-weight: var(--xh-approval-result-font-weight, var(--xh-text-label-weight));
-    animation: xh-approval-result-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    font-weight: var(--xh-approval-result-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-control-indicator-md);
+  }
+
+  /* 落定结果弹出；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
+  [data-scope='approval'][data-part='result']:not([data-scope][data-part='item'][data-instant] *) {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='approval'][data-part='result'][hidden] {
     display: none;
   }
 
-  /* 超时按拒绝收口，两者同档：视觉上不该看着像第三种结果 */
+  /* 超时按拒绝收口，两者同档（连接层同投 danger 语气）：视觉上不该看着像第三种结果 */
   [data-scope='approval'][data-part='result']:is([data-state='denied'], [data-state='expired']) {
-    background: var(--xh-approval-result-bg-denied, color-mix(in oklab, var(--xh-fg-danger) 12%, var(--xh-bg-surface)));
-    color: var(--xh-approval-result-fg-denied, var(--xh-fg-danger));
+    background: var(--xh-approval-result-bg-denied, var(--xh-_tone-subtle));
+    color: var(--xh-approval-result-fg-denied, var(--xh-_tone-fg));
   }
 
   /* 动作行：两颗按钮靠右排，间距归库管。
@@ -327,7 +356,7 @@
 
   /* 两颗按钮是离散动作控件：盒几何、悬停 / 按下与 0.97 按压、焦点环、禁用与在途面全由 Action Control 的
      text 档给，组件只映射既有使用者槽。批准走 solid 档：判定闸门里的主要动作，与 Button 缺省同为品牌实心；
-     拒绝走 outline 档：非 Button 的触发器缺省中性描边（§7.2.2）。
+     拒绝走 outline 档：非 Button 的触发器缺省中性描边。
      三档守卫由连接层投影：判定在途是 data-loading + aria-disabled（保住可聚焦，家族给在途面：底色不置灰、
      指针 progress），必选项没勾满与落定是 data-disabled（家族给禁用面：置灰底、置灰字、not-allowed）。
      两颗共用的几何与字号写在一起 */
@@ -397,35 +426,17 @@
      圆环挂在这一行上而不是某一颗钮上：连接层只拿到「有一条判定在途」，
      拿不到是哪一颗按下的，画在两颗钮上会有一颗在说假话 */
 
-  [data-scope='approval'][data-part='root'][data-loading] [data-scope='approval'][data-part='footer']::before {
-    content: '';
-    flex: none;
-
-    /* 圆环那一枚跟着两颗钮的字号走，不跟页面的：download-trigger 与 clipboard 的圆环
-       1em 量的都是它所在那颗钮，这里的宿主是整行，不锁字号就会比按钮上的大一圈 */
-    font-size: var(--xh-approval-action-font-size, var(--xh-text-label-size));
-    inline-size: 1em;
-    block-size: 1em;
-    border: var(--xh-stroke-thin) solid transparent;
-    border-block-start-color: currentColor;
-    border-radius: var(--xh-shape-circle);
-    animation: xh-approval-rotate var(--xh-approval-loading-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite;
-  }
-
-  /* 减少动效：圆环停下并整圈换成虚线，静止的形状仍然读得出"还没好"。
-     两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='approval'][data-part='root'][data-loading] [data-scope='approval'][data-part='footer']::before {
-      border-style: dotted;
-      border-color: currentColor;
-      animation: none;
-    }
+  /* 环由加载环配方画在这一行的 ::before 上（连接层投影 data-xh-loading-ring 与 data-loading），
+     随在途淡入淡出、转与停；直径取所在尺寸档的图标档，转速认使用者槽 */
+  [data-scope='approval'][data-part='footer'] {
+    --xh-_loading-ring-duration: var(--xh-approval-loading-duration, var(--xh-motion-loop-spin));
   }
 
-  :where([data-motion='reduce']) [data-scope='approval'][data-part='root'][data-loading] [data-scope='approval'][data-part='footer']::before {
-    border-style: dotted;
-    border-color: currentColor;
-    animation: none;
+  [data-scope='approval'][data-part='footer']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-_approval-icon-size);
+    block-size: var(--xh-_approval-icon-size);
   }
 
   /* 尺寸档改内衬、间距、按钮高度、行内字号与图标档 */
@@ -458,4 +469,33 @@
     --xh-_approval-item-font-size: var(--xh-control-font-lg);
     --xh-_approval-note-font-size: var(--xh-control-font-lg);
   }
+
+  /* 强制色：底色会被系统背景吃掉，呼吸点改用系统前景色 */
+  @media (forced-colors: active) {
+    [data-scope='approval'][data-part='pending-indicator'] {
+      background: CanvasText;
+    }
+  }
+
+  @media print {
+    /* 打印：待决的呼吸点是一瞬间的状态，纸上没有「等着人来判」 */
+    [data-scope='approval'][data-part='pending-indicator'] {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       落在勾选盒自己的实心面上（这一档里是 Canvas），整行悬停不换面，取 CanvasText；
+       禁用取 GrayText */
+    [data-scope='approval'][data-part='item-indicator']:not([data-state='unchecked']):empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='approval'][data-part='item'][data-disabled] [data-scope='approval'][data-part='item-indicator']:not([data-state='unchecked']):empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/avatar-group.css

@@ -85,7 +85,7 @@
     inline-size: var(--xh-_avatar-group-size);
     block-size: var(--xh-_avatar-group-size);
     border-radius: var(--xh-avatar-group-radius, var(--xh-shape-circle));
-    background: var(--xh-avatar-group-overflow-item-bg, var(--xh-bg-muted));
+    background: var(--xh-avatar-group-overflow-item-bg, var(--xh-bg-muted-opaque));
     color: var(--xh-avatar-group-overflow-item-fg, var(--xh-fg-muted));
     font-size: var(--xh-_avatar-group-font-size);
     font-weight: var(--xh-avatar-group-font-weight, var(--xh-font-weight-medium));