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

package/css/cascader.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='cascader'] {
+    --xh-cascader-skin: 1;
+  }
+
   /* 解剖里没有把「触发器 + 清空按钮」裹在一起的 control 部件，一行是靠 flex-wrap 分出来的：
      标签占满整行把后面的挤到下一行，触发器与清空按钮就并排落在同一行上。
      这样作者少写标签、少写清空按钮，剩下的部件也不会塌 */
@@ -12,13 +17,16 @@
 
     /* 形态档只换触发框的描边与底色这三个槽，浮层与列不跟着变：
        变的是「这是个输入位」的表达方式，不是弹出内容的表达方式 */
-    --xh-_cascader-border: var(--xh-border-default);
-    --xh-_cascader-border-hover: var(--xh-border-strong);
+    --xh-_cascader-border: var(--xh-border-control);
+    --xh-_cascader-border-hover: var(--xh-border-control-hover);
     --xh-_cascader-bg: var(--xh-bg-canvas);
 
     /* 选中条目的文字色随语气走，没写 data-tone 时退回品牌强调色 */
     --xh-_cascader-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
+    /* 展开路径的底色：随语气走淡底，没写 data-tone 时退回品牌淡底 */
+    --xh-_cascader-active-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
@@ -34,15 +42,15 @@
   /* 形态只决定描边与底色怎么用；用哪族颜色由 data-tone 决定，没写 tone 就沿用原来的中性配色 */
   /* outline 就是缺省那一身：描边加画布底，写出来只为让三档并列可读 */
   [data-scope='cascader'][data-part='root'][data-variant='outline'] {
-    --xh-_cascader-border: var(--xh-border-default);
-    --xh-_cascader-border-hover: var(--xh-border-strong);
+    --xh-_cascader-border: var(--xh-border-control);
+    --xh-_cascader-border-hover: var(--xh-border-control-hover);
     --xh-_cascader-bg: var(--xh-bg-canvas);
   }
 
   /* subtle 是填充式：底色接过「这里能点」的表达，描边随之让位 */
   [data-scope='cascader'][data-part='root'][data-variant='subtle'] {
     --xh-_cascader-border: transparent;
-    --xh-_cascader-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_cascader-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
     --xh-_cascader-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   }
 
@@ -118,9 +126,9 @@
   }
 
   /* trigger 是整个控件唯一的 Tab 停靠点（展开后停靠点才移进列里），落焦必须看得见。
-     语气落在环上：没写 data-tone 时 --xh-_tone 没被声明，退回原来的聚焦环色 */
+     聚焦环恒用固定环色，不随语气走 */
   [data-scope='cascader'][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);
   }
 
@@ -171,6 +179,11 @@
     display: none;
   }
 
+  /* 没写内容就由皮肤画箭头；作者往部件里塞了自己的图形，这条规则即不命中 */
+  [data-scope='cascader'][data-part='indicator']:empty::before {
+    content: '▾';
+  }
+
   [data-scope='cascader'][data-part='indicator'][data-state='open'] {
     rotate: 180deg;
   }
@@ -216,7 +229,7 @@
   /* 清空按钮退出了 Tab 序列（tabindex=-1），正常操作走不到这里；
      留着是给程序化聚焦兜底，落焦时得看得见 */
   [data-scope='cascader'][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);
   }
 
