@mcp-b/react-components 0.18.0 → 0.20.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 (200) hide show
  1. package/dist/{AgentChat-ClxViuUM.d.ts → AgentChat-CaQaT0LF.d.ts} +1 -1
  2. package/dist/{Button-DLGzHsjc.d.ts → Button-yRInko9u.d.ts} +0 -1
  3. package/dist/{CodeBlock-Bfp5PAg3.js → CodeBlock-Bb-IPBc_.js} +1 -1
  4. package/dist/{CodeBlock-gV4kZeCI.d.ts → CodeBlock-Bbls1CnA.d.ts} +1 -1
  5. package/dist/{Combobox-CYc37s5l.d.ts → Combobox-xEEF6fUb.d.ts} +0 -1
  6. package/dist/{FileTree-3zYtrddG.js → FileTree-CUlXfnmc.js} +1 -1
  7. package/dist/{Message-BXtmfc9Q.js → Message-rZEaaD8Q.js} +1 -1
  8. package/dist/{ModelSelector-Cqw_qrUG.js → ModelSelector-4GsCWcZV.js} +1 -1
  9. package/dist/{PromptInput-Bdh9pqlo.d.ts → PromptInput-Cq-8RoXD.d.ts} +6 -4
  10. package/dist/{Tabs-ColWK-XA.d.ts → Tabs-C49J5m0Q.d.ts} +16 -2
  11. package/dist/{ThinkChatActivity-Bzot45kX.d.ts → ThinkChatActivity-CnIJPvV5.d.ts} +1 -1
  12. package/dist/{Workspace-Jez8ffUj.d.ts → Workspace-CWtust-2.d.ts} +1 -1
  13. package/dist/{WorkspaceExplorer-B9dQWNVK.d.ts → WorkspaceExplorer-DGigwsgH.d.ts} +1 -1
  14. package/dist/{WorkspaceFile-CzyHnESE.d.ts → WorkspaceFile-D8Un_xge.d.ts} +1 -1
  15. package/dist/{WorkspaceFileView-C68Ub8S8.js → WorkspaceFileView-CEdArlOT.js} +3 -3
  16. package/dist/components/Activity.js +1 -1
  17. package/dist/components/AgentActivity.js +1 -1
  18. package/dist/components/AgentActivityPreview.js +1 -1
  19. package/dist/components/AgentAttention.d.ts +1 -1
  20. package/dist/components/AgentChat.d.ts +1 -1
  21. package/dist/components/AgentChat.js +3 -3
  22. package/dist/components/AgentChatMessageEditor.js +1 -0
  23. package/dist/components/AgentConnection.js +16 -13
  24. package/dist/components/AgentMessageParts.js +1 -1
  25. package/dist/components/AgentToolDetail.js +1 -1
  26. package/dist/components/AlertDialog.d.ts +24 -5
  27. package/dist/components/AlertDialog.js +15 -4
  28. package/dist/components/AppTopBar.js +1 -0
  29. package/dist/components/Approval.js +1 -1
  30. package/dist/components/Artifact.d.ts +1 -1
  31. package/dist/components/Artifact.js +1 -1
  32. package/dist/components/Badge.d.ts +7 -10
  33. package/dist/components/Badge.js +14 -48
  34. package/dist/components/BrowserLiveView.js +1 -1
  35. package/dist/components/BrowserReplay.js +1 -1
  36. package/dist/components/BrowserRunPanel.js +1 -1
  37. package/dist/components/Button.d.ts +1 -1
  38. package/dist/components/Button.js +1 -3
  39. package/dist/components/ChainOfThought.d.ts +1 -1
  40. package/dist/components/ChainOfThought.js +1 -1
  41. package/dist/components/ChatGptSignInScreen.js +2 -2
  42. package/dist/components/Checkbox.d.ts +2 -5
  43. package/dist/components/Checkbox.js +1 -2
  44. package/dist/components/Checkpoint.js +1 -1
  45. package/dist/components/CodeBlock.d.ts +1 -1
  46. package/dist/components/CodeBlock.js +1 -1
  47. package/dist/components/CodexModelSelector.js +34 -14
  48. package/dist/components/Combobox.d.ts +1 -1
  49. package/dist/components/Combobox.js +1 -2
  50. package/dist/components/Commit.d.ts +1 -1
  51. package/dist/components/Commit.js +2 -2
  52. package/dist/components/Context.js +8 -1
  53. package/dist/components/ContextMenu.js +1 -1
  54. package/dist/components/Conversation.d.ts +1 -1
  55. package/dist/components/Conversation.js +1 -1
  56. package/dist/components/Dialog.d.ts +1 -0
  57. package/dist/components/Dialog.js +14 -3
  58. package/dist/components/EnvironmentVariables.d.ts +1 -1
  59. package/dist/components/EnvironmentVariables.js +2 -2
  60. package/dist/components/FileTree.js +1 -1
  61. package/dist/components/IconButton.d.ts +1 -1
  62. package/dist/components/InlineCitation.js +1 -0
  63. package/dist/components/Marker.d.ts +3 -11
  64. package/dist/components/Marker.js +15 -43
  65. package/dist/components/McpConnectionRequest.js +1 -1
  66. package/dist/components/McpServerPicker.js +1 -1
  67. package/dist/components/MediaPreviewCard.js +2 -2
  68. package/dist/components/Menubar.d.ts +5 -1
  69. package/dist/components/Menubar.js +10 -3
  70. package/dist/components/Message.d.ts +1 -1
  71. package/dist/components/Message.js +1 -1
  72. package/dist/components/MessageScroller.d.ts +1 -1
  73. package/dist/components/MessageScroller.js +1 -1
  74. package/dist/components/ModelSelector.d.ts +1 -1
  75. package/dist/components/ModelSelector.js +1 -1
  76. package/dist/components/NavigationMenu.d.ts +2 -6
  77. package/dist/components/Plan.js +1 -1
  78. package/dist/components/Popover.d.ts +6 -1
  79. package/dist/components/Popover.js +12 -4
  80. package/dist/components/PricingPlanCard.js +1 -1
  81. package/dist/components/PromptInput.d.ts +1 -1
  82. package/dist/components/PromptInput.js +8 -8
  83. package/dist/components/Queue.d.ts +1 -1
  84. package/dist/components/Queue.js +1 -1
  85. package/dist/components/RadioGroup.d.ts +1 -3
  86. package/dist/components/Reasoning.js +2 -2
  87. package/dist/components/ResponsiveSidebarShell.js +2 -2
  88. package/dist/components/ScrollArea.d.ts +19 -8
  89. package/dist/components/ScrollArea.js +17 -8
  90. package/dist/components/SearchField.js +1 -1
  91. package/dist/components/Select.js +3 -3
  92. package/dist/components/Slider.d.ts +1 -3
  93. package/dist/components/Sources.js +1 -1
  94. package/dist/components/Stepper.d.ts +6 -20
  95. package/dist/components/Stepper.js +32 -130
  96. package/dist/components/SubagentRunDetails.js +1 -0
  97. package/dist/components/SubagentRunIndicator.js +1 -1
  98. package/dist/components/Tabs.d.ts +1 -1
  99. package/dist/components/Tabs.js +8 -8
  100. package/dist/components/Task.js +1 -1
  101. package/dist/components/Terminal.d.ts +2 -2
  102. package/dist/components/Terminal.js +2 -2
  103. package/dist/components/TestResults.js +1 -1
  104. package/dist/components/ThemeModeControl.js +1 -1
  105. package/dist/components/ThinkChat.d.ts +5 -5
  106. package/dist/components/ThinkChatActivity.d.ts +1 -1
  107. package/dist/components/ThinkChatToolPanels.js +1 -1
  108. package/dist/components/ThinkExecutionDetail.js +1 -1
  109. package/dist/components/ThinkExecutionStatus.js +1 -1
  110. package/dist/components/ThinkExecutionWorkbench.js +1 -1
  111. package/dist/components/ThinkFullApp.d.ts +2 -2
  112. package/dist/components/ThinkFullApp.js +2 -2
  113. package/dist/components/ThinkRoutineBrowser.js +1 -1
  114. package/dist/components/ThinkRoutineForm.js +1 -1
  115. package/dist/components/ThinkRoutineLibrary.js +2 -2
  116. package/dist/components/ThinkThreadPicker.js +1 -1
  117. package/dist/components/Toast.d.ts +1 -0
  118. package/dist/components/Toast.js +9 -2
  119. package/dist/components/Toggle.js +7 -7
  120. package/dist/components/Toolbar.d.ts +10 -2
  121. package/dist/components/Toolbar.js +17 -4
  122. package/dist/components/WebPreview.d.ts +1 -1
  123. package/dist/components/WebPreview.js +1 -1
  124. package/dist/components/Workspace.d.ts +1 -1
  125. package/dist/components/WorkspaceBrowser.d.ts +1 -1
  126. package/dist/components/WorkspaceBrowser.js +1 -1
  127. package/dist/components/WorkspaceExplorer.d.ts +3 -3
  128. package/dist/components/WorkspaceExplorer.js +2 -2
  129. package/dist/components/WorkspaceFile.d.ts +1 -1
  130. package/dist/components/WorkspaceFileView.d.ts +1 -1
  131. package/dist/components/WorkspaceFileView.js +1 -1
  132. package/dist/components/WorkspaceHeader.js +1 -1
  133. package/dist/components/icons.d.ts +2 -2
  134. package/dist/components/icons.js +2 -2
  135. package/dist/{copy-button-D7aAYA-2.d.ts → copy-button-BrvQ7z4W.d.ts} +1 -1
  136. package/dist/{copy-button-DeK6KXEV.js → copy-button-BtRwhRks.js} +1 -1
  137. package/dist/{icons-CQJ-aMnI.js → icons-DKXiSepE.js} +3 -2
  138. package/dist/{icons-CYXmvKlJ.d.ts → icons-DkRtZmvT.d.ts} +6 -1
  139. package/dist/{merge-refs-DF_7w2x_.js → merge-refs-KlanQB7A.js} +1 -1
  140. package/dist/styles/accordion.css +3 -3
  141. package/dist/styles/activity.css +4 -4
  142. package/dist/styles/agent-chat.css +1 -1
  143. package/dist/styles/agent-connection.css +3 -3
  144. package/dist/styles/agent-tool-detail.css +1 -1
  145. package/dist/styles/alert-dialog.css +1 -107
  146. package/dist/styles/approval.css +1 -1
  147. package/dist/styles/artifact.css +1 -6
  148. package/dist/styles/badge.css +2 -2
  149. package/dist/styles/base-ui-motion.css +26 -13
  150. package/dist/styles/base.css +1 -1
  151. package/dist/styles/browser-run-panel.css +2 -2
  152. package/dist/styles/button.css +2 -2
  153. package/dist/styles/chain-of-thought.css +1 -1
  154. package/dist/styles/chatgpt-sign-in-screen.css +1 -1
  155. package/dist/styles/checkbox.css +2 -2
  156. package/dist/styles/codex-model-selector.css +46 -4
  157. package/dist/styles/collapsible.css +1 -1
  158. package/dist/styles/context.css +1 -1
  159. package/dist/styles/dialog.css +1 -54
  160. package/dist/styles/field.css +6 -6
  161. package/dist/styles/inline-citation.css +2 -2
  162. package/dist/styles/label.css +3 -6
  163. package/dist/styles/marker.css +1 -1
  164. package/dist/styles/mcp-server-picker.css +1 -1
  165. package/dist/styles/media-preview-card.css +1 -1
  166. package/dist/styles/menubar.css +2 -41
  167. package/dist/styles/message.css +0 -7
  168. package/dist/styles/motion-reduction.css +2 -4
  169. package/dist/styles/navigation-menu.css +6 -1
  170. package/dist/styles/number-field.css +8 -8
  171. package/dist/styles/plan.css +2 -2
  172. package/dist/styles/popover.css +2 -38
  173. package/dist/styles/pricing-page.css +1 -1
  174. package/dist/styles/progress.css +4 -4
  175. package/dist/styles/prompt-input.css +28 -11
  176. package/dist/styles/radio.css +2 -2
  177. package/dist/styles/recipes.css +93 -18
  178. package/dist/styles/scroll-area.css +0 -18
  179. package/dist/styles/select.css +5 -8
  180. package/dist/styles/slider.css +0 -1
  181. package/dist/styles/stepper.css +4 -4
  182. package/dist/styles/streamdown.css +1 -1
  183. package/dist/styles/subagent-run.css +2 -9
  184. package/dist/styles/switch.css +2 -2
  185. package/dist/styles/tabs.css +59 -4
  186. package/dist/styles/task.css +1 -1
  187. package/dist/styles/terminal.css +1 -5
  188. package/dist/styles/theme-mode-control.css +1 -1
  189. package/dist/styles/think-thread-picker.css +1 -1
  190. package/dist/styles/toast.css +1 -30
  191. package/dist/styles/toggle.css +5 -19
  192. package/dist/styles/toolbar.css +17 -74
  193. package/dist/styles/tooltip.css +1 -1
  194. package/dist/styles/workspace-explorer.css +0 -9
  195. package/dist/utils/codex-model-catalog.d.ts +2 -8
  196. package/dist/utils/codex-model-catalog.js +2 -16
  197. package/dist/utils/mcp-server-catalog.d.ts +7 -0
  198. package/dist/utils/mcp-server-catalog.js +8 -0
  199. package/dist/utils/structured-code.d.ts +1 -1
  200. package/package.json +2 -2
