@xihan-ui/styles 2.0.0 → 3.0.0

package/css/listbox.css

@@ -7,6 +7,8 @@
 
 @import '../family/action-control.css';
 @import '../family/collection-item.css';
+@import '../family/loading-ring.css';
+@import '../family/motion.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -16,10 +18,10 @@
 
   [data-scope='listbox'][data-part='root'] {
     /* 条目外的字形（空态 / 在途占位里作者塞的图标）按档取尺，缺省 md；条目内的字形由家族随
-       data-xh-collection-size 下发（§6.5）。列表框自绘的状态字形（前导对号所在的标记盒与盒里的勾）不读这支：
+       data-xh-collection-size 下发。列表框自绘的状态字形（行尾对号所在的标记盒与盒里的勾）不读这支：
        它们是指示符，走 --xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size 改接到盒的尺 */
     --xh-icon-size: var(--xh-listbox-icon-size, var(--xh-glyph-size-md));
-    /* 定高小列表的自绘条挂在根上（§6.6）：根是条子的定位盒，轨道底色关掉才不会在列表右缘糊出一条灰带 */
+    /* 定高小列表的自绘条挂在根上：根是条子的定位盒，轨道底色关掉才不会在列表右缘糊出一条灰带 */
     --xh-scrollbar-track-bg: transparent;
 
     /* 尺寸档只换这四个私有槽，条目、分组标题与空态占位都从 root 继承它们，
@@ -117,7 +119,7 @@
   /* 手写结构按真正的条目判断，空白文本与分组标题都不算候选。
      只排除 content 内部的 hidden 祖先；外层浮层退场时不改变本列表的几何。
      禁用条目仍是有效内容，不参与此处排除。 */
-  [data-scope='listbox'][data-part='content']:not(:has(
+  [data-scope='listbox'][data-part='content']:not([data-xh-virtualized]):not(:has(
     [data-scope='listbox'][data-part='item']:not([hidden]):not([data-scope='listbox'][data-part='content'] [hidden] *)
   )),
   [data-scope='listbox'][data-part='group']:not(:has(
@@ -164,11 +166,18 @@
     display: block;
     padding-block: var(--xh-listbox-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-listbox-group-label-px, var(--xh-_listbox-item-px));
-    color: var(--xh-listbox-group-label-fg, var(--xh-fg-subtle));
+    color: var(--xh-listbox-group-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-listbox-group-label-font-size, var(--xh-text-caption-size));
     font-weight: var(--xh-listbox-group-label-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-none);
     user-select: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 刷新：已有选项时后台在取，保留上一帧，条目与分组标题按 micro 淡下，数据到了再淡回；在途占位此时让位。
+     淡的是内容不是面：content 自己是描边面，整块淡下去边也跟着淡 */
+  [data-scope='listbox'][data-part='content'][aria-busy='true'] [data-scope='listbox']:is([data-part='item'], [data-part='group-label']) {
+    opacity: var(--xh-state-disabled-opacity);
   }
 
   [data-scope='listbox'][data-part='group-label'][hidden] {
@@ -185,7 +194,7 @@
     display: block;
     padding-block: var(--xh-listbox-empty-py, var(--xh-space-3));
     padding-inline: var(--xh-listbox-empty-px, var(--xh-_listbox-item-px));
-    color: var(--xh-listbox-empty-fg, var(--xh-fg-subtle));
+    color: var(--xh-listbox-empty-fg, var(--xh-fg-muted));
     font-size: var(--xh-listbox-empty-font-size, var(--xh-_listbox-font-size));
     line-height: var(--xh-leading-none);
     text-align: center;
@@ -202,10 +211,13 @@
 
   /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
   [data-scope='listbox'][data-part='loading'] {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-_listbox-gap);
     padding-block: var(--xh-listbox-loading-py, var(--xh-space-3));
     padding-inline: var(--xh-listbox-loading-px, var(--xh-_listbox-item-px));
-    color: var(--xh-listbox-loading-fg, var(--xh-fg-subtle));
+    color: var(--xh-listbox-loading-fg, var(--xh-fg-muted));
     font-size: var(--xh-listbox-loading-font-size, var(--xh-_listbox-font-size));
     line-height: var(--xh-leading-none);
     text-align: center;
@@ -215,8 +227,17 @@
     display: none;
   }
 
+  /* 首次加载：文案前一枚加载环，由加载环配方画（连接层投影 data-xh-loading-ring 与 data-loading），
+     直径取所在尺寸档的图标档 */
+  [data-scope='listbox'][data-part='loading']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
   /* 取下一页的按钮：铺满一行摆在列表尾——铺满一行的独立动作条目，接 Action Control 的 row 档、
-     ghost 形态（§9.2）：宽度由容器给、高度随内容、按下只换面不缩放；盒几何、悬停 / 按下 / 禁用面、
+     ghost 形态：宽度由容器给、高度随内容、按下只换面不缩放；盒几何、悬停 / 按下 / 禁用面、
      焦点环与粗指针热区全由家族给，白底承载 hover 100 → pressed 200。
      这里只把使用者槽映射到桥接槽并把文案居中：它是一行里唯一的东西，靠起始缘会像一条没对齐的条目 */
   [data-scope='listbox'][data-part='load-more-trigger'] {
@@ -232,7 +253,7 @@
 
     justify-content: center;
     text-align: center;
-    /* row 档允许换行、高度随内容，折行的文案走正文行高（§6.4） */
+    /* row 档允许换行、高度随内容，折行的文案走正文行高 */
     line-height: var(--xh-leading-normal);
   }
 
@@ -240,27 +261,27 @@
     display: none;
   }
 
-  /* 条目走 Collection Item 的 page 语境（页内持久集合，§7.3）：网格、尺寸档、悬停 / 高亮 / 按下面
-     （白底承载 hover 100 → pressed 200）与选中面（品牌淡底 + 淡底前景 + 前导对号，selected+hover 20% /
-     +pressed 28%）都由家族按 aria-selected / aria-disabled 给出；禁用面（字色降级、not-allowed、不换面）
-     也归家族。这里只把公开槽映射到桥接槽，不复制任何状态选择器。
-     page 集合坐在 surface 白底上，前景走 fg-default 而不是浮层的 frosted 前景 */
+  /* 条目走 Collection Item 的 overlay 语境，与树选择同一种选中读法：网格、尺寸档、悬停 / 高亮 / 按下面
+     （白底承载 hover 100 → pressed 200）由家族给，选中不换面、不换字色，只在行尾亮对号，
+     选中叠悬停 / 按下沿用同一条阶梯；禁用面（字色降级、not-allowed、不换面）也归家族。
+     这里只把公开槽映射到桥接槽，不复制任何状态选择器。
+     列表框坐在 surface 白底上，前景走 fg-default 而不是浮层的 frosted 前景 */
   [data-scope='listbox'][data-part='item'] {
     --xh-collection-block-padding: var(--xh-listbox-item-py, var(--xh-_listbox-item-py));
     --xh-collection-inline-padding: var(--xh-listbox-item-px, var(--xh-_listbox-item-px));
     --xh-collection-gap: var(--xh-listbox-item-gap, var(--xh-_listbox-gap));
     --xh-collection-font-size: var(--xh-listbox-item-font-size, var(--xh-_listbox-font-size));
-    --xh-collection-radius: var(--xh-listbox-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-listbox-item-radius, var(--xh-shape-inset));
     /* 作者的图标尺槽经桥接槽下发到条目，家族缺省按 data-xh-collection-size 取档 */
     --xh-collection-glyph-size: var(--xh-listbox-icon-size, var(--xh-_collection-glyph-size));
     --xh-collection-fg-rest: var(--xh-listbox-item-fg, var(--xh-fg-default));
     --xh-collection-fg-hover: var(--xh-listbox-item-fg, var(--xh-fg-default));
     --xh-collection-fg-keyboard-highlight: var(--xh-listbox-item-fg, var(--xh-fg-default));
     --xh-collection-fg-pressed: var(--xh-listbox-item-fg, var(--xh-fg-default));
-    --xh-collection-fg-selected: var(--xh-listbox-item-fg-selected, var(--xh-fg-on-brand-subtle));
-    --xh-collection-fg-selected-hover: var(--xh-listbox-item-fg-selected, var(--xh-fg-on-brand-subtle));
-    --xh-collection-fg-selected-highlight: var(--xh-listbox-item-fg-selected, var(--xh-fg-on-brand-subtle));
-    --xh-collection-fg-selected-pressed: var(--xh-listbox-item-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected: var(--xh-listbox-item-fg-selected, var(--xh-listbox-item-fg, var(--xh-fg-default)));
+    --xh-collection-fg-selected-hover: var(--xh-listbox-item-fg-selected, var(--xh-listbox-item-fg, var(--xh-fg-default)));
+    --xh-collection-fg-selected-highlight: var(--xh-listbox-item-fg-selected, var(--xh-listbox-item-fg, var(--xh-fg-default)));
+    --xh-collection-fg-selected-pressed: var(--xh-listbox-item-fg-selected, var(--xh-listbox-item-fg, var(--xh-fg-default)));
     --xh-collection-font-weight-selected: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-regular));
     --xh-collection-font-weight-selected-hover: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-regular));
     --xh-collection-font-weight-selected-highlight: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-regular));
