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

package/css/progress.css

@@ -1,3 +1,17 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-progress-indeterminate {
+    from {
+      inset-inline-start: -40%;
+    }
+
+    to {
+      inset-inline-start: 100%;
+    }
+  }
+}
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='progress'] {
@@ -7,7 +21,7 @@
   /* 私有槽位：组件令牌 → 中档字面量两级回退。厚度写在 root 上而不是 track 上，
      尺寸档才改得动一处就够，track 靠继承拿到值。 */
   [data-scope='progress'][data-part='root'] {
-    --xh-_thickness: var(--xh-progress-thickness, 6px);
+    --xh-_thickness: var(--xh-progress-thickness, var(--xh-track-thickness));
 
     display: inline-block;
     inline-size: 100%;
@@ -17,7 +31,7 @@
     overflow: hidden;
     inline-size: 100%;
     block-size: var(--xh-_thickness);
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-progress-track-radius, var(--xh-shape-pill));
     background: var(--xh-progress-track, var(--xh-bg-subtle-active));
   }
 
@@ -25,7 +39,7 @@
      轨道不跟着换族：只有已完成的那段换色，底槽保持中性才读得出"完成了多少"。 */
   [data-scope='progress'][data-part='range'] {
     block-size: 100%;
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-progress-range-radius, var(--xh-shape-pill));
     background: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
     transition: inline-size var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
@@ -95,15 +109,47 @@
     transition: stroke-dashoffset var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* 进度未知：线形条改为一小段来回扫。宽度交给动画，连接层算出的 inline-size 与
+     那条过渡都得让开，否则每帧都在跟动画抢同一个属性 */
+  [data-scope='progress'][data-part='track'][data-state='indeterminate'] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  [data-scope='progress'][data-part='range'][data-state='indeterminate'] {
+    position: absolute;
+    inline-size: 40%;
+    transition: none;
+    animation: xh-progress-indeterminate var(--xh-progress-indeterminate-duration, calc(var(--xh-spin-duration) * 2)) var(--xh-ease-standard) infinite;
+  }
+
+  /* 减弱动效档：不来回扫，改成一条铺满的静态条——进度仍然未知，只是不再动。
+     两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='progress'][data-part='range'][data-state='indeterminate'] {
+      position: static;
+      inline-size: 100%;
+      opacity: 0.5;
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='progress'][data-part='range'][data-state='indeterminate'] {
+    position: static;
+    inline-size: 100%;
+    opacity: 0.5;
+    animation: none;
+  }
+
   /* 零进度：圆角端点会在长度为 0 处画出一个圆点，收掉它 */
   [data-scope='progress'][data-part='range'][data-empty] {
     visibility: hidden;
   }
 
-  /* 关掉动效的用户不该被进度条的补间晃一下；这里只管本组件 */
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='progress'][data-part='range'] {
-      transition-duration: 0.01ms;
-    }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='progress'][data-part='root'][hidden] {
+    display: none;
   }
 }

package/css/qr-code.css

@@ -17,7 +17,7 @@
    */
   [data-scope='qr-code'][data-part='root'] {
     display: block;
-    border-radius: var(--xh-qr-code-radius, var(--xh-radius-md));
+    border-radius: var(--xh-qr-code-radius, var(--xh-shape-control));
     background: var(--xh-qr-code-bg, var(--xh-color-neutral-0));
 
     /* 模块那条 path 不带自己的填充色，从这里继承下去 */

package/css/radio-group.css

@@ -7,7 +7,8 @@
   [data-scope='radio-group'][data-part='root'] {
     /* 尺寸档只换这两个私有槽，标题与条目都从 root 继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_radio-group-item-gap: var(--xh-control-gap-md);
-    --xh-_radio-group-font-size: var(--xh-text-label-size);
+    --xh-_radio-group-font-size: var(--xh-control-font-md);
+    --xh-_radio-group-indicator: var(--xh-control-indicator-md);
     /* 选中色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
     --xh-_radio-group-accent: var(--xh-_tone, var(--xh-bg-brand));
 
@@ -27,12 +28,14 @@
   /* —— 尺寸 —— */
   [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);
+    --xh-_radio-group-indicator: var(--xh-control-indicator-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);
+    --xh-_radio-group-indicator: var(--xh-control-indicator-lg);
   }
 
   [data-scope='radio-group'][data-part='label'] {
@@ -64,7 +67,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,10 +74,10 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: 16px;
-    block-size: 16px;
+    inline-size: var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator));
+    block-size: var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator));
     border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-control));
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-radio-group-indicator-radius, var(--xh-shape-pill));
     background: var(--xh-radio-group-indicator-bg, var(--xh-bg-canvas));
     transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
