@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/styles/navigation-menu.css

@@ -1,12 +1,12 @@
 .navigation-menu {
   position: relative;
-  container-type: inline-size;
 }
 
 .navigation-menu__list {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   padding: 0;
   margin: 0;
   list-style: none;
@@ -32,8 +32,8 @@
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .navigation-menu__trigger:hover {
@@ -52,17 +52,17 @@
 
 .navigation-menu__icon {
   display: inline-flex;
-  transition: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .navigation-menu__trigger[data-popup-open] .navigation-menu__icon {
-  transform: rotate(180deg);
+  rotate: 180deg;
 }
 
 .navigation-menu__content {
   display: grid;
-  gap: 0.5rem;
-  padding: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-2);
 }
 
 .navigation-menu__link {
@@ -75,8 +75,8 @@
   text-decoration: none;
   border-radius: var(--sigvelo-radius-sm);
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .navigation-menu__link:hover {
@@ -96,29 +96,13 @@
 
 .navigation-menu__popup {
   --sigvelo-recipe-surface-padding: 0;
+  --sigvelo-recipe-popup-min-inline-size: 12.5rem;
 
-  min-width: 200px;
-  overflow: hidden;
+  min-inline-size: var(--sigvelo-recipe-popup-min-inline-size);
+  overflow: clip;
 }
 
 .navigation-menu__viewport {
   position: relative;
-  overflow: hidden;
-}
-
-.navigation-menu__arrow {
-  width: 10px;
-  height: 10px;
-  transform: rotate(45deg);
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-right: none;
-  border-bottom: none;
-}
-
-@container (max-width: 30rem) {
-  .navigation-menu__list {
-    flex-wrap: wrap;
-  }
+  overflow: clip;
 }

package/dist/styles/number-field.css

@@ -11,7 +11,7 @@
 
 .number-field__input {
   flex: 1;
-  width: 100%;
+  inline-size: 100%;
   text-align: center;
   border-inline: none;
 }
@@ -39,7 +39,7 @@
   inline-size: var(--sigvelo-recipe-control-height);
   block-size: var(--sigvelo-recipe-control-height);
   font-family: inherit;
-  font-size: var(--sigvelo-text-base);
+  font-size: var(--sigvelo-recipe-control-icon-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-canvas);
@@ -47,9 +47,11 @@
     var(--sigvelo-color-neutral-border-muted);
   cursor: pointer;
   user-select: none;
+  translate: 0;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    translate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .number-field__decrement {
@@ -68,6 +70,22 @@
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
+.number-field__decrement:active:not(:disabled),
+.number-field__increment:active:not(:disabled) {
+  translate: 0 var(--sigvelo-motion-distance-xs);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .number-field__decrement,
+  .number-field__increment {
+    translate: none;
+  }
+}
+
+:root[data-motion="reduce"] :is(.number-field__decrement, .number-field__increment) {
+  translate: none;
+}
+
 .number-field__decrement:focus-visible,
 .number-field__increment:focus-visible {
   outline: none;

package/dist/styles/plan.css

@@ -0,0 +1,132 @@
+.plan__header {
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+  min-inline-size: 0;
+  padding-block: var(--sigvelo-spacing-2-5);
+  padding-inline: var(--sigvelo-spacing-3);
+  border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.plan__title,
+.plan__description,
+.plan__step-title,
+.plan__step-description {
+  min-inline-size: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.plan__title {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.plan__description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.5;
+}
+
+.plan__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-3);
+  margin: 0;
+  padding-block: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-spacing-3);
+  list-style: none;
+}
+
+.plan__step {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--sigvelo-spacing-4) minmax(0, 1fr);
+  column-gap: var(--sigvelo-spacing-2);
+  row-gap: var(--sigvelo-spacing-0-5);
+  min-inline-size: 0;
+}
+
+.plan__step > :not(.plan__step-indicator) {
+  grid-column: 2;
+}
+
+.plan__step:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  inset-block-start: calc(var(--sigvelo-spacing-4) + var(--sigvelo-spacing-1));
+  inset-block-end: calc(-1 * var(--sigvelo-spacing-2));
+  inset-inline-start: calc(var(--sigvelo-spacing-2) - var(--sigvelo-border-width));
+  inline-size: var(--sigvelo-border-width);
+  background-color: var(--sigvelo-color-neutral-border-subtle);
+}
+
+.plan__step-indicator {
+  z-index: 1;
+  grid-row: 1 / span 2;
+  grid-column: 1;
+  display: inline-flex;
+  inline-size: var(--sigvelo-spacing-4);
+  block-size: var(--sigvelo-spacing-4);
+  align-items: center;
+  justify-content: center;
+  color: var(--sigvelo-color-text-muted);
+  background-color: var(--sigvelo-color-surface);
+  border: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-full);
+  transition:
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.plan__step-indicator-visual,
+.plan__step-indicator-visual svg {
+  display: block;
+  inline-size: var(--sigvelo-spacing-3);
+  block-size: var(--sigvelo-spacing-3);
+}
+
+.plan__step[data-status="complete"] .plan__step-indicator {
+  color: var(--sigvelo-color-success-text-on-bg);
+  background-color: var(--sigvelo-color-success-bg);
+  border-color: var(--sigvelo-color-success-bg);
+}
+
+.plan__step[data-status="active"] .plan__step-indicator {
+  color: var(--sigvelo-color-primary-text-on-subtle);
+  background-color: var(--sigvelo-color-primary-bg-subtle);
+  border-color: var(--sigvelo-color-primary-border-muted);
+}
+
+.plan__step-title {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+  transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.plan__step[data-status="pending"] .plan__step-title {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.plan__step-description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.5;
+}
+
+@media (forced-colors: active) {
+  .plan__step-indicator {
+    border: 1px solid CanvasText;
+  }
+
+  .plan__step[data-status="active"] .plan__step-indicator {
+    color: HighlightText;
+    background-color: Highlight;
+  }
+}

package/dist/styles/popover.css

@@ -1,12 +1,6 @@
 .popover__backdrop {
   z-index: 50;
   background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 50%);
-  transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.popover__backdrop[data-starting-style],
-.popover__backdrop[data-ending-style] {
-  opacity: 0;
 }
 
 .popover__positioner {
@@ -16,38 +10,9 @@
 .popover__popup {
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
 
-  min-width: 12rem;
+  min-inline-size: 12rem;
   max-inline-size: min(20rem, var(--available-width));
-  overflow-y: auto;
-}
-
-.popover__arrow {
-  width: var(--sigvelo-spacing-3);
-  height: var(--sigvelo-spacing-3);
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  transform: rotate(45deg);
-}
-
-.popover__arrow[data-side="top"] {
-  border-top: none;
-  border-left: none;
-}
-
-.popover__arrow[data-side="bottom"] {
-  border-bottom: none;
-  border-right: none;
-}
-
-.popover__arrow[data-side="left"] {
-  border-bottom: none;
-  border-left: none;
-}
-
-.popover__arrow[data-side="right"] {
-  border-top: none;
-  border-right: none;
+  overflow-block: auto;
 }
 
 .popover__title {
@@ -58,28 +23,26 @@
   color: var(--sigvelo-color-text);
 }
 
-.popover__description {
-  margin: 0;
-  font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-normal);
-  color: var(--sigvelo-color-text-muted);
-}
-
 .popover__header {
   display: grid;
   gap: var(--sigvelo-spacing-1);
   margin-block-end: var(--sigvelo-spacing-2);
 }
 
-.popover__close {
+.popover__close:not(.button) {
+  --sigvelo-recipe-control-height: var(--sigvelo-control-height-xs);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-xs);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-xs);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-block: 0.25rem;
-  padding-inline: 0.5rem;
+  min-block-size: var(--sigvelo-recipe-control-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
   margin-block-start: var(--sigvelo-spacing-2);
   font-family: inherit;
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text-muted);
   background-color: transparent;
@@ -88,16 +51,16 @@
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
-.popover__close:hover {
+.popover__close:not(.button):hover {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
-.popover__close:focus-visible {
+.popover__close:not(.button):focus-visible {
   outline: none;
   box-shadow: var(--sigvelo-recipe-focus-shadow);
 }

package/dist/styles/preview-card.css

@@ -3,7 +3,7 @@
   text-decoration: underline;
   text-underline-offset: 2px;
   cursor: pointer;
-  transition: color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .preview-card__trigger:hover {
@@ -25,35 +25,5 @@
 
   min-inline-size: 12.5rem;
   max-inline-size: min(20rem, var(--available-width));
-  overflow-y: auto;
-}
-
-.preview-card__arrow {
-  width: 10px;
-  height: 10px;
-  transform: rotate(45deg);
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-right: none;
-  border-bottom: none;
-}
-
-.preview-card__popup[data-side="bottom"] .preview-card__arrow {
-  top: -6px;
-}
-
-.preview-card__popup[data-side="top"] .preview-card__arrow {
-  bottom: -6px;
-  transform: rotate(225deg);
-}
-
-.preview-card__popup[data-side="left"] .preview-card__arrow {
-  right: -6px;
-  transform: rotate(135deg);
-}
-
-.preview-card__popup[data-side="right"] .preview-card__arrow {
-  left: -6px;
-  transform: rotate(-45deg);
+  overflow-block: auto;
 }

package/dist/styles/progress.css

@@ -1,5 +1,5 @@
 .progress {
-  width: 100%;
+  inline-size: 100%;
 }
 
 /* Variants */
@@ -19,8 +19,8 @@
 /* Indeterminate animation */
 
 .progress[data-state="indeterminate"] .progress__indicator {
-  width: 50% !important;
-  animation: progress-indeterminate 1.5s ease-in-out infinite;
+  inline-size: 50% !important;
+  animation: progress-indeterminate 1.5s var(--sigvelo-motion-ease-change) infinite;
 }
 
 @keyframes progress-indeterminate {
@@ -38,3 +38,8 @@
     transform: none;
   }
 }
+
+:root[data-motion="reduce"] .progress[data-state="indeterminate"] .progress__indicator {
+  animation: none;
+  transform: none;
+}