@mcp-b/react-components 0.20.4 → 0.21.0

package/dist/styles/agent-connection.css

@@ -27,7 +27,7 @@
 
 .agent-connect__title-group {
   display: grid;
-  gap: 0.2rem;
+  gap: var(--sigvelo-spacing-1);
   min-inline-size: 0;
 }
 
@@ -45,17 +45,17 @@
   margin: 0;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
-  line-height: 1.35;
+  line-height: var(--sigvelo-leading-snug);
   text-wrap: pretty;
 }
 
 .agent-connect__targets {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   min-inline-size: 0;
   margin: 0;
-  padding: 0.25rem;
+  padding: var(--sigvelo-spacing-1);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-md);
@@ -66,9 +66,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-block-size: 1.75rem;
+  min-block-size: var(--sigvelo-spacing-7);
   min-inline-size: 0;
-  padding: 0 0.45rem;
+  padding: 0 var(--sigvelo-spacing-2);
   border: 0;
   border-radius: var(--sigvelo-radius-sm);
   background: transparent;
@@ -77,7 +77,7 @@
   font: inherit;
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.15;
+  line-height: var(--sigvelo-leading-tight);
   overflow-wrap: anywhere;
   text-align: center;
 }
@@ -93,7 +93,7 @@
 
 @media (pointer: coarse) {
   .agent-connect__target {
-    min-block-size: 2.5rem;
+    min-block-size: var(--sigvelo-spacing-10);
     padding-inline: var(--sigvelo-spacing-3);
   }
 }
@@ -113,8 +113,8 @@
   background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
   box-shadow:
-    var(--sigvelo-shadow-xs),
-    inset 0 0 0 1px var(--sigvelo-color-primary-border-subtle);
+    var(--sigvelo-elevation-raised),
+    inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-primary-border-subtle);
 }
 
 .agent-connect .code-block__container {

package/dist/styles/alert-dialog.css

@@ -16,9 +16,12 @@
   box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
+/* Matches .dialog__backdrop, including why one 8px radius is the affordable
+   version of this effect. */
 .alert-dialog__backdrop {
   background-color: var(--sigvelo-color-backdrop);
-  z-index: 50;
+  backdrop-filter: var(--sigvelo-glass-filter);
+  z-index: var(--sigvelo-z-overlay);
 }
 
 .alert-dialog__popup {
@@ -28,7 +31,7 @@
   inset-block-start: 50%;
   inset-inline-start: 50%;
   translate: -50% -50%;
-  z-index: 50;
+  z-index: var(--sigvelo-z-overlay);
   inline-size: calc(100% - var(--sigvelo-control-height-sm));
   max-inline-size: 28rem;
   max-block-size: calc(100dvb - var(--sigvelo-control-height-sm));

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

@@ -81,10 +81,10 @@
 
 @media (any-pointer: coarse) {
   .app-top-bar__button {
-    inline-size: 2.75rem;
-    min-inline-size: 2.75rem;
-    block-size: 2.75rem;
-    min-block-size: 2.75rem;
+    inline-size: var(--sigvelo-spacing-11);
+    min-inline-size: var(--sigvelo-spacing-11);
+    block-size: var(--sigvelo-spacing-11);
+    min-block-size: var(--sigvelo-spacing-11);
   }
 }
 

package/dist/styles/approval.css

@@ -12,7 +12,7 @@
   display: flex;
   align-items: baseline;
   gap: var(--sigvelo-spacing-2);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
 }
 
 .approval__question {
@@ -159,12 +159,6 @@
   gap: var(--sigvelo-spacing-1-5);
 }
 
-.approval__kbd {
-  font-family: inherit;
-  font-size: 0.75em;
-  opacity: 0.75;
-}
-
 .approval__status:not(.sigvelo-visually-hidden) {
   color: var(--sigvelo-color-danger-text);
   font-size: var(--sigvelo-text-xs);

package/dist/styles/artifact.css

@@ -5,9 +5,9 @@
   font-family: inherit;
   color: var(--sigvelo-color-text);
   /* Shadow-led elevation: no perimeter border */
-  background-color: var(--sigvelo-color-surface);
-  border-radius: var(--sigvelo-radius-lg, var(--sigvelo-radius-md));
-  box-shadow: var(--sigvelo-shadow-sm);
+  background-color: var(--sigvelo-color-surface-raised);
+  border-radius: var(--sigvelo-radius-lg);
+  box-shadow: var(--sigvelo-elevation-raised);
   overflow: hidden;
 }
 
@@ -41,7 +41,7 @@
   margin-block-start: var(--sigvelo-spacing-0-5);
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text-muted);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
   overflow-wrap: anywhere;
   text-wrap: pretty;
 }
