@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.1

package/src/styles/components/collapsible-card.css

@@ -234,7 +234,7 @@
   align-items: center;
 }
 
-/* `toggleColor` reaches the BaseToggle track through this private property (10a). */
+/* `toggleColor` reaches the switch track through this private property (10a). */
 .mint-collapsible-card__toggle .mint-toggle__track--on {
   background-color: var(--_cc-toggle-on, var(--color-primary));
 }

package/src/styles/components/confirm-dialog.css

@@ -27,7 +27,7 @@
   height: 1.25rem;
 }
 
-.mint-confirm__icon--danger {
+.mint-confirm__icon--error {
   background-color: var(--mint-error-bg);
   color: var(--mint-error);
 }
@@ -37,11 +37,27 @@
   color: var(--mint-warning);
 }
 
-.mint-confirm__icon--info {
+.mint-confirm__icon--info,
+.mint-confirm__icon--primary {
   background-color: var(--color-primary-soft);
   color: var(--color-primary);
 }
 
+.mint-confirm__icon--success {
+  background-color: var(--mint-success-bg);
+  color: var(--mint-success);
+}
+
+.mint-confirm__icon--cta {
+  background-color: color-mix(in srgb, var(--color-cta) 12%, transparent);
+  color: var(--color-cta);
+}
+
+.mint-confirm__icon--neutral {
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
 .mint-confirm__message {
   font-size: 0.875rem;
   color: var(--text-primary);

package/src/styles/components/empty-state.css

@@ -51,7 +51,8 @@
 .mint-empty-state__icon-wrapper--primary,
 .mint-empty-state__icon-wrapper--cta,
 .mint-empty-state__icon-wrapper--success,
-.mint-empty-state__icon-wrapper--muted {
+.mint-empty-state__icon-wrapper--info,
+.mint-empty-state__icon-wrapper--neutral {
   background: var(--bg-tertiary);
 }
 
@@ -76,7 +77,8 @@
 .mint-empty-state__icon--primary,
 .mint-empty-state__icon--cta,
 .mint-empty-state__icon--success,
-.mint-empty-state__icon--muted   { color: var(--text-secondary); }
+.mint-empty-state__icon--info,
+.mint-empty-state__icon--neutral { color: var(--text-secondary); }
 .mint-empty-state__icon--warning { color: var(--mint-warning); }
 .mint-empty-state__icon--error   { color: var(--mint-error); }
 

package/src/styles/components/file-picker.css

@@ -259,7 +259,7 @@
   height: 10px;
   transition: transform 120ms ease;
 }
-.mint-picker__chevron--open {
+.mint-picker__chevron--open svg {
   transform: rotate(90deg);
 }
 .mint-picker__node-icon {

package/src/styles/components/icon-button.css

@@ -1,4 +1,4 @@
-/* IconButton Component Styles */
+/* BaseButton icon-only styles (`icon` prop without a default slot) */
 
 .mint-icon-button {
   display: inline-flex;

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/multi-select.css

@@ -1,4 +1,4 @@
-/* MultiSelect Component Styles */
+/* BaseSelect multiple (chip list) styles */
 
 .mint-multi-select {
   display: flex;
@@ -11,6 +11,11 @@
   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;

package/src/styles/components/pill.css

@@ -28,9 +28,11 @@
   font-size: 0.8125rem;
 }
 
-/* Semantic tones — every color resolves from a token. `--mint-pill-tone` is the
-   accent (soft-tint background, dot, outline border); `--mint-pill-ink` the text. */
+/* Tones — every color resolves from a token. `--mint-pill-tone` is the accent
+   (soft-tint background, dot, outline border); `--mint-pill-ink` the text. A
+   `color` prop sets `--mint-pill-tone` inline. */
 .mint-pill--primary { --mint-pill-tone: var(--color-primary); --mint-pill-ink: var(--color-primary-hover); }
+.mint-pill--cta     { --mint-pill-tone: var(--color-cta);     --mint-pill-ink: var(--color-cta-hover); }
 .mint-pill--success { --mint-pill-tone: var(--mint-success);  --mint-pill-ink: var(--mint-success-hover); }
 .mint-pill--warning { --mint-pill-tone: var(--mint-warning);  --mint-pill-ink: var(--mint-warning-text); }
 .mint-pill--error   { --mint-pill-tone: var(--mint-error);    --mint-pill-ink: var(--mint-error-hover); }
@@ -38,6 +40,7 @@
 .mint-pill--neutral { --mint-pill-tone: var(--text-secondary); --mint-pill-ink: var(--text-secondary-strong); }
 
 html.dark .mint-pill--primary,
+html.dark .mint-pill--cta,
 html.dark .mint-pill--success,
 html.dark .mint-pill--warning,
 html.dark .mint-pill--error,
@@ -45,32 +48,24 @@ html.dark .mint-pill--info {
   --mint-pill-ink: var(--mint-pill-tone);
 }
 
-/* Variants */
-.mint-pill--default,
-.mint-pill--neutral {
-  background-color: var(--bg-tertiary);
-  color: var(--text-secondary);
-}
-
-.mint-pill--primary,
-.mint-pill--success,
-.mint-pill--warning,
-.mint-pill--error,
-.mint-pill--info {
+/* Variant: Soft (default) — tinted fill; neutral without `color` is a plain tertiary surface. */
+.mint-pill--soft {
   background-color: color-mix(in srgb, var(--mint-pill-tone) 12%, transparent);
   color: var(--mint-pill-ink);
 }
 
-html.dark .mint-pill--primary,
-html.dark .mint-pill--success,
-html.dark .mint-pill--warning,
-html.dark .mint-pill--error,
-html.dark .mint-pill--info {
+html.dark .mint-pill--soft {
   background-color: color-mix(in srgb, var(--mint-pill-tone) 22%, transparent);
 }
 
+.mint-pill--soft.mint-pill--neutral:where(:not(.mint-pill--accent)) {
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
 /* Status dot */
 .mint-pill__dot {
+  position: relative;
   flex-shrink: 0;
   width: 0.375rem;
   height: 0.375rem;
@@ -78,32 +73,42 @@ html.dark .mint-pill--info {
   background-color: var(--mint-pill-tone, currentColor);
 }
 
+/* Pulse — expanding ring via ::before, 1.8s loop */
+.mint-pill__dot--pulse::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background-color: var(--mint-pill-tone, currentColor);
+  animation: mint-pill-pulse 1.8s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes mint-pill-pulse {
+  0%   { transform: scale(0.6); opacity: 0.6; }
+  100% { transform: scale(1.8); opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-pill__dot--pulse::before { animation: none; opacity: 0; }
+}
+
 /* ========================================================================
    Variant: Outline
    ========================================================================
-   Transparent bg, 1px semantic border, semantic text. Quietest treatment.
-   Good on tinted surfaces or in dense lists where Soft Tint's bg would
-   clash.
+   Transparent bg, 1px border in the tone color, tone text. Quietest
+   treatment. Good on tinted surfaces or in dense lists where the soft
+   tint would clash.
    ======================================================================== */
 
 .mint-pill--outline {
   background-color: transparent;
-  border: 1px solid var(--border-color);
-  color: var(--text-secondary);
-}
-
-.mint-pill--outline.mint-pill--neutral { border-color: var(--text-muted); color: var(--text-primary); }
-
-.mint-pill--outline.mint-pill--primary,
-.mint-pill--outline.mint-pill--success,
-.mint-pill--outline.mint-pill--warning,
-.mint-pill--outline.mint-pill--error,
-.mint-pill--outline.mint-pill--info {
-  background-color: transparent;
-  border-color: var(--mint-pill-tone);
+  border: 1px solid var(--mint-pill-tone);
   color: var(--mint-pill-ink);
 }
 
+.mint-pill--outline.mint-pill--neutral:where(:not(.mint-pill--accent)) { border-color: var(--text-muted); color: var(--text-primary); }
+
 /* Disabled */
 .mint-pill--disabled {
   opacity: var(--mint-disabled-opacity);

package/src/styles/components/plugin-icon.css

@@ -16,6 +16,15 @@
 .mint-plugin-icon--topbar { width: 2.25rem; height: 2.25rem; }
 .mint-plugin-icon--lg { width: 3rem;   height: 3rem; border-radius: 0.75rem; }
 
+/* Tones — a `color` prop sets `--mint-plugin-icon-tone` inline and wins over the class. */
+.mint-plugin-icon--neutral { --mint-plugin-icon-tone: var(--text-secondary); }
+.mint-plugin-icon--primary { --mint-plugin-icon-tone: var(--color-primary); }
+.mint-plugin-icon--cta     { --mint-plugin-icon-tone: var(--color-cta); }
+.mint-plugin-icon--success { --mint-plugin-icon-tone: var(--mint-success); }
+.mint-plugin-icon--warning { --mint-plugin-icon-tone: var(--mint-warning); }
+.mint-plugin-icon--error   { --mint-plugin-icon-tone: var(--mint-error); }
+.mint-plugin-icon--info    { --mint-plugin-icon-tone: var(--mint-info); }
+
 /* Variants — `--mint-plugin-icon-tone` falls back to --color-primary */
 .mint-plugin-icon--solid {
   background-color: var(--mint-plugin-icon-tone, var(--color-primary));

package/src/styles/components/presence-avatars.css

@@ -0,0 +1,194 @@
+/* PresenceAvatars: an avatar stack that opens a list of who is here.
+ * The editing cue is a ring plus a pencil badge, so it does not depend on
+ * colour only. Light mode uses --color-cta-hover (3:1 on the card), dark
+ * mode --color-cta. --mint-presence-surface is the colour the avatars are
+ * cut out of; set it when the stack sits on another surface. */
+
+.mint-presence {
+  --mint-presence-editing: var(--color-cta-hover);
+  --mint-presence-surface: var(--bg-secondary);
+  position: relative;
+  display: inline-flex;
+}
+
+:where(html.dark) .mint-presence {
+  --mint-presence-editing: var(--color-cta);
+}
+
+.mint-presence__trigger {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0.125rem 0.25rem;
+  border: none;
+  border-radius: var(--radius-md);
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+
+.mint-presence__trigger:hover,
+.mint-presence__trigger[aria-expanded='true'] {
+  background: var(--bg-hover);
+}
+
+.mint-presence__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-presence__stack {
+  display: inline-flex;
+  align-items: center;
+}
+
+.mint-presence__stack > * + * {
+  margin-left: -6px;
+}
+
+.mint-presence__avatar {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  line-height: 0;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--mint-presence-surface);
+}
+
+.mint-presence__avatar--editing {
+  z-index: 1;
+  box-shadow: 0 0 0 2px var(--mint-presence-surface), 0 0 0 4px var(--mint-presence-editing);
+}
+
+.mint-presence__stack > .mint-presence__avatar--editing {
+  margin-right: 4px;
+}
+
+.mint-presence__badge {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  display: grid;
+  place-items: center;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: var(--mint-presence-editing);
+  color: white;
+  box-shadow: 0 0 0 2px var(--mint-presence-surface);
+}
+
+.mint-presence__badge svg {
+  width: 7px;
+  height: 7px;
+  stroke-width: 3;
+}
+
+.mint-presence__more {
+  display: inline-grid;
+  place-items: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  border-radius: 9999px;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1;
+  box-shadow: 0 0 0 2px var(--mint-presence-surface);
+}
+
+.mint-presence__panel {
+  --mint-presence-surface: var(--bg-card);
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 50;
+  width: 17rem;
+  max-width: calc(100vw - 2rem);
+  padding: 0.375rem;
+  border-radius: var(--radius-lg);
+}
+
+.mint-presence__head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  margin-bottom: 0.25rem;
+  padding: 0.375rem 0.5rem 0.5rem;
+  border-bottom: 1px solid var(--border-light);
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+.mint-presence__count {
+  font-family: var(--font-mono);
+}
+
+.mint-presence__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mint-presence__row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3125rem 0.5rem;
+  border-radius: var(--radius);
+}
+
+.mint-presence__row + .mint-presence__row {
+  margin-top: 0.125rem;
+}
+
+.mint-presence__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 0.78125rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mint-presence__activity {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--text-secondary);
+  font-size: 0.71875rem;
+  white-space: nowrap;
+}
+
+.mint-presence__activity svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* Mixed toward --text-primary so the label reads at 4.5:1 in both themes. */
+.mint-presence__activity--editing {
+  color: color-mix(in srgb, var(--mint-presence-editing) 75%, var(--text-primary));
+  font-weight: 600;
+}
+
+.mint-presence__rest,
+.mint-presence__foot {
+  margin: 0;
+  padding: 0.375rem 0.5rem 0.25rem;
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  line-height: 1.5;
+}
+
+.mint-presence__foot {
+  margin-top: 0.25rem;
+  border-top: 1px solid var(--border-light);
+}

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

@@ -46,6 +46,8 @@
 .mint-progress__bar--success { background-color: var(--mint-success); }
 .mint-progress__bar--warning { background-color: var(--mint-warning); }
 .mint-progress__bar--error   { background-color: var(--mint-error); }
+.mint-progress__bar--cta     { background-color: var(--color-cta); }
+.mint-progress__bar--neutral { background-color: var(--text-muted); }
 .mint-progress__bar--info    { background-color: var(--color-primary); } /* 6b: progress fill is always primary; --mint-info is for the running dot */
 
 .mint-progress__bar--indeterminate {

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

@@ -22,6 +22,9 @@
 .mint-searchable-select__trigger:hover:not(:disabled) { border-color: var(--_field-border-hover); }
 .mint-searchable-select__trigger:focus-visible,
 .mint-searchable-select__trigger[aria-expanded='true'] { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring-soft); }
+.mint-searchable-select__trigger--error { border-color: var(--mint-error); }
+.mint-searchable-select__trigger--error:focus-visible,
+.mint-searchable-select__trigger--error[aria-expanded='true'] { border-color: var(--mint-error); box-shadow: var(--focus-ring-soft-error); }
 .mint-searchable-select__trigger:disabled { background: var(--bg-tertiary); color: var(--text-muted); cursor: not-allowed; }
 .mint-searchable-select__trigger svg { width: 0.875rem; height: 0.875rem; flex: none; color: var(--text-secondary); }
 .mint-searchable-select__value { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }

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

@@ -252,11 +252,6 @@
 }
 .sg-btn--primary { background: var(--color-primary); color: #fff; }
 .sg-btn--primary:hover { background: var(--color-primary-hover); }
-.sg-btn--ghost {
-  background: var(--bg-secondary); color: var(--text-primary);
-  border-color: var(--border-color);
-}
-.sg-btn--ghost:hover { background: var(--bg-tertiary); }
 
 /* ==========================================================================
    Field Recipe refinements (layered on the shared chrome above)
@@ -683,7 +678,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
 }
 
 /* ==========================================================================
-   Host adapter — when AutoGroupModal renders the Smart Group card inside
+   Host adapter — when AutoGroupModalInternal renders the Smart Group card inside
    BaseModal, strip BaseModal's own chrome/padding so the .sg-modal card is the
    only visible frame, and size it to the design.
    ========================================================================== */

package/src/styles/components/textarea.css

@@ -1,4 +1,4 @@
-/* BaseTextarea Component Styles */
+/* BaseInput type="textarea" styles */
 
 .mint-textarea {
   display: block;

package/src/styles/components/toggle.css

@@ -1,4 +1,4 @@
-/* BaseToggle Component Styles */
+/* BaseCheckbox type="switch" styles */
 
 .mint-toggle {
   display: inline-flex;
@@ -8,7 +8,7 @@
   user-select: none;
 }
 
-.mint-toggle--default {
+.mint-toggle--inline {
   width: fit-content;
 }
 

package/src/styles/components/version-conflict.css

@@ -0,0 +1,122 @@
+/* VersionConflictDialog (412 conflict, option A) and StaleFormBanner (dirty-form strip, option A). */
+
+.mint-version-conflict__message {
+  margin: 0;
+  color: var(--text-secondary);
+  line-height: 1.55;
+}
+
+.mint-version-conflict__footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+/* Overwrite replaces the newer version: error ink and border, not a filled button. */
+.mint-button.mint-version-conflict__overwrite {
+  color: var(--_ink-error);
+  border-color: var(--mint-error-border);
+}
+
+.mint-button.mint-version-conflict__overwrite:not(:disabled):hover {
+  background: var(--mint-error-bg);
+}
+
+.mint-stale-banner {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5625rem;
+  padding: 0.625rem 1.125rem;
+  background: color-mix(in srgb, var(--mint-warning) 8%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--mint-warning) 22%, transparent);
+  /* The same ink as the platform form banners (entityForm.css), ~6:1 on the tint. */
+  color: color-mix(in srgb, var(--mint-warning) 55%, black);
+}
+
+html.dark .mint-stale-banner {
+  color: var(--mint-warning-text);
+}
+
+.mint-stale-banner__icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+.mint-stale-banner__text {
+  margin: 0;
+  flex: 1 1 16rem;
+  font-size: 0.78125rem;
+  line-height: 1.5;
+}
+
+.mint-stale-banner__text strong {
+  font-weight: 600;
+}
+
+.mint-stale-banner__time {
+  font-family: var(--font-mono);
+  font-size: 0.71875rem;
+  font-weight: 500;
+}
+
+.mint-stale-banner__action {
+  flex-shrink: 0;
+  padding: 0.1875rem 0.5625rem;
+  border: 1px solid currentColor;
+  border-radius: 0.375rem;
+  background: var(--bg-secondary);
+  color: inherit;
+  font-family: inherit;
+  font-size: 0.71875rem;
+  font-weight: 600;
+  line-height: 1.5;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+.mint-stale-banner__action:hover {
+  background: color-mix(in srgb, currentColor 8%, var(--bg-secondary));
+}
+
+.mint-stale-banner__dismiss {
+  display: grid;
+  place-items: center;
+  margin-left: 0.125rem;
+  padding: 0.25rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: inherit;
+  opacity: 0.75;
+  cursor: pointer;
+  transition: background-color 150ms ease, opacity 150ms ease;
+}
+
+.mint-stale-banner__dismiss:hover {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.mint-stale-banner__dismiss svg {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+
+.mint-stale-banner__action:focus-visible,
+.mint-stale-banner__dismiss:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-stale-banner__action,
+  .mint-stale-banner__dismiss {
+    transition: none;
+  }
+}

package/src/styles/components/well-plate.css

@@ -157,13 +157,6 @@
   color: var(--text-primary);
 }
 
-/* Sample type indicator */
-.mint-well-plate__indicator {
-  font-weight: 700;
-  pointer-events: none;
-  color: var(--text-primary);
-}
-
 /* Well ID text */
 .mint-well-plate__well-id {
   font-weight: 500;