@godxjp/ui 33.20.0 → 33.21.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 (108) hide show
  1. package/README.md +4 -4
  2. package/agent/START-HERE.md +7 -7
  3. package/agent/components/AppSettingPicker.json +0 -1
  4. package/agent/components/AppShell.json +11 -1
  5. package/agent/components/CardShowcase.json +44 -0
  6. package/agent/components/CatalogCard.json +83 -0
  7. package/agent/components/CatalogDetail.json +76 -0
  8. package/agent/components/CatalogDetailSection.json +52 -0
  9. package/agent/components/CatalogDetailTag.json +27 -0
  10. package/agent/components/EditorialArticle.json +53 -0
  11. package/agent/components/EditorialAuth.json +53 -0
  12. package/agent/components/EditorialAuthCard.json +52 -0
  13. package/agent/components/EditorialBanner.json +53 -0
  14. package/agent/components/EditorialBreadcrumb.json +38 -0
  15. package/agent/components/EditorialCard.json +70 -0
  16. package/agent/components/EditorialEmptyPanel.json +57 -0
  17. package/agent/components/EditorialFilterBar.json +51 -0
  18. package/agent/components/EditorialFilterField.json +39 -0
  19. package/agent/components/EditorialFilterPanel.json +46 -0
  20. package/agent/components/EditorialFooter.json +54 -0
  21. package/agent/components/EditorialFootnote.json +36 -0
  22. package/agent/components/EditorialHero.json +52 -0
  23. package/agent/components/EditorialInlineSearch.json +54 -0
  24. package/agent/components/EditorialMasthead.json +52 -0
  25. package/agent/components/EditorialMetaBar.json +37 -0
  26. package/agent/components/EditorialPageHeader.json +73 -0
  27. package/agent/components/EditorialPanel.json +48 -0
  28. package/agent/components/EditorialPillNav.json +41 -0
  29. package/agent/components/EditorialPrompt.json +54 -0
  30. package/agent/components/EditorialSearch.json +112 -0
  31. package/agent/components/EditorialSection.json +68 -0
  32. package/agent/components/EditorialSectionHead.json +62 -0
  33. package/agent/components/EditorialStats.json +32 -0
  34. package/agent/components/EditorialTextButton.json +47 -0
  35. package/agent/components/EditorialToggleGroup.json +52 -0
  36. package/agent/components/EditorialToolbar.json +45 -0
  37. package/agent/components/Eyebrow.json +39 -0
  38. package/agent/components/HoldingCard.json +69 -0
  39. package/agent/components/HoldingCardAction.json +51 -0
  40. package/agent/components/HoldingGrid.json +37 -0
  41. package/agent/components/NumberInput.json +5 -0
  42. package/agent/components/PriceSummary.json +32 -0
  43. package/agent/components/SettingsLayout.json +31 -0
  44. package/agent/components/SettingsPanel.json +53 -0
  45. package/agent/components/ThemePicker.json +54 -0
  46. package/agent/components/TopbarItem.json +5 -0
  47. package/agent/components-index.json +292 -98
  48. package/agent/components.json +2046 -2
  49. package/agent/index.json +7 -7
  50. package/agent/llms.txt +8 -8
  51. package/agent/tokens.json +5637 -135
  52. package/dist/components/data-display/badge.js +4 -2
  53. package/dist/components/data-entry/form-field.js +2 -2
  54. package/dist/components/data-entry/number-input.d.ts +1 -0
  55. package/dist/components/data-entry/number-input.js +8 -0
  56. package/dist/components/data-entry/select.js +24 -2
  57. package/dist/components/general/button.js +7 -0
  58. package/dist/components/general/typography.d.ts +1 -1
  59. package/dist/components/layout/app-shell.d.ts +1 -1
  60. package/dist/components/layout/app-shell.js +28 -2
  61. package/dist/components/layout/centered-shell.js +4 -0
  62. package/dist/components/layout/editorial-account.d.ts +51 -0
  63. package/dist/components/layout/editorial-account.js +466 -0
  64. package/dist/components/layout/editorial-catalog.d.ts +18 -0
  65. package/dist/components/layout/editorial-catalog.js +164 -0
  66. package/dist/components/layout/editorial.d.ts +56 -0
  67. package/dist/components/layout/editorial.js +867 -0
  68. package/dist/components/layout/index.d.ts +6 -0
  69. package/dist/components/layout/index.js +98 -0
  70. package/dist/components/layout/mobile-shell.d.ts +2 -0
  71. package/dist/components/layout/mobile-shell.js +18 -11
  72. package/dist/components/layout/responsive-grid.js +9 -1
  73. package/dist/components/layout/topbar-item.d.ts +1 -0
  74. package/dist/components/layout/topbar-item.js +2 -0
  75. package/dist/contracts/measurement.json +1 -1
  76. package/dist/lib/toast-clearance.js +1 -1
  77. package/dist/props/components/data-entry.prop.d.ts +9 -0
  78. package/dist/props/components/editorial-account.prop.d.ts +249 -0
  79. package/dist/props/components/editorial-account.prop.js +0 -0
  80. package/dist/props/components/general.prop.d.ts +6 -2
  81. package/dist/props/components/layout.prop.d.ts +602 -2
  82. package/dist/props/registry.d.ts +1124 -0
  83. package/dist/props/registry.js +792 -0
  84. package/dist/styles/badge-layout.css +2 -0
  85. package/dist/styles/control.css +58 -12
  86. package/dist/styles/core.css +1 -0
  87. package/dist/styles/data-display-layout.css +9 -3
  88. package/dist/styles/editorial-account-layout.css +1130 -0
  89. package/dist/styles/focus-ring.css +33 -10
  90. package/dist/styles/form-layout.css +8 -1
  91. package/dist/styles/index.css +1 -0
  92. package/dist/styles/layers.json +248 -1
  93. package/dist/styles/layout.css +2022 -0
  94. package/dist/styles/shell-layout.css +100 -2
  95. package/dist/styles/table-layout.css +25 -13
  96. package/dist/styles/text-layout.css +6 -0
  97. package/dist/styles.css +1 -1
  98. package/dist/tokens/base.css +2 -0
  99. package/dist/tokens/components/badge.css +3 -0
  100. package/dist/tokens/components/control.css +9 -0
  101. package/dist/tokens/components/editorial-account.css +393 -0
  102. package/dist/tokens/components/editorial.css +721 -0
  103. package/dist/tokens/components/form.css +4 -0
  104. package/dist/tokens/components/shell.css +23 -0
  105. package/dist/tokens/components/table.css +1 -1
  106. package/docs/TOKENS.md +26 -0
  107. package/package.json +2 -2
  108. package/scripts/ui-audit.mjs +3 -2