@@ -63,6 +63,6 @@
 
 @media (forced-colors: active) {
   .artifact {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/attachment-preview.css

@@ -14,7 +14,7 @@
 }
 
 .attachment-preview__name {
-  margin-block-start: 0.5rem;
+  margin-block-start: var(--sigvelo-spacing-2);
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   text-align: center;

package/dist/styles/badge.css

@@ -110,7 +110,7 @@
 
 @media (forced-colors: active) {
   .badge {
-    border: 1px solid ButtonText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
   }
 
   .badge--ghost,

package/dist/styles/base-ui-motion.css

@@ -3,7 +3,7 @@
  * CSS so all anchored surfaces enter, exit, and respect reduced motion alike.
  */
 .base-ui-positioner {
-  z-index: 50;
+  z-index: var(--sigvelo-z-overlay);
 }
 
 .base-ui-backdrop {

package/dist/styles/base.css

@@ -13,11 +13,96 @@
   margin: 0;
 }
 
+/*
+ * Corner shape, system-wide.
+ *
+ * corner-shape has no effect on a square corner, so applying it everywhere
+ * costs nothing and means a component gets the shape by having a radius rather
+ * than by remembering to opt in. In browsers without corner-shape the token
+ * resolves to `round` and nothing changes.
+ *
+ * The exception is a pill or a circle: a superellipse turns a stadium into a
+ * lozenge and a circle into a squircle. Anything using --sigvelo-radius-full or
+ * --sigvelo-radius-circle therefore overrides the custom property back to
+ * `round` in the block below. audit:css-recipes fails if that list falls out of
+ * sync with the stylesheets.
+ */
+:where(*) {
+  corner-shape: var(--sigvelo-corner-shape);
+}
+
+/* sigvelo-pill-shapes:start */
+:where(
+  .agent-activity-preview__badge,
+  .agent-activity-preview__dismiss,
+  .agent-activity-preview__favicons img,
+  .agent-activity-preview__unviewed-dot,
+  .approval__key,
+  .avatar,
+  .avatar-group__count,
+  .avatar__badge,
+  .avatar__fallback,
+  .badge,
+  .browser-run-panel__tab-glyph,
+  .chain-of-thought__search-result,
+  .chain-of-thought__step-indicator,
+  .codex-model-selector__trigger,
+  .codex-model-selector__trigger::before,
+  .empty-state__icon,
+  .inline-citation__trigger,
+  .media-preview-card__play,
+  .menu__radio-indicator::before,
+  .message-scroller__button,
+  .plan__step-indicator,
+  .prompt-input__button[data-responsive-label],
+  .prompt-input__context-trigger,
+  .prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before,
+  .prompt-input__permissions-trigger,
+  .prompt-input__recording-button,
+  .prompt-input__stop,
+  .prompt-input__submit,
+  .queue__item-indicator,
+  .radio,
+  .radio__indicator,
+  .scroll-area__thumb,
+  .slider__indicator,
+  .slider__thumb,
+  .slider__track,
+  .status-pill__dot,
+  .stepper__indicator,
+  .stepper__separator,
+  .stepper__trigger,
+  .subagent-run__milestone::before,
+  .subagent-run__selector,
+  .switch,
+  .switch__thumb,
+  .task__item::before,
+  .test-results__test-status,
+  .think-routine-library__routine-status,
+  [data-slot="meter-indicator"],
+  [data-slot="meter-track"],
+  [data-slot="progress-indicator"],
+  [data-slot="progress-track"]
+) {
+  --sigvelo-corner-shape: round;
+}
+/* sigvelo-pill-shapes:end */
+
+/*
+ * Interface text reads at 14px, not at the 16px root.
+ *
+ * The root stays 16px so 1rem is still 16px and the 4px spacing grid is
+ * untouched — the same split the reference bundles use, where the type scale
+ * is re-pointed but the spacing base stays at 0.25rem. Components that name a
+ * step explicitly are unaffected; this only moves what inherited text lands on,
+ * which is where a 16px default reads oversized against 32px rows and 13px
+ * control labels.
+ */
 body {
   position: relative;
   font-family: var(--sigvelo-font-sans);
-  font-size: var(--sigvelo-text-base);
-  line-height: var(--sigvelo-leading-normal);
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-leading);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-canvas);
   -webkit-font-smoothing: antialiased;
@@ -25,7 +110,7 @@ body {
 }
 
 .sigvelo-icon--spinner {
-  animation: sigvelo-icon-spin var(--sigvelo-duration-slow) linear infinite;
+  animation: sigvelo-icon-spin var(--sigvelo-motion-duration-spin) linear infinite;
   transform-origin: center;
 }
 
@@ -35,12 +120,34 @@ body {
   }
 }
 
+/*
+ * Canonical "busy/streaming" text-shimmer sweep. Components own the gradient
+ * treatment and state gating; they share this keyframe and
+ * --sigvelo-motion-duration-shimmer. Shadow-isolated bundles keep a local copy
+ * (keyframes do not cross shadow roots), the same as sigvelo-icon-spin.
+ */
+@keyframes sigvelo-text-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: -100% 0;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sigvelo-icon--spinner {
     animation: none;
   }
 }
 
