@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.20

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

@@ -6,9 +6,21 @@ const retiredSelectors: Record<string, readonly string[]> = {
   'app-plugin-switcher.css': [
     'mint-plugin-switcher__swatch',
   ],
+  'audit-trail.css': [
+    'mint-audit-trail__empty',
+  ],
+  'dataframe.css': [
+    'mint-dataframe__empty',
+    'mint-dataframe__empty-icon',
+    'mint-dataframe__empty-text',
+    'mint-dataframe__loading-spinner',
+  ],
   'dose-calculator.css': [
     'mint-dose-calculator__mw-input',
   ],
+  'experiment-data-viewer.css': [
+    'mint-data-viewer__empty',
+  ],
   'experiment-popover.css': [
     'mint-experiment-popover__check-icon',
     'mint-experiment-popover__divider',
@@ -24,13 +36,31 @@ const retiredSelectors: Record<string, readonly string[]> = {
     'mint-experiment-selector__filters',
     'mint-experiment-selector__status-filter',
   ],
+  'experiment-timeline.css': [
+    'mint-timeline__empty',
+    'mint-timeline__empty-btn',
+    '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',
   ],
   'reagent-editor.css': [
     'mint-reagent-editor__row',
   ],
+  'reagent-list.css': [
+    'mint-reagent-list__empty',
+    'mint-reagent-list__empty-btn',
+    'mint-reagent-list__empty-icon',
+    'mint-reagent-list__empty-text',
+  ],
   'sample-hierarchy-tree.css': [
+    'mint-sample-tree__empty',
+    'mint-sample-tree__empty-icon',
+    'mint-sample-tree__empty-text',
     'mint-sample-tree__node--selected',
   ],
   'sample-selector.css': [
@@ -38,6 +68,7 @@ const retiredSelectors: Record<string, readonly string[]> = {
     'mint-popover-enter-from',
     'mint-popover-leave-active',
     'mint-popover-leave-to',
+    'mint-sample-selector__empty',
     'mint-sample-selector__level-badge',
     'mint-sample-selector__level-btn',
     'mint-sample-selector__level-desc',

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

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import { describe, expect, it } from 'vitest'
 import type { SampleGroup } from '../../types'
 import { useSampleSelectorDrag } from '../../components/SampleSelector.drag'
@@ -9,6 +9,10 @@ type TestDragEvent = Omit<DragEvent, 'dataTransfer'> & {
   defaultPrevented: boolean
 }
 
+function keyboardEvent(key: string, altKey = true): KeyboardEvent {
+  return { key, altKey, preventDefault: () => {} } as unknown as KeyboardEvent
+}
+
 function createDragEvent(options: { clientY?: number; top?: number; height?: number } = {}) {
   const data: Record<string, string> = {}
   const transfer = {
@@ -123,4 +127,50 @@ describe('SampleSelector drag helpers', () => {
 
     expect(drag.reorderTarget.value).toBe('Liver / High / 10min')
   })
+
+  it('reorders sibling groups with Alt and the arrow keys', async () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'Liver / High / 5min', color: '#111111', samples: ['L1'] },
+      { name: 'Liver / High / 10min', color: '#222222', samples: ['L2'] },
+      { name: 'Liver / High / 20min', color: '#333333', samples: ['L3'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+
+    drag.handleGroupReorderKeydown('Liver / High / 5min', 'sub', keyboardEvent('ArrowDown'))
+
+    expect(state.value.map(group => group.name)).toEqual([
+      'Liver / High / 10min',
+      'Liver / High / 5min',
+      'Liver / High / 20min',
+    ])
+
+    await nextTick()
+    expect(drag.announcement.value).toBe('Liver / High / 5min moved down to position 2 of 3.')
+  })
+
+  it('keeps a group inside its own family and ignores arrows without Alt', () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'Liver / High / 5min', color: '#111111', samples: ['L1'] },
+      { name: 'Muscle / High / 5min', color: '#222222', samples: ['M1'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+    const before = state.value
+
+    drag.handleGroupReorderKeydown('Liver / High / 5min', 'sub', keyboardEvent('ArrowDown'))
+    drag.handleGroupReorderKeydown('Liver / High / 5min', 'sub', keyboardEvent('ArrowDown', false))
+
+    expect(state.value).toBe(before)
+  })
+
+  it('reorders whole major families with Alt and the arrow keys', () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'Liver / High', color: '#111111', samples: ['L1'] },
+      { name: 'Muscle / High', color: '#222222', samples: ['M1'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+
+    drag.handleGroupReorderKeydown('Muscle', 'major', keyboardEvent('ArrowUp'))
+
+    expect(state.value.map(group => group.name)).toEqual(['Muscle / High', 'Liver / High'])
+  })
 })

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

@@ -41,4 +41,67 @@ describe('ScheduleCalendar', () => {
     expect(wrapper.findAll('.mint-schedule__month-cell')).toHaveLength(42)
     expect(wrapper.find('.mint-schedule__title').text()).toBe('May 2024')
   })
+
+  it('reschedules an event with Alt and the arrow keys', async () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        dayStartHour: 6,
+        dayEndHour: 10,
+        slotDuration: 30,
+        showNowIndicator: false,
+        events: [
+          {
+            id: 'run-1',
+            title: 'LCMS run',
+            start: '2024-05-15T07:00:00',
+            end: '2024-05-15T08:00:00',
+          },
+        ],
+      },
+    })
+
+    const event = wrapper.get('.mint-schedule__event')
+    expect(event.attributes('tabindex')).toBe('0')
+    expect(event.attributes('aria-label')).toContain('Press Alt with the up or down arrow keys')
+
+    await event.trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    const update = wrapper.emitted('event-update')?.[0]?.[0] as {
+      newStart: Date
+      newEnd: Date
+    }
+    expect(update.newStart.getHours()).toBe(7)
+    expect(update.newStart.getMinutes()).toBe(30)
+    expect(update.newEnd.getHours()).toBe(8)
+    expect(update.newEnd.getMinutes()).toBe(30)
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.get('[role="status"]').attributes('aria-live')).toBe('polite')
+  })
+
+  it('does not reschedule from the keyboard while readonly', async () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        dayStartHour: 6,
+        dayEndHour: 10,
+        slotDuration: 30,
+        showNowIndicator: false,
+        readonly: true,
+        events: [
+          {
+            id: 'run-1',
+            title: 'LCMS run',
+            start: '2024-05-15T07:00:00',
+            end: '2024-05-15T08:00:00',
+          },
+        ],
+      },
+    })
+
+    await wrapper.get('.mint-schedule__event').trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(wrapper.emitted('event-update')).toBeUndefined()
+  })
 })

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

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SecretInput from '../../components/SecretInput.vue'
+import {
+  isPluginSecretRef,
+  keepPluginSecret,
+  pluginSecretLabel,
+  pluginSecretState,
+} from '../../utils/pluginSecrets'
+
+const storedRef = { $secret: 'sec_0f2a4c6e8a0c2e4a6c8e0a2c4e6a8c0e', set: true }
+const lockedRef = { $secret: null, locked: true }
+
+describe('pluginSecrets helpers', () => {
+  it('should classify each marker the settings response can publish', () => {
+    expect([
+      pluginSecretState(storedRef),
+      pluginSecretState(null),
+      pluginSecretState(lockedRef),
+      pluginSecretLabel(storedRef),
+      pluginSecretLabel(null),
+      pluginSecretLabel(lockedRef),
+    ]).toEqual(['set', 'unset', 'environment', 'Set', 'Not set', 'Provided by environment'])
+  })
+
+  it('should only treat reserved marker shapes as references', () => {
+    expect([
+      isPluginSecretRef(storedRef),
+      isPluginSecretRef({ $mint: 'placeholder' }),
+      isPluginSecretRef({ $secret: 'x', label: 'not a marker' }),
+      isPluginSecretRef('plain-string'),
+      keepPluginSecret(storedRef),
+      keepPluginSecret('typed'),
+    ]).toEqual([true, false, false, false, { ...storedRef }, null])
+  })
+})
+
+describe('SecretInput', () => {
+  it('should show the stored state without exposing a value', () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: storedRef } })
+
+    expect([
+      wrapper.find('.mint-secret-input__badge').text(),
+      wrapper.find('input').exists(),
+    ]).toEqual(['Set', false])
+  })
+
+  it('should submit the typed string once the user enters a new value', async () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: storedRef } })
+
+    await wrapper.findAll('button')[0]!.trigger('click')
+    await wrapper.setProps({ modelValue: '' })
+    await wrapper.find('input').setValue('typed-secret')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[''], ['typed-secret']])
+  })
+
+  it('should submit null when the user clears a stored secret', async () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: storedRef } })
+
+    const clear = wrapper.findAll('button').at(-1)!
+    await clear.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[null]])
+  })
+
+  it('should restore the stored reference when an edit is cancelled', async () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: storedRef } })
+
+    await wrapper.findAll('button')[0]!.trigger('click')
+    await wrapper.setProps({ modelValue: 'partial' })
+    await wrapper.findAll('button')[0]!.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{ ...storedRef }])
+  })
+
+  it('should keep an environment-provided secret read-only', async () => {
+    const wrapper = mount(SecretInput, { props: { modelValue: lockedRef } })
+
+    expect([
+      wrapper.find('.mint-secret-input__badge').text(),
+      wrapper.find('.mint-secret-input__hint').exists(),
+      wrapper.findAll('button').every(button => button.attributes('disabled') !== undefined),
+      wrapper.emitted('update:modelValue'),
+    ]).toEqual(['Provided by environment', true, true, undefined])
+  })
+})

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

