@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/styles/approval.css

@@ -0,0 +1,177 @@
+.approval {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-2);
+  contain: inline-size;
+  color: var(--sigvelo-color-text);
+  font-family: inherit;
+  font-size: var(--sigvelo-text-compact);
+}
+
+.approval__header {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sigvelo-spacing-2);
+  line-height: 1.4;
+}
+
+.approval__question {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.approval__question code {
+  font-family: var(--sigvelo-font-mono);
+  font-size: 0.8125em;
+}
+
+.approval__count {
+  margin-inline-start: auto;
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.approval__preview {
+  max-block-size: 6rem;
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-2-5);
+  overflow: auto;
+  overflow-wrap: anywhere;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  color: var(--sigvelo-color-text-muted);
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.5;
+}
+
+.approval__preview-key {
+  color: var(--sigvelo-color-text);
+}
+
+.approval__preview-key::after {
+  content: ":";
+}
+
+.approval__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.approval__option {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
+  min-block-size: var(--sigvelo-control-height-sm);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
+  border: none;
+  border-radius: var(--sigvelo-radius-md);
+  background: transparent;
+  color: var(--sigvelo-color-text);
+  font: inherit;
+  text-align: start;
+}
+
+.approval__option.button {
+  white-space: normal;
+}
+
+.approval__option[data-selected] {
+  background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 92%);
+}
+
+.approval__key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--sigvelo-control-icon-size-lg);
+  block-size: var(--sigvelo-control-icon-size-lg);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-full);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  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);
+}
+
+.approval__option[data-selected] .approval__key {
+  border-color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-text);
+  color: var(--sigvelo-color-surface);
+}
+
+.approval__arrows {
+  margin-inline-start: auto;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  opacity: 0;
+  transition: opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.approval__option[data-selected] .approval__arrows {
+  opacity: 1;
+}
+
+.approval__deny {
+  cursor: text;
+}
+
+.approval__deny:has(.approval__reason:focus-visible) {
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+.approval__deny-label {
+  flex-shrink: 0;
+}
+
+.approval__reason {
+  flex: 1;
+  min-inline-size: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--sigvelo-color-text);
+  font: inherit;
+}
+
+.approval__reason::placeholder {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.approval__skip {
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.approval__submit {
+  flex-shrink: 0;
+  gap: var(--sigvelo-spacing-1-5);
+}
+
+.approval__kbd {
+  font-family: inherit;
+  font-size: 0.75em;
+  opacity: 0.75;
+}
+
+.approval__status:not(.sigvelo-visually-hidden) {
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-xs);
+}
+
+@media (pointer: coarse) {
+  .approval__option {
+    min-block-size: var(--sigvelo-control-height-lg);
+  }
+}

package/dist/styles/artifact.css

@@ -17,7 +17,7 @@
   justify-content: space-between;
   gap: var(--sigvelo-spacing-3);
   padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 1rem;
+  padding-inline: var(--sigvelo-spacing-4);
   background-color: var(--sigvelo-color-surface);
 }
 
@@ -28,10 +28,10 @@
 .artifact__title {
   margin: 0;
   font-family: inherit;
-  font-size: 0.9375rem;
+  font-size: var(--sigvelo-text-base);
   font-weight: var(--sigvelo-font-weight-bold);
   color: var(--sigvelo-color-text);
-  line-height: 1.3;
+  line-height: var(--sigvelo-leading-tight);
   overflow-wrap: anywhere;
   text-wrap: balance;
 }
@@ -49,7 +49,7 @@
 .artifact__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   flex-shrink: 0;
 }
 
@@ -58,21 +58,9 @@
   /* Inherits from Button variant=ghost size=icon; overrides only when needed */
 }
 
