@xihan-ui/styles 3.2.0 → 4.0.0

package/dist/css/separator.css

@@ -16,7 +16,7 @@
    * 各自取用：换档只改槽，画在哪个节点上互不影响。
    */
   .xh-scope-separator[data-part='root'] {
-    --xh-_separator-color: var(--xh-separator-color, var(--xh-material-frosted-separator));
+    --xh-_separator-color: var(--xh-separator-color, var(--xh-border-default));
     --xh-_separator-dash: var(--xh-separator-dash-length, var(--xh-space-1_5));
     --xh-_separator-dash-gap: var(--xh-separator-dash-gap, var(--xh-space-1_5));
     --xh-_separator-paint: var(--xh-_separator-color);
@@ -26,15 +26,20 @@
     background: var(--xh-_separator-paint);
   }
 
+  /* 分隔线自带上下（竖向为左右）留白：横向上下各 20px，竖向左右各 12px，放进内容里不必另包一层加边距 */
   .xh-scope-separator[data-part='root'][data-orientation='horizontal'] {
     inline-size: 100%;
     block-size: var(--xh-separator-thickness, var(--xh-stroke-thin));
+    margin-block: var(--xh-separator-my, var(--xh-space-5));
   }
 
   .xh-scope-separator[data-part='root'][data-orientation='vertical'] {
     align-self: stretch;
     inline-size: var(--xh-separator-thickness, var(--xh-stroke-thin));
     block-size: 100%;
+    /* 父容器没有高度时也留一截与文字等高的线 */
+    min-block-size: var(--xh-glyph-size-text);
+    margin-inline: var(--xh-separator-mx, var(--xh-space-3));
   }
 
   /* —— 形态 ——
@@ -74,7 +79,9 @@
     align-items: center;
     inline-size: 100%;
     block-size: auto;
-    gap: var(--xh-separator-gap, var(--xh-space-3));
+    gap: var(--xh-separator-gap, var(--xh-space-4));
+    /* 文字自带一行行高，上下留白收一半，整段占的高度与单线时相当 */
+    margin-block: var(--xh-separator-my, var(--xh-space-2_5));
     background: none;
   }
 
@@ -102,8 +109,9 @@
   /* 分节文字：不参与等分，也不折行 */
   .xh-scope-separator[data-part='content'] {
     flex: none;
-    color: var(--xh-separator-content-fg, var(--xh-fg-muted));
-    font-size: var(--xh-separator-content-font-size, var(--xh-text-secondary-size));
+    color: var(--xh-separator-content-fg, var(--xh-fg-default));
+    font-size: var(--xh-separator-content-font-size, var(--xh-text-body-size));
+    font-weight: var(--xh-separator-content-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-normal);
     white-space: nowrap;
   }
@@ -114,6 +122,16 @@
     flex: 0 0 var(--xh-separator-align-length, var(--xh-space-6));
   }
 
+  /* 强制色：线是底色（与虚线的渐变）画的，系统会把底色换成 Canvas，线就此消失。
+     线退出强制换色、颜色直接取 CanvasText，实线与虚线同一条槽 */
+  @media (forced-colors: active) {
+    .xh-scope-separator:is([data-part='root'], [data-part='line']) {
+      --xh-_separator-color: CanvasText;
+
+      forced-color-adjust: none;
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   .xh-scope-separator[data-part='root'][hidden] {

package/dist/css/side-nav.css

@@ -30,8 +30,11 @@
        把 --xh-icon-size 改接到 --xh-control-indicator-* 一族的盒尺 */
     --xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-md));
 
-    /* 尺寸档只换这三个私有槽，行从这两处继承它们，换档不必给每个部件各写一条选择器 */
-    --xh-_side-nav-row-h: var(--xh-control-h-md);
+    /* 尺寸档只换这三个私有槽，行从这两处继承它们，换档不必给每个部件各写一条选择器。
+       行高取导航行的尺（比同档控件高一截） */
+    --xh-_side-nav-row-h: var(--xh-nav-row-h-md);
+    /* 面板内的搜索框是字段，高度仍走控件尺 */
+    --xh-_side-nav-input-h: var(--xh-control-h-md);
     --xh-_side-nav-row-px: var(--xh-control-px-md);
     --xh-_side-nav-row-gap: var(--xh-control-gap-md);
     --xh-_side-nav-row-font-size: var(--xh-control-font-md);
@@ -41,7 +44,8 @@
   /* 缺省档写在上面那条里 */
   .xh-scope-side-nav:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
     --xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-sm));