@@ -3,6 +3,25 @@ import { describe, expect, it } from 'vitest'
 import SegmentedControl from '../../components/SegmentedControl.vue'
 
 describe('SegmentedControl', () => {
+  it('defaults to card while allowing an explicit simple variant', async () => {
+    const wrapper = mount(SegmentedControl, {
+      props: {
+        modelValue: 'table',
+        options: [{ value: 'table', label: 'Table', description: 'View rows' }],
+      },
+    })
+
+    expect(wrapper.classes()).toContain('mint-segmented-control--card')
+    expect(wrapper.get('button').classes()).toContain('mint-segmented-control__option--card')
+    expect(wrapper.get('.mint-segmented-control__description').text()).toBe('View rows')
+
+    await wrapper.setProps({ variant: 'simple' })
+
+    expect(wrapper.classes()).toContain('mint-segmented-control--simple')
+    expect(wrapper.get('button').classes()).toContain('mint-segmented-control__option--simple')
+    expect(wrapper.find('.mint-segmented-control__description').exists()).toBe(false)
+  })
+
   it('accepts string and number shorthand options', async () => {
     const wrapper = mount(SegmentedControl, {
       props: {
@@ -66,4 +85,92 @@ describe('SegmentedControl', () => {
 
     expect(wrapper.emitted('update:modelValue')).toBeUndefined()
   })
+
+  describe('roving tabindex', () => {
+    const options = [
+      { value: 'table', label: 'Table' },
+      { value: 'chart', label: 'Chart' },
+      { value: 'raw', label: 'Raw' },
+    ]
+
+    it('makes only the checked option tabbable', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { modelValue: 'chart', options },
+      })
+
+      expect(wrapper.findAll('button').map(button => button.attributes('tabindex')))
+        .toEqual(['-1', '0', '-1'])
+    })
+
+    it('falls back to the first selectable option when nothing matches', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { modelValue: 'missing', options },
+      })
+
+      expect(wrapper.findAll('button').map(button => button.attributes('tabindex')))
+        .toEqual(['0', '-1', '-1'])
+    })
+
+    it('activates the adjacent option with the arrow keys, wrapping at the ends', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { modelValue: 'chart', options },
+        attachTo: document.body,
+      })
+
+      const buttons = wrapper.findAll('button')
+      await buttons[1].trigger('keydown', { key: 'ArrowRight' })
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['raw'])
+
+      await buttons[1].trigger('keydown', { key: 'ArrowLeft' })
+      expect(wrapper.emitted('update:modelValue')?.[1]).toEqual(['table'])
+
+      await wrapper.setProps({ modelValue: 'raw' })
+      await wrapper.findAll('button')[2].trigger('keydown', { key: 'ArrowRight' })
+      expect(wrapper.emitted('update:modelValue')?.[2]).toEqual(['table'])
+
+      wrapper.unmount()
+    })
+
+    it('jumps to the first and last option with Home and End', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { modelValue: 'chart', options },
+      })
+
+      const buttons = wrapper.findAll('button')
+      await buttons[1].trigger('keydown', { key: 'Home' })
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['table'])
+
+      await buttons[1].trigger('keydown', { key: 'End' })
+      expect(wrapper.emitted('update:modelValue')?.[1]).toEqual(['raw'])
+    })
+
+    it('skips disabled options during arrow navigation', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: {
+          modelValue: 'table',
+          options,
+          disabledValues: ['chart'],
+        },
+      })
+
+      await wrapper.findAll('button')[0].trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['raw'])
+    })
+
+    it('moves focus onto the newly activated option', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { modelValue: 'table', options },
+        attachTo: document.body,
+      })
+
+      await wrapper.findAll('button')[0].trigger('keydown', { key: 'ArrowRight' })
+      await wrapper.setProps({ modelValue: 'chart' })
+      await wrapper.vm.$nextTick()
+
+      expect(document.activeElement).toBe(wrapper.findAll('button')[1].element)
+
+      wrapper.unmount()
+    })
+  })
 })

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

@@ -35,4 +35,65 @@ describe('TimePicker', () => {
 
     wrapper.unmount()
   })
+
+  it('publishes the highlighted slot through aria-activedescendant', async () => {
+    const wrapper = mount(TimePicker, {
+      props: { modelValue: '14:30' },
+      attachTo: document.body,
+    })
+
+    const input = wrapper.get('input')
+    expect(input.attributes('aria-activedescendant')).toBeUndefined()
+
+    await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'ArrowDown' })
+    await wrapper.vm.$nextTick()
+
+    const listbox = wrapper.get('.mint-time-picker__list')
+    expect(input.attributes('aria-controls')).toBe(listbox.attributes('id'))
+
+    const activeId = input.attributes('aria-activedescendant')
+    expect(activeId).toBeDefined()
+    expect(wrapper.find(`#${activeId}`).exists()).toBe(true)
+
+    wrapper.unmount()
+  })
+
+  it('jumps to the first and last selectable slot with Home and End', async () => {
+    const wrapper = mount(TimePicker, {
+      props: { min: '09:00', max: '10:00', step: 30 },
+      attachTo: document.body,
+    })
+
+    const root = wrapper.get('.mint-time-picker')
+    await root.trigger('keydown', { key: 'ArrowDown' })
+    await root.trigger('keydown', { key: 'End' })
+    await wrapper.vm.$nextTick()
+
+    const slots = wrapper.findAll('.mint-time-picker__slot')
+    expect(slots.at(-1)?.classes()).toContain('mint-time-picker__slot--highlighted')
+
+    await root.trigger('keydown', { key: 'Home' })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.findAll('.mint-time-picker__slot')[0].classes())
+      .toContain('mint-time-picker__slot--highlighted')
+
+    wrapper.unmount()
+  })
+
+  it('returns focus to the input when Escape closes the list', async () => {
+    const wrapper = mount(TimePicker, { attachTo: document.body })
+    const input = wrapper.get<HTMLInputElement>('input').element
+
+    await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'ArrowDown' })
+    expect(wrapper.find('.mint-time-picker__dropdown').exists()).toBe(true)
+
+    await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'Escape' })
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.mint-time-picker__dropdown').exists()).toBe(false)
+    expect(document.activeElement).toBe(input)
+
+    wrapper.unmount()
+  })
 })

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

@@ -0,0 +1,108 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import WellEditPopupInternal from '../../components/internal/WellEditPopupInternal.vue'
+
+function mountPopup(attachTo?: HTMLElement) {
+  return mount(WellEditPopupInternal, {
+    props: {
+      wellId: 'A1',
+      position: { x: 10, y: 10 },
+    },
+    attachTo,
+    global: {
+      stubs: { teleport: true },
+    },
+  })
+}
+
+describe('WellEditPopupInternal focus trap', () => {
+  it('moves focus into the popup on mount', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const wrapper = mountPopup(host)
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.mint-well-edit-popup').element.contains(document.activeElement)).toBe(true)
+
+    wrapper.unmount()
+    host.remove()
+  })
+
+  it('restores focus to the previously focused element on unmount', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const trigger = document.createElement('button')
+    host.appendChild(trigger)
+    trigger.focus()
+    expect(document.activeElement).toBe(trigger)
+
+    const wrapper = mountPopup(host)
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+    expect(document.activeElement).not.toBe(trigger)
+
+    wrapper.unmount()
+    expect(document.activeElement).toBe(trigger)
+
+    host.remove()
+  })
+
+  it('wraps Tab from the last focusable element back to the first', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const wrapper = mountPopup(host)
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    const focusable = (wrapper.element as HTMLElement).querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    )
+    expect(focusable.length).toBeGreaterThan(1)
+    const last = focusable[focusable.length - 1]
+    const first = focusable[0]
+    last.focus()
+
+    const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true })
+    document.dispatchEvent(event)
+
+    expect(document.activeElement).toBe(first)
+
+    wrapper.unmount()
+    host.remove()
+  })
+
+  it('wraps Shift+Tab from the first focusable element back to the last', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const wrapper = mountPopup(host)
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    const focusable = (wrapper.element as HTMLElement).querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    )
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+    first.focus()
+
+    const event = new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true, cancelable: true })
+    document.dispatchEvent(event)
+
+    expect(document.activeElement).toBe(last)
+
+    wrapper.unmount()
+    host.remove()
+  })
+
+  it('closes on Escape', async () => {
+    const wrapper = mountPopup()
+    await wrapper.vm.$nextTick()
+
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
+    document.dispatchEvent(event)
+
+    expect(wrapper.emitted('close')).toHaveLength(1)
+    wrapper.unmount()
+  })
+})

package/src/__tests__/components/WellPlate.interaction.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import {
   nextClickedWellSelection,
   useWellPlateInteraction,
@@ -41,6 +42,14 @@ function dragEvent(data: Record<string, string> = {}): DragEvent {
   } as unknown as DragEvent
 }
 
+function keyEvent(key: string, altKey = true): KeyboardEvent {
+  return {
+    key,
+    altKey,
+    preventDefault: vi.fn(),
+  } as unknown as KeyboardEvent
+}
+
 function createInteraction(overrides: Partial<Parameters<typeof useWellPlateInteraction>[0]> = {}) {
   const emitted: Record<string, unknown[]> = {}
   const selected = { value: [] as string[] }
@@ -168,4 +177,54 @@ describe('WellPlate interaction helpers', () => {
       ['A1', 'A2', 'B1', 'B2'],
     ])
   })
+
+  it('moves a well with the keyboard pick-up/drop chord in drag mode', async () => {
+    const { emitted, interaction, selectionMode } = createInteraction()
+    selectionMode.value = 'drag'
+    const source = well({ id: 'A1', row: 0, col: 0, sampleType: 'sample' })
+    const target = well({ id: 'B2', row: 1, col: 1 })
+
+    interaction.handleWellMoveKeydown(source, keyEvent('Enter'))
+    expect(interaction.dragSourceWell.value).toBe('A1')
+
+    interaction.handleWellMoveKeydown(target, keyEvent('Enter'))
+
+    expect(emitted.move).toEqual([['A1', 'B2']])
+    expect(interaction.dragSourceWell.value).toBeNull()
+
+    await nextTick()
+    expect(interaction.moveAnnouncement.value).toBe('Well A1 moved to B2.')
+  })
+
+  it('cancels a keyboard pick-up with Escape and refuses empty wells', () => {
+    const { emitted, interaction, selectionMode } = createInteraction()
+    selectionMode.value = 'drag'
+
+    interaction.handleWellMoveKeydown(well({ id: 'A2', row: 0, col: 1 }), keyEvent('Enter'))
+    expect(interaction.dragSourceWell.value).toBeNull()
+
+    interaction.handleWellMoveKeydown(
+      well({ id: 'A1', row: 0, col: 0, sampleType: 'sample' }),
+      keyEvent('Enter'),
+    )
+    expect(interaction.dragSourceWell.value).toBe('A1')
+
+    interaction.handleWellMoveKeydown(
+      well({ id: 'A1', row: 0, col: 0, sampleType: 'sample' }),
+      keyEvent('Escape', false),
+    )
+    expect(interaction.dragSourceWell.value).toBeNull()
+    expect(emitted.move).toBeUndefined()
+  })
+
+  it('ignores the move chord outside drag selection mode', () => {
+    const { interaction } = createInteraction()
+
+    interaction.handleWellMoveKeydown(
+      well({ id: 'A1', row: 0, col: 0, sampleType: 'sample' }),
+      keyEvent('Enter'),
+    )
+
+    expect(interaction.dragSourceWell.value).toBeNull()
+  })
 })

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

@@ -0,0 +1,18 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+// jsdom has no layout, so this pins the stylesheet contract instead: a bare
+// <svg> passed to IconButton's slot must be sized by the icon box, otherwise it
+// collapses to zero width as a flex item (FilePicker source toggles, beta.14).
+describe('IconButton icon sizing', () => {
+  it('should size a bare slot 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*\}/,
+    )
+  })
+})