@mcp-b/react-components 0.41.0 → 0.43.0

package/dist/styles/agent-chat.css

@@ -5,10 +5,6 @@
      at each use site. */
   container: agent-chat / inline-size;
   position: relative;
-  inline-size: 100%;
-  block-size: 100%;
-  min-inline-size: 0;
-  min-block-size: 0;
   /* The colour the lane rests on. Hosts that seat the conversation on the
      underlay rather than a plane of its own inherit --agent-chat-surface down
      to here, so the composer's scrim dissolves into what is actually behind
@@ -36,24 +32,24 @@
 
   min-inline-size: 0;
   max-inline-size: 100%;
-  /* The virtual wrapper is content-box (its JS-set height must exclude the
-     block padding), so the inline gutters land OUTSIDE this size — subtract
-     them from the full-width term or the padding box overflows the viewport
-     and end-aligned user rows hang past the right edge. */
+  /* Codex thread column: `mx-auto w-full max-w-(--thread-content-max-width)
+     px-toolbar`. Subtract the inset from the measure so content-box padding
+     cannot overflow the scroller or eat the composer clearance. */
+  --agent-chat-used-column-inset: var(--agent-chat-column-inset, var(--sigvelo-spacing-4));
   inline-size: min(
-    100% - 2 * var(--sigvelo-spacing-4),
-    var(--agent-chat-content-max-inline-size, 64rem)
+    calc(100% - 2 * var(--agent-chat-used-column-inset)),
+    var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))
   );
   margin-inline: auto;
   /* Clearance = composer + its scrim band, so a transcript resting at the
      bottom never sits inside the fade. */
   padding-block: var(--message-scroller-virtual-block-start)
     calc(var(--agent-chat-composer-size, 5rem) + var(--agent-chat-composer-scrim-fade, 2.5rem));
-  padding-inline: var(--sigvelo-spacing-4);
+  padding-inline: var(--agent-chat-used-column-inset);
 }
 
 .agent-chat[data-composer-hidden] .agent-chat__transcript-content {
-  padding-block-end: var(--sigvelo-spacing-4);
+  padding-block-end: var(--sigvelo-layout-gutter);
 }
 
 .agent-chat__scroll-button {
@@ -97,19 +93,24 @@
   );
 
   display: grid;
-  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
-  inline-size: min(100%, var(--agent-chat-content-max-inline-size, 64rem));
+  align-content: start;
+  grid-template-rows: var(--sigvelo-layout-track-fill) auto var(--sigvelo-layout-track-fill);
+  inline-size: min(
+    100%,
+    var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))
+  );
   min-block-size: 100%;
   margin-inline: auto;
   padding-block: max(var(--agent-chat-start-screen-padding-block), env(safe-area-inset-top, 0px))
     max(var(--agent-chat-start-screen-padding-block), env(safe-area-inset-bottom, 0px));
-  padding-inline: max(var(--sigvelo-spacing-4), env(safe-area-inset-left, 0px))
-    max(var(--sigvelo-spacing-4), env(safe-area-inset-right, 0px));
+  padding-inline: max(var(--sigvelo-layout-gutter), env(safe-area-inset-left, 0px))
+    max(var(--sigvelo-layout-gutter), env(safe-area-inset-right, 0px));
 }
 
 .agent-chat-start-screen__primary {
   grid-row: 2;
   display: grid;
+  align-content: start;
   gap: var(--sigvelo-spacing-6);
   min-inline-size: 0;
 }
@@ -117,7 +118,7 @@
 .agent-chat-start-screen__heading {
   margin: 0;
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-2xl);
+  font-size: var(--sigvelo-text-lg);
   font-weight: var(--sigvelo-font-weight-normal);
   letter-spacing: var(--sigvelo-tracking-normal);
   line-height: var(--sigvelo-text-lg-leading);
@@ -127,10 +128,16 @@
 
 .agent-chat-start-screen__composer {
   display: grid;
+  align-content: start;
   min-inline-size: 0;
 }
 
 .agent-chat-start-screen__composer > .agent-chat__composer {
+  /* Grid item z-index, not isolation: the tray is a sibling and must paint
+     behind the card. isolation: isolate on .agent-chat__composer trapped the
+     inner z-index and left the tray as a second pill. */
+  isolation: auto;
+  z-index: 1;
   position: static;
   padding: 0;
   background: none;
@@ -149,9 +156,15 @@
 }
 
 /* The first-turn utility tray owns its buttons' treatment so every host gets
-   the same quiet look without per-app classes. Space-between seats one action
-   per slot — left, middle, right. */
+   the same quiet look without per-app classes. Hug the actions — a short
+   viewport (Storybook addons, a short side panel) used to stretch this into
+   a vacant slab. Space-between only when there are three slots to fill. */
 .agent-chat-start-screen__composer-tray {
+  align-self: start;
+  justify-content: start;
+}
+
+.agent-chat-start-screen__composer-tray:has(> :nth-child(3):last-child) {
   justify-content: space-between;
 }
 
