@mcp-b/react-components 0.16.0 → 0.16.1

package/dist/components/ThinkFullApp.js

@@ -19,7 +19,7 @@ const workbenchPanelDefaultWidth = 340;
 const workbenchPanelMinWidth = 300;
 const workbenchPanelMaxWidth = 600;
 const workbenchPanelKeyboardStep = 24;
-function WorkspacePanel({ config }) {
+function WorkspacePanel({ config, workbenchNavigation }) {
 	return /* @__PURE__ */ jsx(WorkspaceExplorer, {
 		className: "think-full-app__workbench",
 		workspace: useWorkspace({
@@ -29,7 +29,7 @@ function WorkspacePanel({ config }) {
 			maxInlineAssetBytes: config.maxInlineAssetBytes
 		}),
 		navigation: config.navigation,
-		leading: config.leading,
+		leading: workbenchNavigation || config.leading ? /* @__PURE__ */ jsxs(Fragment, { children: [workbenchNavigation, config.leading] }) : void 0,
 		actions: config.actions
 	});
 }
@@ -103,6 +103,11 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 	const activeMobileView = hasWorkbench ? requestedMobileView : "chat";
 	const showWorkbenchViewSwitch = availableWorkbenchPanels.length > 1;
 	const workbenchViews = availableWorkbenchPanels;
+	const canEmbedWorkbenchNavigation = activeWorkbenchView === "files" || activeWorkbenchView === "execution";
+	const hasApplicationChrome = Boolean(appBarActions || appBarLeading || appBarTitle || threadSidebar);
+	const shouldRenderInlineAppBar = !threadSidebar && (hasApplicationChrome || hasWorkbench);
+	const hasCompactAppBar = shouldRenderInlineAppBar && !hasApplicationChrome && canEmbedWorkbenchNavigation;
+	const hasAppBarRow = shouldRenderInlineAppBar && !hasCompactAppBar;
 	const setWorkbenchView = React.useCallback((next) => {
 		if (workbenchView === void 0) setInnerWorkbenchView(next);
 		onWorkbenchViewChange?.(next);
@@ -111,10 +116,20 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 		if (mobileView === void 0) setInnerMobileView(next);
 		onMobileViewChange?.(next);
 	}, [mobileView, onMobileViewChange]);
+	const workbenchNavigation = showWorkbenchViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+		className: "think-full-app__embedded-view-switch",
+		views: workbenchViews,
+		value: activeWorkbenchView,
+		onValueChange: (next) => {
+			if (next) setWorkbenchView(next);
+		},
+		"aria-label": "Workbench views"
+	}) : null;
 	const renderAppTopBar = (sidebarControls) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
 		className: "think-full-app__app-bar",
 		"aria-label": "Workbench controls",
 		"data-mobile-view": activeMobileView,
+		"data-compact-only": hasCompactAppBar ? "true" : void 0,
 		children: [
 			/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [sidebarControls?.sidebarToggle, appBarLeading] }),
 			appBarTitle || sidebarControls ? /* @__PURE__ */ jsxs(AppTopBar.Title, { children: [appBarTitle ? /* @__PURE__ */ jsx("span", {
@@ -140,7 +155,7 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 			}) : null] }) : null,
 			/* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [
 				appBarActions,
-				showWorkbenchViewSwitch && activeWorkbenchView ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+				showWorkbenchViewSwitch && activeWorkbenchView && !canEmbedWorkbenchNavigation ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
 					className: "think-full-app__workbench-view-switch",
 					views: workbenchViews,
 					value: activeWorkbenchView,
@@ -178,12 +193,13 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 		keyboardStep: workbenchPanelKeyboardStep,
 		"data-has-thread-sidebar": threadSidebar ? "true" : "false",
 		"data-has-workbench": hasWorkbench ? "true" : "false",
-		"data-has-workbench-topbar": threadSidebar ? "false" : "true",
+		"data-has-workbench-topbar": hasAppBarRow ? "true" : "false",
+		"data-has-compact-app-bar": hasCompactAppBar ? "true" : "false",
 		"data-mobile-view": activeMobileView,
 		style,
 		...props,
 		children: [
-			!threadSidebar ? renderAppTopBar() : null,
+			shouldRenderInlineAppBar ? renderAppTopBar() : null,
 			/* @__PURE__ */ jsx("section", {
 				className: "think-full-app__chat-surface",
 				"data-workspace-restoration-scope": "chat",
@@ -219,7 +235,16 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 					children: /* @__PURE__ */ jsx("div", {
 						className: "think-full-app__workbench-panel",
 						"data-view": activeWorkbenchView,
-						children: activePanel.render(panelContext)
+						children: activeWorkbenchView === "files" && workspace ? /* @__PURE__ */ jsx(WorkspacePanel, {
+							config: workspace,
+							workbenchNavigation
+						}) : activeWorkbenchView === "execution" ? /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
+							source: agent.stub,
+							title: "Execution",
+							backButton: workbenchNavigation,
+							selectedRun: selectedExecutionRun,
+							onSelectedRunChange: onSelectedExecutionRunChange
+						}) : activePanel.render(panelContext)
 					})
 				})
 			})] }) : null

