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

package/src/__tests__/components/BaseSelect.multiple.test.ts

@@ -0,0 +1,118 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseSelect from '../../components/BaseSelect.vue'
+
+const options = [
+  { value: 'a', label: 'A' },
+  { value: 'b', label: 'B' },
+  { value: 'c', label: 'C' },
+]
+
+function mountMultiple(props: Record<string, unknown> = {}) {
+  return mount(BaseSelect, { props: { multiple: true, modelValue: ['a'], options, ...props } })
+}
+
+async function openPanel(wrapper: ReturnType<typeof mountMultiple>) {
+  await wrapper.find('.mint-multi-select__field').trigger('click')
+  return wrapper
+}
+
+describe('BaseSelect multiple', () => {
+  it('should render the chip field when multiple is a bare template attribute', () => {
+    // A compiled `<BaseSelect multiple>` passes '' because `multiple` has no runtime Boolean type.
+    const wrapper = mount(BaseSelect, { props: { multiple: '' as unknown as true, modelValue: [], options } })
+
+    expect(wrapper.find('.mint-multi-select__field').exists()).toBe(true)
+  })
+
+  it('accepts string and number shorthand options', async () => {
+    const wrapper = await openPanel(mountMultiple({
+      modelValue: ['glucose', 2],
+      options: ['glucose', 2, { value: 'dox', label: 'Doxorubicin' }],
+    }))
+
+    expect(wrapper.findAll('.mint-multi-select__chip').map(chip => chip.text())).toEqual(['glucose', '2'])
+    expect(wrapper.findAll('[role="option"]').map(row => row.text())).toEqual(['glucose', '2', 'Doxorubicin'])
+
+    await wrapper.findAll('[role="option"]')[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['glucose', 2, 'dox']])
+  })
+
+  it('uses the shared selection limit for max', async () => {
+    const wrapper = await openPanel(mountMultiple({ max: 1 }))
+
+    await wrapper.findAll('[role="option"]')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.findAll('[role="option"]')[1].attributes('aria-disabled')).toBe('true')
+  })
+
+  it('should reserve the check box on every row when only one is selected', async () => {
+    const wrapper = await openPanel(mountMultiple())
+
+    expect(wrapper.findAll('.mint-multi-select__check')).toHaveLength(3)
+    expect(wrapper.findAll('.mint-multi-select__check--on')).toHaveLength(1)
+  })
+
+  it.each(['Enter', ' ', 'ArrowDown'])('should open the listbox when %j is pressed on the field', async (key) => {
+    const wrapper = mountMultiple()
+
+    await wrapper.find('.mint-multi-select__field').trigger('keydown', { key })
+
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+    expect(wrapper.find('.mint-multi-select__field').attributes('aria-expanded')).toBe('true')
+  })
+
+  it('should close the listbox when the field is clicked while it is open', async () => {
+    const wrapper = await openPanel(mountMultiple())
+
+    await wrapper.find('.mint-multi-select__field').trigger('click')
+
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    expect(wrapper.find('.mint-multi-select__field').attributes('aria-expanded')).toBe('false')
+  })
+
+  it('should close the listbox when Escape is pressed in the filter', async () => {
+    const wrapper = await openPanel(mountMultiple())
+
+    await wrapper.find('input[type="search"]').trigger('keydown', { key: 'Escape' })
+
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('should remove the last chip when Backspace is pressed in an empty filter', async () => {
+    const wrapper = await openPanel(mountMultiple({ modelValue: ['a', 'b'] }))
+
+    await wrapper.find('input[type="search"]').trigger('keydown', { key: 'Backspace' })
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['a']])
+  })
+
+  it('should remove a chip without opening the listbox when its remove button is clicked', async () => {
+    const wrapper = mountMultiple({ modelValue: ['a', 'b'] })
+
+    await wrapper.find('button[aria-label="Remove A"]').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['b']])
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('should narrow the rows and toggle the active row with Enter when the filter has text', async () => {
+    const wrapper = await openPanel(mountMultiple())
+    const filter = wrapper.find('input[type="search"]')
+
+    await filter.setValue('c')
+    await filter.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.findAll('[role="option"]').map(row => row.text())).toEqual(['C'])
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['a', 'c']])
+  })
+
+  it('should neither open nor offer chip removal when disabled', async () => {
+    const wrapper = await openPanel(mountMultiple({ disabled: true }))
+
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    expect(wrapper.find('.mint-multi-select__chip-remove').exists()).toBe(false)
+  })
+})

