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

package/css/json-viewer.css

@@ -0,0 +1,274 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='json-viewer'] {
+    --xh-json-viewer-skin: 1;
+  }
+
+  /* 缺省态（md 档）。等宽字体让层级缩进与值的长度对得齐。
+     逐类型配色走 --xh-syntax-* 语法令牌，与代码块的记号色同源、随主题明暗切换。 */
+  [data-scope='json-viewer'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-json-viewer-icon-size, var(--xh-glyph-size-text));
+
+    --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));
+    font-size: var(--xh-json-viewer-font-size, var(--xh-_json-viewer-font-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  /* 写了 display 就会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  [data-scope='json-viewer'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 尺寸轴只换私有槽，部件从 root 继承 */
+  [data-scope='json-viewer'][data-part='root'][data-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-_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);
+  }
+
+  /* 常驻容器不是浮层：两轴都可能溢出——深层缩进往行首方向推、长字符串往行尾伸 */
+  [data-scope='json-viewer'][data-part='tree'] {
+    display: flex;
+    flex-direction: column;
+    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));
+    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;
+  }
+
+  /* 焦点在树外时容器自己进 Tab 序列兜底，落焦不画环：环永远长在行上 */
+  [data-scope='json-viewer'][data-part='tree']:focus-visible {
+    outline: none;
+  }
+
+  /* 焦点落在 branch 上（它才是 treeitem），但环画在它自己那一行上：
+     整棵子层套一圈描边会把展开的层级全框进去 */
+  [data-scope='json-viewer'][data-part='branch']:focus-visible {
+    outline: none;
+  }
+
+  [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));
+  }
+
+  /* 行：标量与分支共用同一套盒子，两种行在视觉上必须齐平 */
+  [data-scope='json-viewer'][data-part='item'],
+  [data-scope='json-viewer'][data-part='branch-control'] {
+    display: flex;
+    align-items: baseline;
+    gap: var(--xh-json-viewer-row-gap, var(--xh-space-1));
+    padding-block: var(--xh-json-viewer-row-py, var(--xh-_json-viewer-row-py));
+    padding-inline: var(--xh-json-viewer-row-px, var(--xh-space-1));
+    border-radius: var(--xh-json-viewer-row-radius, var(--xh-shape-inset));
+    white-space: nowrap;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='json-viewer'][data-part='item'][hidden],
+  [data-scope='json-viewer'][data-part='branch-control'][hidden] {
+    display: none;
+  }
+
+  /* 悬停与键盘锚点共用中性灰轻档：data-highlighted 跟的是连接层记的焦点行，
+     键盘落焦另有聚焦环标记位置 */
+  [data-scope='json-viewer'][data-part='item']:is(:hover, [data-highlighted]),
+  [data-scope='json-viewer'][data-part='branch-control']:is(:hover, [data-highlighted]) {
+    background: var(--xh-json-viewer-row-bg-hover, var(--xh-bg-subtle));
+  }
+
+  /* 分支那一行是唯一的点击目标：点它切换展开态 */
+  [data-scope='json-viewer'][data-part='branch-control'] {
+    cursor: pointer;
+    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));
+  }
+
+  /* 键名不参与压缩：它短且必须完整可读，被挤掉的应该是值 */
+  [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);
+    font-weight: var(--xh-json-viewer-key-font-weight, var(--xh-font-weight-medium));
+  }
+
+  /* 键名与值之间的冒号由皮肤画：它是排版符号，进不了可及名字反而更清爽 */
+  [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);
+  }
+
+  /* 弹性子项默认最小尺寸是内容尺寸，不归零则长字符串把行撑破、省略号轮不上 */
+  [data-scope='json-viewer'][data-part='item-value'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    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-type='number'] {
+    color: var(--xh-json-viewer-number-fg);
+  }
+
+  [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-type='null'] {
+    color: var(--xh-json-viewer-null-fg);
+  }
+
+  /* 空对象与空数组只剩一对括号，跟标点同色 */
+  [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-circular],
+  [data-scope='json-viewer'][data-part='item-value'][data-truncated] {
+    color: var(--xh-fg-muted);
+    font-style: italic;
+  }
+
+  /* 展开箭头与勾选标记同宽，两种行的文字起点才对得齐 */
+  [data-scope='json-viewer'][data-part='branch-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-json-viewer-indicator-size, var(--xh-control-indicator-size));
+    color: var(--xh-json-viewer-indicator-fg, var(--xh-fg-subtle));
+  }
+
+  [data-scope='json-viewer'][data-part='branch-trigger'][hidden] {
+    display: none;
+  }
+
+  [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);
+  }
+
+  [data-scope='json-viewer'][data-part='branch-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
+  [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));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+  }
+
+  /* 收起时朝向行首、展开时转向下方，与逻辑书写方向一致：
+     rtl 下 inline-start 在右侧，箭头因此要反着转 */
+  [data-scope='json-viewer'][data-part='branch-indicator'][data-state='open'] {
+    rotate: 90deg;
+  }
+
+  [dir='rtl'] [data-scope='json-viewer'][data-part='branch-indicator'] {
+    rotate: 180deg;
+  }
+
+  [dir='rtl'] [data-scope='json-viewer'][data-part='branch-indicator'][data-state='open'] {
+    rotate: 90deg;
+  }
+
+  /* 收起摘要不参与选中：框选整块 JSON 时不该把它一起复制走 */
+  [data-scope='json-viewer'][data-part='preview'] {
+    flex: none;
+    color: var(--xh-json-viewer-preview-fg, var(--xh-fg-muted));
+    font-size: var(--xh-json-viewer-preview-font-size, var(--xh-text-caption-size));
+    user-select: none;
+  }
+
+  /* 层级缩进靠子层容器自己顶：分支物理嵌套着子层，每深一层就多缩一格，
+     无需把层级号写进内联样式，也就不必在两个适配器里各写一遍 */
+  [data-scope='json-viewer'][data-part='branch-content'] {
+    display: flex;
+    flex-direction: column;
+    padding-inline-start: var(--xh-json-viewer-indent, var(--xh-_json-viewer-indent));
+  }
+
+  [data-scope='json-viewer'][data-part='branch-content'][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,13 +51,13 @@
     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);
   }
 
   /* 折起来时不换行：窄到放不下的那几个字直接被 overflow 裁掉，不会挤成一列竖排 */