package/dist/styles/agent-activity-preview.css

@@ -2,13 +2,11 @@
   position: relative;
   width: min(28rem, 100%);
   min-width: 0;
-  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
-  border-radius: calc(var(--sigvelo-radius-lg) + var(--sigvelo-spacing-1));
+  padding: var(--sigvelo-spacing-2);
+  border-radius: var(--sigvelo-radius-lg);
   color: var(--sigvelo-color-text);
   background: color-mix(in oklab, var(--sigvelo-color-surface), transparent 3%);
-  box-shadow:
-    0 1.25rem 3rem color-mix(in oklab, var(--sigvelo-color-text), transparent 88%),
-    0 0.25rem 0.75rem color-mix(in oklab, var(--sigvelo-color-text), transparent 94%);
+  box-shadow: var(--sigvelo-shadow-xs);
 }
 
 .agent-activity-preview__badge {
@@ -99,8 +97,8 @@
   display: block;
   width: 100%;
   min-width: 0;
-  min-height: 2.5rem;
-  padding: var(--sigvelo-spacing-2);
+  min-height: var(--sigvelo-control-height-sm);
+  padding: var(--sigvelo-spacing-1-5);
   border: 0;
   border-radius: var(--sigvelo-radius-md);
   color: inherit;
@@ -120,9 +118,9 @@
 .agent-activity-preview__file-action {
   display: grid;
   place-items: center;
-  min-width: 2.5rem;
-  min-height: 2.5rem;
-  padding: var(--sigvelo-spacing-2);
+  min-width: var(--sigvelo-control-height-sm);
+  min-height: var(--sigvelo-control-height-sm);
+  padding: var(--sigvelo-spacing-1-5);
   border: 0;
   border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text-muted);
@@ -205,7 +203,7 @@
 
   .agent-activity-preview__row,
   .agent-activity-preview__file-action {
-    min-height: 2.75rem;
+    min-height: var(--sigvelo-control-height-xl);
   }
 }
 

package/dist/styles/agent-attention.css

@@ -2,13 +2,13 @@
   display: grid;
   width: min(22rem, 100%);
   min-width: 0;
-  gap: var(--sigvelo-spacing-2);
-  padding: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-spacing-1-5);
+  padding: var(--sigvelo-spacing-1-5);
   border: 1px solid var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-lg);
+  border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text);
   background: var(--sigvelo-color-surface);
-  box-shadow: var(--sigvelo-shadow-md);
+  box-shadow: var(--sigvelo-shadow-xs);
 }
 
 .agent-attention[data-tone="warning"] {
@@ -20,26 +20,26 @@
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-spacing-1-5);
   min-width: 0;
 }
 
 .agent-attention__trigger.button {
   width: 100%;
   height: auto;
-  min-height: 2.5rem;
+  min-height: var(--sigvelo-control-height-sm);
   justify-content: stretch;
-  padding: var(--sigvelo-spacing-2);
-  margin: calc(-1 * var(--sigvelo-spacing-2));
+  padding: var(--sigvelo-spacing-1-5);
+  margin: calc(-1 * var(--sigvelo-spacing-1-5));
   text-align: start;
 }
 
 .agent-attention__icon {
   display: grid;
   place-items: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--sigvelo-radius-md);
+  width: var(--sigvelo-control-height-xs);
+  height: var(--sigvelo-control-height-xs);
+  border-radius: var(--sigvelo-radius-sm);
   color: var(--sigvelo-color-text-muted);
   background: var(--sigvelo-color-neutral-bg-subtle);
 }
@@ -80,14 +80,20 @@
 .agent-attention__body {
   min-width: 0;
   overflow: hidden;
-  border-radius: var(--sigvelo-radius-md);
+  border-radius: var(--sigvelo-radius-sm);
 }
 
 .agent-attention__actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: var(--sigvelo-spacing-1-5);
+  gap: var(--sigvelo-spacing-1);
+}
+
+@media (any-pointer: coarse) {
+  .agent-attention__trigger.button {
+    min-height: var(--sigvelo-control-height-xl);
+  }
 }
 
 .agent-attention[data-busy] .agent-attention__title {

package/dist/styles/agent-connection.css

@@ -1,13 +1,13 @@
 .agent-connect {
   display: grid;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
   min-inline-size: 0;
   color: var(--sigvelo-color-text);
 }
 
 .agent-connect__header {
   display: flex;
-  gap: 0.65rem;
+  gap: var(--sigvelo-spacing-2);
   align-items: flex-start;
   min-inline-size: 0;
 }
@@ -16,8 +16,8 @@
   display: grid;
   flex: 0 0 auto;
   place-items: center;
-  inline-size: 2rem;
-  block-size: 2rem;
+  inline-size: var(--sigvelo-control-height-xs);
+  block-size: var(--sigvelo-control-height-xs);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-primary-border-muted);
   border-radius: var(--sigvelo-radius-md);
@@ -34,8 +34,8 @@
 .agent-connect__title-group :where(h2, h3) {
   margin: 0;
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-base);
-  font-weight: var(--sigvelo-font-weight-bold);
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.2;
   letter-spacing: 0;
 }
@@ -141,14 +141,14 @@
 
 .agent-connect__mcp-form {
   display: grid;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
   min-inline-size: 0;
 }
 
 .agent-connect__mcp-form-actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 .agent-connect__mcp-form-status {
@@ -168,7 +168,7 @@
 .agent-connect-popover {
   inline-size: min(36rem, calc(100dvi - 1.5rem));
   max-inline-size: min(36rem, calc(100dvi - 1.5rem));
-  padding: 0.875rem;
+  padding: var(--sigvelo-spacing-3);
 }
 
 @media (width <= 40rem) {

package/dist/styles/alert-dialog.css

@@ -29,7 +29,7 @@
 }
 
 .alert-dialog__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-6);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
 
   position: fixed;
   inset-block-start: 50%;
