@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/styles/components/jobs-status-tray.css

@@ -19,12 +19,12 @@
   gap: 0.625rem;
   padding: 0.5rem 1rem;
   border: 0;
-  border-radius: 9999px;
+  border-radius: var(--radius-lg);
   background: var(--color-primary);
-  color: white;
-  box-shadow: var(--shadow-lg);
+  color: var(--text-on-accent);
+  box-shadow: var(--mint-shadow-pop);
   cursor: pointer;
-  transition: background var(--mint-transition), box-shadow var(--mint-transition);
+  transition: background var(--mint-transition);
 }
 
 .mint-jobs-tray__trigger:hover {
@@ -63,14 +63,14 @@
   align-items: center;
   justify-content: center;
   padding: 0 0.375rem;
-  border-radius: 9999px;
+  border-radius: var(--radius-sm);
   font: 600 0.6875rem/1 var(--font-mono);
 }
 
+/* Inverted on the accent fill: accent ink on the on-accent colour, in both themes. */
 .mint-jobs-tray__count {
-  /* Darken, not lighten: white text keeps >= 4.5:1 on any primary (indigo or the platform teal). */
-  background: rgb(0 0 0 / 0.4);
-  color: inherit;
+  background: var(--text-on-accent);
+  color: var(--_ink-primary);
 }
 
 .mint-jobs-tray__backdrop {
@@ -78,7 +78,6 @@
   inset: 0;
   z-index: -2;
   background: rgb(15 23 42 / 0.22);
-  backdrop-filter: blur(2px);
 }
 
 .mint-jobs-tray__panel {
@@ -86,14 +85,14 @@
   right: 0;
   bottom: 3.75rem;
   display: flex;
-  width: min(27.5rem, calc(100vw - 2rem));
+  width: min(21.25rem, calc(100vw - 2rem));
   max-height: min(42rem, calc(100vh - 7rem));
   flex-direction: column;
   overflow: hidden;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   background: var(--bg-card);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--mint-shadow-pop);
 }
 
 .mint-jobs-tray__header,
@@ -107,7 +106,8 @@
 
 .mint-jobs-tray__header {
   justify-content: space-between;
-  padding: 0.75rem 0.75rem 0.75rem 1rem;
+  height: 2.5rem;
+  padding: 0 0.5rem 0 0.75rem;
   border-bottom: 1px solid var(--border-color);
 }
 
