@xihan-ui/styles 2.1.0 → 3.1.0

package/css/slider.css

@@ -133,6 +133,15 @@
     inline-size: 100%;
   }
 
+  /* 两端拇指之间可以整段拖动：区间给出「抓得住」的光标，拖动中换成「抓着」 */
+  [data-scope='slider'][data-part='range'][data-draggable] {
+    cursor: grab;
+  }
+
+  [data-scope='slider'][data-part='range'][data-draggable][data-dragging] {
+    cursor: grabbing;
+  }
+
   [data-scope='slider'][data-part='range'][data-invalid] {
     background: var(--xh-slider-range-bg-invalid, var(--xh-border-invalid));
   }
@@ -144,13 +153,15 @@
   /* 圆点浮在轨道之上：轨道是流内的，拇指是绝对定位的，天然后来居上，不必再堆 z-index。
      box-sizing 必须显式写：描边要吃进直径里，否则实际盒子比 --xh-_thumb-size 宽两条边，
      下面按半个直径回拉的负外边距就对不上圆心。
-     拇指是可拖起的 raised 面：描边取 --xh-border-default，raised 影只是加成、不作边界 */
+     拇指是可拖起的 raised 面：描边取装饰边（不透明档），raised 影只是加成、不作边界 */
   [data-scope='slider'][data-part='thumb'] {
     position: absolute;
     box-sizing: border-box;
     inline-size: var(--xh-_thumb-size);
     block-size: var(--xh-_thumb-size);
-    border: var(--xh-stroke-thick) solid var(--xh-slider-thumb-border, var(--xh-border-default));
+    /* 描边取装饰边的不透明档：墨色描边半透明，压在圆点自己的底上只会是底色的深一档，框不住圆点，
+       拇指就与同色的已选区间糊成一片 */
+    border: var(--xh-stroke-thick) solid var(--xh-slider-thumb-border, var(--xh-border-default-opaque));
     border-radius: var(--xh-slider-thumb-radius, var(--xh-shape-circle));
     background: var(--xh-slider-thumb-bg, var(--xh-_tone, var(--xh-bg-brand)));
     /* 圆点上没有字，这一支是给环用的：环灌 currentColor 时取到的是与这块底配对的前景色，
@@ -159,7 +170,7 @@
     box-shadow: var(--xh-slider-thumb-shadow, var(--xh-elevation-raised));
     cursor: grab;
     transition:
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong),
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -193,7 +204,10 @@
      海拔从静态的 raised 换到 lifted：跟着手走的东西比贴在页面上的抬得高一档，
      又不到锚定浮层那一层——用 floating 会让拇指和下拉面板一样重。 */
   [data-scope='slider'][data-part='thumb'][data-dragging] {
-    scale: var(--xh-slider-thumb-scale-dragging, var(--xh-motion-scale-drag));
+    /* 放大比例落进私有槽：挂在拇指里的值气泡读同一支反向缩回原尺寸 */
+    --xh-_slider-thumb-scale: var(--xh-slider-thumb-scale-dragging, var(--xh-motion-scale-drag));
+
+    scale: var(--xh-_slider-thumb-scale);
     cursor: grabbing;
     box-shadow: var(--xh-slider-thumb-shadow-dragging, var(--xh-elevation-lifted));
   }
@@ -215,16 +229,19 @@
   }
 
   /* 值气泡：挂在拇指里，跟着拇指一起走位。
-     两侧 inset 都钉在 50% 再靠自动外边距回中：气泡宽度由文字撑出，用 translate 回中的话
-     rtl 下 inset-inline-start 映射到 right，位移是物理方向的，会把气泡推向错误的一侧。
+     气泡宽度由文字撑出，只能靠平移回中。不能两侧 inset 都钉在 50% 再靠自动外边距回中：
+     那样可用宽度是 0，气泡比它宽，自动外边距按规范取 0，气泡从拇指中线起排、偏出半个自身宽。
+     起点是逻辑属性、平移是物理通道：平移乘书写方向的符号，rtl 下行内分量掉头，气泡才落回拇指正上方。
+     拖动时拇指放大，气泡按同一比例反向缩回、与拇指同一段过渡：文字不跟着放大，缩放原点在贴着拇指那一边。
      默认只在推动那一刻露面，静止时留在 DOM 里但不占视线 */
   [data-scope='slider'][data-part='value-text'] {
     position: absolute;
     inset-block-end: 100%;
-    inset-inline: 50%;
+    inset-inline-start: 50%;
     inline-size: max-content;
     margin-block-end: var(--xh-slider-value-text-offset, var(--xh-space-2));
-    margin-inline: auto;
+    translate: calc(-50% * var(--xh-direction-sign)) 0;
+    transform-origin: 50% 100%;
     padding-block: var(--xh-slider-value-text-py, var(--xh-space-0_5));
     padding-inline: var(--xh-slider-value-text-px, var(--xh-space-2));
     border-radius: var(--xh-slider-value-text-radius, var(--xh-shape-control));
@@ -236,7 +253,9 @@
     /* 气泡贴在拇指上方，指针要落到拇指上，不能被它挡住 */
     pointer-events: none;
     opacity: 0;
-    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='slider'][data-part='value-text'][hidden] {
@@ -246,15 +265,17 @@
   /* 只有手真正推着的那一个拇指带 data-dragging，多拇指时气泡不会全组一起冒出来 */
   [data-scope='slider'][data-part='value-text'][data-dragging] {
     opacity: 1;
+    scale: calc(1 / var(--xh-_slider-thumb-scale, 1));
   }
 
-  /* 竖排轨道的气泡挪到行侧：压在拇指上方会挡住上一档的值 */
+  /* 竖排轨道的气泡挪到行侧：压在拇指上方会挡住上一档的值；反向缩放的原点换到贴着拇指的行首那一侧 */
   [data-scope='slider'][data-part='value-text'][data-orientation='vertical'] {
     inset-block: 50%;
     inset-inline: 100% auto;
     block-size: max-content;
     margin-block: auto;
     margin-inline: var(--xh-slider-value-text-offset, var(--xh-space-2)) 0;
+    transform-origin: calc(50% - 50% * var(--xh-direction-sign)) 50%;
   }
 
   /* —— 尺寸 —— */
@@ -285,7 +306,8 @@
     block-size: var(--xh-slider-tick-size, var(--xh-space-1));
     border-radius: var(--xh-slider-tick-radius, var(--xh-shape-circle));
     background: var(--xh-slider-tick-bg, var(--xh-border-strong));
-    translate: -50% -50%;
+    /* 连接层把比例点写在 inset-inline-start 上：平移的行内分量乘书写方向的符号，rtl 下掉头，刻度点才以比例点为中心 */
+    translate: calc(-50% * var(--xh-direction-sign)) -50%;
   }
 
   /* 落进已选区间的刻度点跟 range 同色 */
