@godxjp/ui 33.16.0 → 33.17.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 (48) hide show
  1. package/README.md +2 -2
  2. package/agent/START-HERE.md +6 -6
  3. package/agent/components/AppShell.json +1 -1
  4. package/agent/components/Card.json +1 -1
  5. package/agent/components/Heading.json +6 -0
  6. package/agent/components/Table.json +1 -0
  7. package/agent/components-index.json +2 -2
  8. package/agent/components.json +9 -2
  9. package/agent/index.json +6 -6
  10. package/agent/llms.txt +5 -5
  11. package/agent/rules.json +1 -1
  12. package/agent/tokens.json +36 -0
  13. package/agent/vocabulary.json +12 -0
  14. package/dist/components/data-display/index.d.ts +1 -1
  15. package/dist/components/data-display/index.js +10 -1
  16. package/dist/components/data-display/table.d.ts +9 -0
  17. package/dist/components/data-display/table.js +3 -0
  18. package/dist/components/general/typography.d.ts +1 -0
  19. package/dist/components/general/typography.js +3 -0
  20. package/dist/contracts/measurement.json +1 -1
  21. package/dist/lib/hooks.d.ts +8 -0
  22. package/dist/lib/hooks.js +20 -21
  23. package/dist/props/components/general.prop.d.ts +8 -1
  24. package/dist/props/registry.d.ts +6 -1
  25. package/dist/props/registry.js +6 -0
  26. package/dist/props/vocabulary/index.d.ts +1 -1
  27. package/dist/props/vocabulary/interaction.prop.d.ts +6 -0
  28. package/dist/styles/badge-layout.css +1 -0
  29. package/dist/styles/base.css +8 -0
  30. package/dist/styles/card-layout.css +8 -0
  31. package/dist/styles/dialog-layout.css +7 -3
  32. package/dist/styles/layers.json +1 -1
  33. package/dist/styles/layout.css +2 -0
  34. package/dist/styles/logo-layout.css +18 -12
  35. package/dist/styles/shell-layout.css +40 -1
  36. package/dist/styles/table-layout.css +30 -0
  37. package/dist/styles/text-layout.css +5 -0
  38. package/dist/styles.css +1 -1
  39. package/dist/theme/famgia.service.css +10 -8
  40. package/dist/themes/godx-tokens.css +20 -16
  41. package/dist/tokens/components/feedback.css +2 -0
  42. package/dist/tokens/components/logo.css +6 -4
  43. package/dist/tokens/components/table.css +4 -0
  44. package/dist/tokens/derived.css +28 -24
  45. package/dist/tokens/foundation.css +62 -56
  46. package/dist/tokens/semantic/layout.css +5 -3
  47. package/docs/TOKENS.md +33 -0
  48. package/package.json +2 -2
@@ -251,3 +251,11 @@
251
251
  font-family: var(--font-family-mono);
252
252
  }
253
253
  }
254
+
255
+ @layer base {
256
+ @media print {
257
+ :root {
258
+ color-scheme: light;
259
+ }
260
+ }
261
+ }
@@ -734,3 +734,11 @@
734
734
  border-block: var(--stroke-hairline) solid hsl(var(--border));
735
735
  }
736
736
  }
737
+
738
+ @layer components {
739
+ @media print {
740
+ [data-slot="card"] {
741
+ break-inside: avoid;
742
+ }
743
+ }
744
+ }
@@ -53,7 +53,9 @@
53
53
 