+/* Headings are short enough for the browser to balance the rag for free;
+   balance gives up past a handful of lines, so this costs nothing on the
+   occasional long one. */
+:where(h1, h2, h3, h4, h5, h6) {
+  text-wrap: balance;
+}
+
 code,
 kbd,
 samp,

package/dist/styles/browser-control-overlay.css

@@ -2,6 +2,12 @@
  * Standalone stylesheet for browser-control chrome mounted in a closed shadow
  * root. It intentionally uses system colors so it remains legible on arbitrary
  * pages without leaking the full document-level token sheet into the host.
+ *
+ * Every length here is a literal on purpose. The token layer does not exist
+ * inside this shadow root, so a --sigvelo-* reference resolves to nothing and
+ * takes its whole declaration with it — silently, and only on a real host page,
+ * which is the one place this is hard to notice. Keep the values on the 4px
+ * grid by hand; audit:css-recipes checks both halves of that.
  */
 
 :host {
@@ -18,6 +24,10 @@
   padding: 0;
   pointer-events: none;
   position: fixed;
+  /* Mirrors --sigvelo-z-host-overlay, deliberately as a literal. This sheet is
+     mounted in a closed shadow root on someone else's page, where the token
+     layer does not exist; var() would resolve to nothing, z-index would fall
+     back to auto, and the overlay would quietly stop being on top. */
   z-index: 2147483647;
 }
 
@@ -69,7 +79,7 @@
   font:
     600 12px/1.2 system-ui,
     sans-serif;
