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

package/css/toast.css

@@ -7,37 +7,38 @@
   @keyframes xh-toast-in {
     from {
       opacity: 0;
-      transform: translateY(8px) scale(0.98);
+      translate: 0 var(--xh-motion-distance-md);
+      scale: var(--xh-motion-scale-enter);
     }
 
     to {
       opacity: 1;
-      transform: none;
+      translate: 0 0;
+      scale: 1;
     }
   }
 
   @keyframes xh-toast-out {
     from {
       opacity: 1;
-      transform: none;
+      translate: 0 0;
+      scale: 1;
     }
 
     to {
       opacity: 0;
-      transform: translateY(4px) scale(0.96);
-    }
-  }
-
-  /* 通知是自己冒出来的，用户没按任何键：减弱动效的诉求在这里比别处更硬。
-     !important 在低层里反而更强（重要声明的层序是反的），足以压住组件层的动画。 */
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='toast'][data-part] {
-      animation-duration: 0.01ms !important;
+      translate: 0 var(--xh-motion-distance-sm);
+      scale: var(--xh-motion-scale-enter);
     }
   }
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='toast'] {
+    --xh-toast-skin: 1;
+  }
+
   [data-scope='toast'][data-part='root'] {
     display: flex;
     flex-direction: column;

package/css/toaster.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='toaster'] {
+    --xh-toaster-skin: 1;
+  }
+
   /* 地标容器不占布局：通知落在哪儿由九个 group 各自的 fixed 说了算，
      root 只是给读屏一个可跳转的落点。它若留下一个块盒，写在页面中段的用法
      （按钮和队列摆在一起）就会凭空多出一行空白。

package/css/toggle-group.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='toggle-group'] {
+    --xh-toggle-group-skin: 1;
+  }
+
   /* 分段控件：段与段之间不留缝，靠共边连成一体，所以 root 不设 gap。
      排布只能读 data-orientation——aria-orientation 在多选模式下连接层根本不输出（role=group 不收） */
   [data-scope='toggle-group'][data-part='root'] {
@@ -31,7 +36,7 @@
     --xh-_bg-hover: var(--xh-toggle-group-item-bg-hover, var(--xh-bg-subtle-hover));
     --xh-_bg-active: var(--xh-toggle-group-item-bg-active, var(--xh-bg-subtle-active));
     --xh-_fg: var(--xh-toggle-group-item-fg, var(--xh-fg-default));
-    --xh-_border: var(--xh-toggle-group-item-border, var(--xh-border-default));
+    --xh-_border: var(--xh-toggle-group-item-border, var(--xh-border-control));
 
     /* 相邻两段靠负外边距压掉一条重边，谁的描边浮在上面必须能指定，
        因此条目必须是定位元素——静态元素的 z-index 不生效 */

package/css/toggle.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='toggle'] {
+    --xh-toggle-skin: 1;
+  }
+
   [data-scope='toggle'][data-part='root'] {
     /* 私有槽位：组件令牌 → 语义令牌两级回退，变体只改这几个槽位 */
     --xh-_bg: var(--xh-toggle-bg, transparent);
@@ -68,7 +73,7 @@
     --xh-_bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
     --xh-_fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
 
-    border-color: var(--xh-_tone-border, var(--xh-border-default));
+    border-color: var(--xh-_tone-border-control, var(--xh-border-control));
   }
 
   [data-scope='toggle'][data-part='root'][data-variant='ghost'] {

package/css/tone.css

@@ -38,6 +38,9 @@
     --xh-_tone-subtle-hover: color-mix(in oklab, var(--xh-_tone) 20%, var(--xh-bg-surface));
     --xh-_tone-subtle-active: color-mix(in oklab, var(--xh-_tone) 28%, var(--xh-bg-surface));
     --xh-_tone-border: color-mix(in oklab, var(--xh-_tone) 40%, var(--xh-bg-surface));
+    /* 控件的可操作区边界要 3:1，兑了底色的 --xh-_tone-border 六族全在 1.44–2.18，够不着。
+       这一支直接取主色本体；两族在各自的底上仍不够，在下面按主题单独兜 */
+    --xh-_tone-border-control: var(--xh-_tone);
     /* 在普通背景上表达该语气的文字色：往前景色兑，浅色态变深、深色态变浅 */
     --xh-_tone-fg: color-mix(in oklab, var(--xh-_tone) 72%, var(--xh-fg-default));
   }