54
54
  [data-slot="dialog-content"] {
55
55
  position: fixed;
56
- inset-inline-start: 50%;
56
+
57
+ inset-inline: 0;
58
+ margin-inline: auto;
57
59
  top: 50%;
58
60
  z-index: var(--overlay-z-index);
59
61
 
@@ -67,12 +69,14 @@
67
69
 
68
70
  --tw-animation-duration: var(--dialog-motion-duration, var(--duration-fast));
69
71
  max-width: none;
70
- transform: translate(-50%, -50%);
72
+ transform: translateY(-50%);
71
73
  gap: var(--dialog-space-gap);
72
74
  border: var(--stroke-hairline) solid hsl(var(--border));
73
75
 
74
76
  background-color: var(--dialog-surface-background, hsl(var(--background)));
75
77
 
78
+ border-radius: var(--dialog-radius, 0px);
79
+
76
80
  color: hsl(var(--foreground));
77
81
  padding: var(--dialog-space-inset);
78
82
 
@@ -82,7 +86,7 @@
82
86
 
83
87
  @media (min-width: 640px) {
84
88
  [data-slot="dialog-content"] {
85
- border-radius: var(--radius-lg, var(--radius));
89
+ border-radius: var(--dialog-radius, var(--radius-lg, var(--radius)));
86
90
  }
87
91
  }
88
92
 
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "33.16.0",
2
+ "version": "33.17.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",
@@ -951,6 +951,8 @@
951
951
  );
952
952
  font-weight: var(--font-weight-semibold);
953
953
  line-height: var(--page-title-line-height-display);
954
+
955
+ font-family: var(--font-family-editorial, var(--font-family-display));
954
956
  text-wrap: balance;
955
957
  overflow-wrap: normal;
956
958
  }
@@ -225,21 +225,27 @@
225
225
  display: none;
226
226
  }
227
227
 
228
- @media (prefers-color-scheme: dark) {
229
- :root:not([data-theme="light"]) [data-slot="logo-artwork"][data-scheme="light"] {
230
- display: none;
231
- }
232
- :root:not([data-theme="light"]) [data-slot="logo-artwork"][data-scheme="dark"] {
233
- display: block;
228
+ @media not print {
229
+ @media (prefers-color-scheme: dark) {
230
+ :root:not([data-theme="light"]) [data-slot="logo-artwork"][data-scheme="light"] {
231
+ display: none;
232
+ }
233
+ :root:not([data-theme="light"]) [data-slot="logo-artwork"][data-scheme="dark"] {
234
+ display: block;
235
+ }
234
236
  }
235
237
  }
236
238
 
237
- .dark [data-slot="logo-artwork"][data-scheme="light"],
238
- :root[data-theme="dark"] [data-slot="logo-artwork"][data-scheme="light"] {
239
- display: none;
239
+ @media not print {
240
+ .dark [data-slot="logo-artwork"][data-scheme="light"],
241
+ :root[data-theme="dark"] [data-slot="logo-artwork"][data-scheme="light"] {
242
+ display: none;
243
+ }
240
244
  }
241
245
 
242
- .dark [data-slot="logo-artwork"][data-scheme="dark"],
243
- :root[data-theme="dark"] [data-slot="logo-artwork"][data-scheme="dark"] {
244
- display: block;
246
+ @media not print {
247
+ .dark [data-slot="logo-artwork"][data-scheme="dark"],
248
+ :root[data-theme="dark"] [data-slot="logo-artwork"][data-scheme="dark"] {
249
+ display: block;
250
+ }
245
251
  }
@@ -2086,7 +2086,14 @@
2086
2086
  min-inline-size: var(--topbar-item-min-width);
2087
2087
  }
2088
2088
 
2089
- .ui-topbar-start > :last-child:not(:is(button, a, [role="button"], .ui-button)) {
2089
+ .ui-topbar-start:has(
2090
+ > :last-child:is(button, a, [role="button"], .ui-button, .ui-topbar-search)
2091
+ ) {
2092
+ min-inline-size: min-content;
2093
+ }
2094
+
2095
+ .ui-topbar-start
2096
+ > :last-child:not(:is(button, a, [role="button"], .ui-button, .ui-topbar-search)) {
2090
2097
  max-width: 100%;
2091
2098
  min-width: 0;
2092
2099
  flex: 0 1 auto;
@@ -2804,3 +2811,35 @@
2804
2811
  grid-template-areas: "topbar" "main" "footer";
2805
2812
  }
2806
2813
  }
2814
+
2815
+ @layer components {
2816
+ @media print {
2817
+ html,
2818
+ body,
2819
+ .app-root,
2820
+ .app-root > .app-main {
2821
+ background: hsl(var(--background));
2822
+ }
2823
+ .app-root {
2824
+ display: block;
2825
+ height: auto;
2826
+ min-height: 0;
2827
+ overflow: visible;
2828
+ }
2829
+ .app-root[data-responsive-navigation]
2830
+ > :is(.app-sidebar, .app-topbar, .app-nav-rail, .app-footer),
2831
+ .app-breadcrumb,
2832
+ .app-mobile-nav-drawer {
2833
+ display: none;
2834
+ }
2835
+ .app-root > .app-main {
2836
+ width: auto;
2837
+ max-width: none;
2838
+ height: auto;
2839
+ min-height: 0;
2840
+ overflow: visible;
2841
+ contain: none;
2842
+ background-image: none;
2843
+ }
2844
+ }
2845
+ }
@@ -189,9 +189,19 @@
189
189
  vertical-align: middle;
190
190
  }
191
191
 
192
+ [data-slot="table-caption"] {
193
+ caption-side: top;
194
+ padding-block: var(--table-caption-space-y, var(--space-2));
195
+ padding-inline: var(--table-cell-space-x, var(--space-section-active));
196
+ color: hsl(var(--table-caption-color, var(--muted-foreground)));
197
+ font-size: var(--table-caption-font-size, var(--font-size-sm, var(--font-size-base)));
198
+ text-align: start;
199
+ }
200
+
192
201
  :is([data-slot="table-head"], [data-slot="table-cell"])[data-numeric] {
193
202
  font-variant-numeric: tabular-nums;
194
203
  text-align: end;
204
+ font-family: var(--font-family-tabular, inherit);
195
205
  }
196
206
 
197
207
  :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="start"] {
@@ -1048,6 +1058,11 @@
1048
1058
  display: none;
1049
1059
  }
1050
1060
 
1061
+ [data-collapse-below="sm"] [data-slot="table-caption"] {
1062
+ display: block;
1063
+ padding-inline: var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
1064
+ }
1065
+
1051
1066
  [data-collapse-below="sm"] [data-slot="table"] > tbody {
1052
1067
  display: block;
1053
1068
  }
@@ -1107,6 +1122,11 @@
1107
1122
  display: none;
1108
1123
  }
