@xihan-ui/styles 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/CHANGELOG.md +101 -0
  2. package/component-tokens.d.ts +0 -15
  3. package/components.tokens.json +65 -396
  4. package/css/accordion.css +6 -6
  5. package/css/alert.css +2 -2
  6. package/css/anchor.css +3 -3
  7. package/css/approval.css +8 -8
  8. package/css/back-top.css +2 -2
  9. package/css/badge.css +1 -1
  10. package/css/breadcrumb.css +1 -1
  11. package/css/button-group.css +1 -1
  12. package/css/button.css +2 -2
  13. package/css/calendar-picker.css +8 -8
  14. package/css/calendar-range-picker.css +9 -9
  15. package/css/card.css +1 -1
  16. package/css/carousel.css +6 -6
  17. package/css/cascader.css +3 -5
  18. package/css/checkbox-group.css +10 -10
  19. package/css/checkbox.css +5 -5
  20. package/css/clipboard.css +4 -4
  21. package/css/code-view.css +2 -2
  22. package/css/collapsible.css +4 -4
  23. package/css/color-picker.css +2 -4
  24. package/css/color-slider.css +4 -4
  25. package/css/color-swatch-picker.css +5 -5
  26. package/css/combobox.css +2 -4
  27. package/css/command.css +3 -5
  28. package/css/context-menu.css +4 -6
  29. package/css/date-picker.css +0 -2
  30. package/css/date-range-picker.css +0 -2
  31. package/css/descriptions.css +1 -1
  32. package/css/dialog.css +5 -7
  33. package/css/diff-view.css +4 -4
  34. package/css/download-trigger.css +3 -3
  35. package/css/drawer.css +9 -15
  36. package/css/empty-state.css +1 -1
  37. package/css/field.css +1 -1
  38. package/css/fieldset.css +1 -1
  39. package/css/file-upload.css +1 -1
  40. package/css/float-button.css +3 -3
  41. package/css/floating-panel.css +6 -8
  42. package/css/form.css +3 -3
  43. package/css/heatmap.css +1 -1
  44. package/css/hover-card.css +2 -4
  45. package/css/image-cropper.css +2 -2
  46. package/css/image-viewer.css +2 -4
  47. package/css/infinite-scroll.css +2 -2
  48. package/css/input-group.css +2 -2
  49. package/css/json-viewer.css +5 -5
  50. package/css/kbd.css +1 -1
  51. package/css/layout.css +3 -3
  52. package/css/list.css +1 -1
  53. package/css/listbox.css +26 -17
  54. package/css/log.css +2 -2
  55. package/css/mention.css +0 -2
  56. package/css/menu.css +5 -7
  57. package/css/menubar.css +6 -8
  58. package/css/message-feed.css +2 -2
  59. package/css/navigation-menu.css +5 -7
  60. package/css/notification.css +3 -3
  61. package/css/page-header.css +1 -1
  62. package/css/pagination.css +5 -7
  63. package/css/popconfirm.css +6 -8
  64. package/css/popover.css +5 -7
  65. package/css/prompt-input.css +1 -1
  66. package/css/question-flow.css +7 -7
  67. package/css/radio-group.css +9 -9
  68. package/css/rating.css +4 -4
  69. package/css/reasoning.css +5 -5
  70. package/css/reset.css +1 -1
  71. package/css/segmented.css +7 -7
  72. package/css/select.css +2 -4
  73. package/css/side-nav.css +4 -6
  74. package/css/signature-pad.css +7 -7
  75. package/css/slider.css +5 -5
  76. package/css/sortable.css +1 -1
  77. package/css/splitter.css +1 -1
  78. package/css/steps.css +10 -10
  79. package/css/switch.css +8 -8
  80. package/css/table.css +11 -11
  81. package/css/tabs.css +12 -12
  82. package/css/tag-group.css +39 -35
  83. package/css/tag.css +2 -2
  84. package/css/time-picker.css +0 -2
  85. package/css/time-range-picker.css +0 -2
  86. package/css/toast.css +3 -3
  87. package/css/toggle-group.css +4 -4
  88. package/css/toggle.css +2 -2
  89. package/css/tool-call.css +5 -5
  90. package/css/toolbar.css +4 -4
  91. package/css/tooltip.css +4 -6
  92. package/css/tour.css +7 -9
  93. package/css/transfer.css +6 -6
  94. package/css/tree-select.css +3 -5
  95. package/css/tree.css +46 -99
  96. package/css/virtualizer.css +1 -1
  97. package/family/collection-item.css +61 -12
  98. package/family/motion.css +1 -1
  99. package/index.css +506 -553
  100. package/index.unlayered.css +506 -553
  101. package/package.json +2 -2
@@ -151,12 +151,12 @@
151
151
  * 竖排 flex 里这两件事都做不到(叉会变成第三行)。
152
152
  * 底与描边一律中性,语气只由左列那枚字形承载:整片兑色是轻提示那条的做法,
153
153
  * 一张有标题有正文的卡片全片染色会把两层文字都压在同一片语气色上。
154
- * 面走 sheet 三件套(§8.4:--xh-material-elevated-bg / -border / -shadow,与 toast 同一套)。
154
+ * 面走 sheet 三件套(--xh-material-elevated-bg / -border / -shadow,与 toast 同一套)。
155
155
  *
156
156
  * 卡片的槽带 item 段(--xh-notification-item-*),与摞的 --xh-notification-inset 分开。
157
157
  */
158
158
  [data-scope='notification'][data-part='item'] {
159
- /* 作者塞进卡片里的图标与皮肤画的兜底字形同一把尺:Feedback 指示符统一 md 档(§6.5);
159
+ /* 作者塞进卡片里的图标与皮肤画的兜底字形同一把尺:Feedback 指示符统一 md 档;
160
160
  左列那枚类型字形另有自己的尺寸槽,叉与操作钮的字形各按按钮档取值 */
161
161
  --xh-icon-size: var(--xh-notification-icon-size, var(--xh-glyph-size-md));
162
162
 
@@ -360,7 +360,7 @@
360
360
  }
361
361
 