@@ -268,16 +281,24 @@
   }
 
   [data-scope='cascader'][data-part='content'][data-state='open'] {
+    /* 入场横移沿书写方向起始缘：位移量经私有槽供给关键帧，rtl 只翻符号 */
+    --xh-_cascader-slide: calc(-1 * var(--xh-motion-distance-sm));
+
     animation: xh-cascader-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
-  /* 一列：自己定宽、自己滚。列与列之间用一条分隔线，比留白更能说明「这是下一级」 */
+  [dir='rtl'] [data-scope='cascader'][data-part='content'][data-state='open'] {
+    --xh-_cascader-slide: var(--xh-motion-distance-sm);
+  }
+
+  /* 一列：宽度由内容撑出、设下限防塌，高度定死——切换展开路径时浮层不上下跳动，
+     溢出的条目在列内自己滚。列与列之间用一条分隔线，比留白更能说明「这是下一级」 */
   [data-scope='cascader'][data-part='column'] {
     display: flex;
     flex: none;
     flex-direction: column;
-    inline-size: var(--xh-cascader-column-w, 11rem);
-    max-block-size: var(--xh-cascader-column-max-h, 16rem);
+    min-inline-size: var(--xh-cascader-column-min-w, 7rem);
+    block-size: var(--xh-cascader-column-h, 11.25rem);
     padding-block: var(--xh-cascader-column-py, var(--xh-space-1));
     padding-inline: var(--xh-cascader-column-px, var(--xh-space-1));
     overflow-y: auto;
@@ -295,8 +316,14 @@
     border-inline-start: var(--xh-stroke-thin) solid var(--xh-cascader-column-divider, var(--xh-border-subtle));
   }
 
-  /* 列不进 Tab 序列也不承载焦点，落焦不画环：高亮永远长在条目上 */
-  [data-scope='cascader'][data-part='column']:focus-visible {
+  /* 焦点落在根列上只有一种情形：指针打开、无选中值、还没有任何条目当锚点。
+     那一刻它认领着 Tab 位，环画在列内沿；有锚点时环长在条目上，列不再画 */
+  [data-scope='cascader'][data-part='column'][tabindex='0']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='cascader'][data-part='column']:not([tabindex='0']):focus-visible {
     outline: none;
   }
 
@@ -304,8 +331,9 @@
     display: flex;
     align-items: center;
     gap: var(--xh-cascader-row-gap, var(--xh-_cascader-gap));
-    padding-block: var(--xh-cascader-row-py, var(--xh-space-1));
-    padding-inline: var(--xh-cascader-row-px, var(--xh-control-px-sm));
+    max-inline-size: var(--xh-cascader-row-max-w, 25rem);
+    padding-block: var(--xh-cascader-row-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-cascader-row-px, var(--xh-control-px-md));
     border-radius: var(--xh-cascader-row-radius, var(--xh-shape-control));
     color: var(--xh-cascader-row-fg, var(--xh-fg-default));
     font-size: var(--xh-cascader-row-font-size, var(--xh-_cascader-font-size));
@@ -314,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);
   }
 
   /* 条目常挂不卸载：不属于当前这一列的那些靠 hidden 收起。
@@ -322,14 +353,21 @@
     display: none;
   }
 
-  /* 指针悬停、键盘高亮与展开路径共用同一张底：三者都是「此刻停在这儿」，
-     data-highlighted 跟的是连接层记的焦点条目 */
-  [data-scope='cascader'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted], [data-active]) {
-    background: var(--xh-cascader-row-bg-highlight, var(--xh-bg-subtle-hover));
+  /* 底色分两档、靠色相分家：悬停与键盘锚点是中性灰轻档，展开路径是品牌淡底加粗。
+     hover 恒中性灰、不接语气槽——两档同色相的话路径就认不出来了。
+     悬停展开把路径挪走后留在原地的锚点降回轻档，每列至多一条路径高亮 */
+  [data-scope='cascader'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
+    background: var(--xh-cascader-row-bg-hover, var(--xh-bg-subtle));
   }
 
-  /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给悬停，
-     两者因此能同时看见 */
+  /* 必须排在轻档之后：锚点走到路径上时同特指度靠书写顺序压过轻档 */
+  [data-scope='cascader'][data-part='item']:not([data-disabled])[data-active] {
+    background: var(--xh-cascader-row-bg-active, var(--xh-_cascader-active-bg));
+    font-weight: var(--xh-cascader-row-active-font-weight, var(--xh-font-weight-semibold));
+  }
+
+  /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色强档归展开路径、轻档归悬停，
+     三者因此能同时看见 */
   [data-scope='cascader'][data-part='item'][data-selected] {
     color: var(--xh-cascader-row-fg-selected, var(--xh-_cascader-selected-fg));
     font-weight: var(--xh-cascader-row-selected-font-weight, var(--xh-font-weight-medium));
@@ -337,7 +375,7 @@
 
   /* 条目自己就是 option，环直接画在它身上；往内收，行是撑满列宽的，环画在外沿会被裁掉 */
   [data-scope='cascader'][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));
   }
 
