@morscherlab/mint-sdk 1.5.0-beta.1 → 1.5.0-beta.10

package/src/composables/useJobCenter.ts

@@ -298,6 +298,12 @@ export function useJobCenter(
   watch([source, ownActiveJobs], ([currentSource, now], [previousSource, before]) => {
     if (currentSource !== previousSource) {
       justFinished.value = null
+      // The failures a replacement source already lists are its baseline.
+      if (previousSource) {
+        hasBaseline = false
+        awaitingLoad = false
+        if (jobs.value.length > 0) takeBaseline()
+      }
       return
     }
     const nowIds = new Set(now.map(job => job.job_id))
@@ -405,6 +411,16 @@ export function useJobCenter(
     }
   }
 
+  // A cancelled job stays pending until the source reports another status.
+  const cancelling = new Map<string, JobStatus>()
+  watch(jobs, (list) => {
+    for (const [jobId, status] of cancelling) {
+      if (list.find(job => job.job_id === jobId)?.status === status) continue
+      cancelling.delete(jobId)
+      setPending(jobId, false)
+    }
+  })
+
   async function cancelJob(job: JobState): Promise<boolean> {
     const sourceCancel = source.value?.cancel
     if (!job.can_cancel || !sourceCancel || pendingJobIds.value.has(job.job_id)) {
@@ -412,14 +428,18 @@ export function useJobCenter(
     }
     setPending(job.job_id, true)
     error.value = null
+    let cancelled = false
     try {
       await sourceCancel(job.job_id)
+      cancelled = true
       return active
     } catch (cause) {
       if (active) error.value = errorMessage(cause, 'Failed to cancel job')
       return false
     } finally {
-      if (active) setPending(job.job_id, false)
+      const status = jobs.value.find(listed => listed.job_id === job.job_id)?.status
+      if (cancelled && status === job.status) cancelling.set(job.job_id, status)
+      else if (active) setPending(job.job_id, false)
     }
   }
 

package/src/composables/useJobsEndpoint.ts

@@ -677,16 +677,27 @@ export function useJobsEndpoint(
     ]))
     jobs.value = nextJobs
     for (const job of nextJobs) settleJobWaiters(job)
-    for (const jobId of previousJobIds) {
-      if (!nextJobIds.has(jobId)) {
-        rejectJobWaiters(jobId, new Error(`Job ${jobId} is no longer available`))
-      }
+    for (const jobId of [...jobWaiters.keys()]) {
+      if (!nextJobIds.has(jobId)) void confirmMissingJob(jobId)
     }
     pruneResultState()
     pruneJobRevisions()
     return nextJobs
   }
 
+  /**
+   * A stream snapshot built before a submit can arrive after the submit reply,
+   * so a waited job missing from it is gone only once the server says so.
+   */
+  async function confirmMissingJob(jobId: string): Promise<void> {
+    try {
+      await getJob(jobId)
+    } catch (cause) {
+      if (isRetryableJobLookupError(cause)) return
+      rejectJobWaiters(jobId, new Error(`Job ${jobId} is no longer available`))
+    }
+  }
+
   function upsertJob(
     input: GeneratedAnalysisJobInput,
     fallbackDefinitionId?: string,

package/src/composables/useOnboarding.ts

@@ -108,7 +108,7 @@ export interface OnboardingState {
   showNews: (id: string) => void
   next: () => void
   back: () => void
-  /** End the run (× or Esc). Every step of the tour counts as seen. */
+  /** End the run (× or Esc). Every step of every tour of the app counts as seen; Help can still play them. */
   dismiss: () => void
   complete: (taskId: string) => void
   setChecklistHidden: (hidden: boolean) => void
@@ -381,8 +381,8 @@ export function provideOnboarding(definition: OnboardingDefinition, options: Pro
 
   function dismiss() {
     autoStartAbort?.abort()
-    const tour = run?.tour
-    if (tour) markSeen(...tour.steps.map((step) => stepKey(tour, step)))
+    // × on a tour ends all tours of the app, so the user closes tours at most once per app.
+    if (run?.tour) markSeen(...(definition.tours ?? []).flatMap((tour) => tour.steps.map((step) => stepKey(tour, step))))
     stop()
   }
 

package/src/composables/usePluginWorkspace.ts

@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import type { ComputedRef } from 'vue'
 import type { PillNavItem, PluginWorkspaceSidebarSpec } from '../types'
 import type {
@@ -48,6 +48,8 @@ export interface UsePluginWorkspaceReturn {
   handleControlValuesUpdate: (values: Record<string, unknown>) => void
   /** Resolves an AppTopBar `pill-select` payload into the active view and emits `update:pill` and `pill-select`. */
   handlePillSelect: (item: PillNavItem) => void
+  /** Applies an AppSidebar `update:collapsed` payload and emits `update:sidebarCollapsed`. */
+  handleSidebarCollapsedUpdate: (value: boolean) => void
 }
 
 /**
@@ -69,7 +71,7 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
   const sidebarSpec = computed<false | PluginWorkspaceSidebarSpec>(() => props.spec?.sidebar ?? {})
   const topBarSpec = computed(() => props.spec?.topBar === false
     ? false
-    : applySpecDefaults({ themeToggle: true, settings: {}, standaloneLabel: false }, props.spec?.topBar))
+    : applySpecDefaults({ settings: {}, standaloneLabel: false }, props.spec?.topBar))
 
   const controlsState = usePluginWorkspaceControls({
     model: () => sidebarSpec.value === false ? undefined : sidebarSpec.value.controls,
@@ -94,6 +96,14 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
   const topBarSlotNames = computed<string[]>(() => getPluginWorkspaceTopBarSlotNames(slots))
   const sidebarSlotNames = computed<string[]>(() => getPluginWorkspaceSidebarSlotNames(slots))
 
+  // The workspace owns the collapsed state (unless bound) so AppLayout reserves the collapsed width.
+  const internalCollapsed = ref(false)
+  const sidebarCollapsed = computed(() => props.sidebarCollapsed ?? internalCollapsed.value)
+  function handleSidebarCollapsedUpdate(value: boolean) {
+    internalCollapsed.value = value
+    emit('update:sidebarCollapsed', value)
+  }
+
   const hasSidebarSurface = computed(() => hasPluginWorkspaceSidebarSurface({
     sidebar: sidebarSpec.value,
     hasSidebarSlot: Boolean(slots.sidebar),
@@ -114,7 +124,7 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
     const sidebar = sidebarSpec.value === false ? {} : sidebarSpec.value
     return {
       sidebarPosition: sidebar.position ?? 'left',
-      sidebarWidth: sidebar.width,
+      sidebarWidth: sidebarCollapsed.value ? (sidebar.collapsedWidth ?? '3rem') : sidebar.width,
       floating: props.spec?.floating ?? true,
       responsiveSidebar: sidebar.responsive ?? true,
       sidebarToggleLabel: sidebar.toggleLabel ?? 'Open workspace sidebar',
@@ -142,7 +152,7 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
       },
       activeView: navigationState.resolvedActiveView.value,
       values: controlsState.internalControlValues,
-      collapsed: props.sidebarCollapsed,
+      collapsed: sidebarCollapsed.value,
       formLoading: props.formLoading ?? false,
       formDisabled: props.formDisabled ?? false,
       formReadonly: props.formReadonly ?? false,
@@ -157,5 +167,6 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
     hasSidebarSurface,
     handleControlValuesUpdate: controlsState.handleControlValuesUpdate,
     handlePillSelect: navigationState.handlePillSelect,
+    handleSidebarCollapsedUpdate,
   }
 }

package/src/composables/useVersionedSave.ts

@@ -26,8 +26,11 @@ export interface UseVersionedSaveOptions<T> {
   /**
    * Refetch the entity and reset the form to it. The user's edits are discarded.
    * Reject when no fresh record arrives: the form then keeps the edits and the conflict.
+   * `auto` is true for the refetch after another user's write on a clean form: when
+   * the form holds edits by the time the record arrives, skip the reset (the stale
+   * banner then shows the write).
    */
-  reload: () => unknown
+  reload: (auto?: boolean) => unknown
   /**
    * The realtime topic of the open entity (`experiment:42`). `null` turns the
    * stale banner off: pass it while the form is closed or the platform's
@@ -43,7 +46,7 @@ export interface UseVersionedSaveOptions<T> {
 }
 
 export interface UseVersionedSaveReturn<T> {
-  /** Save with `If-Match`. Resolves `undefined` on a 412: `conflict` is then set. Other errors reject. */
+  /** Save with `If-Match`. Resolves `undefined` on a 412 (`conflict` set, `stale` cleared) and, unsent, while a save runs. Other errors reject. */
   save: () => Promise<T | undefined>
   /** Save again on top of the version the 412 reported. Resolves `undefined` on another 412. */
   overwrite: () => Promise<T | undefined>
@@ -99,8 +102,11 @@ export function useVersionedSave<T>(options: UseVersionedSaveOptions<T>): UseVer
   const conflict = ref<VersionConflict | null>(null)
   const stale = ref<StaleChange | null>(null)
   const fieldLabel = options.fieldLabel ?? fieldNameLabel
+  // A newer reload or another topic makes the result of an automatic reload obsolete.
+  let reloadToken = 0
 
   async function send(version: number | null | undefined): Promise<T | undefined> {
+    if (saving.value) return undefined
     saving.value = true
     try {
       const headers: Record<string, string> = version == null ? {} : { 'If-Match': `"v${version}"` }
@@ -111,7 +117,9 @@ export function useVersionedSave<T>(options: UseVersionedSaveOptions<T>): UseVer
     } catch (cause) {
       const refused = conflictVersion(cause)
       if (!refused) throw cause
+      // One banner: the conflict dialog replaces the stale banner.
       conflict.value = refused
+      stale.value = null
       return undefined
     } finally {
       saving.value = false
@@ -119,19 +127,35 @@ export function useVersionedSave<T>(options: UseVersionedSaveOptions<T>): UseVer
   }
 
   async function reload(): Promise<void> {
+    reloadToken += 1
     await options.reload()
     conflict.value = null
     stale.value = null
   }
 
-  function onEvent(event: RealtimeEvent): void {
-    // A resync names no writer, and the user's own save echoes back while it runs.
-    if (event.type === 'resync' || saving.value || event.topic !== toValue(options.topic)) return
-    if (!toValue(options.dirty)) {
+  async function autoReload(event: RealtimeEvent): Promise<void> {
+    const token = ++reloadToken
+    try {
+      await options.reload(true)
+    } catch {
       // A failed background refetch leaves a clean form as it is; the host reports its own faults.
-      reload().catch(() => {})
       return
     }
+    if (token !== reloadToken || conflict.value) return
+    // The user started editing during the refetch: the host kept the edits, so show the write.
+    if (toValue(options.dirty)) markStale(event)
+    else stale.value = null
+  }
+
+  function onEvent(event: RealtimeEvent): void {
+    // A resync names no writer, the user's own save echoes back while it runs,
+    // and an open conflict dialog already says that the record changed.
+    if (event.type === 'resync' || saving.value || conflict.value || event.topic !== toValue(options.topic)) return
+    if (!toValue(options.dirty)) void autoReload(event)
+    else markStale(event)
+  }
+
+  function markStale(event: RealtimeEvent): void {
     const actor = (event.actor_id && options.userName?.(event.actor_id)) || 'Someone'
     const previous = stale.value
     stale.value = {
@@ -147,6 +171,7 @@ export function useVersionedSave<T>(options: UseVersionedSaveOptions<T>): UseVer
   }, onEvent)
   // Another entity, or a closed form: the old writes and the old 412 no longer apply.
   watch(() => toValue(options.topic), () => {
+    reloadToken += 1
     conflict.value = null
     stale.value = null
   })

package/src/generated-ui/main.ts

@@ -2,6 +2,7 @@ import { createPinia } from 'pinia'
 import { createApp, h } from 'vue'
 
 import GeneratedPluginView from '../components/GeneratedPluginView.vue'
+import { useSettingsStore } from '../stores/settings'
 import '../styles/index.css'
 
 function generatedApiBase(location: Location): string {
@@ -13,9 +14,10 @@ const app = createApp({
   name: 'MintGeneratedUiApp',
   render: () => h(GeneratedPluginView, {
     baseUrl: generatedApiBase(window.location),
-    showStandaloneLabel: true,
   }),
 })
 
 app.use(createPinia())
+// Theme, palette and density apply before the first paint, as in the platform.
+useSettingsStore().initialize()
 app.mount('#app')

package/src/index.ts

@@ -16,8 +16,5 @@ export * from './composables'
 // Stores
 export * from './stores'
 
-// Root names outside L1 and L2, deprecated until MINT 1.5
-export * from './deprecatedRootExports'
-
 // Types
 export type * from './types'

package/src/styles/components/alert-box.css

@@ -31,7 +31,7 @@
 .mint-alert__icon--info    { background-color: var(--mint-info-bg);    color: var(--mint-info); }
 .mint-alert__icon--neutral { background-color: var(--bg-tertiary);     color: var(--text-secondary); }
 .mint-alert__icon--primary { background-color: var(--color-primary-soft); color: var(--color-primary); }
-.mint-alert__icon--cta     { background-color: var(--color-primary-soft); color: var(--color-cta-hover); }
+.mint-alert__icon--cta     { background-color: var(--color-primary-soft); color: var(--_ink-primary); }
 
 .mint-alert__content {
   flex: 1;

package/src/styles/components/app-layout.css

@@ -182,3 +182,8 @@
     transition: none;
   }
 }
+
+/* An AppTopBar in the layout renders the drawer button itself. */
+.mint-layout--responsive-sidebar:has(.mint-topbar__sidebar-toggle) .mint-layout__sidebar-toggle {
+  display: none;
+}

package/src/styles/components/app-sidebar.css

@@ -97,8 +97,8 @@
   min-width: 1.375rem;
   padding: 0.125rem 0.375rem;
   border-radius: var(--radius);
-  background: color-mix(in srgb, var(--color-cta) 14%, transparent);
-  color: var(--color-cta);
+  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+  color: var(--color-primary);
   font-size: 0.6875rem;
   font-weight: 700;
   line-height: 1.1;
@@ -369,7 +369,7 @@
   width: 11px;
   height: 11px;
   border-radius: 9999px;
-  background: white;
+  background: var(--control-knob);
   box-shadow: var(--shadow-sm);
   transition: left 180ms var(--mint-ease-out-quart);
 }
@@ -469,7 +469,7 @@
   padding: 0 0.25rem;
   border-radius: var(--radius);
   background: var(--mint-sidebar-tone);
-  color: white;
+  color: var(--text-on-accent);
   font-size: 0.6875rem;
   font-weight: 700;
   line-height: 1rem;
@@ -492,7 +492,7 @@
 .mint-sidebar__rail-badge--cta,
 .mint-sidebar__tag--cta,
 .mint-sidebar__group-action--cta {
-  --mint-sidebar-tone: var(--color-cta);
+  --mint-sidebar-tone: var(--color-primary);
 }
 
 .mint-sidebar__rail-badge--success,

package/src/styles/components/app-top-bar.css

@@ -12,6 +12,8 @@
   padding: 0.75rem 1rem;
   background-color: var(--bg-secondary);
   box-sizing: border-box;
+  /* The two-row layout follows the bar's own width, not the window's. */
+  container: mint-topbar / inline-size;
 }
 
 /* Main container layout — equal side columns keep the centre nav on the bar
@@ -72,11 +74,62 @@
   grid-column: 3;
   display: flex;
   align-items: center;
-  gap: 0.125rem;
+  gap: 0.375rem;
   min-width: 0;
   justify-content: flex-end;
 }
 
+/* Context group (standalone badge, run slot, onboarding, plugin buttons), then
+   the fixed tail: theme, settings and the host's account controls, always last. */
+.mint-topbar__context,
+.mint-topbar__tail {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.mint-topbar__tail {
+  flex-shrink: 0;
+}
+
+/* The deprecated #actions slot keeps a fixed width, so its content cannot push the bar. */
+.mint-topbar__legacy-actions {
+  display: inline-flex;
+  align-items: center;
+  max-width: 16rem;
+  overflow: hidden;
+}
+
+/* Below 1024px of bar width: row 1 is identity + tail, row 2 the pills + context.
+   Row 1 never holds more than the identity, so the tail never moves. */
+@container mint-topbar (max-width: 1023.98px) {
+  .mint-topbar__container--stackable {
+    /* The pills keep their width while it fits; the context group takes the rest and its experiment
+       name truncates. On a bar narrower than the pills they overflow their cell, never the tail. */
+    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
+    grid-template-areas:
+      "start start tail"
+      "center context context";
+    row-gap: 0.375rem;
+  }
+
+  .mint-topbar__container--stackable .mint-topbar__start { grid-area: start; }
+  .mint-topbar__container--stackable .mint-topbar__right { display: contents; }
+  .mint-topbar__container--stackable .mint-topbar__tail { grid-area: tail; }
+
+  .mint-topbar__container--stackable .mint-topbar__center {
+    grid-area: center;
+    justify-content: flex-start;
+  }
+
+  .mint-topbar__container--stackable .mint-topbar__context {
+    /* Stretch, not justify-self: end, which would size the group to its nowrap min-content. */
+    grid-area: context;
+    justify-content: flex-end;
+  }
+}
+
 /* Logo styles */
 .mint-topbar__logo {
   display: flex;
@@ -170,17 +223,20 @@
 .mint-topbar__plugin-name,
 .mint-topbar__plugin-subtitle,
 .mint-topbar-title,
-.mint-topbar-subtitle {
+.mint-topbar-subtitle,
+.mint-topbar__title-only {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* The settings button has the IconButton ghost look: 32px, --radius-md,
-   16px icon, neutral ink, offset focus ring. */
-.mint-topbar__settings-btn {
+/* The settings button, plugin icon buttons and the drawer button have the
+   IconButton ghost look: 32px, --radius-md, 16px icon, neutral ink, offset focus ring. */
+.mint-topbar__settings-btn,
+.mint-topbar__icon-btn {
   position: relative;
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 2rem;
@@ -195,23 +251,62 @@
   transition: background-color var(--mint-transition), color var(--mint-transition);
 }
 
-.mint-topbar__settings-btn:hover {
+.mint-topbar__settings-btn:hover,
+.mint-topbar__icon-btn:hover:not(:disabled) {
   background: var(--bg-hover);
   color: var(--text-primary);
 }
 
-.mint-topbar__settings-btn:focus-visible {
+.mint-topbar__settings-btn:focus-visible,
+.mint-topbar__icon-btn:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring-offset);
 }
 
-.mint-topbar__settings-icon {
+.mint-topbar__icon-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.mint-topbar__settings-icon,
+.mint-topbar__icon-btn-icon {
   width: 1rem;
   height: 1rem;
 }
 
+/* Status dot of a plugin icon button (TopBarAction.dot). */
+.mint-topbar__icon-btn-dot {
+  position: absolute;
+  top: 0.3125rem;
+  right: 0.3125rem;
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--bg-secondary);
+  background: var(--text-muted);
+}
+
+.mint-topbar__icon-btn-dot--primary,
+.mint-topbar__icon-btn-dot--cta { background: var(--color-primary); }
+.mint-topbar__icon-btn-dot--success { background: var(--mint-success); }
+.mint-topbar__icon-btn-dot--warning { background: var(--mint-warning); }
+.mint-topbar__icon-btn-dot--error { background: var(--mint-error); }
+.mint-topbar__icon-btn-dot--info { background: var(--mint-info); }
+
+/* The drawer button shows only while the AppLayout sidebar is a drawer. */
+.mint-topbar__sidebar-toggle {
+  display: none;
+}
+
+@media (max-width: 1023.98px) {
+  .mint-topbar__sidebar-toggle {
+    display: inline-flex;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .mint-topbar__settings-btn {
+  .mint-topbar__settings-btn,
+  .mint-topbar__icon-btn {
     transition: none;
   }
 }
@@ -393,3 +488,29 @@
   clip-path: inset(50%);
   white-space: nowrap;
 }
+
+/* ─── Labels or icons, by fit ───
+   Save and Jobs show their words while the content fits; AppTopBar.compact.ts
+   sets --compact when it does not (a name is cut, the experiment chip is
+   squeezed or a group overflows), and they keep only their icons. Plugin
+   buttons with an icon are always icon-only. Accessible names and tooltips
+   keep the words. */
+.mint-topbar--compact .mint-experiment-popover__save {
+  width: 32px;
+  padding: 0;
+  justify-content: center;
+}
+
+.mint-topbar--compact .mint-experiment-popover__save-label,
+.mint-topbar--compact .mint-topbar__job-label {
+  display: none;
+}
+
+.mint-topbar--compact .mint-topbar__job--idle {
+  padding-inline: 0.5rem;
+}
+
+/* One total width cap for the experiment chip, code and chevron included. */
+.mint-topbar .mint-experiment-popover__trigger {
+  max-width: 16rem;
+}

package/src/styles/components/button.css

@@ -68,17 +68,17 @@
 }
 
 .mint-button--cta {
-  background-color: var(--color-cta);
+  background-color: var(--color-primary);
   color: var(--text-on-accent);
 }
 
 .mint-button--cta:hover:not(.mint-button--disabled) {
-  background-color: var(--color-cta-hover);
+  background-color: var(--color-primary-hover);
 }
 
 .mint-button--danger {
   background-color: var(--mint-error);
-  color: white;
+  color: var(--text-on-danger);
 }
 
 .mint-button--danger:hover:not(.mint-button--disabled) {

package/src/styles/components/checkbox.css

@@ -133,7 +133,7 @@
 .mint-checkbox__native:disabled + .mint-checkbox__box.mint-checkbox__box--indeterminate {
   background-color: var(--text-muted);
   border-color: var(--text-muted);
-  color: #FFFFFF;
+  color: var(--control-knob);
 }
 
 .mint-checkbox__box--sm {

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

@@ -159,7 +159,7 @@
 
 .mint-collapsible-card__badge--cta,
 .mint-collapsible-card__action--cta {
-  --mint-sidebar-badge-color: var(--color-cta);
+  --mint-sidebar-badge-color: var(--color-primary);
 }
 
 .mint-collapsible-card__badge--success,

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

@@ -48,8 +48,8 @@
 }
 
 .mint-confirm__icon--cta {
-  background-color: color-mix(in srgb, var(--color-cta) 12%, transparent);
-  color: var(--color-cta);
+  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  color: var(--color-primary);
 }
 
 .mint-confirm__icon--neutral {

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

@@ -160,9 +160,9 @@
   font-size: 0.6875rem;
   font-weight: 700;
   font-family: var(--font-mono);
-  color: var(--badge-color);
-  background-color: color-mix(in srgb, var(--badge-color) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--badge-color) 20%, transparent);
+  color: var(--text-secondary);
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
 }
 
 .mint-file-uploader__file-meta {

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

@@ -57,17 +57,17 @@
 }
 
 .mint-icon-button--cta {
-  background-color: var(--color-cta);
+  background-color: var(--color-primary);
   color: var(--text-on-accent);
 }
 
 .mint-icon-button--cta:hover:not(.mint-icon-button--disabled) {
-  background-color: var(--color-cta-hover);
+  background-color: var(--color-primary-hover);
 }
 
 .mint-icon-button--danger {
   background-color: var(--mint-error);
-  color: white;
+  color: var(--text-on-danger);
 }
 
 .mint-icon-button--danger:hover:not(.mint-icon-button--disabled) {

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

@@ -33,7 +33,7 @@
 
 /* Tones */
 .mint-spinner--primary { color: var(--color-primary); }
-.mint-spinner--cta     { color: var(--color-cta); }
+.mint-spinner--cta     { color: var(--color-primary); }
 .mint-spinner--success { color: var(--mint-success); }
 .mint-spinner--warning { color: var(--mint-warning); }
 .mint-spinner--error   { color: var(--mint-error); }