@mcp-b/react-components 0.18.0 → 0.20.0

package/dist/styles/codex-model-selector.css

@@ -11,7 +11,8 @@
   align-items: center;
   gap: var(--sigvelo-spacing-1);
   max-inline-size: calc(100vi - var(--sigvelo-spacing-8));
-  min-block-size: var(--sigvelo-control-height-sm);
+  min-inline-size: 0;
+  min-block-size: var(--sigvelo-control-height-xs);
   padding: 0;
   color: var(--sigvelo-color-text);
   appearance: none;
@@ -22,7 +23,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-control-text-md);
   font-weight: var(--sigvelo-font-weight-normal);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
   isolation: isolate;
 }
 
@@ -66,6 +67,7 @@
 }
 
 .codex-model-selector__summary-effort,
+.codex-model-selector__compact-icon,
 .codex-model-selector__trigger-icon,
 .codex-model-selector__submenu-value,
 .codex-model-selector__submenu-icon,
@@ -78,12 +80,25 @@
   color: var(--sigvelo-color-primary-text);
 }
 
+.codex-model-selector__compact-icon,
 .codex-model-selector__trigger-icon,
 .codex-model-selector__submenu-icon,
 .codex-model-selector__reset-icon {
   flex: 0 0 auto;
 }
 
+.codex-model-selector__compact {
+  display: none;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  min-inline-size: 0;
+}
+
+.codex-model-selector__compact-icon {
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
+}
+
 .codex-model-selector__trigger-icon {
   inline-size: var(--sigvelo-control-icon-size-sm);
   block-size: var(--sigvelo-control-icon-size-sm);
@@ -120,7 +135,7 @@
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-control-text-sm);
   font-weight: var(--sigvelo-font-weight-normal);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
 }
 
 .codex-model-selector__submenu-trigger::after {
@@ -152,7 +167,7 @@
 .codex-model-selector__option-description {
   margin-block-start: var(--sigvelo-spacing-0-5);
   font-size: var(--sigvelo-control-text-sm);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
 }
 
 .codex-model-selector__option-indicator {
@@ -175,6 +190,33 @@
   margin-inline-start: auto;
 }
 
+@container prompt-input (inline-size <= 36rem) {
+  .codex-model-selector__trigger {
+    justify-content: center;
+    border-radius: var(--sigvelo-radius-full);
+  }
+
+  .codex-model-selector__compact {
+    display: inline-flex;
+  }
+
+  .codex-model-selector__summary,
+  .codex-model-selector__trigger-icon {
+    display: none;
+  }
+}
+
+@container prompt-input (inline-size <= 22rem) {
+  .codex-model-selector__trigger {
+    inline-size: var(--sigvelo-control-height-xs);
+    max-inline-size: var(--sigvelo-control-height-xs);
+  }
+
+  .codex-model-selector__compact-label {
+    display: none;
+  }
+}
+
 @media (forced-colors: active) {
   .codex-model-selector__summary-effort--ultra {
     color: LinkText;

package/dist/styles/collapsible.css

@@ -28,7 +28,7 @@
     border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
-.collapsible__trigger:hover {
+.collapsible__trigger:hover:not([data-disabled]) {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 

package/dist/styles/context.css

@@ -3,7 +3,7 @@
   font-family: inherit;
 }
 
-/* Bare ring icon — undo the popover__trigger pill chrome. */
+/* Bare ring icon owns its trigger chrome. */
 .context__trigger {
   display: inline-flex;
   align-items: center;

package/dist/styles/dialog.css

@@ -10,26 +10,12 @@
   inset-block-start: 50%;
   inset-inline-start: 50%;
   translate: -50% -50%;
-  scale: 1;
   z-index: 50;
   inline-size: calc(100% - var(--sigvelo-control-height-sm));
   max-inline-size: 32rem;
   max-block-size: calc(100dvb - var(--sigvelo-spacing-8));
   overflow-block: auto;
   overscroll-behavior: contain;
-  transition:
-    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-change),
-    scale var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
-}
-
-.dialog__popup[data-starting-style],
-.dialog__popup[data-ending-style] {
-  opacity: 0;
-  scale: var(--sigvelo-motion-presence-scale);
-}
-
-:root[data-motion="reduce"] .dialog__popup:is([data-starting-style], [data-ending-style]) {
-  scale: 1;
 }
 
 .dialog__popup--sm {
@@ -48,17 +34,10 @@
   border-radius: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .dialog__popup[data-starting-style],
-  .dialog__popup[data-ending-style] {
-    scale: 1;
-  }
-}
-
 .dialog__title {
   font-size: var(--sigvelo-text-base);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
   color: var(--sigvelo-color-text);
   margin-block-end: var(--sigvelo-spacing-1);
 }
@@ -77,37 +56,5 @@
 }
 
 .dialog__footer {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--sigvelo-spacing-2);
   margin-block-start: var(--sigvelo-spacing-4);
 }
-
-.dialog__close {
-  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);
-  font-family: inherit;
-  font-size: var(--sigvelo-recipe-control-font-size);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  border: none;
-  border-radius: var(--sigvelo-radius-md);
-  cursor: pointer;
-  transition: background-color var(--sigvelo-motion-duration-interaction)
-    var(--sigvelo-motion-ease-change);
-}
-
-.dialog__close:hover {
-  background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 20%);
-}
-
-.dialog__close:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
-}

package/dist/styles/field.css

@@ -6,8 +6,8 @@
   gap: var(--sigvelo-spacing-1-5);
 }
 
-.field:is([data-invalid="true"], [data-invalid=""]) .field__label,
-.field:is([data-invalid="true"], [data-invalid=""]) .field-title {
+.field[data-invalid] .field__label,
+.field[data-invalid] .field-title {
   color: var(--sigvelo-color-danger-bg);
 }
 
@@ -58,7 +58,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1;
+  line-height: var(--sigvelo-leading-none);
   color: var(--sigvelo-color-text);
 }
 
@@ -74,7 +74,7 @@
   padding: var(--sigvelo-spacing-3);
 }
 
-.field__label:has(> [data-slot="field"]):has([data-state="checked"], [data-checked]) {
+.field__label:has(> [data-slot="field"]):has([data-checked]) {
   border-color: var(--sigvelo-color-primary-border);
   background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 95%);
 }
@@ -167,14 +167,14 @@
 .field-content {
   flex: 1;
   gap: var(--sigvelo-spacing-1-5);
-  line-height: 1.375;
+  line-height: var(--sigvelo-leading-snug);
 }
 
 .field-legend,
 .field-title {
   color: var(--sigvelo-color-text);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
 }
 
 .field-legend {

package/dist/styles/inline-citation.css

@@ -31,7 +31,7 @@
   font: inherit;
   font-size: var(--sigvelo-text-2xs);
   font-variant-numeric: tabular-nums;
-  line-height: 1;
+  line-height: var(--sigvelo-leading-none);
   text-decoration: none;
   cursor: pointer;
   vertical-align: baseline;
@@ -72,7 +72,7 @@
   color: var(--sigvelo-color-text);
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
   text-overflow: ellipsis;
   white-space: nowrap;
 }

package/dist/styles/label.css

@@ -5,15 +5,13 @@
   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);
   color: var(--sigvelo-color-text);
   user-select: none;
 }
 
 .label[data-disabled],
-.label[data-disabled="true"],
-.group[data-disabled] .label,
-.group[data-disabled="true"] .label {
+.group[data-disabled] .label {
   color: var(--sigvelo-color-text-muted);
   pointer-events: none;
 }
@@ -23,7 +21,6 @@
   cursor: not-allowed;
 }
 
-.label[data-disabled],
-.label[data-disabled="true"] {
+.label[data-disabled] {
   cursor: not-allowed;
 }

package/dist/styles/marker.css

@@ -7,7 +7,7 @@
   min-block-size: var(--sigvelo-spacing-4);
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
-  line-height: 1.5;
+  line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-text-muted);
   text-align: start;
 }

package/dist/styles/mcp-server-picker.css

@@ -93,7 +93,7 @@
 .mcp-server-picker__avatar-fallback {
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-bold);
-  line-height: 1;
+  line-height: var(--sigvelo-leading-none);
 }
 
 .mcp-server-picker__copy {

package/dist/styles/media-preview-card.css

@@ -94,7 +94,7 @@
   scale: var(--sigvelo-motion-presence-scale);
 }
 
-.media-preview-card .card__content {
+:where([data-slot="media-preview-card"]) [data-slot="card-content"] {
   gap: var(--sigvelo-spacing-2);
   padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-4) var(--sigvelo-spacing-4);
 }

package/dist/styles/menubar.css

@@ -1,45 +1,8 @@
-.menubar {
-  display: flex;
-  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);
-}
-
-.menubar__trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: var(--sigvelo-control-height-xs);
-  padding-block: 0;
-  padding-inline: var(--sigvelo-control-padding-inline-md);
-  font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text);
-  background-color: transparent;
+.menubar__trigger:not([data-unstyled]) {
   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);