@@ -12,7 +12,7 @@
12
12
  /* Fields keep their border; hairline + soft shadow for the floating-composer look */
13
13
  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
14
14
  var(--sigvelo-color-neutral-border-subtle);
15
- border-radius: calc(var(--sigvelo-radius-xl) + var(--sigvelo-spacing-1));
15
+ border-radius: calc(var(--sigvelo-radius-xl) + var(--sigvelo-spacing-2));
16
16
  box-shadow: var(--sigvelo-shadow-sm);
17
17
  font-family: inherit;
18
18
  color: var(--sigvelo-color-text);
@@ -177,6 +177,7 @@
177
177
  flex-wrap: wrap;
178
178
  gap: var(--sigvelo-spacing-1);
179
179
  inline-size: 100%;
180
+ min-block-size: var(--sigvelo-spacing-8);
180
181
  }
181
182
 
182
183
  .prompt-input__textarea {
@@ -189,7 +190,7 @@
189
190
  color: var(--sigvelo-color-text);
190
191
  font-family: inherit;
191
192
  font-size: var(--sigvelo-density-compact-control-font-size);
192
- line-height: 1.5;
193
+ line-height: var(--sigvelo-leading-normal);
193
194
  resize: none;
194
195
  overflow-block: hidden;
195
196
  }
