@xihan-ui/styles 2.0.0 → 3.0.0

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;
   }

package/css/back-top.css

@@ -6,6 +6,8 @@
 /* 定义 back top 样式。 */
 
 @import '../family/action-control.css';
+@import '../family/motion.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -29,21 +31,8 @@
     z-index: var(--xh-back-top-layer, var(--xh-layer-sticky));
   }
 
-  /* —— 形态：缺省 outline 的磨砂面 ——
-     触发器接 Action Control floating 档，solid / subtle / ghost 的面由形态矩阵按 data-xh-action-variant 给；
-     缺省 outline（连接层不传 variant 时显式落）与悬浮动作钮同属 M2 磨砂面：背景、边缘、顶光、投影与磨砂
-     从一份配方取，高对比、减少透明度、打印和强制色才能沿同一令牌通道降级。钮浮在正文之上，透空的面在
-     任何内容上都读不出边界，所以 outline 这一档面留着。三支私有槽写在壳上：check-elevation-role 按赋值点
-     认海拔角色，float-button 同款 */
-  [data-scope='back-top'][data-part='root'][data-variant='outline'] {
-    --xh-_back-top-bg: var(--xh-material-frosted-bg);
-    --xh-_back-top-fg: var(--xh-material-frosted-fg);
-    --xh-_back-top-border: var(--xh-material-frosted-border);
-    --xh-_back-top-shadow: var(--xh-material-frosted-shadow);
-  }
-
   /* —— 触发器 ——
-     浮在内容之上的单图标圆钮，接 Action Control floating 档（§4.1）：盒型（md = box-lg 48px，圆形）、
+     浮在内容之上的单图标圆钮，接 Action Control floating 档：盒型（md = box-lg 48px，圆形）、
      四态面、0.97 按压与 44px 命中区由家族配方按 data-xh-action-variant / -size 给出。
      这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射。
      整件只有这一颗按钮，槽名与其余一样不带部件段（照 float-button 的 --xh-float-button-size） */
@@ -62,7 +51,7 @@
     --xh-action-border-pressed: var(--xh-back-top-border-hover, var(--xh-_action-variant-border-pressed));
     --xh-action-border-focus-visible: var(--xh-back-top-border, var(--xh-_action-variant-border-focus-visible));
     --xh-action-border-disabled: var(--xh-back-top-border, var(--xh-_action-variant-border-disabled));
-    /* 矩阵各态无影（§8.3 淡底与阴影互斥）；outline 那一档的磨砂投影在下面另桥接 */
+    /* 矩阵各态无影（淡底与阴影互斥）；outline 那一档的磨砂投影在下面另桥接 */
     --xh-action-shadow-rest: var(--xh-back-top-shadow, none);
     --xh-action-shadow-hover: var(--xh-back-top-shadow, none);
     --xh-action-shadow-pressed: var(--xh-back-top-shadow, none);
@@ -74,38 +63,39 @@
     --xh-icon-size: var(--xh-back-top-icon-size, var(--xh-_action-profile-glyph-size));
   }
 
