@xihan-ui/styles 2.1.0 → 3.0.0

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 时的取值。三档只改这两个私有槽，
        公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明。
@@ -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 四件套（底 + 边 + 影 + 磨砂），这里只把使用者槽映射到桥接槽：
      字形按 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;
   }
 
   /* 减少动效：等待时的光标停在实心不闪，「还在等」这件事仍然看得出来。

package/css/marquee.css

@@ -5,6 +5,9 @@
 
 /* 定义 marquee 样式。 */
 
+/* 暂停开关走动作控件配方；独立皮肤同时传递引入，full bundle 递归去重。 */
+@import '../family/action-control.css';
+
 @layer xihan.motion {
   /*
    * 横轴一条、纵轴一条。四个方向乘两种铺法共八组起止点，若不外提就要写八份几乎一样的关键帧。
@@ -46,11 +49,13 @@
    * 后代式会一路匹配到别人家的节点上去。
    *
    * 一圈的时长 = 一份内容的长度 ÷ 每秒像素数。--xh-_marquee-span 是一份内容在滚动轴上的长度，
-   * 单位像素、写成纯数字。CSS 读不到布局尺寸，这里给的是缺省值；内容明显长于或短于它时，
-   * 由使用者改写 --xh-marquee-span 对齐真实长度，速度才逐字等于每秒那么多像素。
+   * 单位像素、写成纯数字：连接层挂载后实测、写成内联的 --xh-_marquee-measured-span，量到之前
+   * （无布局宿主、首帧）退回缺省值。使用者写了 --xh-marquee-span 以它为准。
    */
   [data-scope='marquee'][data-part='root'] {
-    --xh-_marquee-span: var(--xh-marquee-span, 600);
+    /* 暂停开关的边长：开关用它定尺，两端渐隐按它给开关留出位置，两处同源 */
+    --xh-_marquee-trigger-size: var(--xh-control-h-md);
+    --xh-_marquee-span: var(--xh-marquee-span, var(--xh-_marquee-measured-span, 600));
     --xh-_marquee-speed: var(--xh-marquee-speed, 60);
 
     /* 铺一份时一圈走两倍自身长度：从窗口一侧整段进来，再整段出到另一侧 */
@@ -71,6 +76,9 @@
     --xh-_marquee-from: 100%;
     --xh-_marquee-to: -100%;
 
+    /* 暂停开关压在窗口一端，定位基准是窗口；isolation 把开关的层号关在本组件内，不参与页面级层序 */
+    position: relative;
+    isolation: isolate;
     display: flex;
     overflow: hidden;
     max-inline-size: 100%;
@@ -134,15 +142,65 @@
     --xh-_marquee-to: 0%;
   }
 
-  /* 悬停暂停：只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
+  /*
+   * 两端渐隐：窗口沿滚动方向两端各留一段遮罩，内容从一端淡入、从另一端淡出。
+   * 遮罩只画在窗口上，轨道照常整段移动；遮罩是静态的，不参与动画。
+   * 遮罩的几层取值都经私有槽下发，真正写 mask 的只有这一条：减弱动效与打印只需在同一特指度上盖掉它。
+   */
+  [data-scope='marquee'][data-part='root'][data-fade] {
+    --xh-_marquee-fade-size: var(--xh-marquee-fade-size, var(--xh-space-6));
+    /* 横排沿行内方向：角度乘方向符号，rtl 下行首在右，两端各自仍是淡入与淡出 */
+    --xh-_marquee-fade-dir: calc(90deg * var(--xh-direction-sign));
+    /* 行尾那一段收到哪里为止：没有暂停开关时收到窗口尽头 */
+    --xh-_marquee-fade-reserve: 0px;
+    --xh-_marquee-fade-reserve-size: 0 0;
+    --xh-_marquee-fade-reserve-at: var(--xh-direction-end) center;
+    /* 两层：沿滚动方向的 alpha 坡道，与给暂停开关留出的实心块；两种写法共用这一份 */
+    --xh-_marquee-fade-mask:
+      linear-gradient(var(--xh-_marquee-fade-dir), transparent 0, black var(--xh-_marquee-fade-size), black calc(100% - var(--xh-_marquee-fade-reserve) - var(--xh-_marquee-fade-size)), transparent calc(100% - var(--xh-_marquee-fade-reserve))),
+      linear-gradient(black, black);
+
+    -webkit-mask-image: var(--xh-_marquee-fade-mask);
+    mask-image: var(--xh-_marquee-fade-mask);
+    -webkit-mask-size: 100% 100%, var(--xh-_marquee-fade-reserve-size);
+    mask-size: 100% 100%, var(--xh-_marquee-fade-reserve-size);
+    -webkit-mask-position: 0 0, var(--xh-_marquee-fade-reserve-at);
+    mask-position: 0 0, var(--xh-_marquee-fade-reserve-at);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  [data-scope='marquee'][data-part='root'][data-fade][data-orientation='vertical'] {
+    --xh-_marquee-fade-dir: to bottom;
+  }
+
+  /*
+   * 暂停开关压在行尾一端：行尾那段渐隐收到开关之前，第二层实心遮罩把开关所在那一块整块露出来，
+   * 开关不被淡掉，开关与淡出段之间也不留一条没淡的缝。竖排时开关在块末那一角，露出的是那一角的方块。
+   */
+  [data-scope='marquee'][data-part='root'][data-fade]:has(> [data-scope='marquee'][data-part='autoplay-trigger']:not([hidden])) {
+    --xh-_marquee-fade-reserve: calc(var(--xh-marquee-trigger-inset, var(--xh-space-1)) + var(--xh-_marquee-trigger-size));
+    --xh-_marquee-fade-reserve-size: var(--xh-_marquee-fade-reserve) 100%;
+  }
+
+  [data-scope='marquee'][data-part='root'][data-fade][data-orientation='vertical']:has(> [data-scope='marquee'][data-part='autoplay-trigger']:not([hidden])) {
+    --xh-_marquee-fade-reserve-size: var(--xh-_marquee-fade-reserve) var(--xh-_marquee-fade-reserve);
+    --xh-_marquee-fade-reserve-at: var(--xh-direction-end) bottom;
+  }
+
+  /*
+   * 悬停暂停：只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态。
+   * 指针停在暂停开关上不算：那里显示的是开关自己的状态，按下「继续」时指针还在开关上，
+   * 若照样算悬停，轨道要等指针挪开才动，这一下按了像没按。
+   */
   @media (hover: hover) {
-    [data-scope='marquee'][data-part='root'][data-pause-on-hover]:hover {
+    [data-scope='marquee'][data-part='root'][data-pause-on-hover]:hover:not(:has(> [data-scope='marquee'][data-part='autoplay-trigger']:hover)) {
       --xh-_marquee-play: paused;
     }
   }
 
-  /* 键盘用户没有悬停：焦点落进窗口时同样停住，否则轨道里的链接刚聚焦就被带走了 */
-  [data-scope='marquee'][data-part='root'][data-pause-on-hover]:focus-within {
+  /* 键盘用户没有悬停：焦点落进窗口时同样停住，否则轨道里的链接刚聚焦就被带走了；焦点在暂停开关上同理不算 */
+  [data-scope='marquee'][data-part='root'][data-pause-on-hover]:focus-within:not(:has(> [data-scope='marquee'][data-part='autoplay-trigger']:focus)) {
     --xh-_marquee-play: paused;
   }
 
@@ -151,6 +209,56 @@
     --xh-_marquee-play: paused;
   }
 
+  /*
+   * 暂停开关：压在窗口行尾一端、上下居中；竖排时落在块末那一角。
+   * 窗口是裁切内容的单行，开关放进去会被轨道挤出视野，只能浮在上面。
+   * 盒型、描边、字色与 0.97 按压由动作控件配方按 icon 档的描边档给出；描边档静息不填底，
+   * 这里把底换成不透明的面，悬停 / 按下走同一承载面的不透明阶梯，后面走过的内容才透不上来。
+   */
+  [data-scope='marquee'][data-part='autoplay-trigger'] {
+    --xh-action-bg-rest: var(--xh-marquee-trigger-bg, var(--xh-bg-surface));
+    --xh-action-bg-hover: var(--xh-marquee-trigger-bg-hover, var(--xh-bg-subtle-opaque));
+    --xh-action-bg-pressed: var(--xh-marquee-trigger-bg-active, var(--xh-bg-subtle-hover-opaque));
+    --xh-action-bg-focus-visible: var(--xh-marquee-trigger-bg, var(--xh-bg-surface));
+    /* 作者塞进来的图标跟着 icon 档走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-marquee-icon-size, var(--xh-_action-profile-glyph-size));
+    /* 边长与两端渐隐给开关留的位置同源，都读根上那一支 */
+    --xh-action-visual-size: var(--xh-_marquee-trigger-size);
+
+    position: absolute;
+    z-index: 1;
+    inset-block: 0;
+    inset-inline-end: var(--xh-marquee-trigger-inset, var(--xh-space-1));
+    margin-block: auto;
+  }
+
+  [data-scope='marquee'][data-part='root'][data-orientation='vertical'] > [data-scope='marquee'][data-part='autoplay-trigger'] {
+    inset-block-start: auto;
+    inset-block-end: var(--xh-marquee-trigger-inset, var(--xh-space-1));
+    margin-block: 0;
+  }
+
+  [data-scope='marquee'][data-part='autoplay-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 不给内容时画图标：在走画暂停，停住画播放；图标随动作，与可及名同一口径 */
+  [data-scope='marquee'][data-part='autoplay-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-pause) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-pause) center / contain no-repeat;
+  }
+
+  [data-scope='marquee'][data-part='autoplay-trigger'][data-state='paused']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-play);
+    mask-image: var(--xh-glyph-mark-play);
+  }
+
   /* 轨道：走的是这一层，一圈走完立刻回到起点接着走 */
   [data-scope='marquee'][data-part='content'] {
     display: flex;
@@ -196,6 +304,17 @@
     [data-scope='marquee'][data-part='root'] {
       overflow: auto;
     }
+
+    /* 停下后窗口改成可滚：两端再淡就把可滚内容的首尾藏起来了 */
+    [data-scope='marquee'][data-part='root'][data-fade] {
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
+
+    /* 轨道已经停在起点：没有可停的东西，开关只会挡住可滚的内容 */
+    [data-scope='marquee'][data-part='autoplay-trigger'] {
+      display: none;
+    }
   }
 
   :where([data-motion='reduce']) [data-scope='marquee'][data-part='content'] {
@@ -206,6 +325,15 @@
     overflow: auto;
   }
 
+  :where([data-motion='reduce']) [data-scope='marquee'][data-part='root'][data-fade] {
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+
+  :where([data-motion='reduce']) [data-scope='marquee'][data-part='autoplay-trigger'] {
+    display: none;
+  }
+
   @media print {
     /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
        取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
@@ -218,5 +346,33 @@
     [data-scope='marquee'][data-part='root'] {
       overflow: auto;
     }
+
+    [data-scope='marquee'][data-part='root'][data-fade] {
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
+
+    [data-scope='marquee'][data-part='autoplay-trigger'] {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='marquee'][data-part='autoplay-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='marquee'][data-part='autoplay-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='marquee'][data-part='autoplay-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
   }
 }

package/css/matrix-code.css

@@ -33,7 +33,7 @@
 
     /* 占位与码面之间来回时，底色与那圈描边淡变 */
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 

package/css/mention.css

@@ -6,9 +6,11 @@
 /* Mention 独立皮肤同时传递引入字段视觉盒与浮层集合行；full bundle 递归去重。 */
 @import '../family/field-chrome.css';
 @import '../family/collection-item.css';
+@import '../family/loading-ring.css';
 
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -165,6 +167,13 @@
     display: none;
   }
 
+  /* 多行形态：正文可以换行，框随 rows 定起始高度、不钉单行控件高（家族的多行布局给）；
+     框自己就是 chrome，家族多行布局把上下内衬归零，这里按文本字段多行档同一支令牌补回，只许纵向拉伸 */
+  [data-scope='mention'][data-part='input'][data-xh-field-layout='textarea'] {
+    padding-block: var(--xh-mention-textarea-py, var(--xh-space-2));
+    resize: vertical;
+  }
+
   /* 输入框自身即 chrome，家族按 data-xh-field-input 给的占位色命不中它，占位色仍由本皮肤给 */
   [data-scope='mention'][data-part='input']::placeholder {
     color: var(--xh-mention-placeholder-fg, var(--xh-fg-subtle));
@@ -188,6 +197,15 @@
   }
 
   [data-scope='mention'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-mention-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-mention-content-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-mention-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-mention-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-mention-content-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-mention-content-highlight, var(--xh-_material-highlight));
+
     position: relative;
     display: flex;
     flex-direction: column;
@@ -201,31 +219,13 @@
     max-block-size: min(var(--xh-mention-content-max-h, var(--xh-overlay-max-h)), var(--xh-_mention-available-h));
     padding-block: var(--xh-mention-content-py, var(--xh-space-1));
     padding-inline: var(--xh-mention-content-px, var(--xh-space-1));
-    border: var(--xh-stroke-thin) solid var(--xh-mention-content-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-mention-content-radius, var(--xh-shape-overlay));
-    background: var(--xh-mention-content-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-mention-content-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-mention-content-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-mention-content-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-mention-content-backdrop, var(--xh-material-frosted-backdrop));
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
     pointer-events: auto;
   }
 
-  /* 光效仅属于唯一外壳，不拦截候选或同级状态文字。 */
-  [data-scope='mention'][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-mention-content-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，
@@ -256,7 +256,7 @@
     --xh-collection-inline-padding: var(--xh-mention-item-px, var(--xh-_mention-item-px));
     --xh-collection-gap: var(--xh-mention-item-gap, var(--xh-_mention-gap));
     --xh-collection-font-size: var(--xh-mention-item-font-size, var(--xh-_mention-font-size));
-    --xh-collection-radius: var(--xh-mention-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-mention-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
@@ -338,6 +338,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: var(--xh-_mention-gap);
     grid-area: 1 / 1;
     padding-block: var(--xh-mention-loading-py, var(--xh-space-3));
     padding-inline: var(--xh-mention-loading-px, var(--xh-_mention-item-px));
@@ -351,11 +352,26 @@
     display: none;
   }
 
+  /* 首次加载：文案前一枚加载环，由加载环配方画（连接层投影 data-xh-loading-ring 与 data-loading），
+     直径取所在尺寸档的图标档 */
+  [data-scope='mention'][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));
+  }
+
   [data-scope='mention'][data-part='empty']:empty,
   [data-scope='mention'][data-part='loading']:empty {
     display: none;
   }
 
+  /* 刷新：已有候选时后台在取，保留上一帧，候选按 micro 淡下，数据到了再淡回；在途占位此时让位。
+     淡的是候选不是面：content 是整块磨砂面，整块淡下去面就透了 */
+  [data-scope='mention'][data-part='content'][aria-busy='true'] [data-scope='mention'][data-part='item'] {
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
   /* 手写结构可以把全部候选留在 DOM 里只加 hidden；没有可见 item 也没有状态文案时，
      打开的空 listbox 不画无意义框。closed 不命中，content 仍能完成 Presence 退场。 */
   [data-scope='mention'][data-part='positioner']:not(:has(