@morscherlab/mint-sdk 1.3.8 → 1.4.0-beta.1

package/src/components/{TimePicker.vue → internal/DatePickerTimeInternal.vue}

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-/** Input that opens a scrollable time-slot dropdown in 12h or 24h format, with min/max range and optional unavailable slots. */
+/** DatePicker type="time": input that opens a scrollable time-slot dropdown in 12h or 24h format, with min/max range and optional unavailable slots. */
 import { ref, computed, watch, nextTick, useId, useTemplateRef } from 'vue'
-import type { TimeSlotDisabledFn } from '../types'
-import { useDropdownState } from '../composables/useDropdownState'
+import type { TimeSlotDisabledFn } from '../../types'
+import { useDropdownState } from '../../composables/useDropdownState'
 import {
   compareTime,
   findNearestTimeSlotIndex,
   formatTimeSlot,
   generateTimeSlots,
-} from '../composables/useTimeUtils'
+} from '../../utils/time'
 
 interface Props {
   modelValue?: string
   placeholder?: string
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   min?: string
   max?: string
@@ -28,7 +28,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   placeholder: 'Select time',
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
   step: 15,
   format: '24h',
@@ -220,7 +220,7 @@ watch(isOpen, (open) => {
         :class="[
           'mint-time-picker__input',
           `mint-time-picker__input--${size}`,
-          error ? 'mint-time-picker__input--error' : '',
+          invalid ? 'mint-time-picker__input--error' : '',
           disabled ? 'mint-time-picker__input--disabled' : '',
         ]"
         role="combobox"

package/src/components/internal/FilePickerListInternal.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue'
-import IconButton from '../IconButton.vue'
+import { computed, h, nextTick, ref, type FunctionalComponent } from 'vue'
 import BaseButton from '../BaseButton.vue'
 import BaseCheckbox from '../BaseCheckbox.vue'
 import Skeleton from '../Skeleton.vue'
@@ -15,6 +14,9 @@ import type {
   PickerView,
 } from '../../types/filePicker'
 
+const DisclosureTriangle: FunctionalComponent = () =>
+  h('svg', { viewBox: '0 0 16 16', fill: 'currentColor' }, [h('path', { d: 'm6 3 5 5-5 5z' })])
+
 const props = defineProps<{
   emptyTitle?: string
   view: PickerView
@@ -241,26 +243,18 @@ function parts(name: string) {
         </span>
         <span class="mint-picker__cell mint-picker__cell--name">
           <template v-if="tree">
-            <IconButton
+            <BaseButton
               v-if="row.node.kind === 'folder' && row.node.hasChildren !== false && !reason(row.node)"
               size="sm"
               variant="ghost"
-              class="mint-picker__disclosure"
+              :class="['mint-picker__disclosure', { 'mint-picker__chevron--open': row.expanded }]"
+              :icon="DisclosureTriangle"
               :label="`${row.expanded ? 'Collapse' : 'Expand'} ${row.node.name}`"
               tabindex="-1"
               :loading="row.loading"
               @click.stop="emit('expand', row.node)"
               @dblclick.stop
-            >
-              <svg
-                viewBox="0 0 16 16"
-                fill="currentColor"
-                aria-hidden="true"
-                :class="{ 'mint-picker__chevron--open': row.expanded }"
-              >
-                <path d="m6 3 5 5-5 5z" />
-              </svg>
-            </IconButton>
+            />
             <span v-else class="mint-picker__disclosure" />
           </template>
           <svg

package/src/components/{FormActions.vue → internal/FormActionsInternal.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /**
- * Action bar rendered at the bottom of a FormBuilder.
+ * Action bar rendered at the bottom of a FormBuilder (`actions` in the control model).
  *
  * Supports two modes:
  * - Flat form: shows an optional Cancel button and a Submit button.
@@ -10,7 +10,7 @@
  * The `canProceed` prop gates the primary action (Next or Submit) to prevent
  * advancing when the current step has validation errors.
  */
-import BaseButton from './BaseButton.vue'
+import BaseButton from '../BaseButton.vue'
 
 interface Props {
   isWizard?: boolean

package/src/components/internal/FormFieldRendererInternal.vue

@@ -40,7 +40,7 @@ const componentProps = computed<Record<string, unknown>>(() => {
   if (!isChoiceField.value) return props.resolvedProps
 
   return {
-    variant: 'row',
+    layout: 'row',
     label: props.field.label,
     description: props.field.hint,
     icon: props.field.icon,

package/src/components/internal/FormSchemaInternal.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+/**
+ * FormSchema renderer behind FormBuilder and the sidebar forms: flat sections
+ * or a multi-step wizard, with the action bar when `schema.actions` is set.
+ *
+ * Slots:
+ * - `field:<name>` — override a single field's input component
+ * - `section:<id>` — replace an entire section body
+ * - `section:<id>:after` — inject content after a section
+ * - `actions` — replace the default action bar
+ */
+import { ref, computed, watch } from 'vue'
+import type { FormSchema, FormEnhancements, UseFormBuilderReturn } from '../../types/form-builder'
+import type { WizardStep } from '../../types'
+import { useFormBuilder } from '../../composables/useFormBuilder'
+import {
+  formSchemaFieldNames,
+  pickExistingRecordKeys,
+  recordValuesEqualForKeys,
+} from '../../utils/formModelSync'
+import StepWizard from '../StepWizard.vue'
+import FormSectionRenderer from './FormSectionRenderer.vue'
+import FormActionsInternal from './FormActionsInternal.vue'
+
+interface Props {
+  schema: FormSchema
+  /** Values under `modelValue`: control defaults and initial values. */
+  defaults?: Record<string, unknown>
+  modelValue?: Record<string, unknown>
+  enhancements?: FormEnhancements<Record<string, unknown>>
+  loading?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  readonly?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaults: () => ({}),
+  loading: false,
+  disabled: false,
+  readonly: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [data: Record<string, unknown>]
+  submit: [data: Record<string, unknown>]
+  cancel: []
+}>()
+
+const resolvedSchema = computed<FormSchema>(() => props.schema)
+
+const resolvedModelValue = computed<Record<string, unknown>>(() => ({
+  ...props.defaults,
+  ...(props.modelValue ?? {}),
+}))
+
+const builder = useFormBuilder(
+  resolvedSchema.value,
+  resolvedModelValue.value,
+  props.enhancements,
+)
+
+// Sync schema/control changes into the internal builder so generated forms stay coherent.
+watch(
+  resolvedSchema,
+  (schema) => {
+    const fieldNames = formSchemaFieldNames(schema)
+    const schemaValues = pickExistingRecordKeys(resolvedModelValue.value, fieldNames)
+    const existingValues = pickExistingRecordKeys(
+      builder.form.data as Record<string, unknown>,
+      fieldNames,
+    )
+    const nextValues = props.modelValue === undefined
+      ? { ...schemaValues, ...existingValues }
+      : schemaValues
+
+    builder.updateSchema(schema, nextValues)
+  },
+  { deep: true },
+)
+
+// Sync external modelValue changes into the internal form without resetting on no-op echo updates.
+watch(
+  () => props.modelValue,
+  () => {
+    const data = resolvedModelValue.value
+    const fieldNames = builderFieldNames()
+    if (recordValuesEqualForKeys(data, builder.form.data as Record<string, unknown>, fieldNames)) return
+    builder.reset(pickExistingRecordKeys(data, fieldNames))
+  },
+  { deep: true },
+)
+
+// Sync modelValue changes back to parent
+watch(
+  () => ({ ...builder.form.data }),
+  (data) => emit('update:modelValue', data as Record<string, unknown>),
+  { deep: true },
+)
+
+// Wizard support
+const isWizard = computed(() => !!resolvedSchema.value.steps)
+const wizardRef = ref<InstanceType<typeof StepWizard> | null>(null)
+
+const wizardSteps = computed<WizardStep[]>(() => {
+  if (!resolvedSchema.value.steps) return []
+  return resolvedSchema.value.steps.map((step) => ({
+    id: step.id,
+    label: step.label,
+    description: step.description,
+    icon: step.icon,
+    optional: step.optional,
+  }))
+})
+
+// Sync step validation state with StepWizard
+watch(
+  () => builder.isCurrentStepValid.value,
+  (valid) => {
+    wizardRef.value?.setStepValid(builder.currentStep.value, valid)
+  },
+)
+
+function handleNext() {
+  const success = builder.goNext()
+  if (success) {
+    wizardRef.value?.setStepValid(builder.currentStep.value - 1, true)
+  }
+}
+
+async function handleSubmit() {
+  await builder.submit()
+  const formData = builder.form.data as Record<string, unknown>
+  const visibleData = Object.fromEntries(
+    builder.fields
+      .filter((f) => builder.isFieldVisible(f.name))
+      .map((f) => [f.name, formData[f.name]]),
+  )
+  emit('submit', visibleData)
+}
+
+function handleCancel() {
+  emit('cancel')
+}
+
+function builderFieldNames(): string[] {
+  return builder.fields.map(field => field.name)
+}
+
+defineExpose({
+  form: builder.form,
+  validate: builder.validate,
+  reset: builder.reset,
+  updateSchema: builder.updateSchema,
+  goNext: builder.goNext,
+  goBack: builder.goBack,
+  goToStep: builder.goToStep,
+  builder,
+})
+</script>
+
+<template>
+  <div :class="['mint-form-builder', size ? `mint-form-builder--${size}` : '']">
+    <!-- Wizard mode -->
+    <template v-if="isWizard && resolvedSchema.steps">
+      <StepWizard
+        ref="wizardRef"
+        :steps="wizardSteps"
+        :model-value="builder.currentStep.value"
+        @update:model-value="builder.goToStep($event)"
+      >
+        <template v-for="step in resolvedSchema.steps" :key="step.id" #[`step-${step.id}`]>
+          <div class="mint-form-builder__step">
+            <template v-for="section in step.sections" :key="section.id">
+              <FormSectionRenderer
+                v-if="builder.isSectionVisible(section.id)"
+                :section="section"
+                :builder="(builder as UseFormBuilderReturn<Record<string, unknown>>)"
+              >
+                <!-- Forward field slots -->
+                <template v-for="field in section.fields" :key="field.name" #[`field:${field.name}`]="slotProps">
+                  <slot :name="`field:${field.name}`" v-bind="slotProps" />
+                </template>
+                <!-- Forward section slots -->
+                <template #[`section:${section.id}`]="slotProps">
+                  <slot :name="`section:${section.id}`" v-bind="slotProps" />
+                </template>
+                <template #[`section:${section.id}:after`]="slotProps">
+                  <slot :name="`section:${section.id}:after`" v-bind="slotProps" />
+                </template>
+              </FormSectionRenderer>
+            </template>
+          </div>
+        </template>
+
+        <template v-if="resolvedSchema.actions" #navigation="{ isFirst, isLast }">
+          <slot name="actions" :form="builder.form" :builder="builder">
+            <FormActionsInternal
+              is-wizard
+              :is-first="isFirst"
+              :is-last="isLast"
+              :can-proceed="builder.isCurrentStepValid.value"
+              :loading="loading || builder.form.isSubmitting.value"
+              :disabled="disabled"
+              :submit-label="resolvedSchema.submitLabel ?? 'Submit'"
+              :cancel-label="resolvedSchema.cancelLabel ?? 'Cancel'"
+              :show-cancel="resolvedSchema.showCancel ?? false"
+              @next="handleNext"
+              @back="builder.goBack"
+              @submit="handleSubmit"
+              @cancel="handleCancel"
+            />
+          </slot>
+        </template>
+      </StepWizard>
+    </template>
+
+    <!-- Flat mode -->
+    <template v-else-if="resolvedSchema.sections">
+      <template v-for="section in resolvedSchema.sections" :key="section.id">
+        <FormSectionRenderer
+          v-if="builder.isSectionVisible(section.id)"
+          :section="section"
+          :builder="(builder as UseFormBuilderReturn<Record<string, unknown>>)"
+        >
+          <!-- Forward field slots -->
+          <template v-for="field in section.fields" :key="field.name" #[`field:${field.name}`]="slotProps">
+            <slot :name="`field:${field.name}`" v-bind="slotProps" />
+          </template>
+          <!-- Forward section slots -->
+          <template #[`section:${section.id}`]="slotProps">
+            <slot :name="`section:${section.id}`" v-bind="slotProps" />
+          </template>
+          <template #[`section:${section.id}:after`]="slotProps">
+            <slot :name="`section:${section.id}:after`" v-bind="slotProps" />
+          </template>
+        </FormSectionRenderer>
+      </template>
+
+      <slot v-if="resolvedSchema.actions" name="actions" :form="builder.form" :builder="builder">
+        <FormActionsInternal
+          :loading="loading || builder.form.isSubmitting.value"
+          :disabled="disabled"
+          :submit-label="resolvedSchema.submitLabel ?? 'Submit'"
+          :cancel-label="resolvedSchema.cancelLabel ?? 'Cancel'"
+          :show-cancel="resolvedSchema.showCancel ?? false"
+          @submit="handleSubmit"
+          @cancel="handleCancel"
+        />
+      </slot>
+    </template>
+  </div>
+</template>

package/src/components/{UnitInput.vue → internal/NumberUnitInputInternal.vue}

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 /**
- * Numeric input with a unit segment. Several units open a menu that previews the value in each
- * unit; units with a `factor` also get a hint in the neighbour unit nearest to 1–1000.
+ * NumberInput with `units`: a numeric input with a unit segment. Several units open a menu that
+ * previews the value in each unit; units with a `factor` also get a hint in the neighbour unit
+ * nearest to 1–1000.
  */
 import { computePosition, flip, offset, shift } from '@floating-ui/dom'
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
-import { useDropdownState } from '../composables/useDropdownState'
-import { useMenuKeyboard } from '../composables/useMenuKeyboard'
-import type { UnitOption } from '../types'
+import { useDropdownState } from '../../composables/useDropdownState'
+import { useMenuKeyboard } from '../../composables/useMenuKeyboard'
+import type { UnitOption } from '../../types'
 
 interface Props {
-  modelValue?: number
+  modelValue?: number | null
   unit?: string
   units: UnitOption[]
   precision?: number
@@ -19,7 +20,7 @@ interface Props {
   step?: number
   placeholder?: string
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   convertOnUnitChange?: boolean
 }
@@ -29,15 +30,14 @@ const props = withDefaults(defineProps<Props>(), {
   step: undefined,
   placeholder: 'Enter value',
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
   convertOnUnitChange: false,
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: number | undefined]
+  'update:modelValue': [value: number | null]
   'update:unit': [unit: string]
-  'change': [data: { value: number | undefined; unit: string }]
 }>()
 
 const currentUnit = computed(() => props.unit || (props.units.length > 0 ? props.units[0].value : ''))
@@ -82,7 +82,7 @@ function formatNumber(value: number): string {
 /** The current value in `target`; null without factors or across unit groups (M vs mg/mL). */
 function convertTo(target: UnitOption): number | null {
   const current = currentOption.value
-  if (props.modelValue === undefined || current?.factor === undefined || !target.factor) return null
+  if (props.modelValue == null || current?.factor === undefined || !target.factor) return null
   if (target.group !== current.group) return null
   return props.modelValue * current.factor / target.factor
 }
@@ -114,37 +114,36 @@ const conversionHint = computed(() => {
   return best && `${formatNumber(best.value)} ${best.unit.label}`
 })
 
+// Typing emits the raw value so a prefix below `min` (the "1" of "120") stays editable;
+// the change event (blur or Enter) clamps it.
 function handleValueInput(event: Event) {
   const target = event.target as HTMLInputElement
-  const value = target.value === '' ? undefined : Number(target.value)
-
-  if (value === undefined || isNaN(value)) {
-    emit('update:modelValue', undefined)
-    emit('change', { value: undefined, unit: currentUnit.value })
-    return
-  }
+  const value = target.value === '' ? NaN : Number(target.value)
+  emit('update:modelValue', isNaN(value) ? null : value)
+}
 
-  const clamped = clamp(value)
-  emit('update:modelValue', clamped)
-  emit('change', { value: clamped, unit: currentUnit.value })
+function handleValueChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  if (target.value === '') return
+  const value = clamp(Number(target.value))
+  target.value = String(value)
+  emit('update:modelValue', value)
 }
 
 function selectUnit(newUnitValue: string) {
   close(true)
   if (newUnitValue === currentUnit.value) return
 
-  let newValue = props.modelValue
-  if (props.convertOnUnitChange && newValue !== undefined) {
+  const value = props.modelValue
+  if (props.convertOnUnitChange && value != null) {
     const oldUnit = currentOption.value
     const newUnit = findUnit(newUnitValue)
     if (oldUnit?.factor !== undefined && newUnit?.factor !== undefined && newUnit.factor !== 0) {
-      newValue = clamp(roundToPrecision(newValue * (oldUnit.factor / newUnit.factor)))
-      emit('update:modelValue', newValue)
+      emit('update:modelValue', clamp(roundToPrecision(value * (oldUnit.factor / newUnit.factor))))
     }
   }
 
   emit('update:unit', newUnitValue)
-  emit('change', { value: newValue, unit: newUnitValue })
 }
 
 // ---- Unit menu (disclosure + WAI-ARIA keyboard, shared with ActionMenu) ----
@@ -200,7 +199,7 @@ const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
   <div
     :class="[
       'mint-unit-input',
-      error ? 'mint-unit-input--error' : '',
+      invalid ? 'mint-unit-input--error' : '',
       disabled ? 'mint-unit-input--disabled' : '',
     ]"
   >
@@ -214,7 +213,7 @@ const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
           :step="step"
           :disabled="disabled"
           :placeholder="placeholder"
-          :aria-invalid="error || undefined"
+          :aria-invalid="invalid || undefined"
           :class="[
             'mint-unit-input__value',
             `mint-unit-input__value--${size}`,
@@ -222,6 +221,7 @@ const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
           ]"
           aria-label="Value"
           @input="handleValueInput"
+          @change="handleValueChange"
         />
 
         <button

package/src/components/internal/PlateEditorBindingInternal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** PlateEditor holding its own copy of the plates (useRackEditor), for ComponentBindingRenderer bindings. */
 import { watch } from 'vue'
-import type { Rack } from '../../types'
+import type { PlateEditorSpec, Rack } from '../../types'
 import { useRackEditor } from '../../composables/useRackEditor'
 import PlateEditor from '../PlateEditor.vue'
 
@@ -9,27 +9,28 @@ defineOptions({ inheritAttrs: false })
 
 const props = defineProps<{
   modelValue: Rack[]
-  activeRackId?: string
+  activeRack?: string
+  spec?: PlateEditorSpec
 }>()
 
 const editor = useRackEditor(props.modelValue)
 const { racks, activeRackId, plateEditorListeners, canUndo, canRedo } = editor
 // A new binding (template reloaded) replaces the local copy and its history, then reselects: the
-// activeRackId watch may have run first, before its rack existed.
+// activeRack watch may have run first, before its rack existed.
 watch(() => props.modelValue, (next) => {
   racks.value = next.map(rack => ({ ...rack, wells: { ...rack.wells } }))
   editor.clearHistory()
-  if (props.activeRackId) editor.setActiveRack(props.activeRackId)
+  if (props.activeRack) editor.setActiveRack(props.activeRack)
 })
-watch(() => props.activeRackId, (id) => { if (id) editor.setActiveRack(id) }, { immediate: true })
+watch(() => props.activeRack, (id) => { if (id) editor.setActiveRack(id) }, { immediate: true })
 </script>
 
 <template>
   <PlateEditor
-    history
     v-bind="$attrs"
+    :spec="{ history: true, ...spec }"
     :model-value="racks"
-    :active-rack-id="activeRackId"
+    :active-rack="activeRackId"
     :can-undo="canUndo"
     :can-redo="canRedo"
     v-on="plateEditorListeners"

package/src/components/internal/ResourcePickerListInternal.vue

@@ -9,7 +9,7 @@ import { computed, nextTick, reactive, ref, useId, watch } from 'vue'
 import BaseInput from '../BaseInput.vue'
 import Skeleton from '../Skeleton.vue'
 import EmptyState from '../EmptyState.vue'
-import type { PillVariant } from '../../types'
+import type { Tone } from '../../types'
 
 export interface ResourcePickerRow {
   /** Identifier shown as a gray pill at the start of the second line, e.g. an experiment code. */
@@ -17,8 +17,8 @@ export interface ResourcePickerRow {
   title: string
   /** Second-line facts after the code, joined with " · ". */
   meta?: string[]
-  /** Right column, above the date, tinted by its variant. */
-  status?: { label: string; variant: PillVariant }
+  /** Right column, above the date, tinted by its tone. */
+  status?: { label: string; tone: Tone }
   /** Right column, in mono. */
   date?: string
 }
@@ -222,7 +222,7 @@ watch(
             <span
               v-if="describe(item).status"
               class="mint-resource-picker__status"
-              :class="`mint-resource-picker__status--${describe(item).status!.variant}`"
+              :class="`mint-resource-picker__status--${describe(item).status!.tone}`"
               >{{ describe(item).status!.label }}</span
             >
             <span v-if="describe(item).date" class="mint-resource-picker__date">{{ describe(item).date }}</span>

package/src/components/{MultiSelect.vue → internal/SelectMultipleInternal.vue}

@@ -1,44 +1,49 @@
 <script setup lang="ts">
-/** Lets users select multiple options from a checkbox list with optional selection cap. */
+/** BaseSelect with `multiple`: a checkbox chip list with an optional selection cap (`max`). */
 import { computed } from 'vue'
-import type { MultiSelectOption, MultiSelectOptionInput, MultiSelectSize } from '../types'
-import { useListSelection } from '../composables/useListSelection'
-import { normalizeOptionInput } from '../utils/options'
+import type { OptionPrimitive, SelectOption, SelectOptionInput } from '../../types'
+import { useListSelection } from '../../composables/useListSelection'
+import { normalizeOptionInput } from '../../utils/options'
+
+type MultiOption = SelectOption<OptionPrimitive>
 
 interface Props {
-  modelValue: (string | number)[]
-  options: MultiSelectOptionInput[]
+  modelValue: OptionPrimitive[]
+  options: SelectOptionInput[]
   placeholder?: string
   disabled?: boolean
-  maxSelections?: number
-  size?: MultiSelectSize
+  invalid?: boolean
+  max?: number
+  size?: 'sm' | 'md' | 'lg'
 }
 
 const props = withDefaults(defineProps<Props>(), {
   placeholder: 'Select options...',
   disabled: false,
+  invalid: false,
+  max: undefined,
   size: 'md',
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: (string | number)[]]
+  'update:modelValue': [value: OptionPrimitive[]]
 }>()
 
-const normalizedOptions = computed<MultiSelectOption[]>(() => props.options.map(normalizeOptionInput))
+const normalizedOptions = computed<MultiOption[]>(() => props.options.map(normalizeOptionInput<OptionPrimitive, MultiOption>))
 const optionSelection = useListSelection({
   selected: () => props.modelValue,
   items: normalizedOptions,
   getValue: option => option.value,
   disabled: () => props.disabled,
-  max: () => props.maxSelections,
+  max: () => props.max,
 })
 const canSelectMore = optionSelection.canAddMore
 
-function isSelected(value: string | number): boolean {
+function isSelected(value: OptionPrimitive): boolean {
   return optionSelection.isSelected(value)
 }
 
-function toggleOption(option: MultiSelectOption) {
+function toggleOption(option: MultiOption) {
   if (props.disabled || option.disabled) return
 
   if (isSelected(option.value) || canSelectMore.value) {
@@ -46,7 +51,7 @@ function toggleOption(option: MultiSelectOption) {
   }
 }
 
-function handleKeydown(event: KeyboardEvent, option: MultiSelectOption) {
+function handleKeydown(event: KeyboardEvent, option: MultiOption) {
   if (event.key === 'Enter' || event.key === ' ') {
     event.preventDefault()
     toggleOption(option)
@@ -66,6 +71,7 @@ const selectedLabels = computed(() => {
       'mint-multi-select',
       `mint-multi-select--${size}`,
       disabled ? 'mint-multi-select--disabled' : '',
+      invalid ? 'mint-multi-select--error' : '',
     ]"
   >
     <div
@@ -75,7 +81,7 @@ const selectedLabels = computed(() => {
       {{ placeholder }}
     </div>
 
-    <div class="mint-multi-select__options" role="group">
+    <div class="mint-multi-select__options" role="group" :aria-invalid="invalid || undefined">
       <button
         v-for="option in normalizedOptions"
         :key="String(option.value)"