@@ -82,4 +85,23 @@
     --xh-_tone-on: var(--xh-color-neutral-950);
     --xh-_tone-shift: var(--xh-color-neutral-0);
   }
+
+  /* 主色本体在各自的底上有两族够不到 3:1：黄在白底上只有 2.70，中性在深色底上只有 2.54。
+     语气色是固定原语、不随主题翻，所以这两族只能按主题各兜一次。
+     浅色是缺省态（不写 data-theme 也算浅色），深色靠属性选择器压过它 */
+  [data-tone='warning'] {
+    --xh-_tone-border-control: var(--xh-color-warning-700);
+  }
+
+  [data-theme='dark'] [data-tone='warning'] {
+    --xh-_tone-border-control: var(--xh-color-warning-600);
+  }
+
+  [data-tone='neutral'] {
+    --xh-_tone-border-control: var(--xh-color-neutral-600);
+  }
+
+  [data-theme='dark'] [data-tone='neutral'] {
+    --xh-_tone-border-control: var(--xh-color-neutral-550);
+  }
 }

package/css/toolbar.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='toolbar'] {
+    --xh-toolbar-skin: 1;
+  }
+
   /* 一条控件带：条目之间留固定间距，分隔线再把它们切成语义上的几段。
      排布只能读 data-orientation——它与 aria-orientation 同源，但样式不该去读 ARIA */
   [data-scope='toolbar'][data-part='root'] {

package/css/tooltip.css

@@ -1,4 +1,23 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='tooltip'] {
+    --xh-tooltip-skin: 1;
+  }
+
   [data-scope='tooltip'][data-part='trigger'] {
     display: inline-flex;
     align-items: center;
@@ -72,38 +91,37 @@
     --xh-_tooltip-font-size: var(--xh-font-size-md);
   }
 
