@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.10

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/dist/utils/pluginSecrets.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Stable references for plugin secret settings.
+ *
+ * A settings response never carries a secret's value. Every secret leaf is a
+ * marker instead:
+ *
+ * - `{ "$secret": "sec_…", "set": true }` — a stored secret, referenced by a
+ *   stable opaque id. Send the marker back unchanged to keep the stored value.
+ * - `null` — nothing stored at that position.
+ * - `{ "$secret": null, "locked": true }` — the effective value comes from the
+ *   environment and is never written back.
+ *
+ * On save each secret leaf accepts the reference, a plain string (a new value),
+ * or `null` (clear). Payloads carry `secret_format: "ref"` so a `null` reads as
+ * a deliberate clear rather than the deprecated "unchanged" placeholder.
+ */
+/** Reserved marker key that references a stored secret. */
+export declare const PLUGIN_SECRET_REF_KEY = "$secret";
+/** Reserved payload key declaring which secret wire format a client speaks. */
+export declare const PLUGIN_SECRET_FORMAT_KEY = "secret_format";
+/** Wire format published and understood by this SDK. */
+export declare const PLUGIN_SECRET_FORMAT_REF = "ref";
+/** One `$secret` marker as published by a settings response. */
+export interface PluginSecretRef {
+    $secret: string | null;
+    set?: boolean;
+    locked?: boolean;
+}
+/** What a settings form should tell the user about one secret field. */
+export type PluginSecretState = 'set' | 'unset' | 'environment';
+/** Return whether one settings value is a `$secret` reference marker. */
+export declare function isPluginSecretRef(value: unknown): value is PluginSecretRef;
+/** Return the stored secret id behind a marker, or `null` when nothing is stored. */
+export declare function pluginSecretId(value: unknown): string | null;
+/** Classify one secret field for display: stored, unset, or environment-provided. */
+export declare function pluginSecretState(value: unknown): PluginSecretState;
+/** Human label for one secret field's state. */
+export declare function pluginSecretLabel(value: unknown): string;
+/** Whether a secret field is read-only because the environment supplies it. */
+export declare function isPluginSecretLocked(value: unknown): boolean;
+/**
+ * Value to submit for an untouched secret field: the reference, unchanged.
+ *
+ * A locked marker round-trips too, which is how the platform keeps a stored
+ * value that an environment variable currently hides.
+ */
+export declare function keepPluginSecret(current: unknown): PluginSecretRef | null;
+/** Value to submit when the user typed a new secret. */
+export declare function setPluginSecret(value: string): string;
+/** Value to submit when the user cleared a secret. */
+export declare function clearPluginSecret(): null;
+/** Whether a settings response declares the `$secret` reference wire format. */
+export declare function usesPluginSecretReferences(response: unknown): boolean;

package/dist/utils/records.d.ts

@@ -0,0 +1,4 @@
+/** Narrow an unknown value to a plain object (arrays and null excluded). */
+export declare function isRecord(value: unknown): value is Record<string, unknown>;
+/** Narrow an unknown value to any non-null object, arrays included. */
+export declare function isObjectLike(value: unknown): value is Record<string, unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0-beta.10",
   "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/AppAvatarMenu.test.ts

@@ -35,4 +35,127 @@ describe('AppAvatarMenu', () => {
     expect(wrapper.emitted('select')).toEqual([[docs]])
     expect(wrapper.find('.mint-avatar-menu__panel').exists()).toBe(false)
   })
+
+  describe('keyboard handling (menu button pattern)', () => {
+    const items = [{ id: 'profile', label: 'Profile' }, { id: 'settings', label: 'Settings' }]
+
+    function mountMenu() {
+      return mount(AppAvatarMenu, {
+        props: { userName: 'Ada Lovelace', items, showSignOut: true },
+        attachTo: document.body,
+      })
+    }
+
+    it('sets aria-expanded on the trigger and toggles it open/closed', async () => {
+      const wrapper = mountMenu()
+      const trigger = wrapper.get('.mint-avatar-menu__trigger')
+      expect(trigger.attributes('aria-expanded')).toBe('false')
+
+      await trigger.trigger('click')
+      expect(trigger.attributes('aria-expanded')).toBe('true')
+
+      wrapper.unmount()
+    })
+
+    it('opens and focuses the first item on ArrowDown', async () => {
+      const wrapper = mountMenu()
+      await wrapper.get('.mint-avatar-menu__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('.mint-avatar-menu__panel').exists()).toBe(true)
+      expect(document.activeElement).toBe(wrapper.findAll('[role="menuitem"]')[0].element)
+
+      wrapper.unmount()
+    })
+
+    it('opens and focuses the last item on ArrowUp', async () => {
+      const wrapper = mountMenu()
+      await wrapper.get('.mint-avatar-menu__trigger').trigger('keydown', { key: 'ArrowUp' })
+      await wrapper.vm.$nextTick()
+
+      const menuItems = wrapper.findAll('[role="menuitem"]')
+      expect(document.activeElement).toBe(menuItems[menuItems.length - 1].element)
+
+      wrapper.unmount()
+    })
+
+    it('opens and focuses the first item on Enter and Space', async () => {
+      for (const key of ['Enter', ' ']) {
+        const wrapper = mountMenu()
+        await wrapper.get('.mint-avatar-menu__trigger').trigger('keydown', { key })
+        await wrapper.vm.$nextTick()
+
+        expect(document.activeElement).toBe(wrapper.findAll('[role="menuitem"]')[0].element)
+        wrapper.unmount()
+      }
+    })
+
+    it('cycles item focus with ArrowDown/ArrowUp, wrapping at the ends', async () => {
+      const wrapper = mountMenu()
+      await wrapper.get('.mint-avatar-menu__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.vm.$nextTick()
+
+      const menuItems = wrapper.findAll('[role="menuitem"]')
+      const panel = wrapper.get('.mint-avatar-menu__panel')
+
+      await panel.trigger('keydown', { key: 'ArrowDown' })
+      expect(document.activeElement).toBe(menuItems[1].element)
+
+      await panel.trigger('keydown', { key: 'ArrowDown' })
+      expect(document.activeElement).toBe(menuItems[menuItems.length - 1].element)
+
+      await panel.trigger('keydown', { key: 'ArrowDown' })
+      expect(document.activeElement).toBe(menuItems[0].element)
+
+      await panel.trigger('keydown', { key: 'ArrowUp' })
+      expect(document.activeElement).toBe(menuItems[menuItems.length - 1].element)
+
+      wrapper.unmount()
+    })
+
+    it('jumps to the first item on Home and the last on End', async () => {
+      const wrapper = mountMenu()
+      await wrapper.get('.mint-avatar-menu__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.vm.$nextTick()
+
+      const menuItems = wrapper.findAll('[role="menuitem"]')
+      const panel = wrapper.get('.mint-avatar-menu__panel')
+
+      await panel.trigger('keydown', { key: 'End' })
+      expect(document.activeElement).toBe(menuItems[menuItems.length - 1].element)
+
+      await panel.trigger('keydown', { key: 'Home' })
+      expect(document.activeElement).toBe(menuItems[0].element)
+
+      wrapper.unmount()
+    })
+
+    it('closes on Escape and returns focus to the trigger', async () => {
+      const wrapper = mountMenu()
+      const trigger = wrapper.get('.mint-avatar-menu__trigger')
+      await trigger.trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.vm.$nextTick()
+
+      await wrapper.get('.mint-avatar-menu__panel').trigger('keydown', { key: 'Escape' })
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('.mint-avatar-menu__panel').exists()).toBe(false)
+      expect(document.activeElement).toBe(trigger.element)
+
+      wrapper.unmount()
+    })
+
+    it('closes on Tab without forcing focus', async () => {
+      const wrapper = mountMenu()
+      await wrapper.get('.mint-avatar-menu__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.vm.$nextTick()
+
+      await wrapper.get('.mint-avatar-menu__panel').trigger('keydown', { key: 'Tab' })
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('.mint-avatar-menu__panel').exists()).toBe(false)
+
+      wrapper.unmount()
+    })
+  })
 })

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

@@ -37,4 +37,71 @@ describe('BaseTabs', () => {
     expect(wrapper.findAll('svg.mint-tab__icon--svg')).toHaveLength(2)
     expect(wrapper.findAll('path')).toHaveLength(3)
   })
+
+  describe('keyboard navigation (WAI-ARIA tabs pattern)', () => {
+    const tabs = ['Run', 'Results', { id: 'settings', label: 'Settings', disabled: true }, 'Logs']
+
+    it('puts tabindex="0" only on the active tab', () => {
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', 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 } })
+
+      await wrapper.findAll('.mint-tab')[1].trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['Logs'])
+    })
+
+    it('moves to the previous enabled tab on ArrowLeft, wrapping past the start', async () => {
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Run', tabs } })
+
+      await wrapper.findAll('.mint-tab')[0].trigger('keydown', { key: 'ArrowLeft' })
+
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['Logs'])
+    })
+
+    it('wraps past the end on ArrowRight', async () => {
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Logs', tabs } })
+
+      await wrapper.findAll('.mint-tab')[3].trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['Run'])
+    })
+
+    it('jumps to the first tab on Home and the last on End', async () => {
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', tabs } })
+
+      await wrapper.findAll('.mint-tab')[1].trigger('keydown', { key: 'End' })
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['Logs'])
+
+      await wrapper.findAll('.mint-tab')[1].trigger('keydown', { key: 'Home' })
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['Run'])
+    })
+
+    it('moves DOM focus onto the newly-activated tab', async () => {
+      const wrapper = mount(BaseTabs, {
+        props: { modelValue: 'Run', tabs },
+        attachTo: document.body,
+      })
+
+      await wrapper.findAll('.mint-tab')[0].trigger('keydown', { key: 'ArrowRight' })
+      await wrapper.setProps({ modelValue: 'Results' })
+      await wrapper.vm.$nextTick()
+
+      expect(document.activeElement).toBe(wrapper.findAll('.mint-tab')[1].element)
+      wrapper.unmount()
+    })
+
+    it('keeps aria-selected and aria-controls consistent with the active tab', () => {
+      const wrapper = mount(BaseTabs, { props: { modelValue: 'Results', tabs } })
+      const active = wrapper.findAll('.mint-tab')[1]
+
+      expect(active.attributes('aria-selected')).toBe('true')
+      expect(active.attributes('id')).toBe(active.attributes('aria-controls')?.replace('tabpanel', 'tab'))
+    })
+  })
 })

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)
+    })
   })
 })