@mcp-b/react-components 0.20.4 → 0.21.0

package/dist/styles/checkbox-group.css

@@ -1,7 +1,7 @@
 .checkbox-group {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
 }
 
 .checkbox-group[data-layout="grid"] {
@@ -15,7 +15,7 @@
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-2);
-  min-block-size: 2.75rem;
+  min-block-size: var(--sigvelo-spacing-11);
   padding-inline: var(--sigvelo-spacing-3);
   border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text);
@@ -40,8 +40,8 @@
 }
 
 .checkbox-group__icon svg {
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
 }
 
 .checkbox-group__content {

package/dist/styles/code-block.css

@@ -13,8 +13,8 @@
 .code-block__header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   background-color: transparent;
 }
@@ -22,7 +22,7 @@
 .code-block__title {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
@@ -37,7 +37,7 @@
 .code-block__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   margin-inline-start: auto;
   flex-shrink: 0;
 }
@@ -56,10 +56,10 @@
 .code-block__content {
   margin: 0;
   padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 0.875rem;
+  padding-inline: var(--sigvelo-spacing-3-5);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-compact);
-  line-height: 1.55;
+  line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-text);
   overflow: visible;
 }
@@ -71,11 +71,11 @@
 .code-block__content--highlighted pre.shiki {
   margin: 0;
   padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 0.875rem;
+  padding-inline: var(--sigvelo-spacing-3-5);
   background-color: transparent !important;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-compact);
-  line-height: 1.55;
+  line-height: var(--sigvelo-leading-normal);
   overflow: visible;
 }
 
@@ -111,6 +111,6 @@
 
 @media (forced-colors: active) {
   .code-block {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/commit.css

@@ -167,7 +167,7 @@
 @media (forced-colors: active) {
   .commit,
   .commit__file {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .commit__header:focus-visible {

package/dist/styles/context-menu.css

@@ -30,7 +30,7 @@
 .context-menu__radio-item:focus-visible,
 .context-menu__submenu-trigger: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);
 }
 
 .context-menu__label {

package/dist/styles/conversation.css

@@ -32,51 +32,16 @@
   min-block-size: 0;
 }
 
-.conversation__empty {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sigvelo-spacing-2);
-  padding-block: var(--sigvelo-spacing-12);
-  padding-inline: var(--sigvelo-spacing-6);
-  text-align: center;
-  color: var(--sigvelo-color-text-muted);
-}
-
-.conversation__empty-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--sigvelo-spacing-12);
-  block-size: var(--sigvelo-spacing-12);
-  border-radius: var(--sigvelo-radius-full);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-text-muted);
-  margin-block-end: var(--sigvelo-spacing-1);
-}
-
-.conversation__empty-title {
-  font-size: var(--sigvelo-text-base);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text);
-}
-
-.conversation__empty-description {
-  max-inline-size: 32ch;
-  font-size: var(--sigvelo-text-sm);
-  line-height: var(--sigvelo-leading-normal);
-  color: var(--sigvelo-color-text-muted);
-}
-
 .conversation__scroll-button {
   position: absolute;
   inset-inline-end: var(--sigvelo-spacing-3);
   inset-block-end: var(--sigvelo-spacing-3);
   z-index: 1;
-  box-shadow: var(--sigvelo-shadow-sm);
-  background-color: var(--sigvelo-color-surface);
+  /* Hovers over the transcript rather than sitting in it, so it takes the
+     floating stack: the wide ambient layer is what separates it from whatever
+     message happens to scroll underneath. */
+  box-shadow: var(--sigvelo-elevation-floating);
+  background-color: var(--sigvelo-color-surface-raised);
 }
 
 .conversation__download-button {
@@ -84,8 +49,8 @@
   inset-inline-end: var(--sigvelo-spacing-3);
   inset-block-start: var(--sigvelo-spacing-3);
   z-index: 1;
-  box-shadow: var(--sigvelo-shadow-xs);
-  background-color: var(--sigvelo-color-surface);
+  box-shadow: var(--sigvelo-elevation-floating);
+  background-color: var(--sigvelo-color-surface-raised);
 }
 
 @media (forced-colors: active) {

package/dist/styles/description-list.css

@@ -44,7 +44,7 @@
 }
 
 .description-list[data-variant="divided"] .description-list__term svg {
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
   flex: 0 0 auto;
 }

package/dist/styles/dialog.css

@@ -1,6 +1,21 @@
+/* Blurring the page behind the scrim reads as depth rather than as a dark
+   sheet, and keeps the dismissed content recognizable underneath. Browsers
+   without backdrop-filter still get the scrim on its own.
+
+   The blur does run on every frame of the open fade — the scrim covers the
+   viewport, so each frame re-filters all of it. What makes that affordable is
+   the filter itself: one 8px radius, no second pass. An earlier
+   blur(24px) saturate(180%) cost about a third of the Storybook suite in
+   timing failures, in stories that had nothing to do with dialogs.
+
+   Gating this behind :not([data-starting-style]) looks like it skips the fade
+   and does not. Base UI drops that attribute on the frame after mount, so the
+   blur is live from frame 1 while the opacity climbs for ~13 more. It bought
+   one frame and read as though it bought fourteen. */
 .dialog__backdrop {
   background-color: var(--sigvelo-color-backdrop);
-  z-index: 50;
+  backdrop-filter: var(--sigvelo-glass-filter);
+  z-index: var(--sigvelo-z-overlay);
 }
 
 .dialog__popup {
@@ -10,7 +25,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: 32rem;
   max-block-size: calc(100dvb - var(--sigvelo-spacing-8));

package/dist/styles/empty-state.css

@@ -0,0 +1,48 @@
+/*
+ * One anatomy for every "there is nothing here yet". Codex splits these into
+ * an inline variant and a page variant, but the difference between them is how
+ * much the container gives the block, not what the block is — so the size
+ * lives in one variable and the centring lives in the parent.
+ */
+.empty-state {
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-4);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-recipe-empty-state-padding-block);
+  padding-inline: var(--sigvelo-spacing-3);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-text-compact-leading);
+  text-align: center;
+}
+
+.empty-state__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--sigvelo-spacing-12);
+  block-size: var(--sigvelo-spacing-12);
+  margin-block-end: var(--sigvelo-spacing-1);
+  border-radius: var(--sigvelo-radius-full);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.empty-state__title {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-base);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-base-leading);
+}
+
+/* Prose, so it takes a measure. Without one a wide panel sets a single
+   sentence across its whole width and the reader loses the line. */
+.empty-state__description {
+  max-inline-size: 32ch;
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-leading);
+}