-  /* 箭头是旋转 45° 的方块，按落定朝向贴在 content 对侧边的中点 */
+  /* 箭头是旋转 45° 的方块，按自报的落定朝向贴在 content 对侧边上；
+     交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
   [data-scope='tooltip'][data-part='arrow'] {
+    --xh-_tooltip-arrow-size: var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size));
+    --xh-_tooltip-arrow-x: 50%;
+    --xh-_tooltip-arrow-y: 50%;
+
     position: absolute;
-    inline-size: var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size));
-    block-size: var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size));
+    inline-size: var(--xh-_tooltip-arrow-size);
+    block-size: var(--xh-_tooltip-arrow-size);
     background: var(--xh-tooltip-bg, var(--xh-_tone, var(--xh-fg-default)));
     transform: rotate(45deg);
   }
 
-  [data-scope='tooltip'][data-part='positioner'][data-placement^='bottom'] [data-scope='tooltip'][data-part='arrow'] {
-    inset-block-start: calc(var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  [data-scope='tooltip'][data-part='arrow'][data-placement^='bottom'] {
+    inset-block-start: calc(var(--xh-_tooltip-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_tooltip-arrow-x) - var(--xh-_tooltip-arrow-size) / 2);
   }
 
-  [data-scope='tooltip'][data-part='positioner'][data-placement^='top'] [data-scope='tooltip'][data-part='arrow'] {
-    inset-block-end: calc(var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  [data-scope='tooltip'][data-part='arrow'][data-placement^='top'] {
+    inset-block-end: calc(var(--xh-_tooltip-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_tooltip-arrow-x) - var(--xh-_tooltip-arrow-size) / 2);
   }
 
-  [data-scope='tooltip'][data-part='positioner'][data-placement^='left'] [data-scope='tooltip'][data-part='arrow'] {
-    inset-block-start: calc(50% - var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / 2);
-    inset-inline-end: calc(var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+  [data-scope='tooltip'][data-part='arrow'][data-placement^='left'] {
+    inset-block-start: calc(var(--xh-_tooltip-arrow-y) - var(--xh-_tooltip-arrow-size) / 2);
+    inset-inline-end: calc(var(--xh-_tooltip-arrow-size) / -2);
   }
 
-  [data-scope='tooltip'][data-part='positioner'][data-placement^='right'] [data-scope='tooltip'][data-part='arrow'] {
-    inset-block-start: calc(50% - var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / 2);
-    inset-inline-start: calc(var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='tooltip'][data-part='content'] {
-      animation-duration: 0.01ms !important;
-    }
+  [data-scope='tooltip'][data-part='arrow'][data-placement^='right'] {
+    inset-block-start: calc(var(--xh-_tooltip-arrow-y) - var(--xh-_tooltip-arrow-size) / 2);
+    inset-inline-start: calc(var(--xh-_tooltip-arrow-size) / -2);
   }
 }

package/css/tour.css

@@ -1,9 +1,31 @@
 @layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes xh-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
   /* 气泡贴着目标探出来：纯淡入分不清它是从哪个元素长出来的 */
   @keyframes xh-tour-content-in {
     from {
       opacity: 0;
-      translate: 0 4px;
+      translate: 0 var(--xh-motion-distance-sm);
     }
 
     to {
@@ -16,7 +38,7 @@
   @keyframes xh-tour-spotlight-in {
     from {
       opacity: 0;
-      scale: 1.04;
+      scale: calc(2 - var(--xh-motion-scale-enter));
     }
 
     to {
@@ -24,16 +46,14 @@
       scale: 1;
     }
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='tour'] [data-part] {
-      animation-duration: 0.01ms !important;
-      transition-duration: 0.01ms !important;
-    }
-  }
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='tour'] {
+    --xh-tour-skin: 1;
+  }
+
   /* 根节点只是几个浮层的归属容器，不参与排版。
      这里不给 display，UA 的 [hidden]{display:none} 就仍然压得住 */
   [data-scope='tour'][data-part='root'] {
@@ -211,7 +231,7 @@
   }
 
   [data-scope='tour'][data-part='prev-trigger'] {
-    border-color: var(--xh-border-default);
+    border-color: var(--xh-border-control);
     color: var(--xh-fg-default);
   }
 
@@ -261,11 +281,15 @@
   }
 
   /* 箭头是旋转 45° 的方块，只保留朝向目标那两条边的描边；
-     引擎不产出箭头偏移，因此沿交叉轴固定居中。居中步没有锚点，连接层会给它发 hidden */
+     交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中。居中步没有锚点，连接层会给它发 hidden */
   [data-scope='tour'][data-part='arrow'] {
+    --xh-_tour-arrow-size: var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size));
+    --xh-_tour-arrow-x: 50%;
+    --xh-_tour-arrow-y: 50%;
+
     position: absolute;
-    inline-size: var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size));
-    block-size: var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size));
+    inline-size: var(--xh-_tour-arrow-size);
+    block-size: var(--xh-_tour-arrow-size);
     background: var(--xh-tour-bg, var(--xh-bg-surface));
     border: var(--xh-stroke-thin) solid var(--xh-tour-border, var(--xh-border-default));
     rotate: 45deg;
