@xihan-ui/styles 3.1.0 → 4.0.0

package/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 @@
   /* 缺省档写在上面那条里 */
   [data-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 @@
 
   [data-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;
@@ -112,11 +117,11 @@
 
   /* 折叠一开始搜索框就与行文字一起淡出，展开等整栏宽度落定才淡入；落成图标栏之后让位：
      留着高度、不可见也不可聚焦（过滤此时暂停），下面的行不上下跳 */
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='input'] {
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='input']:where([data-scope='side-nav']) {
     opacity: 0;
   }
 
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='input'] {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='input']:where([data-scope='side-nav']) {
     visibility: hidden;
   }
 
@@ -171,13 +176,13 @@
 
   /* 图标栏里分组标题没有落点：字淡成透明、仍参与播报，标题留着自己的高度，下面的行不上下跳；
      折叠一开始就淡出，展开等整栏宽度落定才淡入。落成图标栏之后在这一格里画一道细分隔，分组仍看得出来 */
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='group-label'] {
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='group-label']:where([data-scope='side-nav']) {
     overflow: hidden;
     color: transparent;
     white-space: nowrap;
   }
 
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']::after {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']:where([data-scope='side-nav'])::after {
     content: '';
     position: absolute;
     inset-inline: var(--xh-_side-nav-row-px);
@@ -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));
@@ -275,9 +280,9 @@
 
   /* 行文字与展开箭头的淡变：折叠一开始就淡出，此时仍在行里、由收窄的行宽裁着；展开时等整栏宽度落定才淡入。
      弹出面板里的行不在此列 */
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-text']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='link-text']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-indicator']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-text']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])),
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='link-text']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])),
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-indicator']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])) {
     opacity: 0;
   }
 
