@xihan-ui/styles 3.1.0 → 4.0.0

package/css/cascader.css

@@ -75,6 +75,7 @@
     --xh-_cascader-h: var(--xh-control-h-md);
     --xh-_cascader-px: var(--xh-control-px-md);
     --xh-_cascader-row-py: var(--xh-list-option-py-md);
+    --xh-_cascader-row-h: var(--xh-list-option-h-md);
     --xh-_cascader-row-px: var(--xh-control-px-md);
     --xh-_cascader-gap: var(--xh-control-gap-md);
     --xh-_cascader-font-size: var(--xh-control-font-md);
@@ -108,6 +109,7 @@
     --xh-_cascader-h: var(--xh-control-h-sm);
     --xh-_cascader-px: var(--xh-control-px-sm);
     --xh-_cascader-row-py: var(--xh-list-option-py-sm);
+    --xh-_cascader-row-h: var(--xh-list-option-h-sm);
     --xh-_cascader-row-px: var(--xh-control-px-sm);
     --xh-_cascader-gap: var(--xh-control-gap-sm);
     --xh-_cascader-font-size: var(--xh-control-font-sm);
@@ -118,13 +120,16 @@
     --xh-_cascader-h: var(--xh-control-h-lg);
     --xh-_cascader-px: var(--xh-control-px-lg);
     --xh-_cascader-row-py: var(--xh-list-option-py-lg);
