@mcp-b/react-components 0.19.0 → 0.20.0

package/dist/styles/switch.css

@@ -40,11 +40,11 @@
   background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 10%);
 }
 
-.switch:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
+.switch:is([aria-invalid="true"], [data-invalid]) {
   box-shadow: inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-danger-bg);
 }
 
-.switch:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
+.switch:is([aria-invalid="true"], [data-invalid]):focus-visible {
   box-shadow:
     inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-danger-bg),
     var(--sigvelo-recipe-invalid-focus-shadow);

package/dist/styles/tabs.css

@@ -3,6 +3,10 @@
   flex-direction: column;
 }
 
+.tabs[data-orientation="vertical"] {
+  flex-direction: row;
+}
+
 .tabs--bordered {
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -20,22 +24,43 @@
   padding-inline: var(--sigvelo-spacing-1);
 }
 
+.tabs__list[data-orientation="vertical"] {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  border-block-end: none;
+  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: 0;
+}
+
 .tabs__list--line {
   gap: var(--sigvelo-spacing-2);
   border-block-end-color: transparent;
   padding-inline: 0;
 }
 
+.tabs__list--line[data-orientation="vertical"] {
+  border-inline-end-color: transparent;
+  padding-block: 0;
+}
+
 .tabs--bordered .tabs__list {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-block-end: none;
   padding: var(--sigvelo-spacing-1);
 }
 
+.tabs--bordered .tabs__list[data-orientation="vertical"] {
+  border-inline-end: none;
+}
+
 .tabs__tab {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  min-inline-size: 0;
   min-block-size: var(--sigvelo-recipe-control-height);
   padding-block: 0;
   padding-inline: var(--sigvelo-recipe-control-padding-inline);
@@ -54,6 +79,14 @@
     background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
+.tabs__tab[data-orientation="vertical"] {
+  justify-content: flex-start;
+  border-block-end: none;
+  border-inline-end: calc(var(--sigvelo-border-width) * 2) solid transparent;
+  margin-block-end: 0;
+  margin-inline-end: calc(var(--sigvelo-border-width) * -1);
+}
+
 .tabs__tab:hover:not([data-disabled]) {
   color: var(--sigvelo-color-text);
 }
@@ -68,6 +101,10 @@
   border-block-end-color: var(--sigvelo-color-primary-bg);
 }
 
+.tabs__tab[data-orientation="vertical"][data-active] {
+  border-inline-end-color: var(--sigvelo-color-primary-bg);
+}
+
 .tabs__indicator {
   position: absolute;
   z-index: 1;
@@ -83,10 +120,27 @@
     translate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
 }
 
+.tabs__indicator[data-orientation="vertical"] {
+  inset-block-start: 0;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+  inline-size: calc(var(--sigvelo-border-width) * 2);
+  block-size: var(--active-tab-height);
+  translate: 0 var(--active-tab-top);
+  transition:
+    block-size var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change),
+    translate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
+}
+
 .tabs__list:has(> .tabs__indicator) .tabs__tab[data-active] {
   border-block-end-color: transparent;
 }
 
+.tabs__list:has(> .tabs__indicator) .tabs__tab[data-orientation="vertical"][data-active] {
+  border-inline-end-color: transparent;
+}
+
 .tabs__tab[data-disabled] {
   opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
@@ -98,6 +152,11 @@
   margin-block-end: 0;
 }
 
+.tabs--bordered .tabs__tab[data-orientation="vertical"] {
+  border-inline-end: none;
+  margin-inline-end: 0;
+}
+
 .tabs--bordered .tabs__tab[data-active] {
   background-color: var(--sigvelo-color-canvas);
   color: var(--sigvelo-color-text);
@@ -158,7 +217,3 @@
 :root[data-motion="reduce"] .tabs__indicator {
   transition: none;
 }
-
-.tabs__tab {
-  min-inline-size: 0;
-}

package/dist/styles/task.css

@@ -72,7 +72,7 @@
   position: relative;
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text);
-  line-height: 1.6;
+  line-height: var(--sigvelo-leading-body);
 }
 
 .task__item::before {

package/dist/styles/terminal.css

@@ -29,10 +29,6 @@
   color: var(--sigvelo-color-neutral-300);
 }
 
-.terminal__status {
-  /* Badge handles styling */
-}
-
 .terminal__actions {
   display: inline-flex;
   align-items: center;
@@ -63,7 +59,7 @@
   margin: 0;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.6;
+  line-height: var(--sigvelo-leading-body);
   color: var(--sigvelo-color-neutral-100);
   white-space: pre-wrap;
   word-break: break-word;

package/dist/styles/theme-mode-control.css

@@ -25,7 +25,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1;
+  line-height: var(--sigvelo-leading-none);
   transition:
     color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
     background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),

package/dist/styles/think-thread-picker.css

@@ -52,7 +52,7 @@
   font-size: var(--sigvelo-density-compact-control-font-size);
   font-variant-numeric: tabular-nums;
   font-weight: var(--sigvelo-font-weight-normal);
-  line-height: 1;
+  line-height: var(--sigvelo-leading-none);
 }
 
 .think-thread-status-indicators__item {

package/dist/styles/toast.css

@@ -65,41 +65,12 @@
   margin: 0;
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
   color: var(--sigvelo-color-text);
 }
 
 .toast__action {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-xs);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-xs);
-  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-xs);
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: var(--sigvelo-recipe-control-height);
-  padding-block: 0;
-  padding-inline: var(--sigvelo-recipe-control-padding-inline);
   margin-block-start: var(--sigvelo-spacing-2);
-  font-family: inherit;
-  font-size: var(--sigvelo-recipe-control-font-size);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-primary-text-on-bg);
-  background-color: var(--sigvelo-color-primary-bg);
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
-  transition: background-color var(--sigvelo-motion-duration-interaction)
-    var(--sigvelo-motion-ease-change);
-}
-
-.toast__action:hover {
-  background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 10%);
-}
-
-.toast__action:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .toast__close {

package/dist/styles/toggle.css

@@ -9,7 +9,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
   color: var(--sigvelo-color-text);
   background-color: transparent;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -29,27 +29,13 @@
   border-color: var(--sigvelo-color-neutral-border-muted);
 }
 
-.toggle--sm {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
-  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-sm);
-  --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-sm);
-}
-
-.toggle--lg {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-lg);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-lg);
-  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-lg);
-  --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-lg);
-}
-
 .toggle > svg {
   inline-size: var(--sigvelo-recipe-control-icon-size);
   block-size: var(--sigvelo-recipe-control-icon-size);
   flex: none;
 }
 
-.toggle:hover {
+.toggle:hover:not([data-disabled]) {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
@@ -65,13 +51,13 @@
   border-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
-.toggle:active:not(:disabled) {
+.toggle:active:not([data-disabled]) {
   translate: 0 var(--sigvelo-motion-distance-xs);
 }
 
-.toggle:disabled {
+.toggle[data-disabled] {
   opacity: var(--sigvelo-recipe-disabled-opacity);
-  pointer-events: none;
+  cursor: not-allowed;
 }
 
 @media (prefers-reduced-motion: reduce) {

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.0",
   "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.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",