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

package/css/empty-state.css

@@ -8,7 +8,7 @@
     /* 三个尺寸档只换这几个私有槽，图标与标题都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_empty-state-gap: var(--xh-stack-gap-md);
-    --xh-_empty-state-py: var(--xh-section-py);
+    --xh-_empty-state-py: var(--xh-section-py-md);
     --xh-_empty-state-icon-size: var(--xh-glyph-size-2xl);
     --xh-_empty-state-title-size: var(--xh-control-font-lg);
     /* 说明的读行宽度：整句话不收窄就会拉成一条难读的长行 */
@@ -31,15 +31,15 @@
   }
 
   [data-scope='empty-state'][data-part='root'][data-size='sm'] {
-    --xh-_empty-state-gap: var(--xh-space-2);
-    --xh-_empty-state-py: var(--xh-space-4);
+    --xh-_empty-state-gap: var(--xh-stack-gap-sm);
+    --xh-_empty-state-py: var(--xh-section-py-sm);
     --xh-_empty-state-icon-size: var(--xh-glyph-size-xl);
     --xh-_empty-state-title-size: var(--xh-control-font-md);
   }
 
   [data-scope='empty-state'][data-part='root'][data-size='lg'] {
-    --xh-_empty-state-gap: var(--xh-space-6);
-    --xh-_empty-state-py: var(--xh-space-8);
+    --xh-_empty-state-gap: var(--xh-stack-gap-lg);
+    --xh-_empty-state-py: var(--xh-section-py-lg);
     --xh-_empty-state-icon-size: var(--xh-glyph-size-3xl);
     --xh-_empty-state-title-size: var(--xh-text-heading-3-size);
   }
@@ -49,11 +49,14 @@
     align-items: center;
     justify-content: center;
     flex: none;
+    /* 作者塞进图标槽的 XhIcon 与皮肤画的字形同一把尺，都按展示档的图标框量 */
+    --xh-icon-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
+
     block-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
     inline-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
     color: var(--xh-empty-state-icon-fg, var(--xh-fg-subtle));
     /* 图标常是一个字形，字号跟着图标框走，line-height 不再另占高度 */
-    font-size: var(--xh-empty-state-icon-font-size, var(--xh-text-heading-1-size));
+    font-size: var(--xh-empty-state-icon-font-size, var(--xh-_empty-state-icon-size));
     line-height: var(--xh-leading-none);
   }
 
@@ -80,4 +83,11 @@
     justify-content: center;
     gap: var(--xh-empty-state-action-gap, var(--xh-space-2));
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='empty-state'][data-part='icon'][hidden],
+  [data-scope='empty-state'][data-part='action'][hidden] {
+    display: none;
+  }
 }

package/css/field.css

@@ -101,4 +101,11 @@
     font-size: var(--xh-field-error-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-normal);
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='field'][data-part='root'][hidden],
+  [data-scope='form'][data-part='root'][hidden] {
+    display: none;
+  }
 }

package/css/file-upload.css

@@ -193,7 +193,7 @@
      只挑图标色不换底色：底色一换，一列文件里图片那几行会跳出来抢戏。
      取语义 token 而不是品牌色阶原值，深色主题才跟着走 */
   [data-scope='file-upload'][data-part='item-preview'][data-file-type^='image/'] {
-    color: var(--xh-file-upload-preview-fg-image, var(--xh-bg-brand));
+    color: var(--xh-file-upload-preview-fg-image, var(--xh-fg-brand));
   }
 
   /* 塞进来的真缩略图撑满这个方框，长宽比不对就裁掉，不许把格子顶变形 */

package/css/flex.css

@@ -17,11 +17,11 @@
   }
 
   /* —— 方向 —— */