-  padding: 7px 12px;
+  padding: 8px 12px;
 }
 
 :host button:focus-visible {
@@ -85,7 +95,7 @@
 :host .takeover,
 :host .owner {
   background: var(--browser-control-accent);
-  border: 1px solid var(--browser-control-accent-text);
+  border: solid 1px var(--browser-control-accent-text);
   box-shadow: 0 2px 10px var(--browser-control-shadow);
   color: var(--browser-control-accent-text);
 }
@@ -109,7 +119,7 @@
   left: 10px;
   max-width: min(360px, 60vw);
   overflow: hidden;
-  padding: 7px 12px;
+  padding: 8px 12px;
   pointer-events: none;
   position: fixed;
   text-overflow: ellipsis;
@@ -120,7 +130,7 @@
 :host .banner {
   align-items: center;
   background: var(--browser-control-warning);
-  border: 1px solid var(--browser-control-warning-text);
+  border: solid 1px var(--browser-control-warning-text);
   border-radius: 14px;
   box-shadow: 0 4px 18px var(--browser-control-shadow);
   color: var(--browser-control-warning-text);
@@ -131,7 +141,7 @@
   gap: 10px;
   left: 50%;
   max-width: min(720px, calc(100vw - 32px));
-  padding: 9px 10px 9px 16px;
+  padding: 8px 10px 8px 16px;
   pointer-events: auto;
   position: fixed;
   top: 12px;
@@ -147,7 +157,7 @@
 
 :host .banner .done,
 :host .banner .cannot {
-  border: 1px solid currentcolor;
+  border: solid 1px currentcolor;
   color: inherit;
   flex-shrink: 0;
 }

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

@@ -27,25 +27,17 @@
   opacity: 1;
 }
 
-/* The chip itself is the library Badge (sm/destructive) — only the overlay
-   placement lives here. */
+/* The chip itself is the library StatusPill (sm/destructive/busy) — only the
+   overlay placement lives here. */
 .browser-live-view__badge {
   position: absolute;
   inset-block-start: var(--sigvelo-spacing-2);
   inset-inline-end: var(--sigvelo-spacing-2);
   z-index: 1;
-  box-shadow: var(--sigvelo-shadow-sm);
+  box-shadow: var(--sigvelo-elevation-raised);
   pointer-events: none;
 }
 
-.browser-live-view__badge-dot {
-  inline-size: var(--sigvelo-spacing-1-5);
-  block-size: var(--sigvelo-spacing-1-5);
-  border-radius: 50%;
-  background-color: currentColor;
-  animation: browser-live-view-pulse 1.4s ease-in-out infinite;
-}
-
 /* Ended state: quiet fill, same footprint so the layout never jumps */
 .browser-live-view__ended {
   display: flex;
@@ -91,10 +83,6 @@
   z-index: 1;
 }
 
-.browser-live-view__state-spinner {
-  animation: sigvelo-icon-spin 900ms linear infinite;
-}
-
 /* Expand affordance, video-player style: quiet until the box is hovered or
    the button is focused */
 .browser-live-view__expand {
@@ -102,8 +90,8 @@
   inset-block-end: var(--sigvelo-spacing-2);
   inset-inline-end: var(--sigvelo-spacing-2);
   z-index: 1;
-  background-color: var(--sigvelo-color-surface);
-  box-shadow: var(--sigvelo-shadow-sm);
+  background-color: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-floating);
   opacity: 0;
   transition:
     opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
@@ -144,27 +132,6 @@
   object-fit: contain;
 }
 