-.artifact__action .sr-only {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  white-space: nowrap;
-  border: 0;
-  clip: rect(0 0 0 0);
-}
-
 .artifact__content {
-  padding-block: 1rem;
-  padding-inline: 1rem;
+  padding-block: var(--sigvelo-spacing-4);
+  padding-inline: var(--sigvelo-spacing-4);
   font-size: var(--sigvelo-text-sm);
   line-height: 1.5;
   overflow-wrap: anywhere;

package/dist/styles/autocomplete.css

@@ -4,9 +4,10 @@
 
 .autocomplete__popup {
   --sigvelo-recipe-surface-padding: 0;
+  --sigvelo-recipe-popup-min-inline-size: 12.5rem;
 
   inline-size: var(--anchor-width);
-  min-inline-size: 12.5rem;
+  min-inline-size: var(--sigvelo-recipe-popup-min-inline-size);
 }
 
 .autocomplete__status {

package/dist/styles/avatar.css

@@ -1,10 +1,13 @@
 .avatar {
+  --sigvelo-recipe-avatar-size: var(--sigvelo-control-height-sm);
+  --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-2-5);
+
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
+  inline-size: var(--sigvelo-recipe-avatar-size);
+  block-size: var(--sigvelo-recipe-avatar-size);
   flex-shrink: 0;
   overflow: hidden;
   font-family: inherit;
@@ -14,28 +17,39 @@
 }
 
 .avatar[data-size="sm"] {
-  width: 1.5rem;
-  height: 1.5rem;
+  --sigvelo-recipe-avatar-size: var(--sigvelo-spacing-6);
+  --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-2);
 }
 
 .avatar[data-size="lg"] {
-  width: 2.5rem;
-  height: 2.5rem;
+  --sigvelo-recipe-avatar-size: var(--sigvelo-control-height-lg);
+  --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-3);
 }
 
 .avatar__image {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   aspect-ratio: 1;
   object-fit: cover;
+  opacity: 1;
+  scale: 1;
+  transition:
+    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter),
+    scale var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
+}
+
+.avatar__image[data-starting-style],
+.avatar__image[data-ending-style] {
+  opacity: 0;
+  scale: var(--sigvelo-motion-presence-scale);
 }
 
 .avatar__fallback {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text-muted);
@@ -72,9 +86,11 @@
 }
 
 .avatar-group__count {
+  --sigvelo-recipe-avatar-count-size: var(--sigvelo-control-height-sm);
+
   position: relative;
-  width: 2rem;
-  height: 2rem;
+  inline-size: var(--sigvelo-recipe-avatar-count-size);
+  block-size: var(--sigvelo-recipe-avatar-count-size);
   flex-shrink: 0;
   margin-inline-start: -0.5rem;
   padding-inline: var(--sigvelo-spacing-1-5);
@@ -85,36 +101,25 @@
 }
 
 .avatar-group:has(.avatar[data-size="sm"]) .avatar-group__count {
-  width: 1.5rem;
-  height: 1.5rem;
+  --sigvelo-recipe-avatar-count-size: var(--sigvelo-spacing-6);
+
   font-size: var(--sigvelo-text-xs);
 }
 
 .avatar-group:has(.avatar[data-size="lg"]) .avatar-group__count {
-  width: 2.5rem;
-  height: 2.5rem;
+  --sigvelo-recipe-avatar-count-size: var(--sigvelo-control-height-lg);
 }
 
 .avatar__badge {
   position: absolute;
-  right: 0;
-  bottom: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
   z-index: 10;
-  width: var(--sigvelo-spacing-2-5);
-  height: var(--sigvelo-spacing-2-5);
+  inline-size: var(--sigvelo-recipe-avatar-badge-size);
+  block-size: var(--sigvelo-recipe-avatar-badge-size);
   color: var(--sigvelo-color-primary-text-on-bg);
   background-color: var(--sigvelo-color-primary-bg);
   border: 2px solid var(--sigvelo-color-canvas);
   border-radius: var(--sigvelo-radius-full);
   user-select: none;
 }