-  /* 缺省 outline 是 M2 磨砂面：背景、边缘、顶光、投影与磨砂从同一份配方取。
-     悬停 / 按下的底走矩阵 outline 列的画布阶梯（100 → 200），边缘与投影不动；
-     键盘聚焦时铺配方的实体 focus surface——透明面上的内收环不能依赖页面底色；
-     置灰只换字色（矩阵 disabled 列的前景），面仍留着 */
+  /* 缺省 outline 是 frosted 材质面：连接层只在这一档投影 data-xh-material，面由材质家族配方给——
+     底、描边、投影、1px 顶光与背景滤镜一份取值，高对比、减少透明度、打印和强制色沿同一令牌通道降级。
+     悬停 / 按下换不透明的淡底一档、二档，边缘与投影不动；键盘聚焦时铺实体 focus surface——透明面上的
+     内收环不能依赖页面底色；置灰只换字色，面仍留着 */
   [data-scope='back-top'][data-part='root'][data-variant='outline']
     [data-scope='back-top'][data-part='trigger'] {
-    --xh-action-bg-rest: var(--xh-back-top-bg, var(--xh-_back-top-bg));
-    --xh-action-bg-focus-visible: var(--xh-back-top-bg, var(--xh-material-frosted-focus-surface));
-    --xh-action-bg-disabled: var(--xh-back-top-bg, var(--xh-_back-top-bg));
-    --xh-action-fg-rest: var(--xh-back-top-fg, var(--xh-_back-top-fg));
-    --xh-action-fg-hover: var(--xh-back-top-fg, var(--xh-_back-top-fg));
-    --xh-action-fg-pressed: var(--xh-back-top-fg, var(--xh-_back-top-fg));
-    --xh-action-fg-focus-visible: var(--xh-back-top-fg, var(--xh-_back-top-fg));
-    --xh-action-border-rest: var(--xh-back-top-border, var(--xh-_back-top-border));
-    --xh-action-border-hover: var(--xh-back-top-border-hover, var(--xh-_back-top-border));
-    --xh-action-border-pressed: var(--xh-back-top-border-hover, var(--xh-_back-top-border));
-    --xh-action-border-focus-visible: var(--xh-back-top-border, var(--xh-_back-top-border));
-    --xh-action-border-disabled: var(--xh-back-top-border, var(--xh-_back-top-border));
-    --xh-action-shadow-rest: var(--xh-back-top-shadow, var(--xh-_back-top-shadow));
-    --xh-action-shadow-hover: var(--xh-back-top-shadow, var(--xh-_back-top-shadow));
-    --xh-action-shadow-pressed: var(--xh-back-top-shadow, var(--xh-_back-top-shadow));
-    --xh-action-shadow-focus-visible: var(--xh-back-top-shadow, var(--xh-_back-top-shadow));
-    --xh-action-shadow-disabled: var(--xh-back-top-shadow, var(--xh-_back-top-shadow));
+    /* 面走材质家族配方（family/material.css）：frosted 档的底、交互阶梯、描边、投影、1px 顶光与背景滤镜，
+       liquid 档由配方换成液态面；这里把使用者槽接到 Action Control 的桥接槽 */
+    --xh-action-bg-rest: var(--xh-back-top-bg, var(--xh-_material-bg));
+    --xh-action-bg-hover: var(--xh-back-top-bg-hover, var(--xh-_material-bg-hover));
+    --xh-action-bg-pressed: var(--xh-back-top-bg-active, var(--xh-_material-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-back-top-bg, var(--xh-_material-bg-focus));
+    --xh-action-bg-disabled: var(--xh-back-top-bg, var(--xh-_material-bg));
+    --xh-action-fg-rest: var(--xh-back-top-fg, var(--xh-_material-fg));
+    --xh-action-fg-hover: var(--xh-back-top-fg, var(--xh-_material-fg));
+    --xh-action-fg-pressed: var(--xh-back-top-fg, var(--xh-_material-fg));
+    --xh-action-fg-focus-visible: var(--xh-back-top-fg, var(--xh-_material-fg));
+    --xh-action-border-rest: var(--xh-back-top-border, var(--xh-_material-border));
+    --xh-action-border-hover: var(--xh-back-top-border-hover, var(--xh-_material-border));
+    --xh-action-border-pressed: var(--xh-back-top-border-hover, var(--xh-_material-border));
+    --xh-action-border-focus-visible: var(--xh-back-top-border, var(--xh-_material-border));
+    --xh-action-border-disabled: var(--xh-back-top-border, var(--xh-_material-border));
+    --xh-action-shadow-rest: var(--xh-back-top-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-hover: var(--xh-back-top-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-pressed: var(--xh-back-top-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-focus-visible: var(--xh-back-top-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-disabled: var(--xh-back-top-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);
     /* M2 顶光走配方的高光通道：实心、淡色与透空形态各有自身表面，不能把磨砂高光误铺上去 */
-    --xh-action-highlight-rest: var(--xh-material-frosted-highlight);
-    --xh-action-highlight-hover: var(--xh-material-frosted-highlight);
-    --xh-action-highlight-pressed: var(--xh-material-frosted-highlight);
-    --xh-action-highlight-focus-visible: var(--xh-material-frosted-highlight);
-    --xh-action-highlight-disabled: var(--xh-material-frosted-highlight);
-
-    -webkit-backdrop-filter: var(--xh-material-frosted-backdrop);
-    backdrop-filter: var(--xh-material-frosted-backdrop);
   }
 
   /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
@@ -127,6 +117,16 @@
     mask: var(--xh-glyph-mark-chevron-up) center / contain no-repeat;
   }
 
+  /* 过线露面时弹出；退回线内时先播完退场、连接层才给根写 hidden 收起。退场途中不再接指针 */
+  [data-scope='back-top'][data-part='trigger'][data-state='visible'] {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  [data-scope='back-top'][data-part='trigger'][data-state='hidden'] {
+    pointer-events: none;
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
   /* 配方声明过 display，会盖掉 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='back-top'][data-part='trigger'][hidden] {
@@ -139,4 +139,23 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='back-top'][data-part='trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='back-top'][data-part='trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='back-top'][data-part='trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/badge.css

@@ -5,6 +5,9 @@
 
 /* 定义 badge 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='badge'] {
@@ -30,9 +33,11 @@
      不是药丸那套内衬与行高：那是 tag 的活 */
   [data-scope='badge'][data-part='indicator'] {
     /* 每一档的盒都要大于字号：两位数在等高的盒里会被撑破。
-       字号刻度最小就是 12px，所以往上抬盒子而不是往下压字 */
+       字号刻度最小就是 12px，所以往上抬盒子而不是往下压字。
+       盒只比字高一档：20px 扣掉两道 1px 描边还剩 18px 内高，13px 的两位数与「99+」立得住，
+       角标又不会大过它贴着的宿主文字 */
     --xh-_badge-dot: var(--xh-space-2);
-    --xh-_badge-min: var(--xh-space-7);
+    --xh-_badge-min: var(--xh-space-5);
     --xh-_badge-px: var(--xh-space-1);
     --xh-_badge-font: var(--xh-text-secondary-size);
 
@@ -66,7 +71,7 @@
   }
 
   /* 圆点形态：只表示「有」，不表示「有几个」——收掉内边距与文字盒。
-     宽高同槽的正方盒按身份取 circle（§6.3），不沿用计数档的胶囊冒充圆：
+     宽高同槽的正方盒按身份取 circle，不沿用计数档的胶囊冒充圆：
      胶囊那 9999px 在正方盒上虽也画成圆，形状身份却写错了档，作者按圆点覆盖圆角时无处落手。
      圆点直径只有六到十像素，一像素的内高光会占去顶上一大截、读成缺了一圈的描边，这里收掉 */
   [data-scope='badge'][data-part='indicator'][data-dot] {
@@ -79,29 +84,73 @@
     font-size: 0;
   }
 
+  /* 呼吸：圆点表达正在进行、给不出进度的状态（直播、录制、通话中）。
+     明暗与缩放的起伏持续到状态结束；外扩光环画在 ::after 上，同周期播 3 轮后停在不可见。
+     数字角标不呼吸：连接层只在圆点档投影 data-pulse，明暗起伏会压低数字的对比度 */
+  [data-scope='badge'][data-part='indicator'][data-pulse] {
+    animation: xh-breathe var(--xh-motion-loop-breathe) var(--xh-motion-ease-breathe) infinite;
+  }
+
+  [data-scope='badge'][data-part='indicator'][data-pulse]::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='badge'][data-part='indicator'][data-pulse],
+    [data-scope='badge'][data-part='indicator'][data-pulse]::after {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='badge'][data-part='indicator'][data-pulse],
+  :where([data-motion='reduce']) [data-scope='badge'][data-part='indicator'][data-pulse]::after {
+    animation: none;
+  }
+
+  /* 出现与消失：计数从无到有时原地弹出；清零时缩小淡出，播完连接层才写 hidden，退场那几帧照清零前的数字写。
+     首帧就在的角标直接呈现（data-instant）；呼吸的圆点不叠进场，两段明暗会打架。
+     写在呼吸之后：退场压过呼吸。减弱动效下缩放归一、只剩淡变 */
+  [data-scope='badge'][data-part='indicator'][data-state='visible']:not([data-instant], [data-pulse]) {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  [data-scope='badge'][data-part='indicator'][data-state='hidden'] {
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
   /* —— 落点 —— */
-  /* 用 inset 的逻辑属性写，rtl 下 end 自动落到左边；translate 让角标压住宿主的角 */
+  /* 用 inset 的逻辑属性写，rtl 下 end 自动落到左边；translate 让角标压住宿主的角。
+     两个偏移槽微调角标离角多远：正值朝行内末端、块末端挪（rtl 下行内末端在左），
+     宿主是圆形头像、角上留白多时往里收一点。四个角各按贴哪条边换正负号，同一个值在哪个角都朝同一个方向挪 */
   [data-scope='badge'][data-part='indicator'][data-placement='top-end'] {
-    inset-block-start: 0;
-    inset-inline-end: 0;
+    inset-block-start: var(--xh-badge-offset-block, var(--xh-space-0));
+    inset-inline-end: calc(-1 * var(--xh-badge-offset-inline, var(--xh-space-0)));
     translate: 25% -25%;
   }
 
   [data-scope='badge'][data-part='indicator'][data-placement='top-start'] {
-    inset-block-start: 0;
-    inset-inline-start: 0;
+    inset-block-start: var(--xh-badge-offset-block, var(--xh-space-0));
+    inset-inline-start: var(--xh-badge-offset-inline, var(--xh-space-0));
     translate: -25% -25%;
   }
 
   [data-scope='badge'][data-part='indicator'][data-placement='bottom-end'] {
-    inset-block-end: 0;
-    inset-inline-end: 0;
+    inset-block-end: calc(-1 * var(--xh-badge-offset-block, var(--xh-space-0)));
+    inset-inline-end: calc(-1 * var(--xh-badge-offset-inline, var(--xh-space-0)));
     translate: 25% 25%;
   }
 
   [data-scope='badge'][data-part='indicator'][data-placement='bottom-start'] {
-    inset-block-end: 0;
-    inset-inline-start: 0;
+    inset-block-end: calc(-1 * var(--xh-badge-offset-block, var(--xh-space-0)));
+    inset-inline-start: var(--xh-badge-offset-inline, var(--xh-space-0));
     translate: -25% 25%;
   }
 
@@ -132,9 +181,10 @@
     --xh-_badge-font: var(--xh-text-caption-size);
   }
 
+  /* 大号只往上抬一级：盒 24px、字 14px，仍是角标，不长成与宿主同级的一枚按钮 */
   [data-scope='badge'][data-part='indicator'][data-size='lg'] {
     --xh-_badge-dot: var(--xh-space-2_5);
-    --xh-_badge-min: var(--xh-space-8);
+    --xh-_badge-min: var(--xh-space-6);
     --xh-_badge-px: var(--xh-space-1_5);
     --xh-_badge-font: var(--xh-text-body-size);
   }

package/css/bar-code.css

@@ -32,7 +32,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/breadcrumb.css

@@ -76,7 +76,7 @@
   }
 
   /* 链接的几何、字号与面全经家族桥接槽：静息 muted / regular，悬停走白底承载 hover 100 + 随语气的字色，
-     按下 pressed 200 只换面（§7.2 / §9.2）；当前页那条不再是"可去的地方"（§7.3）：连接层投影
+     按下 pressed 200 只换面；当前页那条不再是"可去的地方"：连接层投影
      data-xh-collection-terminal，家族给透明面 + 随语气的 fg-default + medium + cursor default，不响应悬停与按下，
      并压过它同时带的 aria-disabled 禁用面。本条 (0,2,0) 压过家族基础块 (0,1,0)，不能再写 color / background */
   [data-scope='breadcrumb'][data-part='link'] {
@@ -124,7 +124,7 @@
     display: none;
   }
 
-  /* 分隔符与省略号都是纯视觉占位，读屏那边已被 aria-hidden 摘掉 */
+  /* 分隔符是纯视觉占位，读屏那边已被 aria-hidden 摘掉；折叠位是一个列表项，只给里面的触发器排位 */
   [data-scope='breadcrumb'][data-part='separator'],
   [data-scope='breadcrumb'][data-part='ellipsis'] {
     display: inline-flex;
@@ -148,8 +148,46 @@
   }
 
   [data-scope='breadcrumb'][data-part='ellipsis'] {
-    inline-size: var(--xh-breadcrumb-ellipsis-size, var(--xh-space-5));
-    cursor: default;
+    min-inline-size: var(--xh-breadcrumb-ellipsis-size, var(--xh-space-5));
+  }
+
+  /* 被收起的层级与展开后的折叠位都带 hidden：紧跟在它后面的分隔符一并收起，路径里不留两个挨着的分隔符 */
+  [data-scope='breadcrumb'][data-part='item'][hidden] + [data-scope='breadcrumb'][data-part='separator'],
+  [data-scope='breadcrumb'][data-part='ellipsis'][hidden] + [data-scope='breadcrumb'][data-part='separator'] {
+    display: none;
+  }
+
+  /* 折叠位里的触发器与链接同属一行导航条目（nav 语境）：面、字色、按压时间线由家族给，几何与链接同一把尺——
+     行内衬一格、control 圆角、字号随档；不写内容时由下面画一枚省略号字形 */
+  [data-scope='breadcrumb'][data-part='ellipsis-trigger'] {
+    --xh-collection-block-padding: var(--xh-space-0);
+    --xh-collection-inline-padding: var(--xh-space-1);
+    --xh-collection-radius: var(--xh-shape-control);
+    --xh-collection-font-size: var(--xh-breadcrumb-font-size, var(--xh-_breadcrumb-font-size));
+    --xh-collection-glyph-size: var(--xh-breadcrumb-icon-size, var(--xh-glyph-size-text));
+    --xh-collection-fg-rest: var(--xh-breadcrumb-fg, var(--xh-fg-muted));
+    --xh-collection-bg-hover: var(--xh-bg-subtle);
+    --xh-collection-fg-hover: var(--xh-_breadcrumb-accent-text);
+    --xh-collection-bg-pressed: var(--xh-bg-subtle-hover);
+
+    display: inline-flex;
+    align-items: center;
+    line-height: var(--xh-breadcrumb-leading, var(--xh-leading-tight));
+  }
+
+  [data-scope='breadcrumb'][data-part='ellipsis-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-ellipsis) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-ellipsis) center / contain no-repeat;
+  }
+
+  [data-scope='breadcrumb'][data-part='ellipsis-trigger'][hidden] {
+    display: none;
   }
 
   /* 没写内容就由皮肤画兜底字形（向前的尖角）；作者写了斜杠或自己的图形，这条即不命中 */
@@ -168,4 +206,25 @@
   [dir='rtl'] [data-scope='breadcrumb'][data-part='separator']:empty::before {
     rotate: 180deg;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       落在 Canvas 面上的取 CanvasText；
+       禁用取 GrayText */
+    [data-scope='breadcrumb'][data-part='ellipsis-trigger']:empty::before,
+    [data-scope='breadcrumb'][data-part='separator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='breadcrumb'][data-part='ellipsis-trigger']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='breadcrumb'][data-part='ellipsis-trigger']:is([aria-disabled='true'], [data-disabled]):empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/button-group.css

@@ -204,17 +204,17 @@
     position: relative;
   }
 
-  /* 后一段往回挪一个描边宽度，相邻的两条边重合成一条。
+  /* 共边只画一次：后一段不画起始边，由前一段的末端边承担。墨色描边半透明，两条重合会加深。
      方向跟着 data-orientation 走，横排收 inline 轴、竖排收 block 轴。
-     分隔线两侧不合边：那两段本来就是被这条线分开的，再压一次会把线盖掉一半 */
+     分隔线两侧不合边：那两段本来就是被这条线分开的 */
   [data-scope='button-group'][data-part='root'][data-orientation='horizontal']
     > *:not([data-xh-button-group-separator]) + *:not([data-xh-button-group-separator]) {
-    margin-inline-start: calc(-1 * var(--xh-stroke-thin));
+    border-inline-start-width: 0;
   }
 
   [data-scope='button-group'][data-part='root'][data-orientation='vertical']
     > *:not([data-xh-button-group-separator]) + *:not([data-xh-button-group-separator]) {
-    margin-block-start: calc(-1 * var(--xh-stroke-thin));
+    border-block-start-width: 0;
   }
 
   /* 悬停或拿到焦点的那一段抬到最上层：焦点环画在元素外侧，
@@ -225,7 +225,7 @@
   }
 
   /* 独立 Button 按下时缩一档；组内段却靠共边重叠一像素，单段缩放会同时撕开两侧接缝。
-     组内仍保留 active 换底与撤高光，只把会改变外轮廓几何的 scale 收掉（§9.2 允许的只换面）；
+     组内仍保留 active 换底与撤高光，只把会改变外轮廓几何的 scale 收掉（允许的只换面）；
      键盘与触屏的按压由 Headless 投影 data-pressed，与指针 :active 同一档。 */
   [data-scope='button-group'][data-part='root']
     > [data-scope='button'][data-part='root']:not([data-disabled]):not([data-loading]):is(:active, [data-pressed]),

package/css/button.css

@@ -5,15 +5,8 @@
 
 /* 独立 Button 皮肤与 full bundle 都从同一份 Family Recipe 取得布局、状态和命中区。 */
 @import '../family/action-control.css';
-
-@layer xihan.motion {
-  /* 独立皮肤可单独引入，spinner 动画名不能依赖别的组件文件。 */
-  @keyframes xh-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
+@import '../family/loading-ring.css';
+@import '../family/motion.css';
 
 @layer xihan.components {
   [data-scope='button'] {
@@ -36,7 +29,7 @@
     --xh-action-fg-loading: var(--xh-button-fg, var(--xh-_action-variant-fg-loading));
     --xh-action-highlight-rest: transparent;
     --xh-action-highlight-pressed: transparent;
-    /* 海拔只有 solid 一档有：其余形态按 §8.3 无影，私有槽在下面的 solid 块里才被赋值 */
+    /* 海拔只有 solid 一档有：其余形态无影，私有槽在下面的 solid 块里才被赋值 */
     --xh-_button-shadow-rest: var(--xh-button-shadow, none);
     --xh-_button-shadow-hover: var(--xh-button-shadow-hover, none);
     --xh-_button-shadow-pressed: none;
@@ -57,7 +50,7 @@
     font-weight: var(--xh-button-font-weight, var(--xh-text-label-weight));
   }
 
-  /* Button soft 是 §5.3 登记的 raised 消费者：solid 一档静息带顶光与贴地软影，悬停抬到 raised，按下只留顶光。
+  /* Button soft 是登记在册的 raised 消费者：solid 一档静息带顶光与贴地软影，悬停抬到 raised，按下只留顶光。
      成组时段与段共边焊成一条，静息不落软影、悬停不抬起——投影会压到左右两段的面上，
      ButtonGroup 用 --xh-_button-group-shadow-rest / -hover 只留顶光 */
   [data-scope='button'][data-part='root'][data-variant='solid'] {
@@ -81,6 +74,36 @@
     pointer-events: none;
   }
 
+  /* liquid 档的交互光：实心钮进入悬停时，一道光沿 1px 描边环扫过一次。环与焦点环同法，用透明描边画，
+     遮罩只留描边那一圈。光只走描边、不进面——
+     面内叠一层白光，品牌实心面上白字的对比就从 5.08:1 往下掉。光用面上前景色（currentColor），
+     各语气自动跟随；只在细指针可悬停的设备上播，粗指针下 ::after 另有用处（44px 热区）。
+     减弱动效下时长归 1ms，一闪即过、看不见；强制色下系统配色，不画装饰光 */
+  @media (hover: hover) and (pointer: fine) and (forced-colors: none) {
+    :where([data-material='liquid'])
+      [data-scope='button'][data-part='root'][data-xh-action-variant='solid']:not([data-disabled]):not([data-loading]):hover::after {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--xh-stroke-thin));
+      border: var(--xh-stroke-thin) solid transparent;
+      border-radius: inherit;
+      background: linear-gradient(100deg, transparent 42%, currentColor 50%, transparent 58%) border-box no-repeat;
+      background-size: 300% 100%;
+      background-position: 0% 0;
+      pointer-events: none;
+      mask:
+        linear-gradient(currentColor 0 0) padding-box exclude,
+        linear-gradient(currentColor 0 0);
+      animation: xh-glint var(--xh-button-glint-duration, var(--xh-motion-duration-glint)) var(--xh-motion-ease-enter) both;
+    }
+
+    /* 从右往左书写时光从行首（右缘）扫起 */
+    :where([data-material='liquid'])
+      [data-scope='button'][data-part='root'][data-xh-action-variant='solid']:not([data-disabled]):not([data-loading]):dir(rtl):hover::after {
+      animation-direction: reverse;
+    }
+  }
+
   /* icon profile 已经给出正方视觉盒；Button 的公开 px 槽不能把它重新撑开。 */
   [data-scope='button'][data-part='root'][data-icon-only] {
     --xh-action-padding-inline: 0;
@@ -119,25 +142,50 @@
     block-size: var(--xh-icon-size);
   }
 
-  /* indicator 常驻占位；loading 只切换绘制，不靠删节点改变按钮宽度。 */
+  /* 在途指示压在钮上、不进排布，钮宽不变。部件空着时环由加载环配方画在 ::before 上（连接层投影
+     data-xh-loading-ring="overlay"），进入在途一个 micro 之后才淡入，退出不等 */
   [data-scope='button'][data-part='indicator'] {
-    visibility: hidden;
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    pointer-events: none;
+  }
+
+  /* 作者往部件里放了自己的图形：环让位，作者图形按同一节拍淡入淡出并转 */
+  [data-scope='button'][data-part='indicator']:not(:empty)::before {
+    content: none;
+  }
+
+  [data-scope='button'][data-part='indicator'] > * {
+    opacity: 0;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    animation: xh-spin var(--xh-button-spin-duration, var(--xh-motion-loop-spin)) var(--xh-motion-ease-loop) infinite paused;
+  }
+
+  [data-scope='button'][data-part='root'][data-loading] > [data-scope='button'][data-part='indicator'] > * {
+    opacity: 1;
+    transition-delay: var(--xh-motion-duration-micro);
+    animation-play-state: running;
+  }
+
+  /* 钮里原有的内容与环交叉：进入在途同样等一个 micro 才淡出、留位不塌，退出不等 */
+  [data-scope='button']:is([data-part='label'], [data-part='prefix'], [data-part='suffix']) {
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  [data-scope='button'][data-part='root'][data-loading] [data-scope='button'][data-part='indicator'] {
-    visibility: visible;
-    animation: xh-spin var(--xh-button-spin-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite;
+  [data-scope='button'][data-part='root'][data-loading]:has(> [data-scope='button'][data-part='indicator'])
+    > [data-scope='button']:is([data-part='label'], [data-part='prefix'], [data-part='suffix']) {
+    opacity: 0;
+    transition-delay: var(--xh-motion-duration-micro);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    [data-scope='button'][data-part='root'][data-loading] [data-scope='button'][data-part='indicator'] {
+    [data-scope='button'][data-part='indicator'] > * {
       animation: none;
     }
   }
 
-  :where([data-motion='reduce'])
-    [data-scope='button'][data-part='root'][data-loading]
-    [data-scope='button'][data-part='indicator'] {
+  :where([data-motion='reduce']) [data-scope='button'][data-part='indicator'] > * {
     animation: none;
   }
 
@@ -160,7 +208,7 @@
       box-shadow: none;
     }
 
-    [data-scope='button'][data-part='root'][data-loading] [data-scope='button'][data-part='indicator'] {
+    [data-scope='button'][data-part='indicator'] > * {
       animation: none;
     }
   }