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

package/css/json-viewer.css

@@ -0,0 +1,241 @@
+@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-text-secondary-size);
+    --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);
+
+    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='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

@@ -57,7 +57,7 @@
   }
 
   /* 折起来时不换行：窄到放不下的那几个字直接被 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;
   }
@@ -74,7 +74,7 @@
     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);
   }
 
   /* —— 折叠把手 —— */
@@ -89,7 +89,7 @@
     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,15 @@
   /* 侧栏保持默认的拉伸对齐，只加一道高度上限：内容短时它照旧填满整列，内容长过一屏时它收成
      可视区那么高，短出来的那一段就是 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;
-    }
-  }
 }

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-py: var(--xh-list-item-py-md);
     --xh-_list-item-px: var(--xh-space-4);
     --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-py: var(--xh-list-item-py-sm);
     --xh-_list-item-px: var(--xh-space-3);
     --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-py: var(--xh-list-item-py-lg);
     --xh-_list-item-px: var(--xh-space-5);
     --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);
   }
 
   /* —— 外框 —— */

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,7 @@
   [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));
+    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));
@@ -81,7 +84,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 +135,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;
   }
 
@@ -169,7 +178,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

@@ -61,11 +61,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

@@ -55,7 +55,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;
+  }
 }

package/css/masonry.css

@@ -0,0 +1,63 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='masonry'] {
+    --xh-masonry-skin: 1;
+  }
+
+  [data-scope='masonry'][data-part='root'] {
+    display: flex;
+    /* 各列按自己的内容收高，不被最高的那列拉平——列不等高正是瀑布流的样子 */
+    align-items: flex-start;
+    gap: var(--xh-_masonry-gap);
+
+    /* 列间距与列内的项间距共用这一份取值，声明在根上、由列继承下去；
+       不写 gap 档位就不留间距。使用者槽位排在档位之前，写死一个值即盖过所有档 */
+    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-0));
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden] 规则，这里还回去 */
+  [data-scope='masonry'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='masonry'][data-part='column'] {
+    display: flex;
+    flex-direction: column;
+    /* 各列等宽；下限写 0 而不是 auto，一段长内容才不会把自己那列撑宽 */
+    flex: 1 1 0;
+    min-inline-size: 0;
+    gap: var(--xh-_masonry-gap);
+  }
+
+  /* 当前档位用不上的那几列由适配器收起；这条兜住作者自己写 hidden 的情形 */
+  [data-scope='masonry'][data-part='column'][hidden] {
+    display: none;
+  }
+
+  /* 项不发话，高度由内容定；只兜住一件事——不被列的弹性压缩，压缩了量到的高度就不是它真实的高度 */
+  [data-scope='masonry'][data-part='item'] {
+    flex: none;
+  }
+
+  /* —— 间距档位 —— */
+  /* 每一档指向一个间距令牌，列之间与列内项之间吃同一份间距 */
+  [data-scope='masonry'][data-part='root'][data-gap='xs'] {
+    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-1));
+  }
+
+  [data-scope='masonry'][data-part='root'][data-gap='sm'] {
+    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-2));
+  }
+
+  [data-scope='masonry'][data-part='root'][data-gap='md'] {
+    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-3));
+  }
+
+  [data-scope='masonry'][data-part='root'][data-gap='lg'] {
+    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-4));
+  }
+
+  [data-scope='masonry'][data-part='root'][data-gap='xl'] {
+    --xh-_masonry-gap: var(--xh-masonry-gap, var(--xh-space-6));
+  }
+}