@mcp-b/react-components 0.20.4 → 0.21.0

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/pricing-page.css

@@ -3,7 +3,8 @@
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
-  padding: clamp(1rem, 4%, 3rem) clamp(0.75rem, 3%, 1.5rem);
+  padding: clamp(var(--sigvelo-spacing-4), 4%, var(--sigvelo-spacing-12))
+    clamp(var(--sigvelo-spacing-3), 3%, var(--sigvelo-spacing-6));
   container-type: inline-size;
 }
 
@@ -11,13 +12,13 @@
 
 .pricing-page__header {
   text-align: center;
-  margin-bottom: 3rem;
+  margin-bottom: var(--sigvelo-spacing-12);
 }
 
 .pricing-page__title {
   font-family: inherit;
   font-size: 2.5rem;
-  font-weight: 700;
+  font-weight: var(--sigvelo-font-weight-bold);
   line-height: var(--sigvelo-leading-tight);
   color: var(--sigvelo-color-text);
   margin: 0 0 var(--sigvelo-spacing-3);
@@ -27,20 +28,20 @@
   font-family: inherit;
   font-size: var(--sigvelo-text-lg);
   color: var(--sigvelo-color-text-muted);
-  margin: 0 0 2rem;
+  margin: 0 0 var(--sigvelo-spacing-8);
 }
 
 .pricing-page__billing-toggle {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  gap: var(--sigvelo-spacing-4);
 }
 
 .pricing-page__toggle-options {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
 }
 
 .pricing-page__toggle-label {
@@ -74,15 +75,15 @@
 .pricing-page__plans {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 3rem;
+  gap: var(--sigvelo-spacing-6);
+  margin-bottom: var(--sigvelo-spacing-12);
 }
 
 .pricing-page__plan {
   position: relative;
   display: flex;
   flex-direction: column;
-  padding: 1.5rem;
+  padding: var(--sigvelo-spacing-6);
 }
 
 .pricing-page__plan[data-popular] {
@@ -100,7 +101,7 @@
 }
 
 .pricing-page__plan-header {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--sigvelo-spacing-6);
 }
 
 .pricing-page__plan-name {
@@ -108,7 +109,7 @@
   font-size: var(--sigvelo-text-xl);
   font-weight: 600;
   color: var(--sigvelo-color-text);
-  margin: 0 0 0.25rem;
+  margin: 0 0 var(--sigvelo-spacing-1);
 }
 
 .pricing-page__plan-description {
@@ -119,13 +120,13 @@
 }
 
 .pricing-page__plan-price {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--sigvelo-spacing-6);
 }
 
 .pricing-page__price-amount {
   font-family: inherit;
   font-size: 2.5rem;
-  font-weight: 700;
+  font-weight: var(--sigvelo-font-weight-bold);
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-text);
 }
