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

package/css/checkbox-group.css

@@ -7,6 +7,9 @@
   /* 组容器：label、trigger、条目都是它的直接子节点，排布方式只能读 data-orientation——
      连接层明说了 role=group 不接受 aria-orientation，那个属性它根本没输出 */
   [data-scope='checkbox-group'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-checkbox-group-icon-size, var(--xh-glyph-size-text));
+
     display: flex;
     gap: var(--xh-checkbox-group-gap, var(--xh-stack-gap-md));
   }
@@ -62,7 +65,6 @@
   [data-scope='checkbox-group'][data-part='item'][data-disabled] {
     color: var(--xh-checkbox-group-item-fg-disabled, var(--xh-fg-disabled));
     cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
   }
 
   /* 只读整组都改不动，但不是禁用：颜色照常，只把"可点"这个暗示收回来。
@@ -81,13 +83,13 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-checkbox-group-indicator-size, 16px);
-    block-size: var(--xh-checkbox-group-indicator-size, 16px);
+    inline-size: var(--xh-checkbox-group-indicator-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-checkbox-group-indicator-size, var(--xh-control-indicator-size));
     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));
+    border-radius: var(--xh-checkbox-group-indicator-radius, var(--xh-shape-inset));
     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);
+    font-size: var(--xh-checkbox-group-indicator-font-size, calc(var(--xh-control-indicator-size) * 0.75));
     line-height: var(--xh-leading-none);
     transition:
       background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
@@ -107,32 +109,53 @@
     border-color: var(--xh-checkbox-group-indicator-border-hover, var(--xh-border-control-hover));
   }
 
-  /* 选中即填色：条目是二态，全选格三态里 all 与 some 都算"有值"，共用同一副填色 */
+  /* 选中即填色：条目是二态，全选格三态里 checked 与 indeterminate 都算"有值"，共用同一副填色 */
   [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 {
+  [data-scope='checkbox-group'][data-part='trigger']:is([data-state='checked'], [data-state='indeterminate'])::before {
     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));
   }
 
   /* 勾号由皮肤补，作者不必自己往 indicator 里塞字符 */
-  [data-scope='checkbox-group'][data-part='indicator'][data-state='checked']::before {
-    content: '✓';
-  }
-
-  /* 全选格的三态：all 打勾、some 打横杠、none 留空。
-     some 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state */
-  [data-scope='checkbox-group'][data-part='trigger'][data-state='all']::before {
-    content: '✓';
+  [data-scope='checkbox-group'][data-part='indicator'][data-state='checked']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+  }
+
+  /* 全选格的三态：checked 打勾、indeterminate 打横杠、unchecked 留空。
+     indeterminate 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state */
+  [data-scope='checkbox-group'][data-part='trigger'][data-state='checked']::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
 