package/dist/styles/environment-variables.css

@@ -4,7 +4,7 @@
   justify-content: space-between;
   gap: var(--sigvelo-spacing-3);
   padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: 0.875rem;
+  padding-inline: var(--sigvelo-spacing-3-5);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -20,7 +20,7 @@
 .environment-variables__toggle {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   cursor: pointer;
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
@@ -42,7 +42,7 @@
 
 .environment-variables__group-label {
   padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: 0.875rem;
+  padding-inline: var(--sigvelo-spacing-3-5);
   font-size: var(--sigvelo-text-2xs);
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
@@ -57,8 +57,8 @@
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-2-5);
-  padding-block: 0.5rem;
-  padding-inline: 0.875rem;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3-5);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -79,8 +79,8 @@
 .environment-variables__value {
   flex: 1;
   min-width: 0;
-  padding-block: 0.3125rem;
-  padding-inline: 0.5rem;
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-2);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
@@ -101,6 +101,6 @@
 @media (forced-colors: active) {
   .environment-variables,
   .environment-variables__row {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

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/fieldset.css

@@ -15,7 +15,7 @@
 }
 
 .fieldset__legend {
-  padding: 0 0.5rem;
+  padding: 0 var(--sigvelo-spacing-2);
   margin: 0 -0.5rem;
   font-family: inherit;
   font-size: var(--sigvelo-text-compact);

package/dist/styles/file-tree.css

@@ -154,7 +154,7 @@
 
 @media (forced-colors: active) {
   .file-tree {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .file-tree__node:focus-visible,

package/dist/styles/github-motion-mark.css

@@ -24,7 +24,7 @@
 
 .github-motion-mark::before {
   inset: -0.22em;
-  border: 1px solid currentColor;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) currentColor;
   border-radius: 999px;
   opacity: 0.24;
   transform-origin: 50% 50%;

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/label.css

@@ -1,7 +1,7 @@
 .label {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);

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

@@ -196,7 +196,7 @@
 
 @media (forced-colors: active) {
   .mcp-server-picker__avatar-fallback {
-    border: 1px solid ButtonText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
   }
 
   .mcp-server-picker__row-shell:has(.mcp-server-picker__row[data-highlighted]) {

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/menu.css

@@ -49,7 +49,7 @@
   inline-size: var(--sigvelo-spacing-2);
   block-size: var(--sigvelo-spacing-2);
   background-color: currentColor;
-  border-radius: 50%;
+  border-radius: var(--sigvelo-radius-circle);
 }
 
 .menu__checkbox-indicator::before {

package/dist/styles/message-scroller.css

@@ -12,8 +12,6 @@
 
 .message-scroller__viewport {
   --message-scroller-fade-size: min(12%, 2.5rem);
-  --message-scroller-fade-t: 0px;
-  --message-scroller-fade-b: 0px;
   width: 100%;
   height: 100%;
   min-width: 0;
@@ -23,32 +21,16 @@
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
   contain: content;
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    transparent 0,
-    #000 var(--message-scroller-fade-t),
-    #000 calc(100% - var(--message-scroller-fade-b)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to bottom,
-    transparent 0,
-    #000 var(--message-scroller-fade-t),
-    #000 calc(100% - var(--message-scroller-fade-b)),
-    transparent 100%
-  );
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
 }
 
 .message-scroller__viewport[data-scrollable~="end"] {
-  --message-scroller-fade-b: var(--message-scroller-fade-b-size, var(--message-scroller-fade-size));
+  --sigvelo-scroll-fade-end: var(--message-scroller-fade-b-size, var(--message-scroller-fade-size));
 }
 
 .message-scroller__content {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--sigvelo-spacing-4);
   min-height: 100%;
 }
 
@@ -60,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),
@@ -72,7 +54,7 @@
 }
 
 .message-scroller__button[data-direction="start"] {
-  inset-block-start: 1rem;
+  inset-block-start: var(--sigvelo-spacing-4);
   inset-block-end: auto;
 }
 
@@ -96,6 +78,6 @@
 
 @media (forced-colors: active) {
   .message-scroller__button {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

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;
 }
 
@@ -199,6 +197,6 @@
   .message__content,
   .message__edit-form,
   .message__edit-textarea {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

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/plan.css

@@ -122,7 +122,7 @@
 
 @media (forced-colors: active) {
   .plan__step-indicator {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .plan__step[data-status="active"] .plan__step-indicator {

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%);
 }