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

package/src/components/DataFrame.vue

@@ -5,6 +5,14 @@ import type { DataFrameColumn, SortState, PaginationState } from '../types'
 import { useSortedItems } from '../composables/useSortedItems'
 import { useTextSearch } from '../composables/useTextSearch'
 import { useListSelection } from '../composables/useListSelection'
+import DataStateInternal from './internal/DataStateInternal.vue'
+import LoadingSpinner from './LoadingSpinner.vue'
+import { tableDensityToSize, tryUseSettingsStore } from '../stores/settings'
+
+/** Inbox glyph kept from the pre-1.2 hand-rolled empty state. */
+const EMPTY_ICON_PATH
+  = 'M22 12L16 12L14 15L10 15L8 12L2 12'
+  + 'M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'
 
 /**
  * DataFrame - Data table with sorting, searching, pagination, and row selection.
@@ -34,7 +42,11 @@ interface Props {
   striped?: boolean
   /** Show table borders */
   bordered?: boolean
-  /** Table size */
+  /**
+   * Table size. Left unset, it follows the platform's `tableDensity` setting
+   * (compact → `sm`, normal → `md`, comfortable → `lg`) and falls back to
+   * `md` when no settings store is installed.
+   */
   size?: 'sm' | 'md' | 'lg'
   /** Make header sticky on scroll */
   stickyHeader?: boolean