@@ -268,7 +289,9 @@
     --xh-collection-bg-hover: var(--xh-listbox-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-listbox-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-pressed: var(--xh-listbox-item-bg-pressed, var(--xh-bg-subtle-hover));
-    --xh-collection-bg-selected: var(--xh-listbox-item-bg-selected, var(--xh-bg-brand-subtle));
+    --xh-collection-bg-selected-hover: var(--xh-listbox-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-selected-highlight: var(--xh-listbox-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-selected-pressed: var(--xh-listbox-item-bg-pressed, var(--xh-bg-subtle-hover));
     /* data-highlighted 跟的是连接层记的焦点条目（指针点选也会落焦）：只换面，焦点环在 :focus-visible 下再接回 */
     --xh-collection-outline-keyboard-highlight: transparent;
     --xh-collection-outline-selected-highlight: transparent;
@@ -307,10 +330,10 @@
     text-overflow: ellipsis;
   }
 
-  /* 勾选标记落在家族网格的 indicator 列（page 语境下前置为前导对号）；显隐与颜色由家族按选中态给，
+  /* 勾选标记落在家族网格行尾的 indicator 列（page 与 overlay 同位）；显隐与颜色由家族按选中态给，
      未选中时占位不塌，切换选中不引起行宽抖动。
-     盒与盒里的勾是指示符（§6.5）：盒按指示符档取尺，并在自己身上把 --xh-icon-size 改接到盒的尺，皮肤画的
-     兜底勾与作者塞进盒里的 XhIcon 读同一把尺、与盒同边长（前导对号不是勾选格，不取 × 0.75，与 Menu 族同口径）；
+     盒与盒里的勾是指示符：盒按指示符档取尺，并在自己身上把 --xh-icon-size 改接到盒的尺，皮肤画的
+     兜底勾与作者塞进盒里的 XhIcon 读同一把尺、与盒同边长（对号不是勾选格，不取 × 0.75，与 Menu 族同口径）；
      不读家族按档下发到行的 --xh-icon-size——那支只管作者放进条目里的图标，按图标档取的 20px 比 16 / 14 的指示符档大一圈 */
   [data-scope='listbox'][data-part='item-indicator'] {
     --xh-icon-size: var(--xh-listbox-item-indicator-size, var(--xh-control-indicator-size));
@@ -338,4 +361,30 @@
     -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
+
+  @media print {
+    /* 打印默认丢底色，而对号是遮罩出来的一块底色：行本就不换面，丢了它选中在纸上就没了踪影 */
+    [data-scope='listbox'][data-part='item-indicator'] {
+      print-color-adjust: exact;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='listbox'][data-part='item-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='listbox'][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='listbox'][data-part='item-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='listbox'][data-part='item']:is([aria-disabled='true'], [data-disabled]) [data-scope='listbox'][data-part='item-indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/loading-bar.css

@@ -40,11 +40,12 @@
     display: none;
   }
 
-  /* 冲到 100 之后进入淡出：机器会在淡出窗口走完之前一直停在 finishing，这段过渡才有时间跑完。
-     窗口（machine 的 LOADING_BAR_FADE_DURATION，200ms）比过渡本身（motion-duration-exit，120ms）
-     宽出一截是有意的余量；两者不是同一个数，改窗口时只要保证它仍不短于过渡 */
+  /* 走满之后才淡出：complete 期间根节点保持不透明，进度段冲到头的平移播完，机器才进 finishing。
+     满格先停一拍（延迟一个 micro）再淡：用户要看清「走完了」，一到头就开始淡读起来像中途断掉。
+     机器等的是浏览器实际起播的这段过渡（含延迟），不按毫秒猜 */
   [data-scope='loading-bar'][data-part='root'][data-state='finishing'] {
     opacity: 0;
+    transition-delay: var(--xh-motion-duration-micro);
   }
 
   /* 背景槽。默认透明：顶部加载条通常直接压在页面顶边上，一条贯穿整屏的浅色底
@@ -57,17 +58,24 @@
   }
 
   /*
-   * 进度段。宽度那条轴（inline-size）由连接层写进内联样式，这里绝不重复写。
-   * 背景色不走内联：要别的颜色改 --xh-loading-bar-range 这个槽，或者换语气。
+   * 进度段。铺满轨道，按连接层交出的比例往行首平移、由轨道裁掉：推进只走合成，
+   * 不重排也不重绘；末端的亮边跟着它一起走。背景色不走内联：要别的颜色改 --xh-loading-bar-range 这个槽，或者换语气。
    *
    * 语气取装饰档 --xh-_tone-soft：那一档压在画布上够 3:1，细带才看得出来。
    * 槽位由 root 上的 data-tone 声明，继承下来。
    * 没写 data-tone 时该槽没被声明，退回原来的品牌色。
    */
   [data-scope='loading-bar'][data-part='range'] {
+    inline-size: 100%;
     block-size: 100%;
     background: var(--xh-loading-bar-range, var(--xh-_tone-soft, var(--xh-bg-brand)));
-    transition: inline-size var(--xh-loading-bar-speed, var(--xh-motion-duration-enter)) var(--xh-motion-ease-continuous);
+    translate: calc((var(--xh-_loading-bar-value, 0) - 1) * 100%) 0;
+    transition: translate var(--xh-loading-bar-speed, var(--xh-motion-duration-move)) var(--xh-motion-ease-continuous);
+  }
+
+  /* translate 只认物理方向：RTL 下行首在右边，平移方向翻转 */
+  [data-scope='loading-bar'][data-part='range']:dir(rtl) {
+    translate: calc((1 - var(--xh-_loading-bar-value, 0)) * 100%) 0;
   }
 
   /* 渲染了亮边才把进度段变成定位面：亮边贴在它的末端 */
@@ -94,7 +102,7 @@
     );
   }
 
-  /* 条子还没起步时亮边一起收着：0% 宽的进度段末端不该先亮出一道边 */
+  /* 条子还没起步时亮边一起收着：进度为 0 的末端不该先亮出一道边 */
   [data-scope='loading-bar'][data-part='peg'][data-state='idle'] {
     opacity: 0;
   }
@@ -103,19 +111,25 @@
     display: none;
   }
 
-  /* 减少动效：宽度与淡出都立刻到位。进度本身照常推进，只是不再有过渡的过程——
-     一条按 200ms 一拍持续变宽的带子正是最容易引发不适的那种动效。
+  /* 减少动效：作者写进两个时长槽的值不作数，退回令牌——进度段的平移随几何时长立刻到位，
+     收尾的淡出保留减弱档的那一小段。一条按 200ms 一拍持续推进的带子正是最容易引发不适的那种动效。
      两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
   @media (prefers-reduced-motion: reduce) {
-    [data-scope='loading-bar'][data-part='root'],
+    [data-scope='loading-bar'][data-part='root'] {
+      transition-duration: var(--xh-motion-duration-exit);
+    }
+
     [data-scope='loading-bar'][data-part='range'] {
-      transition: none;
+      transition-duration: var(--xh-motion-duration-move);
     }
   }
 
-  :where([data-motion='reduce']) [data-scope='loading-bar'][data-part='root'],
+  :where([data-motion='reduce']) [data-scope='loading-bar'][data-part='root'] {
+    transition-duration: var(--xh-motion-duration-exit);
+  }
+
   :where([data-motion='reduce']) [data-scope='loading-bar'][data-part='range'] {
-    transition: none;
+    transition-duration: var(--xh-motion-duration-move);
   }
 
   @media print {

package/css/log.css

@@ -5,25 +5,11 @@
 
 /* 定义 log 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 /* 独立皮肤同时传递引入回底钮的动作控件配方；full bundle 递归去重。 */
 @import '../family/action-control.css';
-
-@layer xihan.motion {
-  /* 关键帧写在本文件里：动画名的查找只认「文档里有没有这个名字」，
-     引用别处文件里的名字时那份文件不一定在场，动画会静默地整个不跑。
-     幅度与缩放走令牌，减弱动效时由令牌层归零 */
-  @keyframes xh-log-button-in {
-    from {
-      opacity: 0;
-      scale: var(--xh-motion-scale-enter);
-    }
-
-    to {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-}
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -34,7 +20,7 @@
   /* 行高是本组件的定尺基准：视口按行数定高、每行排版，都从这一个槽位来。
      它的兜底值须与连接层内联高度里用的那份逐字一致，否则 rows 算出来的高度对不上行。 */
   [data-scope='log'][data-part='root'] {
-    --xh-_log-line-h: var(--xh-log-line-height, 1.25rem);
+    --xh-_log-line-h: var(--xh-log-line-height, var(--xh-text-code-leading));
 
     /* 尺寸缺省档：不写 data-size 时的取值。三档只改这两个私有槽，
        公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明。
@@ -42,7 +28,7 @@
     --xh-_log-font-size: var(--xh-text-secondary-size);
     --xh-_log-content-px: var(--xh-space-3);
 
-    /* 一张静态内容面：--xh-border-default 描边 + surface 底 + 无影（§5.3 描边与淡底互斥），
+    /* 一张静态内容面：--xh-border-default 描边 + surface 底 + 无影（描边与淡底互斥），
        与 code-view / diff-view / json-viewer 同走 solid */
     position: relative;
     display: flex;
@@ -79,6 +65,26 @@
     scrollbar-gutter: stable;
   }
 
+  /* 接了虚拟滚动：视口只定高、不滚动，里面那层 Virtualizer 视口铺满它、由它滚；
+     行放在 Virtualizer 的条目里没有 content 包裹层，等宽排版落在视口上由行继承 */
+  [data-scope='log'][data-part='viewport'][data-virtualized] {
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    overflow: hidden;
+    /* 不滚动的视口不留滚动条空道：空道由里面那层 Virtualizer 视口自己管 */
+    scrollbar-gutter: auto;
+    font-family: var(--xh-log-font, var(--xh-font-family-mono));
+    font-size: var(--xh-log-font-size, var(--xh-_log-font-size));
+  }
+
+  [data-scope='log'][data-part='viewport'][hidden] {
+    display: none;
+  }
+
+  [data-scope='log'][data-part='viewport'][data-virtualized] [data-scope='log'][data-part='line'] {
+    padding-inline: var(--xh-log-line-px, var(--xh-log-content-px, var(--xh-_log-content-px)));
+  }
+
   /* 取行期间指针给出忙的反馈 */
   [data-scope='log'][data-part='root'][data-loading] [data-scope='log'][data-part='viewport'] {
     cursor: progress;
@@ -121,31 +127,96 @@
     color: var(--xh-log-level-error-fg, var(--xh-fg-danger));
   }
 
+  /* ANSI 着色：八种颜色映射到语义令牌（红、绿、黄、蓝落在语气前景，品红、青借代码着色的关键字与字符串色，
+     黑与白落在正文与次要前景），高亮色（90–97）与基础色同一档，只由 data-bright 记下。
+     颜色盖过行的级别色；粗体、斜体、下划线与暗淡各自一个开关 */
+  [data-scope='log'][data-part='segment'][data-fg='black'] {
+    color: var(--xh-log-ansi-black, var(--xh-fg-default));
+  }
+
+  [data-scope='log'][data-part='segment'][data-fg='red'] {
+    color: var(--xh-log-ansi-red, var(--xh-fg-danger));
+  }
+
+  [data-scope='log'][data-part='segment'][data-fg='green'] {
+    color: var(--xh-log-ansi-green, var(--xh-fg-success));
+  }
+
+  [data-scope='log'][data-part='segment'][data-fg='yellow'] {
+    color: var(--xh-log-ansi-yellow, var(--xh-fg-warning));
+  }
+
+  [data-scope='log'][data-part='segment'][data-fg='blue'] {
+    color: var(--xh-log-ansi-blue, var(--xh-fg-info));
+  }
+
+  [data-scope='log'][data-part='segment'][data-fg='magenta'] {
+    color: var(--xh-log-ansi-magenta, var(--xh-syntax-keyword));
+  }
+
+  [data-scope='log'][data-part='segment'][data-fg='cyan'] {
+    color: var(--xh-log-ansi-cyan, var(--xh-syntax-string));
+  }
+
+  [data-scope='log'][data-part='segment'][data-fg='white'] {
+    color: var(--xh-log-ansi-white, var(--xh-fg-muted));
+  }
+
+  [data-scope='log'][data-part='segment'][data-bold] {
+    font-weight: var(--xh-log-ansi-bold-weight, var(--xh-font-weight-semibold));
+  }
+
+  /* 暗淡只在没指定颜色时换成次要前景：指定了颜色的那一段保留自己的颜色 */
+  [data-scope='log'][data-part='segment'][data-dim]:not([data-fg]) {
+    color: var(--xh-log-ansi-dim-fg, var(--xh-fg-subtle));
+  }
+
+  [data-scope='log'][data-part='segment'][data-italic] {
+    font-style: italic;
+  }
+
+  [data-scope='log'][data-part='segment'][data-underline] {
+    text-decoration: underline;
+  }
+
   /* 回到底部：浮在视口右下角，收起时不卸载只隐藏。盒型、悬停 / 按下面与缩放由 Action Control 的
      floating 档给（circle 正方盒、ghost 形态：白底承载 hover 100 → pressed 200）；材质随角落浮钮族走
-     frosted 四件套（底 + 边 + 影 + 磨砂，§8），这里只把使用者槽映射到桥接槽：
+     frosted 四件套（底 + 边 + 影 + 磨砂），这里只把使用者槽映射到桥接槽：
      字形按 xs 档取 --xh-_action-profile-glyph-size（16px），与 back-top 同一把尺 */
   [data-scope='log'][data-part='scroll-to-end-trigger'] {
-    --xh-_log-scroll-to-end-trigger-shadow: var(--xh-log-scroll-to-end-trigger-shadow, var(--xh-material-frosted-shadow));
+    /* 面走材质家族配方（family/material.css）：frosted 档的底、交互阶梯、描边、投影、1px 顶光与背景滤镜，
+       liquid 档由配方换成液态面；这里把使用者槽接到 Action Control 的桥接槽 */
+    --xh-action-bg-rest: var(--xh-log-scroll-to-end-trigger-bg, var(--xh-_material-bg));
+    --xh-action-bg-hover: var(--xh-log-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-log-scroll-to-end-trigger-bg, var(--xh-_material-bg-focus));
+    --xh-action-bg-disabled: var(--xh-log-scroll-to-end-trigger-bg, var(--xh-_material-bg));
+    --xh-action-fg-rest: var(--xh-log-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-fg-hover: var(--xh-log-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-fg-pressed: var(--xh-log-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-fg-focus-visible: var(--xh-log-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-border-rest: var(--xh-log-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-hover: var(--xh-log-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-pressed: var(--xh-log-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-focus-visible: var(--xh-log-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-disabled: var(--xh-log-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-shadow-rest: var(--xh-log-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-hover: var(--xh-log-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-pressed: var(--xh-log-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-focus-visible: var(--xh-log-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-disabled: var(--xh-log-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-log-scroll-to-end-trigger-size, var(--xh-_action-profile-visual-size));
     --xh-action-radius: var(--xh-log-scroll-to-end-trigger-radius, var(--xh-shape-circle));
-    --xh-action-bg-rest: var(--xh-log-scroll-to-end-trigger-bg, var(--xh-material-frosted-bg));
-    --xh-action-bg-hover: var(--xh-log-scroll-to-end-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
-    --xh-action-border-rest: var(--xh-log-scroll-to-end-trigger-border, var(--xh-material-frosted-border));
-    --xh-action-border-hover: var(--xh-log-scroll-to-end-trigger-border, var(--xh-material-frosted-border));
-    --xh-action-border-pressed: var(--xh-log-scroll-to-end-trigger-border, var(--xh-material-frosted-border));
-    --xh-action-border-focus-visible: var(--xh-log-scroll-to-end-trigger-border, var(--xh-material-frosted-border));
-    --xh-action-shadow-rest: var(--xh-_log-scroll-to-end-trigger-shadow);
-    --xh-action-shadow-hover: var(--xh-_log-scroll-to-end-trigger-shadow);
-    --xh-action-shadow-pressed: var(--xh-_log-scroll-to-end-trigger-shadow);
-    --xh-action-fg-rest: var(--xh-log-scroll-to-end-trigger-fg, var(--xh-material-frosted-fg));
     --xh-icon-size: var(--xh-log-icon-size, var(--xh-_action-profile-glyph-size));
 
     position: absolute;
     inset-block-end: var(--xh-log-scroll-to-end-trigger-inset, var(--xh-space-3));
     inset-inline-end: var(--xh-log-scroll-to-end-trigger-inset, var(--xh-space-3));
-    -webkit-backdrop-filter: var(--xh-material-frosted-backdrop);
-    backdrop-filter: var(--xh-material-frosted-backdrop);
   }
 
   /* 连接层收起按钮时写 hidden 属性，上面的 display 会盖掉 UA 规则，这里补回 */
@@ -153,9 +224,15 @@
     display: none;
   }
 
-  /* 收起不卸载，冒出来时靠这条进场动画；不写 display，可见性归上面那条 [hidden] 管 */
+  /* 收起不卸载：离底时冒出来播进场，回底时先播完退场、连接层才写 hidden 藏起。
+     不写 display，可见性归上面那条 [hidden] 管；退场途中不再接指针 */
   [data-scope='log'][data-part='scroll-to-end-trigger'][data-state='visible'] {
-    animation: xh-log-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='log'][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;
   }
 
   /* 没写内容就由皮肤画一枚向下的字形；作者往按钮里塞了自己的图形，这条规则即不命中。
@@ -207,4 +284,23 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='log'][data-part='scroll-to-end-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='log'][data-part='scroll-to-end-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='log'][data-part='scroll-to-end-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/markdown-stream.css

@@ -93,7 +93,7 @@
 
   /* 还没出字的那一段页面上只有这一竖，让它闪着，等的人才分得清是在等还是卡住了 */
   [data-scope='markdown-stream'][data-part='root'][data-caret]::after {
-    animation: xh-markdown-stream-caret var(--xh-markdown-stream-caret-duration, var(--xh-caret-duration)) steps(1, end) infinite;
+    animation: xh-markdown-stream-caret var(--xh-markdown-stream-caret-duration, var(--xh-motion-loop-caret)) steps(1, end) infinite;
   }
 
   /* 减少动效：等待时的光标停在实心不闪，「还在等」这件事仍然看得出来。