-  [data-scope='flex'][data-part='root'][data-direction='row'] {
+  [data-scope='flex'][data-part='root'][data-orientation='horizontal'] {
     flex-direction: row;
   }
 
-  [data-scope='flex'][data-part='root'][data-direction='column'] {
+  [data-scope='flex'][data-part='root'][data-orientation='vertical'] {
     flex-direction: column;
   }
 
@@ -79,22 +79,28 @@
   /* —— 间距档位 —— */
   /* 每一档指向一个间距令牌，折行时行与行之间也吃这份间距 */
   [data-scope='flex'][data-part='root'][data-gap='xs'] {
-    gap: var(--xh-flex-gap, var(--xh-space-1));
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-xs));
   }
 
   [data-scope='flex'][data-part='root'][data-gap='sm'] {
-    gap: var(--xh-flex-gap, var(--xh-space-2));
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-sm));
   }
 
   [data-scope='flex'][data-part='root'][data-gap='md'] {
-    gap: var(--xh-flex-gap, var(--xh-space-3));
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-md));
   }
 
   [data-scope='flex'][data-part='root'][data-gap='lg'] {
-    gap: var(--xh-flex-gap, var(--xh-space-4));
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-lg));
   }
 
   [data-scope='flex'][data-part='root'][data-gap='xl'] {
-    gap: var(--xh-flex-gap, var(--xh-space-6));
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='flex'][data-part='root'][hidden] {
+    display: none;
   }
 }

package/css/float-button.css

@@ -138,4 +138,11 @@
     -webkit-mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
     mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='float-button'][data-part='root'][hidden],
+  [data-scope='float-button'][data-part='trigger'][hidden] {
+    display: none;
+  }
 }

package/css/floating-panel.css

@@ -17,6 +17,12 @@
     display: contents;
   }
 
+  /* 浮层被搬到 portal 落点，继承不到 root 上的槽：这把尺在被搬走的那一侧再声明一次，
+     关闭钮与条目里作者塞的图标才和皮肤画的兜底字形一样大 */
+  [data-scope='floating-panel'][data-part='content'] {
+    --xh-icon-size: var(--xh-floating-panel-icon-size, var(--xh-glyph-size-text));
+  }
+
   [data-scope='floating-panel'][data-part='root'][hidden] {
     display: none;
   }

package/css/grid.css

@@ -269,23 +269,23 @@
   /* —— 间距档位 —— */
   /* 每一档指向一个间距令牌，行与行之间也吃这同一份间距 */
   [data-scope='grid'][data-part='root'][data-gap='xs'] {
-    gap: var(--xh-grid-gap, var(--xh-space-1));
+    gap: var(--xh-grid-gap, var(--xh-layout-gap-xs));
   }
 
   [data-scope='grid'][data-part='root'][data-gap='sm'] {
-    gap: var(--xh-grid-gap, var(--xh-space-2));
+    gap: var(--xh-grid-gap, var(--xh-layout-gap-sm));
   }
 
   [data-scope='grid'][data-part='root'][data-gap='md'] {
-    gap: var(--xh-grid-gap, var(--xh-space-3));
+    gap: var(--xh-grid-gap, var(--xh-layout-gap-md));
   }
 
   [data-scope='grid'][data-part='root'][data-gap='lg'] {
-    gap: var(--xh-grid-gap, var(--xh-space-4));
+    gap: var(--xh-grid-gap, var(--xh-layout-gap-lg));
   }
 
   [data-scope='grid'][data-part='root'][data-gap='xl'] {
-    gap: var(--xh-grid-gap, var(--xh-space-6));
+    gap: var(--xh-grid-gap, var(--xh-layout-gap-xl));
   }
 
   /* —— 块向对齐 —— */
@@ -430,4 +430,10 @@
   [data-scope='grid'][data-part='item'][data-offset='11'] {
     --xh-_grid-start: 12;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='grid'][data-part='root'][hidden] {
+    display: none;
+  }
 }

package/css/heatmap.css

@@ -121,10 +121,11 @@
     gap: var(--xh-heatmap-grid-gap, var(--xh-_heatmap-gap));
   }
 
