@xihan-ui/styles 2.1.0 → 3.1.0

package/css/menu.css

@@ -7,7 +7,9 @@
 
 /* 共享关键帧由 family/motion.css 提供，条目走 Collection Item 家族；本皮肤 @import 它们，单独引入仍成立。 */
 @import '../family/collection-item.css';
+@import '../family/menu-choice.css';
 @import '../family/motion.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -67,6 +69,15 @@
   }
 
   [data-scope='menu'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-menu-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-menu-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-menu-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-menu-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-menu-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-menu-highlight, var(--xh-_material-highlight));
+
     /* 条目外的字形（分组标题等）按档取尺，缺省 md，随 data-size 换档；条目里作者放的图标由家族随
        data-xh-collection-size 下发。菜单自绘的状态字形（标记位的盒、子菜单的展开 chevron）不读这支：
        它们是指示符，走 --xh-control-indicator-* 一族——标记位在自己身上把 --xh-icon-size 改接到盒的尺，
@@ -92,13 +103,7 @@
     max-block-size: min(var(--xh-menu-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_menu-available-h));
     padding-block: var(--xh-menu-content-py, var(--xh-surface-pad-xs));
     padding-inline: var(--xh-menu-content-px, var(--xh-surface-pad-xs));
-    border: var(--xh-stroke-thin) solid var(--xh-menu-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-menu-content-radius, var(--xh-shape-overlay));
-    background: var(--xh-menu-content-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-menu-content-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-menu-content-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-menu-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-menu-backdrop, var(--xh-material-frosted-backdrop));
     /* 条目超过上限就在菜单内部滚。条目的焦点环是内收的，滚动容器裁在内边距缘上，环切不着。
        浮层滚动面：到底后不把滚动链穿透给页面 */
     overflow-y: auto;
@@ -106,18 +111,6 @@
     pointer-events: auto;
   }
 
-  /* 顶光是独立装饰层，不替换真实边框；高对比/强制色归零后四边轮廓仍完整。 */
-  [data-scope='menu'][data-part='content']::before {
-    content: '';
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-    block-size: var(--xh-stroke-thin);
-    border-radius: inherit;
-    background: var(--xh-menu-highlight, var(--xh-material-frosted-highlight));
-    pointer-events: none;
-  }
-
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
      收起态连接层会给 content 打 hidden，而上面那条 display 正是要盖掉 UA 的
      [hidden]{display:none}——退场动画得先能播。presence 读的是 content 的 animationName，
@@ -129,7 +122,8 @@
     outline: none;
   }
 
-  [data-scope='menu'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='menu'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -168,7 +162,7 @@
     --xh-collection-inline-padding: var(--xh-menu-item-px, var(--xh-_menu-item-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-menu-item-font-size, var(--xh-_menu-font-size));
-    --xh-collection-radius: var(--xh-menu-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-menu-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-menu-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-menu-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-menu-item-fg, var(--xh-material-frosted-fg));
@@ -239,7 +233,8 @@
     order: 2;
     min-inline-size: 0;
     color: var(--xh-menu-item-description-fg, var(--xh-material-frosted-fg-muted));
-    font-size: var(--xh-menu-item-description-font-size, var(--xh-text-caption-size));
+    /* 与同一行的快捷键、Select 等列表的说明同档：控件次级字号，不取 caption 令牌 */
+    font-size: var(--xh-menu-item-description-font-size, var(--xh-control-caption-md));
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -347,4 +342,23 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='menu'][data-part='item'][aria-haspopup='menu']::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='menu'][data-part='item'][aria-haspopup='menu']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after {
+      background-color: HighlightText;
+    }
+
+    [data-scope='menu'][data-part='item'][aria-haspopup='menu']:is([aria-disabled='true'], [data-disabled])::after {
+      background-color: GrayText;
+    }
+  }
 }

package/css/menubar.css

@@ -7,7 +7,9 @@
 
 /* 共享关键帧由 family/motion.css 提供，条目走 Collection Item 家族；本皮肤 @import 它们，单独引入仍成立。 */
 @import '../family/collection-item.css';
