@mcp-b/react-components 0.20.5 → 0.22.0

package/dist/styles/model-selector.css

@@ -112,7 +112,7 @@
 
 .model-selector__item:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 var(--sigvelo-focus-width) var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
 }
 
 .model-selector__item[data-selected] {
@@ -126,11 +126,7 @@
 }
 
 .model-selector__empty {
-  padding-block: var(--sigvelo-spacing-4);
-  padding-inline: var(--sigvelo-spacing-3);
-  text-align: center;
-  font-size: var(--sigvelo-text-compact);
-  color: var(--sigvelo-color-text-muted);
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-4);
 }
 
 @media (any-pointer: coarse) {
@@ -166,10 +162,11 @@
   gap: var(--sigvelo-spacing-1);
 }
 
-.model-selector__shortcut {
+/* Prose, not a key. The mono face was a leftover from when this was a <kbd>,
+   and "Workers AI" reads worse in it. */
+.model-selector__source {
   padding-block: var(--sigvelo-spacing-0-5);
   padding-inline: var(--sigvelo-spacing-1-5);
-  font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-2xs);
   color: var(--sigvelo-color-text-muted);
   background-color: var(--sigvelo-color-neutral-bg-subtle);

package/dist/styles/popover.css

@@ -1,5 +1,5 @@
 .popover__backdrop {
-  z-index: 50;
+  z-index: var(--sigvelo-z-overlay);
   background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 50%);
 }
 

package/dist/styles/preview-card.css

@@ -17,7 +17,7 @@
 }
 
 .preview-card__backdrop {
-  z-index: 50;
+  z-index: var(--sigvelo-z-overlay);
 }
 
 .preview-card__popup {

package/dist/styles/prompt-input.css

@@ -8,17 +8,17 @@
   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)
-    var(--sigvelo-color-neutral-border-subtle);
+  background-color: var(--sigvelo-color-surface-raised);
+  /* The composer's edge is the hairline ring inside --sigvelo-elevation-floating,
+     not a border: a 0.5px ring stays crisp at any zoom and does not add a pixel
+     of layout. Forced colors restores a real border at the end of this file. */
+  border: 0;
   border-radius: calc(var(--sigvelo-radius-xl) + var(--sigvelo-spacing-2));
-  box-shadow: var(--sigvelo-shadow-sm);
+  box-shadow: var(--sigvelo-elevation-floating);
   font-family: inherit;
   color: var(--sigvelo-color-text);
-  transition:
-    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+  transition: box-shadow var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .prompt-input__recording {
@@ -82,8 +82,7 @@
 
 /* Keep keyboard focus visible around the complete composer surface. */
 .prompt-input:focus-within {
-  border-color: var(--sigvelo-color-focus);
-  box-shadow: var(--sigvelo-recipe-focus-shadow-subtle);
+  box-shadow: var(--sigvelo-recipe-focus-shadow-subtle), var(--sigvelo-elevation-floating);
 }
 
 .prompt-input__header {
@@ -94,6 +93,30 @@
   min-block-size: var(--sigvelo-spacing-6);
 }
 
+/* A supporting tray shares one material and overlap contract whether it sits
+   above the composer for queued work or below it for first-turn utilities. */
+:where(.prompt-input__tray) {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--sigvelo-control-height-xl);
+  min-inline-size: 0;
+  gap: var(--sigvelo-spacing-2);
+  margin-inline: var(--sigvelo-spacing-5);
+  padding: var(--sigvelo-spacing-1);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.prompt-input__tray[data-side="top"] {
+  margin-block-end: calc(-1 * var(--sigvelo-border-width));
+  border-radius: var(--sigvelo-radius-2xl) var(--sigvelo-radius-2xl) 0 0;
+}
+
+.prompt-input__tray[data-side="bottom"] {
+  margin-block-start: calc(-1 * var(--sigvelo-border-width));
+  border-radius: 0 0 var(--sigvelo-radius-2xl) var(--sigvelo-radius-2xl);
+}
+
 .prompt-input__attachments {
   display: flex;
   flex-wrap: wrap;
@@ -123,8 +146,8 @@
 
 .prompt-input__attachment-zoom {
   display: block;
+  min-block-size: 0;
   padding: 0;
-  border: none;
   background: none;
   cursor: zoom-in;
 }
@@ -141,18 +164,6 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.prompt-input__attachment-remove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--sigvelo-spacing-0-5);
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  background: none;
-  color: var(--sigvelo-color-text-muted);
-  cursor: pointer;
-}
-
 .prompt-input__attachment[data-image] .prompt-input__attachment-remove {
   position: absolute;
   inset-block-start: var(--sigvelo-spacing-0-5);
@@ -160,14 +171,18 @@
   background-color: color-mix(in oklab, var(--sigvelo-color-surface), transparent 20%);
 }
 
-.prompt-input__attachment-remove:hover {
+.prompt-input__attachment-remove:hover:not([data-disabled]) {
   color: var(--sigvelo-color-text);
   background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 8%);
 }
 
+/* Absorbs any height the composer is given beyond its content, so a tall
+   composer grows its typing area and keeps the footer controls on the floor
+   instead of stranding them mid-box. */
 .prompt-input__body {
   display: flex;
   align-items: stretch;
+  flex: 1 1 auto;
   flex-wrap: wrap;
   gap: var(--sigvelo-spacing-1);
   inline-size: 100%;
@@ -276,10 +291,6 @@
   content: "";
 }
 
-.prompt-input__dictation[data-starting] .prompt-input__dictation-icon {
-  animation: sigvelo-icon-spin 900ms linear infinite;
-}
-
 @media (prefers-reduced-motion: reduce) {
   .prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before {
     transition: none;
@@ -295,19 +306,10 @@
   display: inline-block;
 }
 
+/* Spacing only. The chip itself is .kbd, which derives from currentColor and
+   so already reads correctly against the tooltip's inverted surface. */
 .prompt-input__tooltip-shortcut {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   margin-inline-start: var(--sigvelo-spacing-2);
-  padding-block: 0.0625rem;
-  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;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  opacity: 0.85;
 }
 
 .prompt-input__submit {
@@ -321,10 +323,6 @@
   color: var(--sigvelo-color-text);
 }
 
-.prompt-input__submit-spinner {
-  animation: sigvelo-icon-spin 900ms linear infinite;
-}
-
 .prompt-input__action-menu {
   min-inline-size: 12rem;
 }
@@ -475,17 +473,15 @@
 
 .prompt-input__hover-card-content {
   position: absolute;
-  z-index: 20;
+  z-index: var(--sigvelo-z-chrome);
   inset-block-start: calc(100% + var(--sigvelo-spacing-1-5));
   inset-inline-start: 0;
   min-inline-size: 14rem;
   padding: var(--sigvelo-spacing-3);
   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);
+  background-color: var(--sigvelo-color-surface-raised);
   border-radius: var(--sigvelo-radius-md);
-  box-shadow: var(--sigvelo-shadow-md);
+  box-shadow: var(--sigvelo-elevation-overlay);
 }
 
 .prompt-input__tab-label {
@@ -651,12 +647,6 @@
   margin-inline-start: auto;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .prompt-input__submit-spinner {
-    animation: none;
-  }
-}
-
 @media (forced-colors: active) {
   .prompt-input {
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;

package/dist/styles/queue.css

@@ -142,7 +142,7 @@
   gap: var(--sigvelo-spacing-1);
   font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
   transition:
     color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
     text-decoration-color var(--sigvelo-motion-duration-interaction)
@@ -153,7 +153,7 @@
   margin: 0;
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
   transition:
     color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
     text-decoration-color var(--sigvelo-motion-duration-interaction)

package/dist/styles/recipes.css

@@ -8,6 +8,7 @@
   --sigvelo-recipe-control-padding-inline: var(--sigvelo-density-compact-control-padding-inline);
   --sigvelo-recipe-control-gap: var(--sigvelo-density-compact-control-gap);
   --sigvelo-recipe-control-font-size: var(--sigvelo-density-compact-control-font-size);
+  --sigvelo-recipe-control-line-height: var(--sigvelo-density-compact-control-line-height);
   --sigvelo-recipe-control-icon-size: var(--sigvelo-density-compact-control-icon-size);
   --sigvelo-recipe-control-radius: var(--sigvelo-radius-md);
   --sigvelo-recipe-field-background: var(--sigvelo-color-canvas);
@@ -20,11 +21,17 @@
   --sigvelo-recipe-invalid-focus-shadow:
     0 0 0 2px var(--sigvelo-color-canvas),
     0 0 0 4px color-mix(in oklab, var(--sigvelo-color-danger-bg), transparent 80%);
+  /* The same ring drawn inward, for elements that fill their container and
+     have no room outside to grow one: menu items, tab panels, listbox rows. */
+  --sigvelo-recipe-focus-shadow-inset: inset 0 0 0 var(--sigvelo-focus-width)
+    var(--sigvelo-color-focus);
   --sigvelo-recipe-disabled-opacity: 0.5;
-  --sigvelo-recipe-surface-background: var(--sigvelo-color-surface);
-  --sigvelo-recipe-surface-border: var(--sigvelo-color-neutral-border-muted);
-  --sigvelo-recipe-surface-radius: var(--sigvelo-radius-md);
-  --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-lg);
+  --sigvelo-recipe-surface-background: var(--sigvelo-color-surface-raised);
+  /* The overlay elevation carries its own hairline ring, so the border is a
+     forced-colors affordance rather than the visible edge. */
+  --sigvelo-recipe-surface-border: transparent;
+  --sigvelo-recipe-surface-radius: var(--sigvelo-radius-lg);
+  --sigvelo-recipe-surface-shadow: var(--sigvelo-elevation-overlay);
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1);
   --sigvelo-recipe-popup-min-inline-size: 10rem;
   --sigvelo-recipe-popup-arrow-size: var(--sigvelo-spacing-3);