-  /* 网格自己只在没有格子可落焦点时才占 Tab 位，那几帧里也该看得出焦点在哪 */
+  /* 网格自己只在没有格子可落焦点时才占 Tab 位，那几帧里也该看得出焦点在哪。
+     环往内收：网格铺满 root，root 那层 overflow-x: auto 会把画在外沿的环裁掉 */
   [data-scope='heatmap'][data-part='grid']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+    outline-offset: calc(-1 * var(--xh-ring-width));
   }
 
   [data-scope='heatmap'][data-part='row'] {

package/css/highlight.css

@@ -13,7 +13,7 @@
   /* 浏览器给 mark 的默认底色是一个固定的亮黄，暗色主题下压在深底上刺眼、
      配的黑字也不随主题走；这里整份换成随主题走的品牌淡底 */
   [data-scope='highlight'][data-part='mark'] {
-    padding-inline: var(--xh-space-0_5);
+    padding-inline: var(--xh-highlight-mark-px, var(--xh-space-0_5));
     border-radius: var(--xh-highlight-radius, var(--xh-shape-inset));
     background: var(--xh-highlight-bg, var(--xh-bg-brand-subtle));
     color: var(--xh-highlight-fg, var(--xh-fg-brand-strong));

package/css/hotkeys.css

@@ -7,7 +7,7 @@
   /* 一排键帽连着连接符。整块不换行：一组组合被折成两行就读不出是一组了 */
   [data-scope='hotkeys'][data-part='root'] {
     /* 尺寸档只换这两个私有槽，键帽从 root 继承它们，换档不必给每个部件各写一条选择器 */
-    --xh-_hotkeys-font-size: var(--xh-text-secondary-size);
+    --xh-_hotkeys-font-size: var(--xh-control-caption-md);
     --xh-_hotkeys-key-px: var(--xh-space-1);
 
     display: inline-flex;

package/css/hover-card.css

@@ -67,6 +67,9 @@
        引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
     --xh-_hover-card-available-h: 100vh;
 
+    /* 卡片内容的自绘条浮在内容之上：轨道不上底色，实色轨道会在卡片右缘糊一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
     position: fixed;
     z-index: var(--xh-hover-card-layer, var(--xh-layer-popover));
     /* 空壳不吃指针：trigger 与 content 之间那段间隙要能点得穿，

package/css/image-cropper.css

@@ -69,9 +69,10 @@
     cursor: not-allowed;
   }
 
+  /* 环往内收：裁切框长在视口里，视口那层 overflow: hidden 会把画在外沿的环裁掉 */
   [data-scope='image-cropper'][data-part='crop-area']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+    outline-offset: calc(-1 * var(--xh-ring-width));
   }
 
   /* 三分构图参考线：两条竖线、两条横线，落点写死在三分处，不占节点、不吃指针。
@@ -134,9 +135,10 @@
     content: '';
   }
 
+  /* 与裁切框同一口径：把手也在视口的 overflow: hidden 里，环画在外沿会被裁掉 */
   [data-scope='image-cropper'][data-part='crop-handle']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+    outline-offset: calc(-1 * var(--xh-ring-width));
   }
 
   [data-scope='image-cropper'][data-part='crop-handle'][data-resizing] {

package/css/image-viewer.css

@@ -54,6 +54,10 @@
   }
 
   [data-scope='image-viewer'][data-part='content'] {
+    /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+       既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+    isolation: isolate;
+
     /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-image-viewer-icon-size, var(--xh-glyph-size-text));
 
@@ -114,7 +118,7 @@
     background: var(--xh-image-viewer-chrome-bg, color-mix(in oklab, var(--xh-color-neutral-950) 55%, transparent));
     color: inherit;
     border: none;
-    border-radius: var(--xh-shape-pill);
+    border-radius: var(--xh-image-viewer-overlay-radius, var(--xh-shape-pill));
   }
 
   [data-scope='image-viewer'][data-part='toolbar'] {
@@ -123,8 +127,8 @@
     translate: -50% 0;
     display: flex;
     align-items: center;
-    gap: var(--xh-space-1);
-    padding: var(--xh-space-1_5) var(--xh-space-3);
+    gap: var(--xh-image-viewer-toolbar-gap, var(--xh-space-1));
+    padding: var(--xh-image-viewer-toolbar-padding, var(--xh-space-1_5) var(--xh-space-3));
   }
 
   /* 工具条里的按钮：底色交给工具条，本体只管命中区 */
@@ -137,7 +141,7 @@
     block-size: var(--xh-control-action-size);
     background: none;
     border: none;
-    border-radius: var(--xh-shape-control);
+    border-radius: var(--xh-image-viewer-toolbar-radius, var(--xh-shape-control));
     color: inherit;
     font-size: var(--xh-glyph-size-sm);
     cursor: pointer;
@@ -147,7 +151,7 @@
     inset-block-start: var(--xh-space-6);
     inset-inline-start: 50%;
     translate: -50% 0;
-    padding: var(--xh-space-1) var(--xh-space-3);
+    padding: var(--xh-image-viewer-counter-padding, var(--xh-space-1) var(--xh-space-3));
     font-size: var(--xh-text-secondary-size);
   }
 
@@ -318,4 +322,13 @@
     -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='image-viewer'][data-part='positioner'][hidden],
+  [data-scope='image-viewer'][data-part='viewport'][hidden],
+  [data-scope='image-viewer'][data-part='toolbar'][hidden],
+  [data-scope='image-viewer'][data-part='next-trigger'][hidden] {
+    display: none;
+  }
 }

