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

package/css/dynamic-input.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='dynamic-input'] {
+    --xh-dynamic-input-skin: 1;
+  }
+
   /* 一行一条，纵向堆叠；新增把手跟在最后一行下面 */
   [data-scope='dynamic-input'][data-part='root'] {
     display: flex;

package/css/editable.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='editable'] {
+    --xh-editable-skin: 1;
+  }
+
   /* 就地编辑是"一行文字里的一处可改内容"：标题、显示区与按钮天然同行，
      所以根是一条横向的行，而不是文本框那种"标题一行、控件一行"的竖排。
      要竖排的作者把 flex-direction 覆盖掉即可，其余尺寸都长在各自的角色节点上 */

package/css/ellipsis.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='ellipsis'] {
+    --xh-ellipsis-skin: 1;
+  }
+
   /* 单行：一行装不下就收成省略号。
      行数由连接层写进这个盒子的内联 style，样式表这一行只是它缺席时的落点 */
   [data-scope='ellipsis'][data-part='root'] {

package/css/empty-state.css

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

package/css/field.css

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

package/css/file-upload.css

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

package/css/flex.css

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

package/css/float-button.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='float-button'] {
+    --xh-float-button-skin: 1;
+  }
+
   /* 定位壳：钉在视口一角。贴边距离由连接层写进这个盒子的内联 style，
      样式表这一行只是它缺席时的落点；贴的是哪两条边看 data-placement。
      另一件必须提防的事：fixed 认的是视口，祖先上一旦出现

package/css/form.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='form'] {
+    --xh-form-skin: 1;
+  }
+
   /* 表单是一列字段：竖排、字段之间留一档间距。root 就是那个原生 <form> */
   [data-scope='form'][data-part='root'] {
     display: flex;
@@ -186,7 +191,7 @@
   @keyframes xh-form-summary-enter {
     from {
       opacity: 0;
-      translate: 0 calc(-1 * var(--xh-space-1));
+      translate: 0 calc(-1 * var(--xh-motion-distance-sm));
     }
 
     to {

package/css/gradient-text.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='gradient-text'] {
+    --xh-gradient-text-skin: 1;
+  }
+
   /* 渐变画在背景上，再用 background-clip 把背景裁进字形里；前景必须透明才透得出底下的渐变。
      两条 background-clip 都写：WebKit 只认带前缀那条。
      -webkit-text-fill-color 在 WebKit 里决定字形填充色并盖过 color，也要一并透明。 */

package/css/grid.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='grid'] {
+    --xh-grid-skin: 1;
+  }
+
   [data-scope='grid'][data-part='root'] {
     display: grid;
     /* 各列等宽；下限写 0 而不是 auto，一段长文本才不会把自己那列撑宽 */

package/css/highlight.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='highlight'] {
+    --xh-highlight-skin: 1;
+  }
+
   /* 文本按原样显示：命中位置是按原串逐字符算的，折叠掉连续空格与换行会让看到的
      与算出来的对不上。pre-wrap 保留空白但仍在容器边界换行 */
   [data-scope='highlight'][data-part='root'] {

package/css/hover-card.css

@@ -1,4 +1,23 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='hover-card'] {
+    --xh-hover-card-skin: 1;
+  }
+
   /* 根节点只把 trigger 与浮层收在一处，不参与定位（坐标系仍由祖先的定位上下文决定） */
   [data-scope='hover-card'][data-part='root'] {
     display: inline-block;
@@ -141,10 +160,4 @@
     border-block-end: 0;
     border-inline-start: 0;
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='hover-card'][data-part='content'] {
-      animation-duration: 0.01ms !important;
-    }
-  }
 }

