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

package/src/__tests__/components/AppTopBarPillNav.test.ts

@@ -196,4 +196,39 @@ describe('AppTopBarPillNavInternal', () => {
 
     expect(wrapper.find('.mint-pill-nav__item').text()).toBe('Records')
   })
+  const SIX = ['One', 'Two', 'Three', 'Four', 'Five', { id: 'grp', label: 'Group', children: ['Six'] }]
+
+  it('should fold the items after the fourth into a More dropdown', async () => {
+    const wrapper = mount(AppTopBarPillNavInternal, { props: { currentItemId: 'One', items: SIX } })
+
+    expect(wrapper.findAll('.mint-pill-nav__item').map(item => item.text())).toEqual([
+      'One', 'Two', 'Three', 'Four', 'More',
+    ])
+    await wrapper.findAll('.mint-pill-nav__item')[4].trigger('click')
+    expect(wrapper.findAll('.mint-pill-nav__dropdown-label').map(option => option.text())).toEqual(['Five', 'Six'])
+  })
+
+  it('should emit the original item or group when a folded entry is chosen', async () => {
+    const wrapper = mount(AppTopBarPillNavInternal, { props: { currentItemId: 'One', items: SIX } })
+
+    await wrapper.findAll('.mint-pill-nav__item')[4].trigger('click')
+    await wrapper.findAll('.mint-pill-nav__dropdown-item')[0].trigger('click')
+    await wrapper.findAll('.mint-pill-nav__item')[4].trigger('click')
+    await wrapper.findAll('.mint-pill-nav__dropdown-item')[1].trigger('click')
+
+    expect(wrapper.emitted('select')).toEqual([[{ id: 'Five', label: 'Five' }]])
+    expect(wrapper.emitted('option-select')?.[0]).toEqual([
+      { id: 'Six', label: 'Six' },
+      { id: 'grp', label: 'Group', children: [{ id: 'Six', label: 'Six' }] },
+    ])
+  })
+
+  it('should label the More pill with a folded item when that item is current', () => {
+    const wrapper = mount(AppTopBarPillNavInternal, { props: { currentItemId: 'Five', items: SIX } })
+
+    const more = wrapper.findAll('.mint-pill-nav__item')[4]
+    expect(more.text()).toBe('Five')
+    expect(more.find('.mint-pill-nav__chevron').exists()).toBe(true)
+    expect(more.classes()).toContain('mint-pill-nav__item--active')
+  })
 })

package/src/__tests__/components/ArtifactSaveDialog.test.ts

@@ -1,5 +1,6 @@
 import { mount, flushPromises } from '@vue/test-utils'
 import { describe, it, expect, expectTypeOf, vi, beforeEach } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
 import ArtifactSaveDialog from '../../components/ArtifactSaveDialog.vue'
 import FileUploader from '../../components/FileUploader.vue'
 import SegmentedControl from '../../components/SegmentedControl.vue'