package/dist/styles/focus-ring.css CHANGED
@@ -39,7 +39,6 @@
39
39
  .ui-input,
40
40
  .ui-control,
41
41
  .ui-control-multiline,
42
- .ui-control-trigger,
43
42
  .ui-tag-input,
44
43
  .ui-button,
45
44
  .ui-toggle,
@@ -80,6 +79,11 @@
80
79
  ):focus-visible,
81
80
 
82
81
  .ui-command-input-wrapper:has(.ui-command-input:focus-visible),
82
+ .ui-editorial-search:has(.ui-editorial-search-input:focus-visible),
83
+
84
+ .ui-theme-picker-input:focus-visible + .ui-theme-picker-preview,
85
+ .ui-editorial-search:has(.ui-control-trigger[data-focus-visible]),
86
+ .ui-editorial-search:has(.ui-control-trigger[data-open-modality="keyboard"]),
83
87
  .ui-attachments:has(.ui-attachments-input:focus-visible),
84
88
  .ui-calendar-dropdown-root:has(.ui-calendar-dropdown:focus-visible),
85
89
  .ui-checkbox[data-focus-visible],
@@ -87,6 +91,9 @@
87
91
  .ui-switch[data-focus-visible],
88
92
  .ui-slider-thumb[data-focus-visible],
89
93
  .ui-focus-ring[data-focus-visible],
94
+
95
+ .ui-control-trigger:not([data-rac]):focus-visible,
96
+ .ui-control-trigger[data-rac][data-focus-visible],
90
97
  .ui-control-trigger[data-state="open"],
91
98
  .ui-tag-input:focus-within,
92
99
  .ui-control-composite-field:focus-within,
@@ -118,7 +125,6 @@
118
125
  .ui-input,
119
126
  .ui-control,
120
127
  .ui-control-multiline,
121
- .ui-control-trigger,
122
128
  .ui-tag-input,
123
129
  .ui-button,
124
130
  .ui-toggle,
@@ -162,6 +168,8 @@
162
168
  :root:not([data-focus-outline="off"]) .ui-switch[data-focus-visible],
163
169
  :root:not([data-focus-outline="off"]) .ui-slider-thumb[data-focus-visible],
