@nocoo/basalt 3.1.0 → 3.2.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 (77) hide show
  1. package/ai/DESIGN.md +108 -46
  2. package/ai/USAGE.md +1 -1
  3. package/ai/registry.json +115 -73
  4. package/dist/charts/config.d.ts +1 -1
  5. package/dist/charts/config.js +1 -1
  6. package/dist/charts/config.js.map +1 -1
  7. package/dist/charts/heatmap-matrix.js +2 -2
  8. package/dist/charts/heatmap-matrix.js.map +1 -1
  9. package/dist/charts/sparkline.js +1 -1
  10. package/dist/charts/sparkline.js.map +1 -1
  11. package/dist/charts/stat-card.js +1 -1
  12. package/dist/charts/stat-card.js.map +1 -1
  13. package/dist/components/alert-dialog.js +4 -4
  14. package/dist/components/alert-dialog.js.map +1 -1
  15. package/dist/components/approval-card.js +5 -6
  16. package/dist/components/approval-card.js.map +1 -1
  17. package/dist/components/avatar.js +1 -1
  18. package/dist/components/avatar.js.map +1 -1
  19. package/dist/components/chat-bubble.js +1 -1
  20. package/dist/components/chat-bubble.js.map +1 -1
  21. package/dist/components/chat-header.js +1 -1
  22. package/dist/components/chat-header.js.map +1 -1
  23. package/dist/components/chat-inbox.js +1 -1
  24. package/dist/components/chat-inbox.js.map +1 -1
  25. package/dist/components/chat-markdown.js +1 -1
  26. package/dist/components/chat-markdown.js.map +1 -1
  27. package/dist/components/chat-message.js +1 -1
  28. package/dist/components/chat-message.js.map +1 -1
  29. package/dist/components/code.js +4 -3
  30. package/dist/components/code.js.map +1 -1
  31. package/dist/components/context-cards.js +5 -5
  32. package/dist/components/context-cards.js.map +1 -1
  33. package/dist/components/dialog.js +2 -2
  34. package/dist/components/dialog.js.map +1 -1
  35. package/dist/components/diff-table.js +2 -2
  36. package/dist/components/diff-table.js.map +1 -1
  37. package/dist/components/input-area.js +1 -1
  38. package/dist/components/input-area.js.map +1 -1
  39. package/dist/components/layer-card.d.ts +6 -4
  40. package/dist/components/layer-card.js +60 -71
  41. package/dist/components/layer-card.js.map +1 -1
  42. package/dist/components/loader.js +1 -1
  43. package/dist/components/loader.js.map +1 -1
  44. package/dist/components/page-header.d.ts +2 -2
  45. package/dist/components/page-header.js +7 -7
  46. package/dist/components/page-header.js.map +1 -1
  47. package/dist/components/recommendation-card.js +2 -2
  48. package/dist/components/recommendation-card.js.map +1 -1
  49. package/dist/components/section-rule.js +1 -1
  50. package/dist/components/section-rule.js.map +1 -1
  51. package/dist/components/select.js +1 -1
  52. package/dist/components/select.js.map +1 -1
  53. package/dist/components/sheet.js +3 -3
  54. package/dist/components/sheet.js.map +1 -1
  55. package/dist/components/sidebar.js +2 -2
  56. package/dist/components/sidebar.js.map +1 -1
  57. package/dist/components/skeleton-line.js +1 -1
  58. package/dist/components/skeleton-line.js.map +1 -1
  59. package/dist/components/stat-strip.js +1 -1
  60. package/dist/components/stat-strip.js.map +1 -1
  61. package/dist/components/table.d.ts +2 -0
  62. package/dist/components/table.js +10 -12
  63. package/dist/components/table.js.map +1 -1
  64. package/dist/components/tabs.js +1 -1
  65. package/dist/components/tabs.js.map +1 -1
  66. package/dist/components/tag-badge.js +1 -1
  67. package/dist/components/tag-badge.js.map +1 -1
  68. package/dist/components/text.js +2 -2
  69. package/dist/components/text.js.map +1 -1
  70. package/dist/components/thinking.js +1 -1
  71. package/dist/components/thinking.js.map +1 -1
  72. package/dist/components/tool-chips.js +2 -2
  73. package/dist/components/tool-chips.js.map +1 -1
  74. package/dist/styles/standalone.css +119 -85
  75. package/dist/styles/tailwind.css +1 -0
  76. package/dist/styles/tokens.css +82 -39
  77. package/package.json +1 -1