package/css/icon-wrapper.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='icon-wrapper'] {
+    --xh-icon-wrapper-skin: 1;
+  }
+
   /* 定直径的图标底座：图元在正中，底色、描边与形状由三轴决定。
      直径与图元直径分两个槽位，底座换档时里面的图元跟着一起换 */
   [data-scope='icon-wrapper'][data-part='root'] {

package/css/icon.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='icon'] {
+    --xh-icon-skin: 1;
+  }
+
   /*
    * 根 <svg>。直径、描边粗细、行内位置都由这里给，记录只带几何。
    * 不写 fill / stroke：记录里那两条呈现属性取 currentColor，改这里会把

package/css/image-viewer.css

@@ -1,4 +1,33 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes xh-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='image-viewer'] {
+    --xh-image-viewer-skin: 1;
+  }
+
   [data-scope='image-viewer'][data-part='backdrop'] {
     position: fixed;
     inset: 0;
@@ -12,7 +41,7 @@
   }
 
   [data-scope='image-viewer'][data-part='backdrop'][data-state='closed'] {
-    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   [data-scope='image-viewer'][data-part='positioner'] {
@@ -41,11 +70,7 @@
   }
 
   [data-scope='image-viewer'][data-part='content'][data-state='closed'] {
-    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
-  }
-
-  [data-scope='image-viewer'][data-part='content'][hidden] {
-    display: none;
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   [data-scope='image-viewer'][data-part='viewport'] {
@@ -164,11 +189,6 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    [data-scope='image-viewer'][data-part='backdrop'],
-    [data-scope='image-viewer'][data-part='content'] {
-      animation-duration: 0.01ms;
-    }
-
     [data-scope='image-viewer'][data-part='image'] {
       transition: none;
     }

package/css/image.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='image'] {
+    --xh-image-skin: 1;
+  }
+
   /* 尺寸交给三个变量而不是写死：这个组件既要能当封面图，也要能当头图与缩略图。
      给了 --xh-image-ratio 才有确定高度，回退内容与图片在同一个盒子里换人时不会跳。 */
   [data-scope='image'][data-part='root'] {

package/css/infinite-scroll.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='infinite-scroll'] {
+    --xh-infinite-scroll-skin: 1;
+  }
+
   /*
    * 列表外壳这一层刻意不给盒模型：滚的是页面还是作者自己的 overflow 容器、列表长什么样，
    * 都归作者的布局管，组件只往它身上挂 data-state / data-loading / data-disabled 供作者取用。

package/css/layout.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='layout'] {
+    --xh-layout-skin: 1;
+  }
+
   /* 页面骨架排成三行两列：头与脚各横贯一整行，侧栏与内容并排占中间那一行。
      缺哪一段，对应的行/列就没有条目，宽高自动收成 0，不必为"少写一段"另立规则。
 

package/css/list.css

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

package/css/listbox.css

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

package/css/loading-bar.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='loading-bar'] {
+    --xh-loading-bar-skin: 1;
+  }
+
   /*
    * 贴在视口顶边的一条细带。厚度那条轴（block-size）由连接层写进内联样式——
    * height 这个 prop 的缺省值在 connect 里收口，这里再声明一次只会被内联盖掉，

package/css/log.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='log'] {
+    --xh-log-skin: 1;
+  }
+
   /* 行高是本组件的定尺基准：视口按行数定高、每行排版，都从这一个槽位来。
      它的兜底值须与连接层内联高度里用的那份逐字一致，否则 rows 算出来的高度对不上行。 */
   [data-scope='log'][data-part='root'] {

package/css/marquee.css

@@ -25,6 +25,11 @@
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='marquee'] {
+    --xh-marquee-skin: 1;
+  }
+
   /*
    * 窗口：只露出轨道的一段。
    *

package/css/mention.css

@@ -1,4 +1,23 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='mention'] {
+    --xh-mention-skin: 1;
+  }
+
   [data-scope='mention'][data-part='root'] {
     /* 尺寸档只换这四个私有槽，输入框与候选都从 root 继承它们，换档不必给每个部件各写一条选择器。
        浮层在 positioner 里、也是 root 的后代，一并继承 */

package/css/menu.css

