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

package/src/components/ChartContainer.story.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import ChartContainer from './ChartContainer.vue'
-import IconButton from './IconButton.vue'
+import { Download, RotateCcw } from 'lucide-vue-next'
+import BaseButton from './BaseButton.vue'
 import type { ChartLegendItem } from '../types'
 
 function initLegendState() {
@@ -25,7 +26,7 @@ function initLegendState() {
             :description="state.showDescription ? state.description : undefined"
             :loading="state.loading"
             :empty="state.empty"
-            :empty-message="state.emptyMessage"
+            :empty-text="state.emptyText"
           >
             <div style="height: 300px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #94a3b8); font-style: italic; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem;">
               Chart content goes here (e.g. Chart.js, D3, etc.)
@@ -41,7 +42,7 @@ function initLegendState() {
         <HstText v-model="state.description" title="Description" />
         <HstCheckbox v-model="state.loading" title="Loading" />
         <HstCheckbox v-model="state.empty" title="Empty" />
-        <HstText v-model="state.emptyMessage" title="Empty Message" />
+        <HstText v-model="state.emptyText" title="Empty Message" />
       </template>
     </Variant>
 
@@ -75,7 +76,8 @@ function initLegendState() {
         <ChartContainer
           title="Experiment Results"
           empty
-          empty-message="No results found. Run an analysis to see data here."
+          empty-text="No samples selected"
+          empty-hint="Pick samples to draw the distribution."
         />
       </div>
     </Variant>
@@ -91,9 +93,7 @@ function initLegendState() {
             @legend-toggle="(i: number) => (state.items[i].hidden = !state.items[i].hidden)"
           >
             <template #toolbar>
-              <IconButton variant="ghost" size="sm" label="Download">
-                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2.5v8M4.5 7L8 10.5 11.5 7M3 13.5h10" /></svg>
-              </IconButton>
+              <BaseButton variant="ghost" size="sm" :icon="Download" label="Download" />
             </template>
             <div style="height: 240px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8125rem;">
               Hidden: {{ state.items.filter((item: ChartLegendItem) => item.hidden).map((item: ChartLegendItem) => item.label).join(', ') || 'none' }}
@@ -155,16 +155,12 @@ function initLegendState() {
 
     <Variant title="Workbench Frame">
       <div style="height: 420px; border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: hidden;">
-        <ChartContainer variant="frame" empty empty-message="Select a sample to populate this chart">
+        <ChartContainer variant="frame" empty empty-text="Select a sample to populate this chart">
           <template #header>
             <strong style="font-size: 0.8125rem; color: var(--text-primary);">Extracted Ion Chromatogram</strong>
           </template>
           <template #toolbar>
-            <IconButton size="sm" label="Reset zoom">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
-                <path d="M4 4v6h6M20 20v-6h-6M5.5 15a7 7 0 0 0 11.8 2M18.5 9A7 7 0 0 0 6.7 7" />
-              </svg>
-            </IconButton>
+            <BaseButton variant="ghost" size="sm" :icon="RotateCcw" label="Reset zoom" />
           </template>
           <template #footer>
             Retention time (min)

package/src/components/ChartContainer.vue

@@ -2,14 +2,16 @@
 /** Wraps a chart with header, toolbar slot, loading overlay, empty state, and legend slot. */
 import type { ChartLegendItem } from '../types'
 import LoadingSpinner from './LoadingSpinner.vue'
-import EmptyState from './EmptyState.vue'
+import { ChartLine } from 'lucide-vue-next'
 
 interface Props {
   title?: string
   description?: string
   loading?: boolean
   empty?: boolean
-  emptyMessage?: string
+  emptyText?: string
+  /** Muted line under the empty title. */
+  emptyHint?: string
   /** `frame` fills its parent and uses compact workbench chrome. */
   variant?: 'card' | 'frame'
   /** Series shown as clickable items in the header; a click emits `legend-toggle`. */
@@ -19,7 +21,7 @@ interface Props {
 withDefaults(defineProps<Props>(), {
   loading: false,
   empty: false,
-  emptyMessage: 'No data available',
+  emptyText: 'No data available',
   variant: 'card',
 })
 
@@ -77,11 +79,11 @@ defineSlots<{
       <!-- Empty state -->
       <template v-else-if="empty">
         <slot name="empty">
-          <EmptyState
-            :title="emptyMessage"
-            size="sm"
-            icon-path="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
-          />
+          <div class="mint-chart__empty">
+            <ChartLine :size="22" aria-hidden="true" />
+            <span class="mint-chart__empty-title">{{ emptyText }}</span>
+            <span v-if="emptyHint" class="mint-chart__empty-hint">{{ emptyHint }}</span>
+          </div>
         </slot>
       </template>
 

package/src/components/ChemicalFormula.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** Renders a chemical formula and optional MS adduct with typographically correct subscripts and charges. */
 import { computed } from 'vue'
-import { useChemicalFormula, type FormulaPart } from '../composables/useChemicalFormula'
+import { renderFormulaParts, type FormulaPart } from '../utils/formula'
 import AdductText from './AdductText.vue'
 
 interface Props {
@@ -24,7 +24,6 @@ const props = withDefaults(defineProps<Props>(), {
   tone: 'primary',
 })
 
-const { renderFormulaParts } = useChemicalFormula()
 const formula = computed(() => props.formula?.trim() ?? '')
 const title = computed(() => [formula.value, props.adduct?.trim()].filter(Boolean).join(' '))
 

package/src/components/CollapsibleCard.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 /** Card whose body collapses with a chevron-rotate animation, with an optional inline toggle switch independent of expand state. */
 import { ref, computed } from 'vue'
-import type { SidebarBadgeTone, SidebarToolSectionAction } from '../types'
-import BaseToggle from './BaseToggle.vue'
+import type { SidebarToolSectionAction, Tone } from '../types'
+import BaseCheckbox from './BaseCheckbox.vue'
 
 interface Props {
   title: string
   subtitle?: string
   badge?: string | number
-  badgeTone?: SidebarBadgeTone
+  badgeTone?: Tone
   defaultOpen?: boolean
   disabled?: boolean
   dense?: boolean
@@ -176,7 +176,8 @@ function handleActionClick(action: SidebarToolSectionAction) {
           @click.stop
         >
           <!-- md = the board's 32x18 header switch (10a) -->
-          <BaseToggle
+          <BaseCheckbox
+            type="switch"
             :model-value="toggleValue"
             :aria-label="title"
             @update:model-value="emit('update:toggleValue', $event)"

package/src/components/ComponentBindingRenderer.story.vue

@@ -5,10 +5,6 @@ import {
   defineDoseDesignControlModel,
   useControlWorkspace,
 } from '../composables/useControlSchema'
-import {
-  createLcmsBatchCollection,
-  toBioTemplateComponentBindings,
-} from '../templates'
 
 const model = defineDoseDesignControlModel({
   selectedWells: ['A1', 'A2', 'B1'],
@@ -16,18 +12,6 @@ const model = defineDoseDesignControlModel({
   includeMolecularWeight: true,
 })
 const workspace = useControlWorkspace(model)
-const lcmsCollection = createLcmsBatchCollection({
-  samples: [
-    { sampleId: 'blank-1', name: 'Blank', group: 'Blank' },
-    { sampleId: 'qc-pool', name: 'Pooled QC', group: 'QC' },
-    { sampleId: 's001', name: 'Patient 001', group: 'Case' },
-    { sampleId: 's002', name: 'Patient 002', group: 'Control' },
-  ],
-  features: ['Glucose', 'Lactate', 'Citrate'],
-  instrument: 'Orbitrap LC-MS',
-  method: 'HILIC negative',
-  includeQc: true,
-})
 
 const state = ref({
   dense: false,
@@ -38,7 +22,6 @@ const state = ref({
 })
 
 const bindings = computed(() => workspace.componentBindings.value)
-const lcmsBindings = computed(() => toBioTemplateComponentBindings(lcmsCollection))
 </script>
 
 <template>
@@ -56,18 +39,6 @@ const lcmsBindings = computed(() => toBioTemplateComponentBindings(lcmsCollectio
       </div>
     </Variant>
 
-    <Variant title="LC-MS Batch Bindings">
-      <div style="padding: 2rem; min-height: 640px; background: var(--bg-secondary, #f8fafc);">
-        <ComponentBindingRenderer
-          :bindings="lcmsBindings"
-          :dense="state.dense"
-          :readonly="state.readonly"
-          :show-headers="state.showHeaders"
-          :show-descriptions="state.showDescriptions"
-          :layout="state.layout"
-        />
-      </div>
-    </Variant>
 
     <template #controls>
       <HstCheckbox v-model="state.dense" title="Dense" />

package/src/components/ComponentBindingRenderer.vue

@@ -10,10 +10,7 @@
 import { computed, type Component } from 'vue'
 import DataFrame from './DataFrame.vue'
 import DoseCalculator from './DoseCalculator.vue'
-import ExperimentTimeline from './ExperimentTimeline.vue'
 import PlateEditorBindingInternal from './internal/PlateEditorBindingInternal.vue'
-import ReagentList from './ReagentList.vue'
-import SampleSelector from './SampleSelector.vue'
 import ScheduleCalendar from './ScheduleCalendar.vue'
 import WellPlate from './WellPlate.vue'
 import { isRecord } from '../utils/records'
@@ -24,7 +21,6 @@ export interface ComponentBindingRendererBinding {
   props?: Record<string, unknown> | readonly string[]
   propsObject?: Record<string, unknown>
   description?: string
-  template_id?: string
 }
 
 type ComponentBindingRendererLayout = 'grid' | 'stack'
@@ -42,7 +38,7 @@ interface Props {
   dense?: boolean
   /** Prefer preview-safe props for editable components. */
   readonly?: boolean
-  /** Show component/template labels above each rendered component. */
+  /** Show component labels above each rendered component. */
   showHeaders?: boolean
   /** Show binding descriptions in each header. */
   showDescriptions?: boolean
@@ -74,11 +70,8 @@ const props = withDefaults(defineProps<Props>(), {
 const componentRegistry: Record<string, Component> = {
   DataFrame,
   DoseCalculator,
-  ExperimentTimeline,
   // Holds its own copy of the plates: PlateEditor itself is controlled.
   PlateEditor: PlateEditorBindingInternal,
-  ReagentList,
-  SampleSelector,
   ScheduleCalendar,
   WellPlate,
 }
@@ -126,40 +119,25 @@ function normalizeProps(binding: ComponentBindingRendererBinding): Record<string
 
   switch (binding.component) {
     case 'WellPlate':
+    case 'PlateEditor': {
+      const spec = isRecord(base.spec) ? base.spec : {}
       return {
         ...base,
+        spec: { ...spec, size: props.dense ? 'md' : (spec.size ?? 'fill') },
         readonly: props.readonly || Boolean(base.readonly),
-        size: props.dense ? 'md' : (base.size ?? 'fill'),
       }
-    case 'PlateEditor':
+    }
+    case 'DataFrame': {
+      const spec = isRecord(base.spec) ? base.spec : {}
       return {
         ...base,
-        readonly: props.readonly || Boolean(base.readonly),
-        size: props.dense ? 'md' : (base.size ?? 'fill'),
-      }
-    case 'DataFrame':
-      return {
-        ...base,
-        size: props.dense ? 'sm' : (base.size ?? 'md'),
-        maxHeight: base.maxHeight ?? (props.dense ? '280px' : undefined),
-      }
-    case 'ExperimentTimeline':
-      return {
-        ...base,
-        editable: props.readonly ? false : base.editable,
-        size: props.dense ? 'sm' : (base.size ?? 'md'),
-      }
-    case 'ReagentList':
-      return {
-        ...base,
-        readonly: props.readonly || Boolean(base.readonly),
-      }
-    case 'SampleSelector':
-      return {
-        ...base,
-        enableGrouping: props.readonly ? false : (base.enableGrouping ?? true),
-        enableSmartGroup: props.readonly ? false : (base.enableSmartGroup ?? true),
+        spec: {
+          ...spec,
+          size: props.dense ? 'sm' : (spec.size ?? 'md'),
+          maxHeight: spec.maxHeight ?? (props.dense ? '280px' : undefined),
+        },
       }
+    }
     case 'ScheduleCalendar':
       return {
         ...base,
@@ -181,8 +159,6 @@ function normalizeProps(binding: ComponentBindingRendererBinding): Record<string
       :key="renderableBinding.id"
       class="mint-component-binding-renderer__item"
       :data-component-binding-id="renderableBinding.id"
-      :data-template-id="renderableBinding.template_id"
-      :data-template-component="renderableBinding.component"
     >
       <header
         v-if="showHeaders"
@@ -193,10 +169,10 @@ function normalizeProps(binding: ComponentBindingRendererBinding): Record<string
             {{ renderableBinding.component }}
           </p>
           <p
-            v-if="renderableBinding.template_id || renderableBinding.id"
+            v-if="renderableBinding.id"
             class="mint-component-binding-renderer__source"
           >
-            {{ renderableBinding.template_id ?? renderableBinding.id }}
+            {{ renderableBinding.id }}
           </p>
         </div>
         <p

package/src/components/ConcentrationInput.story.vue

@@ -23,7 +23,7 @@ function initState() {
             v-model="state.modelValue"
             :show-conversion="state.showConversion"
             :disabled="state.disabled"
-            :error="state.error"
+            :invalid="state.error"
             :size="state.size"
             :placeholder="state.placeholder"
           />
@@ -69,7 +69,7 @@ function initState() {
       <div style="padding: 2rem; max-width: 400px;">
         <ConcentrationInput
           :model-value="{ value: -5, unit: 'nM' as ConcentrationUnit }"
-          error
+          invalid
         />
       </div>
     </Variant>

package/src/components/ConcentrationInput.vue

@@ -6,7 +6,7 @@ import {
   type ConcentrationValue,
   type ConcentrationUnit,
 } from '../composables/useConcentrationUnits'
-import UnitInput from './UnitInput.vue'
+import NumberInput from './NumberInput.vue'
 
 interface Props {
   modelValue?: ConcentrationValue
@@ -16,7 +16,7 @@ interface Props {
   min?: number
   max?: number
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   placeholder?: string
 }
@@ -24,7 +24,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   showConversion: true,
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
   placeholder: 'Enter value',
 })
@@ -35,7 +35,7 @@ const emit = defineEmits<{
 
 const { unitCategories, convert, getBaseUnit, isMolarity, isMassVolume } = useConcentrationUnits()
 
-/** Scale factor to the category base unit; UnitInput uses it for menu previews and the nearest-unit hint. */
+/** Scale factor to the category base unit; NumberInput uses it for menu previews and the nearest-unit hint. */
 function factorOf(unit: ConcentrationUnit): number | undefined {
   if (!props.showConversion || !(isMolarity(unit) || isMassVolume(unit))) return undefined
   return convert(1, unit, getBaseUnit(unit)) ?? undefined
@@ -75,8 +75,8 @@ const unitOptions = computed(() =>
 const currentValue = computed(() => props.modelValue?.value)
 const currentUnit = computed(() => props.modelValue?.unit || availableUnits.value[0] || 'µM')
 
-function handleValueUpdate(value: number | undefined) {
-  if (value === undefined || isNaN(value)) {
+function handleValueUpdate(value: number | null) {
+  if (value === null) {
     emit('update:modelValue', undefined)
     return
   }
@@ -118,18 +118,18 @@ watch(availableUnits, (units) => {
   <div
     :class="[
       'mint-concentration-input',
-      error ? 'mint-concentration-input--error' : '',
+      invalid ? 'mint-concentration-input--error' : '',
       disabled ? 'mint-concentration-input--disabled' : '',
     ]"
   >
-    <UnitInput
+    <NumberInput
       :model-value="currentValue"
       :unit="currentUnit"
       :units="unitOptions"
       :min="min"
       :max="max"
       :disabled="disabled"
-      :error="error"
+      :invalid="invalid"
       :size="size"
       :placeholder="placeholder"
       @update:model-value="handleValueUpdate"

package/src/components/ConfirmDialog.story.vue

@@ -2,9 +2,9 @@
 import { ref } from 'vue'
 import ConfirmDialog from './ConfirmDialog.vue'
 import BaseButton from './BaseButton.vue'
-import type { ConfirmVariant } from '../types'
+import type { Tone } from '../types'
 
-const variants: ConfirmVariant[] = ['danger', 'warning', 'info']
+const tones: Tone[] = ['error', 'warning', 'info', 'success', 'primary', 'neutral']
 
 const dialogOpen = ref(false)
 const dangerOpen = ref(false)
@@ -34,7 +34,7 @@ function initPlayground() {
     title: 'Delete experiment',
     subtitle: 'EXP-2024-001 · Dose-response',
     message: 'This will permanently delete the experiment and all associated data. This action cannot be undone.',
-    variant: 'danger' as ConfirmVariant,
+    tone: 'error' as Tone,
     confirmLabel: 'Delete',
     cancelLabel: 'Cancel',
     loading: false,
@@ -49,15 +49,15 @@ function initPlayground() {
       <template #default="{ state }">
         <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;">
           <BaseButton variant="secondary" @click="dialogOpen = true">Open dialog</BaseButton>
-          <div v-if="lastAction" style="font-family: 'Fira Code', monospace; font-size: 0.75rem; color: var(--text-muted);">
+          <div v-if="lastAction" style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted);">
             Last event: <code>{{ lastAction }}</code>
           </div>
           <ConfirmDialog
-            v-model="dialogOpen"
+            v-model:open="dialogOpen"
             :title="state.title"
             :subtitle="state.subtitle"
             :message="state.message"
-            :variant="state.variant"
+            :tone="state.tone"
             :confirm-label="state.confirmLabel"
             :cancel-label="state.cancelLabel"
             :loading="state.loading"
@@ -72,9 +72,9 @@ function initPlayground() {
         <HstText v-model="state.subtitle" title="Subtitle (context line)" />
         <HstText v-model="state.message" title="Message" />
         <HstSelect
-          v-model="state.variant"
-          title="Variant"
-          :options="variants.map(v => ({ label: v, value: v }))"
+          v-model="state.tone"
+          title="Tone"
+          :options="tones.map(t => ({ label: t, value: t }))"
         />
         <HstText v-model="state.confirmLabel" title="Confirm label" />
         <HstText v-model="state.cancelLabel" title="Cancel label" />
@@ -87,18 +87,18 @@ function initPlayground() {
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton variant="danger" @click="uninstallOpen = true">Uninstall plugin</BaseButton>
         <ConfirmDialog
-          v-model="uninstallOpen"
+          v-model:open="uninstallOpen"
           title="Confirm uninstall"
           subtitle="mint-plugin-metabolomics · v2.4.1"
           message="Removing this plugin will delete its routes from the platform on next restart. Plugin data and registered experiment types will be preserved."
-          variant="danger"
+          tone="error"
           confirm-label="Uninstall"
           @confirm="() => { uninstallOpen = false; log('uninstalled metabolomics') }"
         />
       </div>
       <p style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 2rem 1rem;">
         The canonical refresh layout: title + subtitle (plugin name · version) sit in the modal header; body holds
-        only the explanatory message; red confirm carries the variant intent — no icon needed.
+        only the explanatory message; red confirm carries the tone — no icon needed.
       </p>
     </Variant>
 
@@ -107,10 +107,10 @@ function initPlayground() {
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton variant="danger" @click="dangerOpen = true">Delete experiment</BaseButton>
         <ConfirmDialog
-          v-model="dangerOpen"
+          v-model:open="dangerOpen"
           title="Delete Experiment"
           message="Are you sure you want to delete this experiment? All associated data, plates, and analysis results will be permanently removed. This action cannot be undone."
-          variant="danger"
+          tone="error"
           confirm-label="Delete"
           @confirm="() => { dangerOpen = false; log('deleted') }"
         />
@@ -122,10 +122,10 @@ function initPlayground() {
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton variant="secondary" @click="warningOpen = true">Reset analysis</BaseButton>
         <ConfirmDialog
-          v-model="warningOpen"
+          v-model:open="warningOpen"
           title="Reset Analysis"
           message="This will discard all unsaved changes and reset the analysis to its initial state. Do you want to continue?"
-          variant="warning"
+          tone="warning"
           confirm-label="Reset"
           @confirm="() => { warningOpen = false; log('reset') }"
         />
@@ -137,10 +137,10 @@ function initPlayground() {
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton variant="primary" @click="infoOpen = true">Export data</BaseButton>
         <ConfirmDialog
-          v-model="infoOpen"
+          v-model:open="infoOpen"
           title="Export Data"
           message="This will generate a CSV export of all 96 wells across 3 plates. The download will start automatically."
-          variant="info"
+          tone="info"
           confirm-label="Export"
           @confirm="() => { infoOpen = false; log('exported') }"
         />
@@ -152,10 +152,10 @@ function initPlayground() {
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton variant="primary" @click="saveOpen = true">Save to EXP-042</BaseButton>
         <ConfirmDialog
-          v-model="saveOpen"
+          v-model:open="saveOpen"
           title="Save to Experiment"
           message="Save current data to DRP Dose-Response Screen · March 2026?"
-          variant="info"
+          tone="info"
           confirm-label="Save"
           @confirm="() => { saveOpen = false; log('saved to EXP-042') }"
         />
@@ -171,10 +171,10 @@ function initPlayground() {
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton variant="primary" @click="loadingOpen = true">Submit results</BaseButton>
         <ConfirmDialog
-          v-model="loadingOpen"
+          v-model:open="loadingOpen"
           title="Submit Results"
           message="Submit the analysis results to the platform? This may take a moment."
-          variant="info"
+          tone="info"
           confirm-label="Submit"
           :loading="isLoading"
           @confirm="handleConfirmLoading"

package/src/components/ConfirmDialog.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-/** Confirm/cancel dialog with danger, warning, and info variants; blocks close while loading. */
+/** Confirm/cancel dialog whose `tone` colors the confirm button; blocks close while loading. */
 import { computed } from 'vue'
-import type { ButtonVariant } from '../types'
+import type { ButtonVariant, Tone } from '../types'
 import BaseModal from './BaseModal.vue'
 import BaseButton from './BaseButton.vue'
 
 interface Props {
-  modelValue: boolean
+  open: boolean
   title?: string
   subtitle?: string
   message?: string
-  variant?: 'danger' | 'warning' | 'info'
+  tone?: Tone
   confirmLabel?: string
   cancelLabel?: string
   loading?: boolean
@@ -18,20 +18,20 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   title: 'Confirm',
-  variant: 'danger',
+  tone: 'error',
   confirmLabel: 'Confirm',
   cancelLabel: 'Cancel',
   loading: false,
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
   confirm: []
   cancel: []
 }>()
 
 function handleCancel() {
-  emit('update:modelValue', false)
+  emit('update:open', false)
   emit('cancel')
 }
 
@@ -40,29 +40,30 @@ function handleConfirm() {
 }
 
 const confirmVariant = computed<ButtonVariant>(() => {
-  if (props.variant === 'info') return 'primary'
-  if (props.variant === 'warning') return 'cta'
-  return 'danger'
+  if (props.tone === 'error') return 'danger'
+  if (props.tone === 'warning' || props.tone === 'cta') return 'cta'
+  if (props.tone === 'success') return 'success'
+  return 'primary'
 })
 </script>
 
 <template>
   <BaseModal
-    :model-value="modelValue"
+    :open="open"
     :title="title"
     :subtitle="subtitle"
     size="sm"
     :closable="!loading"
     :close-on-overlay="!loading"
     :close-on-escape="!loading"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:open="emit('update:open', $event)"
   >
     <div class="mint-confirm">
       <!-- Icon is now opt-in via slot. Refresh design keeps the body focused on
-           the message; variant intent is carried by the confirm button's color. -->
+           the message; tone is carried by the confirm button's color. -->
       <div
         v-if="$slots.icon"
-        :class="['mint-confirm__icon', `mint-confirm__icon--${variant}`]"
+        :class="['mint-confirm__icon', `mint-confirm__icon--${tone}`]"
       >
         <slot name="icon" />
       </div>