@xihan-ui/styles 1.0.0-alpha.2 → 1.0.0-alpha.3

package/css/radio-group.css

@@ -27,12 +27,12 @@
   /* —— 尺寸 —— */
   [data-scope='radio-group'][data-part='root'][data-size='sm'] {
     --xh-_radio-group-item-gap: var(--xh-control-gap-sm);
-    --xh-_radio-group-font-size: var(--xh-font-size-sm);
+    --xh-_radio-group-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='radio-group'][data-part='root'][data-size='lg'] {
     --xh-_radio-group-item-gap: var(--xh-control-gap-lg);
-    --xh-_radio-group-font-size: var(--xh-font-size-lg);
+    --xh-_radio-group-font-size: var(--xh-control-font-lg);
   }
 
   [data-scope='radio-group'][data-part='label'] {
@@ -64,7 +64,6 @@
   [data-scope='radio-group'][data-part='item'][data-disabled] {
     color: var(--xh-radio-group-item-fg-disabled, var(--xh-fg-disabled));
     cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
   }
 
   [data-scope='radio-group'][data-part='indicator'] {
@@ -72,8 +71,8 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: 16px;
-    block-size: 16px;
+    inline-size: var(--xh-radio-group-indicator-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-radio-group-indicator-size, var(--xh-control-indicator-size));
     border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-control));
     border-radius: var(--xh-shape-pill);
     background: var(--xh-radio-group-indicator-bg, var(--xh-bg-canvas));
@@ -84,11 +83,18 @@
     border-color: var(--xh-radio-group-indicator-border-checked, var(--xh-_radio-group-accent));
   }
 
-  /* 圆点用 scale 收放，选中态切换不引起布局抖动 */
+  /* 校验失败：圆圈描边转警示色，压在 checked 规则之后 */
+  [data-scope='radio-group'][data-part='indicator'][data-invalid],
+  [data-scope='radio-group'][data-part='indicator'][data-state='checked'][data-invalid] {
+    border-color: var(--xh-radio-group-indicator-border-invalid, var(--xh-border-invalid));
+  }
+
+  /* 圆点用 scale 收放，选中态切换不引起布局抖动。
+     直径取指示器的一半：换尺寸档时圈与点一起走，比例不散 */
   [data-scope='radio-group'][data-part='indicator']::before {
     content: '';
-    inline-size: 8px;
-    block-size: 8px;
+    inline-size: calc(var(--xh-radio-group-indicator-size, var(--xh-control-indicator-size)) / 2);
+    block-size: calc(var(--xh-radio-group-indicator-size, var(--xh-control-indicator-size)) / 2);
     border-radius: var(--xh-shape-pill);
     background: var(--xh-radio-group-indicator-dot, var(--xh-_radio-group-accent));
     scale: 0;

package/css/rating.css

@@ -24,13 +24,13 @@
   [data-scope='rating'][data-part='root'][data-size='sm'] {
     --xh-_rating-item-gap: var(--xh-control-gap-sm);
     --xh-_rating-item-size: var(--xh-font-size-xl);
-    --xh-_rating-font-size: var(--xh-font-size-sm);
+    --xh-_rating-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='rating'][data-part='root'][data-size='lg'] {
     --xh-_rating-item-gap: var(--xh-control-gap-lg);
     --xh-_rating-item-size: var(--xh-font-size-3xl);
-    --xh-_rating-font-size: var(--xh-font-size-lg);
+    --xh-_rating-font-size: var(--xh-control-font-lg);
   }
 
   /* 整体压暗只做一次，落在最外层：星星逐颗再叠 opacity 会越叠越黑 */

package/css/reset.css

@@ -19,4 +19,21 @@
     font: inherit;
     letter-spacing: inherit;
   }
+
+  /*
+   * 浮层定位层的生命周期契约：落位才露。
+   *
+   * 坐标依赖浮层自己的尺寸，尺寸要等元素进 DOM 参与排版才量得到，所以浮层一定先渲染、
+   * 再量、再定位——展开的那几帧坐标还是兜底的 0。默认藏着，连接层算出坐标后打
+   * data-positioned 才显示，忘了接线的新浮层只会不显示，不会先在视口左上角闪一帧。
+   * 用 visibility 而不是 display：display:none 会让浮层退出排版，引擎量不到它的尺寸。
+   * 锚点被滚出可视区时引擎置 hidden，各皮肤另有一条 [data-hidden] 压回去。
+   */
+  [data-scope][data-part='positioner'] {
+    visibility: hidden;
+  }
+
+  [data-scope][data-part='positioner'][data-positioned] {
+    visibility: visible;
+  }
 }

package/css/result.css

@@ -9,8 +9,8 @@
        换档不必给每个部件各写一条选择器 */
     --xh-_result-gap: var(--xh-stack-gap-md);
     --xh-_result-py: var(--xh-section-py);
-    --xh-_result-icon-size: 3.5rem;
-    --xh-_result-title-size: var(--xh-font-size-xl);
+    --xh-_result-icon-size: var(--xh-glyph-size-3xl);
+    --xh-_result-title-size: var(--xh-text-heading-3-size);
     /* 说明的读行宽度：整句话不收窄就会拉成一条难读的长行 */
     --xh-_result-measure: 32rem;
     /* 图标区的语气色，由 data-status 换掉；没写 status 就退成中性 */
@@ -36,15 +36,15 @@
   [data-scope='result'][data-part='root'][data-size='sm'] {
     --xh-_result-gap: var(--xh-space-3);
     --xh-_result-py: var(--xh-space-6);
-    --xh-_result-icon-size: 2.5rem;
-    --xh-_result-title-size: var(--xh-font-size-lg);
+    --xh-_result-icon-size: var(--xh-glyph-size-2xl);
+    --xh-_result-title-size: var(--xh-control-font-lg);
   }
 
   [data-scope='result'][data-part='root'][data-size='lg'] {
     --xh-_result-gap: var(--xh-space-6);
     --xh-_result-py: var(--xh-space-8);
-    --xh-_result-icon-size: 4.5rem;
-    --xh-_result-title-size: var(--xh-font-size-2xl);
+    --xh-_result-icon-size: var(--xh-glyph-size-4xl);
+    --xh-_result-title-size: var(--xh-text-heading-2-size);
   }
 
   /* —— 语气 —— */

package/css/scroll-area.css

@@ -1,37 +1,30 @@
-@layer xihan.motion {
-  /* 滚动条从收起到露出的淡入。收起走的是 [hidden]（display:none），没有退场动画可言——
-     display:none 是瞬时的，硬挂 fade-out 只会看到一帧都不播。
-     元素从 display:none 变回可见时动画会重新开始，这一条因此每次露面都播一遍。 */
-  @keyframes xh-scroll-area-bar-in {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-}
-
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='scroll-area'] {
     --xh-scroll-area-skin: 1;
   }
 
-  /* 定位分工：滑块在**主轴**上的起点与长度由连接层每帧写进内联样式——
-     竖向是 inset-block-start / block-size，横向是 inset-inline-start / inline-size。
-     这份皮肤一个都不碰：内联优先级高于样式表，写了不但是死声明，
-     换轴的那一帧还会跟连接层清空另一轴的动作抢位置，把滑块钉在两轴都被约束的地方。
-     皮肤只管另一条轴（交叉轴）的尺寸、颜色、圆角与状态表现。 */
+  /* 滚动区是视口加两条 scrollbar 的组装：轨道、滑块与交叉口戴 data-scope="scrollbar"，
+     它们的皮归 scrollbar.css；这里只管视口、内容层，以及充当 scrollbar 根节点的那个挂载点。 */
 
-  /* 滚动条与右下角补丁都是绝对定位的，以它为参照，因此它必须自己建定位上下文。
+  /* 滚动条是绝对定位的，以它为参照，因此它必须自己建定位上下文。
      overflow:hidden 管的是溢出边界：作者给 root 定了尺寸后，内容与滚动条都不该漫出这个框。 */
   [data-scope='scroll-area'][data-part='root'] {
+    /* 厚度只算一次：尺寸档换的就是它，视口让道、交叉口让位与补丁都按同一个数 */
+    --xh-_scrollbar-thickness: var(--xh-scrollbar-thickness-md);
+
     position: relative;
     overflow: hidden;
   }
 
+  [data-scope='scroll-area'][data-part='root'][data-size='sm'] {
+    --xh-_scrollbar-thickness: var(--xh-scrollbar-thickness-sm);
+  }
+
+  [data-scope='scroll-area'][data-part='root'][data-size='lg'] {
+    --xh-_scrollbar-thickness: var(--xh-scrollbar-thickness-lg);
+  }
+
   /* 真正滚动的那层。原生滚动条藏起来，滚动能力一点不减——
      键盘（PageUp/PageDown、方向键、Home/End）与滚轮走的都还是浏览器原生通路。 */
   [data-scope='scroll-area'][data-part='viewport'] {
@@ -41,13 +34,17 @@
        这两条是本文件里仅有的物理属性，换成逻辑写法会在多数浏览器上直接失效 */
     overflow-x: auto;
     overflow-y: auto;
-    /* 藏原生滚动条的标准写法；下面那条 ::-webkit-scrollbar 兜住还没实现它的引擎。
-       只藏外观，滚动能力一点不动：这里刻意不写 overscroll-behavior，
-       滚到尽头要不要把滚动传给外层，仍然按浏览器的默认来 */
+  }
+
+  /* 藏原生滚动条的标准写法；下面那条 ::-webkit-scrollbar 兜住还没实现它的引擎。
+     只藏外观，滚动能力一点不动：这里刻意不写 overscroll-behavior，
+     滚到尽头要不要把滚动传给外层，仍然按浏览器的默认来。
+     触屏上自绘滚动条交给了原生（data-native），原生滚动条就留着 */
+  [data-scope='scroll-area'][data-part='viewport']:not([data-native]) {
     scrollbar-width: none;
   }
 