362
362
  /* 操作钮是带文案的离散动作钮:盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
363
- 的 text outline 档给(连接层投 sm;非 Button 的触发器缺省中性描边、透明底,§7.2.2),组件只映射既有使用者槽。
363
+ 的 text outline 档给(连接层投 sm;非 Button 的触发器缺省中性描边、透明底),组件只映射既有使用者槽。
364
364
  语气只落到左列字形:这颗钮坐在带 data-tone 的卡片里,底 / 边 / 字钉在中性语义面上,不随语气;
365
365
  卡片是 sheet 白面承载:hover --xh-bg-subtle(100)→ pressed --xh-bg-subtle-hover(200) */
366
366
  [data-scope='notification'][data-part='item-action-trigger'] {
@@ -65,7 +65,7 @@
65
65
  --xh-_page-header-radius: var(--xh-shape-surface);
66
66
  }
67
67
 
68
- /* outline 是一张静态内容面:--xh-border-default 描边撑住这块面的边界 + surface 底,不叠投影(§5.3);
68
+ /* outline 是一张静态内容面:--xh-border-default 描边撑住这块面的边界 + surface 底,不叠投影;
69
69
  --xh-border-subtle 只作 ghost 贴底那条分隔线用,不当根面外边 */
70
70
  [data-scope='page-header'][data-part='root'][data-variant='outline'] {
71
71
  border: var(--xh-stroke-thin) solid var(--xh-page-header-border, var(--xh-border-default));
@@ -18,7 +18,7 @@
18
18
  /* 私有槽同时声明在根与 positioner 上:摊开的页码面板被搬到 portal 落点,
19
19
  不是根的后代,继承不过去。面板里的页码格子与主区那排消费的是同一批槽 */
20
20
  [data-scope='pagination']:is([data-part='root'], [data-part='positioner']) {
21
- /* 作者塞进面板或分页行里的图标按档取字形尺(§6.5);四类格子上另按家族档位取同一把尺 */
21
+ /* 作者塞进面板或分页行里的图标按档取字形尺;四类格子上另按家族档位取同一把尺 */
22
22
  --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-md));
23
23
 
24
24
  /* 尺寸档只换这三个私有槽,上一页/下一页、页码与省略号都从这两处继承它们,
@@ -69,7 +69,7 @@
69
69
  display: none;
70
70
  }
71
71
 
72
- /* 四类格子接 Action Control 的 text 档,缺省中性的 ghost 形态(§7.2 只有 Button 品牌实心):盒型、三档几何、
72
+ /* 四类格子接 Action Control 的 text 档,缺省中性的 ghost 形态(只有 Button 品牌实心):盒型、三档几何、
73
73
  透明描边(省略号也占一条,两者内容盒等高,一行里对得齐)、悬停 100 → 按下 200(画布承载)、禁用面、按压缩放与
74
74
  过渡都由家族给;这里只把使用者槽映射到桥接槽并保留分页自己的排版。
75
75
  等宽的关键:1 与 10 的内容宽度不同,靠最小宽度把它们撑到同一格,行宽才不会随当前页左右抖动 */
@@ -88,7 +88,7 @@
88
88
  --xh-action-fg-rest: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-rest));
89
89
  --xh-action-fg-hover: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-hover));
90
90
  --xh-action-fg-pressed: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-pressed));
91
- /* 作者塞进上一页/下一页的图标按档取字形尺(§6.5),与皮肤画的兜底字形同一把尺 */
91
+ /* 作者塞进上一页/下一页的图标按档取字形尺,与皮肤画的兜底字形同一把尺 */
92
92
  --xh-icon-size: var(--xh-pagination-icon-size, var(--xh-_action-profile-glyph-size));
93
93
 
94
94
  flex: none;
@@ -107,7 +107,7 @@
107
107
  /* 首末页的上一页 / 下一页是原生 disabled(不可聚焦、进不了 Tab 序列),连接层同时给 data-disabled,
108
108
  家族按 data-disabled 画禁用面(透明底 + --xh-fg-disabled);分页条目从不禁用 */
109
109
 
110
- /* 当前页(§7.3 格状当前):data-current 与 aria-current='page' 由连接层成对给出,样式挂在 data 钩子上,
110
+ /* 当前页(格状当前):data-current 与 aria-current='page' 由连接层成对给出,样式挂在 data 钩子上,
111
111
  无障碍语义留给 aria。实心品牌面 + 配对前景、不加粗——字重一变字形就变宽,页码格子会跟着长一点,
112
112
  正是这里要避免的抖动;悬停 / 按下沿 brand → brand-hover → brand-active 走,三态都经桥接槽交给家族画,
113
113
  solid 面允许一条顶高光,环色改取面自己的前景 */
@@ -239,7 +239,7 @@
239
239
  var(--xh-_pagination-available-h)
240
240
  );
241
241
  overflow-y: auto;
242
- /* 浮层滚动面:滚到底不把滚动量交给页面(§6.6 只给 Overlay 家族滚动面) */
242
+ /* 浮层滚动面:滚到底不把滚动量交给页面(只给 Overlay 家族滚动面) */
243
243
  overscroll-behavior: contain;
244
244
  padding: var(--xh-pagination-content-p, var(--xh-space-1));
245
245
  border: var(--xh-stroke-thin) solid var(--xh-pagination-content-border, var(--xh-border-default));
@@ -250,9 +250,7 @@
250
250
  pointer-events: auto;
251
251
  }
252
252
 
253
- /* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
254
253
  [data-scope='pagination'][data-part='content'][data-state='open'] {
255
- will-change: opacity, scale;
256
254
  animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
257
255
  }
258
256
 
@@ -31,7 +31,7 @@
31
31
  }
32
32
 
33
33
  /*
34
- * 触发器是页面上的独立文字按钮(§9.1):盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
34
+ * 触发器是页面上的独立文字按钮:盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
35
35
  * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则,
36
36
  * 只把作者塞进按钮的图标接到随档字形尺(md = 20px)。
37
37
  */
@@ -93,7 +93,7 @@
93
93
  /* 面板排成三列:左列吃掉剩余宽度,右两列各摆一颗按钮。
94
94
  标题、说明与作者塞进来的内容各占一整行,两颗按钮因此并排落在最后一行的右侧。 */