@@ -190,7 +203,8 @@
   white-space: nowrap;
 }
 
-.agent-chat-start-screen__starters {
+.agent-chat-start-screen__starters,
+.agent-chat-start-screen__lead {
   grid-row: 3;
   align-self: start;
   min-inline-size: 0;
@@ -208,7 +222,7 @@
 
 .agent-chat-starter {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
   align-items: center;
   border-radius: var(--sigvelo-radius-xl);
   transition: background-color var(--sigvelo-motion-duration-interaction)
@@ -227,14 +241,14 @@
   inline-size: 100%;
   min-block-size: var(--sigvelo-control-height-xl);
   min-inline-size: 0;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-gutter);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   background: transparent;
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-base);
+  font-size: var(--sigvelo-text-prose);
   font-weight: var(--sigvelo-font-weight-normal);
-  line-height: var(--sigvelo-leading-relaxed);
+  line-height: var(--sigvelo-text-prose-leading);
   text-align: start;
   white-space: normal;
   transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
@@ -328,7 +342,8 @@
  * need to.
  */
 .agent-chat-start-screen__heading,
-.agent-chat-start-screen__starters {
+.agent-chat-start-screen__starters,
+.agent-chat-start-screen__lead {
   transition:
     opacity var(--sigvelo-motion-duration-disclosure) var(--sigvelo-ease-snappy),
     translate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-ease-snappy),
@@ -344,7 +359,9 @@
 /* Starters are buttons, so fading them is not enough — invisible controls that
    still take a click or a Tab stop are worse than visible ones. */
 .agent-chat-start-screen__content:has(textarea:not(:placeholder-shown))
-  .agent-chat-start-screen__starters {
+  .agent-chat-start-screen__starters,
+.agent-chat-start-screen__content:has(textarea:not(:placeholder-shown))
+  .agent-chat-start-screen__lead {
   visibility: hidden;
   opacity: 0;
 }
@@ -358,8 +375,13 @@
   inset-inline: 0;
   inset-block-end: 0;
   padding-block: 0 max(var(--sigvelo-spacing-6), env(safe-area-inset-bottom, 0px));
-  padding-inline: max(var(--sigvelo-spacing-6), env(safe-area-inset-left, 0px))
-    max(var(--sigvelo-spacing-6), env(safe-area-inset-right, 0px));
+  /* Same column as the transcript (Codex px-toolbar). The pill's own
+     padding lives on .prompt-input. */
+  padding-inline: max(
+      var(--agent-chat-column-inset, var(--sigvelo-spacing-4)),
+      env(safe-area-inset-left, 0px)
+    )
+    max(var(--agent-chat-column-inset, var(--sigvelo-spacing-4)), env(safe-area-inset-right, 0px));
 }
 
 /* Solid behind the composer itself, dissolving upward so passing transcript
@@ -382,7 +404,10 @@
 
 .agent-chat__composer > .prompt-input {
   z-index: 1;
-  inline-size: min(100%, var(--agent-chat-content-max-inline-size, 64rem));
+  inline-size: min(
+    100%,
+    var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))
+  );
   margin-inline: auto;
   padding-block: var(--sigvelo-spacing-3);
 }
@@ -393,7 +418,7 @@
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   margin-block-end: var(--sigvelo-spacing-2);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -407,7 +432,8 @@
   flex-direction: column;
   align-items: stretch;
   inline-size: calc(
-    min(100%, var(--agent-chat-content-max-inline-size, 64rem)) - var(--sigvelo-spacing-10)
+    min(100%, var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))) -
+      var(--sigvelo-spacing-10)
   );
   margin-inline: auto;
 }
@@ -431,8 +457,8 @@
   padding-block: 0;
   padding-inline: var(--sigvelo-spacing-2-5);
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-snug);
+  font-size: var(--sigvelo-text-prose);
+  line-height: var(--sigvelo-text-prose-leading);
 }
 
 .agent-chat__queued-indicator {
@@ -496,13 +522,14 @@
   border-radius: var(--sigvelo-radius-lg);
 }
 
+/* Wrap floor so retry actions stay on their own line. Not --sigvelo-layout-sidebar. */
 .agent-chat__turn-error-message {
   min-inline-size: min(100%, 16rem);
   flex: 1;
   margin: 0;
   overflow-wrap: anywhere;
-  font-size: var(--sigvelo-text-sm);
-  line-height: var(--sigvelo-leading-normal);
+  font-size: var(--sigvelo-text-prose);
+  line-height: var(--sigvelo-text-prose-leading);
 }
 
 .agent-chat__turn-error-actions {
@@ -537,7 +564,8 @@
    alignment off width top-aligned the start screen in a pane with hundreds of
    spare pixels under it. Only the height query below drops the centring, and
    only where there is genuinely no room for it. */
-@container agent-chat (width <= 36rem) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container agent-chat (inline-size <= 36rem) {
   .agent-chat__transcript-content {
     /* A notch pushes the first row down only as far as it must: the desktop
        inset already clears shallow insets, so only deeper ones add height. */
@@ -546,21 +574,22 @@
       calc(var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px))
     );
 
+    --agent-chat-used-column-inset: var(--agent-chat-column-inset, var(--sigvelo-spacing-2));
     inline-size: min(
-      100% - 2 * var(--sigvelo-spacing-3),
-      var(--agent-chat-content-max-inline-size, 64rem)
+      calc(100% - 2 * var(--agent-chat-used-column-inset)),
+      var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))
     );
-    padding-inline: var(--sigvelo-spacing-3);
-  }
-
-  .agent-chat .message[data-from="assistant"] .message__content {
-    inline-size: 100%;
+    /* Codex Chrome extension: [--padding-toolbar:calc(var(--spacing)*2)] = 8px. */
+    padding-inline: var(--agent-chat-used-column-inset);
   }
 
   .agent-chat__composer {
-    padding-block-end: max(var(--sigvelo-spacing-4), env(safe-area-inset-bottom, 0px));
-    padding-inline: max(var(--sigvelo-spacing-3), env(safe-area-inset-left, 0px))
-      max(var(--sigvelo-spacing-3), env(safe-area-inset-right, 0px));
+    padding-block-end: max(var(--sigvelo-layout-stack), env(safe-area-inset-bottom, 0px));
+    padding-inline: max(
+        var(--agent-chat-column-inset, var(--sigvelo-spacing-2)),
+        env(safe-area-inset-left, 0px)
+      )
+      max(var(--agent-chat-column-inset, var(--sigvelo-spacing-2)), env(safe-area-inset-right, 0px));
   }
 
   .agent-chat-start-screen__content {
@@ -568,7 +597,7 @@
   }
 
   .agent-chat-start-screen__heading {
-    font-size: var(--sigvelo-text-2xl);
+    font-size: var(--sigvelo-text-lg);
   }
 
   .agent-chat-starter__label {
@@ -578,14 +607,6 @@
   }
 }
 