+@import '../family/menu-choice.css';
 @import '../family/motion.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -166,6 +168,15 @@
   }
 
   [data-scope='menubar'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-menubar-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-menubar-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-menubar-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-menubar-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-menubar-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-menubar-highlight, var(--xh-_material-highlight));
+
     position: relative;
     display: flex;
     flex-direction: column;
@@ -178,13 +189,7 @@
     max-block-size: min(var(--xh-menubar-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_menubar-available-h));
     padding-block: var(--xh-menubar-content-py, var(--xh-surface-pad-xs));
     padding-inline: var(--xh-menubar-content-px, var(--xh-surface-pad-xs));
-    border: var(--xh-stroke-thin) solid var(--xh-menubar-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-menubar-content-radius, var(--xh-shape-overlay));
-    background: var(--xh-menubar-content-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-menubar-content-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-menubar-content-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-menubar-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-menubar-backdrop, var(--xh-material-frosted-backdrop));
     /* 条目超过上限就在菜单内部滚。条目的焦点环是内收的，滚动容器裁在内边距缘上，环切不着。
        浮层滚动面：到底后不把滚动链穿透给页面 */
     overflow-y: auto;
@@ -192,18 +197,6 @@
     pointer-events: auto;
   }
 
-  /* 顶光叠在真实四边 border 内侧；强制色撤掉装饰后，完整轮廓仍然存在。 */
-  [data-scope='menubar'][data-part='content']::before {
-    content: '';
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-    block-size: var(--xh-stroke-thin);
-    border-radius: inherit;
-    background: var(--xh-menubar-highlight, var(--xh-material-frosted-highlight));
-    pointer-events: none;
-  }
-
   /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位。
      连接层给 content 发 hidden，这一条漏了整张菜单就永远收不起来 */
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
@@ -268,7 +261,7 @@
     --xh-collection-inline-padding: var(--xh-menubar-item-px, var(--xh-_menubar-item-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-menubar-item-font-size, var(--xh-_menubar-font-size));
-    --xh-collection-radius: var(--xh-menubar-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-menubar-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-menubar-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-menubar-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-menubar-item-fg, var(--xh-material-frosted-fg));
@@ -366,7 +359,8 @@
     order: 2;
     min-inline-size: 0;
     color: var(--xh-menubar-item-description-fg, var(--xh-material-frosted-fg-muted));
-    font-size: var(--xh-menubar-item-description-font-size, var(--xh-text-caption-size));
+    /* 与同一行的快捷键、Select 等列表的说明同档：控件次级字号，不取 caption 令牌 */
+    font-size: var(--xh-menubar-item-description-font-size, var(--xh-control-caption-md));
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -437,4 +431,26 @@
       background: CanvasText;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='menubar'][data-part='item'][aria-haspopup='menu']::after,