1109
1124
 
1125
+ [data-collapse-below="md"] [data-slot="table-caption"] {
1126
+ display: block;
1127
+ padding-inline: var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
1128
+ }
1129
+
1110
1130
  [data-collapse-below="md"] [data-slot="table"] > tbody {
1111
1131
  display: block;
1112
1132
  }
@@ -1164,6 +1184,11 @@
1164
1184
  display: none;
1165
1185
  }
1166
1186
 
1187
+ [data-collapse-below="lg"] [data-slot="table-caption"] {
1188
+ display: block;
1189
+ padding-inline: var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
1190
+ }
1191
+
1167
1192
  [data-collapse-below="lg"] [data-slot="table"] > tbody {
1168
1193
  display: block;
1169
1194
  }
@@ -1221,6 +1246,11 @@
1221
1246
  display: none;
1222
1247
  }
1223
1248
 
1249
+ [data-collapse-below="xl"] [data-slot="table-caption"] {
1250
+ display: block;
1251
+ padding-inline: var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
1252
+ }
1253
+
1224
1254
  [data-collapse-below="xl"] [data-slot="table"] > tbody {
1225
1255
  display: block;
1226
1256
  }
@@ -211,6 +211,7 @@
211
211
 
212
212
  [data-slot="text"][data-tabular] {
213
213
  font-variant-numeric: tabular-nums;
214
+ font-family: var(--font-family-tabular, inherit);
214
215
  }
215
216
  [data-slot="text"][data-mono] {
216
217
  font-family: var(--font-family-mono, ui-monospace, "SFMono-Regular", monospace);
@@ -223,6 +224,10 @@
223
224
  line-height: var(--line-height-tight);
224
225
  }
225
226
 
227
+ [data-slot="heading"][data-family="editorial"] {
228
+ font-family: var(--font-family-editorial, var(--font-family-display));
229
+ }
230
+
226
231
  [data-slot="heading"][data-level="1"]:not([data-size]) {
227
232
  font-size: var(
228
233
  --heading-h1,