@@ -301,7 +323,7 @@
     font-size: var(--xh-slider-tick-label-font-size, var(--xh-text-caption-size));
     line-height: var(--xh-leading-none);
     white-space: nowrap;
-    translate: -50% 0;
+    translate: calc(-50% * var(--xh-direction-sign)) 0;
     cursor: pointer;
     pointer-events: auto;
     user-select: none;
@@ -330,7 +352,7 @@
   [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick'] {
     inset-block-start: auto;
     inset-inline-start: 50%;
-    translate: -50% 50%;
+    translate: calc(-50% * var(--xh-direction-sign)) 50%;
   }
 
   [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick-label'] {

package/css/sortable.css

@@ -14,8 +14,8 @@
     --xh-sortable-skin: 1;
   }
 
-  /* 分工：**每一项的位移**由连接层每帧写进内联 transform（让位与跟手都在那儿算）。
-     这份皮肤一条都不碰 transform——内联优先级更高，写了不但是死声明，
+  /* 分工：**每一项的位移**由连接层每帧写进内联 translate（让位与跟手都在那儿算）。
+     这份皮肤一条都不碰 translate——内联优先级更高，写了不但是死声明，
      还会在拖动的每一帧跟连接层抢位置。皮肤只管排布方向、间距、光标与状态表现。 */
 
   [data-scope='sortable'][data-part='root'] {
@@ -47,18 +47,40 @@
      看起来像是尺寸算错了。皮肤只管拖起来那一项的视觉反馈。 */
 
   /* 让位期间关掉过渡，跟手的那一项才不会慢半拍粘在指针后面。
-     其余项反过来要过渡：它们是被让开的，瞬移会看不出发生了什么。 */
-  [data-scope='sortable'][data-part='root'][data-dragging] [data-part='item']:not([data-dragging]) {
-    transition: transform var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous);
+     其余项反过来要过渡：它们是被让开的，瞬移会看不出发生了什么。
+     键盘拖动时被拖那一项不跟手、逐格挪，与让位的邻项同一段一起滑；抓起时的抬升照常淡变。
+     同组别的列表的一项悬在这里（data-drop='inside'）时，插入点及其后的项同样是被让开的 */
+  [data-scope='sortable'][data-part='root']:is([data-dragging], [data-drop='inside']) [data-part='item']:not([data-dragging]) {
+    transition: translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous);
   }
 