package/css/json-viewer.css

@@ -10,7 +10,7 @@
     /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-json-viewer-icon-size, var(--xh-glyph-size-text));
 
-    --xh-_json-viewer-font-size: var(--xh-text-secondary-size);
+    --xh-_json-viewer-font-size: var(--xh-control-caption-md);
     --xh-_json-viewer-row-py: var(--xh-space-0_5);
     --xh-_json-viewer-indent: var(--xh-space-4);
     --xh-json-viewer-key-fg: var(--xh-fg-brand-strong);
@@ -20,6 +20,11 @@
     --xh-json-viewer-number-fg: var(--xh-syntax-number);
     --xh-json-viewer-boolean-fg: var(--xh-syntax-keyword);
 
+    /* 两档的自绘条浮在内容之上：轨道不上底色，实色轨道会沿容器边缘糊出一条灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
+    /* 自绘条绝对定位贴这一层的内边距盒，它得是定位盒 */
+    position: relative;
     display: block;
     color: var(--xh-json-viewer-fg, var(--xh-fg-default));
     font-family: var(--xh-json-viewer-font, var(--xh-font-family-mono));
@@ -58,6 +63,34 @@
     overflow: auto;
   }
 
+  /* 原文档：与树档共用同一套边框、内衬与高度令牌，两档切过去盒子不跳。
+     整块可框选——这一档存在的理由就是把与后端一字不差的那份原文交到手上 */
+  [data-scope='json-viewer'][data-part='text'] {
+    margin: 0;
+    max-block-size: var(--xh-json-viewer-max-h, var(--xh-viewport-max-h));
+    padding-block: var(--xh-json-viewer-py, var(--xh-space-2));
+    padding-inline: var(--xh-json-viewer-px, var(--xh-space-2));
+    border: var(--xh-stroke-thin) solid var(--xh-json-viewer-border, var(--xh-border-default));
+    border-radius: var(--xh-json-viewer-radius, var(--xh-shape-surface));
+    background: var(--xh-json-viewer-bg, var(--xh-bg-surface));
+    color: var(--xh-json-viewer-text-fg, var(--xh-fg-default));
+    font-family: var(--xh-json-viewer-font, var(--xh-font-family-mono));
+    /* 缩进靠空格，行不折：折行会把层级读乱，横向给滚动条 */
+    white-space: pre;
+    tab-size: 2;
+    overflow: auto;
+    user-select: text;
+  }
+
+  [data-scope='json-viewer'][data-part='text'][hidden] {
+    display: none;
+  }
+
+  /* 这一档没有行可落焦，环画在整块上 */
+  [data-scope='json-viewer'][data-part='text']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
   [data-scope='json-viewer'][data-part='tree'][hidden] {
     display: none;
   }

package/css/layout.css

@@ -40,9 +40,9 @@
     display: flex;
     grid-area: header;
     align-items: center;
-    gap: var(--xh-space-3);
+    gap: var(--xh-layout-header-gap, var(--xh-space-3));
     block-size: var(--xh-_layout-header-h);
-    padding-inline: var(--xh-space-4);
+    padding-inline: var(--xh-layout-header-px, var(--xh-space-4));
     background: var(--xh-layout-header-bg, var(--xh-bg-surface));
   }
 
@@ -51,7 +51,7 @@
     grid-area: sider;
     inline-size: var(--xh-_layout-sider-w);
     overflow: hidden;
-    padding: var(--xh-space-3);
+    padding: var(--xh-layout-sider-padding, var(--xh-space-3));
     background: var(--xh-layout-sider-bg, var(--xh-bg-subtle));
     transition: inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
@@ -66,12 +66,12 @@
     grid-area: content;
     /* 内容列已是 minmax(0, 1fr)，这里再声明一次，宽表格与长串文本才撑不破列 */
     min-inline-size: 0;
-    padding: var(--xh-space-4);
+    padding: var(--xh-layout-content-padding, var(--xh-space-4));
   }
 
   [data-scope='layout'][data-part='footer'] {
     grid-area: footer;
-    padding: var(--xh-space-3) var(--xh-space-4);
+    padding: var(--xh-layout-footer-padding, var(--xh-space-3) var(--xh-space-4));
     background: var(--xh-layout-footer-bg, var(--xh-bg-surface));
     color: var(--xh-fg-muted);
     font-size: var(--xh-text-secondary-size);
@@ -82,9 +82,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--xh-control-gap-sm);
+    gap: var(--xh-layout-sider-trigger-gap, var(--xh-control-gap-sm));
     block-size: var(--xh-control-h-sm);
