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

package/src/styles/components/segmented-control.css

@@ -6,20 +6,21 @@
   overflow: hidden;
 }
 
-/* Card variant container - matches RFA design.
+/* Card variant container - a bordered track; options are content-sized.
    `width: fit-content` is load-bearing: `inline-grid` alone gets blockified and
    stretched when the control is a stretching flex/grid item. */
 .mint-segmented-control--card {
   display: inline-grid;
   box-sizing: border-box; /* full-width must include the padding */
   grid-auto-flow: column;
-  grid-auto-columns: 1fr;
+  grid-auto-columns: auto;
   width: fit-content;
   max-width: 100%;
-  gap: 0.1875rem;
-  padding: 0.1875rem;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
-  background-color: var(--bg-tertiary);
+  background-color: var(--bg-primary);
   overflow: visible;
 }
 
@@ -30,6 +31,7 @@
 
 .mint-segmented-control--card.mint-segmented-control--full-width {
   display: grid;
+  grid-auto-columns: 1fr;
   width: 100%;
 }
 
@@ -50,6 +52,7 @@
   color: var(--text-primary);
   transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
   text-align: center;
+  white-space: nowrap;
   font-family: inherit;
   box-sizing: border-box;
 }
@@ -85,8 +88,6 @@
 .mint-segmented-control__option--simple {
   flex: 1;
   padding: 0.5rem 1rem;
-  /* `flex: 1` (basis 0) would otherwise squeeze a longer label onto two lines. */
-  white-space: nowrap;
 }
 
 .mint-segmented-control__option--simple:hover:not(.mint-segmented-control__option--active):not(.mint-segmented-control__option--disabled) {
@@ -96,11 +97,11 @@
 .mint-segmented-control__option--simple.mint-segmented-control__option--active {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
-  color: white;
+  color: var(--text-on-accent);
   z-index: 1;
 }
 
-/* Card variant - matches RFA raised card design */
+/* Card variant - the active option is a card-surface step with a hairline */
 .mint-segmented-control__option--card {
   flex: 1;
   padding: 0.5rem 0.75rem;
@@ -119,31 +120,33 @@
 .mint-segmented-control__option--card.mint-segmented-control__option--active {
   background-color: var(--bg-card);
   color: var(--text-primary);
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 0 0 1px var(--border-color);
 }
 
 /* Size variants - simple */
 .mint-segmented-control__option--simple.mint-segmented-control__option--sm {
-  padding: 0.375rem 0.75rem;
+  padding: 0.25rem 0.75rem;
   font-size: 0.75rem;
   min-height: var(--form-height-sm);
 }
 
 .mint-segmented-control__option--simple.mint-segmented-control__option--md {
-  padding: 0.5rem 1rem;
+  padding: 0.375rem 1rem;
   font-size: 0.875rem;
   min-height: var(--form-height-md);
 }
 
 .mint-segmented-control__option--simple.mint-segmented-control__option--lg {
-  padding: 0.625rem 1.25rem;
+  padding: 0.5rem 1.25rem;
   font-size: 1rem;
   min-height: var(--form-height-lg);
 }
 
 /* Size variants - card */
 .mint-segmented-control__option--card.mint-segmented-control__option--sm {
-  padding: 0.3125rem 0.625rem;
+  min-height: calc(var(--form-height-sm) - 6px);
+  padding: 0 0.625rem;
+  font-size: 0.75rem;
 }
 
 .mint-segmented-control__option--card.mint-segmented-control__option--md {
@@ -192,7 +195,7 @@
 
 /* Description color in active state - use text-muted for card variant, primary for simple */
 .mint-segmented-control__option--simple.mint-segmented-control__option--active .mint-segmented-control__description {
-  color: color-mix(in srgb, white 80%, transparent);
+  color: color-mix(in srgb, var(--text-on-accent) 80%, transparent);
 }
 
 .mint-segmented-control__option--card.mint-segmented-control__option--active .mint-segmented-control__description {

package/src/styles/components/select.css

@@ -46,21 +46,21 @@
 }
 
 .mint-select__control--sm {
-  padding: 0.375rem 0.625rem;
+  padding: 0.25rem 0.625rem;
   padding-right: 2.5rem;
   font-size: 0.8125rem;
   min-height: var(--form-height-sm);
 }
 
 .mint-select__control--md {
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.75rem;
   padding-right: 2.5rem;
   font-size: 0.875rem;
   min-height: var(--form-height-md);
 }
 
 .mint-select__control--lg {
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 1rem;
   padding-right: 2.5rem;
   font-size: 1rem;
   min-height: var(--form-height-lg);

package/src/styles/components/sequence-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. */
@@ -62,7 +62,7 @@
   background: transparent;
   color: var(--text-secondary-strong);
   cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition: background-color var(--mint-transition), color var(--mint-transition);
 }
 
 .mint-sequence-input__tool-btn:focus-visible {

package/src/styles/components/sequence-progress-bar.css

@@ -1,4 +1,4 @@
-/* SequenceProgressBar (6b): mono counts and times, no colored percent, no ETA pill.
+/* SequenceProgressBar (6b): mono count only, no colored percent, no ETA pill.
    The bar fill is --color-primary (ProgressBar). */
 .mint-sequence-progress {
   display: flex;
@@ -7,16 +7,20 @@
   min-width: 0;
 }
 
+/* Head and footer read as sans prose; only the count is a mono value. */
 .mint-sequence-progress__header,
 .mint-sequence-progress__footer {
   display: flex;
   align-items: baseline;
-  justify-content: space-between;
   gap: 0.75rem;
   min-width: 0;
-  font-family: var(--font-mono);
   font-size: 0.75rem;
   font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+}
+
+.mint-sequence-progress__footer {
+  justify-content: space-between;
 }
 
 .mint-sequence-progress__label,
@@ -27,18 +31,23 @@
   white-space: nowrap;
 }
 
-.mint-sequence-progress__label,
-.mint-sequence-progress__percent {
+.mint-sequence-progress__count {
+  font-family: var(--font-mono);
+  font-weight: 500;
   color: var(--text-primary);
 }
 
+.mint-sequence-progress__failed {
+  flex: 0 0 auto;
+  color: var(--_ink-error);
+}
+
 .mint-sequence-progress__percent,
 .mint-sequence-progress__eta {
   flex: 0 0 auto;
   white-space: nowrap;
 }
 
-.mint-sequence-progress__remaining,
-.mint-sequence-progress__eta {
-  color: var(--text-secondary);
+.mint-sequence-progress__percent {
+  margin-left: auto;
 }

package/src/styles/components/settings-modal.css

@@ -37,6 +37,12 @@
   border-bottom-color: var(--border-color);
 }
 
+/* The pane ends after the last group's last row: no closing hairline there,
+   it would sit on the footer rule with nothing between them. */
+.mint-settings-modal__group:last-of-type > .mint-settings-modal__group-grid > .mint-settings-modal__row:last-child {
+  border-bottom: none;
+}
+
 /* The field cell anchors the ↺ reset, which sits just left of the control (5d).
    --_settings-control-w is the control's width; stacked fields (text, custom slots)
    keep 0 and put the reset at the right end of their label line. */
@@ -655,10 +661,9 @@
 .mint-settings-modal__density-preview {
   --_density-row: 2.125rem;
 
+  /* A hairline table in the setting row, not a bordered box inside the modal. */
   grid-column: 1 / -1;
   overflow: hidden;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
   font-size: 0.75rem;
 }
 

package/src/styles/components/smart-group.css

@@ -1,7 +1,7 @@
 /* ==========================================================================
    Smart Group — Full View modal (auto "Field Recipe" + manual cohort modes).
    Ported from the MINT design-system project; all values resolve against the
-   SDK token set in styles/variables.css. Fira Sans for UI, Fira Code for
+   SDK token set in styles/variables.css. --font-sans for UI, --font-mono for
    sample identifiers (data). Group colors are --mint-sample-1…8 (3a).
    ========================================================================== */
 
@@ -49,7 +49,7 @@
   border-radius: var(--radius);
   color: var(--text-muted);
   font-size: 1.25rem; line-height: 1;
-  transition: background 0.15s ease, color 0.15s ease;
+  transition: background var(--mint-transition), color var(--mint-transition);
 }
 .sg-head__close:hover { background: var(--bg-hover); color: var(--text-primary); }
 
@@ -63,7 +63,7 @@
   font: inherit; font-size: 0.8125rem; font-weight: 500;
   color: var(--text-secondary);
   padding: 0.25rem 0.625rem; border-radius: var(--radius);
-  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+  transition: background var(--mint-transition), color var(--mint-transition), box-shadow var(--mint-transition);
 }
 .sg-mode__btn:hover { color: var(--text-primary); }
 .sg-mode__btn--on {
@@ -138,7 +138,7 @@
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   background: var(--bg-card);
-  transition: border-color 0.15s ease, background 0.15s ease;
+  transition: border-color var(--mint-transition), background var(--mint-transition);
 }
 .sg-field--on {
   border-color: var(--color-primary);
@@ -177,7 +177,7 @@
 .sg-group {
   display: flex; align-items: center; gap: 0.625rem;
   padding: 0.4375rem 0.5rem; border-radius: var(--radius);
-  transition: background 0.15s ease;
+  transition: background var(--mint-transition);
 }
 .sg-group:hover { background: var(--bg-hover); }
 .sg-dot {
@@ -241,16 +241,16 @@
   color: var(--color-primary); background: none; border: none;
   cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem;
   padding: 0.3125rem 0.5rem; border-radius: var(--radius); white-space: nowrap;
-  transition: background 0.15s ease, color 0.15s ease;
+  transition: background var(--mint-transition), color var(--mint-transition);
 }
 .sg-foot__link:hover { background: var(--color-primary-soft); color: var(--_ink-primary); }
 .sg-btn {
   font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
   padding: 0.5rem 1rem; border-radius: var(--radius-md);
-  border: 1px solid transparent; transition: all 0.15s ease;
+  border: 1px solid transparent; transition: all var(--mint-transition);
   display: inline-flex; align-items: center; gap: 0.4375rem;
 }
-.sg-btn--primary { background: var(--color-primary); color: #fff; }
+.sg-btn--primary { background: var(--color-primary); color: var(--text-on-accent); }
 .sg-btn--primary:hover { background: var(--color-primary-hover); }
 
 /* ==========================================================================
@@ -273,7 +273,7 @@
   width: 1.25rem; height: 1.25rem; padding: 0; flex-shrink: 0;
   border: none; border-radius: var(--radius-sm); background: none;
   color: var(--text-muted); cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
+  transition: background var(--mint-transition), color var(--mint-transition);
 }
 .fr-row__grip { cursor: grab; }
 .fr-row__grip:hover,
@@ -404,7 +404,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
   padding: 0.5rem 2rem 0.5rem 2.125rem;
   border: 1px solid var(--border-color); border-radius: var(--radius-md);
   background: var(--bg-tertiary); color: var(--text-primary); outline: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color var(--mint-transition), box-shadow var(--mint-transition);
 }
 .mg2-search input:focus {
   border-color: var(--color-primary); background: var(--bg-secondary);
@@ -426,17 +426,17 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
   padding: 0.3125rem 0.625rem; cursor: pointer;
   background: var(--bg-secondary);
   border: 1px solid var(--border-color); border-radius: 9999px;
-  transition: all 0.13s ease;
+  transition: all var(--mint-transition);
 }
 .mg2-chip:hover { border-color: var(--text-muted); }
 .mg2-chip--on {
-  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
+  background: var(--color-primary); border-color: var(--color-primary); color: var(--text-on-accent);
 }
 .mg2-chip__n {
   font-variant-numeric: tabular-nums; font-weight: 600;
   font-size: 0.6875rem; color: var(--text-muted);
 }
-.mg2-chip--on .mg2-chip__n { color: rgba(255, 255, 255, 0.8); }
+.mg2-chip--on .mg2-chip__n { color: color-mix(in srgb, var(--text-on-accent) 80%, transparent); }
 
 .mg2-selbar {
   display: flex; align-items: center; gap: 0.5rem;
@@ -465,7 +465,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
 .mg2-row {
   display: flex; align-items: center; gap: 0.625rem;
   padding: 0.4375rem 0.5rem; border-radius: var(--radius);
-  cursor: pointer; transition: background 0.12s ease;
+  cursor: pointer; transition: background var(--mint-transition);
 }
 .mg2-row:hover { background: var(--bg-hover); }
 .mg2-row--on { background: var(--color-primary-soft); }
@@ -571,7 +571,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
   font: inherit; font-size: 0.8125rem; color: var(--text-secondary);
   padding: 0.5625rem 0.625rem; cursor: pointer; text-align: left; width: 100%;
   border: 1px dashed var(--border-color); border-radius: var(--radius-md);
-  background: none; transition: all 0.13s ease;
+  background: none; transition: all var(--mint-transition);
 }
 .mg2-unassigned:hover { border-color: var(--text-muted); background: var(--bg-hover); }
 .mg2-unassigned--on { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-soft); }
@@ -587,7 +587,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
   max-height: 0; opacity: 0;
   border-top: 1px solid transparent;
   background: linear-gradient(0deg, var(--color-primary-soft), var(--color-primary-soft)), var(--bg-secondary);
-  transition: max-height 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.18s ease, border-color 0.2s ease;
+  transition: max-height 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), opacity var(--mint-transition), border-color var(--mint-transition);
 }
 .mg2-bar--open {
   max-height: 160px; opacity: 1;
@@ -628,7 +628,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
 .mg2-swatch {
   width: 1.125rem; height: 1.125rem; border-radius: 9999px; cursor: pointer;
   border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
-  transition: transform 0.12s ease;
+  transition: transform var(--mint-transition);
 }
 .mg2-swatch:hover { transform: scale(1.12); }
 .mg2-swatch--on {
@@ -653,7 +653,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
   color: var(--text-secondary); cursor: pointer;
   padding: 0.25rem 0.5rem; border-radius: var(--radius);
   background: var(--bg-secondary); border: 1px solid var(--border-color);
-  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  transition: background var(--mint-transition), color var(--mint-transition), border-color var(--mint-transition);
 }
 .fr-upload:hover {
   background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--text-muted);

package/src/styles/components/step-wizard.css

@@ -1,4 +1,5 @@
 .mint-wizard {
+  --_wizard-dot: 1.375rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -26,7 +27,7 @@
 
 .mint-wizard__step-connector {
   flex: 1;
-  min-width: 0.75rem;
+  min-width: 1rem;
   height: 1px;
   background-color: var(--border-color);
   transition: background-color 150ms ease;
@@ -40,7 +41,7 @@
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  gap: 0.375rem;
+  gap: 0.5rem;
   cursor: pointer;
 }
 
@@ -50,15 +51,15 @@
 }
 
 .mint-wizard__step-dot {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--_wizard-dot);
+  height: var(--_wizard-dot);
   flex-shrink: 0;
   border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-mono);
-  font-size: 0.6875rem;
+  font-size: 0.6875rem; /* v2 draws 10px; 11px is the SDK floor (8d) */
   font-weight: 600;
   background-color: var(--bg-card);
   color: var(--text-secondary);
@@ -72,46 +73,81 @@
 }
 
 /* Size variants for dot */
-.mint-wizard--sm .mint-wizard__step-dot {
-  width: 1.125rem;
-  height: 1.125rem;
+.mint-wizard--sm {
+  --_wizard-dot: 1.125rem;
+}
+
+.mint-wizard--lg {
+  --_wizard-dot: 1.5rem;
 }
 
 .mint-wizard--lg .mint-wizard__step-dot {
-  width: 1.5rem;
-  height: 1.5rem;
   font-size: 0.75rem;
 }
 
 .mint-wizard__step-indicator--active .mint-wizard__step-dot {
+  background-color: var(--color-primary-soft);
   color: var(--_ink-primary);
-  box-shadow: inset 0 0 0 1.5px var(--color-primary);
+  box-shadow: inset 0 0 0 2px var(--color-primary);
 }
 
 .mint-wizard__step-indicator--completed .mint-wizard__step-dot {
   background-color: var(--color-primary);
-  color: white;
+  color: var(--text-on-accent);
   box-shadow: inset 0 0 0 1.5px var(--color-primary);
 }
 
 .mint-wizard__step-label {
   font-size: 0.8125rem;
-  color: var(--text-secondary);
+  font-weight: 500;
+  color: var(--text-muted);
   white-space: nowrap;
 }
 
 .mint-wizard__step-indicator--active .mint-wizard__step-label {
   color: var(--text-primary);
-  font-weight: 600;
 }
 
 .mint-wizard__step-indicator--completed .mint-wizard__step-label {
   color: var(--text-secondary-strong);
 }
 
-/* Narrow widths keep only the current step's label. */
+/* Vertical: the step rail sits beside the content and navigation. */
+.mint-wizard--vertical {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) auto;
+  column-gap: 1.5rem;
+  row-gap: 1.5rem;
+}
+
+.mint-wizard--vertical .mint-wizard__progress {
+  grid-row: 1 / span 2;
+}
+
+.mint-wizard--vertical .mint-wizard__body,
+.mint-wizard--vertical .mint-wizard__navigation {
+  grid-column: 2;
+}
+
+.mint-wizard--vertical .mint-wizard__steps-indicator {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+}
+
+/* Connector runs through the dot centre. */
+.mint-wizard--vertical .mint-wizard__step-connector {
+  flex: none;
+  width: 1px;
+  height: 1rem;
+  min-width: 0;
+  margin: 2px 0 2px calc(var(--_wizard-dot) / 2);
+}
+
+/* Narrow horizontal widths keep only the current step's label. */
 @media (max-width: 640px) {
-  .mint-wizard__step-indicator:not(.mint-wizard__step-indicator--active) .mint-wizard__step-label {
+  .mint-wizard:not(.mint-wizard--vertical) .mint-wizard__step-indicator:not(.mint-wizard__step-indicator--active) .mint-wizard__step-label {
     display: none;
   }
 }

package/src/styles/components/tabs.css

@@ -45,7 +45,7 @@
 
 .mint-tabs--underline .mint-tab--active {
   border-bottom-color: var(--color-primary);
-  color: var(--color-primary);
+  color: var(--text-primary);
 }
 
 /* Tab content */
@@ -68,7 +68,7 @@
 /* Mono count block */
 .mint-tab__badge {
   padding: 0.0625rem 0.25rem;
-  border-radius: 0.1875rem;
+  border-radius: var(--radius-sm);
   background-color: var(--bg-tertiary);
   color: var(--text-secondary);
   font-family: var(--font-mono);

package/src/styles/components/textarea.css

@@ -50,17 +50,17 @@
 
 /* Size variants */
 .mint-textarea--sm {
-  padding: 0.375rem 0.625rem;
+  padding: 0.25rem 0.625rem;
   font-size: 0.8125rem;
 }
 
 .mint-textarea--md {
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
 }
 
 .mint-textarea--lg {
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 1rem;
   font-size: 1rem;
 }