-  /* 抓起与放下时的抬升、压深都淡变。位移不进这条：它由连接层每帧写内联 transform */
+  /* 让位把末项挪出了原来的末端：容器末尾垫出落进来那一格的大小（连接层写进 --xh-_sortable-incoming-size），
+     容器随之长出一格，末项不会掉出容器的面。垫块是一个 flex 子项，沿主轴取那一格的尺寸、与各项之间同样隔一个 gap；
+     列表为空时它是唯一的子项，不带 gap，正好是那一格 */
+  [data-scope='sortable'][data-part='root'][data-drop='inside']::after {
+    content: '';
+    flex: 0 0 var(--xh-_sortable-incoming-size);
+  }
+
+  [data-scope='sortable'][data-part='root'][data-drag-mode='keyboard'] [data-part='item'][data-dragging] {
+    transition:
+      translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 抓起与放下时的抬升、压深都淡变。位移不进这条：它由连接层每帧写内联 translate */
   [data-scope='sortable'][data-part='item'] {
     transition:
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* 放下后那一项由弹簧带着松手速度逐帧收进新位置：只在这一档备好合成层，落定即撤 */
+  [data-scope='sortable'][data-part='item'][data-animating] {
+    will-change: translate;
+  }
+
   [data-scope='sortable'][data-part='item'][data-dragging] {
     /* 拖起来的那一项浮在上面。层级由连接层写内联，这里只管观感。
        海拔取 lifted：被指针拎起、正跟着手走的东西比贴在页面上的 raised 高一档，又不到锚定浮层那一层。
@@ -161,7 +183,7 @@
     border-radius: var(--xh-sortable-drop-indicator-radius, var(--xh-shape-pill));
     background: var(--xh-sortable-drop-indicator-bg, var(--xh-bg-brand));
     /* 落点一格一格地跳，线跟着滑过去 */
-    transition: transform var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous);
+    transition: translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous);
   }
 
   /* 竖排时是一条横线铺满容器，横排与换行网格时是一条竖线 */
@@ -176,6 +198,14 @@
     block-size: 100%;
   }
 
