@xihan-ui/styles 1.0.0 → 2.0.0

package/css/infinite-scroll.css

@@ -1,9 +1,25 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 infinite scroll 样式。 */
+
+/* 独立皮肤同时传递引入取下一页按钮的动作控件配方，full bundle 递归去重。 */
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='infinite-scroll'] {
     --xh-infinite-scroll-skin: 1;
   }
 
+  /* 这里的 data-disabled 关掉的是「还取不取下一页」，列表本身照常可读可点：
+     光标交回给作者，不摆共享层那个「不可用」的样子 */
+  [data-scope='infinite-scroll'][data-part='root'][data-disabled] {
+    cursor: inherit;
+  }
+
   /*
    * 列表外壳这一层刻意不给盒模型：滚的是页面还是作者自己的 overflow 容器、列表长什么样，
    * 都归作者的布局管，组件只往它身上挂 data-loading / data-disabled 供作者取用。
@@ -20,8 +36,42 @@
     pointer-events: none;
   }
 
+  /*
+   * 取下一页的按钮：与哨兵同一条通路的键盘入口，摆在列表末尾自成一行——铺满一行的独立动作条目，
+   * 接 Action Control 的 row 档、outline 形态（§9.2）：宽度由容器给、高度随内容、按下只换面不缩放；
+   * 盒几何、中性描边与透明底、悬停 / 按下 / 禁用面、焦点环与粗指针热区全由家族给，
+   * 白底承载 hover 100 → pressed 200。这里只把使用者槽映射到桥接槽，并把文案居中：
+   * 它是一行里唯一的东西，靠起始缘会像一条没对齐的列表项。
+   * 行高不吃家族的单行档：row 档允许换行、高度随内容，折行的文案走正文行高（§6.4）
+   */
+  [data-scope='infinite-scroll'][data-part='load-more-trigger'] {
+    --xh-action-gap: var(--xh-infinite-scroll-load-more-gap, var(--xh-_action-profile-gap));
+    --xh-action-visual-size: var(--xh-infinite-scroll-load-more-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-infinite-scroll-load-more-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-infinite-scroll-load-more-radius, var(--xh-_action-profile-radius));
+    --xh-action-border-rest: var(--xh-infinite-scroll-load-more-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-infinite-scroll-load-more-border-hover, var(--xh-_action-variant-border-hover));
+    --xh-action-border-pressed: var(--xh-infinite-scroll-load-more-border-hover, var(--xh-_action-variant-border-pressed));
+    --xh-action-bg-rest: var(--xh-infinite-scroll-load-more-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-infinite-scroll-load-more-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-infinite-scroll-load-more-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-infinite-scroll-load-more-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-infinite-scroll-load-more-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-infinite-scroll-load-more-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-font-size: var(--xh-infinite-scroll-load-more-font-size, var(--xh-text-body-size));
+    /* 作者塞进钮里的图标按档取字形尺寸，与文案同一把尺 */
+    --xh-icon-size: var(--xh-infinite-scroll-load-more-icon-size, var(--xh-_action-profile-glyph-size));
+
+    justify-content: center;
+    text-align: center;
+    line-height: var(--xh-leading-normal);
+    /* 到底了连点是常态，触屏上默认会当成双击缩放 */
+    touch-action: manipulation;
+  }
+
   /* 声明过 display 就盖掉了 UA 的 [hidden]{display:none}，作者要藏哨兵时得自己补回来 */
-  [data-scope='infinite-scroll'][data-part='sentinel'][hidden] {
+  [data-scope='infinite-scroll'][data-part='sentinel'][hidden],
+  [data-scope='infinite-scroll'][data-part='load-more-trigger'][hidden] {
     display: none;
   }
 }

package/css/input-group.css

@@ -0,0 +1,277 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 input group 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='input-group'] {
+    --xh-input-group-skin: 1;
+  }
+
+  /* 输入框、前后缀和动作共用一个输入表面。组只统一材质与外轮廓，语义仍归各子控件。 */
+  [data-scope='input-group'][data-part='root'] {
+    /* 段之间那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+       既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+    isolation: isolate;
+
+    /* 缺省档。item 的高度、内衬与字号从这三个槽取，换档只改这里 */
+    --xh-_input-group-h: var(--xh-control-h-md);
+    --xh-_input-group-px: var(--xh-control-px-md);
+    --xh-_input-group-font-size: var(--xh-control-font-md);
+    --xh-_input-group-bg: transparent;
+    --xh-_input-group-bg-hover: color-mix(in oklab, var(--xh-bg-subtle) 45%, transparent);
+    /* 组壳按字段外壳画 outline 描边（§8.3）：静息 --xh-border-control、悬停升 -hover、聚焦换 -focus，无影 */
+    --xh-_input-group-border: var(--xh-border-control);
+    --xh-_input-group-border-hover: var(--xh-border-control-hover);
+    --xh-_input-group-border-focus: var(--xh-border-control-focus);
+    --xh-_input-group-shadow: none;
+
+    position: relative;
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: stretch;
+    border-radius: var(--xh-input-group-radius, var(--xh-shape-control));
+    background: var(--xh-input-group-bg, var(--xh-_input-group-bg));
+    box-shadow: var(--xh-input-group-shadow, var(--xh-_input-group-shadow));
+
+    /* 父容器给不出这么宽时整组跟着收，不越出父容器 */
+    max-inline-size: 100%;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 外轮廓不占盒尺寸，组内控件仍保持与独立使用时相同的高度。 */
+  [data-scope='input-group'][data-part='root']::before {
+    content: '';
+    position: absolute;
+    z-index: 2;
+    inset: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-input-group-border, var(--xh-_input-group-border));
+    border-radius: inherit;
+    pointer-events: none;
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* subtle：淡底顶替描边表达边界，描边只退成透明而不去掉；悬停浮出 --xh-border-control（§8.3） */
+  [data-scope='input-group'][data-part='root'][data-variant='subtle'] {
+    --xh-_input-group-bg: var(--xh-bg-subtle);
+    --xh-_input-group-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-_input-group-border: transparent;
+    --xh-_input-group-border-hover: var(--xh-border-control);
+    --xh-_input-group-shadow: none;
+  }
+
+  /* ghost：静息不画壳，悬停与聚焦沿用下面的 hover / focus 规则浮出 --xh-border-control 与底 */
+  [data-scope='input-group'][data-part='root'][data-variant='ghost'] {
+    --xh-_input-group-bg: transparent;
+    --xh-_input-group-border: transparent;
+    --xh-_input-group-border-hover: var(--xh-border-control);
+    --xh-_input-group-shadow: none;
+  }
+
+  [data-scope='input-group'][data-part='root']:not(:has([data-disabled])):hover {
+    background: var(--xh-input-group-bg-hover, var(--xh-_input-group-bg-hover));
+  }
+
+  [data-scope='input-group'][data-part='root']:not(:has([data-disabled])):hover::before {
+    border-color: var(--xh-input-group-border-hover, var(--xh-_input-group-border-hover));
+  }
+
+  [data-scope='input-group'][data-part='root']:focus-within {
+    outline: var(--xh-ring-width) solid var(--xh-input-group-ring-focus, var(--xh-ring-focus));
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='input-group'][data-part='root']:focus-within::before {
+    border-color: var(--xh-input-group-border-focus, var(--xh-_input-group-border-focus));
+  }
+
+  [data-scope='input-group'][data-part='root']:has([data-invalid], [aria-invalid='true'])::before {
+    border-color: var(--xh-input-group-border-invalid, var(--xh-border-invalid));
+  }
+
+  [data-scope='input-group'][data-part='root']:has([data-invalid], [aria-invalid='true']):focus-within {
+    outline-color: var(--xh-input-group-ring-invalid, var(--xh-ring-invalid));
+  }
+
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  [data-scope='input-group'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  /* 档位跟着组内控件走：控件的档位就写在它自己的根上，组读得到，
+     于是前后缀块与邻座同高，作者不必把同一档在组上再写一遍。
+     缺省档写在上面的基础规则里 */
+  [data-scope='input-group'][data-part='root']:has([data-size='sm']) {
+    --xh-_input-group-h: var(--xh-control-h-sm);
+    --xh-_input-group-px: var(--xh-control-px-sm);
+    --xh-_input-group-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='input-group'][data-part='root']:has([data-size='lg']) {
+    --xh-_input-group-h: var(--xh-control-h-lg);
+    --xh-_input-group-px: var(--xh-control-px-lg);
+    --xh-_input-group-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 组上写了档位时以它为准：排在自动档后面，同特指度下压得住 */
+  [data-scope='input-group'][data-part='root'][data-size='sm'] {
+    --xh-_input-group-h: var(--xh-control-h-sm);
+    --xh-_input-group-px: var(--xh-control-px-sm);
+    --xh-_input-group-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='input-group'][data-part='root'][data-size='md'] {
+    --xh-_input-group-h: var(--xh-control-h-md);
+    --xh-_input-group-px: var(--xh-control-px-md);
+    --xh-_input-group-font-size: var(--xh-control-font-md);
+  }
+
+  [data-scope='input-group'][data-part='root'][data-size='lg'] {
+    --xh-_input-group-h: var(--xh-control-h-lg);
+    --xh-_input-group-px: var(--xh-control-px-lg);
+    --xh-_input-group-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 子控件不再各画一层输入表面，悬停与聚焦统一落在组的外轮廓。 */
+  [data-scope='input-group'][data-part='root'] [data-xh-field-chrome] {
+    --xh-field-bg-rest: transparent;
+    --xh-field-bg-hover: transparent;
+    --xh-field-bg-read-only: transparent;
+    --xh-field-bg-disabled: transparent;
+    --xh-field-border-rest: transparent;
+    --xh-field-border-hover: transparent;
+    --xh-field-border-focus: transparent;
+    --xh-field-border-invalid: transparent;
+    --xh-field-shadow-rest: none;
+    --xh-field-shadow-read-only: none;
+    --xh-field-shadow-disabled: none;
+
+    border-color: transparent;
+    background-color: transparent;
+    box-shadow: none;
+    /* 内层表面始终透明，不播放字段自身的边框/背景过渡，避免失焦时短暂闪回。 */
+    transition: none;
+  }
+
+  /* 焦点环由组的外表面绘制，子输入保留焦点语义但不再重复画第二圈。 */
+  [data-scope='input-group'][data-part='root'] [data-xh-field-chrome]:focus-within {
+    outline: none;
+  }
+
+  [data-scope='input-group'][data-part='root'] [data-xh-field-chrome]:hover,
+  [data-scope='input-group'][data-part='root'] [data-xh-field-chrome]:focus-within,
+  [data-scope='input-group'][data-part='root'] [data-xh-field-chrome][data-invalid],
+  [data-scope='input-group'][data-part='root'] [data-xh-field-chrome][data-readonly],
+  [data-scope='input-group'][data-part='root'] [data-xh-field-chrome][data-disabled] {
+    border-color: transparent;
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  /* 每一段都是定位元素，动作控件的悬停面可以浮到外轮廓之上。 */
+  [data-scope='input-group'][data-part='root'] > * {
+    position: relative;
+  }
+
+  /* 悬停或拿到焦点的动作段抬到外轮廓同层，自己的反馈不会被邻座覆盖。 */
+  [data-scope='input-group'][data-part='root'] > *:hover,
+  [data-scope='input-group'][data-part='root'] > *:focus-within {
+    z-index: 2;
+  }
+
+  /* —— 两端圆角 —— */
+  /* 画着描边的那个盒子有三种落点：段本身、段就是控件盒、控件盒在段里一层。
+     :is() 取其中最特指的一支算特指度，三种落点因此都压得住控件自己那条圆角规则。
+     只认直接子节点与它下面那一层：更深的节点是控件的内部结构，圆错了位置比直角更糟 */
+  [data-scope='input-group'][data-part='root'] > :is(*, [data-part='control'], [data-part='root']),
+  [data-scope='input-group'][data-part='root'] > * :is([data-part='control'], [data-part='root']) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* 逻辑角属性写，rtl 跟着换边，不必另写一套 */
+  [data-scope='input-group'][data-part='root'] > :is(*, [data-part='control'], [data-part='root']):first-child,
+  [data-scope='input-group'][data-part='root'] > *:first-child :is([data-part='control'], [data-part='root']) {
+    border-start-start-radius: var(--xh-input-group-radius, var(--xh-shape-control));
+    border-end-start-radius: var(--xh-input-group-radius, var(--xh-shape-control));
+  }
+
+  [data-scope='input-group'][data-part='root'] > :is(*, [data-part='control'], [data-part='root']):last-child,
+  [data-scope='input-group'][data-part='root'] > *:last-child :is([data-part='control'], [data-part='root']) {
+    border-start-end-radius: var(--xh-input-group-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-input-group-radius, var(--xh-shape-control));
+  }
+
+  /* —— 前后缀块 —— */
+  /* 前后缀是输入表面里的静态内容，不单独绘制底色、描边或焦点状态。 */
+  [data-scope='input-group'][data-part='item'] {
+    display: inline-flex;
+    box-sizing: border-box;
+    flex: none;
+    align-items: center;
+    block-size: var(--xh-input-group-item-h, var(--xh-_input-group-h));
+    padding-inline: var(--xh-input-group-item-px, var(--xh-_input-group-px));
+    color: var(--xh-input-group-item-fg, var(--xh-fg-muted));
+    font-size: var(--xh-input-group-item-font-size, var(--xh-_input-group-font-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+  }
+
+  /* 与输入控件相邻的一侧由控件自己的内距留白，避免前后缀之间出现双份间距。 */
+  [data-scope='input-group'][data-part='root'] > [data-scope='input-group'][data-part='item']:first-child {
+    padding-inline-end: 0;
+  }
+
+  [data-scope='input-group'][data-part='root'] > [data-scope='input-group'][data-part='item']:last-child {
+    padding-inline-start: 0;
+  }
+
+  [data-scope='input-group'][data-part='item'][hidden] {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='input-group'][data-part='root'],
+    [data-scope='input-group'][data-part='root']::before {
+      transition: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='input-group'][data-part='root'],
+  :where([data-motion='reduce']) [data-scope='input-group'][data-part='root']::before {
+    transition: none;
+  }
+
+  @media (forced-colors: active) {
+    [data-scope='input-group'][data-part='root'] {
+      background: Canvas;
+      box-shadow: none;
+    }
+
+    [data-scope='input-group'][data-part='root']::before {
+      border-color: ButtonText;
+    }
+
+    [data-scope='input-group'][data-part='root']:focus-within {
+      outline-color: Highlight;
+    }
+
+    [data-scope='input-group'][data-part='root']:focus-within::before,
+    [data-scope='input-group'][data-part='root']:has([data-invalid], [aria-invalid='true'])::before {
+      border-color: Highlight;
+    }
+
+    [data-scope='input-group'][data-part='item'] {
+      color: CanvasText;
+    }
+  }
+}

package/css/json-viewer.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 json viewer 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='json-viewer'] {
@@ -7,24 +14,15 @@
   /* 缺省态（md 档）。等宽字体让层级缩进与值的长度对得齐。
      逐类型配色走 --xh-syntax-* 语法令牌，与代码块的记号色同源、随主题明暗切换。 */
   [data-scope='json-viewer'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-json-viewer-icon-size, var(--xh-glyph-size-text));
+    /* 作者放进空态格里的图标按档取尺，缺省 md，随 data-size 换档（§6.5）。
+       查看器自绘的状态字形（分支行首的展开方向 chevron）不读这支：它是指示符，与所在的把手盒同走
+       --xh-control-indicator-* 一族——branch-trigger 在自己身上把 --xh-icon-size 改接到盒的尺 */
+    --xh-icon-size: var(--xh-json-viewer-icon-size, var(--xh-glyph-size-md));
 
     --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);
-    --xh-json-viewer-punctuation-fg: var(--xh-fg-subtle);
-    --xh-json-viewer-null-fg: var(--xh-fg-subtle);
-    --xh-json-viewer-string-fg: var(--xh-syntax-string);
-    --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));
@@ -37,20 +35,38 @@
     display: none;
   }
 
+  /* 面画在两档容器与空态格上，root 只是壳。三档按 §8.3 边界三选一：outline 即基础规则
+     （--xh-border-default 描边 + surface 底 + 无影）；淡底档描边透明、底换 subtle；
+     无框档边框留着但透明——去掉外框不会让行的位置跳一格 */
+  [data-scope='json-viewer'][data-part='root'][data-variant='subtle']
+    :is([data-scope='json-viewer'][data-part='tree'], [data-scope='json-viewer'][data-part='text'], [data-scope='json-viewer'][data-part='empty']) {
+    border-color: transparent;
+    background: var(--xh-json-viewer-bg, var(--xh-bg-subtle));
+  }
+
+  [data-scope='json-viewer'][data-part='root'][data-variant='ghost']
+    :is([data-scope='json-viewer'][data-part='tree'], [data-scope='json-viewer'][data-part='text'], [data-scope='json-viewer'][data-part='empty']) {
+    border-color: transparent;
+    background: transparent;
+  }
+
   /* 尺寸轴只换私有槽，部件从 root 继承 */
   [data-scope='json-viewer'][data-part='root'][data-size='sm'] {
+    --xh-icon-size: var(--xh-json-viewer-icon-size, var(--xh-glyph-size-sm));
     --xh-_json-viewer-font-size: var(--xh-control-caption-sm);
     --xh-_json-viewer-row-py: var(--xh-space-0);
     --xh-_json-viewer-indent: var(--xh-space-3);
   }
 
   [data-scope='json-viewer'][data-part='root'][data-size='lg'] {
+    --xh-icon-size: var(--xh-json-viewer-icon-size, var(--xh-glyph-size-lg));
     --xh-_json-viewer-font-size: var(--xh-control-caption-lg);
     --xh-_json-viewer-row-py: var(--xh-space-1);
     --xh-_json-viewer-indent: var(--xh-space-5);
   }
 
-  /* 常驻容器不是浮层：两轴都可能溢出——深层缩进往行首方向推、长字符串往行尾伸 */
+  /* 常驻容器不是浮层：两轴都可能溢出——深层缩进往行首方向推、长字符串往行尾伸；
+     页内结构容器走 reset 层的原生细条（§6.6），不写 overscroll */
   [data-scope='json-viewer'][data-part='tree'] {
     display: flex;
     flex-direction: column;
@@ -60,6 +76,7 @@
     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));
+    box-shadow: var(--xh-json-viewer-shadow, none);
     overflow: auto;
   }
 