@@ -1,4 +1,23 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='menu'] {
+    --xh-menu-skin: 1;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   [data-scope='menu'][data-part='positioner'] {
     position: fixed;

package/css/menubar.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='menubar'] {
+    --xh-menubar-skin: 1;
+  }
+
   /* 一排 trigger。主轴跟着 data-orientation 走：菜单栏本身可以横排也可以竖排 */
   [data-scope='menubar'][data-part='root'] {
     /* 尺寸档只换这五个私有槽，trigger 与菜单里的条目都从 root 继承它们，
@@ -155,13 +160,6 @@
     animation: xh-menubar-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
-  /* 关掉动效的用户不该被涨开动画晃一下；这里只管本组件，公共那份不动 */
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='menubar'][data-part='content'][data-state='open'] {
-      animation-duration: 0.01ms;
-    }
-  }
-
   [data-scope='menubar'][data-part='group'] {
     display: flex;
     flex-direction: column;
@@ -271,7 +269,7 @@
   @keyframes xh-menubar-in {
     from {
       opacity: 0;
-      scale: 0.96;
+      scale: var(--xh-motion-scale-enter);
     }
 
     to {

package/css/navigation-menu.css

@@ -3,7 +3,7 @@
   @keyframes xh-navigation-menu-in {
     from {
       opacity: 0;
-      translate: 0 -4px;
+      translate: 0 calc(-1 * var(--xh-motion-distance-sm));
     }
 
     to {
@@ -14,6 +14,11 @@
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='navigation-menu'] {
+    --xh-navigation-menu-skin: 1;
+  }
+
   /* 根节点是 nav 地标，不参与排版；给 relative 是为了让共享外壳（viewport）有个定位参照系。
      这里不给 display，UA 的 [hidden]{display:none} 就仍然压得住 */
   [data-scope='navigation-menu'][data-part='root'] {

package/css/number-animation.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='number-animation'] {
+    --xh-number-animation-skin: 1;
+  }
+
   [data-scope='number-animation'][data-part='root'] {
     /* 不写尺寸就跟着上下文的字号走：这个数常常摆在别人的标题、卡片标题或统计数值槽里，
        自带一个字号只会跟摆放它的地方打架。三个档位各自换掉这个私有槽 */

package/css/number-field.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='number-field'] {
+    --xh-number-field-skin: 1;
+  }
+
   /* 与文本框同一套堆叠：标签一行、输入行一行。
      加减钮与输入框中间那层包裹归作者，这里不碰，三者各自把高度对齐即可成一体 */
   [data-scope='number-field'][data-part='root'] {

package/css/page-header.css

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

package/css/pagination.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='pagination'] {
+    --xh-pagination-skin: 1;
+  }
+
   /* 根节点是 nav 地标，只负责把上一页 / 页码 / 下一页排成一行。
      页数为 0 时连接层会打 data-empty，这里不拿它做隐藏：作者常把「第 x-y 条」这类
      区间回显也写在 nav 里，整块藏掉会连那行字一起吞了，是否隐藏交给作者决定 */

package/css/pin-input.css

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

package/css/popconfirm.css

@@ -1,4 +1,32 @@
+@layer xihan.motion {
+  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
+  @keyframes xh-popconfirm-rotate {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}
+
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='popconfirm'] {
+    --xh-popconfirm-skin: 1;
+  }
+
   /* 根只框住触发器：浮层树靠 positioner 的固定定位飞出去，不占根的盒子 */
   [data-scope='popconfirm'][data-part='root'] {
     display: inline-block;
@@ -120,13 +148,6 @@
     color: var(--xh-popconfirm-confirm-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
   }
 
-  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
-  @keyframes xh-popconfirm-rotate {
-    to {
-      transform: rotate(1turn);
-    }
-  }
-
   /* 异步确认挂起：按钮转圈、指针挂起；不是禁用，焦点与对比度都保持 */
   [data-scope='popconfirm'][data-part='confirm-trigger'][data-loading] {
     cursor: wait;

package/css/popover.css

@@ -1,4 +1,23 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='popover'] {
+    --xh-popover-skin: 1;
+  }
+
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   [data-scope='popover'][data-part='positioner'] {
     position: fixed;

package/css/popselect.css

@@ -1,4 +1,23 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='popselect'] {
+    --xh-popselect-skin: 1;
+  }
+
   [data-scope='popselect'][data-part='root'] {
     /* 尺寸档只换这四个私有槽，触发器与条目都从 root 继承它们，换档不必给每个部件各写一条选择器。
        浮层在 positioner 里、也是 root 的后代，一并继承 */

package/css/progress.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='progress'] {
+    --xh-progress-skin: 1;
+  }
+
   /* 私有槽位：组件令牌 → 中档字面量两级回退。厚度写在 root 上而不是 track 上，
      尺寸档才改得动一处就够，track 靠继承拿到值。 */
   [data-scope='progress'][data-part='root'] {

package/css/qr-code.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='qr-code'] {
+    --xh-qr-code-skin: 1;
+  }
+
   /*
    * 根 <svg>。深浅两色取固定档而不是语义前景/背景：语义色跟着主题走，深色主题下整张码
    * 会翻成浅底深模块的反相图，一部分读码器不认反相码。要换配色改下面这三个覆盖槽。

package/css/radio-group.css

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

package/css/rating.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='rating'] {
+    --xh-rating-skin: 1;
+  }
+
   /* position 是给表单影子做定位基准的：那份输入被连接层内联写成绝对定位，
      根上不留基准它就会贴到更外层的定位祖先上，原生校验提示跟着飘到页面别处。 */
   [data-scope='rating'][data-part='root'] {