@@ -33,7 +40,8 @@
   --sigvelo-recipe-row-padding-inline: var(--sigvelo-density-compact-control-padding-inline);
   --sigvelo-recipe-row-gap: var(--sigvelo-density-compact-control-gap);
   --sigvelo-recipe-row-font-size: var(--sigvelo-density-compact-control-font-size);
-  --sigvelo-recipe-row-radius: var(--sigvelo-radius-sm);
+  --sigvelo-recipe-row-line-height: var(--sigvelo-density-compact-control-line-height);
+  --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
   --sigvelo-recipe-group-label-padding-block: var(--sigvelo-spacing-1-5);
   --sigvelo-recipe-group-label-padding-inline: var(--sigvelo-recipe-row-padding-inline);
   --sigvelo-recipe-group-label-color: var(--sigvelo-color-text-muted);
@@ -46,6 +54,7 @@
   --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
   --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
   --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-sm);
+  --sigvelo-recipe-control-line-height: var(--sigvelo-control-line-height-sm);
   --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-sm);
 }
 
@@ -53,6 +62,7 @@
   --sigvelo-recipe-control-height: var(--sigvelo-control-height-md);
   --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-md);
   --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-control-line-height: var(--sigvelo-control-line-height-md);
   --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-md);
 }
 
@@ -60,6 +70,7 @@
   --sigvelo-recipe-control-height: var(--sigvelo-control-height-lg);
   --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-lg);
   --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-lg);
+  --sigvelo-recipe-control-line-height: var(--sigvelo-control-line-height-lg);
   --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-lg);
 }
 