164
170
  :root:not([data-focus-outline="off"]) .ui-focus-ring[data-focus-visible],
171
+ :root:not([data-focus-outline="off"]) .ui-control-trigger:not([data-rac]):focus-visible,
172
+ :root:not([data-focus-outline="off"]) .ui-control-trigger[data-rac][data-focus-visible],
165
173
  :root:not([data-focus-outline="off"]) .ui-control-trigger[data-state="open"],
166
174
  :root:not([data-focus-outline="off"]) .ui-tag-input:focus-within,
167
175
  :root:not([data-focus-outline="off"]) .ui-control-composite-field:focus-within,
@@ -197,13 +205,9 @@
197
205
  }
198
206
 
199
207
  :root:not([data-focus-outline="off"])
200
- :is(
201
- .ui-input,
202
- .ui-control,
203
- .ui-control-multiline,
204
- .ui-control-trigger,
205
- .ui-tag-input
206
- ):focus-visible,
208
+ :is(.ui-input, .ui-control, .ui-control-multiline, .ui-tag-input):focus-visible,
209
+ :root:not([data-focus-outline="off"]) .ui-control-trigger:not([data-rac]):focus-visible,
210
+ :root:not([data-focus-outline="off"]) .ui-control-trigger[data-rac][data-focus-visible],
207
211
  :root:not([data-focus-outline="off"]) .ui-control-trigger[data-state="open"],
208
212
  :root:not([data-focus-outline="off"]) .ui-tag-input:focus-within,
209
213
  :root:not([data-focus-outline="off"]) .ui-control-composite-field:focus-within,
@@ -322,7 +326,8 @@
322
326
  }
323
327
 
324
328
  .ui-command-input:focus-visible,
325
- .ui-search-select-search-input:focus-visible {
329
+ .ui-search-select-search-input:focus-visible,
330
+ .ui-editorial-search-input:focus-visible {
326
331
  --focus-field-shadow: none;
327
332
  --focus-ring-weight: 0px;
328
333
  outline: none;
@@ -336,3 +341,21 @@
336
341
  --focus-ring-glow-alpha: var(--control-outline-error-alpha);
337
342
  }
338
343
  }
344
+
345
+ @layer components {
346
+
347
+ :root:not([data-focus-outline="off"])
348
+ .ui-editorial-search
349
+ .ui-editorial-search-scope
350
+ .ui-control-trigger.ui-control-trigger {
351
+ outline-style: none;
352
+ box-shadow: none;
353
+ }
354
+
355
+ .ui-theme-picker-input:focus-visible + .ui-theme-picker-preview {
356
+ outline-width: var(--focus-ring-width, var(--stroke-lg));
357
+ outline-style: solid;
358
+ outline-color: hsl(var(--primary));
359
+ outline-offset: var(--focus-ring-offset, var(--stroke-lg));
360
+ }
361
+ }
package/dist/styles/form-layout.css CHANGED
@@ -4,6 +4,12 @@
4
4
 
5
5
  .ui-form-field-note {
6
6
  word-break: auto-phrase;
7
+
8
+ font-size: var(
9
+ --form-field-note-font-size,
10
+ var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))
11
+ );
12
+ line-height: var(--form-field-note-line-height, calc(1 / 0.75));
7
13
  }
8
14
 
9
15
  .ui-form-field-required {
@@ -84,7 +90,8 @@
84
90
  display: grid;
85
91
 
86
92
  grid-template-columns: minmax(0, 1fr);
87
- gap: var(--space-stack-xs);
93
+
94
+ gap: var(--form-field-control-gap, var(--space-stack-xs));
88
95
  min-width: 0;
89
96
 
90
97
  min-height: var(--control-height);
package/dist/styles/index.css CHANGED
@@ -8,6 +8,7 @@
8
8
  @import "./shell-layout.css";
9
9
  @import "./motion.css";
10
10
  @import "./layout.css";
11
+ @import "./editorial-account-layout.css";
11
12
  @import "./control.css";
12
13
  @import "./toggle.css";
13
14
  @import "./logo-layout.css";
package/dist/styles/layers.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "33.20.0",
2
+ "version": "33.21.0",
3
3
  "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
4
4
  "base": "base.css",
5
5
  "fonts": "fonts.css",
@@ -7,6 +7,7 @@
7
7
  "shell-layout.css",
8
8
  "motion.css",
9
9
  "layout.css",
10
+ "editorial-account-layout.css",
10
11
  "control.css",
11
12
  "toggle.css",
12
13
  "logo-layout.css",
@@ -266,6 +267,14 @@
266
267
  "navigation-layout.css"
267
268
  ]