@@ -119,16 +119,22 @@
 }
 
 .mint-jobs-tray__title {
+  flex-shrink: 0;
   margin: 0;
   color: var(--text-primary);
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 600;
+  white-space: nowrap;
 }
 
 .mint-jobs-tray__subtitle {
+  min-width: 0;
   margin: 0;
-  color: var(--text-secondary);
+  overflow: hidden;
+  color: var(--text-muted);
   font: 0.6875rem/1.3 var(--font-mono);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .mint-jobs-tray__header-actions {
@@ -189,7 +195,7 @@
 }
 
 .mint-jobs-tray__tab--active {
-  color: var(--color-primary);
+  color: var(--_ink-primary);
 }
 
 .mint-jobs-tray__tab--active::after {
@@ -233,7 +239,7 @@
 
 /* 2f: rows + hairlines, no card per job. */
 .mint-jobs-tray__job {
-  padding: 0.75rem 1rem;
+  padding: 0.625rem 0.75rem;
   border-bottom: 1px solid var(--border-light);
 }
 
@@ -263,7 +269,7 @@
   color: var(--text-primary);
   cursor: pointer;
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -295,7 +301,7 @@
   background: var(--mint-jobs-tray-tone);
 }
 
-.mint-jobs-tray__status--running { --mint-jobs-tray-tone: var(--mint-info); }
+.mint-jobs-tray__status--running { --mint-jobs-tray-tone: var(--color-primary); }
 .mint-jobs-tray__status--completed { --mint-jobs-tray-tone: var(--mint-success); }
 
 .mint-jobs-tray__status--awaiting-input {
@@ -320,10 +326,10 @@
 }
 
 .mint-jobs-tray__progress {
-  height: 2px;
-  margin-top: 0.5rem;
+  height: 4px;
+  margin-top: 0.375rem;
   overflow: hidden;
-  border-radius: 9999px;
+  border-radius: 2px;
   background: var(--bg-tertiary);
 }
 
@@ -363,7 +369,7 @@
 .mint-jobs-tray__job--awaiting-input .mint-jobs-tray__action:not(.mint-jobs-tray__action--danger) {
   border-color: var(--color-primary);
   background: var(--color-primary);
-  color: white;
+  color: var(--text-on-accent);
 }
 
 .mint-jobs-tray__job--awaiting-input .mint-jobs-tray__action:not(.mint-jobs-tray__action--danger):hover {
@@ -382,7 +388,7 @@
 
 .mint-jobs-tray__clear-row {
   justify-content: flex-end;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 0.75rem;
   border-bottom: 1px solid var(--border-light);
 }
 
@@ -391,11 +397,12 @@
   cursor: not-allowed;
 }
 
+/* Overlays fade in 180ms; no lift or scale (v2). */
 .mint-jobs-tray-fade-enter-active,
 .mint-jobs-tray-fade-leave-active,
 .mint-jobs-tray-slide-enter-active,
 .mint-jobs-tray-slide-leave-active {
-  transition: opacity var(--mint-transition), transform var(--mint-transition);
+  transition: opacity 180ms ease;
 }
 
 .mint-jobs-tray-fade-enter-from,
@@ -406,7 +413,6 @@
 .mint-jobs-tray-slide-enter-from,
 .mint-jobs-tray-slide-leave-to {
   opacity: 0;
-  transform: translateY(0.5rem) scale(0.98);
 }
 
 @keyframes mint-jobs-tray-pulse {

package/src/styles/components/loading-spinner.css

@@ -31,18 +31,15 @@
   height: 32px;
 }
 
-/* Variants */
-.mint-spinner--primary {
-  color: var(--color-primary);
-}
-
-.mint-spinner--cta {
-  color: var(--color-cta);
-}
-
-.mint-spinner--muted {
-  color: var(--text-muted);
-}
+/* Tones */
+.mint-spinner--primary { color: var(--color-primary); }
+.mint-spinner--cta     { color: var(--color-cta); }
+.mint-spinner--success { color: var(--mint-success); }
+.mint-spinner--warning { color: var(--mint-warning); }
+.mint-spinner--error   { color: var(--mint-error); }
+.mint-spinner--info    { color: var(--mint-info); }
+.mint-spinner--neutral { color: var(--text-muted); }
+.mint-spinner--inherit { color: inherit; }
 
 /* Screen-reader only label */
 .mint-spinner__label {

package/src/styles/components/modal.css

@@ -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);
 }
 
 /* ========================================================================
@@ -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);
 }
 

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,135 +1,88 @@
-/* MultiSelect Component 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;
-}
+.mint-multi-select { position: relative; min-width: 0; }
 
-/* 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--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;
+  transition: border-color var(--mint-transition), box-shadow var(--mint-transition);
 }
 
-.mint-multi-select__chip:hover:not(.mint-multi-select__chip--active):not(.mint-multi-select__chip--disabled) {
-  background-color: var(--bg-hover);
-}
-
-.mint-multi-select__chip:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring-offset);
-}
+.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--active {
-  background-color: var(--color-primary-soft);
-  border-color: var(--color-primary);
-  color: var(--_ink-primary);
-}
-
-.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;
+  white-space: nowrap;
 }
 
-.mint-multi-select__chip--md {
-  height: 1.75rem;
-  padding: 0 0.625rem;
-  font-size: 0.8125rem;
-  gap: 0.375rem;
-}
-
-.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.75rem; }
+.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) {