@mcp-b/react-components 0.19.0 → 0.20.1

package/dist/styles/toolbar.css

@@ -3,94 +3,33 @@
   --sigvelo-toolbar-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
   --sigvelo-toolbar-control-font-size: var(--sigvelo-control-text-sm);
 
-  display: flex;
   flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sigvelo-spacing-1);
-  padding: var(--sigvelo-spacing-1);
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-}
-
-.toolbar[data-orientation="vertical"] {
-  flex-direction: column;
 }
 
 .toolbar[data-disabled] {
   opacity: var(--sigvelo-recipe-disabled-opacity);
-  pointer-events: none;
 }
 
-.toolbar__button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: var(--sigvelo-toolbar-control-height);
-  padding-block: 0;
-  padding-inline: var(--sigvelo-toolbar-control-padding-inline);
-  font-family: inherit;
-  font-size: var(--sigvelo-toolbar-control-font-size);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text);
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+.toolbar__button:not([data-unstyled]),
+.toolbar__link:not([data-unstyled]) {
+  --sigvelo-recipe-button-height: var(--sigvelo-toolbar-control-height);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-toolbar-control-padding-inline);
+  --sigvelo-recipe-button-font-size: var(--sigvelo-toolbar-control-font-size);
 }
 
-.toolbar__button:hover {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
+.toolbar__button:not([data-unstyled]) {
+  --sigvelo-recipe-control-height: var(--sigvelo-toolbar-control-height);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-toolbar-control-padding-inline);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-toolbar-control-font-size);
 
-.toolbar__button:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
-}
-
-.toolbar__button[data-disabled] {
-  opacity: var(--sigvelo-recipe-disabled-opacity);
-  pointer-events: none;
-}
-
-.toolbar__button[data-pressed] {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.toolbar__link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: var(--sigvelo-toolbar-control-height);
-  padding-block: 0;
-  padding-inline: var(--sigvelo-toolbar-control-padding-inline);
-  font-family: inherit;
-  font-size: var(--sigvelo-toolbar-control-font-size);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text);
-  text-decoration: none;
-  border-radius: var(--sigvelo-radius-sm);
-  transition:
-    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+  border: none;
 }
 
-.toolbar__link:hover {
+.toolbar__button:not([data-unstyled])[data-pressed] {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
-.toolbar__link:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
-}
-
 .toolbar__group {
   display: flex;
   align-items: center;
@@ -102,13 +41,17 @@
 }
 
 .toolbar__separator {
+  flex-shrink: 0;
+  background-color: var(--sigvelo-color-neutral-border-muted);
+}
+
+.toolbar__separator[data-orientation="vertical"] {
   inline-size: var(--sigvelo-border-width);
   block-size: var(--sigvelo-spacing-6);
   margin-inline: var(--sigvelo-spacing-1);
-  background-color: var(--sigvelo-color-neutral-border-muted);
 }
 
-.toolbar[data-orientation="vertical"] .toolbar__separator {
+.toolbar__separator[data-orientation="horizontal"] {
   inline-size: 100%;
   block-size: var(--sigvelo-border-width);
   margin-block: var(--sigvelo-spacing-1);

package/dist/styles/tooltip.css

@@ -7,5 +7,5 @@
   max-inline-size: min(20rem, var(--available-width));
   overflow-block: auto;
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
 }

package/dist/styles/workspace-explorer.css

@@ -89,18 +89,9 @@
 }
 
 .workspace-explorer__header .app-top-bar__button {
-  inline-size: var(--sigvelo-density-compact-control-height);
-  min-inline-size: var(--sigvelo-density-compact-control-height);
-  block-size: var(--sigvelo-density-compact-control-height);
-  min-block-size: var(--sigvelo-density-compact-control-height);
   padding: var(--sigvelo-spacing-1-5);
 }
 
-.workspace-explorer__header .app-top-bar__button svg {
-  inline-size: var(--sigvelo-density-compact-control-icon-size);
-  block-size: var(--sigvelo-density-compact-control-icon-size);
-}
-
 .workspace-explorer__heading {
   display: flex;
   align-items: baseline;

package/dist/utils/structured-code.d.ts

@@ -1,4 +1,4 @@
-import { A as CodeBlockLanguage } from "../CodeBlock-gV4kZeCI.js";
+import { A as CodeBlockLanguage } from "../CodeBlock-Bbls1CnA.js";
 
 //#region src/utils/structured-code.d.ts
 interface StructuredCodeDisplay {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -57,7 +57,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.19.0"
+    "@mcp-b/design-tokens": "0.20.1"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",