268
269
  },
270
+ "CardShowcase": {
271
+ "layers": [
272
+ "layout.css",
273
+ "editorial-account-layout.css",
274
+ "dialog-layout.css",
275
+ "navigation-layout.css"
276
+ ]
277
+ },
269
278
  "Carousel": {
270
279
  "layers": [
271
280
  "data-display-layout.css"
@@ -278,6 +287,29 @@
278
287
  "data-display-layout.css"
279
288
  ]
280
289
  },
290
+ "CatalogCard": {
291
+ "layers": [
292
+ "layout.css",
293
+ "editorial-account-layout.css",
294
+ "dialog-layout.css",
295
+ "navigation-layout.css"
296
+ ]
297
+ },
298
+ "CatalogDetail": {
299
+ "layers": [
300
+ "layout.css"
301
+ ]
302
+ },
303
+ "CatalogDetailSection": {
304
+ "layers": [
305
+ "layout.css"
306
+ ]
307
+ },
308
+ "CatalogDetailTag": {
309
+ "layers": [
310
+ "layout.css"
311
+ ]
312
+ },
281
313
  "CenteredShell": {
282
314
  "layers": [
283
315
  "shell-layout.css"
@@ -471,6 +503,178 @@
471
503
  "navigation-layout.css"
472
504
  ]
473
505
  },
506
+ "EditorialArticle": {
507
+ "layers": [
508
+ "layout.css",
509
+ "editorial-account-layout.css",
510
+ "dialog-layout.css",
511
+ "navigation-layout.css"
512
+ ]
513
+ },
514
+ "EditorialAuth": {
515
+ "layers": [
516
+ "editorial-account-layout.css"
517
+ ]
518
+ },
519
+ "EditorialAuthCard": {
520
+ "layers": [
521
+ "editorial-account-layout.css"
522
+ ]
523
+ },
524
+ "EditorialBanner": {
525
+ "layers": [
526
+ "layout.css",
527
+ "editorial-account-layout.css",
528
+ "dialog-layout.css",
529
+ "navigation-layout.css"
530
+ ]
531
+ },
532
+ "EditorialBreadcrumb": {
533
+ "layers": [
534
+ "layout.css",
535
+ "editorial-account-layout.css",
536
+ "dialog-layout.css",
537
+ "navigation-layout.css"
538
+ ]
539
+ },
540
+ "EditorialCard": {
541
+ "layers": [
542
+ "layout.css",
543
+ "editorial-account-layout.css",
544
+ "dialog-layout.css",
545
+ "navigation-layout.css"
546
+ ]
547
+ },
548
+ "EditorialEmptyPanel": {
549
+ "layers": [
550
+ "editorial-account-layout.css"
551
+ ]
552
+ },
553
+ "EditorialFilterBar": {
554
+ "layers": [
555
+ "layout.css",
556
+ "editorial-account-layout.css",
557
+ "dialog-layout.css",
558
+ "navigation-layout.css"
559
+ ]
560
+ },
561
+ "EditorialFilterField": {
562
+ "layers": [
563
+ "layout.css"
564
+ ]
565
+ },
566
+ "EditorialFilterPanel": {
567
+ "layers": [
568
+ "layout.css"
569
+ ]
570
+ },
571
+ "EditorialFooter": {
572
+ "layers": [
573
+ "layout.css",
574
+ "editorial-account-layout.css",
575
+ "dialog-layout.css",
576
+ "navigation-layout.css"
577
+ ]
578
+ },
579
+ "EditorialFootnote": {
580
+ "layers": [
581
+ "editorial-account-layout.css"
582
+ ]
583
+ },
584
+ "EditorialHero": {
585
+ "layers": [
586
+ "layout.css",
587
+ "editorial-account-layout.css",
588
+ "dialog-layout.css",
589
+ "navigation-layout.css"
590
+ ]
591
+ },
592
+ "EditorialMasthead": {
593
+ "layers": [
594
+ "layout.css",
595
+ "editorial-account-layout.css",
596
+ "dialog-layout.css",
597
+ "navigation-layout.css"
598
+ ]
599
+ },
600
+ "EditorialMetaBar": {
601
+ "layers": [
602
+ "editorial-account-layout.css"
603
+ ]
604
+ },
605
+ "EditorialPageHeader": {
606
+ "layers": [
607
+ "layout.css",
608
+ "editorial-account-layout.css",
609
+ "dialog-layout.css",
610
+ "navigation-layout.css"
611
+ ]
612
+ },
613
+ "EditorialPanel": {
614
+ "layers": [
615
+ "layout.css",
616
+ "editorial-account-layout.css",
617
+ "dialog-layout.css",
618
+ "navigation-layout.css"
619
+ ]
620
+ },
621
+ "EditorialPillNav": {
622
+ "layers": [
623
+ "layout.css",
624
+ "editorial-account-layout.css",
625
+ "dialog-layout.css",
626
+ "navigation-layout.css"
627
+ ]
628
+ },
629
+ "EditorialPrompt": {
630
+ "layers": [
631
+ "layout.css"
632
+ ]
633
+ },
634
+ "EditorialSearch": {
635
+ "layers": [
636
+ "layout.css",
637
+ "editorial-account-layout.css",
638
+ "dialog-layout.css",
639
+ "navigation-layout.css"
640
+ ]
641
+ },
642
+ "EditorialSection": {
643
+ "layers": [
644
+ "layout.css",
645
+ "editorial-account-layout.css",
646
+ "dialog-layout.css",
647
+ "navigation-layout.css"
648
+ ]
649
+ },
650
+ "EditorialSectionHead": {
651
+ "layers": [
652
+ "layout.css",
653
+ "editorial-account-layout.css",
654
+ "dialog-layout.css",
655
+ "navigation-layout.css"
656
+ ]
657
+ },
658
+ "EditorialStats": {
659
+ "layers": [
660
+ "editorial-account-layout.css"
661
+ ]
662
+ },
663
+ "EditorialTextButton": {
664
+ "layers": [
665
+ "editorial-account-layout.css"
666
+ ]
667
+ },
668
+ "EditorialToggleGroup": {
669
+ "layers": [
670
+ "editorial-account-layout.css"
671
+ ]
672
+ },
673
+ "EditorialToolbar": {
674
+ "layers": [
675
+ "editorial-account-layout.css"
676
+ ]
677
+ },
474
678
  "EmojiPicker": {
475
679
  "layers": [
476
680
  "control.css",
@@ -493,6 +697,14 @@
493
697
  "data-display-layout.css"
494
698
  ]
495
699
  },
