@mcp-b/react-components 0.20.5 → 0.21.0

package/dist/styles/field.css

@@ -94,7 +94,7 @@
 .field__description {
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
   color: var(--sigvelo-color-text-muted);
   margin: 0;
 }
@@ -102,7 +102,7 @@
 .field__error {
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
   color: var(--sigvelo-color-danger-bg);
   margin: 0;
   opacity: 1;

package/dist/styles/index.css

@@ -34,11 +34,13 @@
 @import "./combobox.css" layer(components);
 @import "./context-menu.css" layer(components);
 @import "./dialog.css" layer(components);
+@import "./empty-state.css" layer(components);
 @import "./field.css" layer(components);
 @import "./fieldset.css" layer(components);
 @import "./form.css" layer(components);
 @import "./github-motion-mark.css" layer(components);
 @import "./input.css" layer(components);
+@import "./kbd.css" layer(components);
 @import "./label.css" layer(components);
 @import "./marker.css" layer(components);
 @import "./media-preview-card.css" layer(components);
@@ -61,6 +63,7 @@
 @import "./select.css" layer(components);
 @import "./separator.css" layer(components);
 @import "./slider.css" layer(components);
+@import "./status-pill.css" layer(components);
 @import "./stepper.css" layer(components);
 @import "./switch.css" layer(components);
 @import "./tabs.css" layer(components);

package/dist/styles/inline-citation.css

@@ -81,7 +81,7 @@
   overflow-wrap: anywhere;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
 }
 
 .inline-citation__metadata {

package/dist/styles/kbd.css

@@ -0,0 +1,40 @@
+/*
+ * Everything here resolves from currentColor, which is what lets one chip work
+ * on a page surface and on the inverted surface of a tooltip. A fixed
+ * neutral background is legible on exactly one of those.
+ *
+ * Codex renders its keys at tertiary text and strips the shadow its base sheet
+ * applies, so the resting state here is quiet by default rather than quieted
+ * at each call site.
+ */
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--sigvelo-spacing-5);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-spacing-1);
+  font-family: var(--sigvelo-font-mono);
+  /* em, not a type step: a key sits inside a label and should track whatever
+     size that label is set at. */
+  font-size: 0.75em;
+  line-height: var(--sigvelo-text-xs-leading);
+  /* currentcolor in the color property is the *inherited* color, so this dims
+     whatever the surface already set. In every declaration below it, though,
+     currentcolor is this new value — which is why nothing here names a
+     specific text token. Naming one would pin the chip to a light surface and
+     lose the tooltip. */
+  color: color-mix(in oklab, currentcolor, transparent 25%);
+  background-color: color-mix(in oklab, currentcolor, transparent 90%);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    color-mix(in oklab, currentcolor, transparent 82%);
+  border-radius: var(--sigvelo-radius-sm);
+  white-space: nowrap;
+}
+
+@media (forced-colors: active) {
+  .kbd {
+    color: ButtonText;
+    border-color: ButtonText;
+  }
+}

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

@@ -15,7 +15,7 @@
 }
 
 .media-preview-card:is(:hover, :focus-within) {
-  box-shadow: var(--sigvelo-shadow-md);
+  box-shadow: var(--sigvelo-elevation-floating);
 }
 
 .media-preview-card:has(> :is(a, button):focus-visible) {
@@ -73,8 +73,10 @@
     var(--sigvelo-color-neutral-border);
   border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text);
-  background: color-mix(in oklab, var(--sigvelo-color-surface), transparent 12%);
-  box-shadow: var(--sigvelo-shadow-sm);
+  /* Sits over arbitrary artwork, so it keeps the hard border and takes the
+     translucent surface the glass token already defines. */
+  background: var(--sigvelo-color-surface-glass);
+  box-shadow: var(--sigvelo-elevation-floating);
   translate: -50% -50%;
   scale: 1;
   transition:

package/dist/styles/message-scroller.css

@@ -42,11 +42,11 @@
 .message-scroller__button {
   position: absolute;
   inset-inline-start: 50%;
-  inset-block-end: var(--message-scroller-button-inset-block-end, 1rem);
+  inset-block-end: var(--message-scroller-button-inset-block-end, var(--sigvelo-spacing-4));
   z-index: 1;
   translate: -50% 0;
-  border-radius: 999rem;
-  box-shadow: var(--sigvelo-shadow-sm);
+  border-radius: var(--sigvelo-radius-full);
+  box-shadow: var(--sigvelo-elevation-floating);
   transition:
     opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
     scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
@@ -54,7 +54,7 @@
 }
 
 .message-scroller__button[data-direction="start"] {
-  inset-block-start: 1rem;
+  inset-block-start: var(--sigvelo-spacing-4);
   inset-block-end: auto;
 }
 

package/dist/styles/message.css

@@ -26,7 +26,7 @@
   padding-inline: var(--sigvelo-spacing-3);
   border-radius: var(--sigvelo-radius-lg);
   font-size: var(--sigvelo-text-sm);
-  line-height: 1.55;
+  line-height: var(--sigvelo-leading-normal);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text);
   overflow-wrap: anywhere;
@@ -139,15 +139,13 @@
   inline-size: min(42rem, 85%);
   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-muted);
+  background-color: var(--sigvelo-color-surface-raised);
   border-radius: var(--sigvelo-radius-lg);
-  box-shadow: var(--sigvelo-shadow-sm);
+  box-shadow: var(--sigvelo-elevation-raised);
 }
 
 .message__edit-textarea {
-  min-block-size: 6rem;
+  min-block-size: var(--sigvelo-spacing-24);
   max-block-size: 18rem;
 }
 

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 {
@@ -165,9 +164,13 @@
   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 +279,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 +294,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 +311,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 +461,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 +635,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(
@@ -170,6 +182,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 +261,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 +408,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 +573,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 +808,12 @@
 }
 
 @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-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

@@ -57,7 +57,7 @@
 }
 
 .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 +94,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 +103,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;
@@ -149,7 +148,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/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;
+}