@@ -222,6 +223,7 @@
222
223
  display: inline-flex;
223
224
  align-items: center;
224
225
  gap: var(--sigvelo-spacing-1);
226
+ min-inline-size: 0;
225
227
  }
226
228
 
227
229
  .prompt-input__tools {
@@ -229,10 +231,12 @@
229
231
  align-items: center;
230
232
  gap: var(--sigvelo-spacing-1-5);
231
233
  flex-wrap: wrap;
232
- min-block-size: var(--sigvelo-density-compact-control-height);
234
+ min-block-size: var(--sigvelo-control-height-xs);
233
235
  }
234
236
 
235
237
  .prompt-input__button {
238
+ --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-md);
239
+
236
240
  gap: var(--sigvelo-spacing-1-5);
237
241
  color: var(--sigvelo-color-text-muted);
238
242
  }
@@ -242,8 +246,8 @@
242
246
  }
243
247
 
244
248
  .prompt-input__dictation {
245
- min-inline-size: var(--sigvelo-density-compact-control-height);
246
- min-block-size: var(--sigvelo-density-compact-control-height);
249
+ min-inline-size: var(--sigvelo-control-height-xs);
250
+ min-block-size: var(--sigvelo-control-height-xs);
247
251
  }
248
252
 
249
253
  .prompt-input__dictation[data-listening] {
@@ -266,8 +270,8 @@
266
270
 
267
271
  .prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before {
268
272
  position: absolute;
269
- inline-size: var(--sigvelo-density-compact-control-height);
270
- block-size: var(--sigvelo-density-compact-control-height);
273
+ inline-size: var(--sigvelo-control-height-xs);
274
+ block-size: var(--sigvelo-control-height-xs);
271
275
  border: var(--sigvelo-border-width) solid currentColor;
272
276
  border-radius: var(--sigvelo-radius-full);
273
277
  opacity: calc(0.2 + var(--prompt-input-dictation-level) * 0.6);
@@ -383,8 +387,8 @@
383
387
  }
384
388
 
385
389
  .prompt-input__button[data-responsive-label] {
386
- inline-size: var(--sigvelo-density-compact-control-height);
387
- min-block-size: var(--sigvelo-density-compact-control-height);
390
+ inline-size: var(--sigvelo-control-height-xs);
391
+ min-block-size: var(--sigvelo-control-height-xs);
388
392
  padding-inline: 0;
389
393
  border-radius: var(--sigvelo-radius-full);
390
394
  }
@@ -396,8 +400,8 @@
396
400
  }