-  [data-scope='layout'][data-part='sider'][data-state='collapsed'] {
+  [data-scope='layout'][data-part='sider'][data-collapsed] {
     inline-size: var(--xh-_layout-sider-collapsed-w);
     white-space: nowrap;
   }
@@ -66,15 +66,15 @@
     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-font-size-sm);
+    font-size: var(--xh-text-secondary-size);
   }
 
   /* —— 折叠把手 —— */
@@ -82,14 +82,14 @@
     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);
     color: var(--xh-layout-sider-trigger-fg, var(--xh-fg-default));
-    font-size: var(--xh-font-size-sm);
+    font-size: var(--xh-text-secondary-size);
     line-height: var(--xh-leading-none);
     cursor: pointer;
   }
@@ -156,19 +156,23 @@
   /* 侧栏保持默认的拉伸对齐，只加一道高度上限：内容短时它照旧填满整列，内容长过一屏时它收成
      可视区那么高，短出来的那一段就是 sticky 的行程。
      上限量的是滚动容器可视区的高度，缺省按视口算；滚动容器不是视口时由作者把那个高度写进
-     --xh-layout-scrollport-h。视口取 dvh：移动端地址栏收放会改变可视高度，dvh 跟着变。
+     --xh-layout-scrollport-h。视口取 dvh：移动端地址栏收放会改变可视高度，dvh 跟着变；
+     不认 dvh 的引擎由级联回落到前一条的 vh。
      侧栏自己的条目多到装不下时在内部滚，横轴仍归上面那条 overflow: hidden 裁，
      折叠态靠它把放不下的字裁掉；逻辑属性 overflow-block 尚无可用实现，写物理轴。 */
   [data-scope='layout'][data-part='sider'][data-fixed] {
     position: sticky;
     inset-block-start: var(--xh-_layout-sider-offset);
+    max-block-size: calc(var(--xh-layout-scrollport-h, 100vh) - var(--xh-_layout-sider-offset));
     max-block-size: calc(var(--xh-layout-scrollport-h, 100dvh) - var(--xh-_layout-sider-offset));
     overflow-y: auto;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='layout'][data-part='sider'] {
-      transition: none;
-    }
+  /* 声明过任何 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

@@ -7,11 +7,11 @@
   [data-scope='list'][data-part='root'] {
     /* 一个尺寸档只换这几个私有槽，条目与两行文字都从根上继承它们，
        换档不必给每个部件各写一条选择器 */
-    --xh-_list-item-py: var(--xh-space-3);
-    --xh-_list-item-px: var(--xh-space-4);
+    --xh-_list-item-py: var(--xh-list-item-py-md);
+    --xh-_list-item-px: var(--xh-list-item-px-md);
     --xh-_list-item-gap: var(--xh-space-3);
-    --xh-_list-title-size: var(--xh-font-size-md);
-    --xh-_list-description-size: var(--xh-font-size-sm);
+    --xh-_list-title-size: var(--xh-control-font-md);
+    --xh-_list-description-size: var(--xh-control-caption-md);
 
     display: flex;
     flex-direction: column;