@@ -276,29 +300,29 @@
   }
 
   [data-scope='tour'][data-part='arrow'][data-placement^='bottom'] {
-    inset-block-start: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-block-start: calc(var(--xh-_tour-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_tour-arrow-x) - var(--xh-_tour-arrow-size) / 2);
     border-block-end: 0;
     border-inline-end: 0;
   }
 
   [data-scope='tour'][data-part='arrow'][data-placement^='top'] {
-    inset-block-end: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-block-end: calc(var(--xh-_tour-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_tour-arrow-x) - var(--xh-_tour-arrow-size) / 2);
     border-block-start: 0;
     border-inline-start: 0;
   }
 
   [data-scope='tour'][data-part='arrow'][data-placement^='right'] {
-    inset-inline-start: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-block-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-start: calc(var(--xh-_tour-arrow-size) / -2);
+    inset-block-start: calc(var(--xh-_tour-arrow-y) - var(--xh-_tour-arrow-size) / 2);
     border-block-start: 0;
     border-inline-end: 0;
   }
 
   [data-scope='tour'][data-part='arrow'][data-placement^='left'] {
-    inset-inline-end: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-block-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-end: calc(var(--xh-_tour-arrow-size) / -2);
+    inset-block-start: calc(var(--xh-_tour-arrow-y) - var(--xh-_tour-arrow-size) / 2);
     border-block-end: 0;
     border-inline-start: 0;
   }

package/css/transfer.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='transfer'] {
+    --xh-transfer-skin: 1;
+  }
+
   /* 三栏栅格：两侧面板各占一栏、跨两行，中间那栏上下各放一个搬运按钮，
      两个按钮在中线处相遇。栅格的列号本身就是随书写方向走的（第 1 栏永远在行首侧），
      dir=rtl 时整块自动镜像，不必另写一套。
@@ -59,7 +64,7 @@
     gap: var(--xh-transfer-header-gap, var(--xh-control-gap-md));
     align-items: center;
     padding-block: var(--xh-transfer-header-py, var(--xh-space-2));
-    padding-inline: var(--xh-transfer-header-px, var(--xh-control-px-sm));
+    padding-inline: var(--xh-transfer-header-px, var(--xh-control-px-md));
     border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-panel-border, var(--xh-border-default));
   }
 
@@ -95,9 +100,9 @@
     display: block;
     inline-size: 100%;
     block-size: var(--xh-transfer-search-h, var(--xh-control-h-sm));
-    padding-inline: var(--xh-transfer-search-px, var(--xh-control-px-sm));
+    padding-inline: var(--xh-transfer-search-px, var(--xh-control-px-md));
     border: 0;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-panel-border, var(--xh-border-default));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-search-border, var(--xh-border-control));
     background: var(--xh-transfer-search-bg, transparent);
     color: var(--xh-transfer-search-fg, var(--xh-fg-default));
     font: inherit;
@@ -136,8 +141,8 @@
     flex: none;
     gap: var(--xh-transfer-item-gap, var(--xh-control-gap-md));
     align-items: center;
-    padding-block: var(--xh-transfer-item-py, var(--xh-space-1));
-    padding-inline: var(--xh-transfer-item-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-transfer-item-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-transfer-item-px, var(--xh-control-px-md));
     border-radius: var(--xh-transfer-item-radius, var(--xh-shape-control));
     color: var(--xh-transfer-item-fg, var(--xh-fg-default));
     font-size: var(--xh-transfer-item-font-size, var(--xh-text-body-size));
@@ -146,13 +151,15 @@
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  /* 键盘高亮与指针悬停共用一套底色：条目本身承载焦点，不另画描边。
+  /* 悬停与键盘锚点共用中性灰轻档：条目本身承载焦点，不另画描边。
      data-highlighted 跟的是连接层记的焦点条目，与勾选互相独立 */
   [data-scope='transfer'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-transfer-item-bg-highlight, var(--xh-bg-subtle-hover));
+    background: var(--xh-transfer-item-bg-hover, var(--xh-bg-subtle));
   }
 
   [data-scope='transfer'][data-part='item']:focus-visible {
@@ -185,7 +192,7 @@
     justify-content: center;
     inline-size: var(--xh-transfer-checkbox-size, 16px);
     block-size: var(--xh-transfer-checkbox-size, 16px);
-    border: var(--xh-stroke-thin) solid var(--xh-transfer-checkbox-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-transfer-checkbox-border, var(--xh-border-control));
     border-radius: var(--xh-transfer-checkbox-radius, var(--xh-radius-sm));
     background: var(--xh-transfer-checkbox-bg, var(--xh-bg-canvas));
     color: var(--xh-transfer-checkbox-fg, var(--xh-fg-on-brand));

package/css/tree-select.css

@@ -1,4 +1,23 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='tree-select'] {
+    --xh-tree-select-skin: 1;
+  }
+
   /* 解剖里没有把「触发器 + 清空按钮」裹在一起的 control 部件，一行是靠 flex-wrap 分出来的：
      标签占满整行把后面的挤到下一行，触发器与清空按钮就并排落在同一行上。
      这样作者少写标签、少写清空按钮，剩下的部件也不会塌 */