-@keyframes browser-live-view-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .browser-live-view__badge-dot,
-  .browser-live-view__state-spinner {
-    animation: none;
-  }
-}
-
-:root[data-motion="reduce"] :is(.browser-live-view__badge-dot, .browser-live-view__state-spinner) {
-  animation: none;
-}
-
 @media (hover: none) {
   .browser-live-view__expand {
     opacity: 1;

package/dist/styles/browser-replay.css

@@ -34,22 +34,18 @@
   pointer-events: none;
 }
 
+/* Positioning only: this overlays the replay stage. The typography is
+   .empty-state. */
 .browser-replay__empty {
   position: absolute;
   inset: 0;
-  display: grid;
-  place-content: center;
-  padding: 1rem;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
-  text-align: center;
 }
 
 .browser-replay__controls {
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-2-5);
-  padding-block: 0.5rem;
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -184,6 +180,6 @@
 
 @media (forced-colors: active) {
   .browser-replay {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

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

@@ -5,7 +5,7 @@
 }
 
 .browser-run-panel .web-preview__nav:has(.browser-run-panel__tabs) {
-  min-block-size: 3rem;
+  min-block-size: var(--sigvelo-spacing-12);
   gap: 0;
   padding-block: 0;
   padding-inline: var(--sigvelo-spacing-1-5);
@@ -49,10 +49,10 @@
 .browser-run-panel__tab-glyph {
   display: grid;
   flex: none;
-  inline-size: 1.125rem;
-  block-size: 1.125rem;
+  inline-size: var(--sigvelo-control-icon-size-lg);
+  block-size: var(--sigvelo-control-icon-size-lg);
   place-items: center;
-  border-radius: 50%;
+  border-radius: var(--sigvelo-radius-circle);
   background: var(--sigvelo-color-primary-bg-subtle);
   color: var(--sigvelo-color-primary-text);
   font-size: var(--sigvelo-text-3xs);
@@ -67,7 +67,7 @@
 }
 
 .browser-run-panel__address-bar {
-  min-block-size: 3rem;
+  min-block-size: var(--sigvelo-spacing-12);
   background: var(--sigvelo-color-surface);
 }
 
@@ -101,20 +101,6 @@
   color: var(--sigvelo-color-danger-text);
 }
 
-.browser-run-panel__spinner {
-  animation: sigvelo-icon-spin 900ms linear infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .browser-run-panel__spinner {
-    animation: none;
-  }
-}
-
-:root[data-motion="reduce"] .browser-run-panel__spinner {
-  animation: none;
-}
-
 @media (forced-colors: active) {
   .browser-run-panel__tab[data-active] {
     outline: var(--sigvelo-focus-ring-forced);

package/dist/styles/button.css

@@ -27,7 +27,9 @@
     color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
     border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
     box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    translate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+    /* Release settles with a damped spring; the color transitions above stay on
+       the standard curve, where a bounce would just read as a slow fade. */
+    translate var(--sigvelo-motion-duration-presence) var(--sigvelo-ease-press);
 }
 
 .button svg {
@@ -185,7 +187,7 @@
 
 @media (forced-colors: active) {
   .button {
-    border: 1px solid ButtonText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
   }
 
   .button--ghost,

package/dist/styles/card.css

@@ -1,10 +1,10 @@
 .card {
-  background-color: var(--sigvelo-color-surface);
+  background-color: var(--sigvelo-color-surface-raised);
   color: var(--sigvelo-color-text);
-  /* Shadow-led elevation: no perimeter border */
+  /* Shadow-led elevation: the hairline ring in the stack is the perimeter. */
   border-radius: var(--sigvelo-radius-lg);
   padding: var(--sigvelo-spacing-4);
-  box-shadow: var(--sigvelo-shadow-sm);
+  box-shadow: var(--sigvelo-elevation-raised);
   transition: box-shadow var(--sigvelo-motion-duration-interaction)
     var(--sigvelo-motion-ease-change);
 }
@@ -83,7 +83,7 @@
 }
 
 .card--hover:hover {
-  box-shadow: var(--sigvelo-shadow-md);
+  box-shadow: var(--sigvelo-elevation-floating);
 }
 
 .card--hover:focus-visible {

package/dist/styles/chain-of-thought.css

@@ -44,7 +44,6 @@
   background-color: var(--sigvelo-color-primary-bg-subtle);
   border-color: var(--sigvelo-color-primary-border-muted);
   color: var(--sigvelo-color-primary-text);
-  animation: sigvelo-icon-spin 1.6s linear infinite;
 }
 
 .chain-of-thought__step-body {
@@ -167,7 +166,7 @@
 @media (forced-colors: active) {
   .chain-of-thought__step-indicator,
   .chain-of-thought__search-result {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .chain-of-thought__header:focus-visible,

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

@@ -9,7 +9,7 @@
   min-inline-size: 17.5rem;
   display: grid;
   place-items: center;
-  padding: clamp(1.25rem, 5vw, 3rem);
+  padding: clamp(var(--sigvelo-spacing-5), 5vw, var(--sigvelo-spacing-12));
   background-color: var(--sigvelo-color-canvas);
   background-image:
     linear-gradient(
@@ -56,7 +56,7 @@
   z-index: 1;
   isolation: isolate;
   display: grid;
-  gap: 1.25rem;
+  gap: var(--sigvelo-spacing-5);
   justify-items: center;
   text-align: center;
 }
@@ -73,7 +73,7 @@
   font-size: var(--sigvelo-text-2xl);
   font-weight: var(--sigvelo-font-weight-bold);
   letter-spacing: 0;
-  line-height: 1.1;
+  line-height: var(--sigvelo-leading-tight);
 }
 
 .chatgpt-sign-in__brand p {
@@ -93,8 +93,8 @@
 }
 
 .chatgpt-sign-in__brand-mark :where(img, svg) {
-  inline-size: 1.35rem;
-  block-size: 1.35rem;
+  inline-size: var(--sigvelo-control-icon-size-xl);
+  block-size: var(--sigvelo-control-icon-size-xl);
   filter: drop-shadow(
     0 0.25rem 0.5rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%)
   );
@@ -109,7 +109,8 @@
   overflow: hidden;
   min-inline-size: min(100%, 16.75rem);
   box-shadow:
-    inset 0 0 0 1px color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 84%),
+    inset 0 0 0 var(--sigvelo-border-width)
+      color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 84%),
     0 0.75rem 1.5rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 78%);
   translate: 0;
   scale: 1;
@@ -153,7 +154,8 @@
 
 .chatgpt-sign-in__button:hover:not([data-disabled]) {
   box-shadow:
-    inset 0 0 0 1px color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 76%),
+    inset 0 0 0 var(--sigvelo-border-width)
+      color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 76%),
     0 0.9rem 1.9rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%);
   translate: 0 -0.0625rem;
 }