@@ -286,8 +291,8 @@
      藏成 display:none 它们就一个名字都没有了。
      white-space: nowrap 防止 1px 宽把文本挤成竖排。
      弹出面板里的行不在此列——面板是正常宽度的浮层，文字照常显示 */
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-text']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link-text']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-text']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])),
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link-text']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])) {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -300,12 +305,12 @@
   }
 
   /* 展开指示是纯装饰（aria-hidden），落成图标栏之后整个不占位 */
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-indicator']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-indicator']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])) {
     display: none;
   }
 
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-trigger']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-trigger']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])),
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])) {
     --xh-collection-inline-padding: 0;
 
     justify-content: center;
@@ -441,7 +446,7 @@
 
   @media (forced-colors: active) {
     /* 图标栏里分组之间那道细分隔画的是一块底色，这一档里底色被统一换成 Canvas、整道消失；换成 GrayText 画回来 */
-    [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']::after {
+    [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']:where([data-scope='side-nav'])::after {
       background: GrayText;
     }
   }

package/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 归画布之后的部件，标签在它之上补一段差值把距离收成目标值 */
   [data-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));
   }
 
   [data-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 圆角 + 无影，与字段外壳同一副面 */
   [data-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，与字段外壳的悬停同一档 */
+  [data-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% 失效色淡底，与字段外壳的失效档同一副面 */
   [data-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 更淡，
-     用在这儿会让描边在落笔时反而变弱 */
+  /* 落笔期间与字段聚焦同一副面：换承载面 + 聚焦描边。排在失效之后，落笔时失效档让位 */
   [data-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 @@
   [data-scope='signature-pad'][data-part='clear-trigger'][hidden] {
     display: none;
   }
+
+  /* 高对比档底色被系统换掉，落笔与失效只剩描边分得开：换系统高亮色 */
+  @media (forced-colors: active) {
+    [data-scope='signature-pad'][data-part='control']:is([data-drawing], [data-invalid]) {
+      border-color: Highlight;
+    }
+  }
 }

package/css/skeleton.css

@@ -27,7 +27,7 @@
   [data-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 亮、深色下同样比它亮，
-   * 两个主题里扫过去的都是一道亮带，而不是浅色下反倒扫出一道暗带。
+   * 微光取淡底一档叠在条底上：浅色下黑墨叠深、扫过去是一道比条底深的暗带，
+   * 深色下白墨叠亮、是一道亮带；两个主题里都是条底往前景方向再进一档。
    */
   [data-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;
   }
 
-  /* 一行文字的高度取正文字号，圆角拉满，看起来就是一行还没排出来的字 */
+  /* 一行文字的高度取一行正文的行框，小圆角的方条，看起来就是一行还没排出来的字 */
   [data-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));
   }
 
   /* 头像位：正方形加满圆角。宽度定死不跟着容器拉长，高度也不许被主轴压扁 */
@@ -90,13 +90,13 @@
    * 微光扫的是一道亮带，呼吸改的是整根的浓淡——两者都表达"还在等"，
    * 换哪一档由作者定，缺省仍是微光。
    */
-  [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+  [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item']:where([data-scope='skeleton']) {
     background-image: none;
     animation: xh-skeleton-pulse var(--xh-skeleton-pulse-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-sweep) infinite alternate;
   }
 
   /* 静止档：底色留着，两层动效都撤掉 */
-  [data-scope='skeleton'][data-part='root'][data-animation='none'] [data-part='item'] {
+  [data-scope='skeleton'][data-part='root'][data-animation='none'] [data-part='item']:where([data-scope='skeleton']) {
     background-image: none;
     animation: none;
   }
@@ -104,17 +104,17 @@
   /* 呼吸档自带一条动画，压不住下面基础降级里的 animation: none，这一档各自再写一份。
      两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
   @media (prefers-reduced-motion: reduce) {
-    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item']:where([data-scope='skeleton']) {
       animation: none;
     }
   }
 
-  :where([data-motion='reduce']) [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+  :where([data-motion='reduce']) [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item']:where([data-scope='skeleton']) {
     animation: none;
   }
 
   @media print {
-    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item']:where([data-scope='skeleton']) {
       animation: none;
     }
   }

package/css/slider.css

@@ -17,11 +17,12 @@
      切换 orientation 的那一帧还会跟连接层清空另一轴的动作抢位置，把拇指钉在两轴都被约束的地方。
      皮肤只管另一条轴（交叉轴）的尺寸、颜色、圆角与状态表现。 */
 
-  /* 私有槽位：组件令牌 → 中档字面量两级回退。轨道厚度与拇指直径同时被 control / track / thumb
-     三个角色节点用到，收成两个槽位挂在 root 上，尺寸档只改这两处，靠继承发到子部件。 */
+  /* 私有槽位：组件令牌 → 中档两级回退。轨道厚度与拇指直径同时被 control / track / thumb
+     三个角色节点用到，收成两个槽位挂在 root 上，尺寸档只改这两处，靠继承发到子部件。
+     中档是一条 2px 的细轨（描边粗档）配 12px 的拇指（轨道拇指的 md 档） */
   [data-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，禁用不另变色 */
   [data-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));
   }
 
   [data-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 上会被轨道的盒子束住）。
@@ -64,7 +67,7 @@
      排了刻度文案的横轨两侧各让出一段，那半个文案落进让出来的这一段里。
      让在控件上而不是根上：轨道、刻度、拇指的坐标都以控件为基准，一起让开才不会彼此错位。 */
   [data-scope='slider'][data-part='root']:has([data-part='tick-label'])
-    [data-part='control'][data-orientation='horizontal'] {
+    [data-part='control'][data-orientation='horizontal']:where([data-scope='slider']) {
     margin-inline: var(--xh-slider-control-gutter, var(--xh-space-6));
   }
 
@@ -88,12 +91,40 @@
     cursor: not-allowed;
   }
 
+  /* 粗指针：控件只有拇指那么厚，命中区沿交叉轴外扩，补足到粗指针命中下限（--xh-control-hit-coarse）。
+     外扩总量是「下限 − 拇指直径」，按拇指算而不是写死一格，sm 档 10px 的拇指也补得到下限。
+     横排时块首朝着标签：那一侧只扩半个余量、且不越过标签与控件之间的间距，点在标签上仍归标签、不直接跳值；
+     少扩的那一截挪到块尾补齐。竖排时标签不在行内轴上，两侧对称各扩一半。
+     落指在轨道上下这一截也能按下即跳、接着拖；伪元素排在刻度之前，刻度文案仍压在它上面接得到点按 */
+  @media (pointer: coarse) {
+    [data-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;
+    }
+
+    [data-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 兜住，本就不靠轨道来裁。 */
   [data-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));
   }
 
   [data-scope='slider'][data-part='track'][data-orientation='horizontal'] {
@@ -106,7 +137,7 @@
     inline-size: var(--xh-_track-thickness);
   }
 
-  /* 禁用：底槽退到 100 档淡底，已选区间换成禁用前景——两者仍分得开，值还读得出，只是没了品牌色 */
+  /* 禁用：底槽退到 100 档淡底，已选区间退到 200 档——两者仍分得开，值还读得出，只是没了品牌色 */
   [data-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));
   }
 
+  /* 区间叠在底槽上：取不透明档，半透明的墨色压在半透明的底槽上会再叠深一层 */
   [data-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 强调色描边就是它的边界，静止不投影；跟着手走时才抬起（见拖动那档） */
   [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-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);
   }
 
-  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
-     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
-     禁用的拇指退成白面，不在这一档里，吃库环 */
-  [data-scope='slider'][data-part='thumb']:not([data-disabled]):focus-visible {
-    --xh-_ring-color: currentColor;
+  /* 可悬停设备上指针落到拇指即放大一档，与拖动中同一比例：提示它抓得起来 */
+  @media (hover: hover) {
+    [data-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 会让拇指和下拉面板一样重。 */
   [data-scope='slider'][data-part='thumb'][data-dragging] {
     /* 放大比例落进私有槽：挂在拇指里的值气泡读同一支反向缩回原尺寸 */
@@ -213,16 +240,16 @@
   }
 
   [data-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));
   }
 
   [data-scope='slider'][data-part='thumb'][data-readonly]:not([data-disabled]) {
     cursor: default;
   }
 
-  /* 禁用：面退到实体白面、描边留着、影收掉——拖不起来的东西不该看着像浮在轨道上。
-     不写 color：圆点上没有字，禁用拇指不进 Tab 序列也不会聚焦，环的前景在这里没有消费者 */
+  /* 禁用：白面留着、描边退到 200 档（不透明档：描边压在拇指自己的白底上，半透明的墨色要先兑实）、影收掉 */
   [data-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 */
   [data-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));
   }
 
   [data-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 显式写：描边吃进直径里，平移回中才落在比例点上 */
   [data-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 同色 */
   [data-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)));
   }
 
   [data-scope='slider'][data-part='tick-label'] {
@@ -334,28 +363,28 @@
   }
 
   /* 禁用：刻度点与文案由 tick-group 上的 data-disabled 下发（连接层不给每个刻度单发），
-     已过的刻度点与区间同色，文案换禁用前景，点它跳档的手型收掉 */
-  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick'] {
-    background: var(--xh-slider-tick-bg-disabled, var(--xh-border-default));
+     刻度点描边与底槽同退到 100 档、已过的与区间同退到 200 档，文案换禁用前景，点它跳档的手型收掉 */
+  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick']:where([data-scope='slider']) {
+    border-color: var(--xh-slider-tick-border-disabled, var(--xh-bg-subtle));
   }
 
-  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick'][data-passed] {
-    background: var(--xh-slider-tick-bg-active-disabled, var(--xh-fg-disabled));
+  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick'][data-passed]:where([data-scope='slider']) {
+    border-color: var(--xh-slider-tick-border-active-disabled, var(--xh-bg-subtle-hover-opaque));
   }
 