-    padding-inline: var(--xh-control-px-sm);
+    padding-inline: var(--xh-layout-sider-trigger-px, var(--xh-control-px-sm));
     border: 0;
     border-radius: var(--xh-layout-sider-trigger-radius, var(--xh-shape-control));
     background: var(--xh-layout-sider-trigger-bg, transparent);
@@ -167,4 +167,12 @@
     max-block-size: calc(var(--xh-layout-scrollport-h, 100dvh) - var(--xh-_layout-sider-offset));
     overflow-y: auto;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='layout'][data-part='root'][hidden],
+  [data-scope='layout'][data-part='header'][hidden],
+  [data-scope='layout'][data-part='sider-trigger'][hidden] {
+    display: none;
+  }
 }

package/css/list.css

@@ -8,7 +8,7 @@
     /* 一个尺寸档只换这几个私有槽，条目与两行文字都从根上继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_list-item-py: var(--xh-list-item-py-md);
-    --xh-_list-item-px: var(--xh-space-4);
+    --xh-_list-item-px: var(--xh-list-item-px-md);
     --xh-_list-item-gap: var(--xh-space-3);
     --xh-_list-title-size: var(--xh-control-font-md);
     --xh-_list-description-size: var(--xh-control-caption-md);
@@ -30,7 +30,7 @@
   /* —— 尺寸 —— */
   [data-scope='list'][data-part='root'][data-size='sm'] {
     --xh-_list-item-py: var(--xh-list-item-py-sm);
-    --xh-_list-item-px: var(--xh-space-3);
+    --xh-_list-item-px: var(--xh-list-item-px-sm);
     --xh-_list-item-gap: var(--xh-space-2);
     --xh-_list-title-size: var(--xh-control-font-sm);
     --xh-_list-description-size: var(--xh-control-caption-sm);
@@ -38,7 +38,7 @@
 
   [data-scope='list'][data-part='root'][data-size='lg'] {
     --xh-_list-item-py: var(--xh-list-item-py-lg);
-    --xh-_list-item-px: var(--xh-space-5);
+    --xh-_list-item-px: var(--xh-list-item-px-lg);
     --xh-_list-item-gap: var(--xh-space-4);
     --xh-_list-title-size: var(--xh-control-font-lg);
   }
@@ -66,11 +66,11 @@
   [data-scope='list'][data-part='root'][data-split]
     > [data-scope='list'][data-part='item']
     + [data-scope='list'][data-part='item'] {
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-list-border, var(--xh-border-subtle));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-list-divider, var(--xh-border-subtle));
   }
 
   [data-scope='list'][data-part='root'][data-hoverable] > [data-scope='list'][data-part='item'] {
-    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 悬停换底色：只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
@@ -119,4 +119,13 @@
     gap: var(--xh-list-action-gap, var(--xh-space-2));
     margin-inline-start: auto;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='list'][data-part='item'][hidden],
+  [data-scope='list'][data-part='item-media'][hidden],
+  [data-scope='list'][data-part='item-content'][hidden],
+  [data-scope='list'][data-part='item-action'][hidden] {
+    display: none;
+  }
 }

package/css/listbox.css

