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

package/css/date-picker.css

@@ -10,6 +10,9 @@
        引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
     --xh-_date-picker-available-h: 100vh;
 
+    /* 面板的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊出一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
     position: fixed;
     z-index: var(--xh-date-picker-layer, var(--xh-layer-popover));
     /* 空壳不吃指针，交互只发生在 content 里 */
@@ -28,8 +31,8 @@
     --xh-_date-picker-control-h: var(--xh-control-h-md);
     --xh-_date-picker-control-px: var(--xh-control-px-md);
     --xh-_date-picker-gap: var(--xh-control-gap-md);
-    --xh-_date-picker-font-size: var(--xh-text-body-size);
-    --xh-_date-picker-label-font-size: var(--xh-text-label-size);
+    --xh-_date-picker-font-size: var(--xh-control-font-md);
+    --xh-_date-picker-label-font-size: var(--xh-control-font-md);
 
     /* 形态档只换这三个私有槽：底色与两档描边 */
     --xh-_date-picker-control-bg: var(--xh-bg-canvas);
@@ -326,6 +329,11 @@
     border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-panel-divider, var(--xh-border-subtle));
   }
 
+  /* 快捷选项列与它旁边那张日历之间留出同样的空当，两道分隔线左右对称 */
+  [data-scope='date-picker'][data-part='presets'] + [data-scope='date-picker'][data-part='calendar'] {
+    padding-inline-start: var(--xh-date-picker-panel-gap, var(--xh-space-3));
+  }
+
   [data-scope='date-picker'][data-part='calendar'] {
     display: flex;
     flex-direction: column;
@@ -342,13 +350,15 @@
   [data-scope='date-picker'][data-part='presets'] {
     display: flex;
     flex: none;
+    /* 这一列的高度由并排的日历给：不写就按内容收，右侧那道分隔线只画到最后一条选项 */
+    align-self: stretch;
     flex-direction: column;
-    gap: var(--xh-date-picker-presets-gap, var(--xh-space-0_5));
+    gap: var(--xh-date-picker-presets-gap, var(--xh-list-option-gap));
     /* 选项多起来时这一列自己滚，不把整张面板撑高 */
-    max-block-size: var(--xh-date-picker-presets-h, var(--xh-viewport-h-sm));
-    padding: var(--xh-space-1);
+    max-block-size: var(--xh-date-picker-presets-h, var(--xh-viewport-h-lg));
+    padding: var(--xh-date-picker-presets-padding, var(--xh-space-1));
     overflow-y: auto;
-    border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-picker-content-border, var(--xh-border-default));
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-border-subtle));
   }
 
   [data-scope='date-picker'][data-part='presets'][hidden] {
@@ -356,9 +366,9 @@
   }
 
   [data-scope='date-picker'][data-part='preset'] {
-    padding-block: var(--xh-space-1);
-    padding-inline: var(--xh-space-3);
-    border-radius: var(--xh-shape-control);
+    padding-block: var(--xh-date-picker-preset-py, var(--xh-space-1));
+    padding-inline: var(--xh-date-picker-preset-px, var(--xh-space-3));
+    border-radius: var(--xh-date-picker-preset-radius, var(--xh-shape-control));
     font-size: var(--xh-text-secondary-size);
     line-height: var(--xh-leading-normal);
     white-space: nowrap;
@@ -393,12 +403,12 @@
   [data-scope='date-picker'][data-part='time-column'] {
     display: flex;
     flex-direction: column;
-    gap: var(--xh-date-picker-time-column-gap, var(--xh-space-0_5));
+    gap: var(--xh-date-picker-time-column-gap, var(--xh-list-option-gap));
     /* 几列并排：定高而不是随内容收，否则时列与分列的可选值一多一少就错位 */
     block-size: var(--xh-date-picker-time-column-h, var(--xh-viewport-h-sm));
-    padding: var(--xh-space-1);
+    padding: var(--xh-date-picker-time-column-padding, var(--xh-space-1));
     overflow-y: auto;
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-content-border, var(--xh-border-default));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-border-subtle));
   }
 
   [data-scope='date-picker'][data-part='time-column'][hidden] {
@@ -406,9 +416,9 @@
   }
 
   [data-scope='date-picker'][data-part='time-item'] {
-    padding-block: var(--xh-space-1);
-    padding-inline: var(--xh-space-3);
-    border-radius: var(--xh-shape-control);
+    padding-block: var(--xh-date-picker-time-item-py, var(--xh-space-1));
+    padding-inline: var(--xh-date-picker-time-item-px, var(--xh-space-3));
+    border-radius: var(--xh-date-picker-time-item-radius, var(--xh-shape-control));
     font-size: var(--xh-text-secondary-size);
     line-height: var(--xh-leading-normal);
     text-align: center;
@@ -438,9 +448,9 @@
     align-items: center;
     justify-content: center;
     block-size: var(--xh-control-h-sm);
-    padding-inline: var(--xh-control-px-sm);
+    padding-inline: var(--xh-date-picker-confirm-trigger-px, var(--xh-control-px-sm));
     border: none;
-    border-radius: var(--xh-shape-control);
+    border-radius: var(--xh-date-picker-confirm-trigger-radius, var(--xh-shape-control));
     background: var(--xh-date-picker-confirm-bg, var(--xh-_date-picker-accent));
     color: var(--xh-date-picker-confirm-fg, var(--xh-_date-picker-accent-fg));
     font-size: var(--xh-text-secondary-size);

package/css/descriptions.css

@@ -12,7 +12,7 @@
     --xh-_descriptions-label-gap: var(--xh-space-2);
     --xh-_descriptions-py: var(--xh-space-2);
     --xh-_descriptions-px: var(--xh-space-3);
-    --xh-_descriptions-font-size: var(--xh-text-body-size);
+    --xh-_descriptions-font-size: var(--xh-control-font-md);
     /* 标签在左时那一列的宽度：收到最长的那个标签 */
     --xh-_descriptions-label-w: max-content;
 
@@ -117,9 +117,9 @@
     > [data-scope='descriptions'][data-part='item'] {
     padding-block: var(--xh-descriptions-item-py, var(--xh-_descriptions-py));
     padding-inline: var(--xh-descriptions-item-px, var(--xh-_descriptions-px));
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-descriptions-border, var(--xh-border-subtle));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-descriptions-divider, var(--xh-border-subtle));
     /* 每行一组时左边没有邻居，宽度按列数补回来 */