-  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick-label'] {
+  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick-label']:where([data-scope='slider']) {
     color: var(--xh-slider-tick-label-fg-disabled, var(--xh-fg-disabled));
     cursor: not-allowed;
   }
 
   /* 竖直轨道：点与文案换轴，坐标由连接层写在 block 轴上 */
-  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick'] {
+  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick']:where([data-scope='slider']) {
     inset-block-start: auto;
     inset-inline-start: 50%;
     translate: calc(-50% * var(--xh-direction-sign)) 50%;
   }
 
-  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick-label'] {
+  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick-label']:where([data-scope='slider']) {
     inset-block-start: auto;
     inset-inline-start: 100%;
     margin-block-start: 0;

package/css/sortable.css

@@ -50,7 +50,7 @@
      其余项反过来要过渡：它们是被让开的，瞬移会看不出发生了什么。
      键盘拖动时被拖那一项不跟手、逐格挪，与让位的邻项同一段一起滑；抓起时的抬升照常淡变。
      同组别的列表的一项悬在这里（data-drop='inside'）时，插入点及其后的项同样是被让开的 */
-  [data-scope='sortable'][data-part='root']:is([data-dragging], [data-drop='inside']) [data-part='item']:not([data-dragging]) {
+  [data-scope='sortable'][data-part='root']:is([data-dragging], [data-drop='inside']) [data-part='item']:where([data-scope='sortable']):not([data-dragging]) {
     transition: translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous);
   }
 
@@ -62,7 +62,7 @@
     flex: 0 0 var(--xh-_sortable-incoming-size);
   }
 
-  [data-scope='sortable'][data-part='root'][data-drag-mode='keyboard'] [data-part='item'][data-dragging] {
+  [data-scope='sortable'][data-part='root'][data-drag-mode='keyboard'] [data-part='item'][data-dragging]:where([data-scope='sortable']) {
     transition:
       translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),

package/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;