-    --xh-_side-nav-row-h: var(--xh-control-h-sm);
+    --xh-_side-nav-row-h: var(--xh-nav-row-h-sm);
+    --xh-_side-nav-input-h: var(--xh-control-h-sm);
     --xh-_side-nav-row-px: var(--xh-control-px-sm);
     --xh-_side-nav-row-gap: var(--xh-control-gap-sm);
     --xh-_side-nav-row-font-size: var(--xh-control-font-sm);
@@ -49,7 +53,8 @@
 
   .xh-scope-side-nav:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
     --xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-lg));
-    --xh-_side-nav-row-h: var(--xh-control-h-lg);
+    --xh-_side-nav-row-h: var(--xh-nav-row-h-lg);
+    --xh-_side-nav-input-h: var(--xh-control-h-lg);
     --xh-_side-nav-row-px: var(--xh-control-px-lg);
     --xh-_side-nav-row-gap: var(--xh-control-gap-lg);
     --xh-_side-nav-row-font-size: var(--xh-control-font-lg);
@@ -79,7 +84,7 @@
 
     flex: none;
     min-inline-size: 0;
-    block-size: var(--xh-side-nav-input-h, var(--xh-_side-nav-row-h));
+    block-size: var(--xh-side-nav-input-h, var(--xh-_side-nav-input-h));
     padding-block: 0;
     padding-inline: var(--xh-side-nav-input-px, var(--xh-_side-nav-row-px));
     border: none;
@@ -213,7 +218,7 @@
     --xh-collection-inline-padding: var(--xh-side-nav-link-px, var(--xh-_side-nav-row-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-side-nav-link-font-size, var(--xh-_side-nav-row-font-size));
-    --xh-collection-radius: var(--xh-side-nav-link-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-side-nav-link-radius, var(--xh-shape-surface));
     /* 作者的图标尺槽经桥接槽下发到行，家族缺省按 data-xh-collection-size 取档 */
     --xh-collection-glyph-size: var(--xh-side-nav-icon-size, var(--xh-_collection-glyph-size));
     --xh-collection-fg-rest: var(--xh-side-nav-row-fg, currentColor);
@@ -223,16 +228,16 @@
     --xh-collection-bg-hover: var(--xh-side-nav-row-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-side-nav-row-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-pressed: var(--xh-side-nav-row-bg-pressed, var(--xh-bg-subtle-hover));
-    /* 当前页：页内持久集合的唯一标记是品牌淡底行面 + 淡底前景，字重不变（与静息同为 regular） */
+    /* 当前页：页内持久集合的标记是品牌淡底行面 + 淡底前景；侧栏另把字重提到 semibold，整列扫读时当前项一眼可见 */
     --xh-collection-bg-current: var(--xh-side-nav-row-bg-active, var(--xh-bg-brand-subtle));
     --xh-collection-fg-current: var(--xh-side-nav-row-fg-active, var(--xh-fg-on-brand-subtle));
     --xh-collection-fg-current-hover: var(--xh-side-nav-row-fg-active, var(--xh-fg-on-brand-subtle));
     --xh-collection-fg-current-highlight: var(--xh-side-nav-row-fg-active, var(--xh-fg-on-brand-subtle));
     --xh-collection-fg-current-pressed: var(--xh-side-nav-row-fg-active, var(--xh-fg-on-brand-subtle));
-    --xh-collection-font-weight-current: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-current-hover: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-current-highlight: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-current-pressed: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-current: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-semibold));
+    --xh-collection-font-weight-current-hover: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-semibold));
+    --xh-collection-font-weight-current-highlight: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-semibold));
+    --xh-collection-font-weight-current-pressed: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-semibold));
     --xh-collection-indicator-fg-current: var(--xh-side-nav-indicator-color, var(--xh-fg-brand));
     --xh-collection-indicator-fg-current-hover: var(--xh-side-nav-indicator-color, var(--xh-fg-brand));
     --xh-collection-indicator-fg-current-highlight: var(--xh-side-nav-indicator-color, var(--xh-fg-brand));

package/dist/css/signature-pad.css

@@ -23,34 +23,34 @@
     gap: var(--xh-signature-pad-gap, var(--xh-space-2));
   }
 