-
-.avatar[data-size="sm"] .avatar__badge {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-
-.avatar[data-size="lg"] .avatar__badge {
-  width: var(--sigvelo-spacing-3);
-  height: var(--sigvelo-spacing-3);
-}

package/dist/styles/badge.css

@@ -3,11 +3,11 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  gap: 0.25rem;
-  width: fit-content;
+  gap: var(--sigvelo-spacing-1);
+  inline-size: fit-content;
   overflow: hidden;
   padding-block: var(--sigvelo-spacing-0-5);
-  padding-inline: 0.5rem;
+  padding-inline: var(--sigvelo-spacing-2);
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-bold);
@@ -18,10 +18,10 @@
   border-radius: var(--sigvelo-radius-full);
   white-space: nowrap;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    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),
+    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);
 }
 
 .badge:where(a, button) {
@@ -39,13 +39,13 @@
 
 .badge > svg {
   flex-shrink: 0;
-  width: var(--sigvelo-spacing-3);
-  height: var(--sigvelo-spacing-3);
+  inline-size: var(--sigvelo-spacing-3);
+  block-size: var(--sigvelo-spacing-3);
   pointer-events: none;
 }
 
 .badge--sm {
-  padding-block: 0.0625rem;
+  padding-block: calc(var(--sigvelo-spacing-0-5) / 2);
   padding-inline: var(--sigvelo-spacing-1-5);
   font-size: var(--sigvelo-text-3xs);
 }

package/dist/styles/base-ui-motion.css

@@ -10,6 +10,12 @@
   position: fixed;
   inset: 0;
   min-block-size: 100dvb;
+  opacity: 1;
+  transition: opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-change);
+}
+
+.base-ui-backdrop:is([data-starting-style], [data-ending-style]) {
+  opacity: 0;
 }
 
 @supports (-webkit-touch-callout: none) {
@@ -20,23 +26,54 @@
 
 .base-ui-popup {
   transform-origin: var(--transform-origin);
+  translate: 0;
+  scale: 1;
   transition:
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-emphasized);
+    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-change),
+    scale var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter),
+    translate var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
 }
 
 .base-ui-popup[data-starting-style],
 .base-ui-popup[data-ending-style] {
   opacity: 0;
-  transform: scale(0.98);
+  scale: var(--sigvelo-motion-presence-scale);
 }
 
 .base-ui-popup[data-ending-style] {
-  transition-timing-function: var(--sigvelo-ease-accelerate);
+  transition-timing-function: var(--sigvelo-motion-ease-exit);
 }
 