@@ -42,6 +54,11 @@ interface Props {
   maxHeight?: string | number
   /** Show loading overlay */
   loading?: boolean
+  /**
+   * Error message. When set, the table body is replaced by an error state
+   * instead of the empty state. `null`/`undefined` renders normally.
+   */
+  error?: string | null
   /** Empty state message */
   emptyText?: string
   /** Enable column sorting */
@@ -75,9 +92,9 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   striped: true,
   bordered: true,
-  size: 'md',
   stickyHeader: false,
   loading: false,
+  error: null,
   emptyText: 'No data',
   sortable: false,
   pagination: false,
@@ -108,6 +125,13 @@ const emit = defineEmits<{
   'delete-row': [row: Record<string, unknown>, index: number]
 }>()
 
+const settings = tryUseSettingsStore()
+
+/** Explicit `size` wins; otherwise the user's table density, else `md`. */
+const size = computed<'sm' | 'md' | 'lg'>(() =>
+  props.size ?? (settings ? tableDensityToSize(settings.tableDensity) : 'md'),
+)
+
 const searchQuery = ref('')
 const internalSort = ref<SortState | null>(null)
 
@@ -219,6 +243,21 @@ function isColumnSortable(col: DataFrameColumn): boolean {
   return col.sortable === true || (props.sortable && col.sortable !== false)
 }
 
+/** `aria-sort` for the header cell, omitted on columns that cannot be sorted. */
+function columnAriaSort(col: DataFrameColumn): 'ascending' | 'descending' | 'none' | undefined {
+  if (!isColumnSortable(col)) return undefined
+  if (activeSort.value?.key !== col.key || !activeSort.value.direction) return 'none'
+  return activeSort.value.direction === 'asc' ? 'ascending' : 'descending'
+}
+
+// Native buttons activate on Enter/Space, but the default is prevented here so
+// the header sorts exactly once per key press in every engine.
+function handleSortKeydown(event: KeyboardEvent, col: DataFrameColumn) {
+  if (event.key !== 'Enter' && event.key !== ' ') return
+  event.preventDefault()
+  handleSort(col)
+}
+
 // Selection
 const pageRowKeys = computed(() =>
   paginatedData.value.map((row, i) => getRowKey(row, i))
@@ -264,6 +303,35 @@ function columnStyle(col: DataFrameColumn) {
   }
 }
 
+const RESIZE_KEY_STEP = 16
+
+function columnMinWidth(col: DataFrameColumn): number {
+  return Math.max(MIN_COL_WIDTH, typeof col.minWidth === 'number' ? col.minWidth : 0)
+}
+
+/** Current px width of a column when one is known (resized, or a numeric `width`). */
+function columnWidthValue(col: DataFrameColumn): number | undefined {
+  const width = activeWidths.value[col.key] ?? col.width
+  return typeof width === 'number' ? width : undefined
+}
+
+function applyColumnWidth(key: string, width: number) {
+  const widths = { ...activeWidths.value, [key]: width }
+  if (props.columnWidths === undefined) internalWidths.value = widths
+  emit('update:columnWidths', widths)
+}
+
+/** Left/Right resize the column by a fixed step; the handle is a `role="slider"`. */
+function handleResizeKeydown(event: KeyboardEvent, col: DataFrameColumn) {
+  if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+  event.preventDefault()
+  const th = (event.target as HTMLElement).closest('th')
+  const base =
+    columnWidthValue(col) ?? (th instanceof HTMLElement ? th.offsetWidth : MIN_COL_WIDTH)
+  const delta = event.key === 'ArrowRight' ? RESIZE_KEY_STEP : -RESIZE_KEY_STEP
+  applyColumnWidth(col.key, Math.max(columnMinWidth(col), base + delta))
+}
+
 let resizeState: { key: string; startX: number; startWidth: number; min: number } | null = null
 
 function startResize(col: DataFrameColumn, event: MouseEvent) {
@@ -272,8 +340,7 @@ function startResize(col: DataFrameColumn, event: MouseEvent) {
   const th = (event.target as HTMLElement).closest('th')
   const startWidth =
     th instanceof HTMLElement ? th.offsetWidth : (typeof col.width === 'number' ? col.width : MIN_COL_WIDTH)
-  const min = Math.max(MIN_COL_WIDTH, typeof col.minWidth === 'number' ? col.minWidth : 0)
-  resizeState = { key: col.key, startX: event.clientX, startWidth, min }
+  resizeState = { key: col.key, startX: event.clientX, startWidth, min: columnMinWidth(col) }
   window.addEventListener('mousemove', onResizeMove)
   window.addEventListener('mouseup', stopResize)
 }
@@ -281,9 +348,7 @@ function startResize(col: DataFrameColumn, event: MouseEvent) {
 function onResizeMove(event: MouseEvent) {
   if (!resizeState) return
   const next = Math.max(resizeState.min, resizeState.startWidth + (event.clientX - resizeState.startX))
-  const widths = { ...activeWidths.value, [resizeState.key]: next }
-  if (props.columnWidths === undefined) internalWidths.value = widths
-  emit('update:columnWidths', widths)
+  applyColumnWidth(resizeState.key, next)
 }
 
 function stopResize() {
@@ -355,8 +420,15 @@ const wrapperStyle = computed(() => {
                 },
               ]"
               :style="columnStyle(col)"
-              @click="isColumnSortable(col) ? handleSort(col) : undefined"
+              :aria-sort="columnAriaSort(col)"
             >
+              <component
+                :is="isColumnSortable(col) ? 'button' : 'div'"
+                :type="isColumnSortable(col) ? 'button' : undefined"
+                class="mint-dataframe__th-button"
+                @click="isColumnSortable(col) ? handleSort(col) : undefined"
+                @keydown="isColumnSortable(col) ? handleSortKeydown($event, col) : undefined"
+              >
               <slot :name="`header-${col.key}`" :column="col">
                 <div class="mint-dataframe__th-content">
                   <span>{{ col.label }}</span>
@@ -380,13 +452,18 @@ const wrapperStyle = computed(() => {
                   </svg>
                 </div>
               </slot>
+              </component>
               <span
                 v-if="resizable"
                 class="mint-dataframe__resize-handle"
-                role="separator"
+                role="slider"
+                tabindex="0"
                 aria-orientation="vertical"
-                aria-label="Resize column"
+                :aria-label="`Resize ${col.label} column`"
+                :aria-valuemin="columnMinWidth(col)"
+                :aria-valuenow="columnWidthValue(col)"
                 @mousedown="startResize(col, $event)"
+                @keydown="handleResizeKeydown($event, col)"
                 @click.stop
               />
             </th>
@@ -459,23 +536,24 @@ const wrapperStyle = computed(() => {
         </tbody>
       </table>
 
+      <!-- Error state -->
+      <div v-if="error" class="mint-dataframe__state">
+        <slot name="error" :error="error">
+          <DataStateInternal state="error" :title="error" />
+        </slot>
+      </div>
+
       <!-- Empty state -->
-      <div v-if="paginatedData.length === 0 && !loading" class="mint-dataframe__empty">
+      <div v-else-if="paginatedData.length === 0 && !loading" class="mint-dataframe__state">
         <slot name="empty">
-          <svg class="mint-dataframe__empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" /><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
-          </svg>
-          <p class="mint-dataframe__empty-text">{{ emptyText }}</p>
+          <DataStateInternal state="empty" :title="emptyText" :icon-path="EMPTY_ICON_PATH" />
         </slot>
       </div>
 
       <!-- Loading overlay -->
       <div v-if="loading" class="mint-dataframe__loading">
         <slot name="loading">
-          <svg class="mint-dataframe__loading-spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25" />
-            <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
-          </svg>
+          <LoadingSpinner size="lg" />
         </slot>
       </div>
     </div>
@@ -514,7 +592,3 @@ const wrapperStyle = computed(() => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/dataframe.css';
-</style>

package/src/components/DatePicker.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 /** Input that opens a calendar dropdown for selecting a single date, with clearable support. */
-import { ref, computed, watch } from 'vue'
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { ref, computed, nextTick, onBeforeUnmount, watch } from 'vue'
 import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
 import { useDropdownState } from '../composables/useDropdownState'
-import { useEventListener } from '../composables/useEventListener'
+import { useFocusTrap } from '../composables/useFocusTrap'
 import CalendarGridPanelInternal from './internal/CalendarGridPanelInternal.vue'
 
 interface Props {
@@ -28,12 +29,14 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | undefined]
 }>()
 
-const inputRef = ref<HTMLDivElement | null>(null)
-const dropdownRef = ref<HTMLDivElement | null>(null)
+const dropdownRef = ref<HTMLElement | null>(null)
 const dropdownStyle = ref<Record<string, string>>({})
-const { isOpen, rootRef: containerRef, close, toggle } = useDropdownState({
+const { isOpen, rootRef: containerRef, triggerRef, open, close, toggle } = useDropdownState({
   insideRefs: [dropdownRef],
 })
+// The panel is a non-modal dialog: Tab cycles inside it while it is open, and
+// focus returns to the input when it closes.
+useFocusTrap({ containerRef: dropdownRef, active: isOpen })
 const {
   weekDays,
   monthYear,
@@ -88,41 +91,88 @@ function toggleCalendar() {
   toggle()
 }
 
-function updateDropdownPosition() {
-  if (!inputRef.value) return
-  const rect = inputRef.value.getBoundingClientRect()
+function handleTriggerKeydown(event: KeyboardEvent) {
+  if (props.disabled || isOpen.value) return
+  if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+    event.preventDefault()
+    open()
+  }
+}
+
+// floating-ui keeps the panel anchored (flip/shift) while the page scrolls,
+// instead of the panel closing on every scroll or resize.
+let stopAutoUpdate: (() => void) | null = null
+
+async function updateDropdownPosition() {
+  const trigger = triggerRef.value
+  const panel = dropdownRef.value
+  if (!trigger || !panel) return
+
+  const { x, y } = await computePosition(trigger, panel, {
+    placement: 'bottom-start',
+    strategy: 'fixed',
+    middleware: [offset(4), flip(), shift({ padding: 8 })],
+  })
   dropdownStyle.value = {
     position: 'fixed',
-    top: `${rect.bottom + 4}px`,
-    left: `${rect.left}px`,
-    width: `${Math.max(rect.width, 288)}px`,
+    top: `${y}px`,
+    left: `${x}px`,
+    width: `${Math.max(trigger.getBoundingClientRect().width, 288)}px`,
     zIndex: '9999',
   }
 }
 
-function handleScrollOrResize() {
-  close()
+function stopPositioning() {
+  stopAutoUpdate?.()
+  stopAutoUpdate = null
 }
 
-watch(isOpen, (open) => {
-  if (open) {
-    updateDropdownPosition()
-    if (selectedDate.value) {
-      setCurrentMonthFromDate(selectedDate.value)
-    }
+function startPositioning() {
+  const trigger = triggerRef.value
+  const panel = dropdownRef.value
+  if (!trigger || !panel) return
+  stopPositioning()
+  stopAutoUpdate = autoUpdate(trigger, panel, () => void updateDropdownPosition())
+}
+
+/** Moves focus into the calendar grid: selected day, else today, else the first day. */
+function focusCalendar() {
+  const panel = dropdownRef.value
+  if (!panel) return
+  const target =
+    panel.querySelector<HTMLElement>('.mint-date-picker__day--selected') ??
+    panel.querySelector<HTMLElement>('.mint-date-picker__day--today') ??
+    panel.querySelector<HTMLElement>('.mint-date-picker__day:not([disabled])')
+  target?.focus()
+}
+
+watch(isOpen, async (opened) => {
+  if (!opened) {
+    stopPositioning()
+    return
+  }
+  if (selectedDate.value) {
+    setCurrentMonthFromDate(selectedDate.value)
   }
+  await nextTick()
+  startPositioning()
+  // A second tick so this focus lands after the focus trap's initial focus.
+  await nextTick()
+  focusCalendar()
 })
 
-useEventListener(() => window, 'scroll', handleScrollOrResize, true)
-useEventListener(() => window, 'resize', handleScrollOrResize)
+onBeforeUnmount(stopPositioning)
 </script>
 
 <template>
   <div ref="containerRef" class="mint-date-picker">
-    <div ref="inputRef" class="mint-date-picker__input-wrapper">
+    <div class="mint-date-picker__input-wrapper">
       <input
+        ref="triggerRef"
         type="text"
         readonly
+        aria-haspopup="dialog"
+        :aria-expanded="isOpen"
         :value="displayValue"
         :placeholder="placeholder || 'Select date'"
         :disabled="disabled"
@@ -133,6 +183,7 @@ useEventListener(() => window, 'resize', handleScrollOrResize)
           disabled ? 'mint-date-picker__input--disabled' : '',
         ]"
         @click="toggleCalendar"
+        @keydown="handleTriggerKeydown"
       />
       <div class="mint-date-picker__icon">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -156,7 +207,6 @@ useEventListener(() => window, 'resize', handleScrollOrResize)
           class="mint-date-picker__dropdown"
           :style="dropdownStyle"
           role="dialog"
-          aria-modal="true"
           aria-label="Date picker"
         >
           <CalendarGridPanelInternal
@@ -191,7 +241,3 @@ useEventListener(() => window, 'resize', handleScrollOrResize)
     </Teleport>
   </div>
 </template>
-
-<style>
-@import '../styles/components/date-picker.css';
-</style>

package/src/components/DateTimePicker.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Combined date and time picker with a dropdown calendar, time slots, and 12/24 h format support. */
-import { computed, watch, nextTick } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
 import { useDropdownState } from '../composables/useDropdownState'
+import { useFocusTrap } from '../composables/useFocusTrap'
 import { formatTime, formatTimeSlot, generateTimeSlots, toMinutes } from '../composables/useTimeUtils'
 import CalendarGridPanelInternal from './internal/CalendarGridPanelInternal.vue'
 
@@ -35,7 +36,10 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | undefined]
 }>()
 
-const { isOpen, rootRef, close, toggle } = useDropdownState()
+const dropdownRef = ref<HTMLElement | null>(null)
+const { isOpen, rootRef, triggerRef, open, close, toggle } = useDropdownState()
+// Non-modal dialog: Tab stays inside the panel, focus returns to the input on close.
+useFocusTrap({ containerRef: dropdownRef, active: isOpen })
 const {
   weekDays,
   monthYear,
@@ -148,18 +152,42 @@ function toggleDropdown() {
   toggle()
 }
 
-watch(isOpen, (open) => {
-  if (open && selectedDate.value) {
+function handleTriggerKeydown(event: KeyboardEvent) {
+  if (props.disabled || isOpen.value) return
+  if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+    event.preventDefault()
+    open()
+  }
+}
+
+/** Moves focus into the calendar grid: selected day, else today, else the first day. */
+function focusCalendar() {
+  const panel = dropdownRef.value
+  if (!panel) return
+  const target =
+    panel.querySelector<HTMLElement>('.mint-date-picker__day--selected') ??
+    panel.querySelector<HTMLElement>('.mint-date-picker__day--today') ??
+    panel.querySelector<HTMLElement>('.mint-date-picker__day:not([disabled])')
+  target?.focus()
+}
+
+watch(isOpen, async (opened) => {
+  if (!opened) return
+  if (selectedDate.value) {
     setCurrentMonthFromDate(selectedDate.value)
-    nextTick(() => {
-      // Scroll time grid to selected time
-      const grid = rootRef.value?.querySelector('.mint-datetime-picker__time-grid')
-      const active = rootRef.value?.querySelector('.mint-datetime-picker__time-chip--active')
-      if (grid && active) {
-        active.scrollIntoView({ block: 'center' })
-      }
-    })
   }
+  await nextTick()
+  if (selectedDate.value) {
+    // Scroll time grid to selected time
+    const grid = dropdownRef.value?.querySelector('.mint-datetime-picker__time-grid')
+    const active = dropdownRef.value?.querySelector('.mint-datetime-picker__time-chip--active')
+    if (grid && active) {
+      active.scrollIntoView({ block: 'center' })
+    }
+  }
+  // A second tick so this focus lands after the focus trap's initial focus.
+  await nextTick()
+  focusCalendar()
 })
 </script>
 
@@ -172,8 +200,11 @@ watch(isOpen, (open) => {
         </svg>
       </div>
       <input
+        ref="triggerRef"
         type="text"
         readonly
+        aria-haspopup="dialog"
+        :aria-expanded="isOpen"
         :value="displayValue"
         :placeholder="placeholder"
         :disabled="disabled"
@@ -185,6 +216,7 @@ watch(isOpen, (open) => {
         ]"
         aria-label="Select date and time"
         @click="toggleDropdown"
+        @keydown="handleTriggerKeydown"
       />
       <div class="mint-datetime-picker__icon-clock">
         <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -203,9 +235,9 @@ watch(isOpen, (open) => {
     >
       <div
         v-if="isOpen"
+        ref="dropdownRef"
         class="mint-datetime-picker__dropdown"
         role="dialog"
-        aria-modal="true"
         aria-label="Date and time picker"
       >
         <!-- Calendar section -->
@@ -265,7 +297,3 @@ watch(isOpen, (open) => {
     </Transition>
   </div>
 </template>
-
-<style>
-@import '../styles/components/datetime-picker.css';
-</style>

package/src/components/Divider.vue

@@ -43,7 +43,3 @@ withDefaults(defineProps<Props>(), {
     </template>
   </div>
 </template>
-
-<style>
-@import '../styles/components/divider.css';
-</style>

package/src/components/DoseCalculator.vue

@@ -410,7 +410,3 @@ watch(activeMode, (mode) => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/dose-calculator.css';
-</style>

package/src/components/DoseDesignWorkspaceView.vue

@@ -19,6 +19,7 @@ import type {
   UseControlWorkspaceReturn,
 } from '../composables/useControlSchema'
 import { defineDoseDesignControlModel } from '../composables/useControlSchema'
+import { doseDesignWorkspaceProps } from '../composables/workspaceRecipes'
 import ControlWorkspaceView from './ControlWorkspaceView.vue'
 import DoseCalculator from './DoseCalculator.vue'
 import WellPlate from './WellPlate.vue'
@@ -158,6 +159,10 @@ const resolvedModel = computed<ControlModel | ControlModelBinding>(() =>
   props.model ?? defineDoseDesignControlModel(props.doseDesignOptions)
 )
 
+// Thin recipe: forwards the ~25 props this view shares verbatim with ControlWorkspaceView
+// (see workspaceRecipes.ts) instead of spelling each one out in the template.
+const controlWorkspaceRecipe = computed(() => doseDesignWorkspaceProps(props, resolvedModel.value))
+
 function resolvedPlateId(): string {
   return props.plateId ?? props.doseDesignOptions.componentProps?.plateId ?? 'plate'
 }
@@ -200,31 +205,7 @@ function slotProps(slotProps: {
 
 <template>
   <ControlWorkspaceView
-    :model="resolvedModel"
-    :workspace="workspace"
-    :control-options="controlOptions"
-    :initial-values="initialValues"
-    :model-value="modelValue"
-    :values="values"
-    :title="title"
-    :subtitle="subtitle"
-    :top-bar-variant="topBarVariant"
-    :sidebar-width="sidebarWidth"
-    :sidebar-variant="sidebarVariant"
-    :responsive-sidebar="responsiveSidebar"
-    :sidebar-position="sidebarPosition"
-    :sidebar-title="sidebarTitle"
-    :sidebar-subtitle="sidebarSubtitle"
-    :sidebar-badge="sidebarBadge"
-    :floating="floating"
-    :dense="dense"
-    :show-settings="showSettings"
-    :show-form-actions="showFormActions"
-    :form-enhancements="formEnhancements"
-    :form-loading="formLoading"
-    :form-disabled="formDisabled"
-    :form-readonly="formReadonly"
-    :form-size="formSize"
+    v-bind="controlWorkspaceRecipe"
     @update:model-value="emit('update:modelValue', $event)"
     @update:values="emit('update:values', $event)"
     @submit="emit('submit', $event)"

package/src/components/DropdownButton.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Button that opens a dropdown menu for selecting one option from a list. */
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
+import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { SelectOption, SelectOptionInput, ButtonVariant, ButtonSize } from '../types'
 import { normalizeOptionInput } from '../utils/options'
 
@@ -53,11 +54,25 @@ const emit = defineEmits<{
   select: [option: SelectOption<string | number>]
 }>()
 
-const { isOpen, rootRef, close, toggle: toggleDropdown } = useDropdownState()
+const { isOpen, rootRef, triggerRef, open, close, toggle: toggleDropdown } = useDropdownState()
 const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
   props.options.map(normalizeOptionInput)
 )
 
+const panelRef = ref<HTMLElement | null>(null)
+
+function optionItems(): HTMLElement[] {
+  if (!panelRef.value) return []
+  return Array.from(panelRef.value.querySelectorAll<HTMLElement>('[role="option"]:not([aria-disabled="true"])'))
+}
+
+const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
+  items: optionItems,
+  isOpen: () => isOpen.value,
+  open,
+  close,
+})
+
 const selectedLabel = computed(() => {
   if (props.modelValue === undefined) return props.placeholder ?? 'Select...'
   const found = normalizedOptions.value.find(o => o.value === props.modelValue)
@@ -80,6 +95,7 @@ function selectOption(option: SelectOption<string | number>) {
 <template>
   <div ref="rootRef" class="mint-dropdown-button">
     <button
+      ref="triggerRef"
       type="button"
       :disabled="disabled || loading"
       :class="[
@@ -94,6 +110,7 @@ function selectOption(option: SelectOption<string | number>) {
       :aria-expanded="isOpen"
       aria-haspopup="listbox"
       @click="toggle"
+      @keydown="handleTriggerKeydown"
     >
       <svg v-if="loading" class="mint-dropdown-button__spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
         <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25" />
@@ -116,15 +133,18 @@ function selectOption(option: SelectOption<string | number>) {
     <Transition name="mint-dropdown-button-menu">
       <ul
         v-if="isOpen"
+        ref="panelRef"
         class="mint-dropdown-button__menu"
         role="listbox"
         :aria-activedescendant="modelValue !== undefined ? `mint-dropdown-option-${modelValue}` : undefined"
+        @keydown="handlePanelKeydown"
       >
         <li
           v-for="option in normalizedOptions"
           :id="`mint-dropdown-option-${option.value}`"
           :key="String(option.value)"
           role="option"
+          :tabindex="-1"
           :aria-selected="option.value === modelValue"
           :aria-disabled="option.disabled"
           :class="[
@@ -135,6 +155,8 @@ function selectOption(option: SelectOption<string | number>) {
             },
           ]"
           @click="selectOption(option)"
+          @keydown.enter.prevent="selectOption(option)"
+          @keydown.space.prevent="selectOption(option)"
         >
           <span class="mint-dropdown-button__option-label">{{ option.label }}</span>
           <span v-if="option.description" class="mint-dropdown-button__option-description">
@@ -157,7 +179,3 @@ function selectOption(option: SelectOption<string | number>) {
     </Transition>
   </div>
 </template>
-
-<style>
-@import '../styles/components/dropdown-button.css';
-</style>

package/src/components/EmptyState.vue

@@ -65,7 +65,3 @@ const defaultIconPaths = [
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/empty-state.css';
-</style>

package/src/components/ExperimentCodeBadge.vue

@@ -58,7 +58,3 @@ function handleKeydown(event: KeyboardEvent) {
     {{ copied ? 'Copied!' : code }}
   </span>
 </template>
-
-<style>
-@import '../styles/components/experiment-code-badge.css';
-</style>