+    --xh-_cascader-row-h: var(--xh-list-option-h-lg);
     --xh-_cascader-row-px: var(--xh-control-px-lg);
     --xh-_cascader-gap: var(--xh-control-gap-lg);
     --xh-_cascader-font-size: var(--xh-control-font-lg);
   }
 
   [data-scope='cascader'][data-part='label'] {
-    color: var(--xh-cascader-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-cascader-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-cascader-label-gap, var(--xh-space-2)) - var(--xh-cascader-gap, var(--xh-space-1)));
+    color: var(--xh-cascader-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-cascader-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-cascader-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
@@ -132,7 +137,7 @@
 
   /* 整个控件禁用会把 data-disabled 一路打到 label / value-text / indicator 上，各处观感保持一致 */
   [data-scope='cascader'][data-part='label'][data-disabled] {
-    color: var(--xh-cascader-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-cascader-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 盒：描边、底色、圆角、控件高度、行内内衬、聚焦环、五态与悬停由 Field Chrome 家族画在这一层，
@@ -153,8 +158,6 @@
     --xh-field-border-hover: var(--xh-cascader-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-cascader-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-cascader-control-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-cascader-control-shadow, none);
     --xh-field-cursor-rest: pointer;
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
@@ -219,14 +222,14 @@
 
   /* 标签行露面时 value-text 让位：两者是触发器里的同一格，占位文字与标签不同屏。
      value-text 留在 DOM 里，trigger 的可及名仍从它取到完整的选中路径文本 */
-  [data-scope='cascader'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text'] {
+  [data-scope='cascader'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text']:where([data-scope='cascader']) {
     display: none;
   }
 
   /* 有值时清空钮顶上来，箭头让位：两个图标并排堆着，用户分不清点哪个。
      判据查的是盒里此刻真有一颗没收起的清空钮，不是「有没有值」——
      作者没摆清空钮时箭头照常留着，不然让了位没人接，指示符整个消失 */
-  [data-scope='cascader'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator'] {
+  [data-scope='cascader'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator']:where([data-scope='cascader']) {
     display: none;
   }
 
@@ -303,7 +306,7 @@
     align-items: stretch;
     /* 面板的下界：搜索视图与两个占位没有列托底，靠这一条不缩成一小块；可用区比它还窄时让位。
        可用宽写在定位层上、沿继承流下来 */
-    min-inline-size: min(var(--xh-cascader-content-min-w, var(--xh-overlay-menu-min-w)), var(--xh-_cascader-available-w));
+    min-inline-size: min(var(--xh-cascader-content-min-w, var(--xh-overlay-cascade-min-w)), var(--xh-_cascader-available-w));
     /* 列多起来时外框宽过可用区就收成可用宽度，溢出的列交给下面那条 overflow-x；
        缺省不封顶，作者要封顶写 --xh-cascader-content-max-w */
     max-inline-size: min(var(--xh-cascader-content-max-w, var(--xh-_cascader-available-w)), var(--xh-_cascader-available-w));
@@ -352,10 +355,10 @@
     flex-direction: column;
     gap: var(--xh-cascader-column-gap, var(--xh-list-option-gap));
     /* 每一列按条目的自然宽度，受菜单的下界托底；长选项撑到条目的上限为止，余下的在条目里截断 */
-    min-inline-size: var(--xh-cascader-column-min-w, var(--xh-overlay-menu-min-w));
+    min-inline-size: var(--xh-cascader-column-min-w, var(--xh-overlay-cascade-min-w));
     block-size: var(--xh-cascader-column-h, var(--xh-viewport-h-sm));
     padding-block: var(--xh-cascader-column-py, var(--xh-space-1));
-    padding-inline: var(--xh-cascader-column-px, var(--xh-space-1));
+    padding-inline: var(--xh-cascader-column-px, 0);
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
@@ -378,7 +381,7 @@
      用逻辑属性，rtl 下自动跑到另一侧。每列后面紧跟着它自己的竖条节点，相邻选择器接不到下一列，
      按「前面有过列」取后续的列 */
   [data-scope='cascader'][data-part='column'] ~ [data-scope='cascader'][data-part='column'] {
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-cascader-column-divider, var(--xh-material-solid-separator));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-cascader-column-divider, var(--xh-material-solid-border));
   }
 
   [data-scope='cascader'][data-part='column']:not([tabindex='0']):focus-visible {
@@ -407,9 +410,9 @@
     display: block;
     padding-block: var(--xh-cascader-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-cascader-group-label-px, var(--xh-_cascader-row-px));
-    color: var(--xh-cascader-group-label-fg, var(--xh-fg-muted));
+    color: var(--xh-cascader-group-label-fg, var(--xh-fg-subtle));
     font-size: var(--xh-cascader-group-label-font-size, var(--xh-text-caption-size));
-    font-weight: var(--xh-cascader-group-label-font-weight, var(--xh-font-weight-medium));
+    font-weight: var(--xh-cascader-group-label-font-weight, var(--xh-font-weight-regular));
     line-height: var(--xh-leading-none);
     user-select: none;
   }
@@ -428,10 +431,11 @@
      环只在真正的键盘焦点上接回，见下 */
   [data-scope='cascader'][data-part='item'] {
     --xh-collection-block-padding: var(--xh-cascader-item-py, var(--xh-_cascader-row-py));
+    --xh-collection-row-h: var(--xh-cascader-item-h, var(--xh-_cascader-row-h));
     --xh-collection-inline-padding: var(--xh-cascader-item-px, var(--xh-_cascader-row-px));
     --xh-collection-gap: var(--xh-cascader-item-gap, var(--xh-_cascader-gap));
     --xh-collection-font-size: var(--xh-cascader-item-font-size, var(--xh-_cascader-font-size));
-    --xh-collection-radius: var(--xh-cascader-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-cascader-item-radius, 0);
     --xh-collection-glyph-size: var(--xh-cascader-icon-size, var(--xh-_collection-glyph-size));
     --xh-collection-fg-rest: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
@@ -443,10 +447,10 @@
     --xh-collection-fg-selected-pressed: var(--xh-cascader-item-fg-selected, var(--xh-cascader-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-pressed: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-font-weight-open-path: var(--xh-cascader-item-active-font-weight, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-cascader-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-cascader-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-open-path: var(--xh-cascader-item-bg-active, var(--xh-bg-subtle));
@@ -503,29 +507,29 @@
   /* 一列开幕：条目自上而下逐条淡入。只在列头一次出现时播（浮层展开、此前收着的子列铺出来）；
      列此前就在、展开路径换到同列另一个父项时（悬停扫过），连接层给露面的条目标 data-instant，
      换内容不重播。backwards 让每条在自己那份延迟里保持起始帧 */
-  [data-scope='cascader'][data-part='column'] [data-part='item']:not([data-instant]) {
+  [data-scope='cascader'][data-part='column'] [data-part='item']:where([data-scope='cascader']):not([data-instant]) {
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) backwards;
   }
 
   /* 交错的间隔：第二条起逐级往后推，第六条起统一钉在第五级，条目再多也不会拖出一条越来越慢的尾巴。
      列里同时挂着别的父节点下的条目（收起态），计数把它们排掉，序号才对得上看得见的那几条 */
-  [data-scope='cascader'][data-part='column'] [data-part='item']:nth-child(2 of :not([hidden])) {
+  [data-scope='cascader'][data-part='column'] [data-part='item']:where([data-scope='cascader']):nth-child(2 of :not([hidden])) {
     animation-delay: var(--xh-motion-stagger-step);
   }
 
-  [data-scope='cascader'][data-part='column'] [data-part='item']:nth-child(3 of :not([hidden])) {
+  [data-scope='cascader'][data-part='column'] [data-part='item']:where([data-scope='cascader']):nth-child(3 of :not([hidden])) {
     animation-delay: calc(2 * var(--xh-motion-stagger-step));
   }
 
-  [data-scope='cascader'][data-part='column'] [data-part='item']:nth-child(4 of :not([hidden])) {
+  [data-scope='cascader'][data-part='column'] [data-part='item']:where([data-scope='cascader']):nth-child(4 of :not([hidden])) {
     animation-delay: calc(3 * var(--xh-motion-stagger-step));
   }
 
-  [data-scope='cascader'][data-part='column'] [data-part='item']:nth-child(5 of :not([hidden])) {
+  [data-scope='cascader'][data-part='column'] [data-part='item']:where([data-scope='cascader']):nth-child(5 of :not([hidden])) {
     animation-delay: calc(4 * var(--xh-motion-stagger-step));
   }
 
-  [data-scope='cascader'][data-part='column'] [data-part='item']:nth-child(n + 6 of :not([hidden])) {
+  [data-scope='cascader'][data-part='column'] [data-part='item']:where([data-scope='cascader']):nth-child(n + 6 of :not([hidden])) {
     animation-delay: calc(5 * var(--xh-motion-stagger-step));
   }
 
@@ -549,9 +553,10 @@
     inline-size: var(--xh-cascader-branch-arrow-size, var(--xh-control-indicator-size));
     block-size: var(--xh-cascader-branch-arrow-size, var(--xh-control-indicator-size));
     margin-inline-start: var(--xh-cascader-item-gap, var(--xh-_cascader-gap));
-    background-color: var(--xh-cascader-branch-arrow-fg, var(--xh-fg-subtle));
-    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    /* 盒与标记盒同为 16px，字形只画四分之三（12px），比行里的文字轻一档 */
+    background-color: var(--xh-cascader-branch-arrow-fg, var(--xh-fg-muted));
+    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / 75% no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / 75% no-repeat;
   }
 
   [data-scope='cascader'][data-part='item'][data-branch][data-disabled]::after {
@@ -651,7 +656,7 @@
     padding-block: 0;
     padding-inline: var(--xh-cascader-input-px, var(--xh-_cascader-px));
     border: none;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-cascader-search-divider, var(--xh-material-solid-separator));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-cascader-search-divider, var(--xh-material-solid-border));
     border-start-start-radius: inherit;
     border-start-end-radius: inherit;
     background: none;
@@ -710,7 +715,7 @@
   }
 
   /* 搜索视图里列整体让位 */
-  [data-scope='cascader'][data-part='content'][data-searching] [data-part='column'] {
+  [data-scope='cascader'][data-part='content'][data-searching] [data-part='column']:where([data-scope='cascader']) {
     display: none;
   }
 
@@ -719,10 +724,11 @@
      末端为同一枚皮肤对号预留固定轨 */
   [data-scope='cascader'][data-part='search-item'] {
     --xh-collection-block-padding: var(--xh-cascader-item-py, var(--xh-_cascader-row-py));
+    --xh-collection-row-h: var(--xh-cascader-item-h, var(--xh-_cascader-row-h));
     --xh-collection-inline-padding: var(--xh-cascader-item-px, var(--xh-_cascader-row-px));
     --xh-collection-gap: var(--xh-cascader-item-gap, var(--xh-_cascader-gap));
     --xh-collection-font-size: var(--xh-cascader-item-font-size, var(--xh-_cascader-font-size));
-    --xh-collection-radius: var(--xh-cascader-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-cascader-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
@@ -731,10 +737,10 @@
     --xh-collection-fg-selected-hover: var(--xh-cascader-item-fg-selected, var(--xh-cascader-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-pressed: var(--xh-cascader-item-fg-selected, var(--xh-cascader-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-pressed: var(--xh-cascader-item-fg, var(--xh-material-frosted-fg));
-    --xh-collection-font-weight-selected: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-cascader-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-cascader-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-cascader-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-selected-highlight: var(--xh-cascader-item-bg-hover, var(--xh-bg-subtle));
@@ -809,7 +815,7 @@
 
   /* —— 空态：当前视图没有条目时由 empty 部件出面，文案由适配器或作者供给，皮肤只管排版 —— */
   /* 根列没有条目时那条空列让位，占位面接管整个浮层 */
-  [data-scope='cascader'][data-part='content'][data-empty] [data-part='column'] {
+  [data-scope='cascader'][data-part='content'][data-empty] [data-part='column']:where([data-scope='cascader']) {
     display: none;
   }
 
@@ -818,8 +824,10 @@
     flex: 1 1 100%;
     align-items: center;
     justify-content: center;
+    /* 空态与在途占位撑到一列的高度，居中落在面板里，不缩成一条窄条 */
+    min-block-size: var(--xh-cascader-empty-min-h, var(--xh-viewport-h-sm));
     padding: var(--xh-cascader-empty-p, var(--xh-space-3));
-    color: var(--xh-cascader-empty-fg, var(--xh-fg-muted));
+    color: var(--xh-cascader-empty-fg, var(--xh-fg-subtle));
     font-size: var(--xh-cascader-item-font-size, var(--xh-_cascader-font-size));
   }
 
@@ -829,13 +837,17 @@
 
   /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
   [data-scope='cascader'][data-part='loading'] {
+    /* 加载环取品牌色，文案仍是弱一档的前景 */
+    --xh-_loading-ring-fg: var(--xh-cascader-loading-ring-fg, var(--xh-fg-brand));
+
     display: flex;
     flex: 0 0 100%;
     align-items: center;
     justify-content: center;
     gap: var(--xh-_cascader-gap);
+    min-block-size: var(--xh-cascader-loading-min-h, var(--xh-viewport-h-sm));
     padding: var(--xh-cascader-loading-p, var(--xh-space-3));
-    color: var(--xh-cascader-loading-fg, var(--xh-fg-muted));
+    color: var(--xh-cascader-loading-fg, var(--xh-fg-subtle));
     font-size: var(--xh-cascader-loading-font-size, var(--xh-_cascader-font-size));
   }
 
@@ -892,10 +904,10 @@
     align-items: center;
     gap: var(--xh-cascader-footer-gap, var(--xh-space-2));
     padding-block: var(--xh-cascader-footer-py, var(--xh-space-2));
-    padding-inline: var(--xh-cascader-footer-px, var(--xh-space-2));
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-cascader-footer-border, var(--xh-border-subtle));
+    padding-inline: var(--xh-cascader-footer-px, var(--xh-_cascader-row-px));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-cascader-footer-border, var(--xh-material-solid-border));
     color: var(--xh-cascader-footer-fg, var(--xh-fg-muted));
-    font-size: var(--xh-cascader-footer-font-size, var(--xh-text-secondary-size));
+    font-size: var(--xh-cascader-footer-font-size, var(--xh-_cascader-font-size));
   }
 
   /* 上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */

package/css/checkbox-group.css

@@ -32,7 +32,7 @@
        没写 data-tone 时退回品牌色 */
     --xh-_checkbox-group-accent: var(--xh-_tone-border-control, var(--xh-bg-brand));
     --xh-_checkbox-group-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
-    /* 方框是字段家族的控制盒（字段静息形态）：透明底 + --xh-border-control 描边 + 无影，不消费海拔与顶光 */
+    /* 方框是控件盒：透明底 + --xh-border-strong 描边（与 Checkbox 同一重量）+ 无影，不消费海拔与顶光 */
     --xh-_checkbox-group-bg: var(--xh-checkbox-group-indicator-bg, transparent);
     /* 条目与全选格是方框的承载面：行自己坐画布走 100 → 200，行面上的方框按淡底容器阶梯再上一档（200 → 300）。
        两支私有槽是这一档的唯一来源——宿主拿它们给 --xh-action-host-bg-* 赋值（桥接槽只写不读），
@@ -125,13 +125,17 @@
     --xh-action-host-bg-pressed: var(--xh-_checkbox-group-host-bg-pressed);
 
     position: relative;
-    /* row 档铺满容器（inline-size: 100%）会把竖排的命中区拉到整行空白处、横排 wrap 也塌：
-       沿用「条目按内容收宽」的既有决定 */
-    inline-size: auto;
     /* ghost 的 1px 透明边位会把方框列相对组标题错开 1px：边归零，几何保持不变 */
     border-width: 0;
   }
 
+  /* 条目与全选格按内容收宽，盖掉 row 档的 inline-size: 100%（竖排时命中区拉到整行空白处，横排时每格独占一行）。
+     从根往下写，特指度高过 row 档，有层与无层两份产物里都生效 */
+  [data-scope='checkbox-group'][data-part='root'] [data-scope='checkbox-group'][data-part='item'],
+  [data-scope='checkbox-group'][data-part='root'] [data-scope='checkbox-group'][data-part='select-all-trigger'] {
+    inline-size: auto;
+  }
+
   /* 只读整组都改不动，但不是禁用：颜色照常，把整行的悬停 / 按下面与"可点"这个暗示一起收回来。
      家族的 :hover / 按压块不排 readonly，只能从槽上收回；排掉禁用项是因为这条选择器权重高过家族的禁用块，
      不排就会把 not-allowed 覆盖回 default */
@@ -156,7 +160,7 @@
     justify-content: center;
     inline-size: var(--xh-checkbox-group-indicator-size, var(--xh-_checkbox-group-box));
     block-size: var(--xh-checkbox-group-indicator-size, var(--xh-_checkbox-group-box));
-    border: var(--xh-stroke-thin) solid var(--xh-checkbox-group-indicator-border, var(--xh-border-control));
+    border: var(--xh-stroke-thin) solid var(--xh-checkbox-group-indicator-border, var(--xh-border-strong));
     border-radius: var(--xh-checkbox-group-indicator-radius, var(--xh-shape-inset));
     background-color: var(--xh-_checkbox-group-bg);
     color: var(--xh-checkbox-group-indicator-fg, var(--xh-_checkbox-group-on-accent));
@@ -301,7 +305,6 @@
     --xh-check-mark-fg: var(--xh-checkbox-group-indicator-fg, var(--xh-_checkbox-group-on-accent));
 
     position: relative;
-    inline-size: auto;
     border-width: 0;
     font-weight: var(--xh-checkbox-group-select-all-trigger-font-weight, var(--xh-font-weight-medium));
   }

package/css/checkbox.css

@@ -28,14 +28,15 @@
     /* 实心底上的勾与横杠，同样没写 data-tone 时退回原来的品牌底前景色 */
     --xh-_checkbox-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
 
-    /* 方框接 Action Control icon 档（定尺方框）：盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
-       焦点环由家族配方给，这里只把使用者槽映射到桥接槽。面按字段静息形态取值：透明底 +
-       --xh-border-control 描边 + 无影，不消费海拔与顶光；悬停只把描边升一档，底不动；按下换到 200 档中性面
+    /* 方框接 Action Control icon 档（定尺方框）：盒型、悬停 / 按下 / 禁用面、按压与换底、粗指针热区、
+       焦点环由家族配方给，这里只把使用者槽映射到桥接槽。面取控件盒的静息形态：透明底 +
+       --xh-border-strong 描边（比字段边重一档，小方框要一眼认得出）+ 无影，不消费海拔与顶光；
+       悬停只把描边升一档，底不动；按下换到 200 档中性面
        （白底承载）；边长随 --xh-control-indicator-* 走，不取家族的 profile 尺寸。
        常态 / 勾中 / 校验失败 / 只读只换下面四支私有槽，桥接槽的映射写一次 */
     --xh-_checkbox-bg: var(--xh-checkbox-bg, transparent);
     --xh-_checkbox-bg-pressed: var(--xh-checkbox-bg-pressed, var(--xh-bg-subtle-hover));
-    --xh-_checkbox-border: var(--xh-checkbox-border, var(--xh-border-control));
+    --xh-_checkbox-border: var(--xh-checkbox-border, var(--xh-border-strong));
     --xh-_checkbox-border-hover: var(--xh-checkbox-border-hover, var(--xh-border-control-hover));
 
     --xh-action-visual-size: var(--xh-_checkbox-box);

package/css/citation.css

@@ -274,7 +274,7 @@
     overflow: hidden;
     color: var(--xh-citation-title-fg, var(--xh-fg-default));
     font-size: var(--xh-citation-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-citation-title-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-citation-title-font-weight, var(--xh-font-weight-medium));
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -355,12 +355,17 @@
     --xh-action-radius: var(--xh-citation-source-radius, var(--xh-shape-control));
     --xh-action-fg-rest: var(--xh-citation-source-fg, var(--xh-fg-default));
 
-    display: grid;
     grid-template-columns: auto minmax(0, 1fr);
     align-items: start;
     text-align: start;
   }
 
+  /* 排成「序号 | 标题 / 来源」两列，盖掉 row 档的 display: flex。选择器点名 row 档，
+     有层与无层两份产物里都压得住它；收起的来源行留给 [hidden] 那条 */
+  [data-scope='citation'][data-part='source-link'][data-xh-action-profile='row']:not([hidden]) {
+    display: grid;
+  }
+
   [data-scope='citation'][data-part='source-link'][data-current] {
     --xh-action-bg-rest: var(--xh-bg-brand-subtle);
     --xh-action-bg-hover: var(--xh-bg-brand-subtle);
@@ -388,7 +393,7 @@
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  [data-scope='citation'][data-part='source'][data-state='active'] [data-part='source-index'] {
+  [data-scope='citation'][data-part='source'][data-state='active'] [data-part='source-index']:where([data-scope='citation']) {
     background: var(--xh-citation-index-active-bg, var(--xh-bg-brand));
     color: var(--xh-citation-index-active-fg, var(--xh-fg-on-brand));
   }
@@ -416,7 +421,7 @@
   }
 
   @media (forced-colors: active) {
-    [data-scope='citation'][data-part='source'][data-state='active'] [data-part='source-index'] {
+    [data-scope='citation'][data-part='source'][data-state='active'] [data-part='source-index']:where([data-scope='citation']) {
       background: Highlight;
       color: HighlightText;
     }

package/css/clipboard.css

@@ -72,8 +72,11 @@
     display: none;
   }
 
+  /* 带输入框的用法是一件单行字段，标签与其余字段同一副字段标签排版：次要文字色、标签字号字重。
+     竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-clipboard-label-gap 给多少最终就是多少 */
   [data-scope='clipboard'][data-part='label'] {
-    color: var(--xh-clipboard-label-fg, var(--xh-fg-default));
+    margin-block-end: calc(var(--xh-clipboard-label-gap, var(--xh-space-2)) - var(--xh-clipboard-gap, var(--xh-space-1)));
+    color: var(--xh-clipboard-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-clipboard-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-clipboard-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
@@ -121,9 +124,14 @@
     border-end-end-radius: 0;
   }
 
-  /* 焦点边一律 --xh-border-control-focus，不随 tone */
-  [data-scope='clipboard'][data-part='input']:focus-visible {
+  /* 照只读字段外壳标出焦点：换承载面底 + 品牌描边（不随 tone），不画环；点进去选字也算聚焦 */
+  [data-scope='clipboard'][data-part='input']:focus-within {
     border-color: var(--xh-clipboard-input-border-focus, var(--xh-border-control-focus));
+    background: var(--xh-clipboard-input-bg-focus, var(--xh-bg-surface));
+  }
+
+  [data-scope='clipboard'][data-part='input']:focus-visible {
+    outline: none;
   }
 
   /* 自动填充：引擎给填过的框强加一套系统色（多数是黄底黑字），盖得过 background 与 color，
@@ -203,7 +211,7 @@
     );
   }
 
-  [data-scope='clipboard'][data-part='control'] > [data-scope='clipboard'][data-part='input']:focus-visible,
+  [data-scope='clipboard'][data-part='control'] > [data-scope='clipboard'][data-part='input']:focus-within,
   [data-scope='clipboard'][data-part='control'] > [data-scope='clipboard'][data-part='copy-trigger']:focus-visible,
   [data-scope='clipboard'][data-part='control'] > [data-scope='clipboard'][data-part='copy-trigger']:hover {
     position: relative;
@@ -312,4 +320,12 @@
     clip-path: inset(50%);
     white-space: nowrap;
   }
+
+  /* 只读框聚焦不画环、描边又被换成系统色，补一圈 Highlight 环 */
+  @media (forced-colors: active) {
+    [data-scope='clipboard'][data-part='input']:focus {
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
+  }
 }

package/css/code-view.css

@@ -91,7 +91,7 @@
   }
 
   /* 折叠时 <pre> 的高度被连接层写死，超出部分沿圆角收边 */
-  [data-scope='code-view'][data-part='root'][data-clamped] [data-part='pre'] {
+  [data-scope='code-view'][data-part='root'][data-clamped] [data-part='pre']:where([data-scope='code-view']) {
     overflow-y: hidden;
   }
 
@@ -163,13 +163,13 @@
 
   /* 开了换行：pre-wrap 仍保留缩进与连续空白，只是允许行尾折下来；
      anywhere 让没有空格的长串（url、base64）也能断，否则照样撑出横向滚动 */
-  [data-scope='code-view'][data-part='code'][data-wrap] [data-part='line-content'] {
+  [data-scope='code-view'][data-part='code'][data-wrap] [data-part='line-content']:where([data-scope='code-view']) {
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
 
   /* 没开行号时正文自带左内衬；开了行号则由行号槽的内衬顶开 */
-  [data-scope='code-view'][data-part='root']:not([data-line-numbers]) [data-part='line-content'] {
+  [data-scope='code-view'][data-part='root']:not([data-line-numbers]) [data-part='line-content']:where([data-scope='code-view']) {
     padding-inline-start: var(--xh-code-view-px, var(--xh-space-3));
   }
 
@@ -233,12 +233,12 @@
     --xh-_code-view-fold-col: var(--xh-code-view-fold-col, var(--xh-code-view-line-height, var(--xh-text-code-leading)));
   }
 
-  [data-scope='code-view'][data-part='root'][data-block-folding] [data-part='line-content'] {
+  [data-scope='code-view'][data-part='root'][data-block-folding] [data-part='line-content']:where([data-scope='code-view']) {
     position: relative;
     padding-inline-start: var(--xh-_code-view-fold-col);
   }
 
-  [data-scope='code-view'][data-part='root'][data-block-folding]:not([data-line-numbers]) [data-part='line-content'] {
+  [data-scope='code-view'][data-part='root'][data-block-folding]:not([data-line-numbers]) [data-part='line-content']:where([data-scope='code-view']) {
     padding-inline-start: calc(var(--xh-code-view-px, var(--xh-space-3)) + var(--xh-_code-view-fold-col));
   }
 
@@ -258,7 +258,7 @@
     block-size: var(--xh-_code-view-fold-col);
   }
 
-  [data-scope='code-view'][data-part='root'][data-block-folding]:not([data-line-numbers]) [data-part='line-fold-trigger'] {
+  [data-scope='code-view'][data-part='root'][data-block-folding]:not([data-line-numbers]) [data-part='line-fold-trigger']:where([data-scope='code-view']) {
     inset-inline-start: var(--xh-code-view-px, var(--xh-space-3));
   }
 

package/css/collapsible.css

@@ -22,9 +22,14 @@
     /* 作者塞进正文里的图标与皮肤画的兜底字形同一把尺：md 档，触发器上另按家族档取值 */
     --xh-icon-size: var(--xh-collapsible-icon-size, var(--xh-glyph-size-md));
 
+    /* 触发器比家族 disclosure-trigger 档收一截：md 上下 10px + 一行正文行高 21px = 41px 高，横向 12px；
+       正文与触发器同一条起点，上下各留 8px */
     --xh-_collapsible-trigger-gap: var(--xh-control-gap-md);
-    --xh-_collapsible-content-px: var(--xh-space-4);
-    --xh-_collapsible-content-pb: var(--xh-space-4);
+    --xh-_collapsible-trigger-py: var(--xh-space-2_5);
+    --xh-_collapsible-trigger-px: var(--xh-space-3);
+    --xh-_collapsible-content-px: var(--xh-space-3);
+    --xh-_collapsible-content-pt: var(--xh-space-2);
+    --xh-_collapsible-content-pb: var(--xh-space-2);
 
     /* 语气落在展开着的触发器上，指示器写在触发器里、跟着继承这个色，不另立规则。
        没写 data-tone 时 --xh-_tone-fg 没被声明，退回原来的前景色。
@@ -48,14 +53,20 @@
   /* 缺省档写在上面那条里 */
   [data-scope='collapsible'][data-part='root'][data-size='sm'] {
     --xh-_collapsible-trigger-gap: var(--xh-control-gap-sm);
-    --xh-_collapsible-content-px: var(--xh-space-3);
-    --xh-_collapsible-content-pb: var(--xh-space-3);
+    --xh-_collapsible-trigger-py: var(--xh-space-1_5);
+    --xh-_collapsible-trigger-px: var(--xh-space-2_5);
+    --xh-_collapsible-content-px: var(--xh-space-2_5);
+    --xh-_collapsible-content-pt: var(--xh-space-1_5);
+    --xh-_collapsible-content-pb: var(--xh-space-1_5);
   }
 
   [data-scope='collapsible'][data-part='root'][data-size='lg'] {
     --xh-_collapsible-trigger-gap: var(--xh-control-gap-lg);
-    --xh-_collapsible-content-px: var(--xh-space-5);
-    --xh-_collapsible-content-pb: var(--xh-space-5);
+    --xh-_collapsible-trigger-py: var(--xh-space-3);
+    --xh-_collapsible-trigger-px: var(--xh-space-4);
+    --xh-_collapsible-content-px: var(--xh-space-4);
+    --xh-_collapsible-content-pt: var(--xh-space-3);
+    --xh-_collapsible-content-pb: var(--xh-space-3);
   }
 
   /* 触发器铺满一行，盒型、三档几何、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给
@@ -65,8 +76,8 @@
   [data-scope='collapsible'][data-part='trigger'] {
     --xh-action-gap: var(--xh-collapsible-trigger-gap, var(--xh-_action-profile-gap));
     --xh-action-visual-size: var(--xh-collapsible-trigger-h, var(--xh-_action-profile-visual-size));
-    --xh-action-padding-block: var(--xh-collapsible-trigger-py, var(--xh-_action-profile-padding-block));
-    --xh-action-padding-inline: var(--xh-collapsible-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-padding-block: var(--xh-collapsible-trigger-py, var(--xh-_collapsible-trigger-py));
+    --xh-action-padding-inline: var(--xh-collapsible-trigger-px, var(--xh-_collapsible-trigger-px));
     --xh-action-radius: var(--xh-collapsible-trigger-radius, var(--xh-_action-profile-radius));
     --xh-action-bg-rest: var(--xh-collapsible-trigger-bg, var(--xh-_action-variant-bg-rest));
     --xh-action-bg-hover: var(--xh-collapsible-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
@@ -74,10 +85,11 @@
     --xh-action-fg-hover: var(--xh-collapsible-trigger-fg, var(--xh-_action-variant-fg-hover));
     --xh-action-fg-pressed: var(--xh-collapsible-trigger-fg, var(--xh-_action-variant-fg-pressed));
     --xh-action-font-size: var(--xh-collapsible-trigger-font-size, var(--xh-_action-profile-font-size));
-    --xh-icon-size: var(--xh-collapsible-icon-size, var(--xh-_action-profile-glyph-size));
+    --xh-icon-size: var(--xh-collapsible-icon-size, var(--xh-glyph-size-sm));
 
     border-width: 0;
     font-weight: var(--xh-collapsible-trigger-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-normal);
   }
 
   /* 展开着的那一档单开一个槽：与常态共用一个的话，作者一改常态字色就把展开态也改掉了。
@@ -86,6 +98,8 @@
     --xh-action-fg-rest: var(--xh-collapsible-trigger-fg-open, var(--xh-_collapsible-open-fg));
     --xh-action-fg-hover: var(--xh-collapsible-trigger-fg-open, var(--xh-_collapsible-open-fg));
     --xh-action-fg-pressed: var(--xh-collapsible-trigger-fg-open, var(--xh-_collapsible-open-fg));
+
+    font-weight: var(--xh-collapsible-trigger-font-weight-open, var(--xh-font-weight-medium));
   }
 
   /* 禁用前景换成禁用色，不靠 opacity 压暗（家族按 data-disabled 给禁用面与指针，字色槽在这里保留优先） */
@@ -99,7 +113,7 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    color: var(--xh-collapsible-indicator-fg, var(--xh-fg-muted));
+    color: var(--xh-collapsible-indicator-fg, var(--xh-fg-subtle));
     line-height: var(--xh-leading-none);
   }
 
@@ -132,17 +146,18 @@
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }：补了动画一帧都播不出来。
      收起由适配器在退场结束后写内联 display 落成，退场窗口内靠 connect 发的 inert 挡住焦点 */
   [data-scope='collapsible'][data-part='content'] {
-    /* 行高与内缩同帧动的共享关键帧读这条槽：只有末端有内缩，起端不写、按 0 动 */
+    /* 行高与内缩同帧动的共享关键帧读这两条槽，两端内缩一起收放 */
+    --xh-_disclosure-pt: var(--xh-collapsible-content-pt, var(--xh-_collapsible-content-pt));
     --xh-_disclosure-pb: var(--xh-collapsible-content-pb, var(--xh-_collapsible-content-pb));
 
     display: grid;
     grid-template-rows: 1fr;
     overflow: clip;
-    padding-block-start: 0;
+    padding-block-start: var(--xh-collapsible-content-pt, var(--xh-_collapsible-content-pt));
     padding-block-end: var(--xh-collapsible-content-pb, var(--xh-_collapsible-content-pb));
     padding-inline: var(--xh-collapsible-content-px, var(--xh-_collapsible-content-px));
-    color: var(--xh-collapsible-content-fg, var(--xh-fg-muted));
-    font-size: var(--xh-collapsible-content-font-size, var(--xh-text-secondary-size));
+    color: var(--xh-collapsible-content-fg, var(--xh-fg-default));
+    font-size: var(--xh-collapsible-content-font-size, var(--xh-text-body-size));
     line-height: var(--xh-leading-normal);
   }
 

package/css/color-field.css

@@ -57,13 +57,15 @@
   }
 
   [data-scope='color-field'][data-part='label'] {
-    color: var(--xh-color-field-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-color-field-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-color-field-label-gap, var(--xh-space-2)) - var(--xh-color-field-gap, var(--xh-space-1)));
+    color: var(--xh-color-field-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-color-field-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-color-field-label-font-weight, var(--xh-text-label-weight));
   }
 
   [data-scope='color-field'][data-part='label'][data-disabled] {
-    color: var(--xh-color-field-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-color-field-label-fg-disabled, var(--xh-fg-muted));
   }
 
   [data-scope='color-field'][data-part='control'] {
@@ -81,8 +83,6 @@
     --xh-field-border-hover: var(--xh-color-field-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-color-field-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-color-field-control-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-color-field-control-shadow, none);
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
     --xh-field-glyph-size: var(--xh-color-field-icon-size, var(--xh-_field-size-glyph-size));