@@ -140,9 +141,9 @@
   display: block;
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
-  font-weight: 500;
+  font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-success-bg);
-  margin-top: 0.25rem;
+  margin-top: var(--sigvelo-spacing-1);
 }
 
 .pricing-page__plan-cta {
@@ -150,7 +151,7 @@
 }
 
 .pricing-page__features-separator {
-  margin: 1.5rem 0;
+  margin: var(--sigvelo-spacing-6) 0;
 }
 
 .pricing-page__features {
@@ -164,7 +165,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--sigvelo-spacing-3);
-  padding: 0.5rem 0;
+  padding: var(--sigvelo-spacing-2) 0;
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
@@ -196,15 +197,15 @@
 .pricing-page__feature-limit {
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
-  margin-left: 0.25rem;
+  margin-left: var(--sigvelo-spacing-1);
 }
 
 /* Calculator */
 
 .pricing-page__calculator {
   max-width: 600px;
-  margin: 0 auto 3rem;
-  padding: 2rem;
+  margin: 0 auto var(--sigvelo-spacing-12);
+  padding: var(--sigvelo-spacing-8);
 }
 
 .pricing-page__calculator-title {
@@ -212,22 +213,22 @@
   font-size: var(--sigvelo-text-xl);
   font-weight: 600;
   color: var(--sigvelo-color-text);
-  margin: 0 0 0.5rem;
+  margin: 0 0 var(--sigvelo-spacing-2);
 }
 
 .pricing-page__calculator-description {
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text-muted);
-  margin: 0 0 1.5rem;
+  margin: 0 0 var(--sigvelo-spacing-6);
 }
 
 .pricing-page__calculator-slider {
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--sigvelo-spacing-2);
 }
 
 .pricing-page__calculator-separator {
-  margin-block: 1.5rem;
+  margin-block: var(--sigvelo-spacing-6);
 }
 
 .pricing-page__calculator-labels {
@@ -248,7 +249,7 @@
 .pricing-page__calculator-range {
   display: flex;
   justify-content: space-between;
-  margin-top: 0.5rem;
+  margin-top: var(--sigvelo-spacing-2);
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
@@ -258,7 +259,7 @@
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--sigvelo-spacing-6);
 }
 
 .pricing-page__calculator-result-label {
@@ -274,7 +275,7 @@
 .pricing-page__calculator-amount {
   font-family: inherit;
   font-size: 2rem;
-  font-weight: 700;
+  font-weight: var(--sigvelo-font-weight-bold);
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-text);
 }
@@ -288,7 +289,7 @@
 .pricing-page__tiers {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--sigvelo-spacing-4);
 }
 
 .pricing-page__tier {
@@ -309,7 +310,7 @@
 }
 
 .pricing-page__tier-price {
-  font-weight: 500;
+  font-weight: var(--sigvelo-font-weight-semibold);
   font-variant-numeric: tabular-nums;
   color: var(--sigvelo-color-text-muted);
 }
@@ -327,18 +328,19 @@
   font-weight: 600;
   color: var(--sigvelo-color-text);
   text-align: center;
-  margin: 0 0 2rem;
+  margin: 0 0 var(--sigvelo-spacing-8);
 }
 
 .pricing-page__faq-accordion {
-  border-top: 1px solid var(--sigvelo-color-neutral-border-muted);
+  border-top: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
 }
 
 /* Confirmation Dialog */
 
 .pricing-page__confirm-summary {
-  padding: 1rem;
-  margin-bottom: 1rem;
+  padding: var(--sigvelo-spacing-4);
+  margin-bottom: var(--sigvelo-spacing-4);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-md);
 }
@@ -349,12 +351,12 @@
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
-  padding: 0.25rem 0;
+  padding: var(--sigvelo-spacing-1) 0;
 }
 
 .pricing-page__confirm-row[data-savings] {
   color: var(--sigvelo-color-success-bg);
-  font-weight: 500;
+  font-weight: var(--sigvelo-font-weight-semibold);
 }
 
 .pricing-page__confirm-actions {

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,15 +635,9 @@
   margin-inline-start: auto;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .prompt-input__submit-spinner {
-    animation: none;
-  }
-}
-
 @media (forced-colors: active) {
   .prompt-input {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .prompt-input:focus-within {

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)
@@ -233,7 +233,7 @@
 
 @media (forced-colors: active) {
   .queue__item-file {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 
   .queue__section-trigger:focus-visible {

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(
@@ -146,6 +158,71 @@
   color: var(--sigvelo-color-text);
 }
 
+/* Reveal scrollability by fading the top/bottom edges. Owns only the mask
+   structure; each scroller drives --sigvelo-scroll-fade-start/end (default 0px)
+   from its own overflow signal. */
+:where([data-recipe~="scroll-fade-y"]) {
+  --sigvelo-scroll-fade-start: 0px;
+  --sigvelo-scroll-fade-end: 0px;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--sigvelo-scroll-fade-start),
+    #000 calc(100% - var(--sigvelo-scroll-fade-end)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    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;
+}
+
+/* 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);
@@ -184,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);
@@ -331,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);
@@ -496,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)
@@ -731,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;