397
401
 
398
402
  .prompt-input__permissions-trigger {
399
- inline-size: var(--sigvelo-density-compact-control-height);
400
- min-block-size: var(--sigvelo-density-compact-control-height);
403
+ inline-size: var(--sigvelo-control-height-xs);
404
+ min-block-size: var(--sigvelo-control-height-xs);
401
405
  padding-inline: 0;
402
406
  justify-content: center;
403
407
  border-radius: var(--sigvelo-radius-full);
@@ -413,6 +417,19 @@
413
417
  }
414
418
  }
415
419
 
420
+ @container prompt-input (inline-size <= 22rem) {
421
+ .prompt-input__context-trigger {
422
+ inline-size: var(--sigvelo-control-height-xs);
423
+ padding-inline: 0;
424
+ justify-content: center;
425
+ border-radius: var(--sigvelo-radius-full);
426
+ }
427
+
428
+ .prompt-input__context-value {
429
+ display: none;
430
+ }
431
+ }
432
+
416
433
  .prompt-input__permissions-current-option:not([data-active]) {
417
434
  visibility: hidden;
418
435
  }
@@ -49,11 +49,11 @@
49
49
  background-color: var(--sigvelo-color-primary-bg);
50
50
  }
51
51
 
52
- .radio:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
52
+ .radio:is([aria-invalid="true"], [data-invalid]) {
53
53
  border-color: var(--sigvelo-color-danger-bg);
54
54
  }
55
55
 
56
- .radio:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
56
+ .radio:is([aria-invalid="true"], [data-invalid]):focus-visible {
57
57
  box-shadow: var(--sigvelo-recipe-invalid-focus-shadow);
58
58
  }
59
59
 
@@ -42,6 +42,54 @@
42
42
  --sigvelo-recipe-group-label-line-height: inherit;
43
43
  }
44
44
 