@@ -84,11 +86,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-_radio-group-indicator)) / 2);
+    block-size: calc(var(--xh-radio-group-indicator-size, var(--xh-_radio-group-indicator)) / 2);
     border-radius: var(--xh-shape-pill);
     background: var(--xh-radio-group-indicator-dot, var(--xh-_radio-group-accent));
     scale: 0;
@@ -103,4 +112,12 @@
     color: inherit;
     user-select: none;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='radio-group'][data-part='root'][hidden],
+  [data-scope='radio-group'][data-part='item'][hidden],
+  [data-scope='radio-group'][data-part='indicator'][hidden] {
+    display: none;
+  }
 }

package/css/rating.css

@@ -8,9 +8,9 @@
      根上不留基准它就会贴到更外层的定位祖先上，原生校验提示跟着飘到页面别处。 */
   [data-scope='rating'][data-part='root'] {
     /* 尺寸档只换这三个私有槽，标题与星星都从 root 继承它们，换档不必给每个部件各写一条选择器 */
-    --xh-_rating-item-gap: var(--xh-space-1);
+    --xh-_rating-item-gap: var(--xh-control-gap-md);
     --xh-_rating-item-size: var(--xh-font-size-2xl);
-    --xh-_rating-font-size: var(--xh-text-label-size);
+    --xh-_rating-font-size: var(--xh-control-font-md);
     /* 点亮色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的警示色 */
     --xh-_rating-accent: var(--xh-_tone, var(--xh-color-warning-500));
 
@@ -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

@@ -8,9 +8,9 @@
     /* 三个尺寸档只换这几个私有槽，图标与标题都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
     --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-py: var(--xh-section-py-md);
+    --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 就退成中性 */
@@ -34,17 +34,17 @@
 
   /* —— 尺寸 —— */
   [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-gap: var(--xh-stack-gap-sm);
+    --xh-_result-py: var(--xh-section-py-sm);
+    --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-gap: var(--xh-stack-gap-lg);
+    --xh-_result-py: var(--xh-section-py-lg);
+    --xh-_result-icon-size: var(--xh-glyph-size-4xl);
+    --xh-_result-title-size: var(--xh-text-heading-2-size);
   }
 
   /* —— 语气 —— */
@@ -75,6 +75,9 @@
     align-items: center;
     justify-content: center;
     flex: none;
+    /* 作者塞进图标槽的 XhIcon 与皮肤画的字形同一把尺，都按展示档的图标框量 */
+    --xh-icon-size: var(--xh-result-icon-size, var(--xh-_result-icon-size));
+
     block-size: var(--xh-result-icon-size, var(--xh-_result-icon-size));
     inline-size: var(--xh-result-icon-size, var(--xh-_result-icon-size));
     color: var(--xh-result-icon-fg, var(--xh-_result-accent));
@@ -106,4 +109,11 @@
     justify-content: center;
     gap: var(--xh-result-action-gap, var(--xh-space-2));
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='result'][data-part='icon'][hidden],
+  [data-scope='result'][data-part='action'][hidden] {
+    display: none;
+  }
 }

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;
   }
 }