@xihan-ui/styles 2.1.0 → 3.0.0

package/css/accordion.css

@@ -184,8 +184,12 @@
     flex: none;
     color: var(--xh-accordion-indicator-fg, var(--xh-fg-muted));
     line-height: var(--xh-leading-none);
-    /* 指示器与正文同档转向：正文 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 探一次，取不到就说明这份皮肤没被引入。 */
@@ -22,7 +39,8 @@
 
     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

@@ -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,13 +162,40 @@
 
   /* 横排：指示条改躺在底边的轨道上，交叉轴换成块轴 */
   [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 部件时，当前那一节的链接自画一条静态指示线（导航当前页）：

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 探一次，取不到就说明这份皮肤没被引入。 */
@@ -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,6 +57,48 @@
     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)));
@@ -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));
   }
 
   /* 动作行：两颗按钮靠右排，间距归库管。
@@ -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));

package/css/avatar.css

@@ -24,7 +24,8 @@
     inline-size: var(--xh-avatar-size, var(--xh-control-h-md));
     block-size: var(--xh-avatar-size, var(--xh-control-h-md));
     border-radius: var(--xh-avatar-radius, var(--xh-shape-circle));
-    background: var(--xh-avatar-bg, var(--xh-bg-subtle));
+    /* 头像在头像组里层叠：底取淡底的不透明档，半透明会透出压在下面的那一枚 */
+    background: var(--xh-avatar-bg, var(--xh-bg-subtle-opaque));
     color: var(--xh-avatar-fg, var(--xh-fg-muted));
     font-size: var(--xh-avatar-font-size, var(--xh-text-secondary-size));
     font-weight: var(--xh-avatar-font-weight, var(--xh-font-weight-medium));
@@ -53,13 +54,13 @@
      两条声明都把 --xh-avatar-bg / --xh-avatar-fg 排在语气值前面：使用者槽仍是最外那一层，
      写了 tone 的那一枚照样受外层统一控制。整块带 [data-tone] 限定，没写语气的头像逐值不变 */
   [data-scope='avatar'][data-part='root'][data-tone] {
-    background: var(--xh-avatar-bg, var(--xh-_tone-subtle, var(--xh-bg-subtle)));
+    background: var(--xh-avatar-bg, var(--xh-_tone-subtle, var(--xh-bg-subtle-opaque)));
     color: var(--xh-avatar-fg, var(--xh-_tone-fg, var(--xh-fg-muted)));
   }
 
   /* 不声明 display，加载完成前的 hidden 直接交给浏览器的 [hidden] 规则收起。
-     载完那一刻 hidden 撤掉、这个节点从不显示变为显示，淡入在那一刻起跑，
-     图片不是硬切上来盖掉回退字 */
+     载完那一刻 hidden 撤掉、这个节点从不显示变为显示，淡入在那一刻起跑；
+     回退内容同一刻开始淡出（见下），两者交叉，中间不露一拍底色 */
   [data-scope='avatar'][data-part='image'] {
     inline-size: 100%;
     block-size: 100%;
@@ -77,7 +78,14 @@
     text-transform: uppercase;
   }
 
-  /* display 会盖掉 hidden 属性的 UA 规则，加载完成后显式让位给图片 */
+  /* 图片载好：回退内容浮到图片之上原地淡出，与图片的淡入交叉；播完连接层才写 hidden */
+  [data-scope='avatar'][data-part='fallback'][data-state='loaded'] {
+    position: absolute;
+    inset: 0;
+    animation: xh-fade-out var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) forwards;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则：载入中等过 fallbackDelay 之前、以及淡出播完之后收起 */
   [data-scope='avatar'][data-part='fallback'][hidden] {
     display: none;
   }