@@ -97,13 +108,14 @@
  */
 :where([data-recipe~="composer-command-surface"]) {
   --sigvelo-recipe-surface-radius: var(--sigvelo-radius-xl);
-  --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-xl);
+  --sigvelo-recipe-surface-shadow: var(--sigvelo-elevation-overlay);
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1);
   --sigvelo-recipe-row-min-height: var(--sigvelo-density-compact-control-height);
   --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-1);
   --sigvelo-recipe-row-padding-inline: var(--sigvelo-density-compact-control-padding-inline);
   --sigvelo-recipe-row-gap: var(--sigvelo-density-compact-control-gap);
   --sigvelo-recipe-row-font-size: var(--sigvelo-density-compact-control-font-size);
+  --sigvelo-recipe-row-line-height: var(--sigvelo-density-compact-control-line-height);
   --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
   --sigvelo-recipe-group-label-padding-block: var(--sigvelo-spacing-2);
   --sigvelo-recipe-group-label-padding-inline: var(
@@ -138,6 +150,14 @@
   border-radius: var(--sigvelo-radius-md);
 }
 
+:where([data-recipe~="application-plane"]) {
+  margin-inline: var(--sigvelo-spacing-2);
+  margin-block-end: var(--sigvelo-spacing-2);
+  border-radius: var(--sigvelo-radius-lg);
+  background: var(--sigvelo-color-surface);
+  box-shadow: var(--sigvelo-elevation-floating);
+}
+
 :where([data-recipe~="disclosure-stack"]) {
   display: flex;
   flex-direction: column;
@@ -170,6 +190,47 @@
   mask-repeat: no-repeat;
 }
 
+/* The inline-axis partner, for toolbars, tab strips, and chip rows that scroll
+   sideways. Gradients take physical directions only, so start/end are swapped
+   under [dir="rtl"] rather than expressed logically. */
+:where([data-recipe~="scroll-fade-x"]) {
+  --sigvelo-scroll-fade-start: 0px;
+  --sigvelo-scroll-fade-end: 0px;
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--sigvelo-scroll-fade-start),
+    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--sigvelo-scroll-fade-start),
+    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
+    transparent 100%
+  );
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+:where([dir="rtl"] [data-recipe~="scroll-fade-x"], [data-recipe~="scroll-fade-x"][dir="rtl"]) {
+  -webkit-mask-image: linear-gradient(
+    to left,
+    transparent 0,
+    #000 var(--sigvelo-scroll-fade-start),
+    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to left,
+    transparent 0,
+    #000 var(--sigvelo-scroll-fade-start),
+    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
+    transparent 100%
+  );
+}
+
 @media (any-pointer: coarse) {
   :where(:root, [data-theme="light"], [data-theme="dark"]) {
     --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
@@ -208,7 +269,7 @@
   padding-inline: var(--sigvelo-recipe-control-padding-inline);
   font-family: inherit;
   font-size: var(--sigvelo-recipe-control-font-size);
-  line-height: var(--sigvelo-leading-compact);
+  line-height: var(--sigvelo-recipe-control-line-height);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-recipe-field-background);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-recipe-field-border);
@@ -355,7 +416,7 @@
   padding-inline: var(--sigvelo-recipe-row-padding-inline);
   font-family: inherit;
   font-size: var(--sigvelo-recipe-row-font-size);
-  line-height: var(--sigvelo-leading-compact);
+  line-height: var(--sigvelo-recipe-row-line-height);
   color: var(--sigvelo-color-text);
   text-decoration: none;
   border-radius: var(--sigvelo-recipe-row-radius);