@@ -348,6 +386,28 @@
     cursor: not-allowed;
   }
 
+  /* 分支条目行尾画右向小箭头：不点开也看得出还有下一级。
+     全边框描好后抹掉块末与行首两边，剩下的直角旋成箭头；位置由 item-text 的 flex:1 顶到行尾 */
+  [data-scope='cascader'][data-part='item'][data-branch]::after {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-cascader-branch-arrow-size, var(--xh-space-1_5));
+    block-size: var(--xh-cascader-branch-arrow-size, var(--xh-space-1_5));
+    border: var(--xh-glyph-stroke-light) solid var(--xh-cascader-branch-arrow-fg, var(--xh-fg-subtle));
+    border-block-end: 0;
+    border-inline-start: 0;
+    rotate: 45deg;
+  }
+
+  /* rtl 下剩下的是块首与行末（物理左上）两边，反向旋 45 度才指向行进方向 */
+  [dir='rtl'] [data-scope='cascader'][data-part='item'][data-branch]::after {
+    rotate: -45deg;
+  }
+
+  [data-scope='cascader'][data-part='item'][data-branch][data-disabled]::after {
+    border-color: var(--xh-fg-disabled);
+  }
+
   [data-scope='cascader'][data-part='item-text'] {
     flex: 1;
     min-inline-size: 0;
@@ -362,7 +422,7 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-cascader-indicator-size, var(--xh-control-indicator-size));
+    inline-size: var(--xh-cascader-item-indicator-size, var(--xh-control-indicator-size));
     color: var(--xh-cascader-item-indicator-fg, var(--xh-_tone, var(--xh-bg-brand)));
     visibility: hidden;
   }
@@ -371,22 +431,142 @@
     display: none;
   }
 
+  /* 没写内容就由皮肤画勾；作者往部件里塞了自己的图形，这条规则即不命中 */
+  [data-scope='cascader'][data-part='item-indicator']:empty::before {
+    content: '✓';
+  }
+
   [data-scope='cascader'][data-part='item-indicator'][data-selected] {
     visibility: visible;
   }
 
+  /* 级联勾选的半选态只在皮肤自绘（:empty）时露面画横杠：
+     作者塞了自己的选中图形时，半选放出来会顶着一个语义相反的勾，表达交还作者 */
+  [data-scope='cascader'][data-part='item-indicator'][data-indeterminate]:empty {
+    visibility: visible;
+  }
+
+  [data-scope='cascader'][data-part='item-indicator'][data-indeterminate]:not([data-selected]):empty::before {
+    content: '−';
+    font-weight: var(--xh-font-weight-semibold);
+  }
+
   [data-scope='cascader'][data-part='item-indicator'][data-disabled] {
     color: var(--xh-fg-disabled);
   }
