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

package/css/result.css

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

package/css/scroll-area.css

@@ -11,15 +11,14 @@
       opacity: 1;
     }
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='scroll-area'] [data-part] {
-      animation-duration: 0.01ms !important;
-    }
-  }
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='scroll-area'] {
+    --xh-scroll-area-skin: 1;
+  }
+
   /* 定位分工：滑块在**主轴**上的起点与长度由连接层每帧写进内联样式——
      竖向是 inset-block-start / block-size，横向是 inset-inline-start / inline-size。
      这份皮肤一个都不碰：内联优先级高于样式表，写了不但是死声明，

package/css/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='select'] {
+    --xh-select-skin: 1;
+  }
+
   [data-scope='select'][data-part='root'] {
     /* 尺寸档只换这五个私有槽，触发器、标题与条目都从 root 继承它们，
        换档不必给每个部件各写一条选择器。浮层在 positioner 里、也是 root 的后代，一并继承 */

package/css/separator.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='separator'] {
+    --xh-separator-skin: 1;
+  }
+
   [data-scope='separator'][data-part='root'] {
     border: 0;
     background: var(--xh-separator-color, var(--xh-border-default));

package/css/side-nav.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='side-nav'] {
+    --xh-side-nav-skin: 1;
+  }
+
   [data-scope='side-nav'][data-part='root'] {
     inline-size: var(--xh-side-nav-w, 240px);
     display: flex;

package/css/skeleton.css

@@ -13,6 +13,11 @@
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='skeleton'] {
+    --xh-skeleton-skin: 1;
+  }
+
   /* 骨架容器：竖着码放各根骨架条 */
   [data-scope='skeleton'][data-part='root'] {
     display: flex;

package/css/slider.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='slider'] {
+    --xh-slider-skin: 1;
+  }
+
   /* 定位分工：已选区间与拇指在**主轴**上的起点与长度，由连接层每帧写进内联样式——
      水平是 inset-inline-start / inline-size，竖直是 inset-block-end / block-size。
      这份皮肤一个都不碰：内联优先级高于样式表，写了不但是死声明，

package/css/spinner.css

@@ -1,4 +1,4 @@
-@layer xihan.components {
+@layer xihan.motion {
   /* 转圈的关键帧定义在本文件里。皮肤可以按需单独引入，
      引用别处文件里的动画名时那份文件不一定在场，动画会静默地整个不跑 */
   @keyframes xh-spinner-rotate {
@@ -6,6 +6,14 @@
       transform: rotate(1turn);
     }
   }
+}
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='spinner'] {
+    --xh-spinner-skin: 1;
+  }
+
 
   /* 圆环画在伪元素上，root 自身不转：转的只是图形，同一行里的文案要留在原地读得动 */
   [data-scope='spinner'][data-part='root'] {

package/css/splitter.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='splitter'] {
+    --xh-splitter-skin: 1;
+  }
+
   /* 分工：**面板在排布轴上的尺寸**由连接层每帧写进内联样式（flex-basis / flex-grow / flex-shrink）。
      这份皮肤一条都不碰——内联优先级高于样式表，写了不但是死声明，
      还会在切换 orientation 的那一帧跟连接层抢位置。皮肤只管排布方向、跨轴尺寸、

package/css/statistic.css

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

package/css/steps.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='steps'] {
+    --xh-steps-skin: 1;
+  }
+
   [data-scope='steps'][data-part='root'] {
     /* 尺寸档只换这三个私有槽，序号圆点、标题与说明都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */

package/css/switch.css