+  /* 落点线是一块纯底色，高对比档里底色被统一换成 Canvas，整根消失：换成系统高亮色画回来。
+     跨列表时落在哪个列表只靠这条线与让出的那一格表出，这一档里同样要看得见 */
+  @media (forced-colors: active) {
+    [data-scope='sortable'][data-part='drop-indicator'] {
+      background: Highlight;
+    }
+  }
+
   /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
   [data-scope='sortable'][data-part='live-region'] {
     position: absolute;

package/css/sparkline.css

@@ -0,0 +1,164 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 sparkline 样式。 */
+
+/* 描线与淡入关键帧由 family/motion.css 提供；本皮肤 @import 它，单独引入仍成立。
+   迷你图只消费色槽与线宽，不接 Chart 家族配方的标题、图例与提示框。 */
+@import '../family/motion.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='sparkline'] {
+    --xh-sparkline-skin: 1;
+  }
+
+  /* 根就是 <svg>：随文排版，宽度缺省 6rem，高度缺省一行字高，放进表格单元格与指标卡都不撑高一行。
+     几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何 */
+  [data-scope='sparkline'][data-part='root'] {
+    --xh-_chart-metric-line-width: var(--xh-sparkline-line-width, var(--xh-chart-line-width));
+    --xh-_chart-metric-point-size: var(--xh-sparkline-marker-size, var(--xh-chart-point-size));
+    --xh-_chart-metric-gap: var(--xh-chart-gap);
+    --xh-_chart-metric-bar-max: var(--xh-sparkline-bar-max, var(--xh-chart-bar-max));
+    --xh-_chart-metric-radius: var(--xh-sparkline-bar-radius, var(--xh-shape-inset));
+
+    /* 缺省中性：线与柱退到弱化色，只让标记点取品牌色相的色槽 1，读者先看到「现在在哪」 */
+    --xh-_sparkline-color: var(--xh-sparkline-color, var(--xh-chart-deemphasis));
+    --xh-_sparkline-accent: var(--xh-sparkline-accent-color, var(--xh-chart-categorical-1));
+
+    display: inline-block;
+    inline-size: var(--xh-sparkline-width, 6rem);
+    /* 级联兜底：先写一行的高度算式（正文字号 × 正文行距），再写 1lh。
+       1lh 晚于本库声明的浏览器地板，取不到时旧引擎丢掉后一条、留下前一条。 */
+    block-size: var(--xh-sparkline-height, calc(var(--xh-text-body-size) * var(--xh-text-body-leading)));
+    block-size: var(--xh-sparkline-height, 1lh);
+    /* 高度正好是一个行盒：顶边贴行盒顶边，行高不被撑开；居中对齐会按字的 x 高度再挪半格，行盒就多出一截 */
+    vertical-align: top;
+  }
+
+  /* 写了语气就整条取语气色：颜色本身带好坏含义，线、柱与标记点同色 */
+  [data-scope='sparkline'][data-part='root'][data-tone]:not([data-tone='neutral']) {
+    --xh-_sparkline-color: var(--xh-sparkline-color, var(--xh-_tone));
+    --xh-_sparkline-accent: var(--xh-sparkline-accent-color, var(--xh-_tone));
+  }
+
+  /* 参考带是注释：淡底画在数据之下 */
+  [data-scope='sparkline'][data-part='band'] {
+    fill: var(--xh-sparkline-band-bg, var(--xh-bg-subtle));
+    stroke: none;
+  }
+
+  /* 参考线：读数据的尺子，取标注色的细虚线，压在数据底下 */
+  [data-scope='sparkline'][data-part='reference-line'] {
+    fill: none;
+    stroke: var(--xh-sparkline-reference-color, var(--xh-chart-label));
+    stroke-width: var(--xh-stroke-thin);
+    stroke-dasharray: calc(var(--xh-stroke-thick) * 2) calc(var(--xh-stroke-thick) * 2);
+  }
+
+  [data-scope='sparkline'][data-part='line'] {
+    fill: none;
+    stroke: var(--xh-_sparkline-color);
+    stroke-width: var(--xh-_chart-metric-line-width);
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  /* 面积：线色淡洗，上沿是同一条折线 */
+  [data-scope='sparkline'][data-part='area-fill'] {
+    fill: var(--xh-_sparkline-color);
+    fill-opacity: var(--xh-chart-area-alpha);
+    stroke: none;
+  }
+
+  /* 柱：相邻柱之间的间隙由几何留出，不画描边；标出的那几根换成强调色 */
+  [data-scope='sparkline'][data-part='bar'] {
+    fill: var(--xh-_sparkline-color);
+    stroke: none;
+  }
+
+  [data-scope='sparkline'][data-part='bar'][data-marker] {
+    fill: var(--xh-_sparkline-accent);
+  }
+
+  /* 盈亏：正负各取涨跌色，缺省绿涨红跌，主题覆盖令牌即可对调 */
+  [data-scope='sparkline'][data-part='bar'][data-trend='rise'] {
+    fill: var(--xh-chart-rise);
+  }
+
+  [data-scope='sparkline'][data-part='bar'][data-trend='fall'] {
+    fill: var(--xh-chart-fall);
+  }
+
+  /* 标记点带一圈承载面色的描边环，压在线上也分得开 */
+  [data-scope='sparkline'][data-part='dot'] {
+    fill: var(--xh-_sparkline-accent);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-chart-gap);
+  }
+
+  /* 首次出现：折线从头描到尾，连接层在它入场的这一轮写 data-drawing 与 pathLength="1"，过渡结束即撤掉 */
+  [data-scope='sparkline'][data-part='line'][data-drawing] {
+    stroke-dasharray: 1;
+    animation: xh-draw var(--xh-motion-duration-reveal) var(--xh-motion-ease-continuous) both;
+  }
+
+  /* 标记点等描线的笔尖扫到才淡入：连接层写入它占入场时长的比例，乘上入场时长就是延迟 */
+  [data-scope='sparkline'][data-part='dot'][data-drawing] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) both;
+    animation-delay: calc(var(--xh-motion-duration-reveal) * var(--xh-_chart-reveal-at));
+  }
+
+  /* 减弱动效下折线直接在场，只随过渡淡入。两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='sparkline'][data-part='line'][data-drawing] {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='sparkline'][data-part='line'][data-drawing] {
+    animation: none;
+  }
+
+  /* 强制色：线与柱取系统文字色，标出的点与柱取强调色；面积不铺，参考带只留轮廓；
+     盈亏的正负靠在中线上方还是下方表达，不靠颜色 */
+  @media (forced-colors: active) {
+    [data-scope='sparkline'][data-part='band'] {
+      fill: none;
+      stroke: GrayText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='sparkline'][data-part='reference-line'] {
+      stroke: CanvasText;
+    }
+
+    [data-scope='sparkline'][data-part='line'] {
+      stroke: CanvasText;
+    }
+
+    [data-scope='sparkline'][data-part='area-fill'] {
+      fill: none;
+    }
+
+    [data-scope='sparkline'][data-part='bar'],
+    [data-scope='sparkline'][data-part='bar'][data-trend] {
+      fill: CanvasText;
+    }
+
+    [data-scope='sparkline'][data-part='bar'][data-marker],
+    [data-scope='sparkline'][data-part='dot'] {
+      fill: Highlight;
+    }
+
+    [data-scope='sparkline'][data-part='dot'] {
+      stroke: Canvas;
+    }
+  }
+
+  [data-scope='sparkline'][data-part='root'][hidden] {
+    display: none;
+  }
+}

package/css/spinner.css

@@ -5,19 +5,20 @@
 
 /* 定义 spinner 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
 @layer xihan.motion {
-  /* 转圈的关键帧定义在本文件里。皮肤可以按需单独引入，
-     引用别处文件里的动画名时那份文件不一定在场，动画会静默地整个不跑 */
-  @keyframes xh-spinner-rotate {
-    to {
-      transform: rotate(1turn);
+  /* 三点档的波：一条亮带沿行扫过三枚点，点依次亮起再暗回禁用档，不再整组同步明暗 */
+  @keyframes xh-spinner-dots {
+    from {
+      -webkit-mask-position: 100% 0;
+      mask-position: 100% 0;
     }
-  }
 
-  /* 三点档的呼吸：一拍里淡到禁用档再回来 */
-  @keyframes xh-spinner-dots {
-    50% {
-      opacity: var(--xh-state-disabled-opacity);
+    to {
+      -webkit-mask-position: 0 0;
+      mask-position: 0 0;
     }
   }
 }
@@ -39,32 +40,37 @@
     vertical-align: middle;
   }
 
+  /* 露面前的等待：整块藏起、位置照留，露面那一刻布局不跳；visibility 同时把它从读屏里摘掉 */
+  [data-scope='spinner'][data-part='root'][data-state='hidden'] {
+    visibility: hidden;
+  }
+
   [data-scope='spinner'][data-part='root']::before {
     content: '';
 
     /* 边框算进直径，换厚度不会把圆环撑大 */
     box-sizing: border-box;
     flex: none;
-    inline-size: var(--xh-spinner-size, var(--xh-glyph-size-lg));
-    block-size: var(--xh-spinner-size, var(--xh-glyph-size-lg));
+    inline-size: var(--xh-spinner-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-spinner-size, var(--xh-glyph-size-md));
     border: var(--xh-spinner-thickness, var(--xh-stroke-thick)) solid var(--xh-spinner-track, var(--xh-border-default));
 
     /* 一整圈是轨道色，只有起始边换成前景色，转起来才看得出方向 */
     border-block-start-color: var(--xh-spinner-fg, currentColor);
     border-radius: var(--xh-spinner-radius, var(--xh-shape-circle));
-    animation: xh-spinner-rotate var(--xh-spinner-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite;
+    animation: xh-spin var(--xh-spinner-duration, var(--xh-motion-loop-spin)) var(--xh-motion-ease-loop) infinite;
   }
 
-  /* 三档直径走字形尺寸那把尺：圆环与同一行文字里的图标同级，三档同族才不会在 compact 下错位。
-     缺省档写在上面的基础规则里 */
+  /* 三档直径走字形尺寸那把尺，与控件内图标同档（sm 16 / md 20 / lg 24）：圆环与同一行文字里的图标同级，
+     三档同族才不会在 compact 下错位。缺省档写在上面的基础规则里 */
   [data-scope='spinner'][data-part='root'][data-size='sm']::before {
     inline-size: var(--xh-glyph-size-sm);
     block-size: var(--xh-glyph-size-sm);
   }
 
   [data-scope='spinner'][data-part='root'][data-size='lg']::before {
-    inline-size: var(--xh-glyph-size-xl);
-    block-size: var(--xh-glyph-size-xl);
+    inline-size: var(--xh-glyph-size-lg);
+    block-size: var(--xh-glyph-size-lg);
   }
 
   /* 语气只换起始边那一段，轨道留在中性描边上：轨道与起始边的反差就是转向的读法，
@@ -77,7 +83,7 @@
 
   /*
    * 渐隐弧：一整圈的色相由角度扫过来，再用一圈环形遮罩把中心挖空，剩下的就是一段
-   * 由浓到无的弧。转的还是同一条 xh-spinner-rotate——这一档只换画法，不换节拍。
+   * 由浓到无的弧。转的还是同一条 xh-spin——这一档只换画法，不换节拍。
    * 遮罩只吃 alpha，用 currentColor 当不透明的那一端即可。
    */
   [data-scope='spinner'][data-part='root'][data-variant='arc']::before {
@@ -100,17 +106,26 @@
   }
 
   /*
-   * 三点：一行三枚圆点，整组一起呼吸。它不转，因此圆角与描边都撤掉，
+   * 三点：一行三枚圆点，依次亮起成一道波。它不转，因此圆角与描边都撤掉，
    * 图形改由三层径向渐变画；点的颜色走 currentColor，语气档只换这一处。
+   * 明暗不靠整组的不透明度（那样三点同步明灭，读起来像整体在闪），而是一层三倍宽的遮罩：
+   * 两端压在禁用档的不透明度，正中一道满不透明度的亮带，遮罩位置从行首外扫到行尾外，
+   * 亮带依次掠过三枚点。
    */
   [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+    --xh-_spinner-dot-dim: color-mix(in srgb, currentColor calc(var(--xh-state-disabled-opacity) * 100%), transparent);
+
     border: 0;
     border-radius: 0;
     background:
       radial-gradient(circle closest-side, var(--xh-spinner-fg, currentColor) 100%, transparent) 0 50% / 25% 25% no-repeat,
       radial-gradient(circle closest-side, var(--xh-spinner-fg, currentColor) 100%, transparent) 50% 50% / 25% 25% no-repeat,
       radial-gradient(circle closest-side, var(--xh-spinner-fg, currentColor) 100%, transparent) 100% 50% / 25% 25% no-repeat;
-    animation: xh-spinner-dots var(--xh-spinner-duration, var(--xh-spin-duration)) var(--xh-motion-ease-sweep) infinite;
+    -webkit-mask: linear-gradient(90deg, var(--xh-_spinner-dot-dim) 40%, currentColor 50%, var(--xh-_spinner-dot-dim) 60%) 100% 0 / 300% 100% no-repeat;
+    mask: linear-gradient(90deg, var(--xh-_spinner-dot-dim) 40%, currentColor 50%, var(--xh-_spinner-dot-dim) 60%) 100% 0 / 300% 100% no-repeat;
+    animation: xh-spinner-dots var(--xh-spinner-duration, var(--xh-motion-loop-spin)) var(--xh-motion-ease-loop) infinite;
+    /* 波跟着书写方向走：三枚点左右对称，按书写方向符号水平翻过来，RTL 下就从右往左依次亮起 */
+    scale: var(--xh-direction-sign) 1;
   }
 
   [data-scope='spinner'][data-part='root'][data-variant='dots'][data-tone]::before {
@@ -120,20 +135,26 @@
       radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-_tone)) 100%, transparent) 100% 50% / 25% 25% no-repeat;
   }
 
-  /* 三点档的呼吸自带一条动画，压不住上面那两块基础降级里的 animation: none，
-     因此这一档各自再写一份。两组规则是同一件事的两个触发条件 */
+  /* 三点档的波自带一条动画，压不住上面那两块基础降级里的 animation: none，
+     因此这一档各自再写一份；遮罩一并撤掉，三点满不透明度静止。两组规则是同一件事的两个触发条件 */
   @media (prefers-reduced-motion: reduce) {
     [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+      -webkit-mask: none;
+      mask: none;
       animation: none;
     }
   }
 
   :where([data-motion='reduce']) [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+    -webkit-mask: none;
+    mask: none;
     animation: none;
   }
 
   @media print {
     [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+      -webkit-mask: none;
+      mask: none;
       animation: none;
     }
   }
@@ -204,5 +225,12 @@
       border-radius: var(--xh-spinner-radius, var(--xh-shape-circle));
       background-image: none;
     }
+
+    /* 三点档退回描边后撤掉扫点的遮罩，改转圆环那一条 */
+    [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+      -webkit-mask: none;
+      mask: none;
+      animation-name: xh-spin;
+    }
   }
 }

package/css/splitter.css

@@ -85,6 +85,12 @@
     outline: none;
   }
 
+  /* 折叠 / 展开（Enter、双击、命令式）时面板尺寸走过渡，与 Layout 侧栏折叠同一种节奏；
+     拖拽与方向键步进跟手，连接层不投影 data-animating，照旧瞬时。尺寸仍由连接层写内联，这里只挂过渡 */
+  [data-scope='splitter'][data-part='root'][data-animating] > [data-scope='splitter'][data-part='panel'] {
+    transition: flex-basis var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
   /* 折叠到 0 时连边框都不该露出来：留一条缝比留一块面板更像坏了 */
   [data-scope='splitter'][data-part='panel'][data-collapsed] {
     border: none;
@@ -98,7 +104,7 @@
     align-items: center;
     justify-content: center;
     background: var(--xh-splitter-trigger-bg, var(--xh-border-default));
-    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='splitter'][data-part='resize-trigger'][data-orientation='horizontal'] {

package/css/statistic.css

@@ -124,4 +124,14 @@
   [data-scope='statistic'][data-part='trend'][hidden] {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       落在 Canvas 面上的取 CanvasText */
+    [data-scope='statistic'][data-part='trend'][data-direction]::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
 }