-    border-inline-start: 0 solid var(--xh-descriptions-border, var(--xh-border-subtle));
+    border-inline-start: 0 solid var(--xh-descriptions-divider, var(--xh-border-subtle));
   }
 
   [data-scope='descriptions'][data-part='root'][data-bordered]
@@ -202,4 +202,10 @@
     > [data-scope='descriptions'][data-part='item']:nth-child(-n + 6) {
     border-block-start-width: 0;
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='descriptions'][data-part='item'][hidden] {
+    display: none;
+  }
 }

package/css/dialog.css

@@ -81,7 +81,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--xh-space-4);
+    padding: var(--xh-dialog-positioner-padding, var(--xh-space-4));
   }
 
   [data-scope='dialog'][data-part='positioner'][data-position='top'] {
@@ -211,4 +211,10 @@
     -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='dialog'][data-part='positioner'][hidden] {
+    display: none;
+  }
 }

package/css/drawer.css

@@ -124,6 +124,12 @@
     display: contents;
   }
 
+  /* 浮层被搬到 portal 落点，继承不到 root 上的槽：这把尺在被搬走的那一侧再声明一次，
+     关闭钮与条目里作者塞的图标才和皮肤画的兜底字形一样大 */
+  [data-scope='drawer'][data-part='content'] {
+    --xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-text));
+  }
+
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，作者手写 hidden 时得还回去 */
   [data-scope='drawer'][data-part='root'][hidden] {
     display: none;
@@ -184,11 +190,14 @@
     background: var(--xh-drawer-backdrop-bg, var(--xh-bg-overlay));
   }
 
-  /* 挂在局部容器里：遮罩与定位层从视口坐标换成容器坐标，只罩住那个容器。
+  /* 挂在局部容器里：遮罩、定位层与面板一起从视口坐标换成容器坐标，只罩住那个容器。
      作者要给那个容器加 position（relative 之类），否则 absolute 会往上找到别的定位祖先——
-     这一条写进了示例与 props 说明 */
+     这一条写进了示例与 props 说明。
+     content 必须一起换：它的贴边是 inset-block/inline 参照包含块算的，留在 fixed 上就会
+     照旧贴视口边，遮罩缩进容器、面板却跑到屏幕边上——与 contained 的承诺正好相反 */
   [data-scope='drawer'][data-part='backdrop'][data-contained],
-  [data-scope='drawer'][data-part='positioner'][data-contained] {
+  [data-scope='drawer'][data-part='positioner'][data-contained],
+  [data-scope='drawer'][data-part='content'][data-contained] {
     position: absolute;
   }
 
@@ -214,8 +223,9 @@
   /* 贴边写在 content 自己身上，而不是交给 positioner：
      positioner 在抽屉里不是必需部件，最小合规结构只有 root + content，
      贴边若挂在 positioner 上，那种结构下面板会直接塌回文档流。
-     content 是 fixed，包住它的 positioner 没有 transform / filter，
-     不构成固定定位的包含块，两种结构下参照的都是视口，位置一致。 */
+     非 contained 时 content 是 fixed，包住它的 positioner 没有 transform / filter，
+     不构成固定定位的包含块，两种结构下参照的都是视口，位置一致；
+     contained 时上面那条把它一并换成 absolute，参照的就是作者那个容器。 */
   [data-scope='drawer'][data-part='content'] {
     /* 位移方向的私有槽位：默认按 LTR，RTL 在下面整体翻符号 */
     --xh-_drawer-shift-inline: 100%;

package/css/dynamic-input.css

@@ -210,4 +210,11 @@
     -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='dynamic-input'][data-part='item-content'][hidden],
+  [data-scope='dynamic-input'][data-part='item-action'][hidden] {
+    display: none;
+  }
 }

package/css/ellipsis.css

@@ -43,4 +43,10 @@
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='ellipsis'][data-part='root'][hidden] {
+    display: none;
+  }
 }

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;
   }