@morscherlab/mint-sdk 1.2.0-beta.8 → 1.2.0

package/src/components/StepWizard.vue

@@ -217,7 +217,3 @@ defineExpose({ setStepValid })
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/step-wizard.css';
-</style>

package/src/components/TagsInput.vue

@@ -44,11 +44,13 @@ const emit = defineEmits<{
 }>()
 
 const inputValue = ref('')
-const inputRef = ref<HTMLInputElement>()
 const highlightedIndex = ref(-1)
+// The text input doubles as the dropdown trigger, so focus restoration is the
+// composable's `triggerRef` rather than a component-local refocus helper.
 const {
   isOpen: dropdownOpen,
   rootRef,
+  triggerRef: inputRef,
   open: openDropdown,
   close: closeDropdown,
 } = useDropdownState({
@@ -129,7 +131,7 @@ function handleKeydown(event: KeyboardEvent) {
     return
   }
   if (event.key === 'Escape') {
-    closeDropdown()
+    closeDropdown(true)
     return
   }
   if (event.key === 'Backspace' && !inputValue.value && props.modelValue.length > 0) {
@@ -274,7 +276,3 @@ function onInputEvent() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/tags-input.css';
-</style>

package/src/components/ThemeToggle.vue

@@ -50,7 +50,3 @@ const { isDark, toggleTheme } = useTheme()
     </svg>
   </IconButton>
 </template>
-
-<style>
-@import '../styles/components/theme-toggle.css';
-</style>

package/src/components/TimePicker.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Input that opens a scrollable time-slot dropdown in 12h or 24h format, with min/max range. */
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick, useId } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
 import {
   compareTime,
@@ -38,7 +38,15 @@ const emit = defineEmits<{
 
 const listRef = ref<HTMLUListElement | null>(null)
 const highlightedIndex = ref(-1)
-const { isOpen, rootRef, open, close, toggle } = useDropdownState()
+const listboxId = `mint-time-picker-listbox-${useId().replace(/:/g, '')}`
+const { isOpen, rootRef, triggerRef, open, close, toggle } = useDropdownState()
+
+/** Id of the highlighted slot, published to the input as `aria-activedescendant`. */
+const activeSlotId = computed(() =>
+  isOpen.value && highlightedIndex.value >= 0
+    ? `${listboxId}-option-${highlightedIndex.value}`
+    : undefined,
+)
 
 const slots = computed(() => {
   const start = props.min ?? '00:00'
@@ -134,9 +142,29 @@ function handleKeydown(event: KeyboardEvent) {
       }
       break
     }
+    case 'Home': {
+      event.preventDefault()
+      const first = slots.value.findIndex(slot => !isSlotDisabled(slot))
+      if (first >= 0) {
+        highlightedIndex.value = first
+        scrollToHighlighted()
+      }
+      break
+    }
+    case 'End': {
+      event.preventDefault()
+      for (let index = slots.value.length - 1; index >= 0; index--) {
+        if (!isSlotDisabled(slots.value[index])) {
+          highlightedIndex.value = index
+          scrollToHighlighted()
+          break
+        }
+      }
+      break
+    }
     case 'Escape': {
       event.preventDefault()
-      close()
+      close(true)
       break
     }
   }
@@ -172,6 +200,7 @@ watch(isOpen, (open) => {
   <div ref="rootRef" class="mint-time-picker" @keydown="handleKeydown">
     <div class="mint-time-picker__input-wrapper">
       <input
+        ref="triggerRef"
         type="text"
         readonly
         :value="displayValue"
@@ -186,6 +215,8 @@ watch(isOpen, (open) => {
         role="combobox"
         aria-haspopup="listbox"
         :aria-expanded="isOpen"
+        :aria-controls="isOpen ? listboxId : undefined"
+        :aria-activedescendant="activeSlotId"
         @click="toggleDropdown"
       />
       <button
@@ -219,6 +250,7 @@ watch(isOpen, (open) => {
         class="mint-time-picker__dropdown"
       >
         <ul
+          :id="listboxId"
           ref="listRef"
           class="mint-time-picker__list"
           role="listbox"
@@ -226,6 +258,7 @@ watch(isOpen, (open) => {
         >
           <li
             v-for="(slot, index) in slots"
+            :id="`${listboxId}-option-${index}`"
             :key="slot"
             role="option"
             :aria-selected="slot === modelValue"
@@ -245,7 +278,3 @@ watch(isOpen, (open) => {
     </Transition>
   </div>
 </template>
-
-<style>
-@import '../styles/components/time-picker.css';
-</style>

package/src/components/TimeRangeInput.vue

@@ -116,7 +116,3 @@ function onEndChange(value: string | undefined) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/time-range-input.css';
-</style>

package/src/components/Tooltip.story.vue

@@ -55,15 +55,15 @@ const positions: ('top' | 'bottom' | 'left' | 'right')[] = ['top', 'bottom', 'le
         <p style="margin: 0;">
           The experiment used
           <Tooltip text="Dimethyl sulfoxide - a polar aprotic solvent" position="top" :delay="100">
-            <span style="text-decoration: underline dotted; cursor: help; color: var(--mint-primary, #3B82F6);">DMSO</span>
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--color-primary);">DMSO</span>
           </Tooltip>
           as the vehicle control. Samples were incubated at
           <Tooltip text="Standard mammalian cell culture temperature" position="top" :delay="100">
-            <span style="text-decoration: underline dotted; cursor: help; color: var(--mint-primary, #3B82F6);">37 C</span>
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--color-primary);">37 C</span>
           </Tooltip>
           for 24 hours before
           <Tooltip text="3-(4,5-dimethylthiazol-2-yl)-2,5-diphenyltetrazolium bromide" position="top" :delay="100">
-            <span style="text-decoration: underline dotted; cursor: help; color: var(--mint-primary, #3B82F6);">MTT</span>
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--color-primary);">MTT</span>
           </Tooltip>
           assay readout.
         </p>

package/src/components/Tooltip.vue

@@ -108,7 +108,3 @@ function resolvedMaxWidth(value: string | number | undefined): string | undefine
     </Teleport>
   </span>
 </template>
-
-<style>
-@import '../styles/components/tooltip.css';
-</style>

package/src/components/UnitInput.vue

@@ -211,7 +211,3 @@ watch(conversionHint, (hint) => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/unit-input.css';
-</style>

package/src/components/WellPlate.geometry.ts

@@ -37,8 +37,67 @@ export const WELL_PLATE_SIZE_CONFIGS: Record<WellPlateSize, WellPlateSizeConfig>
   fill: { cellWidth: '100%', cellHeight: '32px', headerWidth: '32px', headerHeight: '24px', fontSize: '0.75rem', gap: '2px' },
 }
 
+/**
+ * Spreadsheet-style row label for a zero-based row index: A…Z, then AA, AB, …
+ *
+ * This is the single row-label generator for the SDK — plate grids, rack
+ * grids, well-id parsing and the template builders all go through it.
+ */
+export function rowLabel(index: number): string {
+  let label = ''
+  let current = index
+  for (;;) {
+    label = String.fromCharCode(65 + (current % 26)) + label
+    current = Math.floor(current / 26) - 1
+    if (current < 0) return label
+  }
+}
+
+/** Inverse of {@link rowLabel}: 'A' → 0, 'Z' → 25, 'AA' → 26. */
+export function rowIndex(label: string): number {
+  return [...label].reduce((value, char) => value * 26 + char.charCodeAt(0) - 64, 0) - 1
+}
+
 export function createPlateRowLabels(config: WellPlateConfig): string[] {
-  return Array.from({ length: config.rows }, (_, index) => String.fromCharCode(65 + index))
+  return Array.from({ length: config.rows }, (_, index) => rowLabel(index))
+}
+
+function plateConfigOrThrow(format: number): WellPlateConfig {
+  const config = PLATE_CONFIGS[format as WellPlateFormat]
+  if (!config) throw new Error(`Unsupported plate format '${format}'.`)
+  return config
+}
+
+/** Every well id of a plate, row-major (A1, A2, … B1, …). */
+export function wellIdsForFormat(format: number): string[] {
+  const { rows, cols } = plateConfigOrThrow(format)
+  return Array.from({ length: rows }, (_, row) =>
+    Array.from({ length: cols }, (_col, col) => `${rowLabel(row)}${col + 1}`)
+  ).flat()
+}
+
+/** Throw unless `wellId` names a well that exists on a `format`-well plate. */
+export function assertWellInFormat(wellId: string, format: number): void {
+  const { rows, cols } = plateConfigOrThrow(format)
+  const match = /^([A-Z]+)([1-9][0-9]*)$/.exec(wellId.toUpperCase())
+  if (!match) {
+    throw new Error(`Invalid well id '${wellId}'.`)
+  }
+  const row = rowIndex(match[1])
+  const col = Number(match[2]) - 1
+  if (row < 0 || col < 0 || row >= rows || col >= cols) {
+    throw new Error(`Well '${wellId}' is outside a ${format}-well plate.`)
+  }
+}
+
+/** Coerce an unknown value to a supported plate format, else `fallback`. */
+export function readPlateFormat(value: unknown, fallback: WellPlateFormat): WellPlateFormat {
+  const parsed = typeof value === 'number'
+    ? value
+    : typeof value === 'string'
+      ? Number(value)
+      : Number.NaN
+  return parsed in PLATE_CONFIGS ? (parsed as WellPlateFormat) : fallback
 }
 
 export function createPlateColumnLabels(config: WellPlateConfig): number[] {

package/src/components/WellPlate.interaction.ts

@@ -11,6 +11,7 @@ import {
   type WellPlateCoordinate,
 } from './WellPlate.geometry'
 import { parseDroppedSampleTransfer } from './WellPlate.sampleDrop'
+import { useReorderAnnouncer } from '../composables/useListReorder'
 
 export interface WellPlateInteractionOptions {
   modelValue: () => string[]
@@ -64,6 +65,7 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
   const hoveredWell = ref<string | null>(null)
   const editingWellId = ref<string | null>(null)
   const editPopupPosition = ref({ x: 0, y: 0 })
+  const { announcement, announce, announcerStyle } = useReorderAnnouncer()
 
   const selectedWellSet = computed(() => new Set(options.modelValue()))
 
@@ -215,6 +217,45 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
     dragTargetWell.value = null
   }
 
+  // Keyboard alternative to the well-to-well drag. The plate is a 2D grid, not a
+  // list, so it cannot use `useListReorder`'s index maths: instead Alt+Enter (or
+  // Alt+Space) picks a filled well up, the same chord on another well drops it
+  // there, and Escape cancels. Every step is announced politely.
+  function handleWellMoveKeydown(well: Well, event: KeyboardEvent) {
+    if (options.disabled() || options.readonly() || options.selectionMode() !== 'drag') return
+
+    if (event.key === 'Escape' && dragSourceWell.value) {
+      event.preventDefault()
+      announce(`Move cancelled. ${dragSourceWell.value} stays in place.`)
+      dragSourceWell.value = null
+      dragTargetWell.value = null
+      return
+    }
+
+    if (!event.altKey || (event.key !== 'Enter' && event.key !== ' ')) return
+    event.preventDefault()
+
+    const source = dragSourceWell.value
+    if (!source) {
+      if (!well.sampleType) {
+        announce(`Well ${well.id} is empty and cannot be moved.`)
+        return
+      }
+      dragSourceWell.value = well.id
+      announce(`Well ${well.id} picked up. Move to another well and press Alt and Enter to drop it.`)
+      return
+    }
+
+    if (source !== well.id) {
+      options.emitWellMove(source, well.id)
+      announce(`Well ${source} moved to ${well.id}.`)
+    } else {
+      announce(`Move cancelled. ${source} stays in place.`)
+    }
+    dragSourceWell.value = null
+    dragTargetWell.value = null
+  }
+
   function parseDroppedSample(event: DragEvent, wellId: string): WellSampleDropData | null {
     const customParser = options.sampleDropParser()
     if (customParser) return customParser(event, { wellId, event }) ?? null
@@ -267,6 +308,9 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
     handleDragLeave,
     handleDrop,
     handleDragEnd,
+    handleWellMoveKeydown,
     handleKeyDown,
+    moveAnnouncement: announcement,
+    moveAnnouncerStyle: announcerStyle,
   }
 }

package/src/components/WellPlate.story.vue

@@ -121,6 +121,8 @@ const doseWells = generateDoseWells()
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     format: 96 as WellPlateFormat,
     selectionMode: 'multiple' as WellPlateSelectionMode,
     size: 'md' as WellPlateSize,
@@ -141,6 +143,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem;">
           <WellPlate
+            :loading="state.loading"
+            :error="state.error || null"
             v-model="selectedWells"
             :format="state.format"
             :wells="generateMockWells(state.format)"
@@ -161,6 +165,10 @@ function initState() {
       </template>
 
       <template #controls="{ state }">
+
+        <HstCheckbox v-model="state.loading" title="Loading" />
+
+        <HstText v-model="state.error" title="Error Message" />
         <HstSelect
           v-model="state.format"
           title="Format"

package/src/components/WellPlate.vue

@@ -32,6 +32,7 @@ import {
   wellStyle,
 } from './WellPlate.rendering'
 import { DEFAULT_WELL_LEGEND_ITEMS } from './WellPlate.legend'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   modelValue?: string[]
@@ -59,6 +60,19 @@ interface Props {
   rowConditions?: RowCondition[]
   allowSampleDrop?: boolean
   sampleDropParser?: WellSampleDropParser
+  /** Replace the plate grid with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the plate grid is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
+  /**
+   * Opt-in empty-state headline. A blank plate is meaningful, so the empty
+   * state only replaces the grid when this message is supplied and no wells
+   * carry data.
+   */
+  emptyMessage?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -114,6 +128,12 @@ interface WellEditorSlotProps {
 
 defineSlots<{
   'well-editor'?: (props: WellEditorSlotProps) => unknown
+  /** Replaces the default loading placeholder. */
+  loading?: () => unknown
+  /** Replaces the default error placeholder. */
+  error?: (props: { error: string }) => unknown
+  /** Replaces the default empty placeholder. */
+  empty?: () => unknown
 }>()
 
 const plateRef = ref<HTMLElement | null>(null)
@@ -166,7 +186,10 @@ const {
   handleDragLeave,
   handleDrop,
   handleDragEnd,
+  handleWellMoveKeydown,
   handleKeyDown,
+  moveAnnouncement,
+  moveAnnouncerStyle,
 } = useWellPlateInteraction({
   modelValue: () => props.modelValue,
   selectionMode: () => props.selectionMode,
@@ -233,6 +256,11 @@ const containerStyle = computed(() =>
   }
 )
 
+/** Empty state is opt-in: it needs an `emptyMessage` and a plate with no well data. */
+const showEmptyState = computed(() =>
+  Boolean(props.emptyMessage) && Object.keys(props.wells).length === 0,
+)
+
 const tableStyle = computed(() => ({
   borderCollapse: 'separate' as const,
   borderSpacing: sizeConfig.value.gap,
@@ -246,7 +274,25 @@ const tableStyle = computed(() => ({
     :class="['mint-well-plate', isFillMode ? 'mint-well-plate--fill' : 'mint-well-plate--inline']"
     :style="containerStyle"
   >
-    <div class="mint-well-plate__scroll">
+    <div v-if="error" class="mint-well-plate__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" :title="error" />
+      </slot>
+    </div>
+
+    <div v-else-if="loading" class="mint-well-plate__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" loading-label="Loading plate" />
+      </slot>
+    </div>
+
+    <div v-else-if="showEmptyState" class="mint-well-plate__state">
+      <slot name="empty">
+        <DataStateInternal state="empty" :title="emptyMessage" />
+      </slot>
+    </div>
+
+    <div v-else class="mint-well-plate__scroll">
       <div class="mint-well-plate__content">
         <table
           ref="tableRef"
@@ -390,8 +436,9 @@ const tableStyle = computed(() => ({
                 @dragleave="handleDragLeave"
                 @drop="handleDrop(well, $event)"
                 @dragend="handleDragEnd"
-                @keydown.enter="handleWellClick(well, $event as unknown as MouseEvent)"
-                @keydown.space.prevent="handleWellClick(well, $event as unknown as MouseEvent)"
+                @keydown="handleWellMoveKeydown(well, $event)"
+                @keydown.enter.exact="handleWellClick(well, $event as unknown as MouseEvent)"
+                @keydown.space.exact.prevent="handleWellClick(well, $event as unknown as MouseEvent)"
               >
                 <!-- Well label text (from metadata.label) -->
                 <span
@@ -489,9 +536,8 @@ const tableStyle = computed(() => ({
         />
       </slot>
     </template>
+
+    <!-- Keyboard well-move announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="moveAnnouncerStyle">{{ moveAnnouncement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/well-plate.css';
-</style>

package/src/components/fileBrowserPresentation.ts

@@ -0,0 +1,39 @@
+import type { FileEntry } from '../types/fileBrowserTypes'
+
+export const FILE_BROWSER_ICONS = {
+  disk: 'M4 5h16v14H4zM8 9h.01M4 12h16',
+  folder: 'M4 7h6l2 2h8v10H4z',
+  file: 'M14 3v5h5M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z',
+}
+
+export function formatCount(value: number): string {
+  // Thin spaces group digits without the comma/period ambiguity across locales.
+  return value.toLocaleString('en-US').replace(/,/g, ' ')
+}
+
+export function formatSize(entry: FileEntry): string {
+  if (entry.kind === 'directory') {
+    return entry.child_count === null || entry.child_count === undefined
+      ? '—'
+      : `${entry.child_count} item${entry.child_count === 1 ? '' : 's'}`
+  }
+  return formatBytes(entry.size_bytes ?? null)
+}
+
+export function formatBytes(bytes: number | null): string {
+  if (bytes === null) return '—'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let value = bytes
+  let unit = 0
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024
+    unit += 1
+  }
+  const rounded = value >= 100 || unit === 0 ? Math.round(value) : Number(value.toFixed(1))
+  return `${rounded} ${units[unit]}`
+}
+
+export function entryType(entry: FileEntry): string {
+  if (entry.kind === 'directory') return 'Folder'
+  return entry.extension ? entry.extension.replace('.', '').toUpperCase() : 'File'
+}

package/src/components/index.ts

@@ -99,6 +99,7 @@ export { default as SampleHierarchyTree } from './SampleHierarchyTree.vue'
 export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 
 // Scientific display components
+export { default as PlotlyChart } from './PlotlyChart.vue'
 export { default as ScientificNumber } from './ScientificNumber.vue'
 /** Renders a chemical formula string (H₂O, C₆H₁₂O₆, Ca(OH)₂) with typographically correct subscripts and superscripts for charges. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; no platform replacement is planned. */
 export { default as ChemicalFormula } from './ChemicalFormula.vue'
@@ -142,7 +143,11 @@ export { default as SectionCard } from './SectionCard.vue'
 // Experiment / analysis components
 export { default as ExperimentSelectorModal } from './ExperimentSelectorModal.vue'
 export { default as ArtifactSelectorModal } from './ArtifactSelectorModal.vue'
+/** Modal picker over the read-only server mounts, recording paths rather than copying data. */
+export { default as FileBrowserModal } from './FileBrowserModal.vue'
 export { default as GeneratedPathInput } from './GeneratedPathInput.vue'
 export { default as ArtifactSaveDialog } from './ArtifactSaveDialog.vue'
 export { default as ExperimentPopover } from './ExperimentPopover.vue'
 export { default as FitPanel } from './FitPanel.vue'
+
+export { default as FilePicker } from './FilePicker.vue'

package/src/components/internal/AppTopBarPageSelectorInternal.vue

@@ -24,7 +24,7 @@ const emit = defineEmits<{
   select: [page: PageSelectorItem]
 }>()
 
-const { isOpen, rootRef, close, toggle } = useDropdownState()
+const { isOpen, rootRef, triggerRef, close, toggle } = useDropdownState()
 const normalizedPages = computed<PageSelectorItem[]>(() => props.pages.map(normalizeItemInput))
 
 const current = computed<PageSelectorItem | undefined>(() =>
@@ -45,6 +45,7 @@ function handleSelect(page: PageSelectorItem) {
 <template>
   <div ref="rootRef" class="mint-page-selector" :style="{ minWidth }">
     <button
+      ref="triggerRef"
       type="button"
       class="mint-page-selector__trigger"
       :class="{ 'mint-page-selector__trigger--open': isOpen }"
@@ -121,7 +122,3 @@ function handleSelect(page: PageSelectorItem) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../../styles/components/app-page-selector.css';
-</style>

package/src/components/internal/AppTopBarPillNavInternal.vue

@@ -188,7 +188,3 @@ useEventListener(() => document, 'click', handleClickOutside)
     </div>
   </nav>
 </template>
-
-<style>
-@import '../../styles/components/app-pill-nav.css';
-</style>

package/src/components/internal/DataStateInternal.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+/**
+ * Shared loading / error / empty presentation for the SDK data components.
+ *
+ * Internal: not exported from the package entrypoints. Data components render
+ * this instead of hand-rolling their own placeholder markup so that the
+ * loading, error and empty states look the same everywhere.
+ */
+import { computed } from 'vue'
+import EmptyState from '../EmptyState.vue'
+import LoadingSpinner from '../LoadingSpinner.vue'
+
+/** Single-path warning triangle used for the error state. */
+const ERROR_ICON_PATH
+  = 'M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'
+  + 'M12 9v4M12 17h.01'
+
+interface Props {
+  /** Which of the three placeholder states to render. */
+  state: 'loading' | 'error' | 'empty'
+  /** Headline for the empty/error state. */
+  title?: string
+  /** Supporting copy for the empty/error state. */
+  description?: string
+  /** Custom `<path d>` for the empty state icon (the error state has its own). */
+  iconPath?: string
+  /** Placeholder scale; also drives the loading spinner size. */
+  size?: 'sm' | 'md' | 'lg'
+  /** `EmptyState` layout variant. */
+  variant?: 'illustrated' | 'inline'
+  /** Accessible label (and visible caption) for the loading state. */
+  loadingLabel?: string
+  /** Optional call-to-action rendered under the empty/error copy. */
+  actionLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  variant: 'illustrated',
+  loadingLabel: 'Loading',
+})
+
+const emit = defineEmits<{
+  action: []
+}>()
+
+const spinnerSize = computed(() => (props.size === 'sm' ? 'sm' : props.size === 'lg' ? 'lg' : 'md'))
+</script>
+
+<template>
+  <div
+    :class="['mint-data-state', `mint-data-state--${state}`, `mint-data-state--${size}`]"
+    :data-state="state"
+  >
+    <template v-if="state === 'loading'">
+      <LoadingSpinner :size="spinnerSize" :label="loadingLabel" />
+      <p class="mint-data-state__loading-text" aria-hidden="true">{{ loadingLabel }}</p>
+    </template>
+    <EmptyState
+      v-else
+      :title="title"
+      :description="description"
+      :icon-path="state === 'error' ? ERROR_ICON_PATH : iconPath"
+      :color="state === 'error' ? 'error' : 'muted'"
+      :size="size"
+      :variant="variant"
+      :action-label="actionLabel"
+      @action="emit('action')"
+    >
+      <slot />
+    </EmptyState>
+  </div>
+</template>
+