@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

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

@@ -0,0 +1,141 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import ResourcePickerListInternal from '../../components/internal/ResourcePickerListInternal.vue'
+
+interface Item {
+  id: number
+  code: string
+  name: string
+}
+const items: Item[] = [
+  { id: 1, code: 'EXP-042', name: 'Liver microsome stability' },
+  { id: 2, code: 'EXP-041', name: 'Plasma protein binding' },
+]
+
+function setup(props: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
+  return mount(ResourcePickerListInternal, {
+    props: {
+      items,
+      itemKey: (item: unknown) => (item as Item).id,
+      describe: (item: unknown) => ({
+        code: (item as Item).code,
+        title: (item as Item).name,
+        meta: ['Zhang'],
+        date: '09-24',
+      }),
+      search: '',
+      label: 'Experiments',
+      ...props,
+    },
+    slots,
+  })
+}
+
+describe('ResourcePickerListInternal', () => {
+  it('should render one option per item', () => {
+    expect(setup().findAll('[role="option"]')).toHaveLength(2)
+  })
+
+  it('should render the code in its own mono element', () => {
+    expect(setup().get('.mint-resource-picker__code').text()).toBe('EXP-042')
+  })
+
+  it('should render the code as the shared gray code pill', () => {
+    expect(setup().get('.mint-resource-picker__code').classes()).toContain('mint-exp-code')
+  })
+
+  it('should tint the status by its variant', () => {
+    const wrapper = setup({
+      describe: (item: unknown) => ({ title: (item as Item).name, status: { label: 'Completed', variant: 'success' } }),
+    })
+    expect(wrapper.get('.mint-resource-picker__status').classes()).toContain('mint-resource-picker__status--success')
+  })
+
+  it('should keep the title line to the title alone', () => {
+    expect(setup().get('.mint-resource-picker__title').text()).toBe('Liver microsome stability')
+  })
+
+  it('should lead the second line with the code and meta', () => {
+    expect(setup().get('.mint-resource-picker__meta').text()).toBe('EXP-042Zhang')
+  })
+
+  it('should put the date in the right-hand column', () => {
+    expect(setup().get('.mint-resource-picker__aside .mint-resource-picker__date').text()).toBe('09-24')
+  })
+
+  it('should mark the selected row', () => {
+    const wrapper = setup({ selectedKey: 2 })
+    expect(wrapper.findAll('[role="option"]')[1]!.attributes('aria-selected')).toBe('true')
+  })
+
+  it('should fill the selected row only', () => {
+    expect(setup({ selectedKey: 2 }).findAll('.mint-resource-picker__row--selected')).toHaveLength(1)
+  })
+
+  it('should emit select when a row is clicked', async () => {
+    const wrapper = setup()
+    await wrapper.findAll('[role="option"]')[1]!.trigger('click')
+    expect(wrapper.emitted('select')?.[0]).toEqual([items[1]])
+  })
+
+  it('should point the search at the arrow-highlighted option', async () => {
+    const wrapper = setup()
+    await wrapper.trigger('keydown', { key: 'ArrowDown' })
+    expect(wrapper.get('input').attributes('aria-activedescendant')).toBe(
+      wrapper.findAll('[role="option"]')[0]!.attributes('id'),
+    )
+  })
+
+  it('should emit the highlighted item on Enter', async () => {
+    const wrapper = setup()
+    await wrapper.trigger('keydown', { key: 'ArrowDown' })
+    await wrapper.trigger('keydown', { key: 'ArrowDown' })
+    await wrapper.trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted('select')?.[0]).toEqual([items[1]])
+  })
+
+  it('should leave Enter to a control inside the row actions', async () => {
+    const wrapper = setup({}, { actions: '<button class="row-action">Archive</button>' })
+    await wrapper.trigger('keydown', { key: 'ArrowDown' })
+    await wrapper.get('.row-action').trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted('select')).toBeUndefined()
+  })
+
+  it('should emit the typed search text', async () => {
+    const wrapper = setup()
+    await wrapper.get('input').setValue('plasma')
+    expect(wrapper.emitted('update:search')?.[0]).toEqual(['plasma'])
+  })
+
+  it('should head each group with its label and a count', () => {
+    const wrapper = setup({ groups: [{ label: 'Recent', items }] })
+    expect(wrapper.get('.mint-resource-picker__group').text()).toBe('Recent2')
+  })
+
+  it('should hide the rows of a collapsed group', async () => {
+    const wrapper = setup({ groups: [{ label: 'Recent', items }] })
+    await wrapper.get('.mint-resource-picker__group').trigger('click')
+    expect(wrapper.findAll('[role="option"]')).toHaveLength(0)
+  })
+
+  it('should show skeleton rows while loading', () => {
+    expect(setup({ loading: true }).findAll('.mint-resource-picker__skeleton-row')).toHaveLength(4)
+  })
+
+  it('should show the error as an alert', () => {
+    expect(setup({ error: 'Could not load' }).get('[role="alert"]').text()).toBe('Could not load')
+  })
+
+  it('should show the empty title when there are no items', () => {
+    expect(setup({ items: [], emptyTitle: 'Nothing here' }).text()).toContain('Nothing here')
+  })
+
+  it('should leave Enter to a group header while a row is highlighted', async () => {
+    const wrapper = setup({ groups: [{ label: 'Recent', items }] })
+    await wrapper.findAll('[role="option"]')[0]!.trigger('mouseenter')
+
+    await wrapper.get('.mint-resource-picker__group').trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+  })
+})

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

@@ -3,9 +3,6 @@ import { resolve } from 'node:path'
 import { describe, expect, it } from 'vitest'
 
 const retiredSelectors: Record<string, readonly string[]> = {
-  'app-plugin-switcher.css': [
-    'mint-plugin-switcher__swatch',
-  ],
   'audit-trail.css': [
     'mint-audit-trail__empty',
   ],
@@ -42,9 +39,6 @@ const retiredSelectors: Record<string, readonly string[]> = {
     'mint-timeline__empty-content',
     'mint-timeline__empty-text',
   ],
-  'lcms-sequence-table.css': [
-    'mint-lcms-sequence-table__empty',
-  ],
   'protocol-step-editor.css': [
     'mint-protocol-editor__field-row',
   ],

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

@@ -50,4 +50,106 @@ describe('SampleHierarchyTree', () => {
 
     expect(wrapper.find('.mint-sample-tree__children').exists()).toBe(true)
   })
+
+  it('should tag a sample label with its node type when the node is a sample', () => {
+    const wrapper = mount(SampleHierarchyTree, { props: { nodes, defaultExpandedIds: ['study'] } })
+
+    const labels = wrapper.findAll('.mint-sample-tree__label')
+    expect(labels[1].classes()).toContain('mint-sample-tree__label--sample')
+  })
+
+  it('should wrap child nodes in the single grid row the expand animates', () => {
+    const wrapper = mount(SampleHierarchyTree, { props: { nodes, defaultExpandedIds: ['study'] } })
+
+    expect(wrapper.find('.mint-sample-tree__children > .mint-sample-tree__children-inner > .mint-sample-tree__node').exists()).toBe(true)
+  })
+
+  it('should own its child group from the parent treeitem when the node is expanded', () => {
+    const wrapper = mount(SampleHierarchyTree, { props: { nodes, defaultExpandedIds: ['study'] } })
+    const owned = wrapper.get('[role="treeitem"]').attributes('aria-owns')
+    expect(wrapper.find(`[id="${owned}"]`).attributes('role')).toBe('group')
+  })
+
+  describe('selection (4c)', () => {
+    const mountTree = (props: Record<string, unknown> = {}) =>
+      mount(SampleHierarchyTree, { props: { nodes, defaultExpandedIds: ['study'], ...props } })
+    const headers = (wrapper: ReturnType<typeof mountTree>) => wrapper.findAll('.mint-sample-tree__node-header')
+    const items = (wrapper: ReturnType<typeof mountTree>) => wrapper.findAll('[role="treeitem"]')
+
+    it('should emit update:selectedId with the node id when a node is clicked', async () => {
+      const wrapper = mountTree({ selectedId: null })
+      await headers(wrapper)[1].trigger('click')
+      expect(wrapper.emitted('update:selectedId')?.[0]).toEqual(['sample-1'])
+    })
+
+    it('should still emit node-click when a node is clicked', async () => {
+      const wrapper = mountTree({ selectedId: null })
+      await headers(wrapper)[1].trigger('click')
+      expect(wrapper.emitted('node-click')).toHaveLength(1)
+    })
+
+    it('should mark the node header selected when selectedId matches the node', () => {
+      const wrapper = mountTree({ selectedId: 'sample-1' })
+      expect(headers(wrapper)[1].classes()).toContain('mint-sample-tree__node-header--selected')
+    })
+
+    it('should leave other node headers unselected when selectedId matches one node', () => {
+      const wrapper = mountTree({ selectedId: 'sample-1' })
+      expect(headers(wrapper)[0].classes()).not.toContain('mint-sample-tree__node-header--selected')
+    })
+
+    it('should set aria-selected on the matching treeitem when selectedId matches', () => {
+      const wrapper = mountTree({ selectedId: 'sample-1' })
+      expect(items(wrapper)[1].attributes('aria-selected')).toBe('true')
+    })
+
+    it('should set aria-selected false on other treeitems when a selection model is bound', () => {
+      const wrapper = mountTree({ selectedId: 'sample-1' })
+      expect(items(wrapper)[0].attributes('aria-selected')).toBe('false')
+    })
+
+    it('should omit aria-selected when no selectedId is bound', () => {
+      const wrapper = mountTree()
+      expect(items(wrapper)[0].attributes('aria-selected')).toBeUndefined()
+    })
+
+    it('should make node headers focusable when a selection model is bound', () => {
+      const wrapper = mountTree({ selectedId: null })
+      expect(headers(wrapper)[0].attributes('tabindex')).toBe('0')
+    })
+
+    it('should keep node headers out of the tab order when no selectedId is bound', () => {
+      const wrapper = mountTree()
+      expect(headers(wrapper)[0].attributes('tabindex')).toBeUndefined()
+    })
+
+    it('should select the node when Enter is pressed on its header', async () => {
+      const wrapper = mountTree({ selectedId: null })
+      await headers(wrapper)[1].trigger('keydown', { key: 'Enter' })
+      expect(wrapper.emitted('update:selectedId')?.[0]).toEqual(['sample-1'])
+    })
+
+    it('should select the node when Space is pressed on its header', async () => {
+      const wrapper = mountTree({ selectedId: null })
+      await headers(wrapper)[1].trigger('keydown', { key: ' ' })
+      expect(wrapper.emitted('update:selectedId')?.[0]).toEqual(['sample-1'])
+    })
+
+    it('should ignore Enter on a header when no selectedId is bound', async () => {
+      const wrapper = mountTree()
+      await headers(wrapper)[1].trigger('keydown', { key: 'Enter' })
+      expect(wrapper.emitted('update:selectedId')).toBeUndefined()
+    })
+
+    it('should emit node-click when Enter is pressed on a header', async () => {
+      const wrapper = mountTree({ selectedId: null })
+      await headers(wrapper)[1].trigger('keydown', { key: 'Enter' })
+      expect(wrapper.emitted('node-click')).toHaveLength(1)
+    })
+
+    it('should put the treeitem role on the focusable header', () => {
+      const wrapper = mountTree({ selectedId: null })
+      expect(headers(wrapper)[1].attributes('role')).toBe('treeitem')
+    })
+  })
 })

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

@@ -0,0 +1,18 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SampleLegend from '../../components/SampleLegend.vue'
+
+describe('SampleLegend', () => {
+  it('should outline a sample swatch in its group token when no color is given', () => {
+    const wrapper = mount(SampleLegend, { props: { samples: [{ id: 's1', name: 'HeLa' }] } })
+
+    const swatch = wrapper.find('.mint-sample-legend__swatch').element as HTMLElement
+    expect(swatch.style.borderColor).toBe('var(--mint-sample-1)')
+  })
+
+  it('should draw the QC marker glyph when the sample id is qc', () => {
+    const wrapper = mount(SampleLegend, { props: { samples: [{ id: 'qc', name: 'QC', color: '#8b5cf6' }] } })
+
+    expect(wrapper.find('.mint-sample-legend__swatch').text()).toBe('Q')
+  })
+})

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

@@ -97,7 +97,7 @@ describe('SampleSelector', () => {
       },
     })
 
-    expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('2 samples')
+    expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('0 / 2')
     expect(wrapper.findAll('.mint-sample-selector__flat-name').map(item => item.text())).toEqual(['S1', 'S2'])
   })
 
@@ -464,3 +464,94 @@ describe('AutoGroupModal template download wiring', () => {
     }
   })
 })
+
+describe('SampleSelector checkboxes (7c)', () => {
+  const grouped = {
+    samples: ['S1', 'S2', 'S3'],
+    modelValue: ['S1'],
+    groups: [{ name: 'Control', color: '#3B82F6', samples: ['S1', 'S2'] }],
+    enableSmartGroup: false,
+  }
+  const stubs = { global: { stubs: { AutoGroupModal: true } } }
+
+  it('should show the mono selected / total count when some samples are selected', () => {
+    const wrapper = mount(SampleSelector, { props: grouped, ...stubs })
+    expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('1 / 3')
+  })
+
+  it('should mark the select-all checkbox mixed when some samples are selected', () => {
+    const wrapper = mount(SampleSelector, { props: grouped, ...stubs })
+    expect(wrapper.find('.mint-sample-selector__select-all input').attributes('aria-checked')).toBe('mixed')
+  })
+
+  it('should render the select-all row as a header div when samples exist', () => {
+    const wrapper = mount(SampleSelector, { props: grouped, ...stubs })
+    expect(wrapper.find('.mint-sample-selector__select-all').element.tagName).toBe('DIV')
+  })
+
+  it('should mark the select-all row grouped when groups are shown', () => {
+    const wrapper = mount(SampleSelector, { props: grouped, ...stubs })
+    expect(wrapper.find('.mint-sample-selector__select-all').classes()).toContain('mint-sample-selector__select-all--grouped')
+  })
+
+  it('should leave the select-all row ungrouped in the flat view', () => {
+    const wrapper = mount(SampleSelector, { props: { ...grouped, groups: [] }, ...stubs })
+    expect(wrapper.find('.mint-sample-selector__select-all').classes()).not.toContain('mint-sample-selector__select-all--grouped')
+  })
+
+  // happy-dom has no layout, so the header's columns are derived from the group tree's rules.
+  function rems(selector: string, property: string): number[] {
+    const styles = readFileSync(resolve(process.cwd(), 'src/styles/components/sample-selector.css'), 'utf8')
+    const rule = styles.match(new RegExp(`${selector.replace(/\./g, '\\.')}\\s*\\{([^}]*)\\}`))![1]
+    return rule.match(new RegExp(`(?:^|[;\\s])${property}:\\s*([^;]+)`))![1].trim().split(/\s+/).map(parseFloat)
+  }
+
+  it('should put the grouped select-all checkbox over the group checkboxes', () => {
+    const header = '.mint-sample-selector__major-header'
+    const checkboxOffset = rems(header, 'padding')[1] + rems('.mint-sample-selector__chevron', 'width')[0] + rems(header, 'gap')[0]
+    expect(rems('.mint-sample-selector__select-all--grouped', 'padding-left')[0]).toBeCloseTo(checkboxOffset)
+  })
+
+  it('should put the grouped select-all count over the group counts', () => {
+    const header = '.mint-sample-selector__major-header'
+    const deleteButton = rems('.mint-sample-selector__delete-btn svg', 'width')[0] + 2 * rems('.mint-sample-selector__delete-btn', 'padding')[0]
+    const countOffset = rems('.mint-sample-selector__tree', 'padding-right')[0] + rems(header, 'padding')[1] + deleteButton + rems(header, 'gap')[0]
+    expect(rems('.mint-sample-selector__select-all--grouped', 'padding-right')[0]).toBeCloseTo(countOffset)
+  })
+
+  it('should mark a group checkbox mixed when part of its samples are selected', () => {
+    const wrapper = mount(SampleSelector, { props: grouped, ...stubs })
+    expect(wrapper.find('.mint-sample-selector__major-header input').attributes('aria-checked')).toBe('mixed')
+  })
+
+  it('should render group checkboxes as BaseCheckbox sm when grouped', () => {
+    const wrapper = mount(SampleSelector, { props: grouped, ...stubs })
+    expect(wrapper.find('.mint-sample-selector__major-header .mint-checkbox__box--sm').exists()).toBe(true)
+  })
+
+  it('should toggle the whole group when its checkbox changes', async () => {
+    const wrapper = mount(SampleSelector, { props: grouped, ...stubs })
+    await wrapper.find('.mint-sample-selector__major-header input').setValue(true)
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['S1', 'S2']])
+  })
+
+  it('should not expand the group when its checkbox is clicked', async () => {
+    const wrapper = mount(SampleSelector, { props: grouped, ...stubs })
+    await wrapper.find('.mint-sample-selector__major-header .mint-checkbox').trigger('click')
+    expect(wrapper.find('.mint-sample-selector__major-header').attributes('aria-expanded')).toBe('false')
+  })
+
+  it('should not expand the group when Space is pressed on its checkbox', async () => {
+    const wrapper = mount(SampleSelector, { props: grouped, ...stubs })
+    await wrapper.find('.mint-sample-selector__major-header input').trigger('keydown', { key: ' ' })
+    expect(wrapper.find('.mint-sample-selector__major-header').attributes('aria-expanded')).toBe('false')
+  })
+
+  it('should render flat sample checkboxes as BaseCheckbox sm when ungrouped', () => {
+    const wrapper = mount(SampleSelector, {
+      props: { samples: ['S1'], modelValue: [], enableGrouping: false },
+      ...stubs,
+    })
+    expect(wrapper.find('.mint-sample-selector__flat-item .mint-checkbox__box--sm').exists()).toBe(true)
+  })
+})

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

@@ -10,13 +10,11 @@ describe('SampleSelectorSampleRow', () => {
         sample: sampleName,
         selected: true,
         dragging: true,
-        accentColor: '#3B82F6',
       },
     })
 
     expect(wrapper.classes()).toContain('mint-sample-selector__sample--dragging')
     expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
-    expect(wrapper.get('input').attributes('style')).toContain('accent-color')
     expect(wrapper.text()).toContain(sampleName)
     expect(wrapper.attributes('title')).toBe(sampleName)
     expect(wrapper.attributes('aria-label')).toBe(`Sample: ${sampleName}`)
@@ -37,4 +35,9 @@ describe('SampleSelectorSampleRow', () => {
     expect(wrapper.emitted('toggle')).toHaveLength(1)
     expect(wrapper.emitted('remove')).toHaveLength(1)
   })
+
+  it('should render a BaseCheckbox sm when mounted', () => {
+    const wrapper = mount(SampleSelectorSampleRow, { props: { sample: 'S1', selected: false } })
+    expect(wrapper.find('.mint-checkbox__box--sm').exists()).toBe(true)
+  })
 })

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

@@ -29,6 +29,38 @@ describe('ScheduleCalendar', () => {
     expect(event.attributes('style')).toContain('height: 120px')
   })
 
+  it('should write the status after the time when an event is pending', () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        dayStartHour: 6,
+        dayEndHour: 10,
+        showNowIndicator: false,
+        events: [
+          { id: 'm-1', title: 'MS maintenance', start: '2024-05-15T07:00:00', end: '2024-05-15T08:00:00', status: 'pending' },
+        ],
+      },
+    })
+
+    expect(wrapper.find('.mint-schedule__event-time').text()).toMatch(/ · Pending$/)
+  })
+
+  it('should leave the time unlabeled when an event is confirmed', () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        dayStartHour: 6,
+        dayEndHour: 10,
+        showNowIndicator: false,
+        events: [
+          { id: 'r-1', title: 'HPLC run', start: '2024-05-15T07:00:00', end: '2024-05-15T08:00:00', status: 'confirmed' },
+        ],
+      },
+    })
+
+    expect(wrapper.find('.mint-schedule__event-time').text()).not.toContain('·')
+  })
+
   it('renders the month grid from the extracted calendar layout', () => {
     const wrapper = mount(ScheduleCalendar, {
       props: {

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

@@ -0,0 +1,113 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import ScientificNumber from '../../components/ScientificNumber.vue'
+
+describe('ScientificNumber copy (4b)', () => {
+  const writeText = vi.fn().mockResolvedValue(undefined)
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    writeText.mockClear()
+  })
+
+  async function copy() {
+    const wrapper = mount(ScientificNumber, { props: { value: 6.022e23, copyable: true } })
+    await wrapper.find('.mint-sci-number__copy-btn').trigger('click')
+    await flushPromises()
+    return wrapper
+  }
+
+  it('should name the copy button when copyable', () => {
+    const wrapper = mount(ScientificNumber, { props: { value: 1, copyable: true } })
+    expect(wrapper.find('.mint-sci-number__copy-btn').attributes('aria-label')).toBe('Copy value')
+  })
+
+  it('should write the canonical value to the clipboard when the copy button is clicked', async () => {
+    await copy()
+    expect(writeText).toHaveBeenCalledWith('6.022e23')
+  })
+
+  it('should confirm the copied value in text when copy succeeds', async () => {
+    const wrapper = await copy()
+    expect(wrapper.find('.mint-sci-number__copied').text()).toBe('Copied 6.022e23')
+  })
+
+  it('should show the check icon when copy succeeds', async () => {
+    const wrapper = await copy()
+    expect(wrapper.find('.mint-sci-number__copy-btn--copied').exists()).toBe(true)
+  })
+
+  it('should drop the confirmation when 1.5s have passed', async () => {
+    const wrapper = await copy()
+    vi.advanceTimersByTime(1500)
+    await flushPromises()
+    expect(wrapper.find('.mint-sci-number__copied').exists()).toBe(false)
+  })
+})
+
+describe('ScientificNumber exponent (4b)', () => {
+  it('should carry the exponent digits in data-exponent when notation is scientific', () => {
+    const wrapper = mount(ScientificNumber, { props: { value: 6.022e23 } })
+    expect(wrapper.find('.mint-sci-number__exponent').attributes('data-exponent')).toBe('23')
+  })
+
+  it('should render a negative exponent with a true minus sign when the value is small', () => {
+    const wrapper = mount(ScientificNumber, { props: { value: 4.2e-4 } })
+    expect(wrapper.find('.mint-sci-number__exponent').attributes('data-exponent')).toBe('−4')
+  })
+
+  it('should carry a negative exponent with an ASCII hyphen in the hidden copy text when the value is small', () => {
+    const wrapper = mount(ScientificNumber, { props: { value: 6.6e-34 } })
+    expect(wrapper.find('.mint-sci-number__sr').text()).toBe('^-34')
+  })
+
+  it('should hide the raised exponent from assistive tech when notation is scientific', () => {
+    const wrapper = mount(ScientificNumber, { props: { value: 6.022e23 } })
+    expect(wrapper.find('.mint-sci-number__exponent').attributes('aria-hidden')).toBe('true')
+  })
+
+  it('should keep the raised exponent out of the text content when notation is scientific', () => {
+    const wrapper = mount(ScientificNumber, { props: { value: 6.022e23 } })
+    expect(wrapper.find('.mint-sci-number__exponent').text()).toBe('')
+  })
+
+  it('should read as an unambiguous power of ten when notation is scientific', () => {
+    const wrapper = mount(ScientificNumber, { props: { value: 6.022e23 } })
+    expect(wrapper.text()).toBe('6.022×10^23')
+  })
+})
+
+describe('ScientificNumber selection copy (4b)', () => {
+  afterEach(() => {
+    document.getSelection()?.removeAllRanges()
+    document.body.innerHTML = ''
+  })
+
+  function selectAndCopy(select: (root: HTMLElement) => Node) {
+    const wrapper = mount(ScientificNumber, {
+      props: { value: 6.022e23, unit: 'mol⁻¹' },
+      attachTo: document.body,
+    })
+    const range = document.createRange()
+    range.selectNodeContents(select(wrapper.element as HTMLElement))
+    document.getSelection()!.addRange(range)
+    const setData = vi.fn()
+    wrapper.trigger('copy', { clipboardData: { setData } })
+    return setData
+  }
+
+  it('should copy the canonical value when the selection lies inside the number', () => {
+    const setData = selectAndCopy(root => root)
+    expect(setData).toHaveBeenCalledWith('text/plain', '6.022e23 mol⁻¹')
+  })
+
+  it('should leave the clipboard to the browser when the selection extends past the number', () => {
+    const setData = selectAndCopy(root => root.parentElement!)
+    expect(setData).not.toHaveBeenCalled()
+  })
+})

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

@@ -58,4 +58,25 @@ describe('SearchableSelect', () => {
       outside.remove()
     }
   })
+
+  it('should render the panel on the shared popover surface when opened', async () => {
+    const wrapper = mount(SearchableSelect, { props: { 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' } })
+    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' } })
+    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/SecretInput.test.ts

@@ -84,4 +84,10 @@ describe('SecretInput', () => {
       wrapper.emitted('update:modelValue'),
     ]).toEqual(['Provided by environment', true, true, undefined])
   })
+
+  it('should mark the unset state with a hollow status dot class (10b)', () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: null } })
+
+    expect(wrapper.find('.mint-secret-input__badge--unset .mint-secret-input__dot').exists()).toBe(true)
+  })
 })

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

@@ -174,3 +174,17 @@ describe('SegmentedControl', () => {
     })
   })
 })
+
+describe('SegmentedControl option color (9b)', () => {
+  it('should render a swatch in the option color when the option has a color', () => {
+    const wrapper = mount(SegmentedControl, {
+      props: { modelValue: 'a', options: [{ value: 'a', label: 'Control', color: 'var(--mint-sample-2)' }] },
+    })
+    expect(wrapper.get('.mint-segmented-control__swatch').attributes('style')).toContain('var(--mint-sample-2)')
+  })
+
+  it('should render no swatch when the option has no color', () => {
+    const wrapper = mount(SegmentedControl, { props: { modelValue: 'a', options: ['a'] } })
+    expect(wrapper.find('.mint-segmented-control__swatch').exists()).toBe(false)
+  })
+})