+
+  /* —— 搜索视图：输入框横占整行排在列上方，候选列表替换列视图 —— */
+  [data-scope='cascader'][data-part='content']:has([data-part='input']:not([hidden])) {
+    flex-wrap: wrap;
+  }
+
+  [data-scope='cascader'][data-part='input'] {
+    flex-basis: 100%;
+    min-inline-size: 0;
+    padding-block: var(--xh-cascader-input-py, var(--xh-space-2));
+    padding-inline: var(--xh-cascader-input-px, var(--xh-control-px-md));
+    border: none;
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-cascader-content-border, var(--xh-border-default));
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+    background: none;
+    color: inherit;
+    font-family: inherit;
+    font-size: var(--xh-cascader-input-font-size, var(--xh-_cascader-font-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  [data-scope='cascader'][data-part='input']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='cascader'][data-part='input'][hidden] {
+    display: none;
+  }
+
+  [data-scope='cascader'][data-part='search-list'] {
+    display: flex;
+    flex-basis: 100%;
+    flex-direction: column;
+    max-block-size: var(--xh-cascader-search-max-h, 11.25rem);
+    padding: var(--xh-cascader-search-p, var(--xh-space-1));
+    overflow-y: auto;
+  }
+
+  [data-scope='cascader'][data-part='search-list'][hidden] {
+    display: none;
+  }
+
+  /* 无候选时列表自身不占位，空态交给 empty 部件出面 */
+  [data-scope='cascader'][data-part='search-list'][data-empty] {
+    padding: 0;
+  }
+
+  /* 搜索视图里列整体让位 */
+  [data-scope='cascader'][data-part='content'][data-searching] [data-part='column'] {
+    display: none;
+  }
+
+  /* 候选与列内条目同一套行度量，虚拟高亮与悬停同用轻档 */
+  [data-scope='cascader'][data-part='search-item'] {
+    padding-block: var(--xh-cascader-row-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-cascader-row-px, var(--xh-control-px-md));
+    overflow: hidden;
+    border-radius: var(--xh-cascader-row-radius, var(--xh-shape-control));
+    color: var(--xh-cascader-row-fg, var(--xh-fg-default));
+    font-size: var(--xh-cascader-row-font-size, var(--xh-_cascader-font-size));
+    line-height: var(--xh-cascader-row-leading, var(--xh-leading-normal));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='cascader'][data-part='search-item']:not([data-disabled]):is(:hover, [data-highlighted]) {
+    background: var(--xh-cascader-row-bg-hover, var(--xh-bg-subtle));
+  }
+
+  [data-scope='cascader'][data-part='search-item'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='cascader'][data-part='search-item'][hidden] {
+    display: none;
+  }
+
+  /* —— 空态：当前视图没有条目时由 empty 部件出面，文案由适配器或作者供给，皮肤只管排版 —— */
+  /* 根列没有条目时那条空列让位，占位面接管整个浮层 */
+  [data-scope='cascader'][data-part='content'][data-empty] [data-part='column'] {
+    display: none;
+  }
+
+  [data-scope='cascader'][data-part='empty'] {
+    display: flex;
+    flex: 1 1 100%;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--xh-cascader-column-min-w, 7rem);
+    min-block-size: var(--xh-cascader-empty-min-h, 5rem);
+    padding: var(--xh-cascader-empty-p, var(--xh-space-3));
+    color: var(--xh-cascader-empty-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-cascader-row-font-size, var(--xh-_cascader-font-size));
+  }
+
+  [data-scope='cascader'][data-part='empty'][hidden] {
+    display: none;
+  }
 }
 
 @layer xihan.motion {
   /* 浮层是横向长出来的：淡入之外再沿书写方向起始缘推一小段，观感上像列被「拉开」。
+     位移量从 content 上的私有槽取，rtl 侧翻符号后同一份关键帧两个方向都对。
      关键帧写在本文件里、名字带组件前缀，不动公共的那一份 */
   @keyframes xh-cascader-in {
     from {
       opacity: 0;
-      translate: -0.25rem 0;
+      translate: var(--xh-_cascader-slide, calc(-1 * var(--xh-motion-distance-sm))) 0;
     }
 
     to {

package/css/checkbox-group.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='checkbox-group'] {
+    --xh-checkbox-group-skin: 1;
+  }
+
   /* 组容器：label、trigger、条目都是它的直接子节点，排布方式只能读 data-orientation——
      连接层明说了 role=group 不接受 aria-orientation，那个属性它根本没输出 */
   [data-scope='checkbox-group'][data-part='root'] {
@@ -70,19 +75,19 @@
   /* 全选格与条目格共用同一套盒子，并成一条规则写：分开写迟早只改到一半，两个方框就此走形。
      尺寸与选中态照 checkbox 的 root 搬，同一份视觉语言在单体与集合里必须一致。
      trigger 那格没有对应的角色节点（anatomy 到 trigger 为止），只能由伪元素补出来 */
-  [data-scope='checkbox-group'][data-part='item-control'],
+  [data-scope='checkbox-group'][data-part='indicator'],
   [data-scope='checkbox-group'][data-part='trigger']::before {
     display: inline-flex;
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-checkbox-group-control-size, 16px);
-    block-size: var(--xh-checkbox-group-control-size, 16px);
-    border: var(--xh-stroke-thin) solid var(--xh-checkbox-group-control-border, var(--xh-border-default));
-    border-radius: var(--xh-checkbox-group-control-radius, var(--xh-radius-sm));
-    background: var(--xh-checkbox-group-control-bg, var(--xh-bg-canvas));
-    color: var(--xh-checkbox-group-control-fg, var(--xh-fg-on-brand));
-    font-size: var(--xh-checkbox-group-control-font-size, 12px);
+    inline-size: var(--xh-checkbox-group-indicator-size, 16px);
+    block-size: var(--xh-checkbox-group-indicator-size, 16px);
+    border: var(--xh-stroke-thin) solid var(--xh-checkbox-group-indicator-border, var(--xh-border-control));
+    border-radius: var(--xh-checkbox-group-indicator-radius, var(--xh-radius-sm));
+    background: var(--xh-checkbox-group-indicator-bg, var(--xh-bg-canvas));
+    color: var(--xh-checkbox-group-indicator-fg, var(--xh-fg-on-brand));
+    font-size: var(--xh-checkbox-group-indicator-font-size, 12px);
     line-height: var(--xh-leading-none);
     transition:
       background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
@@ -90,7 +95,7 @@
   }
 
   /* content 只能给伪元素，绝不能并进上面那条：content 落在普通元素上会顶掉它的全部子节点，
-     item-control 里作者写的图标就此消失 */
+     indicator 里作者写的图标就此消失 */
   [data-scope='checkbox-group'][data-part='trigger']::before {
     content: '';
   }
@@ -98,19 +103,19 @@
   /* 悬停只加深空方框的描边。已选中的那一格必须排除：这条选择器的权重高过下面那条填色规则，
      不排除就会在悬停时把 brand 描边换回灰色，方框看起来"缺了一圈" */
   [data-scope='checkbox-group'][data-part='item']:not([data-disabled]):hover
-    [data-scope='checkbox-group'][data-part='item-control']:not([data-state='checked']) {
-    border-color: var(--xh-checkbox-group-control-border-hover, var(--xh-border-strong));
+    [data-scope='checkbox-group'][data-part='indicator']:not([data-state='checked']) {
+    border-color: var(--xh-checkbox-group-indicator-border-hover, var(--xh-border-control-hover));
   }
 
   /* 选中即填色：条目是二态，全选格三态里 all 与 some 都算"有值"，共用同一副填色 */
-  [data-scope='checkbox-group'][data-part='item-control'][data-state='checked'],
+  [data-scope='checkbox-group'][data-part='indicator'][data-state='checked'],
   [data-scope='checkbox-group'][data-part='trigger']:is([data-state='all'], [data-state='some'])::before {
-    border-color: var(--xh-checkbox-group-control-border-checked, var(--xh-bg-brand));
-    background: var(--xh-checkbox-group-control-bg-checked, var(--xh-bg-brand));
+    border-color: var(--xh-checkbox-group-indicator-border-checked, var(--xh-bg-brand));
+    background: var(--xh-checkbox-group-indicator-bg-checked, var(--xh-bg-brand));
   }
 
-  /* 勾号由皮肤补，作者不必自己往 item-control 里塞字符 */
-  [data-scope='checkbox-group'][data-part='item-control'][data-state='checked']::before {
+  /* 勾号由皮肤补，作者不必自己往 indicator 里塞字符 */
+  [data-scope='checkbox-group'][data-part='indicator'][data-state='checked']::before {
     content: '✓';
   }
 
@@ -126,8 +131,8 @@
 
   /* 校验失败标在每个方框上：root 上的 data-invalid 是唯一出处，条目自己不带这个属性 */
   [data-scope='checkbox-group'][data-part='root'][data-invalid]
-    [data-scope='checkbox-group'][data-part='item-control'] {
-    border-color: var(--xh-checkbox-group-control-border-invalid, var(--xh-color-danger-500));
+    [data-scope='checkbox-group'][data-part='indicator'] {
+    border-color: var(--xh-checkbox-group-indicator-border-invalid, var(--xh-color-danger-500));
   }
 
   [data-scope='checkbox-group'][data-part='item-text'] {
@@ -170,7 +175,7 @@
   /* 表单出口：连接层已经把整套视觉隐藏写进内联 style（absolute + 1px + clip-path），
      这里绝不能再补 display:none——那份输入必须留在布局里，原生校验提示要有处可贴。
      只补一条不吃指针，免得它挡住条目的点击 */
-  [data-scope='checkbox-group'][data-part='item-hidden-input'] {
+  [data-scope='checkbox-group'][data-part='hidden-input'] {
     pointer-events: none;
   }
 
@@ -178,7 +183,7 @@
      不补的话作者给节点加 hidden 后它照样显示 */
   [data-scope='checkbox-group'][data-part='root'][hidden],
   [data-scope='checkbox-group'][data-part='item'][hidden],
-  [data-scope='checkbox-group'][data-part='item-control'][hidden],
+  [data-scope='checkbox-group'][data-part='indicator'][hidden],
   [data-scope='checkbox-group'][data-part='trigger'][hidden] {
     display: none;
   }

package/css/checkbox.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='checkbox'] {
+    --xh-checkbox-skin: 1;
+  }
+
   [data-scope='checkbox'][data-part='root'] {
     /* 尺寸档只换方框边长这一个私有槽，勾的字号按边长的比例跟着走；
        指示器从 root 继承这两个槽，换档不必给每个部件各写一条选择器 */
@@ -18,7 +23,7 @@
     inline-size: var(--xh-_checkbox-box);
     block-size: var(--xh-_checkbox-box);
     padding: 0;
-    border: 1px solid var(--xh-checkbox-border, var(--xh-border-default));
+    border: 1px solid var(--xh-checkbox-border, var(--xh-border-control));
     border-radius: var(--xh-radius-sm);
     background: var(--xh-checkbox-bg, var(--xh-bg-canvas));
     color: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));

package/css/clipboard.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='clipboard'] {
+    --xh-clipboard-skin: 1;
+  }
+
   /* 与文本框同一套堆叠：标签一行、输入行一行 */
   [data-scope='clipboard'][data-part='root'] {
     display: inline-flex;
@@ -38,7 +43,7 @@
     block-size: var(--xh-clipboard-input-h, var(--xh-control-h-md));
     padding-inline: var(--xh-clipboard-input-px, var(--xh-control-px-md));
     padding-block: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-clipboard-input-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-clipboard-input-border, var(--xh-border-control));
     border-radius: var(--xh-clipboard-input-radius, var(--xh-shape-control));
     /* 只读态压低底色表示"改不动"，但仍可聚焦、可选中复制 */
     background: var(--xh-clipboard-input-bg, var(--xh-bg-subtle));
@@ -66,7 +71,7 @@
     block-size: var(--xh-clipboard-trigger-h, var(--xh-control-h-md));
     padding-inline: var(--xh-clipboard-trigger-px, var(--xh-control-px-md));
     padding-block: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-clipboard-trigger-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-clipboard-trigger-border, var(--xh-border-control));
     border-radius: var(--xh-clipboard-trigger-radius, var(--xh-shape-control));
     background: var(--xh-clipboard-trigger-bg, var(--xh-bg-canvas));
     color: var(--xh-clipboard-trigger-fg, var(--xh-fg-default));
@@ -89,7 +94,7 @@
   }
 
   [data-scope='clipboard'][data-part='trigger']:hover {
-    border-color: var(--xh-clipboard-trigger-border-hover, var(--xh-border-strong));
+    border-color: var(--xh-clipboard-trigger-border-hover, var(--xh-border-control-hover));
     background: var(--xh-clipboard-trigger-bg-hover, var(--xh-bg-subtle-hover));
   }
 

package/css/code-block.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='code-block'] {
+    --xh-code-block-skin: 1;
+  }
+
   /* overflow: hidden 让内部 <pre> 的滚动内容沿圆角收边；不设 display，排布由作者决定 */
   [data-scope='code-block'][data-part='root'] {
     overflow: hidden;

package/css/collapsible.css

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

package/css/color-picker.css

@@ -2,7 +2,7 @@
   @keyframes xh-color-picker-fade-in {
     from {
       opacity: 0;
-      scale: 0.98;
+      scale: var(--xh-motion-scale-enter);
     }
 
     to {
@@ -13,6 +13,11 @@
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='color-picker'] {
+    --xh-color-picker-skin: 1;
+  }
+
   /* 定位分工：取色区拇指的两条轴（inset-inline-start / inset-block-start）、
      通道拇指的主轴（inset-inline-start）、浮层坐标、取色区底色、透明度轨道的渐变，
      全都由连接层每帧写进内联样式。这份皮肤一个都不碰：内联优先级高于样式表，
@@ -43,7 +48,7 @@
     min-inline-size: var(--xh-color-picker-trigger-min-w, 9rem);
     block-size: var(--xh-color-picker-trigger-h, var(--xh-control-h-md));
     padding-inline: var(--xh-color-picker-trigger-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) solid var(--xh-color-picker-trigger-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-trigger-border, var(--xh-border-control));
     border-radius: var(--xh-color-picker-trigger-radius, var(--xh-shape-control));
     background: var(--xh-color-picker-trigger-bg, var(--xh-bg-canvas));
     color: var(--xh-color-picker-trigger-fg, var(--xh-fg-default));
@@ -55,7 +60,7 @@
   }
 
   [data-scope='color-picker'][data-part='trigger']:hover:not(:disabled) {
-    border-color: var(--xh-color-picker-trigger-border-hover, var(--xh-border-strong));
+    border-color: var(--xh-color-picker-trigger-border-hover, var(--xh-border-control-hover));
   }
 
   [data-scope='color-picker'][data-part='trigger']:focus-visible {
@@ -301,7 +306,7 @@
     min-inline-size: 0;
     block-size: var(--xh-color-picker-input-h, var(--xh-control-h-sm));
     padding-inline: var(--xh-color-picker-input-px, var(--xh-control-px-sm));
-    border: var(--xh-stroke-thin) solid var(--xh-color-picker-input-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-input-border, var(--xh-border-control));
     border-radius: var(--xh-color-picker-input-radius, var(--xh-shape-control));
     background: var(--xh-color-picker-input-bg, var(--xh-bg-canvas));
     color: inherit;
@@ -341,7 +346,7 @@
     inline-size: var(--xh-color-picker-action-size, 1.75rem);
     block-size: var(--xh-color-picker-action-size, 1.75rem);
     padding: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-color-picker-action-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-action-border, var(--xh-border-control));
     border-radius: var(--xh-color-picker-action-radius, var(--xh-shape-control));
     background: var(--xh-color-picker-action-bg, transparent);
     color: var(--xh-color-picker-action-fg, var(--xh-fg-muted));
@@ -385,7 +390,7 @@
     inline-size: var(--xh-color-picker-swatch-item-size, 1.25rem);
     block-size: var(--xh-color-picker-swatch-item-size, 1.25rem);
     padding: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-color-picker-swatch-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-swatch-border, var(--xh-border-control));
     border-radius: var(--xh-color-picker-swatch-radius, var(--xh-radius-sm));
     cursor: pointer;
   }
@@ -421,4 +426,20 @@
   [data-scope='color-picker'][data-part='swatch-group'][hidden] {
     display: none;
   }
+
+  /* 连接层把它写成 type=hidden，UA 自己就不渲染；这里的视觉隐藏是给元素升级前那一瞬兜底
+     （作者手写的是一个普通 input，升级完成前它是可见的文本框）。
+     刻意不写 display：写了反而会盖掉 UA 对 type=hidden 的收起，把它显出来 */
+  [data-scope='color-picker'][data-part='hidden-input'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    pointer-events: none;
+  }
 }