@mcp-b/react-components 0.17.0 → 0.18.0

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 {

package/dist/styles/browser-live-view.css

@@ -5,7 +5,7 @@
 .browser-live-view {
   position: relative;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   aspect-ratio: 16 / 10;
   font-family: inherit;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -16,25 +16,31 @@
 }
 
 .browser-live-view__frame {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   border: none;
+  opacity: 0;
+  transition: opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
+}
+
+.browser-live-view[data-frame-state="ready"] .browser-live-view__frame {
+  opacity: 1;
 }
 
 /* The chip itself is the library Badge (sm/destructive) — only the overlay
    placement lives here. */
 .browser-live-view__badge {
   position: absolute;
-  top: 0.5rem;
-  inset-inline-end: 0.5rem;
+  inset-block-start: var(--sigvelo-spacing-2);
+  inset-inline-end: var(--sigvelo-spacing-2);
   z-index: 1;
   box-shadow: var(--sigvelo-shadow-sm);
   pointer-events: none;
 }
 
 .browser-live-view__badge-dot {
-  width: var(--sigvelo-spacing-1-5);
-  height: var(--sigvelo-spacing-1-5);
+  inline-size: var(--sigvelo-spacing-1-5);
+  block-size: var(--sigvelo-spacing-1-5);
   border-radius: 50%;
   background-color: currentColor;
   animation: browser-live-view-pulse 1.4s ease-in-out infinite;
@@ -46,8 +52,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.25rem;
-  width: 100%;
+  gap: var(--sigvelo-spacing-1);
+  inline-size: 100%;
 }
 
 .browser-live-view__ended-title {
@@ -59,7 +65,7 @@
 .browser-live-view__ended-detail {
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
-  max-width: 80%;
+  max-inline-size: 80%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -67,8 +73,8 @@
 
 /* An expired view showing a screenshot fallback keeps the image flush */
 .browser-live-view[data-expired] > img {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   object-fit: cover;
 }
 
@@ -81,10 +87,11 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
+  z-index: 1;
 }
 
 .browser-live-view__state-spinner {
@@ -95,15 +102,15 @@
    the button is focused */
 .browser-live-view__expand {
   position: absolute;
-  inset-block-end: 0.5rem;
-  inset-inline-end: 0.5rem;
+  inset-block-end: var(--sigvelo-spacing-2);
+  inset-inline-end: var(--sigvelo-spacing-2);
   z-index: 1;
   background-color: var(--sigvelo-color-surface);
   box-shadow: var(--sigvelo-shadow-sm);
   opacity: 0;
   transition:
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .browser-live-view:hover .browser-live-view__expand,
@@ -121,7 +128,7 @@
 .browser-live-view__dialog-body {
   position: relative;
   flex: 1;
-  min-height: 0;
+  min-block-size: 0;
   display: flex;
   border-radius: var(--sigvelo-radius-md);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
@@ -129,14 +136,14 @@
 }
 
 .browser-live-view__dialog-body > iframe {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   border: none;
 }
 
 .browser-live-view__dialog-body > img {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   object-fit: contain;
 }
 
@@ -162,3 +169,13 @@
     animation: none;
   }
 }
+
+:root[data-motion="reduce"] :is(.browser-live-view__badge-dot, .browser-live-view__state-spinner) {
+  animation: none;
+}
+
+@media (hover: none) {
+  .browser-live-view__expand {
+    opacity: 1;
+  }
+}

package/dist/styles/browser-replay.css

@@ -56,7 +56,7 @@
   background-color: var(--sigvelo-color-surface);
 }
 
-/* Play/pause is the library Button (ghost/icon-sm) and the scrubber is the
+/* Play/pause is the small icon-only library Button and the scrubber is the
    library Slider — only flex sizing lives here. */
 .browser-replay__toggle {
   flex: 0 0 auto;

package/dist/styles/browser-run-panel.css

@@ -1,7 +1,7 @@
 .browser-run-panel {
   min-inline-size: 0;
   min-block-size: 0;
-  height: 100%;
+  block-size: 100%;
 }
 
 .browser-run-panel .web-preview__nav:has(.browser-run-panel__tabs) {
@@ -21,7 +21,7 @@
   gap: 0;
   padding-inline: 0;
   border-block-end: 0;
-  overflow-x: auto;
+  overflow-inline: auto;
   scrollbar-width: none;
 }
 
@@ -31,10 +31,10 @@
 
 .browser-run-panel__tab.button {
   min-inline-size: min(11rem, 45vw);
-  min-block-size: 2.75rem;
+  min-block-size: var(--sigvelo-control-height-xl);
   max-inline-size: 13rem;
   flex: 0 0 auto;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   border-radius: var(--sigvelo-radius-md) var(--sigvelo-radius-md) 0 0;
   text-align: start;
@@ -120,6 +120,10 @@
   }
 }
 
+:root[data-motion="reduce"] .browser-run-panel__spinner {
+  animation: none;
+}
+
 @media (forced-colors: active) {
   .browser-run-panel__tab[data-active] {
     outline: 2px solid Highlight;