@@ -12,8 +31,8 @@
 
     /* 形态档只换触发框的描边与底色这三个槽，浮层与树不跟着变：
        变的是「这是个输入位」的表达方式，不是弹出内容的表达方式 */
-    --xh-_tree-select-border: var(--xh-border-default);
-    --xh-_tree-select-border-hover: var(--xh-border-strong);
+    --xh-_tree-select-border: var(--xh-border-control);
+    --xh-_tree-select-border-hover: var(--xh-border-control-hover);
     --xh-_tree-select-bg: var(--xh-bg-canvas);
 
     /* 选中行的文字色随语气走，没写 data-tone 时退回品牌强调色 */
@@ -34,15 +53,15 @@
   /* 形态只决定描边与底色怎么用；用哪族颜色由 data-tone 决定，没写 tone 就沿用原来的中性配色 */
   /* outline 就是缺省那一身：描边加画布底，写出来只为让三档并列可读 */
   [data-scope='tree-select'][data-part='root'][data-variant='outline'] {
-    --xh-_tree-select-border: var(--xh-border-default);
-    --xh-_tree-select-border-hover: var(--xh-border-strong);
+    --xh-_tree-select-border: var(--xh-border-control);
+    --xh-_tree-select-border-hover: var(--xh-border-control-hover);
     --xh-_tree-select-bg: var(--xh-bg-canvas);
   }
 
   /* subtle 是填充式：底色接过「这里能点」的表达，描边随之让位 */
   [data-scope='tree-select'][data-part='root'][data-variant='subtle'] {
     --xh-_tree-select-border: transparent;
-    --xh-_tree-select-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_tree-select-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
     --xh-_tree-select-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   }
 
@@ -117,10 +136,9 @@
     border-color: var(--xh-tree-select-trigger-border-hover, var(--xh-_tree-select-border-hover));
   }
 
-  /* trigger 是整个控件唯一的 Tab 停靠点（展开后停靠点才移进树里），落焦必须看得见。
-     语气落在环上：没写 data-tone 时 --xh-_tone 没被声明，退回原来的聚焦环色 */
+  /* trigger 是整个控件唯一的 Tab 停靠点（展开后停靠点才移进树里），落焦必须看得见 */
   [data-scope='tree-select'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
 
@@ -219,7 +237,7 @@
   /* 清空按钮退出了 Tab 序列（tabindex=-1），正常操作走不到这里；
      留着是给程序化聚焦兜底，落焦时得看得见 */
   [data-scope='tree-select'][data-part='clear-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
 
@@ -285,8 +303,14 @@
     display: none;
   }
 
-  /* 没有锚点时容器自己进 Tab 序列兜底，落焦不画环：高亮永远长在行上 */
-  [data-scope='tree-select'][data-part='tree']:focus-visible {
+  /* 焦点落在树容器上只有一种情形：指针打开、还没有任何行当锚点。那一刻它认领着 Tab 位，
+     环画在内沿，用户才看得出键盘此刻在哪儿；有锚点时环长在行上，容器不再画 */
+  [data-scope='tree-select'][data-part='tree'][tabindex='0']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='tree-select'][data-part='tree']:not([tabindex='0']):focus-visible {
     outline: none;
   }
 
@@ -297,7 +321,7 @@
   }
 
   [data-scope='tree-select'][data-part='branch']:focus-visible > [data-scope='tree-select'][data-part='branch-control'] {
-    outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     /* 往内收：行是撑满宽度的，环画在外沿会被容器裁掉 */
     outline-offset: calc(-1 * var(--xh-ring-width));
   }