@@ -34,6 +34,7 @@
   [data-scope='listbox'][data-part='content'] {
     display: flex;
     flex-direction: column;
+    gap: var(--xh-listbox-content-gap, var(--xh-list-option-gap));
     max-block-size: var(--xh-listbox-content-max-h, var(--xh-viewport-h-md));
     padding-block: var(--xh-listbox-content-py, var(--xh-space-1));
     padding-inline: var(--xh-listbox-content-px, var(--xh-space-1));
@@ -66,6 +67,7 @@
   [data-scope='listbox'][data-part='item-group'] {
     display: flex;
     flex-direction: column;
+    gap: var(--xh-listbox-item-group-gap, var(--xh-list-option-gap));
   }
 
   [data-scope='listbox'][data-part='item-group'][hidden] {
@@ -74,7 +76,7 @@
 
   /* 组间留白只加在后继分组上：首组顶上已经有 content 的内边距，再加一层会显得头重 */
   [data-scope='listbox'][data-part='item-group'] + [data-scope='listbox'][data-part='item-group'] {
-    margin-block-start: var(--xh-listbox-group-gap, var(--xh-space-2));
+    margin-block-start: var(--xh-listbox-group-gap, var(--xh-space-1_5));
   }
 
   /* 分组标题不是选项、进不了导航，画成小号次要文字，
@@ -168,7 +170,7 @@
     align-items: center;
     justify-content: center;
     inline-size: var(--xh-listbox-item-indicator-size, var(--xh-control-indicator-size));
-    color: var(--xh-listbox-item-indicator-fg, var(--xh-bg-brand));
+    color: var(--xh-listbox-item-indicator-fg, var(--xh-fg-brand));
     visibility: hidden;
   }
 

package/css/loading-bar.css

@@ -31,8 +31,9 @@
     display: none;
   }
 
-  /* 冲到 100 之后进入淡出：机器会在淡出窗口走完之前一直停在 finishing，
-     这段过渡才有时间跑完；窗口与时长两处默认值都是 200ms，改一处记得对齐另一处 */
+  /* 冲到 100 之后进入淡出：机器会在淡出窗口走完之前一直停在 finishing，这段过渡才有时间跑完。
+     窗口（machine 的 LOADING_BAR_FADE_DURATION，200ms）比过渡本身（motion-duration-exit，120ms）
+     宽出一截是有意的余量；两者不是同一个数，改窗口时只要保证它仍不短于过渡 */
   [data-scope='loading-bar'][data-part='root'][data-state='finishing'] {
     opacity: 0;
   }
@@ -50,8 +51,8 @@
    * 进度段。宽度那条轴（inline-size）由连接层写进内联样式，这里绝不重复写。
    * 背景色同理：给了 color 就走内联，盖过下面这条。
    *
-   * 语气取柔和档 --xh-_tone-soft（500）而不是 --xh-_tone（600）：600 是给实心底与
-   * 文字用的强调档，压在这么一条细带上偏重。槽位由 root 上的 data-tone 声明，继承下来。
+   * 语气取装饰档 --xh-_tone-soft：那一档压在画布上够 3:1，细带才看得出来。
+   * 槽位由 root 上的 data-tone 声明，继承下来。
    * 没写 data-tone 时该槽没被声明，退回原来的品牌色。
    */
   [data-scope='loading-bar'][data-part='range'] {

package/css/log.css

@@ -28,14 +28,18 @@
      flex-basis 取 auto，连接层写的按行数高度才算数，同时外层给了高度时还能撑满；
      min-block-size: 0 让它在弹性父级里能被压缩从而真的溢出；
      两个轴都 auto：长行不折，横向也要能滚；
-     overscroll-behavior: contain 阻止滚动量传给页面；
-     scrollbar-gutter: stable 避免滚动条出现与消失时推动文字。 */
+     overscroll-behavior: contain 阻止滚动量传给页面。 */
   [data-scope='log'][data-part='viewport'] {
     flex: 1 1 auto;
     min-block-size: 0;
     block-size: calc(var(--xh-_log-line-h) * var(--xh-log-rows, 16));
     overflow: auto;
     overscroll-behavior: contain;
+  }
+
+  /* 还在用原生滚动条的视口留一条空道，滚动条出现与消失时不推动文字。
+     带 data-xh-scrollbar 的容器已经把原生条藏成零宽，这条空道对它没有布局作用，排除掉 */
+  [data-scope='log'][data-part='viewport']:not([data-xh-scrollbar]) {
     scrollbar-gutter: stable;
   }
 

package/css/masonry.css

@@ -42,22 +42,22 @@
   /* —— 间距档位 —— */
   /* 每一档指向一个间距令牌，列之间与列内项之间吃同一份间距 */
   [data-scope='masonry'][data-part='root'][data-gap='xs'] {
-    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-1));
+    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-layout-gap-xs));
   }
 
   [data-scope='masonry'][data-part='root'][data-gap='sm'] {
-    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-2));
+    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-layout-gap-sm));
   }
 
   [data-scope='masonry'][data-part='root'][data-gap='md'] {
-    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-3));
+    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-layout-gap-md));
   }
 
   [data-scope='masonry'][data-part='root'][data-gap='lg'] {
-    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-4));
+    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-layout-gap-lg));
   }
 
   [data-scope='masonry'][data-part='root'][data-gap='xl'] {
-    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-6));
+    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-layout-gap-xl));
   }
 }