@@ -1,4 +1,18 @@
+@layer xihan.motion {
+  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
+  @keyframes xh-switch-rotate {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='switch'] {
+    --xh-switch-skin: 1;
+  }
+
   [data-scope='switch'][data-part='root'] {
     /* 尺寸档只换轨道高度这一个私有槽，其余几何都从它算出来：
        滑块边长 = 轨道高 − 两条留白，轨道宽 = 两倍轨道高 − 两条留白，滑块行程因此正好等于自身边长 */
@@ -59,13 +73,6 @@
     translate: var(--xh-_switch-thumb-size) 0;
   }
 
-  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
-  @keyframes xh-switch-rotate {
-    to {
-      transform: rotate(1turn);
-    }
-  }
-
   /* 提交中：指针挂起、滑块里转圈；不是禁用，焦点与对比度都保持 */
   [data-scope='switch'][data-part='root'][data-loading] {
     cursor: wait;

package/css/table.css

@@ -18,6 +18,11 @@
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='table'] {
+    --xh-table-skin: 1;
+  }
+
   /* 表格自己滚动：吸顶表头与横向吸附列都要一个确定的滚动容器才钉得住 */
   [data-scope='table'][data-part='root'] {
     /* 密度档只换这两个私有槽：单元格与列标题从 root 继承前者，字号靠 font-size 本身继承下去，

package/css/tabs.css

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

package/css/tags-input.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='tags-input'] {
+    --xh-tags-input-skin: 1;
+  }
+
   /* root 只负责纵向堆叠：标题一行、控件一行。可见的那个"框"长在 control 上，
      因为标签、输入框、清空按钮都在它里面，边框必须把三者一起圈住 */
   [data-scope='tags-input'][data-part='root'] {

package/css/text-field.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='text-field'] {
+    --xh-text-field-skin: 1;
+  }
+
   /* root 只负责纵向堆叠：标签一行、输入行一行。
      输入框与清空按钮中间那层包裹是作者自己写的、不在角色表里，
      所以尺寸与间距一律长在各自的角色节点上，不去假设那层存在 */

package/css/thread.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='thread'] {
+    --xh-thread-skin: 1;
+  }
+
   /* 自建定位上下文，作为绝对定位的回到底部按钮的参照系；
      block-size: 100% 让高度由外部决定，使滚动发生在内部。 */
   [data-scope='thread'][data-part='root'] {

package/css/time-field.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='time-field'] {
+    --xh-time-field-skin: 1;
+  }
+
   /* 与文本框、数字框同一套堆叠：标签一行、控件一行 */
   [data-scope='time-field'][data-part='root'] {
     /* 尺寸档只换这四个私有槽，标题与控件都从 root 继承它们，换档不必给每个部件各写一条选择器 */

package/css/time-picker.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='time-picker'] {
+    --xh-time-picker-skin: 1;
+  }
+
   /* 与文本框、时间输入同一套堆叠：标签一行、控件一行 */
   [data-scope='time-picker'][data-part='root'] {
     display: inline-flex;
@@ -346,7 +351,7 @@
   @keyframes xh-time-picker-panel-in {
     from {
       opacity: 0;
-      translate: 0 calc(-1 * var(--xh-space-1));
+      translate: 0 calc(-1 * var(--xh-motion-distance-sm));
     }
 
     to {

package/css/time.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='time'] {
+    --xh-time-skin: 1;
+  }
+
   [data-scope='time'][data-part='root'] {
     color: var(--xh-time-fg, var(--xh-fg-default));
     /* 等宽数字：秒数跳动时后面的字符不会左右挪 */

package/css/timeline.css

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

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'] {

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

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;
@@ -105,10 +124,4 @@
     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);
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='tooltip'][data-part='content'] {
-      animation-duration: 0.01ms !important;
-    }
-  }
 }

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'] {

package/css/transfer.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='transfer'] {
+    --xh-transfer-skin: 1;
+  }
+
   /* 三栏栅格：两侧面板各占一栏、跨两行，中间那栏上下各放一个搬运按钮，
      两个按钮在中线处相遇。栅格的列号本身就是随书写方向走的（第 1 栏永远在行首侧），
      dir=rtl 时整块自动镜像，不必另写一套。

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 分出来的：
      标签占满整行把后面的挤到下一行，触发器与清空按钮就并排落在同一行上。
      这样作者少写标签、少写清空按钮，剩下的部件也不会塌 */

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;

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;
+  }
+
   /*
    * 盖水印的那块地。层叠上下文就地隔离，印子只压在这块地里，不会盖到组件外面去。
    */

package/index.css

@@ -32,7 +32,6 @@
 @import './css/popselect.css';
 @import './css/qr-code.css';
 @import './css/reset.css';
-@import './css/motion.css';
 @import './css/result.css';
 @import './css/statistic.css';
 @import './css/time.css';