package/src/__tests__/components/{SearchableSelect.test.ts → BaseSelect.searchable.test.ts}

@@ -1,7 +1,7 @@
 import { flushPromises, mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
-import SearchableSelect from '../../components/SearchableSelect.vue'
+import BaseSelect from '../../components/BaseSelect.vue'
 
 const options = [
   { value: 'alpha', label: 'Alpha', description: 'First option' },
@@ -9,9 +9,19 @@ const options = [
   { value: 'gamma', label: 'Gamma', meta: 'count' },
 ]
 
-describe('SearchableSelect', () => {
+describe('BaseSelect searchable', () => {
+  it('names the trigger button and keeps class on the wrapper', () => {
+    const wrapper = mount(BaseSelect, {
+      props: { searchable: true, options },
+      attrs: { 'aria-label': 'Instrument', class: 'outer' },
+    })
+
+    expect([wrapper.get('.mint-searchable-select__trigger').attributes('aria-label'), wrapper.classes('outer')])
+      .toEqual(['Instrument', true])
+  })
+
   it('filters rich options and explains disabled choices', async () => {
-    const wrapper = mount(SearchableSelect, { props: { options } })
+    const wrapper = mount(BaseSelect, { props: { searchable: true, options } })
     await wrapper.get('.mint-searchable-select__trigger').trigger('click')
     await wrapper.get('input').setValue('bet')
 
@@ -21,7 +31,7 @@ describe('SearchableSelect', () => {
   })
 
   it('skips disabled options during keyboard selection', async () => {
-    const wrapper = mount(SearchableSelect, { props: { options } })
+    const wrapper = mount(BaseSelect, { props: { searchable: true, options } })
     await wrapper.get('.mint-searchable-select__trigger').trigger('click')
     await flushPromises()
     await wrapper.get('input').trigger('keydown', { key: 'ArrowDown' })
@@ -32,9 +42,9 @@ describe('SearchableSelect', () => {
   })
 
   it('keeps footer actions reachable until focus leaves the select', async () => {
-    const wrapper = mount(SearchableSelect, {
+    const wrapper = mount(BaseSelect, {
       attachTo: document.body,
-      props: { options },
+      props: { searchable: true, options },
       slots: { footer: '<button type="button">Add option</button>' },
     })
     const outside = document.createElement('button')
@@ -60,21 +70,21 @@ describe('SearchableSelect', () => {
   })
 
   it('should render the panel on the shared popover surface when opened', async () => {
-    const wrapper = mount(SearchableSelect, { props: { options } })
+    const wrapper = mount(BaseSelect, { props: { searchable: true, options } })
     await wrapper.get('.mint-searchable-select__trigger').trigger('click')
 
     expect(wrapper.get('.mint-searchable-select__panel').classes()).toContain('mint-popover')
   })
 
   it('should mark the selected option as a selected menu item when opened', async () => {
-    const wrapper = mount(SearchableSelect, { props: { options, modelValue: 'alpha' } })
+    const wrapper = mount(BaseSelect, { props: { searchable: true, options, modelValue: 'alpha' } })
     await wrapper.get('.mint-searchable-select__trigger').trigger('click')
 
     expect(wrapper.findAll('[role="option"]')[0].classes()).toContain('mint-menu-item--selected')
   })
 
   it('should reserve the check column on unselected options when opened', async () => {
-    const wrapper = mount(SearchableSelect, { props: { options, modelValue: 'alpha' } })
+    const wrapper = mount(BaseSelect, { props: { searchable: true, options, modelValue: 'alpha' } })
     await wrapper.get('.mint-searchable-select__trigger').trigger('click')
 
     expect(wrapper.findAll('[role="option"]')[2].find('.mint-menu-item__check').exists()).toBe(true)

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

@@ -55,6 +55,17 @@ describe('BaseSelect', () => {
     })
   })
 
+  it.each([
+    ['aria-labelledby', 'native', {}, 'select'],
+    ['aria-describedby', 'searchable', { searchable: true }, '.mint-searchable-select__trigger'],
+    ['aria-describedby', 'multiple', { multiple: true, modelValue: [] as string[] }, '.mint-multi-select__field'],
+    ['aria-labelledby', 'multiple', { multiple: true, modelValue: [] as string[] }, '.mint-multi-select__field'],
+  ] as const)('should forward %s when the select is %s', (attr, _, extra, selector) => {
+    const wrapper = mount(BaseSelect, { props: { options: ['linear'], ...extra }, attrs: { [attr]: 'hint' } })
+    const target = selector ? wrapper.get(selector) : wrapper
+    expect(target.attributes(attr)).toBe('hint')
+  })
+
   it('accepts string and number shorthand options', async () => {
     const wrapper = mount(BaseSelect, {
       props: {

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

@@ -3,11 +3,11 @@ import { describe, expect, it } from 'vitest'
 import BaseTabs from '../../components/BaseTabs.vue'
 
 describe('BaseTabs', () => {
-  it('accepts string shorthand tabs', async () => {
+  it('accepts primitive shorthand options', async () => {
     const wrapper = mount(BaseTabs, {
       props: {
         modelValue: 'Run',
-        tabs: ['Run', 'Results', { id: 'settings', label: 'Settings', disabled: true }],
+        options: ['Run', 'Results', { value: 'settings', label: 'Settings', disabled: true }],
       },
     })
 
@@ -27,9 +27,9 @@ describe('BaseTabs', () => {
     const wrapper = mount(BaseTabs, {
       props: {
         modelValue: 'users',
-        tabs: [
-          { id: 'users', label: 'Users', icon: 'M12 4h8M12 12h8M12 20h8' },
-          { id: 'logs', label: 'Logs', icon: ['M4 4h16v16H4z', 'M8 8h8'] },
+        options: [
+          { value: 'users', label: 'Users', icon: 'M12 4h8M12 12h8M12 20h8' },
+          { value: 'logs', label: 'Logs', icon: ['M4 4h16v16H4z', 'M8 8h8'] },
         ],
       },
     })
@@ -39,17 +39,17 @@ describe('BaseTabs', () => {
   })
 
   describe('keyboard navigation (WAI-ARIA tabs pattern)', () => {
-    const tabs = ['Run', 'Results', { id: 'settings', label: 'Settings', disabled: true }, 'Logs']
+    const tabs = ['Run', 'Results', { value: 'settings', label: 'Settings', disabled: true }, 'Logs']
 
     it('puts tabindex="0" only on the active tab', () => {
-      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', tabs } })
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', options: tabs } })
       const buttons = wrapper.findAll('.mint-tab')
 
       expect(buttons.map(b => b.attributes('tabindex'))).toEqual(['-1', '0', '-1', '-1'])
     })
 
     it('moves to and activates the next enabled tab on ArrowRight, skipping disabled tabs', async () => {
-      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', tabs } })
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', options: tabs } })
 
       await wrapper.findAll('.mint-tab')[1].trigger('keydown', { key: 'ArrowRight' })
 
@@ -57,7 +57,7 @@ describe('BaseTabs', () => {
     })
 
     it('moves to the previous enabled tab on ArrowLeft, wrapping past the start', async () => {
-      const wrapper = mount(BaseTabs, { props: { modelValue: 'Run', tabs } })
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Run', options: tabs } })
 
       await wrapper.findAll('.mint-tab')[0].trigger('keydown', { key: 'ArrowLeft' })
 
@@ -65,7 +65,7 @@ describe('BaseTabs', () => {
     })
 
     it('wraps past the end on ArrowRight', async () => {
-      const wrapper = mount(BaseTabs, { props: { modelValue: 'Logs', tabs } })
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Logs', options: tabs } })
 
       await wrapper.findAll('.mint-tab')[3].trigger('keydown', { key: 'ArrowRight' })
 
@@ -73,7 +73,7 @@ describe('BaseTabs', () => {
     })
 
     it('jumps to the first tab on Home and the last on End', async () => {
-      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', tabs } })
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', options: tabs } })
 
       await wrapper.findAll('.mint-tab')[1].trigger('keydown', { key: 'End' })
       expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['Logs'])
@@ -84,7 +84,7 @@ describe('BaseTabs', () => {
 
     it('moves DOM focus onto the newly-activated tab', async () => {
       const wrapper = mount(BaseTabs, {
-        props: { modelValue: 'Run', tabs },
+        props: { modelValue: 'Run', options: tabs },
         attachTo: document.body,
       })
 
@@ -97,7 +97,7 @@ describe('BaseTabs', () => {
     })
 
     it('keeps aria-selected and aria-controls consistent with the active tab', () => {
-      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', tabs } })
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', options: tabs } })
       const active = wrapper.findAll('.mint-tab')[1]
 
       expect(active.attributes('aria-selected')).toBe('true')

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

@@ -57,4 +57,20 @@ describe('BatchProgressList', () => {
     await wrapper.get('.mint-batch-progress__completed-toggle').trigger('click')
     expect(wrapper.findAll('.mint-batch-progress__item')).toHaveLength(3)
   })
+
+  it.each([
+    ['completed', undefined, '100%', '100%'],
+    ['processing', 40, '40%', '40%'],
+    ['pending', undefined, 'Queued', '0%'],
+    ['error', undefined, 'Failed', '0%'],
+    ['skipped', undefined, 'Skipped', '0%'],
+  ] as const)('should show %s rows with their status text and bar width', async (status, progress, text, width) => {
+    const wrapper = mount(BatchProgressList, {
+      props: { items: [{ id: 'x', label: 'X', status, progress }], autoScroll: false },
+    })
+    if (status === 'completed') await wrapper.get('.mint-batch-progress__completed-toggle').trigger('click')
+
+    expect(wrapper.get('.mint-batch-progress__item-status').text()).toBe(text)
+    expect(wrapper.get('.mint-batch-progress__item-progress-bar').attributes('style')).toContain(`width: ${width}`)
+  })
 })

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

@@ -13,7 +13,7 @@ describe('CalendarGridPanelInternal', () => {
   it('renders calendar state and emits navigation and selection events', async () => {
     const wrapper = mount(CalendarGridPanelInternal, {
       props: {
-        weekDays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        weekDays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
         monthYear: 'April 2026',
         days,
         selectedDate: days[1].date,
@@ -38,7 +38,7 @@ describe('CalendarGridPanelInternal', () => {
     const today = new Date()
     const wrapper = mount(CalendarGridPanelInternal, {
       props: {
-        weekDays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        weekDays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
         monthYear: 'Today',
         days: [{ date: today, isCurrentMonth: true, isDisabled: false }],
         selectedDate: today,

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

@@ -21,6 +21,17 @@ describe('ChartContainer', () => {
     expect(wrapper.text()).toContain('Chart')
     expect(wrapper.get('.mint-chart__footer').text()).toBe('Footer')
   })
+
+  it.each([
+    [undefined, 'No data'],
+    ['Pick samples to draw the distribution.', 'No dataPick samples to draw the distribution.'],
+  ])('should render the empty title and hint %s when empty', (emptyHint, text) => {
+    const wrapper = mount(ChartContainer, { props: { empty: true, emptyText: 'No data', emptyHint } })
+
+    const empty = wrapper.get('.mint-chart__empty')
+    expect(empty.text()).toBe(text)
+    expect(empty.find('.mint-chart__empty-hint').exists()).toBe(emptyHint !== undefined)
+  })
 })
 
 describe('ChartContainer header legend (9a)', () => {

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

@@ -25,9 +25,12 @@ describe('ChemicalFormula', () => {
     expect(mount(ChemicalFormula, { props: { emptyText: 'Unknown' } }).text()).toBe('Unknown')
   })
 
-  it('supports standalone sans-serif adduct labels', () => {
-    expect(mount(AdductText, { props: { value: '[M-H]-', font: 'sans' } }).classes())
-      .toContain('mint-adduct-text--sans')
+  it.each([
+    [undefined, 'sans'],
+    ['mono', 'mono'],
+  ] as const)('should use the %s font prop as the %s adduct font', (font, cls) => {
+    expect(mount(AdductText, { props: { value: '[M-H]-', font } }).classes())
+      .toContain(`mint-adduct-text--${cls}`)
   })
 
   it('should render a trailing adduct charge as a superscript when the value is bracketed', () => {

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

@@ -382,7 +382,7 @@ describe('CollapsibleCard', () => {
       expect(wrapper.get('[role="switch"]').attributes('aria-checked')).toBe('true')
     })
 
-    it('should render the shared BaseToggle when showToggle is true (10a)', () => {
+    it('should render the shared switch when showToggle is true (10a)', () => {
       const wrapper = mount(CollapsibleCard, {
         props: { title: 'Test Card', showToggle: true },
       })

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

@@ -6,9 +6,9 @@ import ComponentBindingRenderer from '../../components/ComponentBindingRenderer.
 const WellPlateStub = defineComponent({
   name: 'WellPlate',
   props: {
+    spec: { type: Object, default: undefined },
     modelValue: { type: Array, default: () => [] },
     readonly: { type: Boolean, default: false },
-    size: { type: String, default: undefined },
   },
   template: '<div data-test="well-plate" />',
 })
@@ -25,10 +25,8 @@ const DoseCalculatorStub = defineComponent({
 const DataFrameStub = defineComponent({
   name: 'DataFrame',
   props: {
+    spec: { type: Object, default: undefined },
     data: { type: Array, default: () => [] },
-    columns: { type: Array, default: () => [] },
-    size: { type: String, default: undefined },
-    maxHeight: { type: String, default: undefined },
   },
   template: '<div data-test="data-frame" />',
 })
@@ -36,24 +34,14 @@ const DataFrameStub = defineComponent({
 const PlateEditorStub = defineComponent({
   name: 'PlateEditor',
   props: {
+    spec: { type: Object, default: undefined },
     modelValue: { type: Array, default: () => [] },
     readonly: { type: Boolean, default: false },
-    size: { type: String, default: undefined },
   },
   emits: ['assign'],
   template: '<div data-test="plate-editor" />',
 })
 
-const ExperimentTimelineStub = defineComponent({
-  name: 'ExperimentTimeline',
-  props: {
-    modelValue: { type: Array, default: () => [] },
-    editable: { type: Boolean, default: true },
-    size: { type: String, default: undefined },
-  },
-  template: '<div data-test="experiment-timeline" />',
-})
-
 const ScheduleCalendarStub = defineComponent({
   name: 'ScheduleCalendar',
   props: {
@@ -67,24 +55,11 @@ const ScheduleCalendarStub = defineComponent({
   template: '<div data-test="schedule-calendar" />',
 })
 
-const SampleSelectorStub = defineComponent({
-  name: 'SampleSelector',
-  props: {
-    samples: { type: Array, default: () => [] },
-    modelValue: { type: Array, default: () => [] },
-    enableGrouping: { type: Boolean, default: true },
-    enableSmartGroup: { type: Boolean, default: true },
-  },
-  template: '<div data-test="sample-selector" />',
-})
-
 const globalOptions = {
   stubs: {
     DataFrame: DataFrameStub,
     DoseCalculator: DoseCalculatorStub,
-    ExperimentTimeline: ExperimentTimelineStub,
     PlateEditor: PlateEditorStub,
-    SampleSelector: SampleSelectorStub,
     ScheduleCalendar: ScheduleCalendarStub,
     WellPlate: WellPlateStub,
   },
@@ -120,9 +95,9 @@ describe('ComponentBindingRenderer', () => {
     expect(wrapper.find('[data-component-binding-id="dose"]').exists()).toBe(true)
     expect(wrapper.find('[data-component-binding-id="custom"]').exists()).toBe(false)
     expect(wrapper.findComponent(WellPlateStub).props()).toMatchObject({
+      spec: { size: 'fill' },
       modelValue: ['A1'],
       readonly: true,
-      size: 'fill',
     })
     expect(wrapper.findComponent(DoseCalculatorStub).props()).toMatchObject({
       mode: 'serial',
@@ -145,8 +120,8 @@ describe('ComponentBindingRenderer', () => {
     })
 
     expect(wrapper.findComponent(PlateEditorStub).props()).toMatchObject({
+      spec: { size: 'md' },
       readonly: true,
-      size: 'md',
     })
   })
 
@@ -157,7 +132,7 @@ describe('ComponentBindingRenderer', () => {
           {
             id: 'table',
             component: 'DataFrame',
-            props: { data: [{ id: 1 }], columns: [{ key: 'id', label: 'ID' }] },
+            props: { data: [{ id: 1 }], spec: { columns: [{ key: 'id', label: 'ID' }] } },
           },
         ],
         include: ['WellPlate'],
@@ -177,7 +152,7 @@ describe('ComponentBindingRenderer', () => {
           {
             id: 'table',
             component: 'DataFrame',
-            props: { data: [{ id: 1 }], columns: [{ key: 'id', label: 'ID' }] },
+            props: { data: [{ id: 1 }], spec: { columns: [{ key: 'id', label: 'ID' }] } },
           },
         ],
         dense: true,
@@ -186,32 +161,7 @@ describe('ComponentBindingRenderer', () => {
     })
 
     expect(wrapper.findComponent(DataFrameStub).props()).toMatchObject({
-      size: 'sm',
-      maxHeight: '280px',
-    })
-  })
-
-  it('renders ExperimentTimeline bindings with preview-safe props', () => {
-    const wrapper = mount(ComponentBindingRenderer, {
-      props: {
-        binding: {
-          id: 'instrument-run:ExperimentTimeline',
-          component: 'ExperimentTimeline',
-          propsObject: {
-            modelValue: [{ id: 's001-run', name: 'S001', type: 'measurement', status: 'pending', order: 1 }],
-            editable: true,
-          },
-        },
-        dense: true,
-      },
-      global: globalOptions,
-    })
-
-    expect(wrapper.find('[data-component-binding-id="instrument-run:ExperimentTimeline"]').exists()).toBe(true)
-    expect(wrapper.findComponent(ExperimentTimelineStub).props()).toMatchObject({
-      modelValue: [{ id: 's001-run', name: 'S001', type: 'measurement', status: 'pending', order: 1 }],
-      editable: false,
-      size: 'sm',
+      spec: { size: 'sm', maxHeight: '280px' },
     })
   })
 
@@ -247,28 +197,30 @@ describe('ComponentBindingRenderer', () => {
     })
   })
 
-  it('renders SampleSelector bindings with preview-safe grouping props', () => {
+  it('should render no component for the removed template-only bindings', () => {
     const wrapper = mount(ComponentBindingRenderer, {
       props: {
-        binding: {
-          id: 'assay-matrix:SampleSelector',
-          component: 'SampleSelector',
-          propsObject: {
-            samples: ['S001', 'S002'],
-            modelValue: [],
-          },
-        },
+        bindings: ['ReagentList', 'ExperimentTimeline', 'SampleSelector'].map(component => ({ component })),
       },
       global: globalOptions,
     })
 
-    expect(wrapper.find('[data-component-binding-id="assay-matrix:SampleSelector"]').exists()).toBe(true)
-    expect(wrapper.findComponent(SampleSelectorStub).props()).toMatchObject({
-      samples: ['S001', 'S002'],
-      modelValue: [],
-      enableGrouping: false,
-      enableSmartGroup: false,
+    expect(wrapper.find('.mint-component-binding-renderer__empty').exists()).toBe(true)
+  })
+
+  it('should label the header with the binding id and set no template attributes when headers show', () => {
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        binding: { id: 'layout', component: 'WellPlate' },
+        showHeaders: true,
+      },
+      global: globalOptions,
     })
+
+    expect({
+      label: wrapper.find('.mint-component-binding-renderer__source').text(),
+      templateAttributes: wrapper.find('[data-template-component], [data-template-id]').exists(),
+    }).toEqual({ label: 'layout', templateAttributes: false })
   })
 
   it('should apply PlateEditor intents to its own copy of the plates when not readonly', async () => {

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

@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
 import ConcentrationInput from '../../components/ConcentrationInput.vue'
-import UnitInput from '../../components/UnitInput.vue'
+import NumberInput from '../../components/NumberInput.vue'
 
 describe('ConcentrationInput', () => {
-  it('delegates value and unit selection to UnitInput', async () => {
+  it('delegates value and unit selection to NumberInput', async () => {
     const wrapper = mount(ConcentrationInput, {
       props: {
         modelValue: { value: 5, unit: 'µM' },
@@ -15,7 +15,7 @@ describe('ConcentrationInput', () => {
       },
     })
 
-    const unitInput = wrapper.findComponent(UnitInput)
+    const unitInput = wrapper.findComponent(NumberInput)
     expect(unitInput.exists()).toBe(true)
     expect(unitInput.props('modelValue')).toBe(5)
     expect(unitInput.props('unit')).toBe('µM')

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

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseButton from '../../components/BaseButton.vue'
+import ConfirmDialog from '../../components/ConfirmDialog.vue'
+import type { ButtonVariant, Tone } from '../../types'
+
+describe('ConfirmDialog', () => {
+  it.each<[Tone, ButtonVariant]>([
+    ['error', 'danger'],
+    ['warning', 'cta'],
+    ['cta', 'cta'],
+    ['success', 'success'],
+    ['info', 'primary'],
+    ['neutral', 'primary'],
+  ])('should color the confirm button %s → %s', (tone, variant) => {
+    const wrapper = mount(ConfirmDialog, {
+      props: { open: true, tone },
+      global: { stubs: { teleport: true } },
+    })
+    const buttons = wrapper.findAllComponents(BaseButton)
+    expect(buttons.at(-1)!.props('variant')).toBe(variant)
+  })
+})