-  [data-scope='scroll-area'][data-part='viewport']::-webkit-scrollbar {
+  [data-scope='scroll-area'][data-part='viewport']:not([data-native])::-webkit-scrollbar {
     /* 这里不是角色节点而是伪元素，不涉及 [hidden] 那条规矩 */
     display: none;
   }
@@ -69,14 +66,13 @@
   }
 
   /* 有滚动条要占道时，视口在那条轴上收窄一条道的宽度，末端内容不再被压在滚动条底下。
-     缩视口而不是给视口加内边距：滚动容器末端缘的 padding 计不计进 scrollWidth，各引擎不一致。
-     子结合符：只认自己这一层的滚动条，嵌套滚动区不会把外层视口也削掉。 */
-  [data-scope='scroll-area'][data-part='root']:has(> [data-part='scrollbar'][data-orientation='vertical'][data-gutter]) > [data-scope='scroll-area'][data-part='viewport'] {
-    inline-size: calc(100% - var(--xh-scroll-area-bar-size, 10px));
+     缩视口而不是给视口加内边距：滚动容器末端缘的 padding 计不计进 scrollWidth，各引擎不一致。 */
+  [data-scope='scroll-area'][data-part='viewport'][data-lane-vertical] {
+    inline-size: calc(100% - var(--xh-_scrollbar-thickness));
   }
 
-  [data-scope='scroll-area'][data-part='root']:has(> [data-part='scrollbar'][data-orientation='horizontal'][data-gutter]) > [data-scope='scroll-area'][data-part='viewport'] {
-    block-size: calc(100% - var(--xh-scroll-area-bar-size, 10px));
+  [data-scope='scroll-area'][data-part='viewport'][data-lane-horizontal] {
+    block-size: calc(100% - var(--xh-_scrollbar-thickness));
   }
 
   /* 横向溢出全靠它撑：内容若跟着视口一起收成 100% 宽，横轴永远量不出溢出，
@@ -85,91 +81,67 @@
     min-inline-size: fit-content;
   }
 
-  /* 轨道。touch-action 关掉浏览器自己的手势：不关的话手指一按滑块页面就跟着滚，
-     指针随即被系统收走（pointercancel），拖到一半的滑块停在原地。
-     user-select 同理——拖动时选中页面文字会让滑块"粘"住。 */
+  /* 滚动条挂载点同时充当那条 scrollbar 的根节点：scrollbar 那份皮肤的根规则落在
+     [data-scope='scrollbar'][data-part='root'] 上，而这里没有那个节点，根该有的排布得在这儿补齐
+     （轨道与滑块的皮仍归 scrollbar 那一份）。滑块主轴的起点与长度由连接层写进内联样式，这里不碰。 */
   [data-scope='scroll-area'][data-part='scrollbar'] {
     position: absolute;
-    padding: var(--xh-scroll-area-bar-padding, 2px);
-    background: var(--xh-scroll-area-bar-bg, var(--xh-bg-subtle));
+    /* touch-action 关掉浏览器自己的手势：不关的话手指一按滑块页面就跟着滚，
+       指针随即被系统收走（pointercancel），拖到一半的滑块停在原地。
+       user-select 同理——拖动时选中页面文字会让滑块"粘"住。 */
     touch-action: none;
     user-select: none;
+    /* 露出与收起都淡变；收起态连 visibility 一起收，退场播完才真正摸不到 */
+    transition:
+      opacity var(--xh-motion-duration-enter) var(--xh-motion-ease-enter),
+      visibility 0s linear 0s;
   }
 
   [data-scope='scroll-area'][data-part='scrollbar'][data-orientation='vertical'] {
     inset-block: 0;
     inset-inline-end: 0;
-    inline-size: var(--xh-scroll-area-bar-size, 10px);
+    inline-size: var(--xh-_scrollbar-thickness);
   }
 
   [data-scope='scroll-area'][data-part='scrollbar'][data-orientation='horizontal'] {
     inset-inline: 0;
     inset-block-end: 0;
-    block-size: var(--xh-scroll-area-bar-size, 10px);
+    block-size: var(--xh-_scrollbar-thickness);
   }
 
-  [data-scope='scroll-area'][data-part='scrollbar'][data-state='visible'] {
-    animation: xh-scroll-area-bar-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  /* 两条都在场：各自在末端让出交叉口那一格，交叉口由竖条里的 corner 补 */
+  [data-scope='scroll-area'][data-part='scrollbar'][data-orientation='vertical'][data-gutter] {
+    inset-block-end: var(--xh-_scrollbar-thickness);
   }
 
-  /* 除视口外全是纯容器：既不进 Tab 序列也不承载焦点，作者若给它们加了 tabindex，
-     该显形的也该是视口那圈环，不是这里再多画一圈 */
-  [data-scope='scroll-area'][data-part='root']:focus-visible,
-  [data-scope='scroll-area'][data-part='content']:focus-visible,
-  [data-scope='scroll-area'][data-part='scrollbar']:focus-visible,
-  [data-scope='scroll-area'][data-part='corner']:focus-visible {
-    outline: none;
+  [data-scope='scroll-area'][data-part='scrollbar'][data-orientation='horizontal'][data-gutter] {
+    inset-inline-end: var(--xh-_scrollbar-thickness);
   }
 
-  /* 滑块。主轴（起点 + 长度）来自内联样式，这里只给定位模式、交叉轴与配色。
-     绝不给 inset / size 加过渡：滚动时这两个值每帧都在变，一加过渡滑块就永远追在内容后面。
-     也刻意不写 min-block-size / min-inline-size：滑块的最短长度由几何层的常量算进内联尺寸里，
-     样式表再给一个下限就成了两个事实源，两者一旦不一致，滑块的实际长度与它能走的距离就对不上。 */
-  [data-scope='scroll-area'][data-part='thumb'] {
-    position: absolute;
-    border-radius: var(--xh-scroll-area-thumb-radius, var(--xh-shape-pill));
-    background: var(--xh-scroll-area-thumb-bg, var(--xh-color-neutral-400));
-    cursor: default;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  [data-scope='scroll-area'][data-part='scrollbar'][data-state='hidden'] {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--xh-motion-duration-exit) var(--xh-motion-ease-exit),
+      visibility 0s linear var(--xh-motion-duration-exit);
   }
 
-  /* 交叉轴在轨道内两侧各收进一个轨道内边距，与轨道那条 padding 共用同一个旋钮。
-     这一侧的 inset 连接层每帧写成空串（即不设），样式表接手才有确定值；
-     不写的话绝对定位会退回"静态位置"。
-     主轴那一侧一律不写：几何层量的轨道是 padding box，滑块长度也解析在同一个盒子上。 */
-  [data-scope='scroll-area'][data-part='thumb'][data-orientation='vertical'] {
-    inset-inline: var(--xh-scroll-area-bar-padding, 2px);
-  }
-
-  [data-scope='scroll-area'][data-part='thumb'][data-orientation='horizontal'] {
-    inset-block: var(--xh-scroll-area-bar-padding, 2px);
-  }
-
-  [data-scope='scroll-area'][data-part='thumb']:hover {
-    background: var(--xh-scroll-area-thumb-bg-hover, var(--xh-color-neutral-500));
-  }
-
-  /* 手正按在这条轴的滑块上时才变深：两条轴各有一个滑块，全打上标记就分不出手在哪一个上 */
-  [data-scope='scroll-area'][data-part='thumb'][data-dragging] {
-    background: var(--xh-scroll-area-thumb-bg-dragging, var(--xh-color-neutral-600));
+  /* 触屏上交给原生滚动：整条不占位也不画 */
+  [data-scope='scroll-area'][data-part='scrollbar'][data-native] {
+    display: none;
   }
 
-  /* 两条滚动条同时在场时，右下角那个交叉口谁都盖不住，留着会露出底下的内容。
-     z-index 只是为了不依赖作者把 corner 写在两条滚动条之后 */
-  [data-scope='scroll-area'][data-part='corner'] {
-    position: absolute;
-    z-index: 1;
-    display: block;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    inline-size: var(--xh-scroll-area-bar-size, 10px);
-    block-size: var(--xh-scroll-area-bar-size, 10px);
-    background: var(--xh-scroll-area-corner-bg, var(--xh-bg-subtle));
+  /* 除视口外全是纯容器：既不进 Tab 序列也不承载焦点，作者若给它们加了 tabindex，
+     该显形的也该是视口那圈环，不是这里再多画一圈 */
+  [data-scope='scroll-area'][data-part='root']:focus-visible,
+  [data-scope='scroll-area'][data-part='content']:focus-visible,
+  [data-scope='scroll-area'][data-part='scrollbar']:focus-visible {
+    outline: none;
   }
 
   /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位 */
-  [data-scope='scroll-area'][data-part='scrollbar'][hidden],
-  [data-scope='scroll-area'][data-part='corner'][hidden] {
+  [data-scope='scroll-area'][data-part='scrollbar'][hidden] {
     display: none;
   }
 }

package/css/scrollbar.css

@@ -0,0 +1,167 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='scrollbar'] {
+    --xh-scrollbar-skin: 1;
+  }
+
+  /* 挂了自绘滚动条的容器：原生滚动条只藏外观，滚动能力一点不动。
+     标记由机器挂监听时打上，最后一条滚动条拆走才撤。下面那条 ::-webkit-scrollbar 兜住还没实现 scrollbar-width 的引擎 */
+  [data-xh-scrollbar] {
+    scrollbar-width: none;
+  }
+
+  [data-xh-scrollbar]::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* 定位分工：滑块在**主轴**上的起点与长度由连接层每帧写进内联样式——
+     竖向是 inset-block-start / block-size，横向是 inset-inline-start / inline-size。
+     这份皮肤一个都不碰：内联优先级高于样式表，写了不但是死声明，
+     换轴的那一帧还会跟连接层清空另一轴的动作抢位置，把滑块钉在两轴都被约束的地方。
+     皮肤只管另一条轴（交叉轴）的尺寸、颜色、圆角与状态表现。
+
+     根用绝对定位、贴容器的对应边：滚动容器归作者，本组件只要求它自己的定位祖先建了上下文。
+     作者要把它放在别处（比如浮在内容之上、或摆到框外），改这一条即可。 */
+  [data-scope='scrollbar'][data-part='root'] {
+    /* 厚度只算一次：尺寸档换的就是它，交叉口的让位与补丁都按同一个数 */
+    --xh-_scrollbar-thickness: var(--xh-scrollbar-thickness-md);
+
+    position: absolute;
+    /* touch-action 关掉浏览器自己的手势：不关的话手指一按滑块页面就跟着滚，
+       指针随即被系统收走（pointercancel），拖到一半的滑块停在原地。
+       user-select 同理——拖动时选中页面文字会让滑块"粘"住。 */
+    touch-action: none;
+    user-select: none;
+    /* 露出与收起都淡变；收起态连 visibility 一起收，退场播完才真正摸不到、也进不了 Tab 序 */
+    transition:
+      opacity var(--xh-motion-duration-enter) var(--xh-motion-ease-enter),
+      visibility 0s linear 0s;
+  }
+
+  [data-scope='scrollbar'][data-part='root'][data-size='sm'] {
+    --xh-_scrollbar-thickness: var(--xh-scrollbar-thickness-sm);
+  }
+
+  [data-scope='scrollbar'][data-part='root'][data-size='lg'] {
+    --xh-_scrollbar-thickness: var(--xh-scrollbar-thickness-lg);
+  }
+
+  [data-scope='scrollbar'][data-part='root'][data-orientation='vertical'] {
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: var(--xh-_scrollbar-thickness);
+  }
+
+  [data-scope='scrollbar'][data-part='root'][data-orientation='horizontal'] {
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: var(--xh-_scrollbar-thickness);
+  }
+
+  /* 横竖两条同时摆着：各自在末端让出交叉口那一格，交叉口由 corner 补 */
+  [data-scope='scrollbar'][data-part='root'][data-orientation='vertical'][data-gutter] {
+    inset-block-end: var(--xh-_scrollbar-thickness);
+  }
+
+  [data-scope='scrollbar'][data-part='root'][data-orientation='horizontal'][data-gutter] {
+    inset-inline-end: var(--xh-_scrollbar-thickness);
+  }
+
+  [data-scope='scrollbar'][data-part='root'][data-state='hidden'] {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--xh-motion-duration-exit) var(--xh-motion-ease-exit),
+      visibility 0s linear var(--xh-motion-duration-exit);
+  }
+
+  /* 触屏上交给原生滚动：整条不占位也不画 */
+  [data-scope='scrollbar'][data-part='root'][data-native] {
+    display: none;
+  }
+
+  /* 轨道铺满根，滑块的行程按它量。内边距把滑块从两侧收进来一点，
+     与 scroll-area 那份共用同一个间隙令牌 */
+  [data-scope='scrollbar'][data-part='track'] {
+    position: relative;
+    inline-size: 100%;
+    block-size: 100%;
+    padding: var(--xh-scrollbar-gutter);
+    background: var(--xh-scrollbar-track-bg, var(--xh-bg-scrollbar-track));
+  }
+
+  /* 滑块。主轴（起点 + 长度）来自内联样式，这里只给定位模式、交叉轴与配色。
+     绝不给 inset / size 加过渡：滚动时这两个值每帧都在变，一加过渡滑块就永远追在内容后面。
+     也刻意不写 min-block-size / min-inline-size：滑块的最短长度由几何层折进内联尺寸里，
+     样式表再给一个下限就成了两个事实源，两者一旦不一致，滑块的实际长度与它能走的距离就对不上。 */
+  [data-scope='scrollbar'][data-part='thumb'] {
+    position: absolute;
+    border-radius: var(--xh-scrollbar-thumb-radius, var(--xh-shape-pill));
+    background: var(--xh-scrollbar-thumb-bg, var(--xh-fg-scrollbar-thumb));
+    cursor: default;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 交叉轴在轨道内两侧各收进一个间隙，与轨道那条 padding 共用同一个旋钮。
+     这一侧的 inset 连接层每帧写成空串（即不设），样式表接手才有确定值；
+     不写的话绝对定位会退回"静态位置"。
+     主轴那一侧一律不写：几何层量的轨道是 padding box，滑块长度也解析在同一个盒子上。 */
+  [data-scope='scrollbar'][data-part='thumb'][data-orientation='vertical'] {
+    inset-inline: var(--xh-scrollbar-gutter);
+  }
+
+  [data-scope='scrollbar'][data-part='thumb'][data-orientation='horizontal'] {
+    inset-block: var(--xh-scrollbar-gutter);
+  }
+
+  [data-scope='scrollbar'][data-part='thumb']:hover {
+    background: var(--xh-scrollbar-thumb-bg-hover, var(--xh-fg-scrollbar-thumb-hover));
+  }
+
+  [data-scope='scrollbar'][data-part='thumb'][data-dragging] {
+    background: var(--xh-scrollbar-thumb-bg-active, var(--xh-fg-scrollbar-thumb-active));
+  }
+
+  /* 只有开了 focusable 的滑块进得了 Tab 序，环也就只画在它身上。
+     偏移取负：环画在轨道内侧，否则会被滚动容器的溢出边界裁掉半圈 */
+  [data-scope='scrollbar'][data-part='thumb']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  /* 根与轨道都是纯容器，不承载焦点；作者若给它们加了 tabindex，也不该在这儿多画一圈 */
+  [data-scope='scrollbar'][data-part='root']:focus-visible,
+  [data-scope='scrollbar'][data-part='track']:focus-visible {
+    outline: none;
+  }
+
+  /* 禁用：整条不显形，这里只兜住作者硬把它显出来的那一路 */
+  [data-scope='scrollbar'][data-part='thumb'][data-disabled] {
+    background: var(--xh-scrollbar-thumb-bg-disabled, var(--xh-border-subtle));
+    cursor: not-allowed;
+  }
+
+  /* 交叉口补丁：贴在本条末端之外的那一格，与轨道同色，跟着本条淡入淡出 */
+  [data-scope='scrollbar'][data-part='corner'] {
+    position: absolute;
+    inline-size: var(--xh-_scrollbar-thickness);
+    block-size: var(--xh-_scrollbar-thickness);
+    background: var(--xh-scrollbar-corner-bg, var(--xh-scrollbar-track-bg, var(--xh-bg-scrollbar-track)));
+  }
+
+  [data-scope='scrollbar'][data-part='corner'][data-orientation='vertical'] {
+    inset-inline-start: 0;
+    inset-block-end: calc(-1 * var(--xh-_scrollbar-thickness));
+  }
+
+  [data-scope='scrollbar'][data-part='corner'][data-orientation='horizontal'] {
+    inset-block-start: 0;
+    inset-inline-end: calc(-1 * var(--xh-_scrollbar-thickness));
+  }
+
+  [data-scope='scrollbar'][data-part='root'][hidden],
+  [data-scope='scrollbar'][data-part='corner'][hidden] {
+    display: none;
+  }
+}