-/* Side-panel widths: tray labels yield to the icons; each action keeps its
-   accessible name. */
-@container agent-chat (width <= 30rem) {
-  .agent-chat-start-screen__composer-tray > .button > span:not(.app-icon-stack) {
-    display: none;
-  }
-}
-
 @media (max-height: 40rem) {
   .agent-chat-start-screen__content {
     --agent-chat-start-screen-padding-block: var(--sigvelo-spacing-5);
@@ -597,7 +618,8 @@
     grid-row: 1;
   }
 
-  .agent-chat-start-screen__starters {
+  .agent-chat-start-screen__starters,
+  .agent-chat-start-screen__lead {
     grid-row: 2;
   }
 }

package/dist/styles/agent-connection.css

@@ -1,4 +1,5 @@
 .agent-connect {
+  container: agent-connect / inline-size;
   display: grid;
   gap: var(--sigvelo-spacing-2);
   min-inline-size: 0;
@@ -7,6 +8,7 @@
 
 .agent-connect__header {
   display: flex;
+  /* Form header, not --sigvelo-layout-cluster. */
   gap: var(--sigvelo-spacing-2);
   align-items: flex-start;
   min-inline-size: 0;
@@ -51,7 +53,7 @@
 
 .agent-connect .agent-connect__targets {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(4, var(--sigvelo-layout-track-fill));
   min-inline-size: 0;
   margin: 0;
   padding: var(--sigvelo-spacing-1);
@@ -129,14 +131,18 @@
 .agent-connect-popover {
   inline-size: min(36rem, calc(100dvi - 1.5rem));
   max-inline-size: min(36rem, calc(100dvi - 1.5rem));
-  padding: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-layout-gutter);
 }
 
-@media (width <= 40rem) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container agent-connect (inline-size <= 40rem) {
   .agent-connect__targets {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(2, var(--sigvelo-layout-track-fill));
   }
+}
 
+/* Popup vs viewport. Not a plane container query. */
+@media (width <= 40rem) {
   .agent-connect-popover {
     inline-size: min(24rem, calc(100dvi - 1.5rem));
   }

package/dist/styles/agent-tool-detail.css

@@ -1,6 +1,6 @@
 .agent-tool-detail {
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr);
+  grid-template-rows: auto auto var(--sigvelo-layout-track-fill);
   min-inline-size: 0;
   block-size: 100%;
   background-color: var(--sigvelo-color-surface);
@@ -15,10 +15,10 @@
 .agent-tool-detail__run-state {
   grid-row: 2;
   display: grid;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   min-inline-size: 0;
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
     var(--sigvelo-color-neutral-border-subtle);
 }

package/dist/styles/alert-dialog.css

@@ -6,7 +6,7 @@
 }
 
 .alert-dialog__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-layout-stack);
 
   position: fixed;
   inset-block-start: 50%;
@@ -39,16 +39,16 @@
   font-size: var(--sigvelo-text-compact);
   line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-text-muted);
-  margin: 0 0 var(--sigvelo-spacing-4);
+  margin: 0 0 var(--sigvelo-layout-stack);
   text-wrap: pretty;
 }
 
 .alert-dialog__header {
   display: grid;
   gap: var(--sigvelo-spacing-1);
-  margin-block-end: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-layout-gutter);
 }
 
 .alert-dialog__media {
-  margin-block-end: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-layout-gutter);
 }