@@ -51,7 +52,7 @@ function mountDialog(props: Record<string, unknown> = {}) {
     .mockResolvedValue(undefined)
   const wrapper = mount(ArtifactSaveDialog, {
     props: {
-      modelValue: true,
+      open: true,
       experimentId: 42,
       saveHandler,
       ...props,
@@ -79,6 +80,7 @@ async function chooseFile(wrapper: ReturnType<typeof mountDialog>['wrapper'], fi
 
 describe('ArtifactSaveDialog', () => {
   beforeEach(() => {
+    setActivePinia(createPinia())
     delete (window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__
     window.history.replaceState({}, '', '/')
   })
@@ -139,7 +141,7 @@ describe('ArtifactSaveDialog', () => {
       const saved = wrapper.emitted('saved')
       expect(saved).toHaveLength(1)
       expect((saved![0][0] as { payload: ArtifactSaveDialogPayload }).payload.kind).toBe('json')
-      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([false])
+      expect(wrapper.emitted('update:open')?.at(-1)).toEqual([false])
     })
 
     it('should disable submit when no result payload is provided', async () => {
@@ -533,7 +535,7 @@ describe('ArtifactSaveDialog', () => {
 
       await submit(wrapper)
 
-      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect(wrapper.emitted('update:open')).toBeUndefined()
       expect(wrapper.emitted('error')).toEqual([['Backend unavailable']])
       expect(wrapper.get('.mint-artifact-save-dialog__error').text()).toContain('Backend unavailable')
       expect(wrapper.emitted('saved')).toBeUndefined()
@@ -563,4 +565,82 @@ describe('ArtifactSaveDialog', () => {
       expect(wrapper.find('.mint-artifact-save-dialog__error').exists()).toBe(true)
     })
   })
+
+  // -------------------------------------------------------------------------
+  // Save mode (replace vs new) and experiment strip
+  // -------------------------------------------------------------------------
+
+  describe('save mode', () => {
+    it.each([
+      [null, false],
+      [makeDetail(), true],
+    ])('should offer the replace/new cards only when an artifact can be replaced (%#)', (existingArtifact, shown) => {
+      const { wrapper } = mountDialog({ result: { x: 1 }, existingArtifact })
+
+      expect(wrapper.find('.mint-artifact-save-dialog__modes').exists()).toBe(shown)
+    })
+
+    it('should send a create payload when save as new is picked over an existing artifact', async () => {
+      const { wrapper, saveHandler } = mountDialog({ mode: 'json', result: { x: 1 }, existingArtifact: makeDetail() })
+      expect(wrapper.get('.mint-artifact-save-dialog__submit').text()).toBe('Replace result')
+
+      await wrapper.findAll('.mint-artifact-save-dialog__mode')[1].trigger('click')
+      expect(wrapper.find('.mint-artifact-save-dialog__name').exists()).toBe(true)
+      expect(wrapper.get('.mint-artifact-save-dialog__submit').text()).toBe('Save result')
+      await submit(wrapper)
+
+      expect(saveHandler.mock.calls[0][0]).toMatchObject({ kind: 'json', mode: 'create', artifactKey: 'default' })
+    })
+
+    // An explicit "new result" must never upsert over an existing JSON artifact.
+    it.each(['fit', 'other'])('should block a json save as new when the key %s exists', async (key) => {
+      const { wrapper, saveHandler } = mountDialog({
+        mode: 'json',
+        result: { x: 1 },
+        existingArtifact: makeDetail(),
+        existingArtifactKeys: ['other'],
+      })
+
+      await wrapper.findAll('.mint-artifact-save-dialog__mode')[1].trigger('click')
+      await wrapper.get('.mint-artifact-save-dialog__key input').setValue(key)
+      await submit(wrapper)
+
+      expect(saveHandler).not.toHaveBeenCalled()
+      expect(wrapper.get('.mint-artifact-save-dialog__submit').attributes('disabled')).toBeDefined()
+      expect(wrapper.get('.mint-artifact-save-dialog__key').text()).toContain('already used')
+    })
+
+    it('should show the experiment strip with code and name when the experiment is known', () => {
+      const { wrapper } = mountDialog({
+        experiment: { id: 42, experiment_code: 'EXP-042', name: 'Dose response' },
+      })
+
+      expect(wrapper.get('.mint-artifact-save-dialog__experiment').text()).toContain('EXP-042')
+      expect(wrapper.get('.mint-artifact-save-dialog__experiment-name').text()).toBe('Dose response')
+    })
+
+    it.each([
+      [false, false],
+      [true, true],
+    ])('should show the Change link only when a change-experiment listener is bound (%s)', (bound, shown) => {
+      const listener = vi.fn()
+      const { wrapper } = mountDialog({
+        experiment: { id: 42, name: 'Dose response' },
+        ...(bound ? { onChangeExperiment: listener } : {}),
+      })
+
+      expect(wrapper.find('.mint-artifact-save-dialog__change').exists()).toBe(shown)
+    })
+
+    it('should emit change-experiment when Change is clicked', async () => {
+      const { wrapper } = mountDialog({
+        experiment: { id: 42, name: 'Dose response' },
+        onChangeExperiment: vi.fn(),
+      })
+
+      await wrapper.get('.mint-artifact-save-dialog__change').trigger('click')
+
+      expect(wrapper.emitted('change-experiment')).toHaveLength(1)
+    })
+  })
 })

package/src/__tests__/components/ArtifactSelectorModal.test.ts

@@ -1,5 +1,6 @@
 import { mount, flushPromises } from '@vue/test-utils'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
 
 const mockGet = vi.fn()
 const mockPost = vi.fn()
@@ -36,7 +37,7 @@ const ARTIFACTS = [
 
 async function mountModal(props: Record<string, unknown> = {}) {
   const wrapper = mount(ArtifactSelectorModal, {
-    props: { modelValue: true, experimentId: 42, ...props },
+    props: { open: true, experimentId: 42, ...props },
     global: { stubs: { teleport: true } },
   })
   await flushPromises()
@@ -45,6 +46,7 @@ async function mountModal(props: Record<string, unknown> = {}) {
 
 describe('ArtifactSelectorModal', () => {
   beforeEach(() => {
+    setActivePinia(createPinia())
     vi.clearAllMocks()
     // Fresh rows per call: the list is stored by reference and spliced on mutation.
     mockGet.mockImplementation(async () => ({ artifacts: ARTIFACTS.map((a) => ({ ...a })) }))
@@ -60,7 +62,7 @@ describe('ArtifactSelectorModal', () => {
     await flushPromises()
 
     expect(wrapper.emitted('select')?.[0]?.[0]).toMatchObject({ id: 1 })
-    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([false])
+    expect(wrapper.emitted('update:open')?.at(-1)).toEqual([false])
   })
 
   it('should emit selectDetail alongside select when fetchDetailOnSelect is set', async () => {
@@ -84,7 +86,7 @@ describe('ArtifactSelectorModal', () => {
 
     expect(wrapper.emitted('selectDetail')).toBeUndefined()
     expect(wrapper.emitted('select')).toBeUndefined()
-    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.emitted('update:open')).toBeUndefined()
     expect(wrapper.get('.mint-resource-picker__error').text()).toContain('Detail unavailable')
   })
 
@@ -128,7 +130,7 @@ describe('ArtifactSelectorModal', () => {
     await flushPromises()
 
     expect(wrapper.emitted('select')).toBeUndefined()
-    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.emitted('update:open')).toBeUndefined()
   })
 
   it('should select the arrow-highlighted row on Enter', async () => {

package/src/__tests__/components/AuditTrail.test.ts

@@ -25,7 +25,7 @@ describe('AuditTrail', () => {
   it('should filter with small BaseSelects when filters are shown', () => {
     const wrapper = mount(AuditTrail, { props: { entries, showFilters: true } })
 
-    expect(wrapper.findAllComponents(BaseSelect).map(select => select.props('size'))).toEqual(['sm', 'sm'])
+    expect(wrapper.findAllComponents(BaseSelect).map(select => (select.props() as { size?: string }).size)).toEqual(['sm', 'sm'])
   })
 
   it('should narrow the list when a type filter is chosen', async () => {

package/src/__tests__/components/AutoGroupModal.adapter.test.ts

@@ -9,7 +9,7 @@ import {
   qcRouteToEngine,
   roleLabel,
   seedFromGroups,
-} from '../../components/AutoGroupModal.adapter'
+} from '../../components/internal/AutoGroupModalInternal.adapter'
 import type { ClassSchema, ColumnInfo } from '../../types/auto-group'
 import type { SampleGroup } from '../../types'
 import type { ManualSample } from '../../components/SmartGroupManual.cohorts'

package/src/__tests__/components/AutoGroupModal.anatomy.test.ts

@@ -5,8 +5,8 @@ import {
   engineSchemasToCards,
   experimentLabel,
   previewValues,
-} from '../../components/AutoGroupModal.adapter'
-import { useAutoGroup } from '../../composables/useAutoGroup'
+} from '../../components/internal/AutoGroupModalInternal.adapter'
+import { useAutoGroup } from '../../components/internal/useAutoGroup'
 
 const tracingBatch = [
   'LT_13102025_212_WT_Glu_3_20_S_091123_T1_33', 'LT_13102025_213_WT_Glu_3_20_S_091123_T1_34',

package/src/__tests__/components/AutoGroupModal.wiring.test.ts

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
-import AutoGroupModal from '../../components/AutoGroupModal.vue'
+import AutoGroupModal from '../../components/internal/AutoGroupModalInternal.vue'
 import SmartGroupFieldRecipe from '../../components/SmartGroupFieldRecipe.vue'
 
 const replicated = ['WT', 'KO'].flatMap(genotype =>
@@ -13,7 +13,7 @@ const unreplicated = ['m1', 'm2', 'm3'].flatMap(animal => ['0min', '20min'].map(
 
 function recipeFor(samples: string[]) {
   const wrapper = mount(AutoGroupModal, {
-    props: { modelValue: true, samples },
+    props: { open: true, samples },
     global: { plugins: [createPinia()], stubs: { Teleport: true } },
   })
   return wrapper.findComponent(SmartGroupFieldRecipe)

package/src/__tests__/components/BaseButton.test.ts

@@ -0,0 +1,51 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { mount } from '@vue/test-utils'
+import { Trash2 } from 'lucide-vue-next'
+import { describe, expect, it } from 'vitest'
+import BaseButton from '../../components/BaseButton.vue'
+
+describe('BaseButton icon', () => {
+  it('should render a square icon-only button named by label when icon has no default slot', () => {
+    const wrapper = mount(BaseButton, { props: { icon: Trash2, label: 'Delete', size: 'sm' } })
+    expect({
+      classes: wrapper.classes(),
+      ariaLabel: wrapper.attributes('aria-label'),
+      icons: wrapper.findAll('.mint-icon-button__icon--sm svg').length,
+    }).toEqual({
+      classes: expect.arrayContaining(['mint-icon-button', 'mint-icon-button--primary', 'mint-icon-button--sm']),
+      ariaLabel: 'Delete',
+      icons: 1,
+    })
+  })
+
+  it('should render the icon before the label text when a default slot is given', () => {
+    const wrapper = mount(BaseButton, { props: { icon: Trash2 }, slots: { default: 'Delete' } })
+    expect({
+      classes: wrapper.classes(),
+      ariaLabel: wrapper.attributes('aria-label'),
+      icon: wrapper.find('svg.mint-button__icon').exists(),
+      text: wrapper.text(),
+    }).toEqual({
+      classes: expect.arrayContaining(['mint-button']),
+      ariaLabel: undefined,
+      icon: true,
+      text: 'Delete',
+    })
+  })
+})
+
+// jsdom has no layout, so this pins the stylesheet contract instead: a bare
+// <svg> rendered by an icon-only BaseButton must be sized by the icon box, otherwise it
+// collapses to zero width as a flex item (FilePicker source toggles, beta.14).
+describe('BaseButton icon-only sizing', () => {
+  it('should size the icon svg to the icon box when the caller passes no dimensions', () => {
+    const css = readFileSync(
+      resolve(__dirname, '../../styles/components/icon-button.css'),
+      'utf8',
+    )
+    expect(css).toMatch(
+      /\.mint-icon-button__icon--sm > svg,\s*\.mint-icon-button__icon--md > svg,\s*\.mint-icon-button__icon--lg > svg \{\s*width: 100%;\s*height: 100%;\s*\}/,
+    )
+  })
+})

package/src/__tests__/components/{BaseToggle.test.ts → BaseCheckbox.switch.test.ts}

@@ -1,11 +1,12 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import BaseToggle from '../../components/BaseToggle.vue'
+import BaseCheckbox from '../../components/BaseCheckbox.vue'
 
-describe('BaseToggle', () => {
+describe('BaseCheckbox type="switch"', () => {
   it('uses ariaLabel for the switch name without changing the visual label', () => {
-    const wrapper = mount(BaseToggle, {
+    const wrapper = mount(BaseCheckbox, {
       props: {
+        type: 'switch',
         label: 'Enabled',
         ariaLabel: 'Email notifications',
       },
@@ -23,8 +24,9 @@ describe('BaseToggle', () => {
   })
 
   it('keeps using the visual label as the default switch name', () => {
-    const wrapper = mount(BaseToggle, {
+    const wrapper = mount(BaseCheckbox, {
       props: {
+        type: 'switch',
         label: 'Enabled',
       },
     })
@@ -33,14 +35,14 @@ describe('BaseToggle', () => {
   })
 
   it('keeps the existing fallback name when no labels are provided', () => {
-    const wrapper = mount(BaseToggle)
+    const wrapper = mount(BaseCheckbox, { props: { type: 'switch' } })
 
     expect(wrapper.get('[role="switch"]').attributes('aria-label')).toBe('Toggle')
   })
 
   it('should keep the knob class list state-free when switched on', () => {
     // The on position comes from the track modifier (translateX), not a knob class.
-    const wrapper = mount(BaseToggle, { props: { modelValue: true } })
+    const wrapper = mount(BaseCheckbox, { props: { type: 'switch', modelValue: true } })
 
     expect(wrapper.get('.mint-toggle__knob').classes()).toEqual(['mint-toggle__knob', 'mint-toggle__knob--md'])
   })

package/src/__tests__/components/BaseInput.test.ts

@@ -14,38 +14,17 @@ describe('BaseInput', () => {
     })
   })
 
-  describe('number input', () => {
-    it('should emit number value on input', async () => {
+  describe('textarea', () => {
+    it('should render a textarea and emit its value when type is textarea', async () => {
       const wrapper = mount(BaseInput, {
-        props: { modelValue: 0, type: 'number' },
+        props: { modelValue: '', type: 'textarea', rows: 5 },
       })
-      const input = wrapper.find('input')
-      // Simulate typing a number
-      Object.defineProperty(input.element, 'value', { value: '42', writable: true })
-      await input.trigger('input')
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([42])
-    })
-
-    it('should emit null for empty number input', async () => {
-      const wrapper = mount(BaseInput, {
-        props: { modelValue: 5, type: 'number' },
-      })
-      const input = wrapper.find('input')
-      // Simulate clearing the input
-      Object.defineProperty(input.element, 'value', { value: '', writable: true })
-      await input.trigger('input')
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
-    })
-
-    it('should not emit NaN for empty number input', async () => {
-      const wrapper = mount(BaseInput, {
-        props: { modelValue: 5, type: 'number' },
-      })
-      const input = wrapper.find('input')
-      Object.defineProperty(input.element, 'value', { value: '', writable: true })
-      await input.trigger('input')
-      const emitted = wrapper.emitted('update:modelValue')?.[0]?.[0]
-      expect(emitted).not.toBeNaN()
+      const textarea = wrapper.get('textarea')
+      await textarea.setValue('notes')
+      expect({
+        rows: textarea.attributes('rows'),
+        emitted: wrapper.emitted('update:modelValue')?.[0],
+      }).toEqual({ rows: '5', emitted: ['notes'] })
     })
   })
 
@@ -64,9 +43,9 @@ describe('BaseInput', () => {
       expect(wrapper.find('input').attributes('placeholder')).toBe('Enter text')
     })
 
-    it('should apply error class', () => {
+    it('should apply error class when invalid', () => {
       const wrapper = mount(BaseInput, {
-        props: { modelValue: '', error: true },
+        props: { modelValue: '', invalid: true },
       })
       expect(wrapper.find('input').classes()).toContain('mint-input--error')
     })
@@ -124,8 +103,8 @@ describe('BaseInput prefix / suffix slots (1e)', () => {
     expect(wrapper.classes()).toContain('extra')
   })
 
-  it('should mark the group as errored when error is set', () => {
-    const wrapper = mount(BaseInput, { props: { error: true }, slots: { suffix: 'µL' } })
+  it('should mark the group as errored when invalid is set', () => {
+    const wrapper = mount(BaseInput, { props: { invalid: true }, slots: { suffix: 'µL' } })
     expect(wrapper.classes()).toContain('mint-input-group--error')
   })
 

package/src/__tests__/components/BaseModal.test.ts

@@ -20,7 +20,7 @@ const railTabs: ModalTab[] = [
 function mountModal(props: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
   return mount(BaseModal, {
     props: {
-      modelValue: true,
+      open: true,
       title: 'Settings',
       ...props,
     },
@@ -165,7 +165,7 @@ describe('BaseModal', () => {
 
     it('should pass the active tab to the pane-header slot', () => {
       const wrapper = mount(BaseModal, {
-        props: { modelValue: true, layout: 'rail', tabs: railTabs, activeTab: 'security' },
+        props: { open: true, layout: 'rail', tabs: railTabs, activeTab: 'security' },
         slots: { 'pane-header': '<template #pane-header="{ tab }"><span class="slot-tab">{{ tab.label }}</span></template>' },
         global: { stubs: { teleport: true } },
       })
@@ -182,7 +182,7 @@ describe('BaseModal', () => {
       const outer = mountModal()
       const inner = mountModal({ title: 'Nested' })
       pressEscape()
-      expect(inner.emitted('update:modelValue')).toEqual([[false]])
+      expect(inner.emitted('update:open')).toEqual([[false]])
       outer.unmount()
       inner.unmount()
     })
@@ -191,14 +191,14 @@ describe('BaseModal', () => {
       const outer = mountModal()
       const inner = mountModal({ title: 'Nested' })
       pressEscape()
-      expect(outer.emitted('update:modelValue')).toBeUndefined()
+      expect(outer.emitted('update:open')).toBeUndefined()
       outer.unmount()
       inner.unmount()
     })
 
     it('should focus the first focusable element when mounted already open', async () => {
       const attached = mount(BaseModal, {
-        props: { modelValue: true, title: 'Settings' },
+        props: { open: true, title: 'Settings' },
         slots: { default: '<input class="first-field">' },
         attachTo: document.body,
       })
@@ -210,7 +210,7 @@ describe('BaseModal', () => {
 
     it('should focus the autofocus element when the modal content marks one', async () => {
       const attached = mount(BaseModal, {
-        props: { modelValue: true, title: 'Settings' },
+        props: { open: true, title: 'Settings' },
         slots: { default: '<input class="first-field" autofocus>' },
         attachTo: document.body,
       })

package/src/__tests__/components/BasePill.test.ts

@@ -4,13 +4,13 @@ import BasePill from '../../components/BasePill.vue'
 
 describe('BasePill', () => {
   describe('rendering with default props', () => {
-    it('should render pill with default variant and size', () => {
+    it('should render a soft neutral md pill when no props are set', () => {
       const wrapper = mount(BasePill, {
         slots: { default: 'Label' },
       })
-      expect(wrapper.find('.mint-pill').exists()).toBe(true)
-      expect(wrapper.find('.mint-pill--default').exists()).toBe(true)
-      expect(wrapper.find('.mint-pill--md').exists()).toBe(true)
+      expect(wrapper.find('.mint-pill').classes()).toEqual(
+        expect.arrayContaining(['mint-pill--neutral', 'mint-pill--soft', 'mint-pill--md']),
+      )
     })
 
     it('should render label content', () => {
@@ -35,53 +35,47 @@ describe('BasePill', () => {
     })
   })
 
-  describe('variant prop', () => {
-    it('should apply primary variant class', () => {
-      const wrapper = mount(BasePill, {
-        props: { variant: 'primary' },
-        slots: { default: 'Primary' },
-      })
-      expect(wrapper.find('.mint-pill--primary').exists()).toBe(true)
-    })
-
-    it('should apply success variant class', () => {
-      const wrapper = mount(BasePill, {
-        props: { variant: 'success' },
-        slots: { default: 'Success' },
-      })
-      expect(wrapper.find('.mint-pill--success').exists()).toBe(true)
-    })
+  describe('tone and variant props', () => {
+    it.each(['neutral', 'primary', 'cta', 'success', 'warning', 'error', 'info'] as const)(
+      'should apply the %s tone class when tone is set',
+      (tone) => {
+        const wrapper = mount(BasePill, {
+          props: { tone },
+          slots: { default: tone },
+        })
+        expect(wrapper.find(`.mint-pill--${tone}`).exists()).toBe(true)
+      },
+    )
 
-    it('should apply warning variant class', () => {
+    it('should apply outline variant class', () => {
       const wrapper = mount(BasePill, {
-        props: { variant: 'warning' },
-        slots: { default: 'Warning' },
+        props: { variant: 'outline' },
+        slots: { default: 'Outline' },
       })
-      expect(wrapper.find('.mint-pill--warning').exists()).toBe(true)
+      expect(wrapper.find('.mint-pill--outline').exists()).toBe(true)
     })
 
-    it('should apply error variant class', () => {
+    it('should set the accent token inline when color is set', () => {
       const wrapper = mount(BasePill, {
-        props: { variant: 'error' },
-        slots: { default: 'Error' },
+        props: { color: 'var(--mint-sample-2)', dot: true },
+        slots: { default: 'Group B' },
       })
-      expect(wrapper.find('.mint-pill--error').exists()).toBe(true)
+      expect(wrapper.find('.mint-pill').attributes('style')).toContain('--mint-pill-tone: var(--mint-sample-2)')
     })
 
-    it('should apply info variant class', () => {
-      const wrapper = mount(BasePill, {
-        props: { variant: 'info' },
-        slots: { default: 'Info' },
-      })
-      expect(wrapper.find('.mint-pill--info').exists()).toBe(true)
+    it('should mark the pill as accented so the neutral surface yields to color when color is set', () => {
+      const wrapper = mount(BasePill, { props: { color: 'var(--mint-sample-3)' }, slots: { default: 'Group C' } })
+      expect(wrapper.find('.mint-pill').classes()).toContain('mint-pill--accent')
     })
+  })
 
-    it('should apply outline variant class', () => {
+  describe('dot prop', () => {
+    it('should animate the dot when pulse is set', () => {
       const wrapper = mount(BasePill, {
-        props: { variant: 'outline' },
-        slots: { default: 'Outline' },
+        props: { dot: true, pulse: true },
+        slots: { default: 'Running' },
       })
-      expect(wrapper.find('.mint-pill--outline').exists()).toBe(true)
+      expect(wrapper.find('.mint-pill__dot--pulse').exists()).toBe(true)
     })
   })
 
@@ -210,7 +204,7 @@ describe('BasePill', () => {
     it('should apply multiple classes correctly', () => {
       const wrapper = mount(BasePill, {
         props: {
-          variant: 'success',
+          tone: 'success',
           size: 'sm',
           disabled: true,
           icon: true,