95
95
  [data-scope='popconfirm'][data-part='content'] {
96
- /* 作者塞进面板里的图标按控件档取(§6.5);两颗动作钮另由家族配方按 sm 档下发字形尺 */
96
+ /* 作者塞进面板里的图标按控件档取;两颗动作钮另由家族配方按 sm 档下发字形尺 */
97
97
  --xh-icon-size: var(--xh-popconfirm-icon-size, var(--xh-glyph-size-md));
98
98
  /* 尺寸档只换这两个私有槽 */
99
99
  --xh-_popconfirm-pad: var(--xh-surface-pad-md);
@@ -110,7 +110,7 @@
110
110
  /* 说明文案长度由作者给,矮视口下不限高面板会整块伸出视口且滚不到 */
111
111
  max-block-size: min(var(--xh-popconfirm-max-h, var(--xh-overlay-max-h)), var(--xh-_popconfirm-available-h));
112
112
  overflow-y: auto;
113
- /* 浮在页面之上的 Overlay 滚动面(§6.6):滚到头不把页面一起带走 */
113
+ /* 浮在页面之上的 Overlay 滚动面:滚到头不把页面一起带走 */
114
114
  overscroll-behavior: contain;
115
115
  padding-block: var(--xh-popconfirm-py, var(--xh-_popconfirm-pad));
116
116
  padding-inline: var(--xh-popconfirm-px, var(--xh-_popconfirm-pad));
@@ -154,8 +154,6 @@
154
154
 
155
155
  [data-scope='popconfirm'][data-part='content'][data-state='open'] {
156
156
  animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
157
- /* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
158
- will-change: opacity, scale, translate;
159
157
  }
160
158
 
161
159
  /* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
@@ -186,7 +184,7 @@
186
184
  color: var(--xh-popconfirm-title-fg, var(--xh-material-frosted-fg));
187
185
  }
188
186
 
189
- /* 说明文字走说明档(§6.4):13px + fg-muted */
187
+ /* 说明文字走说明档:13px + fg-muted */
190
188
  [data-scope='popconfirm'][data-part='description'] {
191
189
  margin: 0;
192
190
  min-inline-size: 0;
@@ -211,7 +209,7 @@
211
209
 
212
210
  /*
213
211
  * —— 两颗按钮 ——
214
- * 确认与取消都是浮层末行的文字按钮(§9.1):盒型、sm 档几何、四态面、0.97 按压并换底、粗指针命中区与
212
+ * 确认与取消都是浮层末行的文字按钮:盒型、sm 档几何、四态面、0.97 按压并换底、粗指针命中区与
215
213
  * 强制色由家族配方按连接层投影的 data-xh-action-variant / -size 给出。这里只把公开槽桥接到矩阵之前
216
214
  * (使用者槽 → 形态矩阵 → 家族缺省)与几何映射;内衬与圆角槽取两颗共用的 action 段。
217
215
  */
@@ -236,7 +234,7 @@
236
234
  grid-column: 3;
237
235
  }
238
236
 
239
- /* 确认是实心的主操作(§7.2 第 2 条)。底色走共享语气槽:作者在 content 上写 data-tone="danger"
237
+ /* 确认是实心的主操作。底色走共享语气槽:作者在 content 上写 data-tone="danger"
240
238
  就整体换成危险色,不写则用品牌色——配方 solid 列本就读 --xh-_tone,这里只桥接使用者槽 */
241
239
  [data-scope='popconfirm'][data-part='confirm-trigger'] {
242
240
  --xh-action-bg-rest: var(--xh-popconfirm-confirm-bg, var(--xh-_action-variant-bg-rest));
package/css/popover.css CHANGED
@@ -62,7 +62,7 @@
62
62
  }
63
63
 
64
64
  /*
65
- * 触发器是页面上的独立文字按钮(§9.1):盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
65
+ * 触发器是页面上的独立文字按钮:盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
66
66
  * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则,
67
67
  * 只把作者塞进按钮的图标接到随档字形尺(md = 20px)。
68
68
  */
@@ -76,7 +76,7 @@
76
76
  }
77
77
 
78
78
  [data-scope='popover'][data-part='content'] {
79
- /* 作者塞进面板里的图标按控件档取(§6.5);关闭钮另由家族配方按 sm 档下发字形尺 */
79
+ /* 作者塞进面板里的图标按控件档取;关闭钮另由家族配方按 sm 档下发字形尺 */
80
80
  --xh-icon-size: var(--xh-popover-icon-size, var(--xh-glyph-size-md));
81
81
 
82
82
  /* 尺寸档只换这两个私有槽。popover 没有 root 部件,size 落在浮层树最外层的 content 上。
@@ -94,7 +94,7 @@
94
94
  /* 内容由作者给,长度不可预知:不限高就整块伸出视口且滚不到 */
95
95
  max-block-size: min(var(--xh-popover-max-h, var(--xh-overlay-max-h)), var(--xh-_popover-available-h));
96
96
  overflow-y: auto;
97
- /* 浮在页面之上的 Overlay 滚动面(§6.6):滚到头不把页面一起带走 */
97
+ /* 浮在页面之上的 Overlay 滚动面:滚到头不把页面一起带走 */
98
98
  overscroll-behavior: contain;
99
99
  padding-block: var(--xh-popover-py, var(--xh-_popover-pad));
100
100
  padding-inline: var(--xh-popover-px, var(--xh-_popover-pad));
@@ -129,8 +129,6 @@
129
129
 
130
130
  [data-scope='popover'][data-part='content'][data-state='open'] {
131
131
  animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
132
- /* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
133
- will-change: opacity, scale, translate;
134
132
  }
135
133
 
136
134
  /* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
@@ -158,7 +156,7 @@
158
156
  color: var(--xh-popover-title-fg, var(--xh-material-frosted-fg));
159
157
  }
160
158
 
161
- /* 说明文字走说明档(§6.4):13px + fg-muted */
159
+ /* 说明文字走说明档:13px + fg-muted */
162
160
  [data-scope='popover'][data-part='description'] {
163
161
  margin: 0;
164
162
  font-size: var(--xh-popover-description-font-size, var(--xh-text-secondary-size));
@@ -173,7 +171,7 @@
173
171
  }
174
172
 
175
173
  /*
176
- * 关闭钮是浮层角落的单图标钮(§9.1):正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
174
+ * 关闭钮是浮层角落的单图标钮:正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
177
175
  * 由家族配方给出——磨砂白面上走画布承载阶梯悬停 --xh-bg-subtle(100)→ 按下 --xh-bg-subtle-hover(200),
178
176
  * 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与摆放,
179
177
  * 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面,缺省仍是透明底与悬停字色:
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  /* root 就是视觉盒:描边、底色、圆角、聚焦环、悬停与禁用面由 Field Chrome 家族画在它身上(静息描边式:
17
- canvas 底 + --xh-border-control 描边 + 无影,不用 soft,§8.3 登记例外只在 8px surface 圆角),内部 textarea
17
+ canvas 底 + --xh-border-control 描边 + 无影,不用 soft,登记的例外只在 8px surface 圆角),内部 textarea
18
18
  无边框;align-items: flex-end 让按钮随输入框长高贴着底边。
19
19
  三个视觉轴都落在 root 上:形态三档由家族按 data-variant 生成,语气管用哪族颜色,尺寸管高度与字号 */
20
20
  [data-scope='prompt-input'][data-part='root'] {
@@ -16,10 +16,10 @@
16
16
  --xh-question-flow-skin: 1;
17
17
  }
18
18
 
19
- /* 一张静态内容面:--xh-border-default 描边 + surface 底 + 无影(§5.3 边界只由描边承担)。
19
+ /* 一张静态内容面:--xh-border-default 描边 + surface 底 + 无影(边界只由描边承担)。
20
20
  三个视觉轴都落在 root 上:形态管底与描边怎么画,语气管用哪族颜色,尺寸管内衬、按钮高度与字号 */
21
21
  [data-scope='question-flow'][data-part='root'] {
22
- /* 作者塞进翻页钮的图标按档取尺(§6.5),与皮肤画的兜底字形同一把尺 */
22
+ /* 作者塞进翻页钮的图标按档取尺,与皮肤画的兜底字形同一把尺 */
23
23
  --xh-icon-size: var(--xh-question-flow-icon-size, var(--xh-glyph-size-md));
24
24
  /* 尺寸缺省档:不写 data-size 时按中档走 */
25
25
  --xh-_question-flow-p: var(--xh-space-4);
@@ -49,7 +49,7 @@
49
49
  /* 描边式是缺省档,写在上面那条基础规则里 */
50
50
  /* 填充式:底色顶替描边表达边界。描边只退成透明而不去掉,
51
51
  1px 的位置留着,与 outline 档并排时基线对得上;
52
- 淡底承载面向选项行与几颗中性钮下发 hover 200 → pressed 300(§7.2) */
52
+ 淡底承载面向选项行与几颗中性钮下发 hover 200 → pressed 300 */
53
53
  [data-scope='question-flow'][data-part='root'][data-variant='subtle'] {
54
54
  --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
55
55
  --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
@@ -145,7 +145,7 @@
145
145
  pointer-events: auto;
146
146
  }
147
147
 
148
- /* 题干就是这一题的标题,也是选项组的可访问名:走 Surface 标题档 14/600(§6.4) */
148
+ /* 题干就是这一题的标题,也是选项组的可访问名:走 Surface 标题档 14/600 */
149
149
  [data-scope='question-flow'][data-part='prompt'] {
150
150
  display: block;
151
151
  margin: 0;
@@ -170,9 +170,9 @@
170
170
  }
171
171
 
172
172
  /* 一个选项:整行可点、可聚焦,记号在左。盒型、悬停 / 按下 / 禁用面由 Action Control 的 row 档给
173
- (ghost 形态:白底承载 hover 100 → pressed 200,按下只换面不缩放,§9.2;禁用守卫认 data-disabled),
173
+ (ghost 形态:白底承载 hover 100 → pressed 200,按下只换面不缩放;禁用守卫认 data-disabled),
174
174
  这里只把使用者槽映射到桥接槽,内衬与间距沿用本组件的档位;字色三态同一支,选中档在下面换一档。
175
- 行高不吃家族的单行档:row 档允许换行、高度随内容,一条会折行的选项文案走正文行高(§6.4) */
175
+ 行高不吃家族的单行档:row 档允许换行、高度随内容,一条会折行的选项文案走正文行高 */
176
176
  [data-scope='question-flow'][data-part='item'] {
177
177
  --xh-action-gap: var(--xh-question-flow-item-gap, var(--xh-space-1_5));
178
178
  --xh-action-padding-inline: var(--xh-question-flow-item-px, var(--xh-space-2));
@@ -253,7 +253,7 @@
253
253
  display: none;
254
254
  }
255
255
 
256
- /* 单选那一档把方格收成圆:正方盒取 circle(§6.3) */
256
+ /* 单选那一档把方格收成圆:正方盒取 circle */
257
257
  [data-scope='question-flow'][data-part='item-indicator'][data-select-mode='single'] {
258
258
  border-radius: var(--xh-question-flow-indicator-radius-single, var(--xh-shape-circle));
259
259
  }
@@ -27,7 +27,7 @@
27
27
  --xh-_radio-group-host-bg-pressed: var(--xh-bg-subtle-active);
28
28
 
29
29
  /* 标题与条目都是根的直接子节点,一支 gap 同时管「标题到集合」与「条目之间」:
30
- 集合标题与集合隔 --xh-space-2(§6.4),同组条目之间也是同一档紧密关系 */
30
+ 集合标题与集合隔 --xh-space-2,同组条目之间也是同一档紧密关系 */
31
31
  display: flex;
32
32
  gap: var(--xh-radio-group-gap, var(--xh-space-2));
33
33
  }
@@ -57,7 +57,7 @@
57
57
  --xh-_radio-group-indicator: var(--xh-control-indicator-lg);
58
58
  }
59
59
 
60
- /* 集合标题(§6.4):14 / 500 / fg-muted,字号不随 size 档——随档的是条目文字 */
60
+ /* 集合标题:14 / 500 / fg-muted,字号不随 size 档——随档的是条目文字 */
61
61
  [data-scope='radio-group'][data-part='label'] {
62
62
  color: var(--xh-radio-group-label-fg, var(--xh-fg-muted));
63
63
  font-size: var(--xh-radio-group-label-font-size, var(--xh-text-label-size));
@@ -65,12 +65,12 @@
65
65
  line-height: var(--xh-leading-none);
66
66
  }
67
67
 
68
- /* label 自己不带状态属性,整组禁用只写在 root 上,禁用标签色统一 --xh-fg-subtle(§6.4) */
68
+ /* label 自己不带状态属性,整组禁用只写在 root 上,禁用标签色统一 --xh-fg-subtle */
69
69
  [data-scope='radio-group'][data-part='root'][data-disabled] [data-scope='radio-group'][data-part='label'] {
70
70
  color: var(--xh-radio-group-label-fg-disabled, var(--xh-fg-subtle));
71
71
  }
72
72
 
73
- /* 条目是「圆圈 + 文案」的整行命中区(§9.2):接 Action Control row 档、ghost 形态,悬停 / 按下 / 禁用面、手型、
73
+ /* 条目是「圆圈 + 文案」的整行命中区:接 Action Control row 档、ghost 形态,悬停 / 按下 / 禁用面、手型、
74
74
  过渡与焦点环由家族给,按下只换面不缩放(row 档专属按压块 scale: none);这里只把使用者槽映射到桥接槽。
75
75
  行自己坐画布走 100 → 200(--xh-action-bg-* 钉住自己的面),行面上的圆圈按淡底容器阶梯再上一档
76
76
  (--xh-action-host-bg-* 向内声明自己是圆圈的承载面,host 槽只对后代生效——自己的面已由 --xh-action-bg-* 钉住;
@@ -114,8 +114,8 @@
114
114
  --xh-action-cursor-focus-visible: default;
115
115
  }
116
116
 
117
- /* 圆圈是字段家族的控制盒(§8.3 字段静息形态):透明底 + --xh-border-control 描边 + 无影。
118
- 不缩放(§9.2 行级只换面),过渡只有底与描边;按下走 press 时间线、释放同走 micro */
117
+ /* 圆圈是字段家族的控制盒(字段静息形态):透明底 + --xh-border-control 描边 + 无影。
118
+ 不缩放(行级只换面),过渡只有底与描边;按下走 press 时间线、释放同走 micro */
119
119
  [data-scope='radio-group'][data-part='indicator'] {
120
120
  display: inline-flex;
121
121
  flex: none;
@@ -131,7 +131,7 @@
131
131
  background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
132
132
  }
133
133
 
134
- /* 悬停整行时未选中的圆圈描边升一档(字段静息 → hover 的同一条阶梯,§8.3);
134
+ /* 悬停整行时未选中的圆圈描边升一档(字段静息 → hover 的同一条阶梯);
135
135
  选中圈与校验失败的圈保住各自的描边——圈内的点 / 警示色本身已经在表达状态 */
136
136
  [data-scope='radio-group'][data-part='item']:not([data-disabled]):not([data-readonly]):hover
137
137
  > [data-scope='radio-group'][data-part='indicator']:not([data-state='checked']):not([data-invalid]) {
@@ -139,7 +139,7 @@
139
139
  }
140
140
 
141
141
  /* 按下去要有回应。圆圈不是激活宿主:宿主是投影了 row 档的整行条目,圆圈在宿主的
142
- :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面、不缩放(§9.2)——行按下是 200,
142
+ :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面、不缩放——行按下是 200,
143
143
  坐在上面的圆圈到 300(行以 --xh-action-host-bg-pressed 声明自己是圆圈的承载面,桥接槽只写不读,
144
144
  圆圈读的是喂给它的那支私有槽),描边不动、几何不动;
145
145
  与家族按压块同一时间线(按下 --xh-motion-duration-press,释放同走 micro) */
@@ -184,7 +184,7 @@
184
184
  background: var(--xh-radio-group-indicator-dot-pressed, var(--xh-_tone-active, var(--xh-bg-brand-active)));
185
185
  }
186
186
 
187
- /* 禁用(§7.2):--xh-border-default 描边 + --xh-bg-subtle 底 + --xh-fg-disabled 圆点,不靠 opacity;
187
+ /* 禁用:--xh-border-default 描边 + --xh-bg-subtle 底 + --xh-fg-disabled 圆点,不靠 opacity;
188
188
  与 checkbox-group 方框、独立 checkbox 逐档一致。条目自己带 data-disabled(组禁用也逐条下放),圆圈读它 */
189
189
  [data-scope='radio-group'][data-part='item'][data-disabled] > [data-scope='radio-group'][data-part='indicator'] {
190
190
  border-color: var(--xh-radio-group-indicator-border-disabled, var(--xh-border-default));
package/css/rating.css CHANGED
@@ -17,7 +17,7 @@
17
17
  根上不留基准它就会贴到更外层的定位祖先上,原生校验提示跟着飘到页面别处。 */
18
18
  [data-scope='rating'][data-part='root'] {
19
19
  /* 尺寸档只换这三个私有槽,星星与分值都从 root 继承它们,换档不必给每个部件各写一条选择器。
20
- 星是控件内的字形,按档取 --xh-glyph-size-sm / md / lg(§6.5);标签字号不随档 */
20
+ 星是控件内的字形,按档取 --xh-glyph-size-sm / md / lg;标签字号不随档 */
21
21
  --xh-_rating-item-gap: var(--xh-control-gap-md);
22
22
  --xh-_rating-item-size: var(--xh-glyph-size-md);
23
23
  --xh-_rating-item-box-size: var(--xh-control-action-size);
@@ -29,7 +29,7 @@
29
29
  position: relative;
30
30
  display: inline-flex;
31
31
  flex-direction: column;
32
- /* 字段标签贴控件(§6.4 复合单字段) */
32
+ /* 字段标签贴控件(复合单字段) */
33
33
  gap: var(--xh-rating-gap, var(--xh-space-1));
34
34
  }
35
35
 
@@ -46,7 +46,7 @@
46
46
  --xh-_rating-font-size: var(--xh-control-font-lg);
47
47
  }
48
48
 
49
- /* 字段标签:14 / 500 / fg-default(§6.4),禁用换到 --xh-fg-subtle;文字部件不叠 opacity */
49
+ /* 字段标签:14 / 500 / fg-default,禁用换到 --xh-fg-subtle;文字部件不叠 opacity */
50
50
  [data-scope='rating'][data-part='label'] {
51
51
  color: var(--xh-rating-label-fg, var(--xh-fg-default));
52
52
  font-size: var(--xh-rating-label-font-size, var(--xh-text-label-size));
@@ -106,7 +106,7 @@
106
106
 
107
107
  /* 条目固定成一枚方形图标盒:连接层用 clientWidth 判定指针落在左半还是右半,
108
108
  固定盒能让半档分界与图形中心严格重合。
109
- 星接 Action Control icon 档(§9.1 定尺的星):盒型、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族配方给,
109
+ 星接 Action Control icon 档(定尺的星):盒型、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族配方给,
110
110
  这里只把使用者槽映射到桥接槽。静息透明(ghost 形态);悬停不换底——悬停预览由点亮的星形(data-highlighted)
111
111
  表达,再给盒换面是重复的通道;按下换到 200 档中性面(白底承载)。前景五态映射同一个值:点亮时五态一起换到
112
112
  点亮色,家族的悬停 / 按下块才不会把点亮色换回静息色;禁用不换前景,星带整体的压暗落在 control 的 opacity 上 */
package/css/reasoning.css CHANGED
@@ -16,13 +16,13 @@
16
16
  --xh-reasoning-skin: 1;
17
17
  }
18
18
 
19
- /* 一张淡底面:--xh-bg-subtle 底 + 透明边位 + 无影(§8 subtle 无影),描边留给 outline 档打开。
20
- 缺省淡底承载开关:向它下发 hover 200 → pressed 300 的阶梯(§7.2),白底档在形态规则里改回 100 → 200 */
19
+ /* 一张淡底面:--xh-bg-subtle 底 + 透明边位 + 无影(subtle 无影),描边留给 outline 档打开。
20
+ 缺省淡底承载开关:向它下发 hover 200 → pressed 300 的阶梯,白底档在形态规则里改回 100 → 200 */
21
21
  [data-scope='reasoning'][data-part='root'] {
22
22
  --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
23
23
  --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
24
24
 
25
- /* 作者塞进两个图形位的图标与皮肤画的兜底字形同一把尺:按档取(§6.5),与开关的家族档同步——
25
+ /* 作者塞进两个图形位的图标与皮肤画的兜底字形同一把尺:按档取,与开关的家族档同步——
26
26
  不写 data-size 时字号是 sm 档,字形随之取 sm */
27
27
  --xh-_reasoning-icon-size: var(--xh-glyph-size-sm);
28
28
  --xh-icon-size: var(--xh-reasoning-icon-size, var(--xh-_reasoning-icon-size));
@@ -51,7 +51,7 @@
51
51
 
52
52
  /* —— 形态 —— */
53
53
  /* 缺省档即 subtle,写在上面那条基础规则里 */
54
- /* 描边分区:--xh-border-default 描边 + surface 底(§5.3 静态内容面);
54
+ /* 描边分区:--xh-border-default 描边 + surface 底(静态内容面);
55
55
  白底承载面把开关的阶梯改回 hover 100 → pressed 200 */
56
56
  [data-scope='reasoning'][data-part='root'][data-variant='outline'] {
57
57
  --xh-action-host-bg-hover: var(--xh-bg-subtle);
@@ -79,7 +79,7 @@
79
79
  }
80
80
 
81
81
  /* 开关铺满一行,盒型、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给(ghost 形态,
82
- 阶梯由根按承载面经 host 槽下发,按下只换面不缩放,§9.2);这里只把使用者槽映射到桥接槽:
82
+ 阶梯由根按承载面经 host 槽下发,按下只换面不缩放);这里只把使用者槽映射到桥接槽:
83
83
  圆角归零贴住面边,内衬与字号沿用本组件的档位(不取 profile 的内衬,几何不变),字色三态都停在
84
84
  弱一档的 muted(开关不是正文);字形尺由根按同一档位给 */
85
85
  [data-scope='reasoning'][data-part='trigger'] {
package/css/reset.css CHANGED
@@ -61,7 +61,7 @@
61
61
  * Typography prose 里的 <pre>——它是库内唯一不带 data-part 的滚动面,作者只写 <pre> 不写角色。
62
62
  * 皮肤不得再手写 scrollbar-width / scrollbar-color(stylelint 判红),要藏条写 none。
63
63
  * 这里不写 scrollbar-gutter:auto 是初始值,stable 只给内容高度会变的容器由皮肤显式写。
64
- * ::-webkit-scrollbar-thumb 的圆角取 pill:原生滑块与自绘 scrollbar:thumb 同为一维对象(真源 §6.3),
64
+ * ::-webkit-scrollbar-thumb 的圆角取 pill:原生滑块与自绘 scrollbar:thumb 同为一维对象,
65
65
  * 不再按厚度折半凑半圆,三档厚度都是同一身份。
66
66
  *
67
67
  * 令牌住在 xihan.tokens 层、排在本层之后,但自定义属性的求值不受层序影响:
package/css/segmented.css CHANGED
@@ -19,17 +19,17 @@
19
19
  --xh-_segmented-px: var(--xh-control-px-md);
20
20
  --xh-_segmented-gap: var(--xh-control-gap-md);
21
21
  --xh-_segmented-font-size: var(--xh-control-font-md);
22
- /* 指示器(有滑块开关的白色抬起面,§7.3)的底、描边与选中段的文字色;没写 data-tone 时就是这里的取值 */
22
+ /* 指示器(有滑块开关的白色抬起面)的底、描边与选中段的文字色;没写 data-tone 时就是这里的取值 */
23
23
  --xh-_segmented-indicator-bg: var(--xh-bg-surface-raised);
24
24
  --xh-_segmented-fg-selected: var(--xh-fg-default);
25
- /* 轨道是淡底承载面:段坐在它上面,悬停 200 → 按下 300(§7.2),host 槽向内下发同一副阶梯 */
25
+ /* 轨道是淡底承载面:段坐在它上面,悬停 200 → 按下 300,host 槽向内下发同一副阶梯 */
26
26
  --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
27
27
  --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
28
28
 
29
29
  /* 一行排不下就折行:每个选项都必须看得见、点得到,硬撑一行会把末尾几段顶出容器。
30
30
  段各自带圆角,折行不会切角;不改成横向滚动是因为段离轨道内沿只有一格衬距,
31
31
  轨道一旦成为滚动容器,段的焦点环(画在段外侧 2px 处)会被裁掉。
32
- 轨道是一块淡底面(§8.3):--xh-bg-subtle 底 + 同宽透明占位边 + 无影,边界由滑块的描边与轨道底色的落差承担 */
32
+ 轨道是一块淡底面:--xh-bg-subtle 底 + 同宽透明占位边 + 无影,边界由滑块的描边与轨道底色的落差承担 */
33
33
  position: relative;
34
34
  display: inline-flex;
35
35
  flex-wrap: wrap;
@@ -149,7 +149,7 @@
149
149
  white-space: nowrap;
150
150
  cursor: pointer;
151
151
  user-select: none;
152
- /* 段是轨道里铺开的一段(§9.2 Segmented item 归行级),按下只换面不缩放:transition 里没有 scale */
152
+ /* 段是轨道里铺开的一段(Segmented item 归行级),按下只换面不缩放:transition 里没有 scale */
153
153
  transition:
154
154
  color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
155
155
  background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
@@ -170,14 +170,14 @@
170
170
  }
171
171
 
172
172
  /* 悬停只提亮未选中的那几段:选中段的底下压着指示器,再变色就成了两套强调。
173
- 底色用中性的悬停档——它是「指哪一段」的轻反馈,不表达选中;段坐在淡底轨道里,悬停取 200(§7.2) */
173
+ 底色用中性的悬停档——它是「指哪一段」的轻反馈,不表达选中;段坐在淡底轨道里,悬停取 200 */
174
174
  [data-scope='segmented'][data-part='item']:not([data-disabled]):not([data-state='checked']):hover {
175
175
  background-color: var(--xh-segmented-item-bg-hover, var(--xh-bg-subtle-hover));
176
176
  color: var(--xh-segmented-item-fg-hover, var(--xh-fg-default));
177
177
  }
178
178
 
179
179
  /* 按下去要有回应:未选中段换到按下面(淡底承载 300),几何不动;只读段不压。
180
- 选中段不叠按下面:它压着的白色滑块本身就是选中身份(§7.3 有滑块开关无叠加态) */
180
+ 选中段不叠按下面:它压着的白色滑块本身就是选中身份(有滑块开关无叠加态) */
181
181
  [data-scope='segmented'][data-part='item']:not([data-disabled]):not([data-readonly]):not([data-state='checked']):is(:active, [data-pressed]) {
182
182
  background-color: var(--xh-segmented-item-bg-pressed, var(--xh-bg-subtle-active));
183
183
  transition-duration: var(--xh-motion-duration-press);
@@ -222,7 +222,7 @@
222
222
  inset-block-start: var(--xh-_segmented-indicator-y);
223
223
  inline-size: var(--xh-_segmented-indicator-w);
224
224
  block-size: var(--xh-_segmented-indicator-h);
225
- /* 白色抬起面三件(§7.3 有滑块开关):surface-raised 底 + border-default 描边 + raised 影,描边必须在,影只是加成。
225
+ /* 白色抬起面三件(有滑块开关):surface-raised 底 + border-default 描边 + raised 影,描边必须在,影只是加成。
226
226
  尺寸由连接层按段的盒量出,描边吃进盒里(border-box),滑块与段仍是同一块矩形 */
227
227
  border: var(--xh-stroke-thin) solid var(--xh-segmented-indicator-border, var(--xh-border-default));
228
228
  border-radius: var(--xh-segmented-indicator-radius, var(--xh-shape-inset));
package/css/select.css CHANGED
@@ -80,7 +80,7 @@
80
80
  [data-scope='select'][data-part='root'] {
81
81
  /* 作者塞进指示符槽的图标跟着控件的尺寸档走;它自己写了 size 时仍以作者的为准。
82
82
  浮层条目里自绘的状态字形(勾选标记所在的标记盒与盒里的勾)不读这支:它们是指示符,走
83
- --xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size 改接到盒的尺(§6.5) */
83
+ --xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size 改接到盒的尺 */
84
84
  --xh-icon-size: var(--xh-select-icon-size, var(--xh-glyph-size-md));
85
85
 
86
86
  display: inline-flex;
@@ -394,8 +394,6 @@
394
394
 
395
395
  [data-scope='select'][data-part='content'][data-state='open'] {
396
396
  animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
397
- /* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
398
- will-change: opacity, translate;
399
397
  }
400
398
 
401
399
  /* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
@@ -530,7 +528,7 @@
530
528
  }
531
529
 
532
530
  /* 勾选标记只在选中项上出现;未选中时占位不塌,切换选中不引起行宽抖动。
533
- 盒与盒里的勾是指示符(§6.5):盒按指示符档取尺,并在自己身上把 --xh-icon-size 改接到盒的尺,皮肤画的
531
+ 盒与盒里的勾是指示符:盒按指示符档取尺,并在自己身上把 --xh-icon-size 改接到盒的尺,皮肤画的
534
532
  兜底勾与作者塞进盒里的 XhIcon 读同一把尺、与盒同边长(勾选标记不是勾选格,不取 × 0.75,与 Listbox / Menu 族
535
533
  同口径);不读家族按档下发到行的 --xh-icon-size——那支只管作者放进条目里的图标,按图标档取的 20px 比
536
534
  16 / 14 的指示符档大一圈 */
package/css/side-nav.css CHANGED
@@ -19,7 +19,7 @@
19
19
  不是根的后代,继承不过去。面板里的行与栏内那些消费的是同一批槽 */
20
20
  [data-scope='side-nav']:is([data-part='root'], [data-part='positioner']) {
21
21
  /* 行外的字形按档取尺,缺省 md,随 data-size 换档并同样声明在定位层上(弹出面板里的行也拿得到);
22
- 行内的由家族随 data-xh-collection-size 下发(§6.5)。这支只管作者放进行里的图标:
22
+ 行内的由家族随 data-xh-collection-size 下发。这支只管作者放进行里的图标:
23
23
  侧栏自绘的状态字形(分支行尾的展开方向 chevron)是指示符,branch-indicator 在自己身上
24
24
  把 --xh-icon-size 改接到 --xh-control-indicator-* 一族的盒尺 */
25
25
  --xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-md));
@@ -118,7 +118,7 @@
118
118
  }
119
119
 
120
120
  /* —— 行:分支按钮与链接同一副长相 ——
121
- 两种行都走 Collection Item 的 page 语境(页内持久集合,§7.3):悬停 / 高亮 / 按下面(白底承载 hover 100 →
121
+ 两种行都走 Collection Item 的 page 语境(页内持久集合):悬停 / 高亮 / 按下面(白底承载 hover 100 →
122
122
  pressed 200,只换面不缩放)、当前页(品牌淡底 + 淡底前景 + 起始侧 2px 指示条,current+hover 20% /
123
123
  +pressed 28%)、展开路径(与 hover 同档的中性面,不用品牌色、不加粗)与禁用面都由家族按 data-current /
124
124
  data-in-path / aria-disabled 给出。这里只把公开槽映射到桥接槽。
@@ -253,15 +253,13 @@
253
253
  box-shadow: var(--xh-side-nav-popout-shadow, var(--xh-elevation-floating));
254
254
 
255
255
  /* 子导航条目数没有上限,矮视口下不限高就整块伸出视口且滚不到。
256
- 浮层滚动面:到底后不把滚动链穿透给页面(§6.6);细条由 reset 层给 */
256
+ 浮层滚动面:到底后不把滚动链穿透给页面;细条由 reset 层给 */
257
257
  max-block-size: min(var(--xh-side-nav-popout-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_side-nav-available-h));
258
258
  overflow-y: auto;
259
259
  overscroll-behavior: contain;
260
260
  }
261
261
 
262
- /* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
263
262
  [data-scope='side-nav'][data-part='branch-content'][data-popout][data-state='open'] {
264
- will-change: opacity, scale;
265
263
  animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
266
264
  }
267
265
 
@@ -272,7 +270,7 @@
272
270
  }
273
271
 
274
272
  /* 箭头是行尾的后缀:auto 外边距把它顶到行尾,家族按 suffix 槽下发的外边距已在行上归零。
275
- 盒里的 chevron 是指示符(§6.5):盒按指示符档定尺(comfortable 16 / compact 14,与 Tree / TreeSelect
273
+ 盒里的 chevron 是指示符:盒按指示符档定尺(comfortable 16 / compact 14,与 Tree / TreeSelect
276
274
  的 branch-indicator 同款定尺盒),--xh-icon-size 在自己身上改接到盒的尺,兜底字形与作者塞进盒里的
277
275
  XhIcon 读同一把尺、与盒同边长;不读家族按档下发到行的 --xh-icon-size——那支只管作者放进行里的
278
276
  图标,按图标档取的 20px 比指示符档大一圈。盒自己定尺而不随字形撑开:转 90° 时才不抖 */
@@ -23,7 +23,7 @@
23
23
  gap: var(--xh-signature-pad-gap, var(--xh-space-2));
24
24
  }
25
25
 
26
- /* 复合单字段的标签(§6.4):14 / 500 / fg-default,不随档;贴画布 space-1——
26
+ /* 复合单字段的标签:14 / 500 / fg-default,不随档;贴画布 space-1——
27
27
  容器的 gap 归画布之后的部件,标签在它之上补一段差值把距离收成目标值 */
28
28
  [data-scope='signature-pad'][data-part='label'] {
29
29
  margin-block-end: calc(
@@ -42,7 +42,7 @@
42
42
  /* 画布是块状的写字区:宽度铺满外层,高度由宽高比决定。
43
43
  控件行高那把尺量的是一行控件,一块要写字的面积用不上它。
44
44
  touch-action 由连接层内联写死,触摸落笔才不会被页面滚动抢走。
45
- 外壳按字段规则自绘(§8.3 登记的画布型字段例外:字段家族配方钉死控件行高,画布按宽高比撑高吃不下它):
45
+ 外壳按字段规则自绘(登记的画布型字段例外:字段家族配方钉死控件行高,画布按宽高比撑高吃不下它):
46
46
  静息透明底 + border-control 描边 + control 圆角 + 无影 */
47
47
  [data-scope='signature-pad'][data-part='control'] {
48
48
  display: block;
@@ -71,13 +71,13 @@
71
71
  }
72
72
 
73
73
  /* 只读仍看得见签名,只是改不动:收掉手型,别暗示"在这儿能写";
74
- 面按字段只读规则只换到淡底,描边不动(§7.2 第 9 条) */
74
+ 面按字段只读规则只换到淡底,描边不动 */
75
75
  [data-scope='signature-pad'][data-part='control'][data-readonly]:not([data-disabled]) {
76
76
  background: var(--xh-signature-pad-bg-readonly, var(--xh-bg-subtle));
77
77
  cursor: default;
78
78
  }
79
79
 
80
- /* 字段禁用面(§7.2 第 9 条):描边退到 border-default、底换淡底 */
80
+ /* 字段禁用面:描边退到 border-default、底换淡底 */
81
81
  [data-scope='signature-pad'][data-part='control'][data-disabled] {
82
82
  border-color: var(--xh-signature-pad-border-disabled, var(--xh-border-default));
83
83
  background: var(--xh-signature-pad-bg-disabled, var(--xh-bg-subtle));
@@ -100,9 +100,9 @@
100
100
  }
101
101
 
102
102
  /*
103
- * 清空按钮是画布旁的独立文字按钮(§9.1):盒型、sm 档几何、outline 四态面、0.97 按压与粗指针命中区由家族配方
103
+ * 清空按钮是画布旁的独立文字按钮:盒型、sm 档几何、outline 四态面、0.97 按压与粗指针命中区由家族配方
104
104
  * 按连接层投影的 data-xh-action-variant / -size 给出(缺省 outline,白底承载阶梯 100 → 200)。这里只把公开槽
105
- * 桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与几何槽映射,矩阵各态无影(§8.3 淡底与阴影互斥)。
105
+ * 桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与几何槽映射,矩阵各态无影(淡底与阴影互斥)。
106
106
  */
107
107
  [data-scope='signature-pad'][data-part='clear-trigger'] {
108
108
  --xh-action-bg-rest: var(--xh-signature-pad-clear-bg, var(--xh-_action-variant-bg-rest));
@@ -142,7 +142,7 @@
142
142
  --xh-action-ring-color-focus-visible: currentColor;
143
143
  }
144
144
 
145
- /* 签没签的那句话是说明角色(§6.4):13 / fg-muted / leading-normal。读屏靠它播报,看得见的人也用得上,因此不做视觉隐藏 */
145
+ /* 签没签的那句话是说明角色:13 / fg-muted / leading-normal。读屏靠它播报,看得见的人也用得上,因此不做视觉隐藏 */
146
146
  [data-scope='signature-pad'][data-part='status'] {
147
147
  color: var(--xh-signature-pad-status-fg, var(--xh-fg-muted));
148
148
  font-size: var(--xh-signature-pad-status-font-size, var(--xh-text-secondary-size));