package/dist/styles/tokens.css CHANGED
@@ -4,15 +4,15 @@
4
4
  --basalt-space-md: 0.375rem;
5
5
  --basalt-space-lg: 0.5rem;
6
6
  --basalt-space-default: var(--basalt-space-lg);
7
- --basalt-text-xs: 0.6875rem;
7
+ --basalt-text-xs: 0.75rem;
8
8
  --basalt-text-sm: 0.75rem;
9
- --basalt-text-code: 0.8125rem;
9
+ --basalt-text-code: 0.875rem;
10
10
  --basalt-text-base: 0.875rem;
11
- --basalt-text-lg: 1rem;
11
+ --basalt-text-lg: 1.125rem;
12
12
  --basalt-text-xl: 1.125rem;
13
- --basalt-text-2xl: 1.25rem;
13
+ --basalt-text-2xl: 1.125rem;
14
14
  --basalt-text-3xl: 1.5rem;
15
- --basalt-text-4xl: 1.875rem;
15
+ --basalt-text-4xl: 1.5rem;
16
16
  --basalt-text-5xl: 2.25rem;
17
17
  --basalt-text-6xl: 3rem;
18
18
  --basalt-text-7xl: 3.75rem;
@@ -25,7 +25,7 @@
25
25
  --basalt-leading-inline: calc(16 / 12);
26
26
  --basalt-leading-action: calc(24 / 14);
27
27
  --basalt-leading-action-sm: 1.5;
28
- --basalt-leading-action-lg: 1.375;
28
+ --basalt-leading-action-lg: calc(22 / 14);
29
29
  --basalt-leading-banner: calc(22 / 14);
30
30
  --basalt-radius-sm: 0.25rem;
31
31
  --basalt-radius-md: 0.5rem;
@@ -82,15 +82,15 @@
82
82
  --basalt-size-icon-display: 1.5rem;
83
83
  --basalt-size-touch: 2.75rem;
84
84
  --basalt-size-menu-row: var(--basalt-size-control);
85
- --basalt-size-table-row: 2.25rem;
85
+ --basalt-size-table-row: 2.5rem;
86
86
  --basalt-size-check: 1rem;
87
87
  --basalt-size-check-sm: 0.75rem;
88
88
  --basalt-size-textarea: 5rem;
89
89
  --basalt-size-textarea-sm: 4rem;
90
90
  --basalt-size-textarea-lg: 6rem;
91
- --basalt-space-control-x: var(--basalt-space-lg);
92
- --basalt-space-control-x-sm: var(--basalt-space-md);
93
- --basalt-space-control-x-lg: var(--basalt-space-lg);
91
+ --basalt-space-control-x: 0.75rem;
92
+ --basalt-space-control-x-sm: 0.625rem;
93
+ --basalt-space-control-x-lg: 1rem;
94
94
  --basalt-space-control-y: var(--basalt-space-sm);
95
95
  --basalt-space-control-gap: var(--basalt-space-lg);
96
96
  --basalt-space-menu-inset: var(--basalt-space-lg);
@@ -105,8 +105,8 @@
105
105
  --basalt-space-layout-lg: 1.5rem;
106
106
  --basalt-space-layout-xl: 2rem;
107
107
  --basalt-space-field-gap: var(--basalt-space-lg);
108
- --basalt-space-table-x: var(--basalt-space-lg);
109
- --basalt-space-table-y: var(--basalt-space-md);
108
+ --basalt-space-table-x: 0.75rem;
109
+ --basalt-space-table-y: var(--basalt-space-lg);
110
110
  --basalt-space-overlay: var(--basalt-space-lg);
111
111
  --basalt-space-panel-x: var(--basalt-space-card);
112
112
  --basalt-space-panel-y: var(--basalt-space-card-sm);
