@xihan-ui/styles 2.1.0 → 3.1.0

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,19 +31,6 @@
     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 档：盒型（md = box-lg 48px，圆形）、
      四态面、0.97 按压与 44px 命中区由家族配方按 data-xh-action-variant / -size 给出。
@@ -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);
 
@@ -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

@@ -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;
   }
 
   /* 悬停或拿到焦点的那一段抬到最上层：焦点环画在元素外侧，

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'] {
@@ -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;
     }
   }

package/css/calendar-picker.css

@@ -445,4 +445,23 @@
       font-weight: var(--xh-font-weight-bold);
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='calendar-picker']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='calendar-picker']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='calendar-picker']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/calendar-range-picker.css

@@ -245,14 +245,21 @@
     display: none;
   }
 
-  /* 区间底色：横向铺满格子，相邻两格接成一条；纵向收在格子内衬里，行与行之间留出空当 */
+  /* 区间底色：横向铺满格子，相邻两格接成一条；纵向收在格子内衬里，行与行之间留出空当。
+     轨道随 data-in-range 生灭，出现与消失都是当场的；过渡只在同一段轨道换底时走——
+     挑到一半的预览落定成区间，中性淡底淡变到品牌淡底 */
   [data-scope='calendar-range-picker'][data-part='cell'][data-in-range]:not([data-outside-month])::before {
     content: '';
     position: absolute;
     inset-block: var(--xh-calendar-range-picker-cell-gap, var(--xh-space-0_5));
     inset-inline: 0;
     background: var(--xh-calendar-range-picker-range-bg, var(--xh-bg-brand-subtle));
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 挑到一半的预览还不是选中：品牌淡底专属选中 / 当前，预览铺中性淡底，与已落定的区间分开 */
+  [data-scope='calendar-range-picker'][data-part='cell'][data-in-range][data-range-preview]:not([data-outside-month])::before {
+    background: var(--xh-calendar-range-picker-range-preview-bg, var(--xh-bg-subtle));
   }
 
   /* 行首与行尾收圆：区间跨周时每一行各是一条两头圆的横杠。
@@ -354,6 +361,12 @@
     --xh-_calendar-range-picker-cell-bg-pressed: var(--xh-calendar-range-picker-range-cell-bg-pressed, var(--xh-bg-brand-subtle-active));
   }
 
+  /* 预览中段坐在中性淡底上：交互阶梯按淡底承载走，悬停 200、按下 300 */
+  [data-scope='calendar-range-picker'][data-part='cell-trigger'][data-in-range][data-range-preview]:not([data-outside-month], [data-disabled], [data-range-start], [data-range-end]) {
+    --xh-_calendar-range-picker-cell-bg-hover: var(--xh-calendar-range-picker-range-preview-cell-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-_calendar-range-picker-cell-bg-pressed: var(--xh-calendar-range-picker-range-preview-cell-bg-pressed, var(--xh-bg-subtle-active));
+  }
+
   /* 今天：1px 品牌环 + 品牌字（brand-subtle 退出 today 语义），底透明、悬停走普通格的阶梯；
      落在区间里时环压在轨道上，选中仍用后面的实心强调面，状态叠加时不会混成同一种反馈 */
   [data-scope='calendar-range-picker'][data-part='cell-trigger'][data-today] {
@@ -393,6 +406,11 @@
       border-color: Highlight;
     }
 
+    /* 预览与落定的区间在这一档没有底色可分：还没确认的那一段在轨道上下沿画虚线 */
+    [data-scope='calendar-range-picker'][data-part='cell'][data-in-range][data-range-preview]:not([data-outside-month])::before {
+      border-block: var(--xh-stroke-thin) dashed Highlight;
+    }
+
     /* 按下换的底在这一档由家族的按压块换成 Highlight（格子、方向钮与标题钮同走），这里不再另画 */
   }
 
@@ -514,4 +532,23 @@
       border-block-end: var(--xh-stroke-thick) solid currentColor;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='calendar-range-picker']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='calendar-range-picker']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='calendar-range-picker']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }