@morscherlab/mint-sdk 1.2.0-beta.7 → 1.2.0-beta.9

package/dist/utils/color.d.ts

@@ -1,3 +1,16 @@
+import { SlotPosition } from '../types/componentLabTypes';
+/**
+ * Canonical categorical scale for sample types, plate maps, dose-response
+ * series and legends. Mirrors `--mint-sample-1` … `--mint-sample-9`.
+ */
+export declare const SAMPLE_COLOR_SCALE: readonly string[];
+/**
+ * Slot-position colors shared by `PlateMapEditor` and `RackEditor`.
+ * Mirrors `--mint-slot-r`, `--mint-slot-g`, `--mint-slot-b`, `--mint-slot-y`.
+ */
+export declare const SLOT_COLORS: Record<SlotPosition, string>;
+/** Slot positions in their canonical display order. */
+export declare const SLOT_ORDER: readonly SlotPosition[];
 /**
  * Color utilities for deriving same-hue-family shades.
  *

package/dist/utils/errors.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The one place a thrown value is turned into a developer-facing message.
+ *
+ * Five copies of this logic drifted apart across the composables and stores
+ * (some checked a bare `{ message }` object, some did not); this export is the
+ * union of what they all accepted, so every caller now reads the same message
+ * from the same value.
+ */
+export declare function readErrorMessage(value: unknown, fallback?: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.2.0-beta.7",
+  "version": "1.2.0-beta.9",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -102,6 +102,100 @@ describe('ActionMenu', () => {
     expect(document.body.querySelector('.mint-action-menu__panel')).toBeNull()
   })
 
+  it('should open from the trigger keyboard shortcuts and focus the first item', async () => {
+    const wrapper = mount(ActionMenu, {
+      attachTo: document.body,
+      props: { label: 'More user actions', items },
+    })
+
+    await wrapper.get('button').trigger('keydown', { key: 'ArrowDown' })
+    await wrapper.vm.$nextTick()
+
+    const menuItems = document.body.querySelectorAll<HTMLElement>('.mint-action-menu__item')
+    expect(menuItems).toHaveLength(2)
+    expect(document.activeElement).toBe(menuItems[0])
+  })
+
+  it('should open focused on the last item with ArrowUp', async () => {
+    const wrapper = mount(ActionMenu, {
+      attachTo: document.body,
+      props: { label: 'More user actions', items },
+    })
+
+    await wrapper.get('button').trigger('keydown', { key: 'ArrowUp' })
+    await wrapper.vm.$nextTick()
+
+    const menuItems = document.body.querySelectorAll<HTMLElement>('.mint-action-menu__item')
+    expect(document.activeElement).toBe(menuItems[1])
+  })
+
+  it('should cycle items with the arrow keys and jump with Home/End', async () => {
+    const wrapper = mount(ActionMenu, {
+      attachTo: document.body,
+      props: { label: 'More user actions', items },
+    })
+    await wrapper.get('button').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    const panel = document.body.querySelector<HTMLElement>('.mint-action-menu__panel')
+    const menuItems = document.body.querySelectorAll<HTMLElement>('.mint-action-menu__item')
+
+    function press(key: string) {
+      panel?.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }))
+    }
+
+    press('ArrowDown')
+    expect(document.activeElement).toBe(menuItems[1])
+    press('ArrowDown')
+    expect(document.activeElement).toBe(menuItems[0])
+    press('End')
+    expect(document.activeElement).toBe(menuItems[1])
+    press('Home')
+    expect(document.activeElement).toBe(menuItems[0])
+  })
+
+  it('should close on Tab without forcing focus back to the trigger', async () => {
+    const wrapper = mount(ActionMenu, {
+      attachTo: document.body,
+      props: { label: 'More user actions', items },
+    })
+    await wrapper.get('button').trigger('click')
+
+    document.body.querySelector<HTMLElement>('.mint-action-menu__panel')?.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }),
+    )
+    await wrapper.vm.$nextTick()
+
+    expect(document.body.querySelector('.mint-action-menu__panel')).toBeNull()
+    expect(document.activeElement).not.toBe(wrapper.get('button').element)
+  })
+
+  it('should not open from the keyboard while disabled', async () => {
+    const wrapper = mount(ActionMenu, {
+      attachTo: document.body,
+      props: { label: 'More user actions', items, disabled: true },
+    })
+
+    await wrapper.get('button').trigger('keydown', { key: 'ArrowDown' })
+    await wrapper.vm.$nextTick()
+
+    expect(document.body.querySelector('.mint-action-menu__panel')).toBeNull()
+  })
+
+  it('should close when a click lands outside the trigger and panel', async () => {
+    const wrapper = mount(ActionMenu, {
+      attachTo: document.body,
+      props: { label: 'More user actions', items },
+    })
+    await wrapper.get('button').trigger('click')
+    expect(document.body.querySelector('.mint-action-menu__panel')).not.toBeNull()
+
+    document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await wrapper.vm.$nextTick()
+
+    expect(document.body.querySelector('.mint-action-menu__panel')).toBeNull()
+  })
+
   it('should return focus to the trigger when Escape closes the menu', async () => {
     const wrapper = mount(ActionMenu, {
       attachTo: document.body,

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

@@ -1,6 +1,8 @@
-import { describe, it, expect } from 'vitest'
+import { afterEach, describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
 import DataFrame from '../../components/DataFrame.vue'
+import { useSettingsStore } from '../../stores/settings'
 import type { DataFrameColumn, SortState, PaginationState } from '../../types'
 
 describe('DataFrame', () => {
@@ -167,7 +169,7 @@ describe('DataFrame', () => {
         props: { data: mockData, columns: sortableColumns },
       })
       const nameHeader = wrapper.findAll('.mint-dataframe__th')[0]
-      await nameHeader.trigger('click')
+      await nameHeader.get('.mint-dataframe__th-button').trigger('click')
 
       expect(wrapper.emitted('update:sort')).toHaveLength(1)
       const sortState = wrapper.emitted('update:sort')?.[0]?.[0] as SortState
@@ -184,7 +186,7 @@ describe('DataFrame', () => {
         },
       })
       const nameHeader = wrapper.findAll('.mint-dataframe__th')[0]
-      await nameHeader.trigger('click')
+      await nameHeader.get('.mint-dataframe__th-button').trigger('click')
 
       const sortState = wrapper.emitted('update:sort')?.[0]?.[0] as SortState
       expect(sortState.direction).toBe('desc')
@@ -199,7 +201,7 @@ describe('DataFrame', () => {
         },
       })
       const nameHeader = wrapper.findAll('.mint-dataframe__th')[0]
-      await nameHeader.trigger('click')
+      await nameHeader.get('.mint-dataframe__th-button').trigger('click')
 
       const sortState = wrapper.emitted('update:sort')?.[0]?.[0]
       expect(sortState).toBeNull()
@@ -210,7 +212,7 @@ describe('DataFrame', () => {
         props: { data: mockData, columns: sortableColumns },
       })
       const nameHeader = wrapper.findAll('.mint-dataframe__th')[0]
-      await nameHeader.trigger('click')
+      await nameHeader.get('.mint-dataframe__th-button').trigger('click')
 
       // After sorting, first row should have name starting with 'A'
       const firstRow = wrapper.findAll('.mint-dataframe__row')[0]
@@ -223,7 +225,7 @@ describe('DataFrame', () => {
         props: { data: mockData, columns: sortableColumns },
       })
       const ageHeader = wrapper.findAll('.mint-dataframe__th')[1]
-      await ageHeader.trigger('click')
+      await ageHeader.get('.mint-dataframe__th-button').trigger('click')
 
       // After sorting ascending, first row should have age 25
       const firstRow = wrapper.findAll('.mint-dataframe__row')[0]
@@ -553,28 +555,38 @@ describe('DataFrame', () => {
       const wrapper = mount(DataFrame, {
         props: { data: [], columns: mockColumns },
       })
-      expect(wrapper.find('.mint-dataframe__empty').exists()).toBe(true)
+      expect(wrapper.find('.mint-dataframe__state').exists()).toBe(true)
+      expect(wrapper.find('[data-state="empty"]').exists()).toBe(true)
     })
 
     it('should display empty text', () => {
       const wrapper = mount(DataFrame, {
         props: { data: [], columns: mockColumns },
       })
-      expect(wrapper.find('.mint-dataframe__empty-text').text()).toBe('No data')
+      expect(wrapper.find('.mint-empty-state__title').text()).toBe('No data')
     })
 
     it('should use custom empty text', () => {
       const wrapper = mount(DataFrame, {
         props: { data: [], columns: mockColumns, emptyText: 'No records found' },
       })
-      expect(wrapper.find('.mint-dataframe__empty-text').text()).toBe('No records found')
+      expect(wrapper.find('.mint-empty-state__title').text()).toBe('No records found')
     })
 
     it('should not show empty state when loading', () => {
       const wrapper = mount(DataFrame, {
         props: { data: [], columns: mockColumns, loading: true },
       })
-      expect(wrapper.find('.mint-dataframe__empty').exists()).toBe(false)
+      expect(wrapper.find('[data-state="empty"]').exists()).toBe(false)
+    })
+
+    it('should render the empty slot instead of the default placeholder', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: [], columns: mockColumns },
+        slots: { empty: '<p class="custom-empty">Nothing here</p>' },
+      })
+      expect(wrapper.find('.custom-empty').exists()).toBe(true)
+      expect(wrapper.find('[data-state="empty"]').exists()).toBe(false)
     })
   })
 
@@ -590,7 +602,40 @@ describe('DataFrame', () => {
       const wrapper = mount(DataFrame, {
         props: { data: mockData, columns: mockColumns, loading: true },
       })
-      expect(wrapper.find('.mint-dataframe__loading-spinner').exists()).toBe(true)
+      expect(wrapper.find('.mint-spinner').exists()).toBe(true)
+    })
+  })
+
+  describe('error state', () => {
+    it('should render nothing extra when error is not passed', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns },
+      })
+      expect(wrapper.find('[data-state="error"]').exists()).toBe(false)
+    })
+
+    it('should replace the empty state with an error state', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: [], columns: mockColumns, error: 'Request failed' },
+      })
+      expect(wrapper.find('[data-state="error"]').exists()).toBe(true)
+      expect(wrapper.find('[data-state="empty"]').exists()).toBe(false)
+      expect(wrapper.find('.mint-empty-state__title').text()).toBe('Request failed')
+    })
+
+    it('should take precedence over the empty state even with rows present', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, error: 'Boom' },
+      })
+      expect(wrapper.find('[data-state="error"]').exists()).toBe(true)
+    })
+
+    it('should render the error slot with the message', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: [], columns: mockColumns, error: 'Boom' },
+        slots: { error: '<p class="custom-error">custom error</p>' },
+      })
+      expect(wrapper.find('.custom-error').exists()).toBe(true)
     })
   })
 
@@ -911,5 +956,132 @@ describe('DataFrame', () => {
       await wrapper.find('.mint-dataframe__resize-handle').trigger('click')
       expect(wrapper.emitted('update:sort')).toBeUndefined()
     })
+
+    it('should expose the resize handle as a slider with its current width', () => {
+      const wrapper = mount(DataFrame, {
+        props: {
+          data: mockData,
+          columns: [{ key: 'name', label: 'Name', minWidth: 80 }],
+          resizable: true,
+          columnWidths: { name: 240 },
+        },
+      })
+
+      const handle = wrapper.get('.mint-dataframe__resize-handle')
+      expect(handle.attributes('role')).toBe('slider')
+      expect(handle.attributes('tabindex')).toBe('0')
+      expect(handle.attributes('aria-label')).toBe('Resize Name column')
+      expect(handle.attributes('aria-valuenow')).toBe('240')
+      expect(handle.attributes('aria-valuemin')).toBe('80')
+    })
+
+    it('should resize a column with the arrow keys, clamped to the minimum width', async () => {
+      const wrapper = mount(DataFrame, {
+        props: {
+          data: mockData,
+          columns: [{ key: 'name', label: 'Name' }],
+          resizable: true,
+          columnWidths: { name: 120 },
+        },
+      })
+
+      const handle = wrapper.get('.mint-dataframe__resize-handle')
+      await handle.trigger('keydown', { key: 'ArrowRight' })
+      expect(wrapper.emitted('update:columnWidths')?.[0]).toEqual([{ name: 136 }])
+
+      await handle.trigger('keydown', { key: 'ArrowLeft' })
+      expect(wrapper.emitted('update:columnWidths')?.[1]).toEqual([{ name: 104 }])
+
+      await wrapper.setProps({ columnWidths: { name: 50 } })
+      await handle.trigger('keydown', { key: 'ArrowLeft' })
+      expect(wrapper.emitted('update:columnWidths')?.[2]).toEqual([{ name: 48 }])
+    })
+  })
+
+  describe('sortable header accessibility', () => {
+    const sortableColumn = [{ key: 'name', label: 'Name', sortable: true }]
+
+    it('should render sortable headers as buttons and plain headers without one', () => {
+      const wrapper = mount(DataFrame, {
+        props: {
+          data: mockData,
+          columns: [...sortableColumn, { key: 'age', label: 'Age' }],
+        },
+      })
+
+      const headers = wrapper.findAll('.mint-dataframe__th')
+      expect(headers[0].get('.mint-dataframe__th-button').element.tagName).toBe('BUTTON')
+      expect(headers[1].get('.mint-dataframe__th-button').element.tagName).toBe('DIV')
+    })
+
+    it('should reflect the sort direction with aria-sort', async () => {
+      const wrapper = mount(DataFrame, {
+        props: {
+          data: mockData,
+          columns: [...sortableColumn, { key: 'age', label: 'Age' }],
+        },
+      })
+
+      const nameHeader = () => wrapper.findAll('.mint-dataframe__th')[0]
+      expect(nameHeader().attributes('aria-sort')).toBe('none')
+      expect(wrapper.findAll('.mint-dataframe__th')[1].attributes('aria-sort')).toBeUndefined()
+
+      await nameHeader().get('.mint-dataframe__th-button').trigger('click')
+      expect(nameHeader().attributes('aria-sort')).toBe('ascending')
+
+      await nameHeader().get('.mint-dataframe__th-button').trigger('click')
+      expect(nameHeader().attributes('aria-sort')).toBe('descending')
+
+      await nameHeader().get('.mint-dataframe__th-button').trigger('click')
+      expect(nameHeader().attributes('aria-sort')).toBe('none')
+    })
+
+    it('should sort from the keyboard with Enter and Space', async () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: sortableColumn },
+      })
+
+      const button = wrapper.get('.mint-dataframe__th-button')
+      await button.trigger('keydown', { key: 'Enter' })
+      expect(wrapper.emitted('update:sort')?.[0]?.[0]).toEqual({ key: 'name', direction: 'asc' })
+
+      await button.trigger('keydown', { key: ' ' })
+      expect(wrapper.emitted('update:sort')?.[1]?.[0]).toEqual({ key: 'name', direction: 'desc' })
+    })
+  })
+
+  describe('table density default', () => {
+    afterEach(() => {
+      setActivePinia(undefined)
+    })
+
+    it('falls back to md when no settings store is installed', () => {
+      setActivePinia(undefined)
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns },
+      })
+      expect(wrapper.find('.mint-dataframe__td--md').exists()).toBe(true)
+    })
+
+    it('follows the tableDensity setting when size is not passed', () => {
+      setActivePinia(createPinia())
+      useSettingsStore().tableDensity = 'compact'
+
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns },
+      })
+      expect(wrapper.find('.mint-dataframe__td--sm').exists()).toBe(true)
+      expect(wrapper.find('.mint-dataframe__td--md').exists()).toBe(false)
+    })
+
+    it('lets an explicit size prop win over the density setting', () => {
+      setActivePinia(createPinia())
+      useSettingsStore().tableDensity = 'compact'
+
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, size: 'lg' },
+      })
+      expect(wrapper.find('.mint-dataframe__td--lg').exists()).toBe(true)
+    })
   })
 })

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

@@ -0,0 +1,176 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AuditTrail from '../../components/AuditTrail.vue'
+import BatchProgressList from '../../components/BatchProgressList.vue'
+import ExperimentTimeline from '../../components/ExperimentTimeline.vue'
+import LcmsSequenceTable from '../../components/LcmsSequenceTable.vue'
+import ReagentList from '../../components/ReagentList.vue'
+import SampleHierarchyTree from '../../components/SampleHierarchyTree.vue'
+import ScheduleCalendar from '../../components/ScheduleCalendar.vue'
+import WellPlate from '../../components/WellPlate.vue'
+
+/**
+ * The `loading` / `error` props and the `#empty` / `#error` / `#loading` slots
+ * are one contract shared by the data components, so they are asserted in one
+ * place. Each entry pairs a component with the props that leave it empty and a
+ * selector that only its populated rendering produces.
+ */
+const cases = [
+  {
+    name: 'AuditTrail',
+    component: AuditTrail,
+    emptyProps: { entries: [] },
+    filledProps: {
+      entries: [{ id: 'a', type: 'created', action: 'Created', timestamp: '2026-01-01T00:00:00Z' }],
+    },
+    contentSelector: '.mint-audit-trail__list',
+  },
+  {
+    name: 'BatchProgressList',
+    component: BatchProgressList,
+    emptyProps: { items: [] },
+    filledProps: { items: [{ id: '1', label: 'One', status: 'pending' }] },
+    contentSelector: '.mint-batch-progress__list',
+  },
+  {
+    name: 'ExperimentTimeline',
+    component: ExperimentTimeline,
+    emptyProps: { modelValue: [] },
+    filledProps: { modelValue: [{ id: 's1', name: 'Step 1', order: 1, type: 'incubation' }] },
+    contentSelector: '.mint-timeline__step',
+  },
+  {
+    name: 'LcmsSequenceTable',
+    component: LcmsSequenceTable,
+    emptyProps: { items: [] },
+    filledProps: {
+      items: [{
+        file_name: 'a.raw',
+        position: 'A1',
+        sample_type: 'Unknown',
+        instrument_method: 'm',
+        injection_volume: 1,
+      }],
+    },
+    contentSelector: '.mint-lcms-sequence-table__scroller',
+  },
+  {
+    name: 'ReagentList',
+    component: ReagentList,
+    emptyProps: { modelValue: [] },
+    filledProps: { modelValue: [{ id: 'r1', name: 'Water' }] },
+    contentSelector: '.mint-reagent-list__table',
+  },
+  {
+    name: 'SampleHierarchyTree',
+    component: SampleHierarchyTree,
+    emptyProps: { nodes: [] },
+    filledProps: { nodes: [{ id: 'n1', label: 'Study', type: 'study' }] },
+    contentSelector: '.mint-sample-tree__node',
+  },
+] as const
+
+describe('shared data component states', () => {
+  describe.each(cases)('$name', ({ component, emptyProps, filledProps, contentSelector }) => {
+    it('renders its content when neither loading nor error is passed', () => {
+      const wrapper = mount(component, { props: { ...filledProps } as never })
+
+      expect(wrapper.find(contentSelector).exists()).toBe(true)
+      expect(wrapper.find('[data-state]').exists()).toBe(false)
+    })
+
+    it('renders an empty state instead of content when there is nothing to show', () => {
+      const wrapper = mount(component, { props: { ...emptyProps } as never })
+
+      expect(wrapper.find('[data-state="empty"]').exists()).toBe(true)
+      expect(wrapper.find(contentSelector).exists()).toBe(false)
+    })
+
+    it('renders a loading state that replaces the content', () => {
+      const wrapper = mount(component, { props: { ...filledProps, loading: true } as never })
+
+      expect(wrapper.find('[data-state="loading"]').exists()).toBe(true)
+      expect(wrapper.find('.mint-spinner').exists()).toBe(true)
+      expect(wrapper.find(contentSelector).exists()).toBe(false)
+    })
+
+    it('renders an error state that wins over content and loading', () => {
+      const wrapper = mount(component, {
+        props: { ...filledProps, loading: true, error: 'Request failed' } as never,
+      })
+
+      expect(wrapper.find('[data-state="error"]').exists()).toBe(true)
+      expect(wrapper.find('[data-state="loading"]').exists()).toBe(false)
+      expect(wrapper.find('.mint-empty-state__title').text()).toBe('Request failed')
+      expect(wrapper.find(contentSelector).exists()).toBe(false)
+    })
+
+    it('lets the empty slot replace the default placeholder', () => {
+      const wrapper = mount(component, {
+        props: { ...emptyProps } as never,
+        slots: { empty: '<p class="slot-empty">custom</p>' },
+      })
+
+      expect(wrapper.find('.slot-empty').exists()).toBe(true)
+      expect(wrapper.find('[data-state="empty"]').exists()).toBe(false)
+    })
+
+    it('lets the error slot replace the default placeholder', () => {
+      const wrapper = mount(component, {
+        props: { ...filledProps, error: 'Boom' } as never,
+        slots: { error: '<p class="slot-error">custom</p>' },
+      })
+
+      expect(wrapper.find('.slot-error').exists()).toBe(true)
+      expect(wrapper.find('[data-state="error"]').exists()).toBe(false)
+    })
+  })
+
+  describe('opt-in empty states', () => {
+    it('keeps the WellPlate grid when no emptyMessage is given', () => {
+      const wrapper = mount(WellPlate, { props: { wells: {} } })
+
+      expect(wrapper.find('.mint-well-plate__scroll').exists()).toBe(true)
+      expect(wrapper.find('[data-state]').exists()).toBe(false)
+    })
+
+    it('replaces the WellPlate grid once an emptyMessage is given', () => {
+      const wrapper = mount(WellPlate, {
+        props: { wells: {}, emptyMessage: 'No plate loaded' },
+      })
+
+      expect(wrapper.find('[data-state="empty"]').exists()).toBe(true)
+      expect(wrapper.find('.mint-well-plate__scroll').exists()).toBe(false)
+    })
+
+    it('replaces the WellPlate grid on error', () => {
+      const wrapper = mount(WellPlate, { props: { error: 'Boom' } })
+
+      expect(wrapper.find('[data-state="error"]').exists()).toBe(true)
+      expect(wrapper.find('.mint-well-plate__scroll').exists()).toBe(false)
+    })
+
+    it('keeps the ScheduleCalendar grid when no emptyMessage is given', () => {
+      const wrapper = mount(ScheduleCalendar, { props: { events: [] } })
+
+      expect(wrapper.find('.mint-schedule__body').exists()).toBe(true)
+      expect(wrapper.find('[data-state]').exists()).toBe(false)
+    })
+
+    it('replaces the ScheduleCalendar grid once an emptyMessage is given', () => {
+      const wrapper = mount(ScheduleCalendar, {
+        props: { events: [], emptyMessage: 'Nothing scheduled' },
+      })
+
+      expect(wrapper.find('[data-state="empty"]').exists()).toBe(true)
+      expect(wrapper.find('.mint-schedule__body').exists()).toBe(false)
+    })
+
+    it('replaces the ScheduleCalendar grid while loading', () => {
+      const wrapper = mount(ScheduleCalendar, { props: { loading: true } })
+
+      expect(wrapper.find('[data-state="loading"]').exists()).toBe(true)
+      expect(wrapper.find('.mint-schedule__body').exists()).toBe(false)
+    })
+  })
+})

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

@@ -42,4 +42,80 @@ describe('DatePicker', () => {
 
     wrapper.unmount()
   })
+
+  it('opens from the input with Enter, Space and ArrowDown', async () => {
+    const wrapper = mount(DatePicker, { attachTo: document.body })
+
+    for (const key of ['Enter', ' ', 'ArrowDown']) {
+      await wrapper.get('input').trigger('keydown', { key })
+      expect(dropdown()).not.toBeNull()
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      await nextTick()
+      expect(dropdown()).toBeNull()
+    }
+
+    wrapper.unmount()
+  })
+
+  it('moves focus into the calendar grid and back to the input on close', async () => {
+    const wrapper = mount(DatePicker, {
+      props: { modelValue: '2026-04-22' },
+      attachTo: document.body,
+    })
+    const input = wrapper.get<HTMLInputElement>('input').element
+
+    await wrapper.get('input').trigger('click')
+    await nextTick()
+    await nextTick()
+    await nextTick()
+
+    expect(document.activeElement).toBe(
+      document.body.querySelector('.mint-date-picker__day--selected'),
+    )
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    await nextTick()
+
+    expect(document.activeElement).toBe(input)
+
+    wrapper.unmount()
+  })
+
+  it('marks the panel as a non-modal dialog', async () => {
+    const wrapper = mount(DatePicker, { attachTo: document.body })
+
+    await wrapper.get('input').trigger('click')
+
+    const panel = dropdown()
+    expect(panel?.getAttribute('role')).toBe('dialog')
+    expect(panel?.hasAttribute('aria-modal')).toBe(false)
+    expect(wrapper.get('input').attributes('aria-haspopup')).toBe('dialog')
+    expect(wrapper.get('input').attributes('aria-expanded')).toBe('true')
+
+    wrapper.unmount()
+  })
+
+  it('keeps the panel open while the page scrolls, repositioning instead', async () => {
+    const wrapper = mount(DatePicker, { attachTo: document.body })
+
+    await wrapper.get('input').trigger('click')
+    window.dispatchEvent(new Event('scroll'))
+    await nextTick()
+
+    expect(dropdown()).not.toBeNull()
+
+    wrapper.unmount()
+  })
+
+  it('does not open from the keyboard while disabled', async () => {
+    const wrapper = mount(DatePicker, { props: { disabled: true }, attachTo: document.body })
+
+    await wrapper.get('input').trigger('keydown', { key: 'Enter' })
+
+    expect(dropdown()).toBeNull()
+
+    wrapper.unmount()
+  })
 })