45
+ :where([data-slot="select-trigger"][data-size="sm"], .toggle--sm) {
46
+ --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
47
+ --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
48
+ --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-sm);
49
+ --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-sm);
50
+ }
51
+
52
+ :where([data-slot="select-trigger"][data-size="md"], .toggle--md) {
53
+ --sigvelo-recipe-control-height: var(--sigvelo-control-height-md);
54
+ --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-md);
55
+ --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-md);
56
+ --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-md);
57
+ }
58
+
59
+ :where(.toggle--lg) {
60
+ --sigvelo-recipe-control-height: var(--sigvelo-control-height-lg);
61
+ --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-lg);
62
+ --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-lg);
63
+ --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-lg);
64
+ }
65
+
66
+ :where([data-slot="menubar"], [data-slot="toolbar"]) {
67
+ display: flex;
68
+ align-items: center;
69
+ gap: var(--sigvelo-spacing-1);
70
+ padding: var(--sigvelo-spacing-1);
71
+ background-color: var(--sigvelo-color-canvas);
72
+ border: var(--sigvelo-border-style) var(--sigvelo-border-width)
73
+ var(--sigvelo-color-neutral-border-muted);
74
+ border-radius: var(--sigvelo-radius-md);
75
+ }
76
+
77
+ :where([data-slot="menubar"], [data-slot="toolbar"])[data-orientation="vertical"] {
78
+ flex-direction: column;
79
+ }
80
+
81
+ :where(
82
+ [data-slot="dialog-footer"],
83
+ [data-slot="alert-dialog-footer"],
84
+ [data-slot="message-edit-actions"],
85
+ [data-slot="subagent-run-actions"]
86
+ ) {
87
+ display: flex;
88
+ flex-wrap: wrap;
89
+ justify-content: flex-end;
90
+ gap: var(--sigvelo-spacing-2);
91
+ }
92
+
45
93
  /*
46
94
  * Composer add and command pickers share a slightly roomier hierarchy than
47
95
  * general-purpose menus while continuing to inherit the surface and row
@@ -136,7 +184,7 @@
136
184
  padding-inline: var(--sigvelo-recipe-control-padding-inline);
137
185
  font-family: inherit;
138
186
  font-size: var(--sigvelo-recipe-control-font-size);
139
- line-height: 1.25;
187
+ line-height: var(--sigvelo-leading-compact);
140
188
  color: var(--sigvelo-color-text);
141
189
  background-color: var(--sigvelo-recipe-field-background);
142
190
  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-recipe-field-border);
@@ -190,7 +238,7 @@
190
238
  [data-slot="select-trigger"],
191
239
  [data-slot="combobox-input"],
192
240
  [data-slot="field-control"]
193
- ):is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
241
+ ):is([aria-invalid="true"], [data-invalid]) {
194
242
  border-color: var(--sigvelo-color-danger-bg);
195
243
  }
196
244
 
@@ -200,22 +248,38 @@
200
248
  [data-slot="select-trigger"],
201
249
  [data-slot="combobox-input"],
202
250
  [data-slot="field-control"]
203
- ):is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
251
+ ):is([aria-invalid="true"], [data-invalid]):focus-visible {
204
252
  box-shadow: var(--sigvelo-recipe-invalid-focus-shadow);
205
253
  }
206
254
 
207
255
  :where(
208
- [data-slot="input"]:disabled,
256
+ [data-slot="input"][data-disabled],
209
257
  [data-slot="textarea"]:disabled,
210
258
  [data-slot="select-trigger"][data-disabled],
211
- [data-slot="field-control"]:disabled,
212
- [data-slot="number-field-input"]:disabled,
213
- [data-slot="toolbar-input"]:disabled
259
+ [data-slot="field-control"][data-disabled],
260
+ [data-slot="number-field-input"][data-disabled],
261
+ [data-slot="toolbar-input"][data-disabled]
214
262
  ) {
215
263
  cursor: not-allowed;
216
264
  opacity: var(--sigvelo-recipe-disabled-opacity);
217
265
  }
218
266
 
267
+ :where(
268
+ [data-slot="dropdown-menu-content"],
269
+ [data-slot="context-menu-content"],
270
+ [data-slot="menubar-content"],
271
+ [data-slot="select-content"],
272
+ [data-slot="combobox-content"],
273
+ [data-slot="autocomplete-content"],
274
+ [data-slot="popover-content"],
275
+ [data-slot="hover-card-content"],
276
+ [data-slot="tooltip-content"],
277
+ [data-slot="navigation-menu-popup"]
278
+ ) {
279
+ max-inline-size: var(--available-width);
280
+ max-block-size: var(--available-height);
281
+ }
282
+
219
283
  :where(
220
284
  [data-slot="dropdown-menu-content"],
221
285
  [data-slot="context-menu-content"],
@@ -231,8 +295,6 @@
231
295
  [data-slot="alert-dialog-content"],
232
296
  [data-slot="toast"]
233
297
  ) {
234
- max-inline-size: var(--available-width);
235
- max-block-size: var(--available-height);
236
298
  padding: var(--sigvelo-recipe-surface-padding);
237
299
  font-family: inherit;
238
300
  color: var(--sigvelo-color-text);
@@ -269,7 +331,7 @@
269
331
  padding-inline: var(--sigvelo-recipe-row-padding-inline);
270
332
  font-family: inherit;
271
333
  font-size: var(--sigvelo-recipe-row-font-size);
272
- line-height: 1.25;
334
+ line-height: var(--sigvelo-leading-compact);
273
335
  color: var(--sigvelo-color-text);
274
336
  text-decoration: none;
275
337
  border-radius: var(--sigvelo-recipe-row-radius);
@@ -420,7 +482,10 @@
420
482
  line-height: var(--sigvelo-leading-normal);
421
483
  }
422
484
 
423
- :where([data-slot="dropdown-menu-trigger"]:not([data-unstyled]), [data-slot="popover-trigger"]) {
485
+ :where(
486
+ [data-slot="dropdown-menu-trigger"]:not([data-unstyled]),
487
+ [data-slot="popover-trigger"]:not([data-unstyled])
488
+ ) {
424
489
  display: inline-flex;
425
490
  align-items: center;
426
491
  justify-content: center;
@@ -431,7 +496,7 @@
431
496
  font-family: inherit;
432
497
  font-size: var(--sigvelo-recipe-control-font-size);
433
498
  font-weight: var(--sigvelo-font-weight-semibold);
434
- line-height: 1.25;
499
+ line-height: var(--sigvelo-leading-compact);
435
500
  color: var(--sigvelo-color-text);
436
501
  background-color: var(--sigvelo-color-canvas);
437
502
  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -444,17 +509,17 @@
444
509
  border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
445
510
  }
446
511
 
447
- :where([data-slot="dropdown-menu-trigger"]:not([data-unstyled]), [data-slot="popover-trigger"]):is(
448
- :hover,
449
- [data-popup-open]
450
- ) {
512
+ :where(
513
+ [data-slot="dropdown-menu-trigger"]:not([data-unstyled]),
514
+ [data-slot="popover-trigger"]:not([data-unstyled])
515
+ ):is(:hover:not([data-disabled]), [data-popup-open]) {
451
516
  color: var(--sigvelo-color-neutral-text-on-subtle);
452
517
  background-color: var(--sigvelo-color-neutral-bg-subtle);
453
518
  }
454
519
 
455
520
  :where(
456
521
  [data-slot="dropdown-menu-trigger"]:not([data-unstyled]),
457
- [data-slot="popover-trigger"]
522
+ [data-slot="popover-trigger"]:not([data-unstyled])
458
523
  ):focus-visible {
459
524
  outline: none;
460
525
  box-shadow: var(--sigvelo-recipe-focus-shadow);
@@ -485,7 +550,7 @@
485
550
  [data-slot="combobox-clear"],
486
551
  [data-slot="autocomplete-trigger"],
487
552
  [data-slot="autocomplete-clear"]
488
- ):hover {
553
+ ):hover:not([data-disabled]) {
489
554
  color: var(--sigvelo-color-text);
490
555
  background-color: var(--sigvelo-color-neutral-bg-subtle);
491
556
  }
@@ -500,6 +565,16 @@
500
565
  box-shadow: var(--sigvelo-recipe-focus-shadow);
501
566
  }
502
567
 
568
+ :where(
569
+ [data-slot="combobox-trigger"],
570
+ [data-slot="combobox-clear"],
571
+ [data-slot="autocomplete-trigger"],
572
+ [data-slot="autocomplete-clear"]
573
+ )[data-disabled] {
574
+ cursor: not-allowed;
575
+ opacity: var(--sigvelo-recipe-disabled-opacity);
576
+ }
577
+
503
578
  :where([data-slot="combobox-list"], [data-slot="autocomplete-list"]) {
504
579
  max-block-size: min(22.5rem, var(--available-height));
505
580
  padding: var(--sigvelo-spacing-1);
@@ -1,13 +1,10 @@
1
1
  .scroll-area {
2
- position: relative;
3
2
  overflow: hidden;
4
3
  }
5
4
 
6
5
  .scroll-area__viewport {
7
6
  inline-size: 100%;
8
7
  block-size: 100%;
9
- overflow: auto;
10
- scrollbar-width: none;
11
8
  }
12
9
 
13
10
  .scroll-area__viewport:focus-visible {
@@ -15,12 +12,7 @@
15
12
  outline-offset: -2px;
16
13
  }
17
14
 
18
- .scroll-area__viewport::-webkit-scrollbar {
19
- display: none;
20
- }
21
-
22
15
  .scroll-area__scrollbar {
23
- position: absolute;
24
16
  display: flex;
25
17
  padding: var(--sigvelo-spacing-0-5);
26
18
  background-color: transparent;
@@ -29,8 +21,6 @@
29
21
  transition:
30
22
  opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
31
23
  background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
32
- user-select: none;
33
- touch-action: none;
34
24
  }
35
25
 
36
26
  .scroll-area__scrollbar:is([data-hovering], [data-scrolling]) {
@@ -47,21 +37,16 @@
47
37
  }
48
38
 
49
39
  .scroll-area__scrollbar[data-orientation="vertical"] {
50
- inset-block: 0;
51
- inset-inline-end: 0;
52
40
  inline-size: var(--sigvelo-spacing-2-5);
53
41
  flex-direction: column;
54
42
  }
55
43
 
56
44
  .scroll-area__scrollbar[data-orientation="horizontal"] {
57
- inset-inline: 0;
58
- inset-block-end: 0;
59
45
  block-size: var(--sigvelo-spacing-2-5);
60
46
  flex-direction: row;
61
47
  }
62
48
 
63
49
  .scroll-area__thumb {
64
- flex: 1;
65
50
  background-color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 70%);
66
51
  border-radius: var(--sigvelo-radius-full);
67
52
  transition: background-color var(--sigvelo-motion-duration-interaction)
@@ -77,8 +62,5 @@
77
62
  }
78
63
 
79
64
  .scroll-area__corner {
80
- position: absolute;
81
- inset-inline-end: 0;
82
- inset-block-end: 0;
83
65
  background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 50%);
84
66
  }
@@ -5,7 +5,7 @@
5
5
  font-family: inherit;
6
6
  font-size: var(--sigvelo-text-sm);
7
7
  font-weight: var(--sigvelo-font-weight-semibold);
8
- line-height: 1;
8
+ line-height: var(--sigvelo-leading-none);
9
9
  }
10
10
 
11
11
  .select__trigger {
@@ -39,13 +39,6 @@
39
39
  block-size: var(--sigvelo-recipe-control-icon-size);
40
40
  }
41
41
 
42
- .select__trigger--sm {
43
- --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
44
- --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
45
- --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-sm);
46
- --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-sm);
47
- }
48
-
49
42
  .select__popup {
50
43
  --sigvelo-recipe-surface-padding: 0;
51
44
  --sigvelo-recipe-popup-min-inline-size: 8rem;
@@ -55,7 +48,11 @@
55
48
  }
56
49
 
57
50
  .select__list {
51
+ position: relative;
52
+ max-block-size: var(--available-height);
58
53
  padding: var(--sigvelo-spacing-1);
54
+ overflow-y: auto;
55
+ scroll-padding-block: var(--sigvelo-spacing-6);
59
56
  }
60
57
 
61
58
  .select__option {
@@ -46,7 +46,6 @@
46
46
  }
47
47
 
48
48
  .slider__track {
49
- position: relative;
50
49
  display: flex;
51
50
  align-items: center;
52
51
  inline-size: 100%;
@@ -70,7 +70,7 @@
70
70
  box-shadow: var(--sigvelo-recipe-focus-shadow);
71
71
  }
72
72
 
73
- .stepper__trigger:disabled {
73
+ .stepper__trigger[data-disabled] {
74
74
  cursor: not-allowed;
75
75
  }
76
76
 
@@ -85,7 +85,7 @@
85
85
  color: var(--sigvelo-color-text-muted);
86
86
  font-size: var(--sigvelo-text-xs);
87
87
  font-weight: var(--sigvelo-font-weight-bold);
88
- line-height: 1;
88
+ line-height: var(--sigvelo-leading-none);
89
89
  font-variant-numeric: tabular-nums;
90
90
  background-color: var(--sigvelo-color-neutral-bg-subtle);
91
91
  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -159,7 +159,7 @@
159
159
  color: var(--sigvelo-color-text);
160
160
  font-size: var(--sigvelo-text-sm);
161
161
  font-weight: var(--sigvelo-font-weight-semibold);
162
- line-height: 1.2;
162
+ line-height: var(--sigvelo-leading-tight);
163
163
  }
164
164
 
165
165
  .stepper__title[data-state="inactive"] {
@@ -202,7 +202,7 @@
202
202
  border-radius: var(--sigvelo-radius-md);
203
203
  }
204
204
 
205
- .stepper__content--hidden {
205
+ .stepper__content[data-hidden] {
206
206
  display: none;
207
207
  }
208
208
 
@@ -64,7 +64,7 @@ button[data-streamdown="link"] {
64
64
  margin-block: var(--sigvelo-spacing-3) var(--sigvelo-spacing-1-5);
65
65
  font-size: 1.125em;
66
66
  font-weight: var(--sigvelo-font-weight-semibold);
67
- line-height: 1.25;
67
+ line-height: var(--sigvelo-leading-compact);
68
68
  }
69
69
 
70
70
  [data-streamdown="heading-1"],
@@ -88,7 +88,7 @@
88
88
  gap: var(--sigvelo-spacing-3);
89
89
  color: var(--sigvelo-color-text-muted);
90
90
  font-size: var(--sigvelo-text-xs);
91
- line-height: 1.5;
91
+ line-height: var(--sigvelo-leading-normal);
92
92
  }
93
93
 
94
94
  .subagent-run__progress-label > :first-child {
@@ -115,7 +115,7 @@
115
115
  gap: var(--sigvelo-spacing-2);
116
116
  color: var(--sigvelo-color-text-muted);
117
117
  font-size: var(--sigvelo-text-compact);
118
- line-height: 1.5;
118
+ line-height: var(--sigvelo-leading-normal);
119
119
  }
120
120
 
121
121
  .subagent-run__milestone::before {
@@ -129,13 +129,6 @@
129
129
  background-color: var(--sigvelo-color-neutral-bg-subtle);
130
130
  }
131
131
 
132
- .subagent-run__actions {
133
- display: flex;
134
- flex-wrap: wrap;
135
- gap: var(--sigvelo-spacing-2);
136
- justify-content: flex-end;
137
- }
138
-
139
132
  @media (forced-colors: active) {
140
133
  .subagent-run__milestone::before {
141
134
  border-color: CanvasText;
@@ -40,11 +40,11 @@
40
40
  background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 10%);
41
41
  }
42
42
 
43
- .switch:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
43
+ .switch:is([aria-invalid="true"], [data-invalid]) {
44
44
  box-shadow: inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-danger-bg);
45
45
  }
46
46
 
47
- .switch:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
47
+ .switch:is([aria-invalid="true"], [data-invalid]):focus-visible {
48
48
  box-shadow:
49
49
  inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-danger-bg),
50
50
  var(--sigvelo-recipe-invalid-focus-shadow);
@@ -3,6 +3,10 @@
3
3
  flex-direction: column;
4
4
  }
5
5
 
6
+ .tabs[data-orientation="vertical"] {
7
+ flex-direction: row;
8
+ }
9
+
6
10
  .tabs--bordered {
7
11
  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
8
12
  var(--sigvelo-color-neutral-border-muted);
@@ -20,22 +24,43 @@
20
24
  padding-inline: var(--sigvelo-spacing-1);
21
25
  }
22
26
 
27
+ .tabs__list[data-orientation="vertical"] {
28
+ flex-direction: column;
29
+ flex-wrap: nowrap;
30
+ align-items: stretch;
31
+ border-block-end: none;
32
+ border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
33
+ var(--sigvelo-color-neutral-border-muted);
34
+ padding-block: var(--sigvelo-spacing-1);
35
+ padding-inline: 0;
36
+ }
37
+
23
38
  .tabs__list--line {
24
39
  gap: var(--sigvelo-spacing-2);
25
40
  border-block-end-color: transparent;
26
41
  padding-inline: 0;
27
42
  }
28
43
 
44
+ .tabs__list--line[data-orientation="vertical"] {
45
+ border-inline-end-color: transparent;
46
+ padding-block: 0;
47
+ }
48
+
29
49
  .tabs--bordered .tabs__list {
30
50
  background-color: var(--sigvelo-color-neutral-bg-subtle);
31
51
  border-block-end: none;
32
52
  padding: var(--sigvelo-spacing-1);
33
53
  }
34
54
 
55
+ .tabs--bordered .tabs__list[data-orientation="vertical"] {
56
+ border-inline-end: none;
57
+ }
58
+
35
59
  .tabs__tab {
36
60
  display: inline-flex;
37
61
  align-items: center;
38
62
  justify-content: center;
63
+ min-inline-size: 0;
39
64
  min-block-size: var(--sigvelo-recipe-control-height);
40
65
  padding-block: 0;
41
66
  padding-inline: var(--sigvelo-recipe-control-padding-inline);
@@ -54,6 +79,14 @@
54
79
  background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
55
80
  }
56
81
 
82
+ .tabs__tab[data-orientation="vertical"] {
83
+ justify-content: flex-start;
84
+ border-block-end: none;
85
+ border-inline-end: calc(var(--sigvelo-border-width) * 2) solid transparent;
86
+ margin-block-end: 0;
87
+ margin-inline-end: calc(var(--sigvelo-border-width) * -1);
88
+ }
89
+
57
90
  .tabs__tab:hover:not([data-disabled]) {
58
91
  color: var(--sigvelo-color-text);
59
92
  }
@@ -68,6 +101,10 @@
68
101
  border-block-end-color: var(--sigvelo-color-primary-bg);
69
102
  }
70
103
 
104
+ .tabs__tab[data-orientation="vertical"][data-active] {
105
+ border-inline-end-color: var(--sigvelo-color-primary-bg);
106
+ }
107
+
71
108
  .tabs__indicator {
72
109
  position: absolute;
73
110
  z-index: 1;
@@ -83,10 +120,27 @@
83
120
  translate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
84
121
  }
85
122
 
123
+ .tabs__indicator[data-orientation="vertical"] {
124
+ inset-block-start: 0;
125
+ inset-block-end: auto;
126
+ inset-inline-start: auto;
127
+ inset-inline-end: 0;
128
+ inline-size: calc(var(--sigvelo-border-width) * 2);
129
+ block-size: var(--active-tab-height);
130
+ translate: 0 var(--active-tab-top);
131
+ transition:
132
+ block-size var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change),
133
+ translate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
134
+ }
135
+
86
136
  .tabs__list:has(> .tabs__indicator) .tabs__tab[data-active] {
87
137
  border-block-end-color: transparent;
88
138
  }
89
139
 
140
+ .tabs__list:has(> .tabs__indicator) .tabs__tab[data-orientation="vertical"][data-active] {
141
+ border-inline-end-color: transparent;
142
+ }
143
+
90
144
  .tabs__tab[data-disabled] {
91
145
  opacity: var(--sigvelo-recipe-disabled-opacity);
92
146
  cursor: not-allowed;
@@ -98,6 +152,11 @@
98
152
  margin-block-end: 0;
99
153
  }
100
154
 
155
+ .tabs--bordered .tabs__tab[data-orientation="vertical"] {
156
+ border-inline-end: none;
157
+ margin-inline-end: 0;
158
+ }
159
+
101
160
  .tabs--bordered .tabs__tab[data-active] {
102
161
  background-color: var(--sigvelo-color-canvas);
103
162
  color: var(--sigvelo-color-text);
@@ -158,7 +217,3 @@
158
217
  :root[data-motion="reduce"] .tabs__indicator {
159
218
  transition: none;
160
219
  }
161
-
162
- .tabs__tab {
163
- min-inline-size: 0;
164
- }
@@ -72,7 +72,7 @@
72
72
  position: relative;
73
73
  font-size: var(--sigvelo-text-compact);
74
74
  color: var(--sigvelo-color-text);
75
- line-height: 1.6;
75
+ line-height: var(--sigvelo-leading-body);
76
76
  }
77
77
 
78
78
  .task__item::before {
@@ -29,10 +29,6 @@
29
29
  color: var(--sigvelo-color-neutral-300);
30
30
  }
31
31
 
32
- .terminal__status {
33
- /* Badge handles styling */
34
- }
35
-
36
32
  .terminal__actions {
37
33
  display: inline-flex;
38
34
  align-items: center;
@@ -63,7 +59,7 @@
63
59
  margin: 0;
64
60
  font-family: var(--sigvelo-font-mono);
65
61
  font-size: var(--sigvelo-text-xs);
66
- line-height: 1.6;
62
+ line-height: var(--sigvelo-leading-body);
67
63
  color: var(--sigvelo-color-neutral-100);
68
64
  white-space: pre-wrap;
69
65
  word-break: break-word;
@@ -25,7 +25,7 @@
25
25
  font-family: inherit;
26
26
  font-size: var(--sigvelo-text-sm);
27
27
  font-weight: var(--sigvelo-font-weight-semibold);
28
- line-height: 1;
28
+ line-height: var(--sigvelo-leading-none);
29
29
  transition:
30
30
  color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
31
31
  background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),