@mcp-b/react-components 0.17.0 → 0.18.0

package/dist/styles/plan.css

@@ -77,6 +77,10 @@
   border: var(--sigvelo-border-width) var(--sigvelo-border-style)
     var(--sigvelo-color-neutral-border-muted);
   border-radius: var(--sigvelo-radius-full);
+  transition:
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .plan__step-indicator-visual,
@@ -103,6 +107,7 @@
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
+  transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .plan__step[data-status="pending"] .plan__step-title {

package/dist/styles/popover.css

@@ -1,12 +1,6 @@
 .popover__backdrop {
   z-index: 50;
   background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 50%);
-  transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.popover__backdrop[data-starting-style],
-.popover__backdrop[data-ending-style] {
-  opacity: 0;
 }
 
 .popover__positioner {
@@ -16,9 +10,9 @@
 .popover__popup {
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
 
-  min-width: 12rem;
+  min-inline-size: 12rem;
   max-inline-size: min(20rem, var(--available-width));
-  overflow-y: auto;
+  overflow-block: auto;
 }
 
 .popover__title {
@@ -35,15 +29,20 @@
   margin-block-end: var(--sigvelo-spacing-2);
 }
 
-.popover__close {
+.popover__close:not(.button) {
+  --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;
-  padding-block: 0.25rem;
-  padding-inline: 0.5rem;
+  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-text-xs);
+  font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text-muted);
   background-color: transparent;
@@ -52,16 +51,16 @@
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
-.popover__close:hover {
+.popover__close:not(.button):hover {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
-.popover__close:focus-visible {
+.popover__close:not(.button):focus-visible {
   outline: none;
   box-shadow: var(--sigvelo-recipe-focus-shadow);
 }

package/dist/styles/preview-card.css

@@ -3,7 +3,7 @@
   text-decoration: underline;
   text-underline-offset: 2px;
   cursor: pointer;
-  transition: color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .preview-card__trigger:hover {
@@ -25,35 +25,5 @@
 
   min-inline-size: 12.5rem;
   max-inline-size: min(20rem, var(--available-width));
-  overflow-y: auto;
-}
-
-.preview-card__arrow {
-  width: 10px;
-  height: 10px;
-  transform: rotate(45deg);
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-right: none;
-  border-bottom: none;
-}
-
-.preview-card__popup[data-side="bottom"] .preview-card__arrow {
-  top: -6px;
-}
-
-.preview-card__popup[data-side="top"] .preview-card__arrow {
-  bottom: -6px;
-  transform: rotate(225deg);
-}
-
-.preview-card__popup[data-side="left"] .preview-card__arrow {
-  right: -6px;
-  transform: rotate(135deg);
-}
-
-.preview-card__popup[data-side="right"] .preview-card__arrow {
-  left: -6px;
-  transform: rotate(-45deg);
+  overflow-block: auto;
 }

package/dist/styles/progress.css

@@ -1,5 +1,5 @@
 .progress {
-  width: 100%;
+  inline-size: 100%;
 }
 
 /* Variants */
@@ -19,8 +19,8 @@
 /* Indeterminate animation */
 
 .progress[data-state="indeterminate"] .progress__indicator {
-  width: 50% !important;
-  animation: progress-indeterminate 1.5s ease-in-out infinite;
+  inline-size: 50% !important;
+  animation: progress-indeterminate 1.5s var(--sigvelo-motion-ease-change) infinite;
 }
 
 @keyframes progress-indeterminate {
@@ -38,3 +38,8 @@
     transform: none;
   }
 }
+
+:root[data-motion="reduce"] .progress[data-state="indeterminate"] .progress__indicator {
+  animation: none;
+  transform: none;
+}

package/dist/styles/prompt-input.css

@@ -1,5 +1,3 @@
-@import "./approval.css";
-
 .prompt-input {
   --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
 
@@ -7,9 +5,9 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-density-compact-control-gap);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-density-compact-control-padding-inline);
   background-color: var(--sigvelo-color-surface);
   /* Fields keep their border; hairline + soft shadow for the floating-composer look */
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -19,8 +17,8 @@
   font-family: inherit;
   color: var(--sigvelo-color-text);
   transition:
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .prompt-input__recording {
@@ -28,7 +26,7 @@
   align-items: center;
   gap: var(--sigvelo-spacing-2);
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__recording-add {
@@ -49,10 +47,10 @@
 }
 
 .prompt-input__recording-time {
-  min-inline-size: 2.5rem;
+  min-inline-size: var(--sigvelo-control-height-lg);
   color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   text-align: end;
 }
 
@@ -64,7 +62,7 @@
 .prompt-input__footer-end:has(.prompt-input__recording) {
   flex: 1;
   flex-wrap: nowrap;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .prompt-input__footer-end:has(.prompt-input__recording) > :not(.prompt-input__recording),
@@ -93,7 +91,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  min-height: 1.5rem;
+  min-block-size: var(--sigvelo-spacing-6);
 }
 
 .prompt-input__attachments {
@@ -109,12 +107,12 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  max-width: 14rem;
-  padding: 0.25rem 0.5rem;
+  max-inline-size: 14rem;
+  padding: var(--sigvelo-spacing-1) 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);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   color: var(--sigvelo-color-text);
 }
 
@@ -133,8 +131,8 @@
 
 .prompt-input__attachment-thumb {
   display: block;
-  width: 3rem;
-  height: 3rem;
+  inline-size: var(--sigvelo-spacing-12);
+  block-size: var(--sigvelo-spacing-12);
   object-fit: cover;
 }
 
@@ -178,22 +176,22 @@
   align-items: stretch;
   flex-wrap: wrap;
   gap: var(--sigvelo-spacing-1);
-  width: 100%;
+  inline-size: 100%;
 }
 
 .prompt-input__textarea {
   flex: 1;
-  min-width: 8rem;
-  width: 100%;
+  min-inline-size: 8rem;
+  inline-size: 100%;
   padding: 0;
   border: none;
   background-color: transparent;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   line-height: 1.5;
   resize: none;
-  overflow-y: hidden;
+  overflow-block: hidden;
 }
 
 .prompt-input__textarea::placeholder {
@@ -216,7 +214,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-density-compact-control-gap);
   padding-block-start: var(--sigvelo-spacing-1);
 }
 
@@ -231,7 +229,7 @@
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   flex-wrap: wrap;
-  min-height: var(--sigvelo-control-height-xs);
+  min-block-size: var(--sigvelo-density-compact-control-height);
 }
 
 .prompt-input__button {
@@ -244,8 +242,8 @@
 }
 
 .prompt-input__dictation {
-  min-inline-size: var(--sigvelo-control-height-xs);
-  min-block-size: var(--sigvelo-control-height-xs);
+  min-inline-size: var(--sigvelo-density-compact-control-height);
+  min-block-size: var(--sigvelo-density-compact-control-height);
 }
 
 .prompt-input__dictation[data-listening] {
@@ -268,15 +266,15 @@
 
 .prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before {
   position: absolute;
-  inline-size: 1.75rem;
-  block-size: 1.75rem;
+  inline-size: var(--sigvelo-density-compact-control-height);
+  block-size: var(--sigvelo-density-compact-control-height);
   border: var(--sigvelo-border-width) solid currentColor;
-  border-radius: 999rem;
+  border-radius: var(--sigvelo-radius-full);
   opacity: calc(0.2 + var(--prompt-input-dictation-level) * 0.6);
-  transform: scale(calc(0.8 + var(--prompt-input-dictation-level) * 0.25));
+  scale: calc(0.8 + var(--prompt-input-dictation-level) * 0.25);
   transition:
     opacity 75ms linear,
-    transform 75ms linear;
+    scale 75ms linear;
   content: "";
 }
 
@@ -303,10 +301,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin-inline-start: 0.5rem;
+  margin-inline-start: var(--sigvelo-spacing-2);
   padding-block: 0.0625rem;
-  padding-inline: 0.25rem;
-  border: 1px solid color-mix(in oklab, currentColor, transparent 75%);
+  padding-inline: var(--sigvelo-spacing-1);
+  border: var(--sigvelo-border-width) solid color-mix(in oklab, currentColor, transparent 75%);
   border-radius: var(--sigvelo-radius-sm);
   font-family: var(--sigvelo-font-mono);
   font-size: 0.75em;
@@ -316,7 +314,7 @@
 
 .prompt-input__submit {
   flex-shrink: 0;
-  border-radius: 999rem;
+  border-radius: var(--sigvelo-radius-full);
 }
 
 .prompt-input__stop {
@@ -330,11 +328,11 @@
 }
 
 .prompt-input__action-menu {
-  min-width: 12rem;
+  min-inline-size: 12rem;
 }
 
 .prompt-input__action-menu-icon {
-  margin-inline-end: 0.5rem;
+  margin-inline-end: var(--sigvelo-spacing-2);
 }
 
 .prompt-input__permissions-trigger {
@@ -374,19 +372,19 @@
   white-space: nowrap;
 }
 
-@container prompt-input (max-width: 36rem) {
+@container prompt-input (inline-size <= 36rem) {
   .prompt-input__footer {
     gap: var(--sigvelo-spacing-1);
   }
 
   .prompt-input__tools {
-    min-width: 0;
+    min-inline-size: 0;
     flex-wrap: nowrap;
   }
 
   .prompt-input__button[data-responsive-label] {
-    inline-size: var(--sigvelo-control-height-xs);
-    min-block-size: var(--sigvelo-control-height-xs);
+    inline-size: var(--sigvelo-density-compact-control-height);
+    min-block-size: var(--sigvelo-density-compact-control-height);
     padding-inline: 0;
     border-radius: var(--sigvelo-radius-full);
   }
@@ -398,15 +396,15 @@
   }
 
   .prompt-input__permissions-trigger {
-    inline-size: var(--sigvelo-control-height-xs);
-    min-block-size: var(--sigvelo-control-height-xs);
+    inline-size: var(--sigvelo-density-compact-control-height);
+    min-block-size: var(--sigvelo-density-compact-control-height);
     padding-inline: 0;
     justify-content: center;
     border-radius: var(--sigvelo-radius-full);
   }
 
   .prompt-input__context-trigger {
-    max-width: 11rem;
+    max-inline-size: 11rem;
   }
 
   .prompt-input__context-category,
@@ -420,7 +418,7 @@
 }
 
 .prompt-input__permissions-menu {
-  min-width: 17rem;
+  min-inline-size: 17rem;
 }
 
 .prompt-input__permissions-option {
@@ -431,15 +429,15 @@
   display: flex;
   flex-direction: column;
   gap: var(--sigvelo-spacing-0-5);
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__permissions-option-label {
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .prompt-input__permissions-option-description {
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -450,8 +448,8 @@
 }
 
 .prompt-input__permissions-check::before {
-  width: var(--sigvelo-spacing-2-5);
-  height: var(--sigvelo-spacing-1-5);
+  inline-size: var(--sigvelo-spacing-2-5);
+  block-size: var(--sigvelo-spacing-1-5);
   background-color: transparent;
   border-radius: 0;
   border-inline-start: 2px solid currentColor;
@@ -469,7 +467,7 @@
   z-index: 20;
   inset-block-start: calc(100% + var(--sigvelo-spacing-1-5));
   inset-inline-start: 0;
-  min-width: 14rem;
+  min-inline-size: 14rem;
   padding: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
@@ -482,17 +480,18 @@
 .prompt-input__tab-label {
   margin: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
 .prompt-input__tab-item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: var(--sigvelo-spacing-3);
-  font-size: var(--sigvelo-text-xs);
+  gap: var(--sigvelo-density-compact-control-gap);
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-density-compact-control-padding-inline);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .prompt-input__command-list {
@@ -501,16 +500,17 @@
 }
 
 .prompt-input__command-positioner {
-  width: min(var(--anchor-width), calc(100vw - var(--sigvelo-spacing-4)));
-  max-height: min(24rem, var(--available-height));
+  inline-size: min(var(--anchor-width), calc(100dvi - var(--sigvelo-spacing-4)));
+  max-block-size: min(24rem, var(--available-height));
 }
 
 .prompt-input__command-popup {
   --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
 
-  width: 100%;
-  max-height: min(24rem, var(--available-height));
-  overflow: hidden auto;
+  inline-size: 100%;
+  max-block-size: min(24rem, var(--available-height));
+  overflow-inline: hidden;
+  overflow-block: auto;
 }
 
 .prompt-input__command-popup [data-slot="combobox-empty"]:empty {
@@ -519,7 +519,7 @@
 
 .prompt-input__command-item {
   align-items: center;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__command-icon {
@@ -528,8 +528,8 @@
 }
 
 .prompt-input__command-icon > svg {
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
 .prompt-input__command-copy {
@@ -537,13 +537,13 @@
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: baseline;
   column-gap: var(--sigvelo-spacing-2);
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__context-option-copy {
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__command-description {
@@ -554,7 +554,7 @@
 
 .prompt-input__command-meta {
   color: var(--prompt-input-secondary-text);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   white-space: nowrap;
 }
 
@@ -576,7 +576,7 @@
   padding-inline: var(--sigvelo-spacing-1);
   color: var(--sigvelo-color-primary-text);
   font-weight: inherit;
-  font-size: var(--sigvelo-text-base);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .prompt-input__reference-icon,
@@ -587,7 +587,7 @@
 
 .prompt-input__reference-label {
   overflow: hidden;
-  max-width: 18rem;
+  max-inline-size: 18rem;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -605,20 +605,20 @@
   opacity: 1;
 }
 
-@container prompt-input (width < 28rem) {
+@container prompt-input (inline-size < 28rem) {
   .prompt-input__reference-label {
-    max-width: 12rem;
+    max-inline-size: 12rem;
   }
 }
 
 .prompt-input__command-description,
 .prompt-input__context-description {
   color: var(--prompt-input-secondary-text);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .prompt-input__context-trigger {
-  max-width: min(20rem, 45cqi);
+  max-inline-size: min(20rem, 45cqi);
 }
 
 .prompt-input__context-category,
@@ -644,8 +644,8 @@
 .prompt-input__context-menu {
   --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
 
-  min-width: min(22rem, calc(100vw - var(--sigvelo-spacing-4)));
-  max-width: min(28rem, calc(100vw - var(--sigvelo-spacing-4)));
+  min-inline-size: min(22rem, calc(100dvi - var(--sigvelo-spacing-4)));
+  max-inline-size: min(28rem, calc(100dvi - var(--sigvelo-spacing-4)));
 }
 
 .prompt-input__context-option {