-  /* 复合单字段的标签：14 / 500 / fg-default，不随档；贴画布 space-1——
+  /* 复合单字段的标签：14 / 400 / fg-muted，不随档；与画布隔 space-2——
      容器的 gap 归画布之后的部件，标签在它之上补一段差值把距离收成目标值 */
   .xh-scope-signature-pad[data-part='label'] {
     margin-block-end: calc(
-      var(--xh-signature-pad-label-gap, var(--xh-space-1))
+      var(--xh-signature-pad-label-gap, var(--xh-space-2))
       - var(--xh-signature-pad-gap, var(--xh-space-2))
     );
-    color: var(--xh-signature-pad-label-fg, var(--xh-fg-default));
+    color: var(--xh-signature-pad-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-signature-pad-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-signature-pad-label-font-weight, var(--xh-text-label-weight));
   }
 
   .xh-scope-signature-pad[data-part='label'][data-disabled] {
-    color: var(--xh-signature-pad-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-signature-pad-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 画布是块状的写字区：宽度铺满外层，高度由宽高比决定。
      控件行高那把尺量的是一行控件，一块要写字的面积用不上它。
      touch-action 由连接层内联写死，触摸落笔才不会被页面滚动抢走。
      外壳按字段规则自绘（登记的画布型字段例外：字段家族配方钉死控件行高，画布按宽高比撑高吃不下它）：
-     静息透明底 + border-control 描边 + control 圆角 + 无影 */
+     静息字段淡底 + border-control 描边 + control 圆角 + 无影，与字段外壳同一副面 */
   .xh-scope-signature-pad[data-part='control'] {
     display: block;
     inline-size: 100%;
     aspect-ratio: var(--xh-signature-pad-aspect-ratio, 5 / 2);
     border: var(--xh-stroke-thin) solid var(--xh-signature-pad-border, var(--xh-border-control));
     border-radius: var(--xh-signature-pad-radius, var(--xh-shape-control));
-    background: var(--xh-signature-pad-bg, transparent);
+    background: var(--xh-signature-pad-bg, var(--xh-bg-field));
     cursor: crosshair;
     /* 一划就会把画布连同旁边的文字一起刷成选中态 */
     user-select: none;
@@ -60,14 +60,21 @@
       background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* 悬停：底不变、描边升 border-strong，与字段外壳的悬停同一档 */
+  .xh-scope-signature-pad[data-part='control']:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-drawing]):hover {
+    border-color: var(--xh-signature-pad-border-hover, var(--xh-border-strong));
+  }
+
+  /* 校验失败：失效描边 + 4% 失效色淡底，与字段外壳的失效档同一副面 */
   .xh-scope-signature-pad[data-part='control'][data-invalid] {
     border-color: var(--xh-signature-pad-control-border-invalid, var(--xh-border-invalid));
+    background: var(--xh-signature-pad-bg-invalid, var(--xh-bg-field-invalid));
   }
 
-  /* 落笔期间把描边压深一档。border-strong 是装饰梯度里的一档，比 border-control 更淡，
-     用在这儿会让描边在落笔时反而变弱 */
+  /* 落笔期间与字段聚焦同一副面：换承载面 + 聚焦描边。排在失效之后，落笔时失效档让位 */
   .xh-scope-signature-pad[data-part='control'][data-drawing] {
-    border-color: var(--xh-signature-pad-border-drawing, var(--xh-border-control-hover));
+    border-color: var(--xh-signature-pad-border-drawing, var(--xh-border-control-focus));
+    background: var(--xh-signature-pad-bg-drawing, var(--xh-bg-surface));
   }
 
   /* 只读仍看得见签名，只是改不动：收掉手型，别暗示"在这儿能写"；
@@ -176,4 +183,11 @@
   .xh-scope-signature-pad[data-part='clear-trigger'][hidden] {
     display: none;
   }
+
+  /* 高对比档底色被系统换掉，落笔与失效只剩描边分得开：换系统高亮色 */
+  @media (forced-colors: active) {
+    .xh-scope-signature-pad[data-part='control']:is([data-drawing], [data-invalid]) {
+      border-color: Highlight;
+    }
+  }
 }

package/dist/css/skeleton.css

