@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/json-viewer.css

@@ -0,0 +1,379 @@
+/*
+ * 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 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-json-viewer {
+    --xh-json-viewer-skin: 1;
+  }
+
+  /* 缺省态（md 档）。等宽字体让层级缩进与值的长度对得齐。
+     逐类型配色走 --xh-syntax-* 语法令牌，与代码块的记号色同源、随主题明暗切换。 */
+  .xh-scope-json-viewer[data-part='root'] {
+    /* 作者放进空态格里的图标按档取尺，缺省 md，随 data-size 换档。
+       查看器自绘的状态字形（分支行首的展开方向 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);
+
+    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}，这里补回 */
+  .xh-scope-json-viewer[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 面画在两档容器与空态格上，root 只是壳。三档按边界三选一：outline 即基础规则
+     （--xh-border-default 描边 + surface 底 + 无影）；淡底档描边透明、底换 subtle；
+     无框档边框留着但透明——去掉外框不会让行的位置跳一格 */
+  .xh-scope-json-viewer[data-part='root'][data-variant='subtle']
+    :is(.xh-scope-json-viewer[data-part='tree'], .xh-scope-json-viewer[data-part='text'], .xh-scope-json-viewer[data-part='empty']) {
+    border-color: transparent;
+    background: var(--xh-json-viewer-bg, var(--xh-bg-subtle));
+  }
+
+  .xh-scope-json-viewer[data-part='root'][data-variant='ghost']
+    :is(.xh-scope-json-viewer[data-part='tree'], .xh-scope-json-viewer[data-part='text'], .xh-scope-json-viewer[data-part='empty']) {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  /* 尺寸轴只换私有槽，部件从 root 继承 */
+  .xh-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);
+  }
+
+  .xh-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 层的原生细条，不写 overscroll */
+  .xh-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));
+    box-shadow: var(--xh-json-viewer-shadow, none);
+    overflow: auto;
+  }
+
+  /* 原文档：与树档共用同一套边框、内衬与高度令牌，两档切过去盒子不跳。
+     整块可框选——这一档存在的理由就是把与后端一字不差的那份原文交到手上 */
+  .xh-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));
+    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));
+    /* 缩进靠空格，行不折：折行会把层级读乱，横向给滚动条 */
+    white-space: pre;
+    tab-size: 2;
+    overflow: auto;
+    user-select: text;
+  }
+
+  .xh-scope-json-viewer[data-part='text'][hidden] {
+    display: none;
+  }
+  .xh-scope-json-viewer[data-part='tree'][hidden] {
+    display: none;
+  }
+
+  /* 焦点在树外时容器自己进 Tab 序列兜底，落焦不画环：环永远长在行上 */
+  .xh-scope-json-viewer[data-part='tree']:focus-visible {
+    outline: none;
+  }
+
+  /* 焦点落在 branch 上（它才是 treeitem），但环画在它自己那一行上：
+     整棵子层套一圈描边会把展开的层级全框进去 */
+  .xh-scope-json-viewer[data-part='branch']:focus-visible {
+    outline: none;
+  }
+
+  .xh-scope-json-viewer[data-part='branch']:focus-visible > .xh-scope-json-viewer[data-part='branch-control'] {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 行：标量与分支共用同一套盒子，两种行在视觉上必须齐平 */
+  .xh-scope-json-viewer[data-part='item'],
+  .xh-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-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-json-viewer[data-part='item'][hidden],
+  .xh-scope-json-viewer[data-part='branch-control'][hidden] {
+    display: none;
+  }
+
+  /* 悬停与键盘锚点共用中性灰轻档：data-highlighted 跟的是连接层记的焦点行，
+     键盘落焦另有聚焦环标记位置 */
+  .xh-scope-json-viewer[data-part='item']:is(:hover, [data-highlighted]),
+  .xh-scope-json-viewer[data-part='branch-control']:is(:hover, [data-highlighted]) {
+    background: var(--xh-json-viewer-row-bg-hover, var(--xh-bg-subtle));
+  }
+
+  /* 分支那一行是唯一的点击目标：点它切换展开态 */
+  .xh-scope-json-viewer[data-part='branch-control'] {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* 按下只换面不缩放：白底承载 hover 100 → pressed 200（集合行不允许零反馈）；
+     指针按住由 :active 表出，Space / Enter 与触屏按住由 Headless 投影 data-pressed，三种输入同一副面 */
+  .xh-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));
+  }
+
+  /* 键名不参与压缩：它短且必须完整可读，被挤掉的应该是值 */
+  .xh-scope-json-viewer[data-part='item-key'],
+  .xh-scope-json-viewer[data-part='branch-text'] {
+    flex: none;
+    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));
+  }
+
+  /* 键名与值之间的冒号由皮肤画：它是排版符号，进不了可及名字反而更清爽 */
+  .xh-scope-json-viewer[data-part='item-key']::after,
+  .xh-scope-json-viewer[data-part='branch-text']::after {
+    content: ':';
+    color: var(--xh-json-viewer-punctuation-fg, var(--xh-fg-subtle));
+  }
+
+  /* 弹性子项默认最小尺寸是内容尺寸，不归零则长字符串把行撑破、省略号轮不上 */
+  .xh-scope-json-viewer[data-part='item-value'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .xh-scope-json-viewer[data-part='item-value'][data-value-type='string'] {
+    color: var(--xh-json-viewer-string-fg, var(--xh-syntax-string));
+  }
+
+  .xh-scope-json-viewer[data-part='item-value'][data-value-type='number'] {
+    color: var(--xh-json-viewer-number-fg, var(--xh-syntax-number));
+  }
+
+  .xh-scope-json-viewer[data-part='item-value'][data-value-type='boolean'] {
+    color: var(--xh-json-viewer-boolean-fg, var(--xh-syntax-keyword));
+  }
+
+  .xh-scope-json-viewer[data-part='item-value'][data-value-type='null'] {
+    color: var(--xh-json-viewer-null-fg, var(--xh-fg-subtle));
+  }
+
+  /* 空对象与空数组只剩一对括号，跟标点同色 */
+  .xh-scope-json-viewer[data-part='item-value'][data-value-type='array'],
+  .xh-scope-json-viewer[data-part='item-value'][data-value-type='object'] {
+    color: var(--xh-json-viewer-punctuation-fg, var(--xh-fg-subtle));
+  }
+
+  /* 循环引用与截断占位不是真数据，排在语气之外用弱化字重表达 */
+  .xh-scope-json-viewer[data-part='item-value'][data-circular],
+  .xh-scope-json-viewer[data-part='item-value'][data-truncated] {
+    color: var(--xh-fg-muted);
+    font-style: italic;
+  }
+
+  /* 展开箭头与勾选标记同宽，两种行的文字起点才对得齐。
+     盒里的 chevron 是指示符：与盒同边长，--xh-icon-size 在自己身上改接到盒的尺——
+     root 那支只管作者图标的 --xh-json-viewer-icon-size 不流进来，按图标档取的 20px 会比 16px 的盒还大；
+     branch-indicator 由适配器固定渲染在这颗把手里，继承即可 */
+  .xh-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;
+    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));
+  }
+
+  .xh-scope-json-viewer[data-part='branch-trigger'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-json-viewer[data-part='branch-indicator'] {
+    display: inline-block;
+    line-height: var(--xh-leading-none);
+    transition: rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
+  }
+
+  .xh-scope-json-viewer[data-part='branch-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中。
+     尺寸读把手改接过的 --xh-icon-size：chevron 与盒同边长（见 branch-trigger 块） */
+  .xh-scope-json-viewer[data-part='branch-indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    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;
+    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+  }
+
+  /* 收起时朝向行首、展开时转向下方，与逻辑书写方向一致：
+     rtl 下 inline-start 在右侧，箭头因此要反着转 */
+  .xh-scope-json-viewer[data-part='branch-indicator'][data-state='open'] {
+    rotate: 90deg;
+  }
+
+  [dir='rtl'] .xh-scope-json-viewer[data-part='branch-indicator'] {
+    rotate: 180deg;
+  }
+
+  [dir='rtl'] .xh-scope-json-viewer[data-part='branch-indicator'][data-state='open'] {
+    rotate: 90deg;
+  }
+
+  /* 收起摘要不参与选中：框选整块 JSON 时不该把它一起复制走 */
+  .xh-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;
+  }
+
+  /* 层级缩进靠子层容器自己顶：分支物理嵌套着子层，每深一层就多缩一格，
+     无需把层级号写进内联样式，也就不必在两个适配器里各写一遍 */
+  .xh-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));
+  }
+
+  .xh-scope-json-viewer[data-part='branch-content'][hidden] {
+    display: none;
+  }
+
+  /* —— 空态 —— */
+  /* 一行也摊不出来时占位的那一格：与两档容器共用同一套边框与高度令牌，空与不空盒子不跳 */
+  .xh-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;
+  }
+
+  .xh-scope-json-viewer[data-part='empty'][hidden] {
+    display: none;
+  }
+
+  /*
+   * 搜索命中的那一段：与 Highlight 的命中片段同一身份（品牌淡底 + 品牌深字），浏览器给 mark 的固定亮黄不随主题走。
+   * 在命中之间逐个走时停住的那一行（data-current），片段换成品牌实心，一眼分得出「现在停在哪」。
+   */
+  .xh-scope-json-viewer[data-part='mark'] {
+    border-radius: var(--xh-json-viewer-mark-radius, var(--xh-shape-inset));
+    background: var(--xh-json-viewer-mark-bg, var(--xh-bg-brand-subtle));
+    color: var(--xh-json-viewer-mark-fg, var(--xh-fg-brand-strong));
+  }
+
+  .xh-scope-json-viewer[data-part='branch'][data-current] > .xh-scope-json-viewer[data-part='branch-control'] > .xh-scope-json-viewer[data-part='branch-text'] > .xh-scope-json-viewer[data-part='mark'],
+  .xh-scope-json-viewer[data-part='item'][data-current] > .xh-scope-json-viewer[data-part='item-key'] > .xh-scope-json-viewer[data-part='mark'],
+  .xh-scope-json-viewer[data-part='item'][data-current] > .xh-scope-json-viewer[data-part='item-value'] > .xh-scope-json-viewer[data-part='mark'] {
+    background: var(--xh-json-viewer-mark-bg-current, var(--xh-bg-brand));
+    color: var(--xh-json-viewer-mark-fg-current, var(--xh-fg-on-brand));
+  }
+
+  /*
+   * 高对比档：分支行的按压面常态靠底色深一档表出，这一档里底色被统一换成 Canvas，
+   * 按住那一下与静息塌成同一个样子；用系统高亮反色画回来，行里的键名、摘要与箭头跟着换成反色前景
+   */
+  @media (forced-colors: active) {
+    .xh-scope-json-viewer[data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) {
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    /* 系统色下底色统一成 Canvas：命中片段改画一圈正文色的框，停住的那一条换成系统高亮 */
+    .xh-scope-json-viewer[data-part='mark'] {
+      outline: var(--xh-stroke-thin) solid CanvasText;
+    }
+
+    .xh-scope-json-viewer[data-part='branch'][data-current] > .xh-scope-json-viewer[data-part='branch-control'] > .xh-scope-json-viewer[data-part='branch-text'] > .xh-scope-json-viewer[data-part='mark'],
+    .xh-scope-json-viewer[data-part='item'][data-current] > .xh-scope-json-viewer[data-part='item-key'] > .xh-scope-json-viewer[data-part='mark'],
+    .xh-scope-json-viewer[data-part='item'][data-current] > .xh-scope-json-viewer[data-part='item-value'] > .xh-scope-json-viewer[data-part='mark'] {
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    .xh-scope-json-viewer[data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) .xh-scope-json-viewer[data-part='branch-text'],
+    .xh-scope-json-viewer[data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) .xh-scope-json-viewer[data-part='branch-text']::after,
+    .xh-scope-json-viewer[data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) .xh-scope-json-viewer[data-part='preview'],
+    .xh-scope-json-viewer[data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) .xh-scope-json-viewer[data-part='branch-indicator'] {
+      color: HighlightText;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       分支行上取 CanvasText，按下时整行涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-json-viewer[data-part='branch-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .xh-scope-json-viewer[data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) .xh-scope-json-viewer[data-part='branch-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-json-viewer[data-part='branch-control'][data-disabled] .xh-scope-json-viewer[data-part='branch-indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
+}

package/dist/css/kbd.css

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 kbd 样式。 */
+
+@layer xihan.components {
+  .xh-scope-kbd {
+    --xh-kbd-skin: 1;
+  }
+
+  /* 单键和组合键共用一个整体表面，不模拟按钮按下状态。 */
+  .xh-scope-kbd[data-part='root'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-kbd-gap, var(--xh-space-1));
+    box-sizing: border-box;
+    block-size: var(--xh-kbd-h, var(--xh-space-6));
+    min-inline-size: var(--xh-kbd-min-w, var(--xh-space-6));
+    padding-inline: var(--xh-kbd-px, var(--xh-space-2));
+    border: var(--xh-stroke-thin) solid var(--xh-kbd-border, transparent);
+    border-radius: var(--xh-kbd-radius, var(--xh-shape-control));
+    background: var(--xh-kbd-bg, var(--xh-bg-subtle));
+    color: var(--xh-kbd-fg, var(--xh-fg-muted));
+    font-family: var(--xh-kbd-font, inherit);
+    /* 快捷键是次级标注，字号取 caption 档 */
+    font-size: var(--xh-kbd-font-size, var(--xh-text-caption-size));
+    font-weight: var(--xh-kbd-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    direction: ltr;
+    unicode-bidi: isolate;
+  }
+
+  .xh-scope-kbd[data-part='root'][data-variant='light'] {
+    background: transparent;
+  }
+
+  .xh-scope-kbd[data-part='key'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+  }
+
+  .xh-scope-kbd[data-part='root'][data-disabled] {
+    color: var(--xh-kbd-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  .xh-scope-kbd[data-part='root'][hidden],
+  .xh-scope-kbd[data-part='key'][hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    .xh-scope-kbd[data-part='root']:not([data-variant='light']) {
+      border-color: ButtonText;
+      background: Canvas;
+      color: CanvasText;
+    }
+  }
+}

package/dist/css/label.css

@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 字段族标签的公共层，按 [data-part='label'] 匹配下面逐个列出的 scope。
+ *
+ * 收在这里的是逐值相同的四条：行距取 --xh-leading-none，禁用档字色取 --xh-fg-subtle，
+ * 必填星号取 --xh-glyph-mark-required + --xh-space-1 + --xh-fg-danger，无效档字色取 --xh-fg-danger。
+ * 字色、字号、字重三条留在各组件皮肤——它们挂着 --xh-<组件>-label-* 覆盖槽，
+ * 槽名里带组件名，写不进一条共享规则。
+ *
+ * scope 逐个列出，不写成 [data-scope][data-part='label']：label 这个部件名在标签、
+ * 统计、进度、推理、说明列表上指的是另一种文字（行内省略的标签正文、环内居中的数字、
+ * 描述项的名字），通配规则会把行距按到它们头上。要接进来的组件把 scope 加进列表。
+ *
+ * 选择器停在两个属性（0,2,0）或三个属性（0,3,0），与组件皮肤同级；引入顺序排在全部组件皮肤之前，
+ * 要另写行距的组件照写即可压过。
+ */
+@layer xihan.components {
+  /* 标签是单行短文，行距不留额外的行间空白，标签与控件之间只剩容器给的那一道间距。 */
+  .xh-scope-checkbox[data-part='label'],
+  .xh-scope-checkbox-group[data-part='label'],
+  .xh-scope-color-picker[data-part='label'],
+  .xh-scope-date-field[data-part='label'],
+  .xh-scope-editable[data-part='label'],
+  .xh-scope-field[data-part='label'],
+  .xh-scope-file-upload[data-part='label'],
+  .xh-scope-number-field[data-part='label'],
+  .xh-scope-password-input[data-part='label'],
+  .xh-scope-pin-input[data-part='label'],
+  .xh-scope-radio-group[data-part='label'],
+  .xh-scope-rating[data-part='label'],
+  .xh-scope-signature-pad[data-part='label'],
+  .xh-scope-slider[data-part='label'],
+  .xh-scope-switch[data-part='label'],
+  .xh-scope-tags-input[data-part='label'],
+  .xh-scope-text-field[data-part='label'],
+  .xh-scope-time-field[data-part='label'] {
+    line-height: var(--xh-leading-none);
+  }
+
+  /*
+   * 禁用档的字色：公共层默认统一 --xh-fg-subtle。这四家没有 --xh-<组件>-label-fg-disabled 覆盖槽，
+   * 取值只有这一处；挂了那个槽的组件在各自皮肤里另写一条，排在本份之后，压过这里。
+   */
+  .xh-scope-color-picker[data-part='label'][data-disabled],
+  .xh-scope-rating[data-part='label'][data-disabled],
+  .xh-scope-signature-pad[data-part='label'][data-disabled],
+  .xh-scope-slider[data-part='label'][data-disabled] {
+    color: var(--xh-fg-subtle);
+  }
+
+  /*
+   * 必填星号：跟着标签自己的 data-required 亮，选填不标。字形、间距、颜色是公共层规则，
+   * 自带标签的字段不得各画一套。
+   *
+   * 接入 = connect 在标签部件投影 data-required + 把 scope 加进这张列表；控件本体不画。
+   * 有 --xh-<组件>-label-star 覆盖槽的组件在各自皮肤里只另写一条 color 压过这里（field 的
+   * --xh-field-label-star、fieldset 的 --xh-fieldset-legend-star），content 与间距不再重写。
+   */
+  .xh-scope-field[data-part='label'][data-required]::after,
+  .xh-scope-fieldset[data-part='legend'][data-required]::after {
+    content: var(--xh-glyph-mark-required);
+    margin-inline-start: var(--xh-space-1);
+    color: var(--xh-fg-danger);
+  }
+
+  /*
+   * 无效档的字色：标签跟着自己的 data-invalid 转警示色，没渲染错误文案的字段上这是唯一变化的东西。
+   * 有 --xh-<组件>-label-fg-invalid 覆盖槽的组件在各自皮肤里另写一条 color 压过这里。
+   */
+  .xh-scope-field[data-part='label'][data-invalid],
+  .xh-scope-fieldset[data-part='legend'][data-invalid] {
+    color: var(--xh-fg-danger);
+  }
+}

package/dist/css/layers.css

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 库层序单一真源：级联顺序由首次声明决定，与 @import 顺序解耦。 */
+@layer xihan.reset, xihan.tokens, xihan.motion, xihan.components, xihan.overrides;