700
+ "Eyebrow": {
701
+ "layers": [
702
+ "layout.css",
703
+ "editorial-account-layout.css",
704
+ "dialog-layout.css",
705
+ "navigation-layout.css"
706
+ ]
707
+ },
496
708
  "FeatureList": {
497
709
  "layers": [
498
710
  "data-display-layout.css"
@@ -582,6 +794,21 @@
582
794
  "chart-layout.css"
583
795
  ]
584
796
  },
797
+ "HoldingCard": {
798
+ "layers": [
799
+ "editorial-account-layout.css"
800
+ ]
801
+ },
802
+ "HoldingCardAction": {
803
+ "layers": [
804
+ "editorial-account-layout.css"
805
+ ]
806
+ },
807
+ "HoldingGrid": {
808
+ "layers": [
809
+ "editorial-account-layout.css"
810
+ ]
811
+ },
585
812
  "Icon": {
586
813
  "layers": [
587
814
  "icon-layout.css"
@@ -796,6 +1023,11 @@
796
1023
  "PrefetchLink": {
797
1024
  "layers": []
798
1025
  },
1026
+ "PriceSummary": {
1027
+ "layers": [
1028
+ "layout.css"
1029
+ ]
1030
+ },
799
1031
  "Progress": {
800
1032
  "layers": [
801
1033
  "data-display-layout.css"
@@ -949,6 +1181,16 @@
949
1181
  "form-layout.css"
950
1182
  ]
951
1183
  },
1184
+ "SettingsLayout": {
1185
+ "layers": [
1186
+ "editorial-account-layout.css"
1187
+ ]
1188
+ },
1189
+ "SettingsPanel": {
1190
+ "layers": [
1191
+ "editorial-account-layout.css"
1192
+ ]
1193
+ },
952
1194
  "Sheet": {
953
1195
  "layers": [
954
1196
  "dialog-layout.css"
@@ -1036,6 +1278,11 @@
1036
1278
  "control.css"
1037
1279
  ]
1038
1280
  },
1281
+ "ThemePicker": {
1282
+ "layers": [
1283
+ "editorial-account-layout.css"
1284
+ ]
1285
+ },
1039
1286
  "ThemeScope": {
1040
1287
  "layers": []
1041
1288
  },