-  [data-scope='checkbox-group'][data-part='trigger'][data-state='some']::before {
-    content: '−';
+  [data-scope='checkbox-group'][data-part='trigger'][data-state='indeterminate']::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
 
   /* 校验失败标在每个方框上：root 上的 data-invalid 是唯一出处，条目自己不带这个属性 */
   [data-scope='checkbox-group'][data-part='root'][data-invalid]
     [data-scope='checkbox-group'][data-part='indicator'] {
-    border-color: var(--xh-checkbox-group-indicator-border-invalid, var(--xh-color-danger-500));
+    border-color: var(--xh-checkbox-group-indicator-border-invalid, var(--xh-border-invalid));
   }
 
   [data-scope='checkbox-group'][data-part='item-text'] {
@@ -163,7 +186,6 @@
   [data-scope='checkbox-group'][data-part='trigger'][data-disabled] {
     color: var(--xh-checkbox-group-trigger-fg-disabled, var(--xh-fg-disabled));
     cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
   }
 
   /* 只读与禁用会同时出现在 trigger 上（连接层两个属性各写各的），

package/css/checkbox.css

@@ -5,9 +5,12 @@
   }
 
   [data-scope='checkbox'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-checkbox-icon-size, var(--xh-glyph-size-text));
+
     /* 尺寸档只换方框边长这一个私有槽，勾的字号按边长的比例跟着走；
        指示器从 root 继承这两个槽，换档不必给每个部件各写一条选择器 */
-    --xh-_checkbox-box: var(--xh-space-4);
+    --xh-_checkbox-box: var(--xh-control-indicator-size);
     --xh-_checkbox-glyph: calc(var(--xh-_checkbox-box) * 0.75);
 
     /* 选中态的底与描边随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
@@ -23,8 +26,8 @@
     inline-size: var(--xh-_checkbox-box);
     block-size: var(--xh-_checkbox-box);
     padding: 0;
-    border: 1px solid var(--xh-checkbox-border, var(--xh-border-control));
-    border-radius: var(--xh-radius-sm);
+    border: var(--xh-stroke-thin) solid var(--xh-checkbox-border, var(--xh-border-control));
+    border-radius: var(--xh-shape-inset);
     background: var(--xh-checkbox-bg, var(--xh-bg-canvas));
     color: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
     cursor: pointer;
@@ -41,6 +44,20 @@
     background: var(--xh-checkbox-bg-checked, var(--xh-_checkbox-accent));
   }
 
+  /* 校验失败：方框描边转警示色。未勾时只有描边，勾上后填充仍走语气色，
+     两者不打架——描边压在 checked 规则之后，选择器同特指度靠书写顺序取胜 */
+  [data-scope='checkbox'][data-part='root'][data-invalid],
+  [data-scope='checkbox'][data-part='root'][data-state='checked'][data-invalid],
+  [data-scope='checkbox'][data-part='root'][data-state='indeterminate'][data-invalid] {
+    border-color: var(--xh-checkbox-border-invalid, var(--xh-border-invalid));
+  }
+
+  /* 文字随方框一起转警示色：给了默认插槽时外层是 <label>，方框自己的描边够不到那段文字 */
+  [data-scope='checkbox'][data-part='label'][data-invalid],
+  [data-scope='checkbox'][data-part='text'][data-invalid] {
+    color: var(--xh-checkbox-fg-invalid, var(--xh-fg-danger));
+  }
+
   [data-scope='checkbox'][data-part='root'][data-disabled] {
     cursor: not-allowed;
     opacity: var(--xh-state-disabled-opacity);
@@ -54,11 +71,11 @@
   /* —— 尺寸 —— */
   /* 缺省档写在上面的基础规则里 */
   [data-scope='checkbox'][data-part='root'][data-size='sm'] {
-    --xh-_checkbox-box: var(--xh-space-3);
+    --xh-_checkbox-box: calc(var(--xh-control-indicator-size) - var(--xh-space-1));
   }
 
   [data-scope='checkbox'][data-part='root'][data-size='lg'] {
-    --xh-_checkbox-box: var(--xh-space-5);
+    --xh-_checkbox-box: calc(var(--xh-control-indicator-size) + var(--xh-space-1));
   }
 
   [data-scope='checkbox'][data-part='indicator'] {
@@ -71,8 +88,16 @@
     font-size: var(--xh-_checkbox-glyph);
   }
 
-  [data-scope='checkbox'][data-part='indicator']::before {
-    content: '✓';
+  /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
+  [data-scope='checkbox'][data-part='indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
 
   [data-scope='checkbox'][data-part='indicator'][data-state='unchecked'] {
@@ -89,8 +114,29 @@
     position: absolute;
     inline-size: 60%;
     block-size: var(--xh-stroke-thick);
-    border-radius: var(--xh-radius-full);
+    border-radius: var(--xh-shape-pill);
     background: var(--xh-checkbox-indicator-fg, var(--xh-_checkbox-on-accent));
     content: '';
   }
+
+  /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox-group 的条目同一副样子 —— */
+  [data-scope='checkbox'][data-part='label'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-checkbox-label-gap, var(--xh-control-gap-md));
+    color: var(--xh-checkbox-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-checkbox-label-font-size, var(--xh-text-label-size));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+  }
+
+  [data-scope='checkbox'][data-part='label'][data-disabled] {
+    color: var(--xh-checkbox-label-fg-disabled, var(--xh-fg-disabled));
+    cursor: not-allowed;
+  }
+
+  [data-scope='checkbox'][data-part='text'] {
+    color: inherit;
+    user-select: none;
+  }
 }

package/css/clipboard.css

@@ -39,7 +39,7 @@
   }
 
   [data-scope='clipboard'][data-part='input'] {
-    min-inline-size: var(--xh-clipboard-input-min-w, 12rem);
+    min-inline-size: var(--xh-clipboard-input-min-w, var(--xh-control-min-w));
     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;
@@ -58,6 +58,7 @@
   }
 
   [data-scope='clipboard'][data-part='input']:focus-visible {
+    border-color: var(--xh-clipboard-input-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }

package/css/code-block.css

@@ -50,15 +50,20 @@
     white-space: pre;
   }
 
-  /* 语法配色。令牌集里没有语法色这一类，所以就地声明成可覆盖的变量：
-     注释与标点复用既有语义色，只有三种真需要色相的走 light-dark()。
-     浏览器不认 light-dark() 时这几条整体失效，退化成单色代码，读起来照常。 */
+  /* 开了换行：pre-wrap 仍保留缩进与连续空白，只是允许行尾折下来；
+     anywhere 让没有空格的长串（url、base64）也能断，否则照样撑出横向滚动 */
+  [data-scope='code-block'][data-part='code'][data-wrap] {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  /* 语法配色：注释与标点复用既有语义色，三种真需要色相的走 --xh-syntax-* 语法令牌（随主题明暗切换）。 */
   [data-scope='code-block'][data-part='root'] {
     --xh-code-block-comment-fg: var(--xh-fg-muted);
     --xh-code-block-punctuation-fg: var(--xh-fg-subtle);
-    --xh-code-block-string-fg: light-dark(#0a7f5f, #7ee2b8);
-    --xh-code-block-number-fg: light-dark(#9a5b00, #f0b866);
-    --xh-code-block-keyword-fg: light-dark(#8250df, #d2a8ff);
+    --xh-code-block-string-fg: var(--xh-syntax-string);
+    --xh-code-block-number-fg: var(--xh-syntax-number);
+    --xh-code-block-keyword-fg: var(--xh-syntax-keyword);
   }
 
   /* 记号本身不带任何布局，只上色：它是 <code> 里的行内片段，多一点盒模型都会破坏对齐 */
@@ -77,7 +82,7 @@
 
   [data-scope='code-block'][data-part='token'][data-kind='keyword'] {
     color: var(--xh-code-block-keyword-fg);
-    font-weight: var(--xh-code-block-keyword-weight, 600);
+    font-weight: var(--xh-code-block-keyword-weight, var(--xh-font-weight-semibold));
   }
 
   [data-scope='code-block'][data-part='token'][data-kind='punctuation'] {

package/css/collapsible.css

@@ -19,14 +19,14 @@
     --xh-_collapsible-trigger-h: var(--xh-control-h-sm);
     --xh-_collapsible-trigger-px: var(--xh-control-px-sm);
     --xh-_collapsible-trigger-gap: var(--xh-control-gap-sm);
-    --xh-_collapsible-trigger-font-size: var(--xh-font-size-sm);
+    --xh-_collapsible-trigger-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='collapsible'][data-part='root'][data-size='lg'] {
     --xh-_collapsible-trigger-h: var(--xh-control-h-lg);
     --xh-_collapsible-trigger-px: var(--xh-control-px-lg);
     --xh-_collapsible-trigger-gap: var(--xh-control-gap-lg);
-    --xh-_collapsible-trigger-font-size: var(--xh-font-size-lg);
+    --xh-_collapsible-trigger-font-size: var(--xh-control-font-lg);
   }
 
   [data-scope='collapsible'][data-part='trigger'] {
@@ -61,8 +61,48 @@
     opacity: var(--xh-state-disabled-opacity);
   }
 
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }：补了动画一帧都播不出来。
+     收起由适配器在退场结束后写内联 display 落成，退场窗口内靠 connect 发的 inert 挡住焦点 */
   [data-scope='collapsible'][data-part='content'] {
+    display: grid;
+    grid-template-rows: 1fr;
+    overflow: clip;
     padding-block: var(--xh-collapsible-content-py, var(--xh-stack-gap-md));
     color: var(--xh-collapsible-content-fg, var(--xh-fg-default));
   }
+
+  [data-scope='collapsible'][data-part='content'][data-state='open'] {
+    animation: xh-collapsible-expand var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='collapsible'][data-part='content'][data-state='closed'] {
+    animation: xh-collapsible-collapse var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+}
+
+@layer xihan.motion {
+  /* 行高与内缩同帧动：内缩不归零的话，border-box 会把盒子钳在上下内缩之和上，收不干净 */
+  @keyframes xh-collapsible-expand {
+    from {
+      grid-template-rows: 0fr;
+      padding-block: 0;
+    }
+
+    to {
+      grid-template-rows: 1fr;
+      padding-block: var(--xh-collapsible-content-py, var(--xh-stack-gap-md));
+    }
+  }
+
+  @keyframes xh-collapsible-collapse {
+    from {
+      grid-template-rows: 1fr;
+      padding-block: var(--xh-collapsible-content-py, var(--xh-stack-gap-md));
+    }
+
+    to {
+      grid-template-rows: 0fr;
+      padding-block: 0;
+    }
+  }
 }

package/css/color-picker.css

@@ -1,5 +1,5 @@
 @layer xihan.motion {
-  @keyframes xh-color-picker-fade-in {
+  @keyframes xh-pop-in {
     from {
       opacity: 0;
       scale: var(--xh-motion-scale-enter);
@@ -10,6 +10,17 @@
       scale: 1;
     }
   }
+  @keyframes xh-pop-out {
+    from {
+      opacity: 1;
+      scale: 1;
+    }
+
+    to {
+      opacity: 0;
+      scale: var(--xh-motion-scale-enter);
+    }
+  }
 }
 
 @layer xihan.components {
@@ -23,15 +34,25 @@
      全都由连接层每帧写进内联样式。这份皮肤一个都不碰：内联优先级高于样式表，
      写了不但是死声明，还会跟连接层抢位置。皮肤只管尺寸、颜色、圆角与状态表现。 */
 
+  /* 标签一行、盒一行的两行堆叠 */
   [data-scope='color-picker'][data-part='root'] {
+    /* 盒的度量与标签字号走私有槽中转，与同族的下拉选择一处对一处 */
+    --xh-_color-picker-h: var(--xh-control-h-md);
+    --xh-_color-picker-px: var(--xh-control-px-md);
+    --xh-_color-picker-gap: var(--xh-control-gap-md);
+    --xh-_color-picker-label-font-size: var(--xh-text-label-size);
+
+    /* 聚焦环恒用固定环色 */
+    --xh-_color-picker-ring: var(--xh-ring-focus);
+
     display: inline-flex;
     flex-direction: column;
-    gap: var(--xh-color-picker-gap, var(--xh-stack-gap-md));
+    gap: var(--xh-color-picker-gap, var(--xh-space-1));
   }
 
   [data-scope='color-picker'][data-part='label'] {
-    color: var(--xh-color-picker-label-fg, var(--xh-fg-muted));
-    font-size: var(--xh-color-picker-label-font-size, var(--xh-text-label-size));
+    color: var(--xh-color-picker-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-color-picker-label-font-size, var(--xh-_color-picker-label-font-size));
     font-weight: var(--xh-color-picker-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
   }
@@ -40,44 +61,74 @@
     color: var(--xh-fg-subtle);
   }
 
-  /* 画成一个框的是 trigger：里面的色块与值文本要看起来是一体的 */
-  [data-scope='color-picker'][data-part='trigger'] {
+  /* 盒：描边、底色、控件高度与行内内衬都落在这一层 */
+  [data-scope='color-picker'][data-part='control'] {
     display: inline-flex;
     align-items: center;
-    gap: var(--xh-color-picker-trigger-gap, var(--xh-control-gap-md));
-    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-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));
-    font-family: inherit;
-    font-size: var(--xh-color-picker-trigger-font-size, var(--xh-text-body-size));
-    line-height: var(--xh-leading-none);
+    gap: var(--xh-color-picker-control-gap, var(--xh-_color-picker-gap));
+    min-inline-size: var(--xh-color-picker-control-min-w, var(--xh-control-min-w));
+    block-size: var(--xh-color-picker-control-h, var(--xh-_color-picker-h));
+    padding-inline: var(--xh-color-picker-control-px, var(--xh-_color-picker-px));
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-control-border, var(--xh-border-control));
+    border-radius: var(--xh-color-picker-control-radius, var(--xh-shape-control));
+    background: var(--xh-color-picker-control-bg, var(--xh-bg-canvas));
+    color: var(--xh-color-picker-control-fg, var(--xh-fg-default));
     cursor: pointer;
     transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  [data-scope='color-picker'][data-part='trigger']:hover:not(:disabled) {
-    border-color: var(--xh-color-picker-trigger-border-hover, var(--xh-border-control-hover));
+  [data-scope='color-picker'][data-part='control'][hidden] {
+    display: none;
   }
 
-  [data-scope='color-picker'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  [data-scope='color-picker'][data-part='control']:hover:not([data-disabled]) {
+    border-color: var(--xh-color-picker-control-border-hover, var(--xh-border-control-hover));
+  }
+
+  /* Tab 停靠点是盒里的 trigger，环画在盒上 */
+  [data-scope='color-picker'][data-part='control']:focus-within:not([data-disabled]) {
+    border-color: var(--xh-color-picker-control-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
+    outline: var(--xh-ring-width) solid var(--xh-_color-picker-ring);
     outline-offset: var(--xh-ring-offset);
   }
 
-  /* 单体控件用原生 disabled（预设色板那些格子也是原生按钮，同一条规矩） */
-  [data-scope='color-picker'][data-part='trigger']:disabled {
-    background: var(--xh-color-picker-trigger-bg-disabled, var(--xh-bg-subtle));
+  [data-scope='color-picker'][data-part='control'][data-disabled] {
+    background: var(--xh-color-picker-control-bg-disabled, var(--xh-bg-subtle));
     color: var(--xh-fg-disabled);
     cursor: not-allowed;
   }
 
   /* 只读仍可聚焦、浮层照开，只是改不动：不置灰，只把底色压下去 */
-  [data-scope='color-picker'][data-part='trigger'][data-readonly] {
-    background: var(--xh-color-picker-trigger-bg-readonly, var(--xh-bg-subtle));
+  [data-scope='color-picker'][data-part='control'][data-readonly] {
+    background: var(--xh-color-picker-control-bg-readonly, var(--xh-bg-subtle));
+  }
+
+  /* 盒内那颗可聚焦的按钮：不画描边不铺底也不自带高度，只占满剩余宽度、排布色块与值文本 */
+  [data-scope='color-picker'][data-part='trigger'] {
+    display: inline-flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--xh-color-picker-trigger-gap, var(--xh-_color-picker-gap));
+    min-inline-size: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--xh-color-picker-trigger-fg, var(--xh-fg-default));
+    font-family: inherit;
+    font-size: var(--xh-color-picker-trigger-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-none);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  [data-scope='color-picker'][data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  /* 单体控件用原生 disabled（预设色板那些格子也是原生按钮，同一条规矩） */
+  [data-scope='color-picker'][data-part='trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
   }
 
   /* 当前颜色的色块。背景由连接层内联给（含透明度），这里只给形状与描边。
@@ -86,15 +137,17 @@
   [data-scope='color-picker'][data-part='swatch'] {
     display: inline-block;
     flex: none;
-    inline-size: var(--xh-color-picker-swatch-size, 1.125rem);
-    block-size: var(--xh-color-picker-swatch-size, 1.125rem);
+    inline-size: var(--xh-color-picker-swatch-size, 18px);
+    block-size: var(--xh-color-picker-swatch-size, 18px);
     border: var(--xh-stroke-thin) solid var(--xh-color-picker-swatch-border, var(--xh-border-default));
-    border-radius: var(--xh-color-picker-swatch-radius, var(--xh-radius-sm));
+    border-radius: var(--xh-color-picker-swatch-radius, var(--xh-shape-inset));
   }
 
+  /* 值串可能很长，必须能截断；框宽由盒定，这里得允许自己被压缩 */
   [data-scope='color-picker'][data-part='value-text'] {
     overflow: hidden;
-    flex: 1;
+    flex: 1 1 auto;
+    min-inline-size: 0;
     color: var(--xh-color-picker-value-fg, var(--xh-fg-default));
     font-size: var(--xh-color-picker-value-font-size, var(--xh-text-body-size));
     text-align: start;
@@ -104,8 +157,12 @@
 
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   [data-scope='color-picker'][data-part='positioner'] {
+    /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
+    --xh-_color-picker-available-h: 100vh;
+
     position: fixed;
-    z-index: var(--xh-layer-popover);
+    z-index: var(--xh-color-picker-layer, var(--xh-layer-popover));
     /* 空壳不吃指针，交互只发生在 content 上 */
     pointer-events: none;
   }
@@ -119,18 +176,27 @@
     display: flex;
     flex-direction: column;
     gap: var(--xh-color-picker-content-gap, var(--xh-space-3));
-    inline-size: var(--xh-color-picker-content-w, 15rem);
-    padding: var(--xh-color-picker-content-p, var(--xh-space-3));
+    inline-size: var(--xh-color-picker-content-w, var(--xh-overlay-min-w));
+    padding-block: var(--xh-color-picker-content-py, var(--xh-space-3));
+    padding-inline: var(--xh-color-picker-content-px, var(--xh-space-3));
+    max-block-size: min(var(--xh-color-picker-max-h, var(--xh-viewport-h-md)), var(--xh-_color-picker-available-h));
+    overflow-y: auto;
     border: var(--xh-stroke-thin) solid var(--xh-color-picker-content-border, var(--xh-border-default));
     border-radius: var(--xh-color-picker-content-radius, var(--xh-shape-surface));
     background: var(--xh-color-picker-content-bg, var(--xh-bg-surface));
     color: var(--xh-color-picker-content-fg, var(--xh-fg-default));
-    box-shadow: var(--xh-color-picker-content-shadow, var(--xh-elevation-2));
+    box-shadow: var(--xh-color-picker-content-shadow, var(--xh-elevation-floating));
     pointer-events: auto;
   }
 
   [data-scope='color-picker'][data-part='content'][data-state='open'] {
-    animation: xh-color-picker-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
+     免得动画结束到真收起之间闪一下原样 */
+  [data-scope='color-picker'][data-part='content'][data-state='closed'] {
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   /* 浮层本身只是个容器（tabindex=-1 是焦点域的兜底落点），落焦时不画环 */
@@ -147,7 +213,7 @@
     position: relative;
     display: block;
     block-size: var(--xh-color-picker-area-h, 9rem);
-    border-radius: var(--xh-color-picker-area-radius, var(--xh-radius-md));
+    border-radius: var(--xh-color-picker-area-radius, var(--xh-shape-control));
     cursor: crosshair;
   }
 
@@ -194,7 +260,7 @@
     border: var(--xh-stroke-thick) solid var(--xh-color-picker-thumb-border, var(--xh-color-neutral-0));
     border-radius: var(--xh-color-picker-thumb-radius, var(--xh-shape-pill));
     background: transparent;
-    box-shadow: var(--xh-color-picker-thumb-shadow, var(--xh-elevation-1));
+    box-shadow: var(--xh-color-picker-thumb-shadow, var(--xh-elevation-raised));
     cursor: grab;
     transition: scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
@@ -220,7 +286,7 @@
      放大用 scale 而不是改尺寸：变换绕自身中心发生，圆心不动，负外边距的算式不用跟着改 */
   [data-scope='color-picker'][data-part='area-thumb'][data-dragging],
   [data-scope='color-picker'][data-part='channel-slider-thumb'][data-dragging] {
-    scale: var(--xh-color-picker-thumb-scale-dragging, 1.15);
+    scale: var(--xh-color-picker-thumb-scale-dragging, var(--xh-motion-scale-drag));
     cursor: grabbing;
   }
 
@@ -312,12 +378,12 @@
     color: inherit;
     /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族，与周围文本对不上 */
     font-family: inherit;
-    font-size: var(--xh-color-picker-input-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-color-picker-input-font-size, var(--xh-text-secondary-size));
     text-align: center;
   }
 
   [data-scope='color-picker'][data-part='channel-input']:focus-visible {
-    border-color: var(--xh-color-picker-input-border-focus, var(--xh-ring-focus));
+    border-color: var(--xh-color-picker-input-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     /* 往内收一道发丝：输入框贴着面板边排，环画在外沿会压到相邻通道 */
     outline-offset: calc(-1 * var(--xh-stroke-thin));
@@ -325,7 +391,7 @@
 
   /* 打到一半的串：框里留着草稿，但值没动——描边提示"这串还没被收下" */
   [data-scope='color-picker'][data-part='channel-input'][data-invalid] {
-    border-color: var(--xh-color-picker-input-border-invalid, var(--xh-color-danger-500));
+    border-color: var(--xh-color-picker-input-border-invalid, var(--xh-border-invalid));
   }
 
   [data-scope='color-picker'][data-part='channel-input'][data-readonly] {
@@ -343,15 +409,15 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-color-picker-action-size, 1.75rem);
-    block-size: var(--xh-color-picker-action-size, 1.75rem);
+    inline-size: var(--xh-color-picker-action-size, var(--xh-control-action-size));
+    block-size: var(--xh-color-picker-action-size, var(--xh-control-action-size));
     padding: 0;
     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));
     font-family: inherit;
-    font-size: var(--xh-color-picker-action-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-color-picker-action-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-none);
     cursor: pointer;
     user-select: none;
@@ -391,7 +457,7 @@
     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-control));
-    border-radius: var(--xh-color-picker-swatch-radius, var(--xh-radius-sm));
+    border-radius: var(--xh-color-picker-swatch-radius, var(--xh-shape-inset));
     cursor: pointer;
   }