@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.21

package/src/styles/components/modal.css

@@ -11,7 +11,7 @@
 .mint-modal {
   position: fixed;
   inset: 0;
-  z-index: 50;
+  z-index: var(--mint-z-modal);
   display: flex;
   padding: 1rem;
 }
@@ -36,9 +36,7 @@
 .mint-modal__overlay {
   position: absolute;
   inset: 0;
-  background-color: rgba(15, 23, 42, 0.55);
-  backdrop-filter: blur(4px) saturate(0.6);
-  -webkit-backdrop-filter: blur(4px) saturate(0.6);
+  background-color: rgba(15, 23, 42, 0.45);
 }
 
 /* ========================================================================
@@ -117,7 +115,7 @@
   width: 2.5rem;
   height: 3px;
   background-color: var(--border-color);
-  border-radius: 9999px;
+  border-radius: var(--radius-sm);
   margin: 0.5rem auto 0;
   flex-shrink: 0;
 }
@@ -130,7 +128,7 @@
   display: flex;
   align-items: flex-start;
   gap: 0.625rem;
-  padding: 1.125rem 1.25rem;
+  padding: 1rem 1.25rem 0.875rem;
   border-bottom: 1px solid var(--border-light);
 }
 
@@ -165,7 +163,7 @@
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;
-  border-radius: 0.4375rem;
+  border-radius: var(--radius-md);
   color: var(--text-secondary);
   background: none;
   border: none;

package/src/styles/components/molecule-input.css

@@ -7,7 +7,7 @@
   border: 1px solid var(--border-color);
   background-color: var(--bg-secondary);
   overflow: hidden;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color var(--mint-transition), box-shadow var(--mint-transition);
 }
 
 /* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
@@ -177,7 +177,7 @@
   border-radius: var(--radius);
   color: var(--text-secondary-strong);
   cursor: pointer;
-  transition: color 0.15s ease, background-color 0.15s ease;
+  transition: color var(--mint-transition), background-color var(--mint-transition);
 }
 
 .mint-molecule-input__action-btn:hover:not(:disabled) {

package/src/styles/components/multi-select.css

@@ -1,140 +1,88 @@
-/* BaseSelect multiple (chip list) styles */
+/* BaseSelect multiple: a chip field (same shell as the searchable trigger) that opens
+   the searchable popover (.mint-popover + .mint-searchable-select__panel/__search/__list)
+   with checkbox rows (.mint-menu-item). */
 
-.mint-multi-select {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.mint-multi-select--disabled {
-  opacity: var(--mint-disabled-opacity);
-  pointer-events: none;
-}
-
-/* Invalid: the chip borders take the error color */
-.mint-multi-select--error .mint-multi-select__chip {
-  border-color: var(--mint-error);
-}
-
-/* Placeholder */
-.mint-multi-select__placeholder {
-  font-size: 0.875rem;
-  color: var(--text-muted);
-}
-
-.mint-multi-select--sm .mint-multi-select__placeholder {
-  font-size: 0.75rem;
-}
+.mint-multi-select { position: relative; min-width: 0; }
 
-.mint-multi-select--lg .mint-multi-select__placeholder {
-  font-size: 1rem;
-}
-
-/* Options container */
-.mint-multi-select__options {
+.mint-multi-select__field {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-/* Chip styles — a toggleable option, not a status pill (1i) */
-.mint-multi-select__chip {
-  display: inline-flex;
   align-items: center;
+  width: 100%;
+  min-height: var(--form-height-md);
+  gap: 0.375rem;
+  padding: 0 0.625rem;
   box-sizing: border-box;
-  border-radius: var(--radius);
   border: 1px solid var(--border-color);
-  background-color: var(--bg-card);
-  color: var(--text-secondary-strong);
-  font-family: inherit;
-  font-weight: 500;
-  line-height: 1;
+  border-radius: var(--radius-md);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 0.8125rem;
   cursor: pointer;
-  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
-}
-
-.mint-multi-select__chip:hover:not(.mint-multi-select__chip--active):not(.mint-multi-select__chip--disabled) {
-  background-color: var(--bg-hover);
+  transition: border-color var(--mint-transition), box-shadow var(--mint-transition);
 }
 
-.mint-multi-select__chip:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring-offset);
-}
-
-.mint-multi-select__chip--active {
-  background-color: var(--color-primary-soft);
-  border-color: var(--color-primary);
-  color: var(--_ink-primary);
-}
+.mint-multi-select--sm .mint-multi-select__field { min-height: var(--form-height-sm); font-size: 0.75rem; }
+.mint-multi-select--lg .mint-multi-select__field { min-height: var(--form-height-lg); padding: 0 1rem; font-size: 1rem; }
+.mint-multi-select__field:hover:not(.mint-multi-select__field--disabled) { border-color: var(--_field-border-hover); }
+.mint-multi-select__field:focus-visible,
+.mint-multi-select__field--open { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring-soft); }
+.mint-multi-select__field--error,
+.mint-multi-select__field--error:hover:not(.mint-multi-select__field--disabled) { border-color: var(--mint-error); }
+.mint-multi-select__field--error:focus-visible,
+.mint-multi-select__field--error.mint-multi-select__field--open { border-color: var(--mint-error); box-shadow: var(--focus-ring-soft-error); }
+.mint-multi-select__field--disabled { background: var(--bg-tertiary); color: var(--text-muted); cursor: not-allowed; }
 