@@ -27,7 +27,7 @@
   .xh-scope-skeleton[data-part='root'] {
     display: flex;
     flex-direction: column;
-    gap: var(--xh-skeleton-gap, var(--xh-space-3));
+    gap: var(--xh-skeleton-gap, var(--xh-space-4));
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，补这条兜住加载结束后的收起态 */
@@ -45,8 +45,8 @@
   /*
    * 单根骨架条。底色与微光两层叠在一起：
    * background-color 是静止时看到的那层，background-image 是扫过去的那道光。
-   * 微光取比底亮一档的那支面色：浅色下比 bg-subtle 亮、深色下同样比它亮，
-   * 两个主题里扫过去的都是一道亮带，而不是浅色下反倒扫出一道暗带。
+   * 微光取淡底一档叠在条底上：浅色下黑墨叠深、扫过去是一道比条底深的暗带，
+   * 深色下白墨叠亮、是一道亮带；两个主题里都是条底往前景方向再进一档。
    */
   .xh-scope-skeleton[data-part='item'] {
     inline-size: 100%;
@@ -56,7 +56,7 @@
     background-image: linear-gradient(
       90deg,
       transparent 20%,
-      var(--xh-skeleton-sheen, var(--xh-bg-surface-raised)) 50%,
+      var(--xh-skeleton-sheen, var(--xh-bg-subtle)) 50%,
       transparent 80%
     );
     background-repeat: no-repeat;
@@ -65,10 +65,10 @@
     animation: xh-shimmer var(--xh-skeleton-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
   }
 
-  /* 一行文字的高度取正文字号，圆角拉满，看起来就是一行还没排出来的字 */
+  /* 一行文字的高度取一行正文的行框，小圆角的方条，看起来就是一行还没排出来的字 */
   .xh-scope-skeleton[data-part='item'][data-shape='text'] {
-    block-size: var(--xh-skeleton-text-block-size, var(--xh-text-caption-size));
-    border-radius: var(--xh-skeleton-text-radius, var(--xh-shape-pill));
+    block-size: var(--xh-skeleton-text-block-size, var(--xh-text-body-line-h));
+    border-radius: var(--xh-skeleton-text-radius, var(--xh-shape-inset));
   }
 
   /* 头像位：正方形加满圆角。宽度定死不跟着容器拉长，高度也不许被主轴压扁 */

package/dist/css/slider.css

@@ -17,11 +17,12 @@
      切换 orientation 的那一帧还会跟连接层清空另一轴的动作抢位置，把拇指钉在两轴都被约束的地方。
      皮肤只管另一条轴（交叉轴）的尺寸、颜色、圆角与状态表现。 */
 
-  /* 私有槽位：组件令牌 → 中档字面量两级回退。轨道厚度与拇指直径同时被 control / track / thumb
-     三个角色节点用到，收成两个槽位挂在 root 上，尺寸档只改这两处，靠继承发到子部件。 */
+  /* 私有槽位：组件令牌 → 中档两级回退。轨道厚度与拇指直径同时被 control / track / thumb
+     三个角色节点用到，收成两个槽位挂在 root 上，尺寸档只改这两处，靠继承发到子部件。
+     中档是一条 2px 的细轨（描边粗档）配 12px 的拇指（轨道拇指的 md 档） */
   .xh-scope-slider[data-part='root'] {
-    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-track-thumb-size));
-    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-track-thickness));
+    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-track-thumb-size-md));
+    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-stroke-thick));
 
     display: flex;
     flex-direction: column;
@@ -38,15 +39,17 @@
   /* 禁用不整体压暗：前景与表面各自降级——连接层把 data-disabled 发到每个角色节点上，
      轨道、区间、拇指、刻度与标签就近消费，写在各自的规则里 */
 
