@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.2

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

@@ -1,5 +1,6 @@
 import { mount, flushPromises } from '@vue/test-utils'
 import { describe, it, expect, expectTypeOf, vi, beforeEach } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
 import ArtifactSaveDialog from '../../components/ArtifactSaveDialog.vue'
 import FileUploader from '../../components/FileUploader.vue'
 import SegmentedControl from '../../components/SegmentedControl.vue'
@@ -51,7 +52,7 @@ function mountDialog(props: Record<string, unknown> = {}) {
     .mockResolvedValue(undefined)
   const wrapper = mount(ArtifactSaveDialog, {
     props: {
-      modelValue: true,
+      open: true,
       experimentId: 42,
       saveHandler,
       ...props,
@@ -79,6 +80,7 @@ async function chooseFile(wrapper: ReturnType<typeof mountDialog>['wrapper'], fi
 
 describe('ArtifactSaveDialog', () => {
   beforeEach(() => {
+    setActivePinia(createPinia())
     delete (window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__
     window.history.replaceState({}, '', '/')
   })
@@ -139,7 +141,7 @@ describe('ArtifactSaveDialog', () => {
       const saved = wrapper.emitted('saved')
       expect(saved).toHaveLength(1)
       expect((saved![0][0] as { payload: ArtifactSaveDialogPayload }).payload.kind).toBe('json')
-      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([false])
+      expect(wrapper.emitted('update:open')?.at(-1)).toEqual([false])
     })
 
     it('should disable submit when no result payload is provided', async () => {
@@ -533,7 +535,7 @@ describe('ArtifactSaveDialog', () => {
 
       await submit(wrapper)
 
-      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect(wrapper.emitted('update:open')).toBeUndefined()
       expect(wrapper.emitted('error')).toEqual([['Backend unavailable']])
       expect(wrapper.get('.mint-artifact-save-dialog__error').text()).toContain('Backend unavailable')
       expect(wrapper.emitted('saved')).toBeUndefined()

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

@@ -1,5 +1,6 @@
 import { mount, flushPromises } from '@vue/test-utils'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
 
 const mockGet = vi.fn()
 const mockPost = vi.fn()
@@ -36,7 +37,7 @@ const ARTIFACTS = [
 
 async function mountModal(props: Record<string, unknown> = {}) {
   const wrapper = mount(ArtifactSelectorModal, {
-    props: { modelValue: true, experimentId: 42, ...props },
+    props: { open: true, experimentId: 42, ...props },
     global: { stubs: { teleport: true } },
   })
   await flushPromises()
@@ -45,6 +46,7 @@ async function mountModal(props: Record<string, unknown> = {}) {
 
 describe('ArtifactSelectorModal', () => {
   beforeEach(() => {
+    setActivePinia(createPinia())
     vi.clearAllMocks()
     // Fresh rows per call: the list is stored by reference and spliced on mutation.
     mockGet.mockImplementation(async () => ({ artifacts: ARTIFACTS.map((a) => ({ ...a })) }))
@@ -60,7 +62,7 @@ describe('ArtifactSelectorModal', () => {
     await flushPromises()
 
     expect(wrapper.emitted('select')?.[0]?.[0]).toMatchObject({ id: 1 })
-    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([false])
+    expect(wrapper.emitted('update:open')?.at(-1)).toEqual([false])
   })
 
   it('should emit selectDetail alongside select when fetchDetailOnSelect is set', async () => {
@@ -84,7 +86,7 @@ describe('ArtifactSelectorModal', () => {
 
     expect(wrapper.emitted('selectDetail')).toBeUndefined()
     expect(wrapper.emitted('select')).toBeUndefined()
-    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.emitted('update:open')).toBeUndefined()
     expect(wrapper.get('.mint-resource-picker__error').text()).toContain('Detail unavailable')
   })
 
@@ -128,7 +130,7 @@ describe('ArtifactSelectorModal', () => {
     await flushPromises()
 
     expect(wrapper.emitted('select')).toBeUndefined()
-    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.emitted('update:open')).toBeUndefined()
   })
 
   it('should select the arrow-highlighted row on Enter', async () => {

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

@@ -25,7 +25,7 @@ describe('AuditTrail', () => {
   it('should filter with small BaseSelects when filters are shown', () => {
     const wrapper = mount(AuditTrail, { props: { entries, showFilters: true } })
 
-    expect(wrapper.findAllComponents(BaseSelect).map(select => select.props('size'))).toEqual(['sm', 'sm'])
+    expect(wrapper.findAllComponents(BaseSelect).map(select => (select.props() as { size?: string }).size)).toEqual(['sm', 'sm'])
   })
 
   it('should narrow the list when a type filter is chosen', async () => {

package/src/__tests__/components/AutoGroupModal.adapter.test.ts

@@ -9,7 +9,7 @@ import {
   qcRouteToEngine,
   roleLabel,
   seedFromGroups,
-} from '../../components/AutoGroupModal.adapter'
+} from '../../components/internal/AutoGroupModalInternal.adapter'
 import type { ClassSchema, ColumnInfo } from '../../types/auto-group'
 import type { SampleGroup } from '../../types'
 import type { ManualSample } from '../../components/SmartGroupManual.cohorts'

package/src/__tests__/components/AutoGroupModal.anatomy.test.ts

@@ -5,8 +5,8 @@ import {
   engineSchemasToCards,
   experimentLabel,
   previewValues,
-} from '../../components/AutoGroupModal.adapter'
-import { useAutoGroup } from '../../composables/useAutoGroup'
+} from '../../components/internal/AutoGroupModalInternal.adapter'
+import { useAutoGroup } from '../../components/internal/useAutoGroup'
 
 const tracingBatch = [
   'LT_13102025_212_WT_Glu_3_20_S_091123_T1_33', 'LT_13102025_213_WT_Glu_3_20_S_091123_T1_34',

package/src/__tests__/components/AutoGroupModal.wiring.test.ts

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
-import AutoGroupModal from '../../components/AutoGroupModal.vue'
+import AutoGroupModal from '../../components/internal/AutoGroupModalInternal.vue'
 import SmartGroupFieldRecipe from '../../components/SmartGroupFieldRecipe.vue'
 
 const replicated = ['WT', 'KO'].flatMap(genotype =>
@@ -13,7 +13,7 @@ const unreplicated = ['m1', 'm2', 'm3'].flatMap(animal => ['0min', '20min'].map(
 
 function recipeFor(samples: string[]) {
   const wrapper = mount(AutoGroupModal, {
-    props: { modelValue: true, samples },
+    props: { open: true, samples },
     global: { plugins: [createPinia()], stubs: { Teleport: true } },
   })
   return wrapper.findComponent(SmartGroupFieldRecipe)

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

@@ -0,0 +1,51 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { mount } from '@vue/test-utils'
+import { Trash2 } from 'lucide-vue-next'
+import { describe, expect, it } from 'vitest'
+import BaseButton from '../../components/BaseButton.vue'
+
+describe('BaseButton icon', () => {
+  it('should render a square icon-only button named by label when icon has no default slot', () => {
+    const wrapper = mount(BaseButton, { props: { icon: Trash2, label: 'Delete', size: 'sm' } })
+    expect({
+      classes: wrapper.classes(),
+      ariaLabel: wrapper.attributes('aria-label'),
+      icons: wrapper.findAll('.mint-icon-button__icon--sm svg').length,
+    }).toEqual({
+      classes: expect.arrayContaining(['mint-icon-button', 'mint-icon-button--primary', 'mint-icon-button--sm']),
+      ariaLabel: 'Delete',
+      icons: 1,
+    })
+  })
+
+  it('should render the icon before the label text when a default slot is given', () => {
+    const wrapper = mount(BaseButton, { props: { icon: Trash2 }, slots: { default: 'Delete' } })
+    expect({
+      classes: wrapper.classes(),
+      ariaLabel: wrapper.attributes('aria-label'),
+      icon: wrapper.find('svg.mint-button__icon').exists(),
+      text: wrapper.text(),
+    }).toEqual({
+      classes: expect.arrayContaining(['mint-button']),
+      ariaLabel: undefined,
+      icon: true,
+      text: 'Delete',
+    })
+  })
+})
+
+// jsdom has no layout, so this pins the stylesheet contract instead: a bare
+// <svg> rendered by an icon-only BaseButton must be sized by the icon box, otherwise it
+// collapses to zero width as a flex item (FilePicker source toggles, beta.14).
+describe('BaseButton icon-only sizing', () => {
+  it('should size the icon 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*\}/,
+    )
+  })
+})

package/src/__tests__/components/{BaseToggle.test.ts → BaseCheckbox.switch.test.ts}

@@ -1,11 +1,12 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import BaseToggle from '../../components/BaseToggle.vue'
+import BaseCheckbox from '../../components/BaseCheckbox.vue'
 
-describe('BaseToggle', () => {
+describe('BaseCheckbox type="switch"', () => {
   it('uses ariaLabel for the switch name without changing the visual label', () => {
-    const wrapper = mount(BaseToggle, {
+    const wrapper = mount(BaseCheckbox, {
       props: {
+        type: 'switch',
         label: 'Enabled',
         ariaLabel: 'Email notifications',
       },
@@ -23,8 +24,9 @@ describe('BaseToggle', () => {
   })
 
   it('keeps using the visual label as the default switch name', () => {
-    const wrapper = mount(BaseToggle, {
+    const wrapper = mount(BaseCheckbox, {
       props: {
+        type: 'switch',
         label: 'Enabled',
       },
     })
@@ -33,14 +35,14 @@ describe('BaseToggle', () => {
   })
 
   it('keeps the existing fallback name when no labels are provided', () => {
-    const wrapper = mount(BaseToggle)
+    const wrapper = mount(BaseCheckbox, { props: { type: 'switch' } })
 
     expect(wrapper.get('[role="switch"]').attributes('aria-label')).toBe('Toggle')
   })
 
   it('should keep the knob class list state-free when switched on', () => {
     // The on position comes from the track modifier (translateX), not a knob class.
-    const wrapper = mount(BaseToggle, { props: { modelValue: true } })
+    const wrapper = mount(BaseCheckbox, { props: { type: 'switch', modelValue: true } })
 
     expect(wrapper.get('.mint-toggle__knob').classes()).toEqual(['mint-toggle__knob', 'mint-toggle__knob--md'])
   })

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

@@ -14,38 +14,17 @@ describe('BaseInput', () => {
     })
   })
 
-  describe('number input', () => {
-    it('should emit number value on input', async () => {
+  describe('textarea', () => {
+    it('should render a textarea and emit its value when type is textarea', async () => {
       const wrapper = mount(BaseInput, {
-        props: { modelValue: 0, type: 'number' },
+        props: { modelValue: '', type: 'textarea', rows: 5 },
       })
-      const input = wrapper.find('input')
-      // Simulate typing a number
-      Object.defineProperty(input.element, 'value', { value: '42', writable: true })
-      await input.trigger('input')
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([42])
-    })
-
-    it('should emit null for empty number input', async () => {
-      const wrapper = mount(BaseInput, {
-        props: { modelValue: 5, type: 'number' },
-      })
-      const input = wrapper.find('input')
-      // Simulate clearing the input
-      Object.defineProperty(input.element, 'value', { value: '', writable: true })
-      await input.trigger('input')
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
-    })
-
-    it('should not emit NaN for empty number input', async () => {
-      const wrapper = mount(BaseInput, {
-        props: { modelValue: 5, type: 'number' },
-      })
-      const input = wrapper.find('input')
-      Object.defineProperty(input.element, 'value', { value: '', writable: true })
-      await input.trigger('input')
-      const emitted = wrapper.emitted('update:modelValue')?.[0]?.[0]
-      expect(emitted).not.toBeNaN()
+      const textarea = wrapper.get('textarea')
+      await textarea.setValue('notes')
+      expect({
+        rows: textarea.attributes('rows'),
+        emitted: wrapper.emitted('update:modelValue')?.[0],
+      }).toEqual({ rows: '5', emitted: ['notes'] })
     })
   })
 
@@ -64,9 +43,9 @@ describe('BaseInput', () => {
       expect(wrapper.find('input').attributes('placeholder')).toBe('Enter text')
     })
 
-    it('should apply error class', () => {
+    it('should apply error class when invalid', () => {
       const wrapper = mount(BaseInput, {
-        props: { modelValue: '', error: true },
+        props: { modelValue: '', invalid: true },
       })
       expect(wrapper.find('input').classes()).toContain('mint-input--error')
     })
@@ -124,8 +103,8 @@ describe('BaseInput prefix / suffix slots (1e)', () => {
     expect(wrapper.classes()).toContain('extra')
   })
 
-  it('should mark the group as errored when error is set', () => {
-    const wrapper = mount(BaseInput, { props: { error: true }, slots: { suffix: 'µL' } })
+  it('should mark the group as errored when invalid is set', () => {
+    const wrapper = mount(BaseInput, { props: { invalid: true }, slots: { suffix: 'µL' } })
     expect(wrapper.classes()).toContain('mint-input-group--error')
   })
 

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

@@ -20,7 +20,7 @@ const railTabs: ModalTab[] = [
 function mountModal(props: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
   return mount(BaseModal, {
     props: {
-      modelValue: true,
+      open: true,
       title: 'Settings',
       ...props,
     },
@@ -165,7 +165,7 @@ describe('BaseModal', () => {
 
     it('should pass the active tab to the pane-header slot', () => {
       const wrapper = mount(BaseModal, {
-        props: { modelValue: true, layout: 'rail', tabs: railTabs, activeTab: 'security' },
+        props: { open: true, layout: 'rail', tabs: railTabs, activeTab: 'security' },
         slots: { 'pane-header': '<template #pane-header="{ tab }"><span class="slot-tab">{{ tab.label }}</span></template>' },
         global: { stubs: { teleport: true } },
       })
@@ -182,7 +182,7 @@ describe('BaseModal', () => {
       const outer = mountModal()
       const inner = mountModal({ title: 'Nested' })
       pressEscape()
-      expect(inner.emitted('update:modelValue')).toEqual([[false]])
+      expect(inner.emitted('update:open')).toEqual([[false]])
       outer.unmount()
       inner.unmount()
     })
@@ -191,14 +191,14 @@ describe('BaseModal', () => {
       const outer = mountModal()
       const inner = mountModal({ title: 'Nested' })
       pressEscape()
-      expect(outer.emitted('update:modelValue')).toBeUndefined()
+      expect(outer.emitted('update:open')).toBeUndefined()
       outer.unmount()
       inner.unmount()
     })
 
     it('should focus the first focusable element when mounted already open', async () => {
       const attached = mount(BaseModal, {
-        props: { modelValue: true, title: 'Settings' },
+        props: { open: true, title: 'Settings' },
         slots: { default: '<input class="first-field">' },
         attachTo: document.body,
       })
@@ -210,7 +210,7 @@ describe('BaseModal', () => {
 
     it('should focus the autofocus element when the modal content marks one', async () => {
       const attached = mount(BaseModal, {
-        props: { modelValue: true, title: 'Settings' },
+        props: { open: true, title: 'Settings' },
         slots: { default: '<input class="first-field" autofocus>' },
         attachTo: document.body,
       })

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

@@ -4,13 +4,13 @@ import BasePill from '../../components/BasePill.vue'
 
 describe('BasePill', () => {
   describe('rendering with default props', () => {
-    it('should render pill with default variant and size', () => {
+    it('should render a soft neutral md pill when no props are set', () => {
       const wrapper = mount(BasePill, {
         slots: { default: 'Label' },
       })
-      expect(wrapper.find('.mint-pill').exists()).toBe(true)
-      expect(wrapper.find('.mint-pill--default').exists()).toBe(true)
-      expect(wrapper.find('.mint-pill--md').exists()).toBe(true)
+      expect(wrapper.find('.mint-pill').classes()).toEqual(
+        expect.arrayContaining(['mint-pill--neutral', 'mint-pill--soft', 'mint-pill--md']),
+      )
     })
 
     it('should render label content', () => {
@@ -35,53 +35,47 @@ describe('BasePill', () => {
     })
   })
 
-  describe('variant prop', () => {
-    it('should apply primary variant class', () => {
-      const wrapper = mount(BasePill, {
-        props: { variant: 'primary' },
-        slots: { default: 'Primary' },
-      })
-      expect(wrapper.find('.mint-pill--primary').exists()).toBe(true)
-    })
-
-    it('should apply success variant class', () => {
-      const wrapper = mount(BasePill, {
-        props: { variant: 'success' },
-        slots: { default: 'Success' },
-      })
-      expect(wrapper.find('.mint-pill--success').exists()).toBe(true)
-    })
+  describe('tone and variant props', () => {
+    it.each(['neutral', 'primary', 'cta', 'success', 'warning', 'error', 'info'] as const)(
+      'should apply the %s tone class when tone is set',
+      (tone) => {
+        const wrapper = mount(BasePill, {
+          props: { tone },
+          slots: { default: tone },
+        })
+        expect(wrapper.find(`.mint-pill--${tone}`).exists()).toBe(true)
+      },
+    )
 
-    it('should apply warning variant class', () => {
+    it('should apply outline variant class', () => {
       const wrapper = mount(BasePill, {
-        props: { variant: 'warning' },
-        slots: { default: 'Warning' },
+        props: { variant: 'outline' },
+        slots: { default: 'Outline' },
       })
-      expect(wrapper.find('.mint-pill--warning').exists()).toBe(true)
+      expect(wrapper.find('.mint-pill--outline').exists()).toBe(true)
     })
 
-    it('should apply error variant class', () => {
+    it('should set the accent token inline when color is set', () => {
       const wrapper = mount(BasePill, {
-        props: { variant: 'error' },
-        slots: { default: 'Error' },
+        props: { color: 'var(--mint-sample-2)', dot: true },
+        slots: { default: 'Group B' },
       })
-      expect(wrapper.find('.mint-pill--error').exists()).toBe(true)
+      expect(wrapper.find('.mint-pill').attributes('style')).toContain('--mint-pill-tone: var(--mint-sample-2)')
     })
 
-    it('should apply info variant class', () => {
-      const wrapper = mount(BasePill, {
-        props: { variant: 'info' },
-        slots: { default: 'Info' },
-      })
-      expect(wrapper.find('.mint-pill--info').exists()).toBe(true)
+    it('should mark the pill as accented so the neutral surface yields to color when color is set', () => {
+      const wrapper = mount(BasePill, { props: { color: 'var(--mint-sample-3)' }, slots: { default: 'Group C' } })
+      expect(wrapper.find('.mint-pill').classes()).toContain('mint-pill--accent')
     })
+  })
 
-    it('should apply outline variant class', () => {
+  describe('dot prop', () => {
+    it('should animate the dot when pulse is set', () => {
       const wrapper = mount(BasePill, {
-        props: { variant: 'outline' },
-        slots: { default: 'Outline' },
+        props: { dot: true, pulse: true },
+        slots: { default: 'Running' },
       })
-      expect(wrapper.find('.mint-pill--outline').exists()).toBe(true)
+      expect(wrapper.find('.mint-pill__dot--pulse').exists()).toBe(true)
     })
   })
 
@@ -210,7 +204,7 @@ describe('BasePill', () => {
     it('should apply multiple classes correctly', () => {
       const wrapper = mount(BasePill, {
         props: {
-          variant: 'success',
+          tone: 'success',
           size: 'sm',
           disabled: true,
           icon: true,

package/src/__tests__/components/{MultiSelect.test.ts → BaseSelect.multiple.test.ts}

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import MultiSelect from '../../components/MultiSelect.vue'
+import BaseSelect from '../../components/BaseSelect.vue'
 
 const options = [
   { value: 'a', label: 'A' },
@@ -8,10 +8,18 @@ const options = [
   { value: 'c', label: 'C' },
 ]
 
-describe('MultiSelect', () => {
+describe('BaseSelect multiple', () => {
+  it('should render the chip list when multiple is a bare template attribute', () => {
+    // A compiled `<BaseSelect multiple>` passes '' because `multiple` has no runtime Boolean type.
+    const wrapper = mount(BaseSelect, { props: { multiple: '' as unknown as true, modelValue: [], options } })
+
+    expect(wrapper.find('.mint-multi-select').exists()).toBe(true)
+  })
+
   it('accepts string and number shorthand options', async () => {
-    const wrapper = mount(MultiSelect, {
+    const wrapper = mount(BaseSelect, {
       props: {
+        multiple: true,
         modelValue: ['glucose', 2],
         options: ['glucose', 2, { value: 'dox', label: 'Doxorubicin' }],
       },
@@ -31,12 +39,13 @@ describe('MultiSelect', () => {
     ])
   })
 
-  it('uses the shared selection limit for maxSelections', async () => {
-    const wrapper = mount(MultiSelect, {
+  it('uses the shared selection limit for max', async () => {
+    const wrapper = mount(BaseSelect, {
       props: {
+        multiple: true,
         modelValue: ['a'],
         options,
-        maxSelections: 1,
+        max: 1,
       },
     })
 
@@ -47,7 +56,7 @@ describe('MultiSelect', () => {
   })
 
   it('should reserve the check slot on every chip when only one is selected', () => {
-    const wrapper = mount(MultiSelect, { props: { modelValue: ['a'], options } })
+    const wrapper = mount(BaseSelect, { props: { multiple: true, modelValue: ['a'], options } })
 
     expect(wrapper.findAll('.mint-multi-select__chip-check')).toHaveLength(3)
   })

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

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

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

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