-}
-
-.menubar__trigger:hover {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.menubar__trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
-.menubar__trigger[data-popup-open] {
+.menubar__trigger:not([data-unstyled])[data-popup-open] {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
@@ -66,8 +29,6 @@
   color: var(--sigvelo-color-danger-text);
 }
 
-.menubar__item[data-variant="destructive"]:hover,
-.menubar__item[data-variant="destructive"]:focus,
 .menubar__item[data-variant="destructive"][data-highlighted] {
   background-color: var(--sigvelo-color-danger-bg-subtle);
   color: var(--sigvelo-color-danger-text-on-subtle);

package/dist/styles/message.css

@@ -157,13 +157,6 @@
   max-block-size: 18rem;
 }
 
-.message__edit-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--sigvelo-spacing-2);
-}
-
 .message__toolbar {
   display: flex;
   align-items: center;

package/dist/styles/motion-reduction.css

@@ -9,8 +9,7 @@
   *::before,
   *::after {
     scroll-behavior: auto !important;
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
+    animation: none !important;
     transition-property:
       opacity, color, background-color, border-color, text-decoration-color, fill, stroke !important;
     transition-duration: var(--sigvelo-duration-reduced) !important;
@@ -21,8 +20,7 @@
 :root[data-motion="reduce"] *::before,
 :root[data-motion="reduce"] *::after {
   scroll-behavior: auto !important;
-  animation-duration: 0.01ms !important;
-  animation-iteration-count: 1 !important;
+  animation: none !important;
   transition-property:
     opacity, color, background-color, border-color, text-decoration-color, fill, stroke !important;
   transition-duration: var(--sigvelo-duration-reduced) !important;

package/dist/styles/navigation-menu.css

@@ -36,7 +36,7 @@
     color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
-.navigation-menu__trigger:hover {
+.navigation-menu__trigger:hover:not([aria-disabled="true"]) {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
@@ -50,6 +50,11 @@
   background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
+.navigation-menu__trigger[aria-disabled="true"] {
+  opacity: var(--sigvelo-recipe-disabled-opacity);
+  cursor: not-allowed;
+}
+
 .navigation-menu__icon {
   display: inline-flex;
   transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);

package/dist/styles/number-field.css

@@ -22,7 +22,7 @@
   z-index: 1;
 }
 
-.number-field__input:disabled {
+.number-field__input[data-disabled] {
   opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
 }
@@ -64,14 +64,14 @@
   border-end-end-radius: var(--sigvelo-radius-md);
 }
 
-.number-field__decrement:hover,
-.number-field__increment:hover {
+.number-field__decrement:hover:not([data-disabled]),
+.number-field__increment:hover:not([data-disabled]) {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
-.number-field__decrement:active:not(:disabled),
-.number-field__increment:active:not(:disabled) {
+.number-field__decrement:active:not([data-disabled]),
+.number-field__increment:active:not([data-disabled]) {
   translate: 0 var(--sigvelo-motion-distance-xs);
 }
 
@@ -93,10 +93,10 @@
   z-index: 1;
 }
 
-.number-field__decrement:disabled,
-.number-field__increment:disabled {
+.number-field__decrement[data-disabled],
+.number-field__increment[data-disabled] {
   opacity: var(--sigvelo-recipe-disabled-opacity);
-  pointer-events: none;
+  cursor: not-allowed;
 }
 
 .number-field__scrub-area {

package/dist/styles/plan.css

@@ -27,7 +27,7 @@
 .plan__description {
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.5;
+  line-height: var(--sigvelo-leading-normal);
 }
 
 .plan__content {
@@ -117,7 +117,7 @@
 .plan__step-description {
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.5;
+  line-height: var(--sigvelo-leading-normal);
 }
 
 @media (forced-colors: active) {

package/dist/styles/popover.css

@@ -3,10 +3,6 @@
   background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 50%);
 }
 
-.popover__positioner {
-  outline: none;
-}
-
 .popover__popup {
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
 
@@ -19,7 +15,7 @@
   margin-block-end: var(--sigvelo-spacing-1);
   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);
 }
 
@@ -29,38 +25,6 @@
   margin-block-end: var(--sigvelo-spacing-2);
 }
 
-.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;
-  min-block-size: var(--sigvelo-recipe-control-height);
-  padding-block: 0;
-  padding-inline: var(--sigvelo-recipe-control-padding-inline);
+.popover__close--default {
   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-text-muted);
-  background-color: transparent;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  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);
-}
-
-.popover__close:not(.button):hover {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
-.popover__close:not(.button):focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }

package/dist/styles/pricing-page.css

@@ -18,7 +18,7 @@
   font-family: inherit;
   font-size: 2.5rem;
   font-weight: 700;
-  line-height: 1.2;
+  line-height: var(--sigvelo-leading-tight);
   color: var(--sigvelo-color-text);
   margin: 0 0 var(--sigvelo-spacing-3);
 }

package/dist/styles/progress.css

@@ -18,8 +18,8 @@
 
 /* Indeterminate animation */
 
-.progress[data-state="indeterminate"] .progress__indicator {
-  inline-size: 50% !important;
+.progress[data-indeterminate] .progress__indicator {
+  inline-size: 50%;
   animation: progress-indeterminate 1.5s var(--sigvelo-motion-ease-change) infinite;
 }
 
@@ -33,13 +33,13 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .progress[data-state="indeterminate"] .progress__indicator {
+  .progress[data-indeterminate] .progress__indicator {
     animation: none;
     transform: none;
   }
 }
 
-:root[data-motion="reduce"] .progress[data-state="indeterminate"] .progress__indicator {
+:root[data-motion="reduce"] .progress[data-indeterminate] .progress__indicator {
   animation: none;
   transform: none;
 }