-  /* 字段标签：14 / 500 / fg-default，禁用换到 --xh-fg-subtle */
+  /* 字段标签：14 / 400 / fg-muted，与控件隔 space-2，禁用不另变色 */
   .xh-scope-slider[data-part='label'] {
-    color: var(--xh-slider-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-slider-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-slider-label-gap, var(--xh-space-2)) - var(--xh-slider-gap, var(--xh-space-1)));
+    color: var(--xh-slider-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-slider-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-slider-label-font-weight, var(--xh-text-label-weight));
   }
 
   .xh-scope-slider[data-part='label'][data-disabled] {
-    color: var(--xh-slider-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-slider-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 拇指以它为定位上下文（拇指常常浮出轨道，挂在 track 上会被轨道的盒子束住）。
@@ -88,12 +91,40 @@
     cursor: not-allowed;
   }
 
+  /* 粗指针：控件只有拇指那么厚，命中区沿交叉轴外扩，补足到粗指针命中下限（--xh-control-hit-coarse）。
+     外扩总量是「下限 − 拇指直径」，按拇指算而不是写死一格，sm 档 10px 的拇指也补得到下限。
+     横排时块首朝着标签：那一侧只扩半个余量、且不越过标签与控件之间的间距，点在标签上仍归标签、不直接跳值；
+     少扩的那一截挪到块尾补齐。竖排时标签不在行内轴上，两侧对称各扩一半。
+     落指在轨道上下这一截也能按下即跳、接着拖；伪元素排在刻度之前，刻度文案仍压在它上面接得到点按 */
+  @media (pointer: coarse) {
+    .xh-scope-slider[data-part='control'][data-orientation='horizontal']::before {
+      --xh-_slider-hit-start: min(
+        var(--xh-slider-label-gap, var(--xh-space-2)),
+        (var(--xh-control-hit-coarse) - var(--xh-_thumb-size)) / 2
+      );
+
+      content: '';
+      position: absolute;
+      inset-block-start: calc(-1 * var(--xh-_slider-hit-start));
+      inset-block-end: calc(var(--xh-_slider-hit-start) + var(--xh-_thumb-size) - var(--xh-control-hit-coarse));
+      inset-inline: 0;
+    }
+
+    .xh-scope-slider[data-part='control'][data-orientation='vertical']::before {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline: calc((var(--xh-_thumb-size) - var(--xh-control-hit-coarse)) / 2);
+    }
+  }
+
   /* 已选区间以它为定位上下文。不写 overflow: hidden：作者把拇指写进轨道里也是合法结构，
      一裁就把拇指切掉半个；区间的圆角由它自己那条 border-radius 兜住，本就不靠轨道来裁。 */
   .xh-scope-slider[data-part='track'] {
     position: relative;
     border-radius: var(--xh-slider-track-radius, var(--xh-shape-pill));
-    background: var(--xh-slider-track-bg, var(--xh-bg-subtle-active));
+    /* 底槽取淡底阶梯的 200 档（--xh-bg-subtle-hover） */
+    background: var(--xh-slider-track-bg, var(--xh-bg-subtle-hover));
   }
 
   .xh-scope-slider[data-part='track'][data-orientation='horizontal'] {
@@ -106,7 +137,7 @@
     inline-size: var(--xh-_track-thickness);
   }
 
-  /* 禁用：底槽退到 100 档淡底，已选区间换成禁用前景——两者仍分得开，值还读得出，只是没了品牌色 */
+  /* 禁用：底槽退到 100 档淡底，已选区间退到 200 档——两者仍分得开，值还读得出，只是没了品牌色 */
   .xh-scope-slider[data-part='track'][data-disabled] {
     background: var(--xh-slider-track-bg-disabled, var(--xh-bg-subtle));
   }
@@ -146,39 +177,35 @@
     background: var(--xh-slider-range-bg-invalid, var(--xh-border-invalid));
   }
 
+  /* 区间叠在底槽上：取不透明档，半透明的墨色压在半透明的底槽上会再叠深一层 */
   .xh-scope-slider[data-part='range'][data-disabled] {
-    background: var(--xh-slider-range-bg-disabled, var(--xh-fg-disabled));
+    background: var(--xh-slider-range-bg-disabled, var(--xh-bg-subtle-hover-opaque));
   }
 
   /* 圆点浮在轨道之上：轨道是流内的，拇指是绝对定位的，天然后来居上，不必再堆 z-index。
      box-sizing 必须显式写：描边要吃进直径里，否则实际盒子比 --xh-_thumb-size 宽两条边，
      下面按半个直径回拉的负外边距就对不上圆心。
-     拇指是可拖起的 raised 面：描边取装饰边（不透明档），raised 影只是加成、不作边界 */
+     拇指是平面的白底圆：2px 强调色描边就是它的边界，静止不投影；跟着手走时才抬起（见拖动那档） */
   .xh-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-opaque));
+    border: var(--xh-stroke-thick) solid var(--xh-slider-thumb-border, var(--xh-_tone, var(--xh-bg-brand)));
     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 时取到的是与这块底配对的前景色，
