@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/styles/subagent-run.css

@@ -1,33 +1,3 @@
-.subagent-run {
-  display: inline-flex;
-  flex-direction: column;
-  max-inline-size: 100%;
-  color: var(--sigvelo-color-text);
-  font-family: inherit;
-}
-
-.subagent-run__trigger {
-  align-items: safe center;
-  justify-content: flex-start;
-  max-inline-size: 18rem;
-  border-radius: var(--sigvelo-radius-full);
-  text-align: start;
-}
-
-.subagent-run__trigger[data-panel-open] {
-  border-color: var(--sigvelo-color-neutral-border-muted);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-}
-
-.subagent-run__trigger-content {
-  display: flex;
-  align-items: stretch;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: 0;
-  min-inline-size: 0;
-}
-
 .subagent-run__selector {
   max-inline-size: 14rem;
   justify-content: flex-start;
@@ -35,7 +5,7 @@
   text-align: start;
 }
 
-.subagent-run__selector[aria-pressed="true"] {
+.subagent-run__selector[aria-current="page"] {
   border-color: var(--sigvelo-color-neutral-border-muted);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   box-shadow: inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-subtle);
@@ -55,14 +25,22 @@
   min-inline-size: 0;
 }
 
-.subagent-run__heading {
-  display: flex;
-  align-items: safe center;
-  flex-wrap: nowrap;
+.subagent-run__list--adjacent {
+  margin-block-start: var(--sigvelo-spacing-2);
+}
+
+.subagent-run__tray {
+  display: grid;
   gap: var(--sigvelo-spacing-1-5);
   min-inline-size: 0;
 }
 
+.subagent-run__tray-label {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.4;
+}
+
 .subagent-run__title {
   min-inline-size: 0;
   overflow: hidden;
@@ -99,38 +77,6 @@
   color: var(--sigvelo-color-warning-text);
 }
 
-.subagent-run__description {
-  display: block;
-  overflow: hidden;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
-  line-height: 1.5;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.subagent-run__description:empty {
-  display: none;
-}
-
-.subagent-run__status {
-  max-inline-size: 100%;
-}
-
-.subagent-run__content-inner {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sigvelo-spacing-2);
-  padding-block: var(--sigvelo-spacing-2);
-  min-inline-size: min(30rem, calc(100vw - var(--sigvelo-spacing-8)));
-  margin-block-start: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-2);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  background-color: var(--sigvelo-color-surface);
-}
-
 .subagent-run__progress {
   display: grid;
   gap: var(--sigvelo-spacing-1-5);
@@ -191,10 +137,6 @@
 }
 
 @media (forced-colors: active) {
-  .subagent-run__content-inner {
-    border-color: CanvasText;
-  }
-
   .subagent-run__milestone::before {
     border-color: CanvasText;
   }

package/dist/styles/switch.css

@@ -1,20 +1,26 @@
 .switch {
+  --sigvelo-recipe-switch-inline-size: var(--sigvelo-control-height-xl);
+  --sigvelo-recipe-switch-block-size: var(--sigvelo-spacing-6);
+  --sigvelo-recipe-switch-padding: var(--sigvelo-spacing-0-5);
+  --sigvelo-recipe-switch-thumb-size: var(--sigvelo-spacing-5);
+  --sigvelo-recipe-switch-thumb-translate: var(--sigvelo-spacing-5);
+
   position: relative;
   display: inline-flex;
   align-items: center;
-  width: 2.75rem;
-  height: 1.5rem;
+  inline-size: var(--sigvelo-recipe-switch-inline-size);
+  block-size: var(--sigvelo-recipe-switch-block-size);
   flex-shrink: 0;
-  padding: var(--sigvelo-spacing-0-5);
+  padding: var(--sigvelo-recipe-switch-padding);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width) transparent;
   border-radius: var(--sigvelo-radius-full);
   outline: none;
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .switch:hover:not([data-disabled]) {
@@ -52,48 +58,45 @@
 /* Sizes */
 
 .switch--sm {
-  width: 2rem;
-  height: 1.125rem;
+  --sigvelo-recipe-switch-inline-size: var(--sigvelo-control-height-sm);
+  --sigvelo-recipe-switch-block-size: var(--sigvelo-control-icon-size-lg);
+  --sigvelo-recipe-switch-thumb-size: var(--sigvelo-control-icon-size-sm);
+  --sigvelo-recipe-switch-thumb-translate: var(--sigvelo-control-icon-size-sm);
 }
 
 .switch--lg {
-  width: 3.5rem;
-  height: 2rem;
-  padding: 0.25rem;
+  --sigvelo-recipe-switch-inline-size: calc(var(--sigvelo-control-height-xs) * 2);
+  --sigvelo-recipe-switch-block-size: var(--sigvelo-control-height-sm);
+  --sigvelo-recipe-switch-padding: var(--sigvelo-spacing-1);
+  --sigvelo-recipe-switch-thumb-size: var(--sigvelo-spacing-6);
+  --sigvelo-recipe-switch-thumb-translate: var(--sigvelo-spacing-6);
 }
 
 /* Thumb */
 
 .switch__thumb {
   display: block;
-  width: 1.25rem;
-  height: 1.25rem;
+  inline-size: var(--sigvelo-recipe-switch-thumb-size);
+  block-size: var(--sigvelo-recipe-switch-thumb-size);
   background-color: var(--sigvelo-color-canvas);
   border-radius: var(--sigvelo-radius-full);
   box-shadow:
     0 1px 3px 0 color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
     0 1px 2px -1px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
-  transition: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  translate: 0;
+  transition: translate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .switch[data-checked] .switch__thumb {
-  transform: translateX(1.25rem);
-}
-
-.switch--sm .switch__thumb {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-.switch--sm[data-checked] .switch__thumb {
-  transform: translateX(0.875rem);
+  translate: var(--sigvelo-recipe-switch-thumb-translate);
 }
 
-.switch--lg .switch__thumb {
-  width: 1.5rem;
-  height: 1.5rem;
+@media (prefers-reduced-motion: reduce) {
+  .switch__thumb {
+    transition-duration: var(--sigvelo-duration-reduced);
+  }
 }
 
-.switch--lg[data-checked] .switch__thumb {
-  transform: translateX(1.5rem);
+:root[data-motion="reduce"] .switch__thumb {
+  transition-duration: var(--sigvelo-duration-reduced);
 }

package/dist/styles/tabs.css

@@ -1,7 +1,6 @@
 .tabs {
   display: flex;
   flex-direction: column;
-  container-type: inline-size;
 }
 
 .tabs--bordered {
@@ -12,22 +11,25 @@
 }
 
 .tabs__list {
+  position: relative;
   display: flex;
-  gap: 0.25rem;
-  border-bottom: 1px solid var(--sigvelo-color-neutral-border-muted);
-  padding-inline: 0.25rem;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-1);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  padding-inline: var(--sigvelo-spacing-1);
 }
 
 .tabs__list--line {
-  gap: 0.5rem;
-  border-bottom-color: transparent;
+  gap: var(--sigvelo-spacing-2);
+  border-block-end-color: transparent;
   padding-inline: 0;
 }
 
 .tabs--bordered .tabs__list {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
-  border-bottom: none;
-  padding: 0.25rem;
+  border-block-end: none;
+  padding: var(--sigvelo-spacing-1);
 }
 
 .tabs__tab {
@@ -43,13 +45,13 @@
   color: var(--sigvelo-color-text-muted);
   background-color: transparent;
   border: none;
-  border-block-end: 2px solid transparent;
-  margin-block-end: -1px;
+  border-block-end: calc(var(--sigvelo-border-width) * 2) solid transparent;
+  margin-block-end: calc(var(--sigvelo-border-width) * -1);
   cursor: pointer;
   transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .tabs__tab:hover:not([data-disabled]) {
@@ -61,11 +63,30 @@
   box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
-.tabs__tab[data-selected] {
+.tabs__tab[data-active] {
   color: var(--sigvelo-color-text);
   border-block-end-color: var(--sigvelo-color-primary-bg);
 }
 
+.tabs__indicator {
+  position: absolute;
+  z-index: 1;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inline-size: var(--active-tab-width);
+  block-size: calc(var(--sigvelo-border-width) * 2);
+  background-color: var(--sigvelo-color-primary-bg);
+  translate: var(--active-tab-left) 0;
+  pointer-events: none;
+  transition:
+    inline-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__tab[data-disabled] {
   opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
@@ -77,17 +98,31 @@
   margin-block-end: 0;
 }
 
-.tabs--bordered .tabs__tab[data-selected] {
+.tabs--bordered .tabs__tab[data-active] {
   background-color: var(--sigvelo-color-canvas);
   color: var(--sigvelo-color-text);
 }
 
 .tabs__panel {
-  padding-block: 1rem;
+  padding-block: var(--sigvelo-spacing-4);
+  opacity: 1;
+  translate: 0;
+  transition:
+    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter),
+    translate var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
+}
+
+.tabs__panel:is([data-starting-style], [data-ending-style]) {
+  opacity: 0;
+  translate: 0 var(--sigvelo-motion-distance-sm);
+}
+
+.tabs__panel[data-ending-style] {
+  transition-timing-function: var(--sigvelo-motion-ease-exit);
 }
 
 .tabs--bordered .tabs__panel {
-  padding: 1rem;
+  padding: var(--sigvelo-spacing-4);
 }
 
 .tabs__panel:focus-visible {
@@ -96,13 +131,34 @@
   border-radius: var(--sigvelo-radius-md);
 }
 
-@container (max-width: 24rem) {
-  .tabs__list {
-    flex-wrap: wrap;
+@media (prefers-reduced-motion: reduce) {
+  .tabs__panel {
+    transition: opacity var(--sigvelo-duration-reduced) var(--sigvelo-motion-ease-change);
   }
 
-  .tabs__tab {
-    flex: 1 1 auto;
-    min-inline-size: 0;
+  .tabs__panel:is([data-starting-style], [data-ending-style]) {
+    translate: none;
   }
 }
+
+:root[data-motion="reduce"] .tabs__panel {
+  transition: opacity var(--sigvelo-duration-reduced) var(--sigvelo-motion-ease-change);
+}
+
+:root[data-motion="reduce"] .tabs__panel:is([data-starting-style], [data-ending-style]) {
+  translate: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tabs__indicator {
+    transition: none;
+  }
+}
+
+:root[data-motion="reduce"] .tabs__indicator {
+  transition: none;
+}
+
+.tabs__tab {
+  min-inline-size: 0;
+}

package/dist/styles/task.css

@@ -1,16 +1,8 @@
-.task {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-}
-
 .task__trigger {
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  width: 100%;
+  inline-size: 100%;
   min-block-size: var(--sigvelo-control-height-xs);
   padding-block: var(--sigvelo-spacing-0-5);
   padding-inline: var(--sigvelo-spacing-2);
@@ -26,8 +18,8 @@
   text-align: start;
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .task__trigger:hover:not([data-disabled]) {
@@ -53,12 +45,8 @@
   display: inline-flex;
 }
 
-.task__trigger-title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.task__trigger-icon {
+  margin-inline-start: auto;
 }
 
 .task__list {
@@ -70,8 +58,8 @@
   padding-inline: var(--sigvelo-spacing-3);
   list-style: none;
   /* Bounded so expanding never blows out the conversation scroll position */
-  max-height: 20rem;
-  overflow-y: auto;
+  max-block-size: 20rem;
+  overflow-block: auto;
   background-color: transparent;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -92,8 +80,8 @@
   position: absolute;
   inset-inline-start: calc(-1 * var(--sigvelo-spacing-2));
   inset-block-start: var(--sigvelo-spacing-2-5);
-  width: 0.3125rem;
-  height: 0.3125rem;
+  inline-size: var(--sigvelo-spacing-1);
+  block-size: var(--sigvelo-spacing-1);
   border-radius: var(--sigvelo-radius-full);
   background-color: var(--sigvelo-color-neutral-border-muted);
 }
@@ -107,8 +95,8 @@
 .task__file {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  padding-block: 0.0625rem;
+  gap: var(--sigvelo-spacing-1);
+  padding-block: var(--sigvelo-spacing-0-5);
   padding-inline: var(--sigvelo-spacing-1-5);
   margin-inline: var(--sigvelo-spacing-0-5);
   background-color: var(--sigvelo-color-neutral-bg-subtle);

package/dist/styles/test-results.css

@@ -1,16 +1,3 @@
-.test-results {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  overflow: hidden;
-}
-
 .test-results__header {
   display: flex;
   flex-direction: column;
@@ -28,10 +15,6 @@
   flex-wrap: wrap;
 }
 
-.test-results__overall {
-  /* Badge handles color */
-}
-
 .test-results__stats {
   display: inline-flex;
   align-items: center;
@@ -54,21 +37,16 @@
 }
 
 .test-results__progress {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .test-results__progress-track {
   display: flex;
-  width: 100%;
-  height: 0.5rem;
-  overflow: hidden;
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  border-radius: var(--sigvelo-radius-full);
 }
 
 .test-results__progress-segment {
-  height: 100%;
-  transition: width var(--sigvelo-duration-slow) var(--sigvelo-ease-standard);
+  block-size: 100%;
+  transition: inline-size var(--sigvelo-motion-duration-layout) var(--sigvelo-motion-ease-change);
 }
 
 .test-results__progress-segment--passed {
@@ -81,7 +59,7 @@
 
 .test-results__progress-label {
   display: block;
-  margin-block-start: 0.25rem;
+  margin-block-start: var(--sigvelo-spacing-1);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-2xs);
   font-variant-numeric: tabular-nums;
@@ -107,7 +85,7 @@
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  width: 100%;
+  inline-size: 100%;
   min-block-size: var(--sigvelo-control-height-xs);
   padding-block: var(--sigvelo-spacing-0-5);
   padding-inline: var(--sigvelo-spacing-2);
@@ -119,7 +97,8 @@
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .test-results__suite-trigger:hover:not([data-disabled]) {
@@ -134,16 +113,16 @@
 .test-results__suite-icon {
   display: inline-flex;
   color: var(--sigvelo-color-text-muted);
-  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+  transition: rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
 }
 
 .test-results__suite-trigger[data-panel-open] .test-results__suite-icon {
-  transform: rotate(90deg);
+  rotate: 90deg;
 }
 
 .test-results__suite-name {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-normal);
@@ -156,7 +135,7 @@
   margin-inline-start: auto;
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
   font-variant-numeric: tabular-nums;
@@ -191,10 +170,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
   border-radius: var(--sigvelo-radius-full);
   flex-shrink: 0;
+  transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .test-results__test-status--passed {
@@ -216,7 +196,7 @@
 
 .test-results__test-name {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text);
@@ -248,7 +228,8 @@
 
 .test-results__error-text {
   margin: 0;
-  padding: 0.5rem var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-2xs);
   line-height: 1.55;
@@ -279,11 +260,23 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .test-results__progress-segment {
+    transition: none;
+  }
+
   .test-results__test-status--running {
     animation: none;
   }
 }
 
+:root[data-motion="reduce"] .test-results__progress-segment {
+  transition: none;
+}
+
+:root[data-motion="reduce"] .test-results__test-status--running {
+  animation: none;
+}
+
 @media (forced-colors: active) {
   .test-results,
   .test-results__test,

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

@@ -56,9 +56,17 @@
 }
 
 .theme-mode-control--icons-only .theme-mode-control__item.radio {
+  inline-size: var(--sigvelo-control-height-xs);
+  min-inline-size: var(--sigvelo-control-height-xs);
+  block-size: var(--sigvelo-control-height-xs);
   padding-inline: 0;
 }
 
+.theme-mode-control--icons-only .theme-mode-control__item.radio svg {
+  inline-size: var(--sigvelo-control-icon-size-xs);
+  block-size: var(--sigvelo-control-icon-size-xs);
+}
+
 @media (forced-colors: active) {
   .theme-mode-control__item.radio[data-checked] {
     color: HighlightText;