@@ -29,18 +29,18 @@
 
   /* —— 尺寸 —— */
   [data-scope='list'][data-part='root'][data-size='sm'] {
-    --xh-_list-item-py: var(--xh-space-2);
-    --xh-_list-item-px: var(--xh-space-3);
+    --xh-_list-item-py: var(--xh-list-item-py-sm);
+    --xh-_list-item-px: var(--xh-list-item-px-sm);
     --xh-_list-item-gap: var(--xh-space-2);
-    --xh-_list-title-size: var(--xh-font-size-sm);
-    --xh-_list-description-size: var(--xh-font-size-xs);
+    --xh-_list-title-size: var(--xh-control-font-sm);
+    --xh-_list-description-size: var(--xh-control-caption-sm);
   }
 
   [data-scope='list'][data-part='root'][data-size='lg'] {
-    --xh-_list-item-py: var(--xh-space-4);
-    --xh-_list-item-px: var(--xh-space-5);
+    --xh-_list-item-py: var(--xh-list-item-py-lg);
+    --xh-_list-item-px: var(--xh-list-item-px-lg);
     --xh-_list-item-gap: var(--xh-space-4);
-    --xh-_list-title-size: var(--xh-font-size-lg);
+    --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

@@ -5,6 +5,9 @@
   }
 
   [data-scope='listbox'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-listbox-icon-size, var(--xh-glyph-size-text));
+
     display: flex;
     flex-direction: column;
     gap: var(--xh-listbox-gap, var(--xh-space-2));
@@ -31,7 +34,8 @@
   [data-scope='listbox'][data-part='content'] {
     display: flex;
     flex-direction: column;
-    max-block-size: var(--xh-listbox-content-max-h, var(--xh-overlay-max-h));
+    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));
     border: var(--xh-stroke-thin) solid var(--xh-listbox-content-border, var(--xh-border-default));
@@ -63,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] {
@@ -71,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));
   }
 
   /* 分组标题不是选项、进不了导航，画成小号次要文字，
@@ -81,7 +86,7 @@
     padding-block: var(--xh-listbox-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-listbox-group-label-px, var(--xh-control-px-md));
     color: var(--xh-listbox-group-label-fg, var(--xh-fg-subtle));
-    font-size: var(--xh-listbox-group-label-font-size, var(--xh-font-size-xs));
+    font-size: var(--xh-listbox-group-label-font-size, var(--xh-text-caption-size));
     font-weight: var(--xh-listbox-group-label-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-none);
     user-select: none;
@@ -132,7 +137,13 @@
     font-weight: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-medium));
   }
 
-  [data-scope='listbox'][data-part='item']:focus {
+  /* 键盘落焦的条目画内收环；指针触发的聚焦不画 */
+  [data-scope='listbox'][data-part='item']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='listbox'][data-part='item']:focus:not(:focus-visible) {
     outline: none;
   }
 
@@ -159,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;
   }
 
@@ -169,7 +180,14 @@
 
   /* 没写内容就由皮肤画勾；作者往部件里塞了自己的图形，这条规则即不命中 */
   [data-scope='listbox'][data-part='item-indicator']:empty::before {
-    content: '✓';
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
 
   [data-scope='listbox'][data-part='item-indicator'][data-state='checked'] {

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'] {
@@ -61,11 +62,17 @@
   }
 
   /* 减少动效：宽度与淡出都立刻到位。进度本身照常推进，只是不再有过渡的过程——
-     一条按 200ms 一拍持续变宽的带子正是最容易引发不适的那种动效 */
+     一条按 200ms 一拍持续变宽的带子正是最容易引发不适的那种动效。
+     两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
   @media (prefers-reduced-motion: reduce) {
     [data-scope='loading-bar'][data-part='root'],
     [data-scope='loading-bar'][data-part='range'] {
       transition: none;
     }
   }
+
+  :where([data-motion='reduce']) [data-scope='loading-bar'][data-part='root'],
+  :where([data-motion='reduce']) [data-scope='loading-bar'][data-part='range'] {
+    transition: none;
+  }
 }

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;
   }
 
@@ -55,7 +59,7 @@
     display: block;
     padding-inline: var(--xh-log-content-px, var(--xh-space-3));
     font-family: var(--xh-log-font, var(--xh-font-family-mono));
-    font-size: var(--xh-log-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-log-font-size, var(--xh-text-secondary-size));
   }
 
   [data-scope='log'][data-part='content'][hidden] {

package/css/marquee.css

@@ -174,6 +174,7 @@
    * 减少动效：轨道停在起点不再走。一段自己动起来、不停到底的横移正是最容易引发不适的那一类，
    * 这里不能只把速度压到很慢——慢速横移仍然是横移。
    * 停下后窗口外那段就够不着了，故窗口同时改成可滚，内容仍然读得全。
+   * 两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion。
    */
   @media (prefers-reduced-motion: reduce) {
     [data-scope='marquee'][data-part='content'] {
@@ -184,4 +185,12 @@
       overflow: auto;
     }
   }
+
+  :where([data-motion='reduce']) [data-scope='marquee'][data-part='content'] {
+    animation: none;
+  }
+
+  :where([data-motion='reduce']) [data-scope='marquee'][data-part='root'] {
+    overflow: auto;
+  }
 }