package/dist/styles/app-frame.css

@@ -1,8 +1,6 @@
 .app-frame {
-  block-size: 100%;
-  min-block-size: 0;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto var(--sigvelo-layout-track-fill);
   overflow: hidden;
   color: var(--sigvelo-color-text);
   background: var(--sigvelo-color-canvas);

package/dist/styles/app-top-bar.css

@@ -8,20 +8,16 @@
      once; the bar adds the safe-area inset itself, so the hook stays a plain
      content height. */
   min-block-size: calc(
-    var(
-        --app-top-bar-block-size,
-        calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2))
-      ) +
-      env(safe-area-inset-top, 0px)
+    var(--app-top-bar-block-size, var(--sigvelo-layout-chrome)) + env(safe-area-inset-top, 0px)
   );
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto var(--sigvelo-layout-track-fill);
   align-items: center;
   gap: var(--sigvelo-density-compact-control-gap);
   padding-block: calc(var(--sigvelo-spacing-1) + env(safe-area-inset-top, 0px))
     var(--sigvelo-spacing-1);
-  padding-inline: calc(var(--sigvelo-spacing-2) + env(safe-area-inset-left, 0px))
-    calc(var(--sigvelo-spacing-2) + env(safe-area-inset-right, 0px));
+  padding-inline: calc(var(--sigvelo-layout-gutter) + env(safe-area-inset-left, 0px))
+    calc(var(--sigvelo-layout-gutter) + env(safe-area-inset-right, 0px));
   border: 0;
   border-radius: 0;
   /* No surface of its own: the bar occupies a layout row, so whatever plane
@@ -64,7 +60,7 @@
    way — one hairline and a breath of shadow, still no fill. */
 .app-top-bar[data-title-align="start"] {
   position: relative;
-  grid-template-columns: auto auto minmax(0, 1fr);
+  grid-template-columns: auto auto var(--sigvelo-layout-track-fill);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   box-shadow: var(--sigvelo-elevation-bar);

package/dist/styles/approval.css

@@ -11,6 +11,7 @@
 .approval__header {
   display: flex;
   align-items: baseline;
+  /* Widget density, not --sigvelo-layout-cluster. */
   gap: var(--sigvelo-spacing-2);
   line-height: var(--sigvelo-leading-snug);
 }

package/dist/styles/artifact.css

@@ -15,9 +15,9 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-gutter);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   background-color: var(--sigvelo-color-surface);
 }
 
@@ -54,8 +54,8 @@
 }
 
 .artifact__content {
-  padding-block: var(--sigvelo-spacing-4);
-  padding-inline: var(--sigvelo-spacing-4);
+  padding-block: var(--sigvelo-layout-stack);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-size: var(--sigvelo-text-sm);
   line-height: var(--sigvelo-leading-normal);
   overflow-wrap: anywhere;
@@ -104,7 +104,7 @@
   justify-content: center;
   flex-wrap: wrap;
   gap: var(--sigvelo-spacing-2);
-  padding: var(--sigvelo-spacing-4);
+  padding: var(--sigvelo-layout-stack);
   color: var(--sigvelo-color-text-muted);
   text-align: center;
 }