@@ -73,6 +90,7 @@
     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));
+    box-shadow: var(--xh-json-viewer-shadow, none);
     color: var(--xh-json-viewer-text-fg, var(--xh-fg-default));
     font-family: var(--xh-json-viewer-font, var(--xh-font-family-mono));
     /* 缩进靠空格，行不折：折行会把层级读乱，横向给滚动条 */
@@ -85,12 +103,6 @@
   [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;
   }
@@ -108,8 +120,7 @@
 
   [data-scope='json-viewer'][data-part='branch']:focus-visible > [data-scope='json-viewer'][data-part='branch-control'] {
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    /* 往内收：行是撑满宽度的，环画在外沿会被容器裁掉 */
-    outline-offset: calc(-1 * var(--xh-ring-width));
+    outline-offset: var(--xh-ring-offset);
   }
 
   /* 行：标量与分支共用同一套盒子，两种行在视觉上必须齐平 */
@@ -143,17 +154,17 @@
     user-select: none;
   }
 
-  /* 标量行的焦点环直接画在行上：它自己就是 treeitem */
-  [data-scope='json-viewer'][data-part='item']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-width));
+  /* 按下只换面不缩放：白底承载 hover 100 → pressed 200（§7.2 / §9.2 集合行不允许零反馈）；
+     指针按住由 :active 表出，Space / Enter 与触屏按住由 Headless 投影 data-pressed，三种输入同一副面 */
+  [data-scope='json-viewer'][data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) {
+    background: var(--xh-json-viewer-row-bg-active, var(--xh-bg-subtle-hover));
   }
 
   /* 键名不参与压缩：它短且必须完整可读，被挤掉的应该是值 */
   [data-scope='json-viewer'][data-part='item-key'],
   [data-scope='json-viewer'][data-part='branch-text'] {
     flex: none;
-    color: var(--xh-json-viewer-key-fg);
+    color: var(--xh-json-viewer-key-fg, var(--xh-fg-brand-strong));
     font-weight: var(--xh-json-viewer-key-font-weight, var(--xh-font-weight-medium));
   }
 