@@ -159,11 +159,13 @@
159
159
  --basalt-input: 220 13% 88%;
160
160
  --basalt-ring: var(--basalt-primary);
161
161
  --basalt-control-fill: hsl(var(--basalt-secondary));
162
- --basalt-hover: color-mix(in srgb, hsl(var(--basalt-primary)) 9.6%, hsl(var(--basalt-popover)));
163
- --basalt-hover-end: color-mix(
162
+ --basalt-surface-current: var(--basalt-card);
163
+ --basalt-surface-elevated: var(--basalt-secondary);
164
+ --basalt-hover-weight: 18%;
165
+ --basalt-hover: color-mix(
164
166
  in srgb,
165
- hsl(var(--basalt-primary)) 4.8%,
166
- hsl(var(--basalt-popover))
167
+ hsl(var(--basalt-primary)) 18%,
168
+ hsl(var(--basalt-surface-elevated))
167
169
  );
168
170
  --basalt-selected: 0 0% 100%;
169
171
  --basalt-selected-foreground: var(--basalt-foreground);
@@ -198,13 +200,13 @@
198
200
  --basalt-chart-yellow: 49 100% 69%;
199
201
  --basalt-chart-pearl: 215 12% 48%;
200
202
  --basalt-chart-1: var(--basalt-chart-blue);
201
- --basalt-chart-2: var(--basalt-chart-blue);
202
- --basalt-chart-3: var(--basalt-chart-green);
203
- --basalt-chart-4: var(--basalt-chart-green);
203
+ --basalt-chart-2: var(--basalt-chart-pink);
204
+ --basalt-chart-3: 182 38% 48%;
205
+ --basalt-chart-4: 280 32% 62%;
204
206
  --basalt-chart-5: var(--basalt-chart-green);
205
- --basalt-chart-6: var(--basalt-chart-green);
207
+ --basalt-chart-6: 27 54% 62%;
206
208
  --basalt-chart-7: var(--basalt-chart-yellow);
207
- --basalt-chart-8: var(--basalt-chart-yellow);
209
+ --basalt-chart-8: 237 36% 62%;
208
210
  --basalt-chart-9: var(--basalt-chart-pink);
209
211
  --basalt-chart-10: var(--basalt-chart-pink);
210
212
  --basalt-chart-11: var(--basalt-chart-pink);
@@ -234,6 +236,7 @@
234
236
  --basalt-accent-10: 280 53% 71%;
235
237
  --basalt-accent-11: 237 66% 69%;
236
238
  --basalt-accent-12: 210 20% 87%;
239
+ --basalt-success: var(--basalt-tag-success-foreground);
237
240
  --basalt-badge-green: 113 60% 30%;
238
241
  --basalt-badge-green-foreground: 0 0% 100%;
239
242
  --basalt-badge-teal: 182 62% 30%;
@@ -288,6 +291,7 @@
288
291
  --basalt-danger-tint: 0 40% 16%;
289
292
  --basalt-info-foreground: 0 0% 10%;
290
293
  --basalt-warning-foreground: 0 0% 10%;
294
+ --basalt-success: var(--basalt-tag-success-foreground);
291
295
  --basalt-badge-green: 113 55% 62%;
292
296
  --basalt-badge-green-foreground: 0 0% 10%;
293
297
  --basalt-badge-teal: var(--basalt-accent-3);
@@ -298,11 +302,13 @@
298
302
  --basalt-input: 0 0% 18%;
299
303
  --basalt-ring: var(--basalt-primary);
300
304
  --basalt-control-fill: hsl(var(--basalt-secondary));
301
- --basalt-hover: color-mix(in srgb, hsl(var(--basalt-primary)) 16%, hsl(var(--basalt-popover)));
302
- --basalt-hover-end: color-mix(
305
+ --basalt-surface-current: var(--basalt-card);
306
+ --basalt-surface-elevated: var(--basalt-secondary);
307
+ --basalt-hover-weight: 18%;
308
+ --basalt-hover: color-mix(
303
309
  in srgb,
304
- hsl(var(--basalt-primary)) 9.6%,
305
- hsl(var(--basalt-popover))
310
+ hsl(var(--basalt-primary)) 18%,
311
+ hsl(var(--basalt-surface-elevated))
306
312
  );
307
313
  --basalt-selected: 0 0% 22%;
308
314
  --basalt-selected-foreground: var(--basalt-foreground);
@@ -324,13 +330,13 @@
324
330
  --basalt-chart-yellow: 49 100% 73%;
325
331
  --basalt-chart-pearl: 210 20% 86%;
326
332
  --basalt-chart-1: var(--basalt-chart-blue);
327
- --basalt-chart-2: var(--basalt-chart-blue);
328
- --basalt-chart-3: var(--basalt-chart-green);
329
- --basalt-chart-4: var(--basalt-chart-green);
333
+ --basalt-chart-2: var(--basalt-chart-pink);
334
+ --basalt-chart-3: 182 38% 64%;
335
+ --basalt-chart-4: 280 32% 74%;
330
336
  --basalt-chart-5: var(--basalt-chart-green);
331
- --basalt-chart-6: var(--basalt-chart-green);
337
+ --basalt-chart-6: 27 54% 72%;
332
338
  --basalt-chart-7: var(--basalt-chart-yellow);
333
- --basalt-chart-8: var(--basalt-chart-yellow);
339
+ --basalt-chart-8: 237 36% 74%;
334
340
  --basalt-chart-9: var(--basalt-chart-pink);
335
341
  --basalt-chart-10: var(--basalt-chart-pink);
336
342
  --basalt-chart-11: var(--basalt-chart-pink);
@@ -382,13 +388,22 @@
382
388
 
383
389
  [data-basalt-surface-root] {
384
390
  background: hsl(var(--basalt-card));
385
- --basalt-control-fill: hsl(var(--basalt-card));
391
+ --basalt-surface-current: var(--basalt-card);
392
+ --basalt-surface-elevated: var(--basalt-secondary);
393
+ --basalt-control-fill: hsl(var(--basalt-secondary));
386
394
  --basalt-zebra-fill: hsl(var(--basalt-secondary));
387
395
  }
388
396
 
389
397
  [data-basalt-surface-root] [data-basalt-surface] {
390
398
  background: hsl(var(--basalt-secondary));
391
- --basalt-control-fill: hsl(var(--basalt-secondary));
399
+ --basalt-surface-current: var(--basalt-secondary);
400
+ --basalt-surface-elevated: var(--basalt-bright);
401
+ --basalt-control-fill: hsl(var(--basalt-bright));
402
+ --basalt-hover: color-mix(
403
+ in srgb,
404
+ hsl(var(--basalt-primary)) var(--basalt-hover-weight),
405
+ hsl(var(--basalt-surface-elevated))
406
+ );
392
407
  --basalt-primary-hover: color-mix(
393
408
  in srgb,
394
409
  hsl(var(--basalt-primary)) 90%,
@@ -404,6 +419,7 @@
404
419
 
405
420
  [data-basalt-surface-root] [data-basalt-surface] [data-basalt-surface] {
406
421
  background: hsl(var(--basalt-bright));
422
+ --basalt-surface-current: var(--basalt-bright);
407
423
  --basalt-control-fill: hsl(var(--basalt-bright));
408
424
  --basalt-zebra-fill: transparent;
409
425
  }
@@ -416,14 +432,27 @@
416
432
 
417
433
  [data-basalt-surface]:not([data-basalt-surface-root] *):not([data-basalt-surface] *) {
418
434
  background: hsl(var(--basalt-card));
419
- --basalt-control-fill: hsl(var(--basalt-card));
435
+ --basalt-surface-current: var(--basalt-card);
436
+ --basalt-surface-elevated: var(--basalt-bright);
437
+ --basalt-control-fill: hsl(var(--basalt-bright));
438
+ --basalt-hover: color-mix(
439
+ in srgb,
440
+ hsl(var(--basalt-primary)) var(--basalt-hover-weight),
441
+ hsl(var(--basalt-surface-elevated))
442
+ );
420
443
  --basalt-zebra-fill: hsl(var(--basalt-secondary));
421
444
  }
422
445
 
423
446
  /* biome-ignore lint/style/noDescendingSpecificity: Rootless surface trees cannot overlap a surface-root tree. */
424
447
  [data-basalt-surface]:not([data-basalt-surface-root] *) [data-basalt-surface] {
425
448
  background: hsl(var(--basalt-secondary));
426
- --basalt-control-fill: hsl(var(--basalt-secondary));
449
+ --basalt-surface-current: var(--basalt-secondary);
450
+ --basalt-control-fill: hsl(var(--basalt-bright));
451
+ --basalt-hover: color-mix(
452
+ in srgb,
453
+ hsl(var(--basalt-primary)) var(--basalt-hover-weight),
454
+ hsl(var(--basalt-surface-elevated))
455
+ );
427
456
  --basalt-primary-hover: color-mix(
428
457
  in srgb,
429
458
  hsl(var(--basalt-primary)) 90%,
@@ -441,6 +470,7 @@
441
470
  [data-basalt-surface]
442
471
  [data-basalt-surface] {
443
472
  background: hsl(var(--basalt-bright));
473
+ --basalt-surface-current: var(--basalt-bright);
444
474
  --basalt-control-fill: hsl(var(--basalt-bright));
445
475
  --basalt-zebra-fill: transparent;
446
476
  }
@@ -454,6 +484,11 @@
454
484
  --basalt-zebra-fill: transparent;
455
485
  }
456
486
 
487
+ [data-basalt-table] tbody tr:not(:last-child),
488
+ [data-basalt-table] tbody tr:not(:last-child) > td {
489
+ border-bottom: 1px solid hsl(var(--basalt-border) / 0.5);
490
+ }
491
+
457
492
  [data-basalt-table] tbody tr[aria-selected="true"] td {
458
493
  background: hsl(var(--basalt-selected));
459
494
  color: hsl(var(--basalt-selected-foreground));
@@ -463,8 +498,16 @@
463
498
  background: var(--basalt-hover);
464
499
  }
465
500
 
466
- [data-basalt-table] tbody tr:nth-child(even):not([aria-selected="true"]):not(:hover) td {
467
- background: var(--basalt-zebra-fill);
501
+ [data-basalt-table][data-striped="true"] tbody tr:nth-child(even) {
502
+ background-color: hsl(var(--basalt-surface-current));
503
+ }
504
+
505
+ [data-basalt-table-container][data-edge="attached"] :where(th, td):first-child {
506
+ padding-inline-start: var(--basalt-space-card);
507
+ }
508
+
509
+ [data-basalt-table-container][data-edge="attached"] :where(th, td):last-child {
510
+ padding-inline-end: var(--basalt-space-card);
468
511
  }
469
512
 
470
513
  [data-basalt-table]
@@ -518,7 +561,7 @@
518
561
  .basalt-action-lg {
519
562
  padding-block: var(--basalt-space-lg);
520
563
  padding-inline: var(--basalt-space-control-x-lg);
521
- font-size: var(--basalt-text-lg);
564
+ font-size: var(--basalt-text-base);
522
565
  line-height: var(--basalt-leading-action-lg);
523
566
  }
524
567
  .basalt-action-icon {
@@ -615,7 +658,7 @@
615
658
  height: var(--basalt-hover-height, 0px);
616
659
  transform: translate(var(--basalt-hover-x, 0px), var(--basalt-hover-y, 0px));
617
660
  border-radius: var(--basalt-radius-md);
618
- background: linear-gradient(90deg, var(--basalt-hover), var(--basalt-hover-end));
661
+ background: var(--basalt-hover);
619
662
  opacity: 0;
620
663
  transition: none;
621
664
  }
@@ -679,7 +722,7 @@
679
722
  width: var(--basalt-command-width);
680
723
  height: var(--basalt-command-height);
681
724
  border-radius: var(--basalt-radius-md);
682
- background: linear-gradient(90deg, var(--basalt-hover), var(--basalt-hover-end));
725
+ background: var(--basalt-hover);
683
726
  }
684
727
 
685
728
  .basalt-command-list[data-basalt-command-animated="true"]::before {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nocoo/basalt",
3
- "version": "3.1.0",
3
+ "version": "3.2.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {