@mcp-b/react-components 0.1.1 → 0.1.3

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 (203) hide show
  1. package/dist/Button-QCM8ZKgR.d.ts +98 -0
  2. package/dist/CodeBlock-CttHhWcb.js +356 -0
  3. package/dist/CodeBlock-V6pgafSS.d.ts +174 -0
  4. package/dist/Select-CRsKCJ9x.d.ts +200 -0
  5. package/dist/class-names-9UtZwb0J.js +12 -0
  6. package/dist/components/Accordion.d.ts +81 -0
  7. package/dist/components/Accordion.js +97 -0
  8. package/dist/components/AgentConnection.d.ts +69 -0
  9. package/dist/components/AgentConnection.js +176 -0
  10. package/dist/components/AlertDialog.d.ts +148 -0
  11. package/dist/components/AlertDialog.js +141 -0
  12. package/dist/components/Artifact.d.ts +128 -0
  13. package/dist/components/Artifact.js +115 -0
  14. package/dist/components/Autocomplete.d.ts +186 -0
  15. package/dist/components/Autocomplete.js +186 -0
  16. package/dist/components/Avatar.d.ts +134 -0
  17. package/dist/components/Avatar.js +118 -0
  18. package/dist/components/Badge.d.ts +68 -0
  19. package/dist/components/Badge.js +108 -0
  20. package/dist/components/Button.d.ts +2 -0
  21. package/dist/components/Button.js +73 -0
  22. package/dist/components/Card.d.ts +87 -0
  23. package/dist/components/Card.js +81 -0
  24. package/dist/components/ChainOfThought.d.ts +153 -0
  25. package/dist/components/ChainOfThought.js +157 -0
  26. package/dist/components/Checkbox.d.ts +35 -0
  27. package/dist/components/Checkbox.js +47 -0
  28. package/dist/components/CheckboxGroup.d.ts +76 -0
  29. package/dist/components/CheckboxGroup.js +69 -0
  30. package/dist/components/CodeBlock.d.ts +2 -0
  31. package/dist/components/CodeBlock.js +2 -0
  32. package/dist/components/Collapsible.d.ts +127 -0
  33. package/dist/components/Collapsible.js +103 -0
  34. package/dist/components/Combobox.d.ts +177 -0
  35. package/dist/components/Combobox.js +179 -0
  36. package/dist/components/Commit.d.ts +265 -0
  37. package/dist/components/Commit.js +282 -0
  38. package/dist/components/Context.d.ts +129 -0
  39. package/dist/components/Context.js +309 -0
  40. package/dist/components/ContextMenu.d.ts +282 -0
  41. package/dist/components/ContextMenu.js +270 -0
  42. package/dist/components/Conversation.d.ts +166 -0
  43. package/dist/components/Conversation.js +202 -0
  44. package/dist/components/Dialog.d.ts +120 -0
  45. package/dist/components/Dialog.js +114 -0
  46. package/dist/components/EnvironmentVariables.d.ts +176 -0
  47. package/dist/components/EnvironmentVariables.js +221 -0
  48. package/dist/components/Field.d.ts +281 -0
  49. package/dist/components/Field.js +274 -0
  50. package/dist/components/Fieldset.d.ts +93 -0
  51. package/dist/components/Fieldset.js +81 -0
  52. package/dist/components/FileTree.d.ts +116 -0
  53. package/dist/components/FileTree.js +310 -0
  54. package/dist/components/Form.d.ts +94 -0
  55. package/dist/components/Form.js +88 -0
  56. package/dist/components/GithubMotionMark.d.ts +13 -0
  57. package/dist/components/GithubMotionMark.js +23 -0
  58. package/dist/components/Input.d.ts +33 -0
  59. package/dist/components/Input.js +27 -0
  60. package/dist/components/Label.d.ts +44 -0
  61. package/dist/components/Label.js +41 -0
  62. package/dist/components/Menu.d.ts +395 -0
  63. package/dist/components/Menu.js +338 -0
  64. package/dist/components/Menubar.d.ts +331 -0
  65. package/dist/components/Menubar.js +299 -0
  66. package/dist/components/Message.d.ts +216 -0
  67. package/dist/components/Message.js +245 -0
  68. package/dist/components/Meter.d.ts +151 -0
  69. package/dist/components/Meter.js +121 -0
  70. package/dist/components/ModelSelector.d.ts +198 -0
  71. package/dist/components/ModelSelector.js +306 -0
  72. package/dist/components/NaniteScene.d.ts +33 -0
  73. package/dist/components/NaniteScene.js +405 -0
  74. package/dist/components/NavigationMenu.d.ts +256 -0
  75. package/dist/components/NavigationMenu.js +228 -0
  76. package/dist/components/NumberField.d.ts +159 -0
  77. package/dist/components/NumberField.js +123 -0
  78. package/dist/components/Popover.d.ts +278 -0
  79. package/dist/components/Popover.js +245 -0
  80. package/dist/components/PreviewCard.d.ts +156 -0
  81. package/dist/components/PreviewCard.js +156 -0
  82. package/dist/components/PricingPage.d.ts +209 -0
  83. package/dist/components/PricingPage.js +506 -0
  84. package/dist/components/Progress.d.ts +58 -0
  85. package/dist/components/Progress.js +51 -0
  86. package/dist/components/PromptInput.d.ts +399 -0
  87. package/dist/components/PromptInput.js +737 -0
  88. package/dist/components/Queue.d.ts +241 -0
  89. package/dist/components/Queue.js +225 -0
  90. package/dist/components/RadioGroup.d.ts +78 -0
  91. package/dist/components/RadioGroup.js +72 -0
  92. package/dist/components/Reasoning.d.ts +88 -0
  93. package/dist/components/Reasoning.js +187 -0
  94. package/dist/components/ScrollArea.d.ts +160 -0
  95. package/dist/components/ScrollArea.js +145 -0
  96. package/dist/components/Select.d.ts +2 -0
  97. package/dist/components/Select.js +260 -0
  98. package/dist/components/Separator.d.ts +45 -0
  99. package/dist/components/Separator.js +40 -0
  100. package/dist/components/Shell.d.ts +163 -0
  101. package/dist/components/Shell.js +137 -0
  102. package/dist/components/Slider.d.ts +120 -0
  103. package/dist/components/Slider.js +115 -0
  104. package/dist/components/Sources.d.ts +91 -0
  105. package/dist/components/Sources.js +121 -0
  106. package/dist/components/Stepper.d.ts +190 -0
  107. package/dist/components/Stepper.js +315 -0
  108. package/dist/components/Switch.d.ts +57 -0
  109. package/dist/components/Switch.js +55 -0
  110. package/dist/components/Tabs.d.ts +84 -0
  111. package/dist/components/Tabs.js +78 -0
  112. package/dist/components/Task.d.ts +100 -0
  113. package/dist/components/Task.js +120 -0
  114. package/dist/components/Terminal.d.ts +118 -0
  115. package/dist/components/Terminal.js +234 -0
  116. package/dist/components/TestResults.d.ts +236 -0
  117. package/dist/components/TestResults.js +346 -0
  118. package/dist/components/Toast.d.ts +192 -0
  119. package/dist/components/Toast.js +163 -0
  120. package/dist/components/Toggle.d.ts +69 -0
  121. package/dist/components/Toggle.js +66 -0
  122. package/dist/components/ToggleGroup.d.ts +69 -0
  123. package/dist/components/ToggleGroup.js +99 -0
  124. package/dist/components/Tool.d.ts +119 -0
  125. package/dist/components/Tool.js +192 -0
  126. package/dist/components/Toolbar.d.ts +162 -0
  127. package/dist/components/Toolbar.js +126 -0
  128. package/dist/components/Tooltip.d.ts +81 -0
  129. package/dist/components/Tooltip.js +74 -0
  130. package/dist/components/WebPreview.d.ts +143 -0
  131. package/dist/components/WebPreview.js +280 -0
  132. package/dist/components/useStickToBottom.d.ts +30 -0
  133. package/dist/components/useStickToBottom.js +95 -0
  134. package/dist/copy-button-BIATcZWZ.d.ts +16 -0
  135. package/dist/copy-button-BNgclDrO.js +43 -0
  136. package/dist/icons-BsWc8g4E.js +221 -0
  137. package/dist/styles/accordion.css +10 -10
  138. package/dist/styles/agent-connection.css +18 -17
  139. package/dist/styles/alert-dialog.css +48 -29
  140. package/dist/styles/artifact.css +10 -10
  141. package/dist/styles/autocomplete.css +25 -24
  142. package/dist/styles/avatar.css +96 -6
  143. package/dist/styles/badge.css +78 -14
  144. package/dist/styles/base.css +9 -9
  145. package/dist/styles/button.css +57 -38
  146. package/dist/styles/card.css +57 -10
  147. package/dist/styles/chain-of-thought.css +47 -33
  148. package/dist/styles/checkbox.css +24 -10
  149. package/dist/styles/code-block.css +22 -15
  150. package/dist/styles/collapsible.css +14 -12
  151. package/dist/styles/combobox.css +26 -25
  152. package/dist/styles/commit.css +49 -24
  153. package/dist/styles/context-menu.css +70 -16
  154. package/dist/styles/context.css +15 -15
  155. package/dist/styles/conversation.css +12 -12
  156. package/dist/styles/dialog.css +52 -16
  157. package/dist/styles/environment-variables.css +19 -19
  158. package/dist/styles/field.css +184 -22
  159. package/dist/styles/fieldset.css +5 -4
  160. package/dist/styles/file-tree.css +17 -17
  161. package/dist/styles/index.css.d.ts +1 -0
  162. package/dist/styles/input.css +45 -11
  163. package/dist/styles/label.css +21 -4
  164. package/dist/styles/menu.css +55 -32
  165. package/dist/styles/menubar.css +80 -28
  166. package/dist/styles/message.css +22 -13
  167. package/dist/styles/meter.css +8 -8
  168. package/dist/styles/model-selector.css +33 -21
  169. package/dist/styles/navigation-menu.css +26 -24
  170. package/dist/styles/number-field.css +20 -18
  171. package/dist/styles/popover.css +38 -28
  172. package/dist/styles/preview-card.css +15 -13
  173. package/dist/styles/pricing-page.css +53 -53
  174. package/dist/styles/progress.css +7 -7
  175. package/dist/styles/prompt-input.css +73 -24
  176. package/dist/styles/queue.css +58 -32
  177. package/dist/styles/radio.css +26 -11
  178. package/dist/styles/reasoning.css +15 -11
  179. package/dist/styles/scroll-area.css +6 -6
  180. package/dist/styles/scrollbars.css +4 -4
  181. package/dist/styles/select.css +84 -25
  182. package/dist/styles/separator.css +1 -1
  183. package/dist/styles/shell.css +21 -20
  184. package/dist/styles/slider.css +35 -11
  185. package/dist/styles/sources.css +20 -20
  186. package/dist/styles/stepper.css +22 -22
  187. package/dist/styles/switch.css +29 -13
  188. package/dist/styles/tabs.css +23 -16
  189. package/dist/styles/task.css +27 -23
  190. package/dist/styles/terminal.css +16 -13
  191. package/dist/styles/test-results.css +79 -32
  192. package/dist/styles/toast.css +26 -25
  193. package/dist/styles/toggle-group.css +12 -12
  194. package/dist/styles/toggle.css +29 -11
  195. package/dist/styles/tool.css +54 -32
  196. package/dist/styles/toolbar.css +30 -28
  197. package/dist/styles/tooltip.css +10 -8
  198. package/dist/styles/web-preview.css +37 -21
  199. package/dist/utils/structured-code.d.ts +10 -0
  200. package/dist/utils/structured-code.js +81 -0
  201. package/package.json +17 -8
  202. package/dist/index.d.ts +0 -7236
  203. package/dist/index.js +0 -8945
package/dist/styles/task.css CHANGED
@@ -2,8 +2,8 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  width: 100%;
5
- font-family: var(--sigvelo-font-family);
6
- color: var(--sigvelo-text-body);
5
+ font-family: var(--sigvelo-font-sans);
6
+ color: var(--sigvelo-color-text);
7
7
  }
8
8
 
9
9
  .task__trigger {
@@ -15,9 +15,9 @@
15
15
  padding-inline: 0.75rem;
16
16
  background-color: transparent;
17
17
  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
18
- var(--sigvelo-neutral-stroke-softer);
19
- border-radius: var(--sigvelo-border-radius-md);
20
- color: var(--sigvelo-text-body);
18
+ var(--sigvelo-color-neutral-border-subtle);
19
+ border-radius: var(--sigvelo-radius-md);
20
+ color: var(--sigvelo-color-text);
21
21
  font-family: inherit;
22
22
  font-size: 0.875rem;
23
23
  font-weight: var(--sigvelo-font-weight-semibold);
@@ -29,14 +29,14 @@
29
29
  }
30
30
 
31
31
  .task__trigger:hover:not([data-disabled]) {
32
- background-color: var(--sigvelo-neutral-fill-softer);
32
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
33
33
  }
34
34
 
35
35
  .task__trigger:focus-visible {
36
36
  outline: none;
37
37
  box-shadow:
38
- 0 0 0 2px var(--sigvelo-background-color),
39
- 0 0 0 4px var(--sigvelo-focus-color);
38
+ 0 0 0 2px var(--sigvelo-color-canvas),
39
+ 0 0 0 4px var(--sigvelo-color-focus);
40
40
  }
41
41
 
42
42
  .task__trigger[data-panel-open] {
@@ -44,9 +44,13 @@
44
44
  border-end-end-radius: 0;
45
45
  }
46
46
 
47
+ .task__trigger-leading-icon,
47
48
  .task__trigger-icon {
48
49
  display: inline-flex;
49
- color: var(--sigvelo-text-muted);
50
+ color: var(--sigvelo-color-text-muted);
51
+ }
52
+
53
+ .task__trigger-icon {
50
54
  transition: transform 200ms ease;
51
55
  }
52
56
 
@@ -66,7 +70,7 @@
66
70
  display: inline-flex;
67
71
  align-items: center;
68
72
  gap: 0.375rem;
69
- color: var(--sigvelo-text-muted);
73
+ color: var(--sigvelo-color-text-muted);
70
74
  font-weight: var(--sigvelo-font-weight-normal);
71
75
  }
72
76
 
@@ -99,18 +103,18 @@
99
103
  padding-block: 0.75rem;
100
104
  padding-inline: 1.5rem;
101
105
  list-style: none;
102
- background-color: var(--sigvelo-paper-color);
106
+ background-color: var(--sigvelo-color-surface);
103
107
  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
104
- var(--sigvelo-neutral-stroke-softer);
108
+ var(--sigvelo-color-neutral-border-subtle);
105
109
  border-block-start: none;
106
- border-end-start-radius: var(--sigvelo-border-radius-md);
107
- border-end-end-radius: var(--sigvelo-border-radius-md);
110
+ border-end-start-radius: var(--sigvelo-radius-md);
111
+ border-end-end-radius: var(--sigvelo-radius-md);
108
112
  }
109
113
 
110
114
  .task__item {
111
115
  position: relative;
112
116
  font-size: 0.8125rem;
113
- color: var(--sigvelo-text-body);
117
+ color: var(--sigvelo-color-text);
114
118
  line-height: 1.6;
115
119
  }
116
120
 
@@ -121,8 +125,8 @@
121
125
  inset-block-start: 0.625rem;
122
126
  width: 0.3125rem;
123
127
  height: 0.3125rem;
124
- border-radius: var(--sigvelo-border-radius-pill);
125
- background-color: var(--sigvelo-neutral-stroke-soft);
128
+ border-radius: var(--sigvelo-radius-full);
129
+ background-color: var(--sigvelo-color-neutral-border-muted);
126
130
  }
127
131
 
128
132
  .task__file {
@@ -132,19 +136,19 @@
132
136
  padding-block: 0.0625rem;
133
137
  padding-inline: 0.375rem;
134
138
  margin-inline: 0.125rem;
135
- background-color: var(--sigvelo-neutral-fill-softer);
139
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
136
140
  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
137
- var(--sigvelo-neutral-stroke-softer);
138
- border-radius: var(--sigvelo-border-radius-sm);
139
- font-family: var(--sigvelo-font-family-code);
141
+ var(--sigvelo-color-neutral-border-subtle);
142
+ border-radius: var(--sigvelo-radius-sm);
143
+ font-family: var(--sigvelo-font-mono);
140
144
  font-size: 0.75rem;
141
- color: var(--sigvelo-text-body);
145
+ color: var(--sigvelo-color-text);
142
146
  vertical-align: baseline;
143
147
  }
144
148
 
145
149
  .task__file-icon {
146
150
  display: inline-flex;
147
- color: var(--sigvelo-text-muted);
151
+ color: var(--sigvelo-color-text-muted);
148
152
  }
149
153
 
150
154
  .task__file-name {
package/dist/styles/terminal.css CHANGED
@@ -2,12 +2,12 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  width: 100%;
5
- font-family: var(--sigvelo-font-family);
6
- background-color: var(--sigvelo-neutral-950, var(--sigvelo-neutral-900));
7
- color: var(--sigvelo-neutral-100);
5
+ font-family: var(--sigvelo-font-sans);
6
+ background-color: var(--sigvelo-color-neutral-950, var(--sigvelo-color-neutral-900));
7
+ color: var(--sigvelo-color-neutral-100);
8
8
  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
9
- var(--sigvelo-neutral-stroke-softer);
10
- border-radius: var(--sigvelo-border-radius-md);
9
+ var(--sigvelo-color-neutral-border-subtle);
10
+ border-radius: var(--sigvelo-radius-md);
11
11
  overflow: hidden;
12
12
  }
13
13
 
@@ -17,15 +17,18 @@
17
17
  gap: 0.5rem;
18
18
  padding-block: 0.5rem;
19
19
  padding-inline: 0.75rem;
20
- background-color: color-mix(in oklab, var(--sigvelo-neutral-950) 80%, white 20%);
20
+ background-color: color-mix(in oklab, var(--sigvelo-color-neutral-950) 80%, white 20%);
21
21
  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
22
- color-mix(in oklab, var(--sigvelo-neutral-700) 40%, transparent);
22
+ color-mix(in oklab, var(--sigvelo-color-neutral-700) 40%, transparent);
23
23
  }
24
24
 
25
25
  .terminal__title {
26
- font-family: var(--sigvelo-font-family-code);
26
+ display: inline-flex;
27
+ align-items: center;
28
+ gap: 0.375rem;
29
+ font-family: var(--sigvelo-font-mono);
27
30
  font-size: 0.75rem;
28
- color: var(--sigvelo-neutral-300);
31
+ color: var(--sigvelo-color-neutral-300);
29
32
  }
30
33
 
31
34
  .terminal__status {
@@ -41,7 +44,7 @@
41
44
 
42
45
  .terminal__copy,
43
46
  .terminal__clear {
44
- color: var(--sigvelo-neutral-300);
47
+ color: var(--sigvelo-color-neutral-300);
45
48
  }
46
49
 
47
50
  .terminal__content {
@@ -60,10 +63,10 @@
60
63
 
61
64
  .terminal__output {
62
65
  margin: 0;
63
- font-family: var(--sigvelo-font-family-code);
66
+ font-family: var(--sigvelo-font-mono);
64
67
  font-size: 0.75rem;
65
68
  line-height: 1.6;
66
- color: var(--sigvelo-neutral-100);
69
+ color: var(--sigvelo-color-neutral-100);
67
70
  white-space: pre-wrap;
68
71
  word-break: break-word;
69
72
  }
@@ -73,7 +76,7 @@
73
76
  width: 0.5rem;
74
77
  height: 1em;
75
78
  vertical-align: text-bottom;
76
- background-color: var(--sigvelo-neutral-100);
79
+ background-color: var(--sigvelo-color-neutral-100);
77
80
  margin-inline-start: 0.125rem;
78
81
  animation: terminal-blink 1s step-end infinite;
79
82
  }
package/dist/styles/test-results.css CHANGED
@@ -2,12 +2,12 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  width: 100%;
5
- font-family: var(--sigvelo-font-family);
6
- color: var(--sigvelo-text-body);
7
- background-color: var(--sigvelo-paper-color);
5
+ font-family: var(--sigvelo-font-sans);
6
+ color: var(--sigvelo-color-text);
7
+ background-color: var(--sigvelo-color-surface);
8
8
  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
9
- var(--sigvelo-neutral-stroke-softer);
10
- border-radius: var(--sigvelo-border-radius-md);
9
+ var(--sigvelo-color-neutral-border-subtle);
10
+ border-radius: var(--sigvelo-radius-md);
11
11
  overflow: hidden;
12
12
  }
13
13
 
@@ -18,7 +18,7 @@
18
18
  padding-block: 0.75rem;
19
19
  padding-inline: 0.875rem;
20
20
  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
21
- var(--sigvelo-neutral-stroke-softer);
21
+ var(--sigvelo-color-neutral-border-subtle);
22
22
  }
23
23
 
24
24
  .test-results__summary {
@@ -37,26 +37,56 @@
37
37
  align-items: center;
38
38
  gap: 0.75rem;
39
39
  font-size: 0.75rem;
40
- color: var(--sigvelo-text-muted);
40
+ color: var(--sigvelo-color-text-muted);
41
41
  font-variant-numeric: tabular-nums;
42
42
  }
43
43
 
44
44
  .test-results__stat--passed {
45
- color: var(--sigvelo-success-text-colorful);
45
+ color: var(--sigvelo-color-success-text);
46
46
  }
47
47
 
48
48
  .test-results__stat--failed {
49
- color: var(--sigvelo-destructive-text-colorful);
49
+ color: var(--sigvelo-color-danger-text);
50
50
  }
51
51
 
52
52
  .test-results__stat--skipped {
53
- color: var(--sigvelo-warning-text-colorful);
53
+ color: var(--sigvelo-color-warning-text);
54
54
  }
55
55
 
56
56
  .test-results__progress {
57
57
  width: 100%;
58
58
  }
59
59
 
60
+ .test-results__progress-track {
61
+ display: flex;
62
+ width: 100%;
63
+ height: 0.5rem;
64
+ overflow: hidden;
65
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
66
+ border-radius: var(--sigvelo-radius-full);
67
+ }
68
+
69
+ .test-results__progress-segment {
70
+ height: 100%;
71
+ transition: width 300ms ease;
72
+ }
73
+
74
+ .test-results__progress-segment--passed {
75
+ background-color: var(--sigvelo-color-success-bg);
76
+ }
77
+
78
+ .test-results__progress-segment--failed {
79
+ background-color: var(--sigvelo-color-danger-bg);
80
+ }
81
+
82
+ .test-results__progress-label {
83
+ display: block;
84
+ margin-block-start: 0.25rem;
85
+ color: var(--sigvelo-color-text-muted);
86
+ font-size: 0.6875rem;
87
+ font-variant-numeric: tabular-nums;
88
+ }
89
+
60
90
  .test-results__body {
61
91
  display: flex;
62
92
  flex-direction: column;
@@ -66,7 +96,7 @@
66
96
  display: flex;
67
97
  flex-direction: column;
68
98
  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
69
- var(--sigvelo-neutral-stroke-softer);
99
+ var(--sigvelo-color-neutral-border-subtle);
70
100
  }
71
101
 
72
102
  .test-results__suite:last-child {
@@ -82,7 +112,7 @@
82
112
  padding-inline: 0.875rem;
83
113
  background-color: transparent;
84
114
  border: none;
85
- color: var(--sigvelo-text-body);
115
+ color: var(--sigvelo-color-text);
86
116
  font-family: inherit;
87
117
  font-size: 0.8125rem;
88
118
  font-weight: var(--sigvelo-font-weight-semibold);
@@ -92,19 +122,19 @@
92
122
  }
93
123
 
94
124
  .test-results__suite-trigger:hover:not([data-disabled]) {
95
- background-color: var(--sigvelo-neutral-fill-softer);
125
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
96
126
  }
97
127
 
98
128
  .test-results__suite-trigger:focus-visible {
99
129
  outline: none;
100
130
  box-shadow:
101
- 0 0 0 2px var(--sigvelo-background-color),
102
- 0 0 0 4px var(--sigvelo-focus-color);
131
+ 0 0 0 2px var(--sigvelo-color-canvas),
132
+ 0 0 0 4px var(--sigvelo-color-focus);
103
133
  }
104
134
 
105
135
  .test-results__suite-icon {
106
136
  display: inline-flex;
107
- color: var(--sigvelo-text-muted);
137
+ color: var(--sigvelo-color-text-muted);
108
138
  transition: transform 200ms ease;
109
139
  }
110
140
 
@@ -115,7 +145,7 @@
115
145
  .test-results__suite-name {
116
146
  flex: 1;
117
147
  min-width: 0;
118
- font-family: var(--sigvelo-font-family-code);
148
+ font-family: var(--sigvelo-font-mono);
119
149
  font-size: 0.8125rem;
120
150
  font-weight: var(--sigvelo-font-weight-normal);
121
151
  overflow: hidden;
@@ -123,6 +153,16 @@
123
153
  white-space: nowrap;
124
154
  }
125
155
 
156
+ .test-results__suite-stats {
157
+ margin-inline-start: auto;
158
+ display: inline-flex;
159
+ align-items: center;
160
+ gap: 0.5rem;
161
+ color: var(--sigvelo-color-text-muted);
162
+ font-size: 0.75rem;
163
+ font-variant-numeric: tabular-nums;
164
+ }
165
+
126
166
  .test-results__suite-content {
127
167
  overflow: hidden;
128
168
  transition:
@@ -150,7 +190,7 @@
150
190
  margin: 0;
151
191
  padding: 0;
152
192
  list-style: none;
153
- background-color: var(--sigvelo-neutral-fill-softer);
193
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
154
194
  }
155
195
 
156
196
  .test-results__test {
@@ -162,7 +202,7 @@
162
202
  padding-inline: 1.5rem;
163
203
  font-size: 0.8125rem;
164
204
  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
165
- var(--sigvelo-neutral-stroke-softer);
205
+ var(--sigvelo-color-neutral-border-subtle);
166
206
  }
167
207
 
168
208
  .test-results__test:last-child {
@@ -175,33 +215,33 @@
175
215
  justify-content: center;
176
216
  width: 1rem;
177
217
  height: 1rem;
178
- border-radius: var(--sigvelo-border-radius-pill);
218
+ border-radius: var(--sigvelo-radius-full);
179
219
  flex-shrink: 0;
180
220
  }
181
221
 
182
222
  .test-results__test-status--passed {
183
- color: var(--sigvelo-success-text-colorful);
223
+ color: var(--sigvelo-color-success-text);
184
224
  }
185
225
 
186
226
  .test-results__test-status--failed {
187
- color: var(--sigvelo-destructive-text-colorful);
227
+ color: var(--sigvelo-color-danger-text);
188
228
  }
189
229
 
190
230
  .test-results__test-status--skipped {
191
- color: var(--sigvelo-warning-text-colorful);
231
+ color: var(--sigvelo-color-warning-text);
192
232
  }
193
233
 
194
234
  .test-results__test-status--running {
195
- color: var(--sigvelo-primary-text-colorful);
235
+ color: var(--sigvelo-color-primary-text);
196
236
  animation: test-results-spin 1.4s linear infinite;
197
237
  }
198
238
 
199
239
  .test-results__test-name {
200
240
  flex: 1;
201
241
  min-width: 0;
202
- font-family: var(--sigvelo-font-family-code);
242
+ font-family: var(--sigvelo-font-mono);
203
243
  font-size: 0.8125rem;
204
- color: var(--sigvelo-text-body);
244
+ color: var(--sigvelo-color-text);
205
245
  overflow: hidden;
206
246
  text-overflow: ellipsis;
207
247
  white-space: nowrap;
@@ -209,7 +249,7 @@
209
249
 
210
250
  .test-results__test-duration {
211
251
  font-size: 0.6875rem;
212
- color: var(--sigvelo-text-muted);
252
+ color: var(--sigvelo-color-text-muted);
213
253
  font-variant-numeric: tabular-nums;
214
254
  }
215
255
 
@@ -225,19 +265,26 @@
225
265
  .test-results__error-text {
226
266
  margin: 0;
227
267
  padding: 0.5rem 0.75rem;
228
- font-family: var(--sigvelo-font-family-code);
268
+ font-family: var(--sigvelo-font-mono);
229
269
  font-size: 0.6875rem;
230
270
  line-height: 1.55;
231
- color: var(--sigvelo-destructive-text-colorful);
232
- background-color: var(--sigvelo-destructive-fill-softer);
271
+ color: var(--sigvelo-color-danger-text);
272
+ background-color: var(--sigvelo-color-danger-bg-subtle);
233
273
  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
234
- var(--sigvelo-destructive-stroke-softer);
235
- border-radius: var(--sigvelo-border-radius-sm);
274
+ var(--sigvelo-color-danger-border-subtle);
275
+ border-radius: var(--sigvelo-radius-sm);
236
276
  white-space: pre-wrap;
237
277
  word-break: break-word;
238
278
  overflow-x: auto;
239
279
  }
240
280
 
281
+ .test-results__error-message {
282
+ margin: 0 0 0.375rem;
283
+ color: var(--sigvelo-color-danger-text);
284
+ font-size: 0.75rem;
285
+ font-weight: var(--sigvelo-font-weight-semibold);
286
+ }
287
+
241
288
  @keyframes test-results-spin {
242
289
  from {
243
290
  transform: rotate(0deg);
package/dist/styles/toast.css CHANGED
@@ -16,13 +16,14 @@
16
16
  flex-direction: column;
17
17
  width: 100%;
18
18
  padding: 1rem;
19
- font-family: var(--sigvelo-font-family);
20
- background-color: var(--sigvelo-background-color);
21
- border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
22
- border-radius: var(--sigvelo-border-radius-md);
19
+ font-family: var(--sigvelo-font-sans);
20
+ background-color: var(--sigvelo-color-canvas);
21
+ border: var(--sigvelo-border-style) var(--sigvelo-border-width)
22
+ var(--sigvelo-color-neutral-border-muted);
23
+ border-radius: var(--sigvelo-radius-md);
23
24
  box-shadow:
24
- 0 10px 15px -3px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%),
25
- 0 4px 6px -4px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
25
+ 0 10px 15px -3px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
26
+ 0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
26
27
  pointer-events: auto;
27
28
  transition:
28
29
  opacity 200ms ease,
@@ -36,19 +37,19 @@
36
37
  }
37
38
 
38
39
  .toast[data-type="success"] {
39
- border-inline-start: 4px solid var(--sigvelo-success-fill-mid);
40
+ border-inline-start: 4px solid var(--sigvelo-color-success-bg);
40
41
  }
41
42
 
42
43
  .toast[data-type="error"] {
43
- border-inline-start: 4px solid var(--sigvelo-destructive-fill-mid);
44
+ border-inline-start: 4px solid var(--sigvelo-color-danger-bg);
44
45
  }
45
46
 
46
47
  .toast[data-type="warning"] {
47
- border-inline-start: 4px solid var(--sigvelo-warning-fill-mid);
48
+ border-inline-start: 4px solid var(--sigvelo-color-warning-bg);
48
49
  }
49
50
 
50
51
  .toast[data-type="info"] {
51
- border-inline-start: 4px solid var(--sigvelo-focus-color);
52
+ border-inline-start: 4px solid var(--sigvelo-color-focus);
52
53
  }
53
54
 
54
55
  .toast__content {
@@ -63,14 +64,14 @@
63
64
  font-size: 0.875rem;
64
65
  font-weight: var(--sigvelo-font-weight-bold);
65
66
  line-height: 1.25;
66
- color: var(--sigvelo-text-body);
67
+ color: var(--sigvelo-color-text);
67
68
  }
68
69
 
69
70
  .toast__description {
70
71
  margin: 0;
71
72
  font-size: 0.875rem;
72
73
  line-height: 1.5;
73
- color: var(--sigvelo-text-muted);
74
+ color: var(--sigvelo-color-text-muted);
74
75
  }
75
76
 
76
77
  .toast__action {
@@ -80,26 +81,26 @@
80
81
  padding-block: 0.375rem;
81
82
  padding-inline: 0.75rem;
82
83
  margin-block-start: 0.75rem;
83
- font-family: var(--sigvelo-font-family);
84
+ font-family: var(--sigvelo-font-sans);
84
85
  font-size: 0.75rem;
85
86
  font-weight: var(--sigvelo-font-weight-semibold);
86
- color: var(--sigvelo-primary-text-on-mid);
87
- background-color: var(--sigvelo-primary-fill-mid);
87
+ color: var(--sigvelo-color-primary-text-on-bg);
88
+ background-color: var(--sigvelo-color-primary-bg);
88
89
  border: none;
89
- border-radius: var(--sigvelo-border-radius-sm);
90
+ border-radius: var(--sigvelo-radius-sm);
90
91
  cursor: pointer;
91
92
  transition: background-color 150ms ease;
92
93
  }
93
94
 
94
95
  .toast__action:hover {
95
- background-color: color-mix(in oklab, var(--sigvelo-primary-fill-mid), transparent 10%);
96
+ background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 10%);
96
97
  }
97
98
 
98
99
  .toast__action:focus-visible {
99
100
  outline: none;
100
101
  box-shadow:
101
- 0 0 0 2px var(--sigvelo-background-color),
102
- 0 0 0 4px var(--sigvelo-focus-color);
102
+ 0 0 0 2px var(--sigvelo-color-canvas),
103
+ 0 0 0 4px var(--sigvelo-color-focus);
103
104
  }
104
105
 
105
106
  .toast__close {
@@ -113,10 +114,10 @@
113
114
  height: 1.5rem;
114
115
  padding: 0;
115
116
  font-size: 1rem;
116
- color: var(--sigvelo-text-muted);
117
+ color: var(--sigvelo-color-text-muted);
117
118
  background-color: transparent;
118
119
  border: none;
119
- border-radius: var(--sigvelo-border-radius-sm);
120
+ border-radius: var(--sigvelo-radius-sm);
120
121
  cursor: pointer;
121
122
  opacity: 0;
122
123
  transition:
@@ -129,14 +130,14 @@
129
130
  }
130
131
 
131
132
  .toast__close:hover {
132
- background-color: var(--sigvelo-neutral-fill-softer);
133
- color: var(--sigvelo-neutral-text-on-soft);
133
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
134
+ color: var(--sigvelo-color-neutral-text-on-subtle);
134
135
  }
135
136
 
136
137
  .toast__close:focus-visible {
137
138
  opacity: 1;
138
139
  outline: none;
139
140
  box-shadow:
140
- 0 0 0 2px var(--sigvelo-background-color),
141
- 0 0 0 4px var(--sigvelo-focus-color);
141
+ 0 0 0 2px var(--sigvelo-color-canvas),
142
+ 0 0 0 4px var(--sigvelo-color-focus);
142
143
  }
package/dist/styles/toggle-group.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .toggle-group {
2
2
  display: inline-flex;
3
3
  align-items: center;
4
- background-color: var(--sigvelo-neutral-fill-softer);
5
- border-radius: var(--sigvelo-border-radius-md);
4
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
5
+ border-radius: var(--sigvelo-radius-md);
6
6
  padding: 0.25rem;
7
7
  gap: 0.125rem;
8
8
  }
@@ -21,13 +21,13 @@
21
21
  align-items: center;
22
22
  justify-content: center;
23
23
  padding: 0.5rem 0.75rem;
24
- font-family: var(--sigvelo-font-family);
24
+ font-family: var(--sigvelo-font-sans);
25
25
  font-size: 0.875rem;
26
26
  font-weight: var(--sigvelo-font-weight-semibold);
27
- color: var(--sigvelo-text-muted);
27
+ color: var(--sigvelo-color-text-muted);
28
28
  background-color: transparent;
29
29
  border: none;
30
- border-radius: calc(var(--sigvelo-border-radius-md) - 2px);
30
+ border-radius: calc(var(--sigvelo-radius-md) - 2px);
31
31
  cursor: pointer;
32
32
  transition:
33
33
  background-color 150ms ease,
@@ -46,23 +46,23 @@
46
46
  }
47
47
 
48
48
  .toggle-group__item:hover:not([data-disabled]) {
49
- color: var(--sigvelo-text-body);
49
+ color: var(--sigvelo-color-text);
50
50
  }
51
51
 
52
52
  .toggle-group__item:focus-visible {
53
53
  outline: none;
54
54
  box-shadow:
55
- 0 0 0 2px var(--sigvelo-background-color),
56
- 0 0 0 4px var(--sigvelo-focus-color);
55
+ 0 0 0 2px var(--sigvelo-color-canvas),
56
+ 0 0 0 4px var(--sigvelo-color-focus);
57
57
  z-index: 1;
58
58
  }
59
59
 
60
60
  .toggle-group__item[data-pressed] {
61
- background-color: var(--sigvelo-background-color);
62
- color: var(--sigvelo-text-body);
61
+ background-color: var(--sigvelo-color-canvas);
62
+ color: var(--sigvelo-color-text);
63
63
  box-shadow:
64
- 0 1px 3px 0 color-mix(in oklab, var(--sigvelo-text-body), transparent 90%),
65
- 0 1px 2px -1px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
64
+ 0 1px 3px 0 color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
65
+ 0 1px 2px -1px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
66
66
  }
67
67
 
68
68
  .toggle-group__item[data-disabled] {