-       不写就取到从页面继承下来的正文色 */
-    color: var(--xh-_tone-on, var(--xh-fg-on-brand));
-    box-shadow: var(--xh-slider-thumb-shadow, var(--xh-elevation-raised));
+    background: var(--xh-slider-thumb-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-slider-thumb-shadow, none);
     cursor: grab;
     transition:
       scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
-     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
-     禁用的拇指退成白面，不在这一档里，吃库环 */
-  .xh-scope-slider[data-part='thumb']:not([data-disabled]):focus-visible {
-    --xh-_ring-color: currentColor;
+  /* 可悬停设备上指针落到拇指即放大一档，与拖动中同一比例：提示它抓得起来 */
+  @media (hover: hover) {
+    .xh-scope-slider[data-part='thumb']:hover:not([data-disabled], [data-readonly]) {
+      scale: var(--xh-slider-thumb-scale-dragging, var(--xh-motion-scale-drag));
+    }
   }
 
   /* 内联样式把 inset-inline-start 定在值所在的比例上，那是拇指的**起始边**不是圆心；
@@ -201,7 +228,7 @@
 
   /* 多拇指时只有手真正推着的那一个带 data-dragging，放大与光标因此不会全组一起变。
      放大用 scale 而不是改尺寸：变换绕自身中心发生，圆心不动，负外边距的算式也不用跟着改。
-     海拔从静态的 raised 换到 lifted：跟着手走的东西比贴在页面上的抬得高一档，
+     静止时不投影，拖动中才抬起到 lifted：跟着手走的东西离开页面一档，
      又不到锚定浮层那一层——用 floating 会让拇指和下拉面板一样重。 */
   .xh-scope-slider[data-part='thumb'][data-dragging] {
     /* 放大比例落进私有槽：挂在拇指里的值气泡读同一支反向缩回原尺寸 */
@@ -213,16 +240,16 @@
   }
 
   .xh-scope-slider[data-part='thumb'][data-invalid] {
-    background: var(--xh-slider-thumb-bg-invalid, var(--xh-border-invalid));
+    border-color: var(--xh-slider-thumb-border-invalid, var(--xh-border-invalid));
   }
 
   .xh-scope-slider[data-part='thumb'][data-readonly]:not([data-disabled]) {
     cursor: default;
   }
 
-  /* 禁用：面退到实体白面、描边留着、影收掉——拖不起来的东西不该看着像浮在轨道上。
-     不写 color：圆点上没有字，禁用拇指不进 Tab 序列也不会聚焦，环的前景在这里没有消费者 */
+  /* 禁用：白面留着、描边退到 200 档（不透明档：描边压在拇指自己的白底上，半透明的墨色要先兑实）、影收掉 */
   .xh-scope-slider[data-part='thumb'][data-disabled] {
+    border-color: var(--xh-slider-thumb-border-disabled, var(--xh-bg-subtle-hover-opaque));
     background: var(--xh-slider-thumb-bg-disabled, var(--xh-bg-surface));
     box-shadow: var(--xh-slider-thumb-shadow-disabled, none);
     cursor: not-allowed;
@@ -280,15 +307,14 @@
 
   /* —— 尺寸 —— */
   /* 尺寸只改 root 上那两个槽位，control / track / thumb 跟着一起走；中间档不写规则，缺省即中档。
-     两档都保持"拇指是轨道的三倍厚"这个比例，换档时圆点与底槽的关系看着不变。 */
+     拇指按轨道拇指的三档取 10 / 12 / 16px；轨道小档沿用中档的 2px（再细就读不出是条轨道），大档加到 3px */
   .xh-scope-slider[data-part='root'][data-size='sm'] {
-    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-space-3));
-    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-space-1));
+    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-track-thumb-size-sm));
   }
 
   .xh-scope-slider[data-part='root'][data-size='lg'] {
-    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-space-6));
-    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-space-2));
+    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-track-thumb-size-lg));
+    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-stroke-strong));
   }
 
   /* —— 刻度：圆点钉在轨道上、文案排在轨道外侧，坐标由连接层按百分比内联给出 —— */
@@ -298,21 +324,24 @@
     pointer-events: none;
   }
 
-  /* 刻度点是正方盒，取 circle（正方盒不得用 pill 冒充圆） */
+  /* 刻度点是 8px 的白底小圆，2px 描边取轨道色；正方盒取 circle（正方盒不得用 pill 冒充圆）。
+     box-sizing 显式写：描边吃进直径里，平移回中才落在比例点上 */
   .xh-scope-slider[data-part='tick'] {
     position: absolute;
     inset-block-start: 50%;
-    inline-size: var(--xh-slider-tick-size, var(--xh-space-1));
-    block-size: var(--xh-slider-tick-size, var(--xh-space-1));
+    box-sizing: border-box;
+    inline-size: var(--xh-slider-tick-size, var(--xh-space-2));
+    block-size: var(--xh-slider-tick-size, var(--xh-space-2));
+    border: var(--xh-stroke-thick) solid var(--xh-slider-tick-border, var(--xh-bg-subtle-hover));
     border-radius: var(--xh-slider-tick-radius, var(--xh-shape-circle));
-    background: var(--xh-slider-tick-bg, var(--xh-border-strong));
+    background: var(--xh-slider-tick-bg, var(--xh-bg-surface));
     /* 连接层把比例点写在 inset-inline-start 上：平移的行内分量乘书写方向的符号，rtl 下掉头，刻度点才以比例点为中心 */
     translate: calc(-50% * var(--xh-direction-sign)) -50%;
   }
 
-  /* 落进已选区间的刻度点跟 range 同色 */
+  /* 落进已选区间的刻度点描边跟 range 同色 */
   .xh-scope-slider[data-part='tick'][data-passed] {
-    background: var(--xh-slider-tick-bg-active, var(--xh-_tone, var(--xh-bg-brand)));
+    border-color: var(--xh-slider-tick-border-active, var(--xh-_tone, var(--xh-bg-brand)));
   }
 
   .xh-scope-slider[data-part='tick-label'] {
@@ -334,13 +363,13 @@
   }
 
   /* 禁用：刻度点与文案由 tick-group 上的 data-disabled 下发（连接层不给每个刻度单发），
-     已过的刻度点与区间同色，文案换禁用前景，点它跳档的手型收掉 */
+     刻度点描边与底槽同退到 100 档、已过的与区间同退到 200 档，文案换禁用前景，点它跳档的手型收掉 */
   .xh-scope-slider[data-part='tick-group'][data-disabled] [data-part='tick']:where(.xh-scope-slider) {
-    background: var(--xh-slider-tick-bg-disabled, var(--xh-border-default));
+    border-color: var(--xh-slider-tick-border-disabled, var(--xh-bg-subtle));
   }
 
   .xh-scope-slider[data-part='tick-group'][data-disabled] [data-part='tick'][data-passed]:where(.xh-scope-slider) {
-    background: var(--xh-slider-tick-bg-active-disabled, var(--xh-fg-disabled));
+    border-color: var(--xh-slider-tick-border-active-disabled, var(--xh-bg-subtle-hover-opaque));
   }
 
   .xh-scope-slider[data-part='tick-group'][data-disabled] [data-part='tick-label']:where(.xh-scope-slider) {

package/dist/css/sparkline.css

@@ -23,6 +23,12 @@
     --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));
+    /* 迷你图不画轴、标签与命中区，这几项照样写全：度量槽登记成了长度，不写的那项读到的是初始值 0，不是缺省 */
+    --xh-_chart-metric-hit-min: var(--xh-chart-hit-min);
+    --xh-_chart-metric-tick-length: var(--xh-chart-tick-length);
+    --xh-_chart-metric-label-gap: var(--xh-chart-label-gap);
+    --xh-_chart-metric-font-size: var(--xh-text-caption-size);
+    --xh-_chart-metric-leading: var(--xh-leading-tight);
 
     /* 缺省中性：线与柱退到弱化色，只让标记点取品牌色相的色槽 1，读者先看到「现在在哪」 */
     --xh-_sparkline-color: var(--xh-sparkline-color, var(--xh-chart-deemphasis));
@@ -30,9 +36,9 @@
 
     display: inline-block;
     inline-size: var(--xh-sparkline-width, 6rem);
-    /* 级联兜底：先写一行的高度算式（正文字号 × 正文行距），再写 1lh。
+    /* 级联兜底：先写一行正文的行框令牌（正文字号 × 正文行距），再写 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, var(--xh-text-body-line-h));
     block-size: var(--xh-sparkline-height, 1lh);
     /* 高度正好是一个行盒：顶边贴行盒顶边，行高不被撑开；居中对齐会按字的 x 高度再挪半格，行盒就多出一截 */
     vertical-align: top;