@@ -308,8 +332,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-tree-select-row-gap, var(--xh-_tree-select-gap));
-    padding-block: var(--xh-tree-select-row-py, var(--xh-space-1));
-    padding-inline: var(--xh-tree-select-row-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-tree-select-row-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-tree-select-row-px, var(--xh-control-px-md));
     border-radius: var(--xh-tree-select-row-radius, var(--xh-shape-control));
     color: var(--xh-tree-select-row-fg, var(--xh-fg-default));
     font-size: var(--xh-tree-select-row-font-size, var(--xh-_tree-select-font-size));
@@ -318,6 +342,9 @@
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='tree-select'][data-part='item'][hidden],
@@ -325,11 +352,11 @@
     display: none;
   }
 
-  /* 键盘高亮与指针高亮共用一套底色。data-highlighted 跟的是连接层记的焦点行，
-     与选中互相独立：可以停在一个没被选中的节点上 */
+  /* 悬停与键盘锚点共用中性灰轻档：data-highlighted 跟的是连接层记的焦点行，
+     与选中互相独立，键盘落焦另有聚焦环标记位置 */
   [data-scope='tree-select'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]),
   [data-scope='tree-select'][data-part='branch-control']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-tree-select-row-bg-highlight, var(--xh-bg-subtle-hover));
+    background: var(--xh-tree-select-row-bg-hover, var(--xh-bg-subtle));
   }
 
   /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，
@@ -342,7 +369,7 @@
 
   /* 叶子自己就是 treeitem，环直接画在它身上 */
   [data-scope='tree-select'][data-part='item']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: calc(-1 * var(--xh-ring-width));
   }
 

package/css/tree.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='tree'] {
+    --xh-tree-skin: 1;
+  }
+
   [data-scope='tree'][data-part='root'] {
     display: flex;
     flex-direction: column;
@@ -70,8 +75,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-tree-row-gap, var(--xh-control-gap-md));
-    padding-block: var(--xh-tree-row-py, var(--xh-space-1));
-    padding-inline: var(--xh-tree-row-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-tree-row-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-tree-row-px, var(--xh-control-px-md));
     border-radius: var(--xh-tree-row-radius, var(--xh-shape-control));
     color: var(--xh-tree-row-fg, var(--xh-fg-default));
     font-size: var(--xh-tree-row-font-size, var(--xh-text-body-size));
@@ -80,6 +85,9 @@
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='tree'][data-part='item'][hidden],
@@ -87,11 +95,11 @@
     display: none;
   }
 
-  /* 键盘高亮与指针高亮共用一套底色。data-highlighted 跟的是连接层记的焦点行，
-     与选中互相独立：可以停在一个没被选中的节点上 */
+  /* 悬停与键盘锚点共用中性灰轻档：data-highlighted 跟的是连接层记的焦点行，
+     与选中互相独立，键盘落焦另有聚焦环标记位置 */
   [data-scope='tree'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]),
   [data-scope='tree'][data-part='branch-control']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-tree-row-bg-highlight, var(--xh-bg-subtle-hover));
+    background: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
   }
 
   /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，

package/css/typography.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='typography'] {
+    --xh-typography-skin: 1;
+  }
+
   [data-scope='typography'][data-part='root'] {
     /* 尺寸档只换这几个私有槽，各段从根上继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_typography-body-size: var(--xh-text-body-size);

package/css/virtualizer.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='virtualizer'] {
+    --xh-virtualizer-skin: 1;
+  }
+
   /* 定位分工：条目在**主轴**上的位移、以及 content 在主轴上的总长，
      由连接层每帧写进内联样式（竖向是 inset-block-start / block-size，横向是
      inset-inline-start / inline-size）。这份皮肤一个都不碰：内联优先级高于样式表，

package/css/watermark.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='watermark'] {
+    --xh-watermark-skin: 1;
+  }
+
   /*
    * 盖水印的那块地。层叠上下文就地隔离，印子只压在这块地里，不会盖到组件外面去。
    */