@@ -161,7 +172,7 @@
   [data-scope='json-viewer'][data-part='item-key']::after,
   [data-scope='json-viewer'][data-part='branch-text']::after {
     content: ':';
-    color: var(--xh-json-viewer-punctuation-fg);
+    color: var(--xh-json-viewer-punctuation-fg, var(--xh-fg-subtle));
   }
 
   /* 弹性子项默认最小尺寸是内容尺寸，不归零则长字符串把行撑破、省略号轮不上 */
@@ -173,26 +184,26 @@
     text-overflow: ellipsis;
   }
 
-  [data-scope='json-viewer'][data-part='item-value'][data-type='string'] {
-    color: var(--xh-json-viewer-string-fg);
+  [data-scope='json-viewer'][data-part='item-value'][data-value-type='string'] {
+    color: var(--xh-json-viewer-string-fg, var(--xh-syntax-string));
   }
 
-  [data-scope='json-viewer'][data-part='item-value'][data-type='number'] {
-    color: var(--xh-json-viewer-number-fg);
+  [data-scope='json-viewer'][data-part='item-value'][data-value-type='number'] {
+    color: var(--xh-json-viewer-number-fg, var(--xh-syntax-number));
   }
 
-  [data-scope='json-viewer'][data-part='item-value'][data-type='boolean'] {
-    color: var(--xh-json-viewer-boolean-fg);
+  [data-scope='json-viewer'][data-part='item-value'][data-value-type='boolean'] {
+    color: var(--xh-json-viewer-boolean-fg, var(--xh-syntax-keyword));
   }
 
-  [data-scope='json-viewer'][data-part='item-value'][data-type='null'] {
-    color: var(--xh-json-viewer-null-fg);
+  [data-scope='json-viewer'][data-part='item-value'][data-value-type='null'] {
+    color: var(--xh-json-viewer-null-fg, var(--xh-fg-subtle));
   }
 
   /* 空对象与空数组只剩一对括号，跟标点同色 */
-  [data-scope='json-viewer'][data-part='item-value'][data-type='array'],
-  [data-scope='json-viewer'][data-part='item-value'][data-type='object'] {
-    color: var(--xh-json-viewer-punctuation-fg);
+  [data-scope='json-viewer'][data-part='item-value'][data-value-type='array'],
+  [data-scope='json-viewer'][data-part='item-value'][data-value-type='object'] {
+    color: var(--xh-json-viewer-punctuation-fg, var(--xh-fg-subtle));
   }
 
   /* 循环引用与截断占位不是真数据，排在语气之外用弱化字重表达 */
@@ -202,8 +213,13 @@
     font-style: italic;
   }
 
-  /* 展开箭头与勾选标记同宽，两种行的文字起点才对得齐 */
+  /* 展开箭头与勾选标记同宽，两种行的文字起点才对得齐。
+     盒里的 chevron 是指示符（§6.5）：与盒同边长，--xh-icon-size 在自己身上改接到盒的尺——
+     root 那支只管作者图标的 --xh-json-viewer-icon-size 不流进来，按图标档取的 20px 会比 16px 的盒还大；
+     branch-indicator 由适配器固定渲染在这颗把手里，继承即可 */
   [data-scope='json-viewer'][data-part='branch-trigger'] {
+    --xh-icon-size: var(--xh-json-viewer-indicator-size, var(--xh-control-indicator-size));
+
     display: inline-flex;
     flex: none;
     align-items: center;
@@ -219,19 +235,20 @@
   [data-scope='json-viewer'][data-part='branch-indicator'] {
     display: inline-block;
     line-height: var(--xh-leading-none);
-    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='json-viewer'][data-part='branch-indicator'][hidden] {
     display: none;
   }
 
-  /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
+  /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中。
+     尺寸读把手改接过的 --xh-icon-size：chevron 与盒同边长（见 branch-trigger 块） */
   [data-scope='json-viewer'][data-part='branch-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));
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
     vertical-align: var(--xh-glyph-baseline-shift);
     background-color: currentColor;
     -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
@@ -271,4 +288,44 @@
   [data-scope='json-viewer'][data-part='branch-content'][hidden] {
     display: none;
   }
+
+  /* —— 空态 —— */
+  /* 一行也摊不出来时占位的那一格：与两档容器共用同一套边框与高度令牌，空与不空盒子不跳 */
+  [data-scope='json-viewer'][data-part='empty'] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-json-viewer-empty-gap, var(--xh-space-2));
+    padding-block: var(--xh-json-viewer-empty-py, var(--xh-space-6));
+    padding-inline: var(--xh-json-viewer-empty-px, var(--xh-space-4));
+    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));
+    box-shadow: var(--xh-json-viewer-shadow, none);
+    color: var(--xh-json-viewer-empty-fg, var(--xh-fg-muted));
+    text-align: center;
+  }
+
+  [data-scope='json-viewer'][data-part='empty'][hidden] {
+    display: none;
+  }
+
+  /*
+   * 高对比档：分支行的按压面常态靠底色深一档表出，这一档里底色被统一换成 Canvas，
+   * 按住那一下与静息塌成同一个样子；用系统高亮反色画回来，行里的键名、摘要与箭头跟着换成反色前景
+   */
+  @media (forced-colors: active) {
+    [data-scope='json-viewer'][data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) {
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    [data-scope='json-viewer'][data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) [data-scope='json-viewer'][data-part='branch-text'],
+    [data-scope='json-viewer'][data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) [data-scope='json-viewer'][data-part='branch-text']::after,
+    [data-scope='json-viewer'][data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) [data-scope='json-viewer'][data-part='preview'],
+    [data-scope='json-viewer'][data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) [data-scope='json-viewer'][data-part='branch-indicator'] {
+      color: HighlightText;
+    }
+  }
 }