-.mint-multi-select__chip--disabled {
-  opacity: var(--mint-disabled-opacity);
-  cursor: not-allowed;
-}
+.mint-multi-select__chips { display: flex; flex: 1; flex-wrap: wrap; min-width: 0; gap: 4px; padding: 4px 0; }
+.mint-multi-select--sm .mint-multi-select__chips { padding: 3px 0; }
+.mint-multi-select__placeholder { color: var(--text-muted); line-height: 20px; }
 
-/* Size variants — fixed heights line up with neighbouring fields */
-.mint-multi-select__chip--sm {
-  height: 1.5rem;
-  padding: 0 0.5rem;
+.mint-multi-select__chip {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  gap: 4px;
+  padding: 0 4px 0 6px;
+  border-radius: var(--radius);
+  background: var(--bg-tertiary);
+  color: var(--text-secondary-strong);
   font-size: 0.75rem;
-  gap: 0.25rem;
-}
-
-.mint-multi-select__chip--md {
-  height: 1.75rem;
-  padding: 0 0.625rem;
-  font-size: 0.8125rem;
-  gap: 0.375rem;
+  white-space: nowrap;
 }
 
-.mint-multi-select__chip--lg {
-  height: 2rem;
-  padding: 0 0.75rem;
-  font-size: 0.875rem;
-  gap: 0.375rem;
-}
+/* The disabled field is --bg-tertiary too, so the chip keeps a hairline edge. */
+.mint-multi-select__field--disabled .mint-multi-select__chip { padding-right: 6px; box-shadow: inset 0 0 0 1px var(--border-strong); }
 
-/* Chip label */
-.mint-multi-select__chip-label {
-  line-height: 1.25;
+.mint-multi-select__chip-remove {
+  display: flex;
+  padding: 1px;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
 }
 
-/* Check icon — always rendered so the chip width never jumps */
-.mint-multi-select__chip-check {
-  flex-shrink: 0;
-  width: 0.75rem;
-  height: 0.75rem;
-  opacity: 0.28;
-  transition: opacity 120ms ease;
-}
+.mint-multi-select__chip-remove:hover { opacity: 1; }
+.mint-multi-select__icon { flex: none; color: var(--text-muted); }
 
-.mint-multi-select__chip--active .mint-multi-select__chip-check {
-  opacity: 1;
+/* Row checkbox: same fill and ink as a checked BaseCheckbox. */
+.mint-multi-select__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  flex: none;
+  box-sizing: border-box;
+  border: 1px solid var(--border-strong);
+  border-radius: 3px;
+  color: var(--text-on-accent);
 }
 
-.mint-multi-select__chip--lg .mint-multi-select__chip-check {
-  width: 0.875rem;
-  height: 0.875rem;
-}
+.mint-multi-select__check--on { border-color: var(--color-primary); background: var(--color-primary); }
+.mint-multi-select__option[aria-disabled='true'] .mint-multi-select__check { opacity: var(--mint-disabled-opacity); }
 
 @media (prefers-reduced-motion: reduce) {
-  .mint-multi-select__chip,
-  .mint-multi-select__chip-check {
-    transition: none;
-  }
-}
-
-/* Summary text */
-.mint-multi-select__summary {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-}
-
-.mint-multi-select--sm .mint-multi-select__summary {
-  font-size: 0.6875rem;
-}
-
-.mint-multi-select--lg .mint-multi-select__summary {
-  font-size: 0.875rem;
+  .mint-multi-select__field { transition: none; }
 }

package/src/styles/components/number-input.css

@@ -14,10 +14,11 @@
   min-width: 0;
   align-items: stretch;
   overflow: hidden;
+  box-sizing: border-box;
   background-color: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  border-radius: var(--radius-md);
+  transition: border-color var(--mint-transition), box-shadow var(--mint-transition);
 }
 
 .mint-number-input--sm .mint-number-input__field { min-height: var(--form-height-sm); }
@@ -25,7 +26,7 @@
 .mint-number-input--lg .mint-number-input__field { min-height: var(--form-height-lg); }
 
 .mint-number-input__field:hover:not(:has(:disabled)) {
-  border-color: var(--text-muted);
+  border-color: var(--_field-border-hover);
 }
 
 .mint-number-input__field:focus-within {
@@ -87,7 +88,7 @@
   background: var(--color-primary);
 }
 
-/* ---------- Numeric input — left-aligned, Fira Code ---------- */
+/* ---------- Numeric input — left-aligned, mono ---------- */
 
 .mint-number-input__input {
   position: relative;
@@ -119,47 +120,53 @@
 
 /* Horizontal padding matches BaseInput canonical scale (10/12/16) so FormField's
    12px label indent aligns with the numeric text across all input types. */
-.mint-number-input__input--sm { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
-.mint-number-input__input--md { padding: 0.5rem 0.75rem;    font-size: 0.875rem; }
-.mint-number-input__input--lg { padding: 0.75rem 1rem;      font-size: 1rem; }
+.mint-number-input__input--sm { padding: 0.25rem 0.625rem; font-size: 0.8125rem; }
+.mint-number-input__input--md { padding: 0.375rem 0.75rem;    font-size: 0.875rem; }
+.mint-number-input__input--lg { padding: 0.5rem 1rem;      font-size: 1rem; }
 
 /* ---------- Unit suffix ---------- */
 
 .mint-number-input__unit {
   position: relative;
   flex-shrink: 0;
-  padding-right: 0.5rem;
+  padding: 0 0.5rem 0 0.25rem;
   color: var(--text-muted);
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   font-family: var(--font-mono);
   user-select: none;
   white-space: nowrap;
 }
 
-/* ---------- Steppers — always visible, horizontal, hairline-divided ---------- */
+/* ---------- Steppers — always visible, stacked (increase on top), hairline-divided ---------- */
 
 .mint-number-input__steppers {
   display: flex;
+  flex-direction: column-reverse; /* markup is decrease, increase */
   flex-shrink: 0;
+  width: 22px;
+  border-left: 1px solid var(--border-color);
 }
 
 .mint-number-input__stepper {
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
-  width: 1.625rem;
   padding: 0;
-  background: transparent;
-  color: var(--text-secondary-strong);
+  background: var(--bg-primary);
+  color: var(--text-muted);
   border: none;
-  border-left: 1px solid var(--border-color);
   cursor: pointer;
-  transition: background-color 0.12s ease, color 0.12s ease;
+  transition: background-color var(--mint-transition), color var(--mint-transition);
+}
+
+.mint-number-input__stepper--down {
+  border-top: 1px solid var(--border-color);
 }
 
 .mint-number-input__stepper:hover:not(:disabled) {
-  background: var(--color-primary-soft);
-  color: var(--_ink-primary);
+  background: var(--bg-hover);
+  color: var(--text-primary);
 }
 
 .mint-number-input__stepper:disabled {
@@ -169,8 +176,8 @@
 }
 
 .mint-number-input__stepper svg {
-  width: 0.625rem;
-  height: 0.625rem;
+  width: 0.75rem;
+  height: 0.75rem;
 }
 
 @media (prefers-reduced-motion: reduce) {