@q1travel/design-system 0.4.0 → 0.5.1

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.
@@ -111,9 +111,9 @@
111
111
  --q1-color-brand-preview-dark-fg: #ededed;
112
112
  --q1-color-mask-visible: #ffffff;
113
113
  --q1-color-mask-opaque: #000000;
114
- /* 阴影基色恒黑(对标 Geist):不随主题翻转,暗色下阴影不再泛白晕。 */
114
+ /* 阴影基色恒黑(对标外部参考):不随主题翻转,暗色下阴影不再泛白晕。 */
115
115
  --q1-color-shadow: #000000;
116
- /* 浮层边框(对标 Geist):亮色=普通边框;暗色=白 14% 发丝 ring——黑影在黑底不可见,浮层清晰度由它承担。 */
116
+ /* 浮层边框(对标外部参考):亮色=普通边框;暗色=白 14% 发丝 ring——黑影在黑底不可见,浮层清晰度由它承担。 */
117
117
  --q1-color-border-overlay: var(--q1-color-gray-400);
118
118
  --q1-color-bg-canvas: var(--q1-color-background-100);
119
119
  --q1-color-bg-subtle: var(--q1-color-background-200);
@@ -209,7 +209,7 @@
209
209
  }
210
210
 
211
211
  :root[data-theme='dark'] {
212
- /* 画布抬灰(对标 Geist 暗色 #0a0a0a):表面自带浮起感,纯黑仅留给 background-200 底壳。 */
212
+ /* 画布抬灰(对标外部参考暗色 #0a0a0a):表面自带浮起感,纯黑仅留给 background-200 底壳。 */
213
213
  --q1-color-background-100: #0a0a0a;
214
214
  --q1-color-background-200: #000000;
215
215
  --q1-color-gray-100: #1a1a1a;
@@ -316,7 +316,7 @@
316
316
  --q1-color-bg-subtle: var(--q1-color-gray-100);
317
317
  --q1-color-bg-panel: var(--q1-color-background-100);
318
318
  --q1-color-border: var(--q1-color-gray-200);
319
- /* 降档(对标 Geist 暗色最亮边框 rgb46):控件描边不再泛白。 */
319
+ /* 降档(对标外部参考暗色最亮边框 rgb46):控件描边不再泛白。 */
320
320
  --q1-color-border-strong: var(--q1-color-gray-400);
321
321
  --q1-color-border-overlay: color-mix(in srgb, #ffffff 14%, transparent);
322
322
  --q1-color-text-primary: var(--q1-color-gray-1000);
@@ -371,7 +371,7 @@
371
371
  text-decoration: none;
372
372
  }
373
373
 
374
- .button:hover {
374
+ .button:not(:disabled):not([aria-disabled='true']):hover {
375
375
  border-color: var(--q1-color-text-secondary);
376
376
  background: var(--q1-color-bg-subtle);
377
377
  }
@@ -387,12 +387,12 @@
387
387
  color: var(--q1-color-action-on-primary);
388
388
  }
389
389
 
390
- .button--primary:hover {
390
+ .button--primary:not(:disabled):not([aria-disabled='true']):hover {
391
391
  border-color: transparent;
392
392
  background: var(--q1-color-action-primary-hover);
393
393
  }
394
394
 
395
- .button--primary:active {
395
+ .button--primary:not(:disabled):not([aria-disabled='true']):active {
396
396
  background: var(--q1-color-action-primary-press);
397
397
  }
398
398
 
@@ -424,6 +424,12 @@
424
424
  animation: button-spin 0.7s linear infinite;
425
425
  }
426
426
 
427
+ .button__affix {
428
+ display: inline-flex;
429
+ flex: none;
430
+ align-items: center;
431
+ }
432
+
427
433
  .button--sm {
428
434
  min-height: 32px;
429
435
  padding: 0 var(--q1-space-3);
@@ -457,7 +463,7 @@
457
463
  border-radius: 50%;
458
464
  }
459
465
 
460
- /* Rounded(对标 Geist Rounded,营销页/落地页强调用):药丸形 + 柔和抬起阴影(恒黑 shadow token,暗色不泛白)。 */
466
+ /* Rounded(对标外部参考 Rounded,营销页/落地页强调用):药丸形 + 柔和抬起阴影(恒黑 shadow token,暗色不泛白)。 */
461
467
  .button--rounded {
462
468
  border-radius: 9999px;
463
469
  box-shadow:
@@ -485,7 +491,7 @@
485
491
  line-height: 1;
486
492
  }
487
493
 
488
- /* —— 统一着色配方 tone-surface(对标 Geist:oklch 按 hue 参数化,浅底/边框/深文,暗色反相)——
494
+ /* —— 统一着色配方 tone-surface(对标外部参考:oklch 按 hue 参数化,浅底/边框/深文,暗色反相)——
489
495
  Banner/Note/ProjectBanner/状态块共享同一套,消除各自 color-mix 配方漂移;主题自适应,消费方无需 dark 块。 */
490
496
  :root {
491
497
  --q1-tone-bg-info: oklch(from var(--q1-color-status-info) 0.96 0.03 h);
@@ -546,10 +552,10 @@
546
552
  color: var(--q1-color-status-danger);
547
553
  }
548
554
 
549
- /* 带前后缀的输入外框(对标 Geist 实测结构):flex 让前后缀占真实布局空间,任意宽度的
555
+ /* 带前后缀的输入外框(对标外部参考实测结构):flex 让前后缀占真实布局空间,任意宽度的
550
556
  字符串/图标几何上都不可能压到输入文字;边框/圆角/焦点环/校验/禁用整体上移到外框,
551
557
  内部 input 去皮拉伸填满。绝对定位 + 固定内边距的旧几何只装得下 16px 图标,已废弃。
552
- overflow 裁掉病态窄容器下前后缀(flex:none 不收缩)顶出圆角的溢出,Geist 外框同款;
558
+ overflow 裁掉病态窄容器下前后缀(flex:none 不收缩)顶出圆角的溢出,外部参考外框同款;
553
559
  焦点环/错误晕是 box-shadow,不受 overflow 裁剪。 */
554
560
  .input-control {
555
561
  display: flex;
@@ -622,7 +628,7 @@
622
628
  background: transparent;
623
629
  }
624
630
 
625
- /* 前后缀默认带灰块底色 + 朝向 input 一侧的 1px 分隔线(Geist 默认极性,实测块 0/12px 内边距、
631
+ /* 前后缀默认带灰块底色 + 朝向 input 一侧的 1px 分隔线(外部参考默认极性,实测块 0/12px 内边距、
626
632
  拉满外框高度);禁用态下外框同为 bg-subtle,块与外框同色成扁平、仅剩分隔线,属本品牌层取舍。 */
627
633
  .input-control__prefix {
628
634
  flex: none;
@@ -669,7 +675,7 @@
669
675
  padding-right: 8px;
670
676
  }
671
677
 
672
- /* 药丸形(对标 Geist rounded,实测 9999px 级 pill 半径);双类压过 :has 尺寸档的圆角设定。 */
678
+ /* 药丸形(对标外部参考 rounded,实测 9999px 级 pill 半径);双类压过 :has 尺寸档的圆角设定。 */
673
679
  .input-control.input-control--rounded {
674
680
  border-radius: 9999px;
675
681
  }
@@ -700,7 +706,7 @@
700
706
  padding-right: 36px;
701
707
  }
702
708
 
703
- /* 字段尺寸档(对标 Geist:xs24/sm32/md40/lg48;md=基础 40 不设类)。 */
709
+ /* 字段尺寸档(对标外部参考:xs24/sm32/md40/lg48;md=基础 40 不设类)。 */
704
710
  .form-control--xs {
705
711
  min-height: 24px;
706
712
  border-radius: var(--q1-radius-1);
@@ -724,7 +730,7 @@
724
730
  }
725
731
 
726
732
  /* Textarea 是多行控件,通用尺寸档的单行 min-height/padding 不适用,这里单独覆盖
727
- (Geist 官方 xSmall/small/mediumSmall/large 未给出具体像素值,数值按本库既有体系自定)。 */
733
+ (外部参考官方 xSmall/small/mediumSmall/large 未给出具体像素值,数值按本库既有体系自定)。 */
728
734
  .form-control--textarea.form-control--xs {
729
735
  min-height: 64px;
730
736
  padding: 6px 8px;
@@ -822,14 +828,14 @@
822
828
  box-shadow: var(--q1-shadow-focus);
823
829
  }
824
830
 
825
- /* 错误态(对标 Geist):纯红 1px 环 + 红 16% 的 4px 外晕,字段家族共享。 */
831
+ /* 错误态(对标外部参考):纯红 1px 环 + 红 16% 的 4px 外晕,字段家族共享。 */
826
832
  .form-field--error .form-control,
827
833
  .form-control[aria-invalid='true'] {
828
834
  border-color: var(--q1-color-status-danger);
829
835
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
830
836
  }
831
837
 
832
- /* 禁用态(对标 Geist):底色抬灰而非降透明度;opacity:1 归零 Chrome UA 对禁用控件的默认 0.7。 */
838
+ /* 禁用态(对标外部参考):底色抬灰而非降透明度;opacity:1 归零 Chrome UA 对禁用控件的默认 0.7。 */
833
839
  .form-control:disabled {
834
840
  background: var(--q1-color-bg-subtle);
835
841
  color: var(--q1-color-text-muted);
@@ -841,7 +847,7 @@
841
847
  .control-option {
842
848
  position: relative;
843
849
  display: grid;
844
- /* 盒 16px 统一(Checkbox 复核拍板:与 Radio 家族一致 + 对齐 Geist 实测 16×16)。 */
850
+ /* 盒 16px 统一(Checkbox 复核拍板:与 Radio 家族一致 + 对齐外部参考实测 16×16)。 */
845
851
  grid-template-columns: 16px minmax(0, 1fr);
846
852
  align-items: start;
847
853
  gap: var(--q1-space-3);
@@ -875,7 +881,7 @@
875
881
  border-radius: var(--q1-radius-1);
876
882
  background: var(--q1-color-bg-panel);
877
883
  transform: translateY(1px);
878
- /* 状态切换过渡(Geist 实测 0.2s cubic-bezier(0.4,0,0.2,1));颜色过渡非运动类,不需 reduced-motion 门控。 */
884
+ /* 状态切换过渡(外部参考实测 0.2s cubic-bezier(0.4,0,0.2,1));颜色过渡非运动类,不需 reduced-motion 门控。 */
879
885
  transition:
880
886
  border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
881
887
  background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -883,7 +889,7 @@
883
889
 
884
890
  .control-option__visual--radio {
885
891
  border-radius: 999px;
886
- /* Radio 对标 Geist:16px 控件、未选中环用更亮的 muted 灰(Geist 143 档);环色 0.2s 过渡(实测配方)。 */
892
+ /* Radio 对标外部参考:16px 控件、未选中环用更亮的 muted 灰(外部参考 143 档);环色 0.2s 过渡(实测配方)。 */
887
893
  width: 16px;
888
894
  height: 16px;
889
895
  border-color: var(--q1-color-text-muted);
@@ -892,7 +898,7 @@
892
898
  background 0.2s cubic-bezier(0.4, 0, 1, 1);
893
899
  }
894
900
 
895
- /* 圆点常驻、scale 0→1 切换(对标 Geist 实测:0.15s 同 bezier),点击/切换时有生长动效。 */
901
+ /* 圆点常驻、scale 0→1 切换(对标外部参考实测:0.15s 同 bezier),点击/切换时有生长动效。 */
896
902
  .control-option__visual--radio::after {
897
903
  content: '';
898
904
  position: absolute;
@@ -911,7 +917,7 @@
911
917
  }
912
918
  }
913
919
 
914
- /* Checkbox 选中改前景单色(拍板与 Radio 家族统一,对齐 Geist 实测):text-primary 填充 + 面板色反色勾,
920
+ /* Checkbox 选中改前景单色(拍板与 Radio 家族统一,对齐外部参考实测):text-primary 填充 + 面板色反色勾,
915
921
  两主题自适应;「选中」是状态非动作,不占用 indigo 动作色。 */
916
922
  .control-option input:checked + .control-option__visual {
917
923
  border-color: var(--q1-color-text-primary);
@@ -932,7 +938,7 @@
932
938
  transform: rotate(45deg);
933
939
  }
934
940
 
935
- /* 半选(indeterminate):视觉态非第三值,由父级逻辑驱动;填充同选中,标记为居中横杠(Geist 同形)。 */
941
+ /* 半选(indeterminate):视觉态非第三值,由父级逻辑驱动;填充同选中,标记为居中横杠(外部参考同形)。 */
936
942
  .control-option input[type='checkbox']:indeterminate + .control-option__visual {
937
943
  border-color: var(--q1-color-text-primary);
938
944
  background: var(--q1-color-text-primary);
@@ -949,7 +955,7 @@
949
955
  content: '';
950
956
  }
951
957
 
952
- /* Radio 选中改前景 outline 风(对标 Geist:text-primary 环 + 8px 点、无填充——它未用品牌色,
958
+ /* Radio 选中改前景 outline 风(对标外部参考:text-primary 环 + 8px 点、无填充——它未用品牌色,
953
959
  两主题自适应;Checkbox 待其复核实测后再统一)。 */
954
960
  .control-option input[type='radio']:checked + .control-option__visual {
955
961
  border-color: var(--q1-color-text-primary);
@@ -960,7 +966,7 @@
960
966
  transform: scale(1);
961
967
  }
962
968
 
963
- /* Radio 禁用改色彩降级(对标 Geist:全灰、不降透明度)。 */
969
+ /* Radio 禁用改色彩降级(对标外部参考:全灰、不降透明度)。 */
964
970
  .control-option input[type='radio']:disabled + .control-option__visual {
965
971
  opacity: 1;
966
972
  border-color: var(--q1-color-gray-500);
@@ -987,7 +993,7 @@
987
993
  box-shadow: var(--q1-shadow-focus);
988
994
  }
989
995
 
990
- /* Checkbox 禁用改色彩降级(与 Radio 定稿结论一致、对齐 Geist 实测:全灰锚定、不降透明度——
996
+ /* Checkbox 禁用改色彩降级(与 Radio 定稿结论一致、对齐外部参考实测:全灰锚定、不降透明度——
991
997
  之前的 opacity 0.56 衰减是 Breadcrumbs/Radio 复核时已定性的违规模式,这里补齐家族最后一块。 */
992
998
  .control-option input:disabled + .control-option__visual,
993
999
  .control-option input:disabled ~ .control-option__body {
@@ -1021,7 +1027,7 @@
1021
1027
  }
1022
1028
 
1023
1029
  .control-option__label {
1024
- /* 排版跟 Geist 实测(13/400);标题与描述的层级由颜色区分。 */
1030
+ /* 排版跟外部参考实测(13/400);标题与描述的层级由颜色区分。 */
1025
1031
  font-size: var(--q1-font-size-label-13);
1026
1032
  font-weight: var(--q1-font-weight-regular);
1027
1033
  line-height: var(--q1-line-height-label-13);
@@ -1079,7 +1085,7 @@
1079
1085
  .menu__trigger:hover {
1080
1086
  background: color-mix(in srgb, var(--q1-color-text-primary) 4%, transparent);
1081
1087
  }
1082
- /* 图标-only 触发器(对标 Geist Custom trigger:可访问名称经 aria-label 暴露)。 */
1088
+ /* 图标-only 触发器(对标外部参考 Custom trigger:可访问名称经 aria-label 暴露)。 */
1083
1089
  .menu__trigger--icon {
1084
1090
  width: 32px;
1085
1091
  height: 32px;
@@ -1090,7 +1096,7 @@
1090
1096
  outline: none;
1091
1097
  box-shadow: var(--q1-shadow-focus);
1092
1098
  }
1093
- /* 实测 Geist:容器 padding 8px(space-2)/radius 12px(radius-4);item 固定 40px 高(靠固定高+
1099
+ /* 实测外部参考:容器 padding 8px(space-2)/radius 12px(radius-4);item 固定 40px 高(靠固定高+
1094
1100
  flex 居中,不是 padding 自然撑开),radius-2(6px) 已一致;禁用项只换色不降 opacity(对标
1095
1101
  Radio/Note/Modal 已建立的「禁用色彩降级、opacity 恒 1」家族规则)。 */
1096
1102
  .menu__popup {
@@ -1206,7 +1212,7 @@
1206
1212
  }
1207
1213
  }
1208
1214
 
1209
- /* 头像:直径由 --q1-avatar-size 驱动(自由数值,对齐 Geist size={n} 模型),字号=直径一半。
1215
+ /* 头像:直径由 --q1-avatar-size 驱动(自由数值,对齐外部参考 size={n} 模型),字号=直径一半。
1210
1216
  不设 overflow:hidden——右下角标要越出圆周;需要裁剪的形态各自处理。 */
1211
1217
  .avatar {
1212
1218
  position: relative;
@@ -1237,7 +1243,7 @@
1237
1243
  }
1238
1244
 
1239
1245
  /* 字母/图标回退:实心中性灰盘 + 恒白字。gray-900(亮 4d4d4d/暗 a0a0a0)正好落在
1240
- Geist 实测值(亮 444/暗 999)上;白字用 oklch 字面量(身份盘前景恒白,同 Geist)。
1246
+ 外部参考实测值(亮 444/暗 999)上;白字用 oklch 字面量(身份盘前景恒白,同外部参考)。
1241
1247
  overflow 裁剪兜超长 letter 输入(合法输入 ≤2 字符不受影响)。 */
1242
1248
  .avatar--letter,
1243
1249
  .avatar--glyph {
@@ -1247,7 +1253,7 @@
1247
1253
  overflow: hidden;
1248
1254
  }
1249
1255
 
1250
- /* 占位骨架:微光渐变(Geist 同款三段式,无边框),尊重 prefers-reduced-motion。 */
1256
+ /* 占位骨架:微光渐变(外部参考同款三段式,无边框),尊重 prefers-reduced-motion。 */
1251
1257
  .avatar--placeholder {
1252
1258
  overflow: hidden;
1253
1259
  background: var(--q1-color-bg-subtle);
@@ -1282,7 +1288,7 @@
1282
1288
  }
1283
1289
  }
1284
1290
 
1285
- /* 右下角标(对标 Geist With custom icon):直径=头像一半,外环用面板色与主体分离。 */
1291
+ /* 右下角标(对标外部参考 With custom icon):直径=头像一半,外环用面板色与主体分离。 */
1286
1292
  .avatar__badge {
1287
1293
  position: absolute;
1288
1294
  right: calc(var(--q1-avatar-size, 32px) * -0.06);
@@ -1323,7 +1329,7 @@
1323
1329
  box-shadow: 0 0 0 1px var(--q1-color-bg-panel);
1324
1330
  }
1325
1331
 
1326
- /* +N 收纳芯片:恒定深色、不随主题翻转(Geist 双主题实测同值;同族先例:遮罩恒黑)。 */
1332
+ /* +N 收纳芯片:恒定深色、不随主题翻转(外部参考双主题实测同值;同族先例:遮罩恒黑)。 */
1327
1333
  .avatar--overflow {
1328
1334
  background: oklch(0.2 0 0);
1329
1335
  color: oklch(0.94 0 0);
@@ -1332,7 +1338,7 @@
1332
1338
  font-weight: var(--q1-font-weight-semibold);
1333
1339
  }
1334
1340
 
1335
- /* 实测 Geist:胶囊三档 h20/24/32、字号 11/12/14、字重 500、tabular-nums;图标随档 12/14/16,lg gap 6px。 */
1341
+ /* 实测外部参考:胶囊三档 h20/24/32、字号 11/12/14、字重 500、tabular-nums;图标随档 12/14/16,lg gap 6px。 */
1336
1342
  .badge {
1337
1343
  display: inline-flex;
1338
1344
  align-items: center;
@@ -1456,13 +1462,24 @@
1456
1462
  color: oklch(from var(--q1-color-status-danger) 0.74 0.16 h);
1457
1463
  }
1458
1464
 
1459
- /* 反转款:深浅互换的强调 badge(实测 Geist inverted:gray-1000 底 / gray-100 字,token 双主题自翻)。 */
1465
+ /* quiet 档:低强调元数据形态(SKU/条码/待绑定包裹等),视觉≈neutral-subtle——淡染底、无描边,但不带 tone 语义色。 */
1466
+ .badge--quiet {
1467
+ background: oklch(from var(--q1-color-gray-700) 0.95 0 0);
1468
+ color: oklch(from var(--q1-color-gray-700) 0.42 0 0);
1469
+ }
1470
+
1471
+ :root[data-theme='dark'] .badge--quiet {
1472
+ background: oklch(from var(--q1-color-gray-700) 0.26 0 0);
1473
+ color: oklch(from var(--q1-color-gray-700) 0.84 0 0);
1474
+ }
1475
+
1476
+ /* 反转款:深浅互换的强调 badge(实测外部参考 inverted:gray-1000 底 / gray-100 字,token 双主题自翻)。 */
1460
1477
  .badge--inverted {
1461
1478
  background: var(--q1-color-gray-1000);
1462
1479
  color: var(--q1-color-gray-100);
1463
1480
  }
1464
1481
 
1465
- /* Pill:基于 Badge 样式的特殊链接(实测 Geist:background-200 底 + 1px 内嵌 hairline 环,悬停提亮到 gray-200)。 */
1482
+ /* Pill:基于 Badge 样式的特殊链接(实测外部参考:background-200 底 + 1px 内嵌 hairline 环,悬停提亮到 gray-200)。 */
1466
1483
  .badge--pill {
1467
1484
  background: var(--q1-color-background-200);
1468
1485
  color: var(--q1-color-text-primary);
@@ -1550,7 +1567,7 @@
1550
1567
  border-color: var(--q1-color-border-strong);
1551
1568
  }
1552
1569
 
1553
- /* 页顶公告形态(对齐 Geist demo 实测):透明底无边框、内容居中、16px 文案;
1570
+ /* 页顶公告形态(对齐外部参考 demo 实测):透明底无边框、内容居中、16px 文案;
1554
1571
  与页内卡条(tone 变体)分工,两种定位见页面使用原则。 */
1555
1572
  .banner--announcement {
1556
1573
  justify-content: center;
@@ -1566,7 +1583,7 @@
1566
1583
  line-height: var(--q1-line-height-copy-16);
1567
1584
  }
1568
1585
 
1569
- /* 公告主操作:恒深药丸,双主题同值(Geist 亮暗实测同为深底浅字;同族先例:Avatar +N 芯片、遮罩恒黑)。 */
1586
+ /* 公告主操作:恒深药丸,双主题同值(外部参考亮暗实测同为深底浅字;同族先例:Avatar +N 芯片、遮罩恒黑)。 */
1570
1587
  .banner__cta {
1571
1588
  flex-shrink: 0;
1572
1589
  display: inline-flex;
@@ -1733,7 +1750,7 @@ a.breadcrumb__link:hover {
1733
1750
  font-weight: var(--q1-font-weight-medium);
1734
1751
  }
1735
1752
 
1736
- /* 禁用态:固定 gray-700(双主题同一色值,Geist 实测),不用透明度衰减——
1753
+ /* 禁用态:固定 gray-700(双主题同一色值,外部参考实测),不用透明度衰减——
1737
1754
  与 text-muted 在暗色主题会漂到 gray-800 不同,这里刻意锚定 gray-700 原值。 */
1738
1755
  .breadcrumb__link--disabled {
1739
1756
  color: var(--q1-color-gray-700);
@@ -1781,7 +1798,7 @@ a.breadcrumb__link:hover {
1781
1798
  display: none;
1782
1799
  }
1783
1800
 
1784
- /* menu 形态(对标 Geist type="menu" 实测):独立描边药丸,无分隔符;
1801
+ /* menu 形态(对标外部参考 type="menu" 实测):独立描边药丸,无分隔符;
1785
1802
  尺寸/描边/圆角逐字节对齐(22px 高、2px/6px 内距、1px border-overlay、4px 圆角、12px 字)。 */
1786
1803
  .breadcrumb--menu .breadcrumb__list {
1787
1804
  gap: 6px;
@@ -1831,7 +1848,7 @@ a.breadcrumb__link:hover {
1831
1848
  overflow: hidden;
1832
1849
  border-radius: var(--q1-radius-4);
1833
1850
  background: var(--browser-surface);
1834
- /* material-small:1px 顶部亮环 + 柔和投影 + 1px 暗边环(对标 Geist 三层叠加)。 */
1851
+ /* material-small:1px 顶部亮环 + 柔和投影 + 1px 暗边环(对标外部参考三层叠加)。 */
1835
1852
  box-shadow:
1836
1853
  inset 0 0 0 1px color-mix(in srgb, white 14%, transparent),
1837
1854
  0 1px 2px color-mix(in srgb, black 40%, transparent),
@@ -1921,7 +1938,7 @@ a.breadcrumb__link:hover {
1921
1938
  border-radius: 9999px;
1922
1939
  }
1923
1940
 
1924
- /* 字面量 macOS 交通灯配色(Geist 实测,双主题同值,与像素级验证过的转换值对齐):
1941
+ /* 字面量 macOS 交通灯配色(外部参考实测,双主题同值,与像素级验证过的转换值对齐):
1925
1942
  这是操作系统窗口控件的写实模拟,不是语义状态传达,故意不用 --q1-color-status-* token。 */
1926
1943
  .browser__dot--close {
1927
1944
  background: oklch(0.6921 0.1953 26.36);
@@ -2065,7 +2082,7 @@ a.breadcrumb__link:hover {
2065
2082
  object-fit: cover;
2066
2083
  }
2067
2084
 
2068
- /* 窄屏:隐藏导航图标(对标 Geist max-md:hidden)。起始区常驻自适应宽度、
2085
+ /* 窄屏:隐藏导航图标(对标外部参考 max-md:hidden)。起始区常驻自适应宽度、
2069
2086
  地址区常驻吃满剩余空间(见 .browser__zone--start/--center),本断点无需再单独处理。 */
2070
2087
  @media (max-width: 640px) {
2071
2088
  .browser__controls {
@@ -2073,7 +2090,7 @@ a.breadcrumb__link:hover {
2073
2090
  }
2074
2091
  }
2075
2092
 
2076
- /* 书籍封面(2026-07-09 双轮实测 Geist):静止=平面封面(49/60、圆角 6/4/4/6、暗色微光、
2093
+ /* 书籍封面(2026-07-09 双轮实测外部参考):静止=平面封面(49/60、圆角 6/4/4/6、暗色微光、
2077
2094
  双层外阴影随宽度缩放、左缘 8.2% 书脊沟线、排版=宽度线性缩放 0.0836/0.061);
2078
2095
  悬停=绕 Y 轴翻开(rotateY -20° + scale 1.066 + translateX -16px,0.25s ease-out——
2079
2096
  从冻结的 CSSTransition 关键帧取证;hidden 标签页首测误判"无动效",用户人眼纠正)。 */
@@ -2180,7 +2197,7 @@ a.breadcrumb__link:hover {
2180
2197
  background: var(--q1-book-sheen);
2181
2198
  }
2182
2199
 
2183
- /* 顶部色带(stripe 变体,Geist 默认形态):占封面高度 47.8%。 */
2200
+ /* 顶部色带(stripe 变体,外部参考默认形态):占封面高度 47.8%。 */
2184
2201
  .book__band {
2185
2202
  position: relative;
2186
2203
  display: flex;
@@ -2216,7 +2233,7 @@ a.breadcrumb__link:hover {
2216
2233
  color: var(--book-text);
2217
2234
  }
2218
2235
 
2219
- /* 书脊沟线:左缘 8.2% 宽度内一条白 25% 高光渐变(两主题同值,Geist 实测)。 */
2236
+ /* 书脊沟线:左缘 8.2% 宽度内一条白 25% 高光渐变(两主题同值,外部参考实测)。 */
2220
2237
  .book__gutter {
2221
2238
  position: absolute;
2222
2239
  inset: 0 auto 0 0;
@@ -2246,7 +2263,7 @@ a.breadcrumb__link:hover {
2246
2263
  object-fit: cover;
2247
2264
  }
2248
2265
 
2249
- /* 纹理(自有配方,Geist 多款纹理样式记 non-goal):细密交叉底纹叠在封面色上,不糊标题。 */
2266
+ /* 纹理(自有配方,外部参考多款纹理样式记 non-goal):细密交叉底纹叠在封面色上,不糊标题。 */
2250
2267
  .book--textured .book__cover {
2251
2268
  background-image:
2252
2269
  repeating-linear-gradient(
@@ -2317,7 +2334,7 @@ a.breadcrumb__link:hover {
2317
2334
  padding: var(--q1-space-6);
2318
2335
  }
2319
2336
 
2320
- /* 分段控件 Switch(对标 Geist Switch):一组互斥选项,选中段抬起;底层 q1-sr-only 单选组,方向键原生可用。 */
2337
+ /* 分段控件 Switch(对标外部参考 Switch):一组互斥选项,选中段抬起;底层 q1-sr-only 单选组,方向键原生可用。 */
2321
2338
  .switch-control {
2322
2339
  display: inline-flex;
2323
2340
  align-items: center;
@@ -2393,7 +2410,7 @@ a.breadcrumb__link:hover {
2393
2410
  gap: var(--q1-space-4);
2394
2411
  }
2395
2412
 
2396
- /* 下划线式 Tabs(对标 Geist):tablist 一条底边基线,选中标签用 2px 前景色底边下划线、透明底、字重 400。 */
2413
+ /* 下划线式 Tabs(对标外部参考):tablist 一条底边基线,选中标签用 2px 前景色底边下划线、透明底、字重 400。 */
2397
2414
  .tabs-control {
2398
2415
  display: flex;
2399
2416
  align-items: center;
@@ -2452,7 +2469,7 @@ a.breadcrumb__link:hover {
2452
2469
  align-items: center;
2453
2470
  }
2454
2471
 
2455
- /* 次级(secondary)变体(对标 Geist Secondary Tabs):药丸组容器,选中态用前景色填充、无下划线。 */
2472
+ /* 次级(secondary)变体(对标外部参考 Secondary Tabs):药丸组容器,选中态用前景色填充、无下划线。 */
2456
2473
  .tabs-control--secondary {
2457
2474
  gap: var(--q1-space-1);
2458
2475
  border: 1px solid var(--q1-color-border-strong);
@@ -2683,7 +2700,7 @@ a.breadcrumb__link:hover {
2683
2700
  cursor: pointer;
2684
2701
  }
2685
2702
 
2686
- /* 固定时区:只读文本,去掉可点击暗示(Geist pinnedTimezone——只读文本非 select)。 */
2703
+ /* 固定时区:只读文本,去掉可点击暗示(外部参考 pinnedTimezone——只读文本非 select)。 */
2687
2704
  .cal-inputs__tz--pinned {
2688
2705
  cursor: default;
2689
2706
  }
@@ -2956,7 +2973,7 @@ a.breadcrumb__link:hover {
2956
2973
  height: 1px;
2957
2974
  }
2958
2975
 
2959
- /* 竖向随容器拉伸(对标 Geist h-full);min-height 防非弹性父容器下塌陷成一点。 */
2976
+ /* 竖向随容器拉伸(对标外部参考 h-full);min-height 防非弹性父容器下塌陷成一点。 */
2960
2977
  .separator--vertical {
2961
2978
  width: 1px;
2962
2979
  height: auto;
@@ -3041,7 +3058,7 @@ a.breadcrumb__link:hover {
3041
3058
  .spinner--success { color: var(--q1-color-status-success); }
3042
3059
  .spinner--info { color: var(--q1-color-status-info); }
3043
3060
 
3044
- /* 辐条角度与动画延迟由组件按辐条数内联计算(辐条数随尺寸增减,对标 Geist)。 */
3061
+ /* 辐条角度与动画延迟由组件按辐条数内联计算(辐条数随尺寸增减,对标外部参考)。 */
3045
3062
  .spinner__bar {
3046
3063
  position: absolute;
3047
3064
  top: 0;
@@ -3203,7 +3220,7 @@ a.breadcrumb__link:hover {
3203
3220
  color: var(--q1-color-text-primary);
3204
3221
  }
3205
3222
 
3206
- /* 复制按钮 absolute 挂右侧(对标 Geist):单行高度由文本决定(10px 竖向 padding + 20px 行高 ≈ 42),
3223
+ /* 复制按钮 absolute 挂右侧(对标外部参考):单行高度由文本决定(10px 竖向 padding + 20px 行高 ≈ 42),
3207
3224
  不被按钮撑高;文本区 padding-right 预留按钮位。 */
3208
3225
  .snippet {
3209
3226
  position: relative;
@@ -3216,7 +3233,7 @@ a.breadcrumb__link:hover {
3216
3233
  background: var(--q1-color-bg-subtle);
3217
3234
  }
3218
3235
 
3219
- /* 反色:纯反色一层(对标 Geist Inverted),两主题自适应,无内衬块。 */
3236
+ /* 反色:纯反色一层(对标外部参考 Inverted),两主题自适应,无内衬块。 */
3220
3237
  .snippet--inverted {
3221
3238
  border-color: var(--q1-color-text-primary);
3222
3239
  background: var(--q1-color-text-primary);
@@ -3358,7 +3375,7 @@ a.breadcrumb__link:hover {
3358
3375
  100% { transform: rotate(360deg); }
3359
3376
  }
3360
3377
 
3361
- /* 实测 Geist:条高 10px、圆角 radius-2、轨道 gray-200;填充默认中性前景,
3378
+ /* 实测外部参考:条高 10px、圆角 radius-2、轨道 gray-200;填充默认中性前景,
3362
3379
  过渡 width/background-color 0.1s ease-in(换色也平滑)。停靠点悬停有气泡,
3363
3380
  故裁剪收进 __track 内层,停靠点留在外层不被 overflow 剪掉。 */
3364
3381
  .progress {
@@ -3459,7 +3476,7 @@ a.breadcrumb__link:hover {
3459
3476
  transform: translate(-50%, 0);
3460
3477
  }
3461
3478
 
3462
- /* 实测 Geist:非填充态背景恒透明,靠边框+图标+正文同色传达类型(不是只图标上色,正文保持中性);
3479
+ /* 实测外部参考:非填充态背景恒透明,靠边框+图标+正文同色传达类型(不是只图标上色,正文保持中性);
3463
3480
  filled 只加浅色底,图标/正文颜色不变——两态共享同一套 tone-fg/tone-border,复用 Banner 已建立的
3464
3481
  tone-surface 配方(不新开一层浅色阶)。 */
3465
3482
  .note {
@@ -3492,7 +3509,7 @@ a.breadcrumb__link:hover {
3492
3509
  font-weight: var(--q1-font-weight-medium);
3493
3510
  }
3494
3511
 
3495
- /* 行动按钮(实测 Geist:32px 高、radius-2、实心反色 CTA,不是我们原来的浅边框按钮)。 */
3512
+ /* 行动按钮(实测外部参考:32px 高、radius-2、实心反色 CTA,不是我们原来的浅边框按钮)。 */
3496
3513
  .note__action {
3497
3514
  flex-shrink: 0;
3498
3515
  display: inline-flex;
@@ -3555,7 +3572,7 @@ a.breadcrumb__link:hover {
3555
3572
  /* secondary 是中性语义,不像其余四档有专属 tone token,填充态用中性 subtle 底。 */
3556
3573
  .note--filled.note--secondary { background: var(--q1-color-bg-subtle); }
3557
3574
 
3558
- /* 禁用态(实测 Geist Disabled 章节:整体降灰,不因类型保留颜色;对标 Radio 的色彩降级配方,
3575
+ /* 禁用态(实测外部参考 Disabled 章节:整体降灰,不因类型保留颜色;对标 Radio 的色彩降级配方,
3559
3576
  opacity 恒 1,只换色,源码顺序放在类型规则之后确保覆盖)。
3560
3577
  .note--filled.note--info 等是两类选择器(优先级 0,2,0),比 .note--disabled 单类(0,1,0)更高,
3561
3578
  源码顺序赢不了优先级差——填充+禁用组合必须用同为两类的选择器才能真正盖掉填充色。 */
@@ -3574,7 +3591,7 @@ a.breadcrumb__link:hover {
3574
3591
  }
3575
3592
 
3576
3593
  /* 修正:gray-500 实底 + bg-canvas 深色字在暗色主题几乎不可读(bg-canvas 暗色下是近黑,
3577
- 叠在中灰底上对比度太低)。实测 Geist 的真实禁用配方是「底色几乎不变、只把字调淡」
3594
+ 叠在中灰底上对比度太低)。实测外部参考的真实禁用配方是「底色几乎不变、只把字调淡」
3578
3595
  (light 主题测得 bg 几乎同色,字从纯白调淡到中灰),改为对底色加 55% 透明度混合。 */
3579
3596
  .note--disabled .note__action {
3580
3597
  background: var(--q1-color-gray-1000);
@@ -3769,7 +3786,7 @@ a.breadcrumb__link:hover {
3769
3786
  color: var(--q1-color-text-secondary);
3770
3787
  }
3771
3788
 
3772
- /* 语言切换按钮组(对标 Geist Language switcher with tabs):占 header 左侧文件名位。 */
3789
+ /* 语言切换按钮组(对标外部参考 Language switcher with tabs):占 header 左侧文件名位。 */
3773
3790
  .codeblock__tabs {
3774
3791
  display: inline-flex;
3775
3792
  gap: var(--q1-space-1);
@@ -4096,7 +4113,7 @@ a.breadcrumb__link:hover {
4096
4113
  .context-card-wrap--left .context-card { right: calc(100% + 8px); top: 0; }
4097
4114
  .context-card-wrap--right .context-card { left: calc(100% + 8px); top: 0; }
4098
4115
 
4099
- /* 轴向对齐(对标 Geist Alignment):默认 start 贴起始边;center 沿轴居中;end 贴结束边。
4116
+ /* 轴向对齐(对标外部参考 Alignment):默认 start 贴起始边;center 沿轴居中;end 贴结束边。
4100
4117
  top/bottom 的轴是水平(left/translateX),left/right 的轴是垂直(top/translateY)。 */
4101
4118
  .context-card-wrap--top.context-card-wrap--align-center .context-card,
4102
4119
  .context-card-wrap--bottom.context-card-wrap--align-center .context-card {
@@ -4190,7 +4207,7 @@ a.breadcrumb__link:hover {
4190
4207
  .rtc-trigger {
4191
4208
  border-bottom: 1px dashed var(--q1-color-border-strong);
4192
4209
  color: var(--q1-color-text-primary);
4193
- /* 光标铁律:跟 Geist 实测(其 RTC 触发器为 pointer)。 */
4210
+ /* 光标铁律:跟外部参考实测(其 RTC 触发器为 pointer)。 */
4194
4211
  cursor: pointer;
4195
4212
  }
4196
4213
 
@@ -4221,13 +4238,13 @@ a.breadcrumb__link:hover {
4221
4238
  transition: opacity 0.12s ease, visibility 0.12s ease;
4222
4239
  }
4223
4240
 
4224
- /* 长格式相对时间标题行(对标 Geist)。 */
4241
+ /* 长格式相对时间标题行(对标外部参考)。 */
4225
4242
  .rtc-card__relative {
4226
4243
  font-size: 12px;
4227
4244
  color: var(--q1-color-text-primary);
4228
4245
  }
4229
4246
 
4230
- /* 时区徽章(UTC / GMT+8 小 chip,对标 Geist)。 */
4247
+ /* 时区徽章(UTC / GMT+8 小 chip,对标外部参考)。 */
4231
4248
  .rtc-card__zone {
4232
4249
  flex: none;
4233
4250
  padding: 1px var(--q1-space-1);
@@ -4256,8 +4273,8 @@ a.breadcrumb__link:hover {
4256
4273
  color: var(--q1-color-text-secondary);
4257
4274
  }
4258
4275
 
4259
- /* 项目横幅(对标 Geist 实测):radius 0 贴边通栏条;图标随文字色;CTA 亮一档 + medium。
4260
- flex-wrap 为窄屏防溢出兜底(有理由偏离:Geist 无,正常宽度不可见)。 */
4276
+ /* 项目横幅(对标外部参考实测):radius 0 贴边通栏条;图标随文字色;CTA 亮一档 + medium。
4277
+ flex-wrap 为窄屏防溢出兜底(有理由偏离:外部参考无,正常宽度不可见)。 */
4261
4278
  .project-banner {
4262
4279
  display: flex;
4263
4280
  flex-wrap: wrap;
@@ -4343,14 +4360,14 @@ a.breadcrumb__link:hover {
4343
4360
  background: var(--q1-color-bg-subtle);
4344
4361
  }
4345
4362
 
4346
- /* 分段卡片给容器 16px 内边距(对齐 Geist p-4):section 随之内缩,分隔线不贯满卡片边、左端对齐文字。
4363
+ /* 分段卡片给容器 16px 内边距(对齐外部参考 p-4):section 随之内缩,分隔线不贯满卡片边、左端对齐文字。
4347
4364
  这是分隔线"内缩"的来源——不是给线加 inset,而是容器留边、section 无水平 padding,线随 section 内缩。 */
4348
4365
  .q1-card--divided {
4349
4366
  padding: var(--q1-space-4);
4350
4367
  }
4351
4368
 
4352
4369
  .q1-card--divided .q1-card__section {
4353
- /* 竖排段:只留垂直 padding(对齐 Geist py-2),水平交给容器内边距,分隔线因此内缩对齐文字。 */
4370
+ /* 竖排段:只留垂直 padding(对齐外部参考 py-2),水平交给容器内边距,分隔线因此内缩对齐文字。 */
4354
4371
  padding: var(--q1-space-2) 0;
4355
4372
  font-size: 14px;
4356
4373
  color: var(--q1-color-text-primary);
@@ -4364,7 +4381,7 @@ a.breadcrumb__link:hover {
4364
4381
  特异性用 .q1-card.q1-card--row(0,2,0) 压过可点卡片的 a.q1-card(0,1,1),否则 <a> 卡片的 display:block 会把 flex 打回竖排。 */
4365
4382
  .q1-card.q1-card--row {
4366
4383
  display: flex;
4367
- /* 横排指标块并列需要空间,解除默认 400px 限宽,充满容器(对齐 Geist 横排充满 demo 框)。 */
4384
+ /* 横排指标块并列需要空间,解除默认 400px 限宽,充满容器(对齐外部参考横排充满 demo 框)。 */
4368
4385
  max-width: none;
4369
4386
  }
4370
4387
 
@@ -4373,7 +4390,7 @@ a.breadcrumb__link:hover {
4373
4390
  }
4374
4391
 
4375
4392
  .q1-card--divided.q1-card--row .q1-card__section {
4376
- /* 横排段:垂直 padding 归 0(内缩交给容器)、水平 8px 给文字到竖线的间距(对齐 Geist row section 0 8px)。 */
4393
+ /* 横排段:垂直 padding 归 0(内缩交给容器)、水平 8px 给文字到竖线的间距(对齐外部参考 row section 0 8px)。 */
4377
4394
  padding: 0 var(--q1-space-2);
4378
4395
  }
4379
4396
 
@@ -4401,14 +4418,14 @@ a.breadcrumb__link:hover {
4401
4418
  color: var(--q1-color-text-secondary);
4402
4419
  }
4403
4420
 
4404
- /* 常驻柔和投影(对齐 Geist shadow):贴地薄影 + 扩散软影两层,让卡片浮于背景。 */
4421
+ /* 常驻柔和投影(对齐外部参考 shadow):贴地薄影 + 扩散软影两层,让卡片浮于背景。 */
4405
4422
  .q1-card--shadow {
4406
4423
  box-shadow:
4407
4424
  0 1px 2px color-mix(in srgb, var(--q1-color-shadow) 6%, transparent),
4408
4425
  0 8px 24px color-mix(in srgb, var(--q1-color-shadow) 8%, transparent);
4409
4426
  }
4410
4427
 
4411
- /* 无框卡片(bordered={false}):去边框,靠底色/投影表达边界(对齐 Geist border 可选)。 */
4428
+ /* 无框卡片(bordered={false}):去边框,靠底色/投影表达边界(对齐外部参考 border 可选)。 */
4412
4429
  .q1-card--borderless {
4413
4430
  border-color: transparent;
4414
4431
  }
@@ -4578,7 +4595,7 @@ a.q1-card:focus-visible {
4578
4595
  100% { transform: rotate(360deg); }
4579
4596
  }
4580
4597
 
4581
- /* Esc 键帽清除(对标 Geist):清除入口本身就是快捷键教学;点击或按 Esc 清空。 */
4598
+ /* Esc 键帽清除(对标外部参考):清除入口本身就是快捷键教学;点击或按 Esc 清空。 */
4582
4599
  .search-input__esc {
4583
4600
  position: absolute;
4584
4601
  top: 50%;
@@ -4653,7 +4670,7 @@ a.q1-card:focus-visible {
4653
4670
  background: var(--q1-color-bg-subtle);
4654
4671
  }
4655
4672
 
4656
- /* tone="danger"|"warning" 是整卡状态(对标 Geist Error/Warning Type):边框着色表达整组处于错误/警告态,
4673
+ /* tone="danger"|"warning" 是整卡状态(对标外部参考 Error/Warning Type):边框着色表达整组处于错误/警告态,
4657
4674
  页脚派生轻染底延续状态可读性——不是只染页脚(原 .fieldset__footer--* 语义提升为整卡 .fieldset--*)。 */
4658
4675
  .fieldset--danger {
4659
4676
  border-color: var(--q1-color-status-danger);
@@ -4739,7 +4756,7 @@ a.q1-card:focus-visible {
4739
4756
  justify-content: center;
4740
4757
  }
4741
4758
 
4742
- /* 药丸触发器(对标 Geist):h32 / font 14/500 / 全圆角;颜色走家族 panel+border。 */
4759
+ /* 药丸触发器(对标外部参考):h32 / font 14/500 / 全圆角;颜色走家族 panel+border。 */
4743
4760
  .show-more__trigger {
4744
4761
  display: inline-flex;
4745
4762
  align-items: center;
@@ -4807,7 +4824,7 @@ a.q1-card:focus-visible {
4807
4824
  transform: rotate(90deg);
4808
4825
  }
4809
4826
  /* 收起时面板保留在 DOM(grid 0fr),便于页面内查找命中;visibility 把收起内容移出
4810
- 焦点序与读屏树(对齐 Geist closed 用 hidden/visibility)——关闭时随高度动画结束才隐藏,
4827
+ 焦点序与读屏树(对齐外部参考 closed 用 hidden/visibility)——关闭时随高度动画结束才隐藏,
4811
4828
  打开时立即可见(visibility 的过渡语义天然如此)。 */
4812
4829
  .collapse__panel {
4813
4830
  display: grid;
@@ -5137,7 +5154,7 @@ a.q1-card:focus-visible {
5137
5154
  .choicebox--checkbox:has(.choicebox__input:disabled:checked) .choicebox__indicator {
5138
5155
  background: var(--q1-color-gray-500);
5139
5156
  }
5140
- /* 实测 Geist:裸轨(无外框/无背景/无 padding),图标抽离文字块、绝对定位在 28px 凹槽外;
5157
+ /* 实测外部参考:裸轨(无外框/无背景/无 padding),图标抽离文字块、绝对定位在 28px 凹槽外;
5141
5158
  悬停只把文字/图标从 text-secondary 加深到 text-primary,无背景浸染、无品牌色——
5142
5159
  这是页面间的纯导航链(chrome),不是行动号召,indigo 只守「动作」。 */
5143
5160
  .pagination {
@@ -5175,7 +5192,7 @@ a.q1-card:focus-visible {
5175
5192
  .pagination__link:hover .pagination__label {
5176
5193
  color: var(--q1-color-text-primary);
5177
5194
  }
5178
- /* 定位上下文钉在标题文字块(实测 Geist:图标是标题块的子节点,随文字宽度走,
5195
+ /* 定位上下文钉在标题文字块(实测外部参考:图标是标题块的子节点,随文字宽度走,
5179
5196
  而不是钉在整条链接上)——否则图标会漂出链接可点/可聚焦的框外。 */
5180
5197
  .pagination__title-frame {
5181
5198
  position: relative;
@@ -5411,7 +5428,7 @@ a.q1-card:focus-visible {
5411
5428
  align-items: center;
5412
5429
  gap: var(--q1-space-2);
5413
5430
  }
5414
- /* 纵向带按钮(对标 Geist Vertical with buttons):上/滚动区/下 纵向堆叠。 */
5431
+ /* 纵向带按钮(对标外部参考 Vertical with buttons):上/滚动区/下 纵向堆叠。 */
5415
5432
  .scroller-buttons--vertical {
5416
5433
  flex-direction: column;
5417
5434
  align-items: stretch;
@@ -5485,7 +5502,7 @@ a.q1-card:focus-visible {
5485
5502
  .theme-switcher:disabled .theme-switcher__option {
5486
5503
  cursor: default;
5487
5504
  }
5488
- /* 实测 Geist(320 框):壳与岛恒黑、键恒灰——拟真设备不随主题翻转;无投影,黑壳对比度即高度感。
5505
+ /* 实测外部参考(320 框):壳与岛恒黑、键恒灰——拟真设备不随主题翻转;无投影,黑壳对比度即高度感。
5489
5506
  键位为 675 框高的实测百分比换算:静音 15%、音量 23.4%/32.4%、电源(右)28.2%。 */
5490
5507
  .phone {
5491
5508
  position: relative;
@@ -5539,7 +5556,7 @@ a.q1-card:focus-visible {
5539
5556
  overflow: hidden;
5540
5557
  background: var(--q1-color-bg-canvas);
5541
5558
  }
5542
- /* iOS home 条:设备铬,叠在屏内容底部;我们的屏底色随主题翻转,故取前景色保持可见(Geist 灰占位屏上为恒白)。 */
5559
+ /* iOS home 条:设备铬,叠在屏内容底部;我们的屏底色随主题翻转,故取前景色保持可见(外部参考灰占位屏上为恒白)。 */
5543
5560
  .phone__home {
5544
5561
  position: absolute;
5545
5562
  bottom: 1.8%;
@@ -5744,7 +5761,7 @@ a.q1-card:focus-visible {
5744
5761
  transform: translateY(var(--y, 0px)) scale(1);
5745
5762
  opacity: 1;
5746
5763
  }
5747
- /* 状态 q1-toast:实心 tone 底色 + 浅色文字(对标 Geist 的 success/warning/error) */
5764
+ /* 状态 q1-toast:实心 tone 底色 + 浅色文字(对标外部参考的 success/warning/error) */
5748
5765
  .q1-toast--success,
5749
5766
  .q1-toast--warning,
5750
5767
  .q1-toast--error {
@@ -5875,7 +5892,7 @@ a.q1-card:focus-visible {
5875
5892
  border-radius: 999px;
5876
5893
  background: var(--q1-color-bg-subtle);
5877
5894
  }
5878
- /* 竖条拇指(对标 Geist):6×14 白色小竖条 + 定义环;action-on-primary 两主题恒白(拇指骑在 primary 填充上)。 */
5895
+ /* 竖条拇指(对标外部参考):6×14 白色小竖条 + 定义环;action-on-primary 两主题恒白(拇指骑在 primary 填充上)。 */
5879
5896
  .slider-input::-webkit-slider-thumb {
5880
5897
  -webkit-appearance: none;
5881
5898
  width: 6px;
@@ -5936,7 +5953,7 @@ a.q1-card:focus-visible {
5936
5953
  font-size: 14px;
5937
5954
  font-variant-numeric: tabular-nums;
5938
5955
  text-align: center;
5939
- /* 隐藏原生步进箭头(对标 Geist):键盘 ↑↓ 步进不受影响,粗调交给滑块。 */
5956
+ /* 隐藏原生步进箭头(对标外部参考):键盘 ↑↓ 步进不受影响,粗调交给滑块。 */
5940
5957
  -moz-appearance: textfield;
5941
5958
  appearance: textfield;
5942
5959
  }
@@ -6014,7 +6031,7 @@ a.q1-card:focus-visible {
6014
6031
  color: var(--q1-color-text-secondary);
6015
6032
  font-size: 14px;
6016
6033
  text-align: center;
6017
- /* 光标铁律:Geist 右键触发区无 cursor 声明(auto),照抄不自建。 */
6034
+ /* 光标铁律:外部参考右键触发区无 cursor 声明(auto),照抄不自建。 */
6018
6035
  user-select: none;
6019
6036
  }
6020
6037
  .context-menu__area:focus-visible {
@@ -6113,7 +6130,7 @@ a.q1-card:focus-visible {
6113
6130
  .split-button--secondary .split-button__toggle {
6114
6131
  background: var(--q1-color-bg-panel);
6115
6132
  }
6116
- /* 尺寸(与 Button 家族共享 Geist 刻度:高 32/40/48、radius 6/6/8、字号 14/14/16) */
6133
+ /* 尺寸(与 Button 家族共享外部参考刻度:高 32/40/48、radius 6/6/8、字号 14/14/16) */
6117
6134
  .split-button--sm .split-button__primary {
6118
6135
  min-height: 32px;
6119
6136
  padding: 0 var(--q1-space-3);
@@ -6261,7 +6278,7 @@ a.q1-card:focus-visible {
6261
6278
  cursor: pointer;
6262
6279
  }
6263
6280
 
6264
- /* 选项前后图标(对标 Geist With Prefix/Suffix Icons):前缀随文本、后缀推到行尾。 */
6281
+ /* 选项前后图标(对标外部参考 With Prefix/Suffix Icons):前缀随文本、后缀推到行尾。 */
6265
6282
  .combobox__option-prefix,
6266
6283
  .combobox__option-suffix {
6267
6284
  display: inline-flex;
@@ -6286,7 +6303,7 @@ a.q1-card:focus-visible {
6286
6303
  color: var(--q1-color-action-primary);
6287
6304
  font-weight: 500;
6288
6305
  }
6289
- /* 选中项对勾(对标 Geist 选中标记):推到行尾,随选中色。 */
6306
+ /* 选中项对勾(对标外部参考选中标记):推到行尾,随选中色。 */
6290
6307
  .combobox__option-check {
6291
6308
  flex: none;
6292
6309
  margin-left: auto;
@@ -6338,7 +6355,7 @@ a.q1-card:focus-visible {
6338
6355
  color: var(--q1-color-text-secondary);
6339
6356
  font-weight: 400;
6340
6357
  }
6341
- /* 实测 Geist:菜单 radius-4(12px)、padding space-2(8px)、行高 32px。 */
6358
+ /* 实测外部参考:菜单 radius-4(12px)、padding space-2(8px)、行高 32px。 */
6342
6359
  .multi-select__menu {
6343
6360
  position: absolute;
6344
6361
  top: calc(100% + var(--q1-space-1));
@@ -6419,13 +6436,13 @@ a.q1-card:focus-visible {
6419
6436
  border-radius: var(--q1-radius-1);
6420
6437
  color: var(--q1-color-bg-canvas);
6421
6438
  }
6422
- /* 实测 Geist:选中态是中性 gray-1000 黑底,不是品牌蓝——与 Radio/Note 行动按钮已定的
6439
+ /* 实测外部参考:选中态是中性 gray-1000 黑底,不是品牌蓝——与 Radio/Note 行动按钮已定的
6423
6440
  「选择控件中性,品牌色只归主动作」规则一致。 */
6424
6441
  .multi-select__check--on {
6425
6442
  background: var(--q1-color-gray-1000);
6426
6443
  border-color: var(--q1-color-gray-1000);
6427
6444
  }
6428
- /* 边界:Geist 遇长名靠菜单变宽保持单行;我们改为单行截断更保守——真实业务数据(权限范围名)
6445
+ /* 边界:外部参考遇长名靠菜单变宽保持单行;我们改为单行截断更保守——真实业务数据(权限范围名)
6429
6446
  长度不可控,任由菜单跟着最长一项无限变宽风险更高;32px 定高行也扛不住换行溢出。 */
6430
6447
  .multi-select__option-label {
6431
6448
  overflow: hidden;
@@ -6596,7 +6613,7 @@ a.q1-card:focus-visible {
6596
6613
  font-size: 11px;
6597
6614
  }
6598
6615
 
6599
- /* 项通用后缀(对标 Geist With Suffix):元信息文本/状态图标,右对齐、次要色。 */
6616
+ /* 项通用后缀(对标外部参考 With Suffix):元信息文本/状态图标,右对齐、次要色。 */
6600
6617
  .command-palette__suffix {
6601
6618
  display: inline-flex;
6602
6619
  align-items: center;
@@ -6658,7 +6675,7 @@ a.q1-card:focus-visible {
6658
6675
  .modal-btn--primary:hover {
6659
6676
  background: var(--q1-color-action-primary-hover, var(--q1-color-action-primary));
6660
6677
  }
6661
- /* 禁用主按钮(实测 Geist Disabled actions:色彩降级、opacity 恒 1)。这是实心 CTA 按钮,
6678
+ /* 禁用主按钮(实测外部参考 Disabled actions:色彩降级、opacity 恒 1)。这是实心 CTA 按钮,
6662
6679
  对标 Input/Select 已建立的「底色抬灰」表单控件禁用配方,而非 Radio 的描边控件配方——
6663
6680
  gray-500 实底配 bg-canvas 字在暗色主题对比度不足,bg-subtle + text-muted 双主题都可读。 */
6664
6681
  .modal-btn--primary:disabled {
@@ -6670,7 +6687,7 @@ a.q1-card:focus-visible {
6670
6687
  .modal-btn--primary:disabled:hover {
6671
6688
  background: var(--q1-color-bg-subtle);
6672
6689
  }
6673
- /* 单按钮场景铺满整行(对标 Geist Single button):布局属于模态框上下文,不进 Button 本体。 */
6690
+ /* 单按钮场景铺满整行(对标外部参考 Single button):布局属于模态框上下文,不进 Button 本体。 */
6674
6691
  .modal__action--full {
6675
6692
  width: 100%;
6676
6693
  }
@@ -6690,7 +6707,7 @@ a.q1-card:focus-visible {
6690
6707
  background: color-mix(in srgb, var(--q1-color-shadow) 45%, transparent);
6691
6708
  cursor: default;
6692
6709
  }
6693
- /* 实测 Geist:540px 宽(我们原 480)。 */
6710
+ /* 实测外部参考:540px 宽(我们原 480)。 */
6694
6711
  .modal__dialog {
6695
6712
  position: relative;
6696
6713
  width: 100%;
@@ -6742,7 +6759,7 @@ a.q1-card:focus-visible {
6742
6759
  .modal__body p {
6743
6760
  margin: 0;
6744
6761
  }
6745
- /* 实测 Geist:取消靠左、主操作靠右(space-between),不是两个按钮一起挤右侧;
6762
+ /* 实测外部参考:取消靠左、主操作靠右(space-between),不是两个按钮一起挤右侧;
6746
6763
  仅单个按钮(如确认型 Modal 的「完成」)时退回右对齐,避免孤零零挂在左边。 */
6747
6764
  .modal__footer {
6748
6765
  display: flex;
@@ -6819,7 +6836,7 @@ a.q1-card:focus-visible {
6819
6836
  font-size: 13px;
6820
6837
  color: var(--q1-color-red-700);
6821
6838
  }
6822
- /* loading 态主按钮的加载指示(对标 Geist Loading 章):连续旋转,尊重 reduced-motion。 */
6839
+ /* loading 态主按钮的加载指示(对标外部参考 Loading 章):连续旋转,尊重 reduced-motion。 */
6823
6840
  .destructive-modal__spinner {
6824
6841
  margin-right: var(--q1-space-2);
6825
6842
  vertical-align: -2px;
@@ -6936,7 +6953,7 @@ a.q1-card:focus-visible {
6936
6953
  padding: var(--q1-space-4) var(--q1-space-6);
6937
6954
  border-top: 1px solid var(--q1-color-border);
6938
6955
  }
6939
- /* 遮罩(对标 Geist):黑 80% 压暗底层页面,拦截外部点击但点击不关闭;恒黑 token 两主题一致。 */
6956
+ /* 遮罩(对标外部参考):黑 80% 压暗底层页面,拦截外部点击但点击不关闭;恒黑 token 两主题一致。 */
6940
6957
  .sheet__backdrop {
6941
6958
  position: fixed;
6942
6959
  inset: 0;
@@ -6956,7 +6973,7 @@ a.q1-card:focus-visible {
6956
6973
  }
6957
6974
  }
6958
6975
 
6959
- /* 悬浮圆角面板(对标 Geist 形态):四边不贴屏,inset 12 + 圆角 + 全边框。 */
6976
+ /* 悬浮圆角面板(对标外部参考形态):四边不贴屏,inset 12 + 圆角 + 全边框。 */
6960
6977
  .sheet__panel {
6961
6978
  position: fixed;
6962
6979
  z-index: 70;
@@ -7026,7 +7043,7 @@ a.q1-card:focus-visible {
7026
7043
  transform: translateY(calc(100% + var(--q1-space-3)));
7027
7044
  }
7028
7045
  }
7029
- /* 头/尾无分隔线(对标 Geist):层级靠 24px 留白,不画线。 */
7046
+ /* 头/尾无分隔线(对标外部参考):层级靠 24px 留白,不画线。 */
7030
7047
  .sheet__header {
7031
7048
  display: flex;
7032
7049
  align-items: center;