@@ -67,37 +67,37 @@
 }
 
 .alert-dialog__title {
-  font-size: var(--sigvelo-text-lg);
-  font-weight: var(--sigvelo-font-weight-bold);
+  font-size: var(--sigvelo-text-base);
+  font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
-  margin: 0 0 0.5rem;
+  margin: 0 0 var(--sigvelo-spacing-1);
   text-wrap: balance;
 }
 
 .alert-dialog__description {
-  font-size: var(--sigvelo-text-sm);
-  line-height: 1.5;
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-text-muted);
-  margin: 0 0 1.5rem;
+  margin: 0 0 var(--sigvelo-spacing-4);
   text-wrap: pretty;
 }
 
 .alert-dialog__header {
   display: grid;
-  gap: 0.5rem;
-  margin-block-end: 1rem;
+  gap: var(--sigvelo-spacing-1);
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .alert-dialog__footer {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
 }
 
 .alert-dialog__media {
-  margin-block-end: 1rem;
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .alert-dialog__action {

package/dist/styles/app-top-bar.css

@@ -1,8 +1,10 @@
 .app-top-bar {
+  --app-top-bar-block-size: calc(var(--sigvelo-control-height-xs) + var(--sigvelo-spacing-2));
+
   box-sizing: border-box;
   inline-size: 100%;
   min-inline-size: 0;
-  min-block-size: calc(2.75rem + env(safe-area-inset-top, 0px));
+  min-block-size: calc(var(--app-top-bar-block-size) + env(safe-area-inset-top, 0px));
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
@@ -51,10 +53,10 @@
 .app-top-bar__button {
   box-sizing: border-box;
   flex: 0 0 auto;
-  inline-size: 2rem;
-  min-inline-size: 2rem;
-  block-size: 2rem;
-  min-block-size: 2rem;
+  inline-size: var(--sigvelo-control-height-xs);
+  min-inline-size: var(--sigvelo-control-height-xs);
+  block-size: var(--sigvelo-control-height-xs);
+  min-block-size: var(--sigvelo-control-height-xs);
   padding: var(--sigvelo-spacing-1);
   color: var(--sigvelo-color-text-muted);
   line-height: 0;
@@ -62,8 +64,8 @@
 
 .app-top-bar__button svg {
   display: block;
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-text-sm);
+  block-size: var(--sigvelo-text-sm);
 }
 
 .app-top-bar__button:hover:not([data-disabled]),

package/dist/styles/card.css

@@ -3,7 +3,7 @@
   color: var(--sigvelo-color-text);
   /* Shadow-led elevation: no perimeter border */
   border-radius: var(--sigvelo-radius-lg);
-  padding: var(--sigvelo-spacing-6);
+  padding: var(--sigvelo-spacing-4);
   container-type: inline-size;
   box-shadow: var(--sigvelo-shadow-sm);
   transition:
@@ -43,7 +43,7 @@
   grid-template-rows: auto auto;
   grid-template-columns: minmax(0, 1fr);
   align-items: start;
-  margin-block-end: 1rem;
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .card__header:has(.card__action) {
@@ -58,24 +58,24 @@
 }
 
 .card__title {
-  font-size: var(--sigvelo-text-lg);
+  font-size: var(--sigvelo-text-base);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
 }
 
 .card__description {
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
 }
 
 .card__content {
   display: grid;
-  gap: 1rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .card__footer {
   display: flex;
-  margin-block-start: 1rem;
+  margin-block-start: var(--sigvelo-spacing-3);
 }
 
 .card--hover {
@@ -83,8 +83,8 @@
 }
 
 .card--hover:hover {
-  box-shadow: var(--sigvelo-shadow-md);
-  transform: translateY(-2px);
+  box-shadow: var(--sigvelo-shadow-sm);
+  transform: translateY(-1px);
 }
 
 .card--hover:focus-visible {

package/dist/styles/chain-of-thought.css

@@ -9,10 +9,10 @@
 .chain-of-thought__steps {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-2-5);
+  gap: var(--sigvelo-spacing-1-5);
   margin: 0;
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-2);
   margin-inline-start: 1rem;
   border-inline-start: var(--sigvelo-border-style) 2px var(--sigvelo-color-neutral-border-subtle);
   list-style: none;
@@ -21,7 +21,7 @@
 .chain-of-thought__step {
   display: flex;
   align-items: flex-start;
-  gap: var(--sigvelo-spacing-2-5);
+  gap: var(--sigvelo-spacing-1-5);
   position: relative;
 }
 
@@ -151,7 +151,7 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  padding: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-2);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);

package/dist/styles/codex-model-selector.css

@@ -95,7 +95,7 @@
 
 .codex-model-selector__menu {
   --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-row-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-text-compact);
   --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
 
   inline-size: min(18rem, calc(100vi - var(--sigvelo-spacing-8)));
@@ -104,10 +104,10 @@
 
 .codex-model-selector__submenu {
   --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-row-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-text-compact);
 
   inline-size: min(18rem, calc(100vi - var(--sigvelo-spacing-8)));
-  padding: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-1);
 }
 
 .codex-model-selector__submenu--model {

package/dist/styles/combobox.css

@@ -14,7 +14,8 @@
 }
 
 .combobox__item[data-selected] {
-  font-weight: var(--sigvelo-font-weight-semibold);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .combobox__item-indicator {

package/dist/styles/context-menu.css

@@ -42,5 +42,5 @@
 }
 
 .context-menu__label {
-  padding-block: 0.5rem 0.25rem;
+  padding-block: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-0-5);
 }

package/dist/styles/dialog.css

@@ -10,7 +10,7 @@
 }
 
 .dialog__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-6);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
 
   position: fixed;
   inset-block-start: 50%;