package/dist/styles/attachment-preview.css

@@ -2,14 +2,15 @@
    Scoped as .dialog__popup.attachment-preview so it beats the base dialog
    sizing regardless of import order. */
 .dialog__popup.attachment-preview {
-  width: fit-content;
-  max-width: min(90vw, 56rem);
+  inline-size: fit-content;
+  /* Lightbox measure. Not --sigvelo-layout-break-compact. */
+  max-inline-size: min(90dvi, 56rem);
 }
 
 .attachment-preview__image {
   display: block;
-  max-width: 100%;
-  max-height: 70vh;
+  max-inline-size: 100%;
+  max-block-size: 70dvb;
   border-radius: var(--sigvelo-radius-md);
 }
 

package/dist/styles/browser-replay.css

@@ -4,7 +4,7 @@
 .browser-replay {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
   font-family: inherit;
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
@@ -16,7 +16,7 @@
 
 .browser-replay__stage-wrap {
   position: relative;
-  width: 100%;
+  inline-size: 100%;
   aspect-ratio: 16 / 10;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   overflow: hidden;
@@ -44,9 +44,9 @@
 .browser-replay__controls {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-cluster);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   background-color: var(--sigvelo-color-surface);
@@ -60,7 +60,7 @@
 
 .browser-replay__scrubber {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .browser-replay__time {

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

@@ -85,6 +85,7 @@
 /* The panel owns the space allotted to whichever direct surface it hosts. */
 .browser-run-panel__body > * {
   flex: 1;
+  /* Hosted preview floor. Not --sigvelo-layout-sidebar. */
   min-block-size: 16rem;
 }
 

package/dist/styles/button.css

@@ -38,10 +38,7 @@
   flex: none;
 }
 
-/* ponytail: one brightness rule covers press feedback for every variant;
-   upgrade to per-variant color-mix rules if filter side effects ever bite */
 .button:active:not([data-disabled]) {
-  filter: brightness(0.94);
   translate: 0 var(--sigvelo-motion-distance-xs);
 }
 
@@ -65,7 +62,11 @@
 }
 
 .button--normal.button--primary:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), black 5%);
+  background-color: var(--sigvelo-color-primary-bg-hover);
+}
+
+.button--normal.button--primary:active:not([data-disabled]) {
+  background-color: var(--sigvelo-color-primary-bg-press);
 }
 
 .button--normal.button--neutral {
@@ -74,7 +75,11 @@
 }
 
 .button--normal.button--neutral:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), black 5%);
+  background-color: var(--sigvelo-color-neutral-bg-hover);
+}
+
+.button--normal.button--neutral:active:not([data-disabled]) {
+  background-color: var(--sigvelo-color-neutral-bg-press);
 }
 
 .button--normal.button--destructive {
@@ -83,7 +88,11 @@
 }
 
 .button--normal.button--destructive:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-color-danger-bg), black 5%);
+  background-color: var(--sigvelo-color-danger-bg-hover);
+}
+
+.button--normal.button--destructive:active:not([data-disabled]) {
+  background-color: var(--sigvelo-color-danger-bg-press);
 }
 
 /* Outline appearance */

package/dist/styles/card.css

@@ -3,14 +3,14 @@
   color: var(--sigvelo-color-text);
   /* Shadow-led elevation: the hairline ring in the stack is the perimeter. */
   border-radius: var(--sigvelo-radius-lg);
-  padding: var(--sigvelo-spacing-4);
+  padding: var(--sigvelo-layout-stack);
   box-shadow: var(--sigvelo-elevation-raised);
   transition: box-shadow var(--sigvelo-motion-duration-interaction)
     var(--sigvelo-motion-ease-change);
 }
 
 .card[data-size="sm"] {
-  padding: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-layout-gutter);
   border-radius: var(--sigvelo-radius-md);
 }
 
@@ -39,13 +39,13 @@
 .card__header {
   display: grid;
   grid-template-rows: auto auto;
-  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-layout-track-fill);
   align-items: start;
-  margin-block-end: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-layout-gutter);
 }
 
 .card__header:has(.card__action) {
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
 }
 
 .card__action {

package/dist/styles/chatgpt-sign-in-screen.css

@@ -67,7 +67,7 @@
   z-index: 1;
   display: flex;
   justify-content: center;
-  margin-block-start: var(--sigvelo-spacing-4);
+  margin-block-start: var(--sigvelo-layout-stack);
 }
 
 .chatgpt-sign-in__error {