@@ -520,7 +581,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-compact);
+  line-height: var(--sigvelo-recipe-control-line-height);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-canvas);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -755,6 +816,19 @@
 }
 
 @media (forced-colors: active) {
+  /* Forced colors drops box-shadow, taking the hairline ring that normally
+     draws an overlay's edge with it. Give the border back its color. */
+  :where(:root, [data-theme="light"], [data-theme="dark"]) {
+    --sigvelo-recipe-surface-border: CanvasText;
+  }
+
+  :where([data-recipe~="application-plane"]) {
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: none;
+  }
+
   :where(
     [data-slot="input"],
     [data-slot="select-trigger"],

package/dist/styles/resizable-side-panel.css

@@ -7,7 +7,7 @@
 .resizable-side-panel__handle {
   position: absolute;
   inset-block: 0;
-  z-index: 25;
+  z-index: var(--sigvelo-z-panel);
   inline-size: var(--sigvelo-spacing-6);
   padding: 0;
   border: 0;

package/dist/styles/responsive-sidebar-shell.css

@@ -5,12 +5,15 @@
   min-block-size: 0;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
+  background: var(--sigvelo-color-surface-under);
+}
+
+.responsive-sidebar-shell > .app-top-bar {
+  background: var(--sigvelo-color-surface-under);
 }
 
 .responsive-sidebar-shell__frame {
-  --responsive-sidebar-mobile-w: min(80cqi, 22rem);
   --responsive-sidebar-closed-translate: -100%;
-  --responsive-sidebar-main-translate: var(--responsive-sidebar-mobile-w);
 
   position: relative;
   isolation: isolate;
@@ -21,7 +24,7 @@
   grid-template-columns: var(--resizable-side-panel-size, 16rem) minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr);
   overflow: hidden;
-  background: var(--sigvelo-color-canvas);
+  background: var(--sigvelo-color-surface-under);
   color: var(--sigvelo-color-text);
   font-family: inherit;
   transition: grid-template-columns var(--sigvelo-motion-duration-layout)
@@ -30,7 +33,6 @@
 
 .responsive-sidebar-shell__frame:dir(rtl) {
   --responsive-sidebar-closed-translate: 100%;
-  --responsive-sidebar-main-translate: calc(var(--responsive-sidebar-mobile-w) * -1);
 }
 
 .responsive-sidebar-shell__sidebar,
@@ -56,8 +58,16 @@
   display: none;
 }
 
+@media (forced-colors: active) {
+  .responsive-sidebar-shell,
+  .responsive-sidebar-shell__frame {
+    background: canvas;
+    color: canvastext;
+  }
+}
+
 .responsive-sidebar-shell__resizer {
-  z-index: 25;
+  z-index: var(--sigvelo-z-panel);
 }
 
 .responsive-sidebar-shell[data-sidebar-open="false"] > .responsive-sidebar-shell__frame {
@@ -94,7 +104,7 @@
 
   .responsive-sidebar-shell__sidebar {
     position: relative;
-    z-index: 23;
+    z-index: calc(var(--sigvelo-z-chrome) + 3);
     inset-inline-start: 50%;
     inline-size: min(calc(100cqi - var(--sigvelo-spacing-3)), 34rem);
     max-inline-size: none;
@@ -103,10 +113,9 @@
     align-self: start;
     margin-block-start: var(--sigvelo-spacing-1);
     overflow: hidden;
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-      var(--sigvelo-color-neutral-border-subtle);
     border-radius: var(--sigvelo-radius-lg);
-    box-shadow: var(--sigvelo-shadow-md);
+    background-color: var(--sigvelo-color-surface-raised);
+    box-shadow: var(--sigvelo-elevation-overlay);
     visibility: visible;
     opacity: 1;
     translate: -50% 0;
@@ -133,10 +142,6 @@
     transition-timing-function: var(--sigvelo-motion-ease-exit);
   }
 
-  .responsive-sidebar-shell__main {
-    transition: none;
-  }
-
   .responsive-sidebar-shell[data-sidebar-open="true"]
     > .responsive-sidebar-shell__frame
     > .responsive-sidebar-shell__main {
@@ -149,7 +154,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    z-index: 22;
+    z-index: calc(var(--sigvelo-z-chrome) + 2);
     display: block;
     min-inline-size: 100%;
     padding: 0;

package/dist/styles/scrollbars.css

@@ -1,12 +1,41 @@
-:where(.message__content pre, .observability-table-wrap) {
+/*
+ * Thin scrollbars on every scroll container the system owns.
+ *
+ * A default platform scrollbar inside a 15px-radius popup is the single
+ * loudest thing on the screen, so menus, lists, panels, and code blocks all
+ * take the same quiet treatment: thin, colored from the neutral ramp, and
+ * gutter-stable where a scrollbar appearing would otherwise shift text.
+ *
+ * Only containers that actually scroll are listed. Adding one means adding it
+ * here, not restating scrollbar-color in the component file.
+ */
+:where(
+  .message__content pre,
+  .observability-table-wrap,
+  [data-recipe~="wide-scroll-picker"],
+  [data-slot="autocomplete-list"],
+  [data-slot="combobox-list"],
+  [data-slot="context-menu-content"],
+  [data-slot="dialog-content"],
+  [data-slot="dropdown-menu-content"],
+  [data-slot="menubar-content"],
+  [data-slot="popover-content"],
+  [data-slot="select-content"]
+) {
   --scrollbar-thumb: var(--app-scrollbar-thumb, var(--sigvelo-color-neutral-border-muted));
-  --scrollbar-track: var(--app-scrollbar-track, var(--sigvelo-color-neutral-bg-subtle));
+  --scrollbar-track: var(--app-scrollbar-track, transparent);
 
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-  scrollbar-gutter: stable;
   scrollbar-width: thin;
 }
 
+/* Reserving the gutter only matters where text would otherwise reflow. */
+:where(.message__content pre, .observability-table-wrap) {
+  --scrollbar-track: var(--app-scrollbar-track, var(--sigvelo-color-neutral-bg-subtle));
+
+  scrollbar-gutter: stable;
+}
+
 :where(.message__content pre) {
   overflow-x: auto;
   overflow-y: clip;

package/dist/styles/search-field.css

@@ -1,3 +1,12 @@
+.search-field {
+  --sigvelo-recipe-control-height: var(--sigvelo-control-height-md);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-md);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-control-line-height: var(--sigvelo-control-line-height-md);
+  --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-md);
+  --sigvelo-recipe-control-radius: var(--sigvelo-radius-full);
+}
+
 .search-field__control {
   position: relative;
 }

package/dist/styles/sources.css

@@ -67,7 +67,7 @@
 .sources__link-description {
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;

package/dist/styles/status-pill.css

@@ -0,0 +1,39 @@
+/*
+ * The chip itself is `.badge`. Only the indicator lives here.
+ */
+.status-pill__dot {
+  inline-size: var(--sigvelo-spacing-1-5);
+  block-size: var(--sigvelo-spacing-1-5);
+  flex-shrink: 0;
+  border-radius: var(--sigvelo-radius-circle);
+  /* currentColor, so the dot follows whichever badge color it was given rather
+     than needing a matching set of its own. */
+  background-color: currentColor;
+}
+
+.status-pill[data-busy] .status-pill__dot {
+  animation: sigvelo-status-pulse var(--sigvelo-motion-duration-pulse) ease-in-out infinite;
+}
+
+@keyframes sigvelo-status-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* The dot stays; only its breathing stops. A still dot still reads as a state
+   indicator, which is the part carrying meaning. */
+@media (prefers-reduced-motion: reduce) {
+  .status-pill[data-busy] .status-pill__dot {
+    animation: none;
+  }
+}
+
+:root[data-motion="reduce"] .status-pill[data-busy] .status-pill__dot {
+  animation: none;
+}

package/dist/styles/stepper.css

@@ -119,7 +119,7 @@
 }
 
 .stepper__indicator[data-loading] .stepper__indicator-content {
-  animation: sigvelo-icon-spin 800ms linear infinite;
+  animation: sigvelo-icon-spin var(--sigvelo-motion-duration-spin) linear infinite;
 }
 
 .stepper__separator {
@@ -170,7 +170,7 @@
   margin-block-start: calc(var(--sigvelo-spacing-1) - var(--sigvelo-border-width));
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
-  line-height: 1.35;
+  line-height: var(--sigvelo-leading-snug);
 }
 
 .stepper__panel {