@@ -57,32 +57,32 @@
 }
 
 .dialog__title {
-  font-size: var(--sigvelo-text-lg);
-  font-weight: var(--sigvelo-font-weight-bold);
+  font-size: var(--sigvelo-text-base);
+  font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
-  margin-block-end: 0.5rem;
+  margin-block-end: var(--sigvelo-spacing-1);
 }
 
 .dialog__description {
-  font-size: var(--sigvelo-text-sm);
-  line-height: 1.5;
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-text-muted);
-  margin-block-end: 1rem;
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .dialog__header {
   display: grid;
-  gap: 0.5rem;
-  margin-block-end: 1rem;
+  gap: var(--sigvelo-spacing-1);
+  margin-block-end: var(--sigvelo-spacing-3);
 }
 
 .dialog__footer {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: var(--sigvelo-spacing-3);
-  margin-block-start: 1.5rem;
+  gap: var(--sigvelo-spacing-2);
+  margin-block-start: var(--sigvelo-spacing-4);
 }
 
 .dialog__close {

package/dist/styles/field.css

@@ -2,7 +2,7 @@
   display: flex;
   width: 100%;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-1-5);
 }
 
 .field:is([data-invalid="true"], [data-invalid=""]) .field__label,
@@ -53,9 +53,9 @@
 .field__label {
   display: flex;
   width: fit-content;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-1-5);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1;
   color: var(--sigvelo-color-text);
@@ -70,7 +70,7 @@
 }
 
 .field__label:has(> [data-slot="field"]) > [data-slot="field"] {
-  padding: 1rem;
+  padding: var(--sigvelo-spacing-3);
 }
 
 .field__label:has(> [data-slot="field"]):has([data-state="checked"], [data-checked]) {
@@ -119,7 +119,7 @@
 }
 
 .field-set {
-  gap: 1.5rem;
+  gap: var(--sigvelo-spacing-4);
   min-inline-size: 0;
   margin: 0;
   padding: 0;
@@ -127,21 +127,21 @@
 }
 
 .field-set:has(> [data-slot="checkbox-group"], > [data-slot="radio-group"]) {
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
 }
 
 .field-group {
   container-type: inline-size;
   width: 100%;
-  gap: 1.75rem;
+  gap: var(--sigvelo-spacing-4);
 }
 
 .field-group > .field-group {
-  gap: 1rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .field-group:is([data-slot="checkbox-group"], [data-slot="radio-group"]) {
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
 }
 
 .field-content {
@@ -158,20 +158,20 @@
 }
 
 .field-legend {
-  margin-block-end: var(--sigvelo-spacing-3);
-  font-size: var(--sigvelo-text-base);
+  margin-block-end: var(--sigvelo-spacing-2);
+  font-size: var(--sigvelo-text-sm);
 }
 
 .field-legend[data-variant="label"] {
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
 }
 
 .field-title {
   display: flex;
   width: fit-content;
   align-items: center;
-  gap: 0.5rem;
-  font-size: var(--sigvelo-text-sm);
+  gap: var(--sigvelo-spacing-1-5);
+  font-size: var(--sigvelo-text-compact);
 }
 
 .field-separator {

package/dist/styles/fieldset.css

@@ -1,8 +1,8 @@
 .fieldset {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-4);
   margin: 0;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -18,13 +18,13 @@
   padding: 0 0.5rem;
   margin: 0 -0.5rem;
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-bold);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
 }
 
 .fieldset__description {
   margin: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
 }