+    [data-scope='menubar'][data-part='item-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='menubar'][data-part='item'][aria-haspopup='menu']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after,
+    [data-scope='menubar'][data-part='item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])) [data-scope='menubar'][data-part='item-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='menubar'][data-part='item'][aria-haspopup='menu']:is([aria-disabled='true'], [data-disabled])::after,
+    [data-scope='menubar'][data-part='item']:is([aria-disabled='true'], [data-disabled]) [data-scope='menubar'][data-part='item-indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/message-feed.css

@@ -5,37 +5,11 @@
 
 /* 定义 message feed 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 /* 独立皮肤同时传递引入回底钮的动作控件配方，full bundle 递归去重。 */
 @import '../family/action-control.css';
-
-@layer xihan.motion {
-  /* 关键帧写在本文件里：动画名的查找只认「文档里有没有这个名字」，
-     引用别处文件里的名字时那份文件不一定在场，动画会静默地整个不跑。
-     幅度与缩放走令牌，减弱动效时由令牌层归零 */
-  @keyframes xh-message-feed-item-in {
-    from {
-      opacity: 0;
-      translate: 0 var(--xh-motion-distance-md);
-    }
-
-    to {
-      opacity: 1;
-      translate: 0 0;
-    }
-  }
-
-  @keyframes xh-message-feed-button-in {
-    from {
-      opacity: 0;
-      scale: var(--xh-motion-scale-enter);
-    }
-
-    to {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-}
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -85,14 +59,62 @@
     display: none;
   }
 
-  /* 一条消息。默认整行铺开，左右分侧由使用者按 data-role 自己写。
-     进场只动 opacity 与 translate：改高度会扰动粘底补偿量到的 scrollHeight */
+  /* 已发送、等首个片段：列表之后一颗呼吸的圆点，行首与消息内容对齐。
+     呼吸只表达「正在进行、给不出进度」：明暗与缩放的起伏持续到首个片段到来，外扩光环同周期播 3 轮后停下。
+     连接层只在 submitted 时撤掉 hidden */
+  [data-scope='message-feed'][data-part='pending-indicator'] {
+    position: relative;
+    display: block;
+    inline-size: var(--xh-message-feed-pending-indicator-size, var(--xh-space-2));
+    block-size: var(--xh-message-feed-pending-indicator-size, var(--xh-space-2));
+    margin-block-end: var(--xh-message-feed-p, var(--xh-_message-feed-p));
+    margin-inline-start: var(--xh-message-feed-p, var(--xh-_message-feed-p));
+    border-radius: var(--xh-message-feed-pending-indicator-radius, var(--xh-shape-circle));
+    background: var(--xh-message-feed-pending-indicator-color, var(--xh-fg-muted));
+    animation: xh-breathe var(--xh-motion-loop-breathe) var(--xh-motion-ease-breathe) infinite;
+  }
+
+  [data-scope='message-feed'][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='message-feed'][data-part='pending-indicator'],
+    [data-scope='message-feed'][data-part='pending-indicator']::after {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='message-feed'][data-part='pending-indicator'],
+  :where([data-motion='reduce']) [data-scope='message-feed'][data-part='pending-indicator']::after {
+    animation: none;
+  }
+
+  [data-scope='message-feed'][data-part='pending-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 一条消息。默认整行铺开，左右分侧由使用者按 data-role 自己写 */
   [data-scope='message-feed'][data-part='item'] {
     display: flex;
     flex-direction: column;
     gap: var(--xh-message-feed-item-gap, var(--xh-space-1));
     border-radius: var(--xh-message-feed-item-radius, var(--xh-shape-surface));
-    animation: xh-message-feed-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 新到的消息进场，同一批按到达顺序错开；首帧就在的历史消息直接呈现（自己或 list 带 data-instant）。
+     进场只动 opacity 与 translate：改高度会扰动粘底补偿量到的 scrollHeight */
+  [data-scope='message-feed'][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='message-feed'][data-part='item'][hidden] {
@@ -115,26 +137,39 @@
      frosted 四件套（底 + 边 + 影 + 磨砂），这里只把使用者槽映射到桥接槽：
      字形按 xs 档取 --xh-_action-profile-glyph-size（16px），与 log / back-top 同一把尺 */
   [data-scope='message-feed'][data-part='scroll-to-end-trigger'] {
-    --xh-_message-feed-scroll-to-end-trigger-shadow: var(--xh-message-feed-scroll-to-end-trigger-shadow, var(--xh-material-frosted-shadow));
+    /* 面走材质家族配方（family/material.css）：frosted 档的底、交互阶梯、描边、投影、1px 顶光与背景滤镜，
+       liquid 档由配方换成液态面；这里把使用者槽接到 Action Control 的桥接槽 */
+    --xh-action-bg-rest: var(--xh-message-feed-scroll-to-end-trigger-bg, var(--xh-_material-bg));
+    --xh-action-bg-hover: var(--xh-message-feed-scroll-to-end-trigger-bg-hover, var(--xh-_material-bg-hover));
+    --xh-action-bg-pressed: var(--xh-_material-bg-pressed);
+    --xh-action-bg-focus-visible: var(--xh-message-feed-scroll-to-end-trigger-bg, var(--xh-_material-bg-focus));
+    --xh-action-bg-disabled: var(--xh-message-feed-scroll-to-end-trigger-bg, var(--xh-_material-bg));
+    --xh-action-fg-rest: var(--xh-message-feed-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-fg-hover: var(--xh-message-feed-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-fg-pressed: var(--xh-message-feed-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-fg-focus-visible: var(--xh-message-feed-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-border-rest: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-hover: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-pressed: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-focus-visible: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-disabled: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-shadow-rest: var(--xh-message-feed-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-hover: var(--xh-message-feed-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-pressed: var(--xh-message-feed-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-focus-visible: var(--xh-message-feed-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-disabled: var(--xh-message-feed-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-highlight-rest: var(--xh-_material-highlight);
+    --xh-action-highlight-hover: var(--xh-_material-highlight);
+    --xh-action-highlight-pressed: var(--xh-_material-highlight);
+    --xh-action-highlight-focus-visible: var(--xh-_material-highlight);
+    --xh-action-highlight-disabled: var(--xh-_material-highlight);
     --xh-action-visual-size: var(--xh-message-feed-scroll-to-end-trigger-size, var(--xh-_action-profile-visual-size));
     --xh-action-radius: var(--xh-message-feed-scroll-to-end-trigger-radius, var(--xh-shape-circle));
-    --xh-action-bg-rest: var(--xh-message-feed-scroll-to-end-trigger-bg, var(--xh-material-frosted-bg));
-    --xh-action-bg-hover: var(--xh-message-feed-scroll-to-end-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
-    --xh-action-border-rest: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-material-frosted-border));
-    --xh-action-border-hover: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-material-frosted-border));
-    --xh-action-border-pressed: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-material-frosted-border));
-    --xh-action-border-focus-visible: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-material-frosted-border));
-    --xh-action-shadow-rest: var(--xh-_message-feed-scroll-to-end-trigger-shadow);
-    --xh-action-shadow-hover: var(--xh-_message-feed-scroll-to-end-trigger-shadow);
-    --xh-action-shadow-pressed: var(--xh-_message-feed-scroll-to-end-trigger-shadow);
-    --xh-action-fg-rest: var(--xh-message-feed-scroll-to-end-trigger-fg, var(--xh-material-frosted-fg));
     --xh-icon-size: var(--xh-message-feed-icon-size, var(--xh-_action-profile-glyph-size));
 
     position: absolute;
     inset-block-end: var(--xh-message-feed-scroll-to-end-trigger-inset, var(--xh-space-4));
     inset-inline-end: var(--xh-message-feed-scroll-to-end-trigger-inset, var(--xh-space-4));
-    -webkit-backdrop-filter: var(--xh-material-frosted-backdrop);
-    backdrop-filter: var(--xh-material-frosted-backdrop);
   }
 
   /* 连接层收起按钮时写 hidden 属性，家族那条 display 会盖掉 UA 规则，这里补回 */
@@ -142,13 +177,20 @@
     display: none;
   }
 
-  /* 收起不卸载，冒出来时靠这条进场动画；不写 display，可见性归上面那条 [hidden] 管 */
+  /* 收起不卸载：离底时冒出来播进场，回底时先播完退场、连接层才写 hidden 藏起。
+     不写 display，可见性归上面那条 [hidden] 管；退场途中不再接指针 */
   [data-scope='message-feed'][data-part='scroll-to-end-trigger'][data-state='visible'] {
-    animation: xh-message-feed-button-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  [data-scope='message-feed'][data-part='scroll-to-end-trigger'][data-state='hidden']:not([hidden]) {
+    pointer-events: none;
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
-  /* 没写内容就由皮肤画一枚向下的字形；作者往按钮里塞了自己的图形，这条规则即不命中 */
-  [data-scope='message-feed'][data-part='scroll-to-end-trigger']:empty::before {
+  /* 没写内容（或只放了未读数角标）就由皮肤画一枚向下的字形；作者往按钮里塞了自己的图形，这条规则即不命中 */
+  [data-scope='message-feed'][data-part='scroll-to-end-trigger']:empty::before,
+  [data-scope='message-feed'][data-part='scroll-to-end-trigger']:has(> [data-part='unread-count']:only-child)::before {
     content: '';
     display: inline-block;
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
@@ -188,10 +230,89 @@
     white-space: nowrap;
   }
 
+  /* 消息之间的分隔（按日期分组）：一行次级标注居中，两侧各一道内部分隔线 */
+  [data-scope='message-feed'][data-part='separator'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-message-feed-separator-gap, var(--xh-space-3));
+    color: var(--xh-message-feed-separator-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-message-feed-separator-font-size, var(--xh-text-caption-size));
+  }
+
+  [data-scope='message-feed'][data-part='separator']::before,
+  [data-scope='message-feed'][data-part='separator']::after {
+    flex: 1;
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-message-feed-separator-line, var(--xh-border-subtle));
+    content: '';
+  }
+
+  [data-scope='message-feed'][data-part='separator'][hidden] {
+    display: none;
+  }
+
+  /* 回到底部上的未读数：状态 chip，钉在按钮行尾上角外侧，不改按钮盒 */
+  [data-scope='message-feed'][data-part='unread-count'] {
+    position: absolute;
+    inset-block-start: calc(-1 * var(--xh-space-1));
+    inset-inline-end: calc(-1 * var(--xh-space-1));
+    box-sizing: border-box;
+    min-inline-size: var(--xh-message-feed-unread-count-size, var(--xh-space-4));
+    block-size: var(--xh-message-feed-unread-count-size, var(--xh-space-4));
+    padding-inline: var(--xh-message-feed-unread-count-px, var(--xh-space-1));
+    border-radius: var(--xh-message-feed-unread-count-radius, var(--xh-shape-pill));
+    background: var(--xh-message-feed-unread-count-bg, var(--xh-bg-brand));
+    color: var(--xh-message-feed-unread-count-fg, var(--xh-fg-on-brand));
+    font-size: var(--xh-message-feed-unread-count-font-size, var(--xh-text-caption-size));
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-message-feed-unread-count-size, var(--xh-space-4));
+    text-align: center;
+    pointer-events: none;
+  }
+
+  [data-scope='message-feed'][data-part='unread-count'][hidden] {
+    display: none;
+  }
+
   @media print {
-    /* 打印：回到底部这颗钮只有在能滚的地方才成立，落到纸上是一颗按不动的按钮。 */
-    [data-scope='message-feed'][data-part='scroll-to-end-trigger'] {
+    /* 打印：回到底部这颗钮只有在能滚的地方才成立，落到纸上是一颗按不动的按钮；
+       等首个片段的呼吸点是一瞬间的状态，纸上没有「正在进行」。 */
+    [data-scope='message-feed'][data-part='scroll-to-end-trigger'],
+    [data-scope='message-feed'][data-part='pending-indicator'] {
       display: none;
     }
   }
+
+  /* 强制色：底色会被系统背景吃掉，圆点改用系统前景色 */
+  @media (forced-colors: active) {
+    [data-scope='message-feed'][data-part='pending-indicator'] {
+      background: CanvasText;
+    }
+
+    [data-scope='message-feed'][data-part='unread-count'] {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='message-feed'][data-part='scroll-to-end-trigger']:empty::before,
+    [data-scope='message-feed'][data-part='scroll-to-end-trigger']:has(> [data-part='unread-count']:only-child)::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='message-feed'][data-part='scroll-to-end-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before,
+    [data-scope='message-feed'][data-part='scroll-to-end-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):has(> [data-part='unread-count']:only-child)::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='message-feed'][data-part='scroll-to-end-trigger'][data-disabled]:empty::before,
+    [data-scope='message-feed'][data-part='scroll-to-end-trigger'][data-disabled]:has(> [data-part='unread-count']:only-child)::before {
+      background-color: GrayText;
+    }
+  }
 }