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

package/css/cascader.css

@@ -12,13 +12,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 +37,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 +121,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 +174,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 +224,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 +276,24 @@
   }
 
   [data-scope='cascader'][data-part='content'][data-state='open'] {
+    /* 入场横移沿书写方向起始缘：位移量经私有槽供给关键帧，rtl 只翻符号 */
+    --xh-_cascader-slide: -0.25rem;
+
     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: 0.25rem;
+  }
+
+  /* 一列：宽度由内容撑出、设下限防塌，高度定死——切换展开路径时浮层不上下跳动，
+     溢出的条目在列内自己滚。列与列之间用一条分隔线，比留白更能说明「这是下一级」 */
   [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 +311,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 +326,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 +337,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 +348,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 +370,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 +381,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 +417,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 +426,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, -0.25rem) 0;
     }
 
     to {

package/css/checkbox-group.css

@@ -70,19 +70,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 +90,7 @@
   }
 
   /* content 只能给伪元素，绝不能并进上面那条：content 落在普通元素上会顶掉它的全部子节点，
-     item-control 里作者写的图标就此消失 */
+     indicator 里作者写的图标就此消失 */
   [data-scope='checkbox-group'][data-part='trigger']::before {
     content: '';
   }
@@ -98,19 +98,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 +126,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 +170,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 +178,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

@@ -18,7 +18,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

@@ -38,7 +38,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 +66,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 +89,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/color-picker.css

@@ -43,7 +43,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 +55,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 +301,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 +341,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 +385,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 +421,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;
+  }
 }

package/css/combobox.css

@@ -10,14 +10,13 @@
 
     /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
     --xh-_combobox-control-bg: var(--xh-bg-canvas);
-    --xh-_combobox-control-border: var(--xh-border-default);
-    --xh-_combobox-control-border-hover: var(--xh-border-strong);
+    --xh-_combobox-control-border: var(--xh-border-control);
+    --xh-_combobox-control-border-hover: var(--xh-border-control-hover);
 
-    /* 强调色随语气走，只落在聚焦与选中上，正文文字色不动。
-       没写 data-tone 时 --xh-_tone 没被声明，三处都退回原来的取值 */
+    /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
+       没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
     --xh-_combobox-ring: var(--xh-ring-focus);
     --xh-_combobox-accent: var(--xh-_tone, var(--xh-bg-brand));
-    --xh-_combobox-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
     --xh-_combobox-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
     display: inline-flex;
@@ -53,21 +52,21 @@
      形态只决定描边与底色怎么用，用哪族颜色由 data-tone 决定 */
   [data-scope='combobox'][data-part='root'][data-variant='outline'] {
     --xh-_combobox-control-bg: var(--xh-bg-canvas);
-    --xh-_combobox-control-border: var(--xh-border-default);
-    --xh-_combobox-control-border-hover: var(--xh-border-strong);
+    --xh-_combobox-control-border: var(--xh-border-control);
+    --xh-_combobox-control-border-hover: var(--xh-border-control-hover);
   }
 
   /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
   [data-scope='combobox'][data-part='root'][data-variant='subtle'] {
     --xh-_combobox-control-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_combobox-control-border: transparent;
-    --xh-_combobox-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_combobox-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   [data-scope='combobox'][data-part='root'][data-variant='ghost'] {
     --xh-_combobox-control-bg: transparent;
     --xh-_combobox-control-border: transparent;
-    --xh-_combobox-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_combobox-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   [data-scope='combobox'][data-part='label'] {
@@ -205,11 +204,11 @@
     display: none;
   }
 
-  /* 展开时箭头翻个面，指向与列表的去向一致；transition 要重写全份，只补一条会覆盖掉上面那条 */
-  [data-scope='combobox'][data-part='trigger'] {
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  /* 展开时箭头翻个面，指向与列表的去向一致。转的是字形或作者塞的图形，不转按钮本体：
+     按钮自带悬停底色，整个按钮转会带着底色一起转 */
+  [data-scope='combobox'][data-part='trigger']:empty::before,
+  [data-scope='combobox'][data-part='trigger'] > * {
+    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 没写内容就由皮肤画箭头；作者往部件里塞了自己的图形，这条规则即不命中 */
@@ -222,7 +221,8 @@
     content: '✕';
   }
 
-  [data-scope='combobox'][data-part='trigger'][data-state='open'] {
+  [data-scope='combobox'][data-part='trigger'][data-state='open']:empty::before,
+  [data-scope='combobox'][data-part='trigger'][data-state='open'] > * {
     rotate: 180deg;
   }
 
@@ -315,7 +315,7 @@
   [data-scope='combobox'][data-part='item-group-label'] {
     display: block;
     padding-block: var(--xh-combobox-group-label-py, var(--xh-space-1));
-    padding-inline: var(--xh-combobox-group-label-px, var(--xh-control-px-sm));
+    padding-inline: var(--xh-combobox-group-label-px, var(--xh-control-px-md));
     color: var(--xh-combobox-group-label-fg, var(--xh-fg-subtle));
     font-size: var(--xh-combobox-group-label-font-size, var(--xh-font-size-xs));
     font-weight: var(--xh-combobox-group-label-font-weight, var(--xh-font-weight-medium));
@@ -331,8 +331,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-combobox-item-gap, var(--xh-_combobox-gap));
-    padding-block: var(--xh-combobox-item-py, var(--xh-space-1));
-    padding-inline: var(--xh-combobox-item-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-combobox-item-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-combobox-item-px, var(--xh-control-px-md));
     border-radius: var(--xh-combobox-item-radius, var(--xh-shape-control));
     color: var(--xh-combobox-item-fg, var(--xh-fg-default));
     font-size: var(--xh-combobox-item-font-size, var(--xh-_combobox-font-size));
@@ -341,6 +341,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);
   }
 
   /* 候选按需收起（作者自己藏掉某几条）时要让位，有 display 就得补这条 */
@@ -348,10 +351,10 @@
     display: none;
   }
 
-  /* 只认 data-highlighted，不写 :hover：指针划过时连接层已经把高亮搬过来了，
+  /* 键盘锚点走中性灰轻档。只认 data-highlighted，不写 :hover：指针划过时连接层已经把高亮搬过来了，
      两套底色各画各的会出现"鼠标停在 A 上、回车提交的却是 B" */
   [data-scope='combobox'][data-part='item'][data-highlighted]:not([data-disabled]) {
-    background: var(--xh-combobox-item-bg-highlight, var(--xh-_combobox-item-highlight-bg));
+    background: var(--xh-combobox-item-bg-hover, var(--xh-bg-subtle));
   }
 
   /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，