-.base-ui-popup[data-instant] {
-  transition-duration: 0ms;
+.base-ui-popup[data-side="top"]:is([data-starting-style], [data-ending-style]) {
+  translate: 0 var(--sigvelo-motion-distance-sm);
+}
+
+.base-ui-popup[data-side="bottom"]:is([data-starting-style], [data-ending-style]) {
+  translate: 0 calc(var(--sigvelo-motion-distance-sm) * -1);
+}
+
+.base-ui-popup[data-side="left"]:is([data-starting-style], [data-ending-style]) {
+  translate: var(--sigvelo-motion-distance-sm) 0;
+}
+
+.base-ui-popup[data-side="right"]:is([data-starting-style], [data-ending-style]) {
+  translate: calc(var(--sigvelo-motion-distance-sm) * -1) 0;
+}
+
+.base-ui-popup[data-side="inline-start"]:is([data-starting-style], [data-ending-style]) {
+  translate: var(--sigvelo-motion-distance-sm) 0;
+}
+
+.base-ui-popup[data-side="inline-end"]:is([data-starting-style], [data-ending-style]) {
+  translate: calc(var(--sigvelo-motion-distance-sm) * -1) 0;
+}
+
+:dir(rtl) .base-ui-popup[data-side="inline-start"]:is([data-starting-style], [data-ending-style]) {
+  translate: calc(var(--sigvelo-motion-distance-sm) * -1) 0;
+}
+
+:dir(rtl) .base-ui-popup[data-side="inline-end"]:is([data-starting-style], [data-ending-style]) {
+  translate: var(--sigvelo-motion-distance-sm) 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -46,10 +83,20 @@
 
   .base-ui-popup[data-starting-style],
   .base-ui-popup[data-ending-style] {
-    transform: none;
+    scale: 1;
+    translate: none;
   }
 }
 
+:root[data-motion="reduce"] .base-ui-popup {
+  transition-duration: var(--sigvelo-duration-reduced);
+}
+
+:root[data-motion="reduce"] .base-ui-popup:is([data-starting-style], [data-ending-style]) {
+  scale: 1;
+  translate: none;
+}
+
 :root[data-motion="reduce"] .base-ui-adaptive-positioner,
 :root[data-motion="reduce"] .base-ui-adaptive-popup,
 :root[data-motion="reduce"] .base-ui-adaptive-viewport > [data-current],
@@ -68,43 +115,43 @@
  * transition state; these rules only turn those documented hooks into motion.
  */
 .base-ui-adaptive-positioner {
-  width: var(--positioner-width);
-  height: var(--positioner-height);
-  max-width: var(--available-width);
+  inline-size: var(--positioner-width);
+  block-size: var(--positioner-height);
+  max-inline-size: var(--available-width);
   transition:
-    left var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
-    right var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
-    top var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
-    bottom var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
+    left var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter),
+    right var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter),
+    top var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter),
+    bottom var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter);
 }
 
 .base-ui-adaptive-popup {
-  width: var(--popup-width, auto);
-  height: var(--popup-height, auto);
-  max-width: var(--available-width);
-  max-height: var(--available-height);
+  inline-size: var(--popup-width, auto);
+  block-size: var(--popup-height, auto);
+  max-inline-size: var(--available-width);
+  max-block-size: var(--available-height);
   overflow: clip;
   transition:
-    width var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
-    height var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-emphasized);
+    inline-size var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter),
+    block-size var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter),
+    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-change),
+    scale var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
 }
 
 .base-ui-adaptive-viewport {
   position: relative;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   overflow: clip;
 }
 
 .base-ui-adaptive-viewport > [data-current],
 .base-ui-adaptive-viewport > [data-previous] {
-  width: var(--popup-width, 100%);
+  inline-size: var(--popup-width, 100%);
   opacity: 1;
   transition:
-    translate var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    translate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter),
+    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-change);
 }
 
 .base-ui-adaptive-viewport[data-activation-direction~="left"] > [data-current][data-starting-style],
@@ -152,25 +199,33 @@
   }
 }
 
-/* Base UI measures this variable so panels can transition to and from a real
- * height. Keep it on the panel regardless of open state; otherwise closing
- * panels compute from `auto` and snap shut. */
-.base-ui-collapsible-panel {
-  height: var(--collapsible-panel-height);
+/* Base UI measures component-specific panel heights. Component CSS maps those
+ * values to this shared variable so every disclosure uses one reversible
+ * lifecycle without duplicating timing or reduced-motion behavior. */
+.base-ui-disclosure-panel {
+  block-size: var(--sigvelo-disclosure-panel-height);
   overflow: hidden;
   transition:
-    height var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    block-size var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change),
+    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
 }
 
-.base-ui-collapsible-panel[data-starting-style],
-.base-ui-collapsible-panel[data-ending-style] {
-  height: 0;
+.base-ui-disclosure-panel[data-slot="collapsible-content"] {
+  --sigvelo-disclosure-panel-height: var(--collapsible-panel-height);
+}
+
+.base-ui-disclosure-panel[data-starting-style],
+.base-ui-disclosure-panel[data-ending-style] {
+  block-size: 0;
   opacity: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .base-ui-collapsible-panel {
-    transition: opacity var(--sigvelo-duration-reduced) var(--sigvelo-ease-standard);
+  .base-ui-disclosure-panel {
+    transition: opacity var(--sigvelo-duration-reduced) var(--sigvelo-motion-ease-change);
   }
 }
+
+:root[data-motion="reduce"] .base-ui-disclosure-panel {
+  transition: opacity var(--sigvelo-duration-reduced) var(--sigvelo-motion-ease-change);
+}

package/dist/styles/browser-control-overlay.css

@@ -50,7 +50,6 @@
     transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1),
     opacity 80ms linear;
   width: 28px;
-  will-change: transform;
 }
 
 :host .cursor.visible {