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

package/src/components/BasePill.story.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import BasePill from './BasePill.vue'
-import type { PillVariant, PillSize } from '../types'
+import type { PillVariant, PillSize, Tone } from '../types'
 
-const variants: PillVariant[] = ['default', 'primary', 'success', 'warning', 'error', 'info', 'outline']
+const tones: Tone[] = ['neutral', 'primary', 'cta', 'success', 'warning', 'error', 'info']
+const variants: PillVariant[] = ['soft', 'outline']
 const sizes: PillSize[] = ['sm', 'md', 'lg']
 </script>
 
@@ -12,11 +13,13 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
       <template #default="{ state }">
         <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
           <BasePill
+            :tone="state.tone"
             :variant="state.variant"
             :size="state.size"
             :removable="state.removable"
             :disabled="state.disabled"
             :dot="state.dot"
+            :pulse="state.pulse"
             @remove="() => console.log('Remove clicked')"
           >
             {{ state.label }}
@@ -26,6 +29,11 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
 
       <template #controls="{ state }">
         <HstText v-model="state.label" title="Label" />
+        <HstSelect
+          v-model="state.tone"
+          title="Tone"
+          :options="tones.map(t => ({ label: t, value: t }))"
+        />
         <HstSelect
           v-model="state.variant"
           title="Variant"
@@ -39,6 +47,7 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
         <HstCheckbox v-model="state.removable" title="Removable" />
         <HstCheckbox v-model="state.disabled" title="Disabled" />
         <HstCheckbox v-model="state.dot" title="Status dot" />
+        <HstCheckbox v-model="state.pulse" title="Pulse" />
       </template>
     </Variant>
 
@@ -50,12 +59,12 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
           </p>
           <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
             <BasePill
-              v-for="variant in variants"
-              :key="variant"
-              :variant="variant"
+              v-for="tone in tones"
+              :key="tone"
+              :tone="tone"
               :size="size"
             >
-              {{ variant }}
+              {{ tone }}
             </BasePill>
           </div>
         </div>
@@ -64,16 +73,16 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
 
     <Variant title="Removable">
       <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center;">
-        <BasePill variant="primary" removable @remove="() => console.log('Removed')">
+        <BasePill tone="primary" removable @remove="() => console.log('Removed')">
           Sample A
         </BasePill>
-        <BasePill variant="success" removable @remove="() => console.log('Removed')">
+        <BasePill tone="success" removable @remove="() => console.log('Removed')">
           QC Passed
         </BasePill>
-        <BasePill variant="warning" removable @remove="() => console.log('Removed')">
+        <BasePill tone="warning" removable @remove="() => console.log('Removed')">
           Review
         </BasePill>
-        <BasePill variant="error" removable @remove="() => console.log('Removed')">
+        <BasePill tone="error" removable @remove="() => console.log('Removed')">
           Failed
         </BasePill>
       </div>
@@ -82,12 +91,12 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
     <Variant title="Disabled">
       <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center;">
         <BasePill
-          v-for="variant in variants"
-          :key="variant"
-          :variant="variant"
+          v-for="tone in tones"
+          :key="tone"
+          :tone="tone"
           disabled
         >
-          {{ variant }}
+          {{ tone }}
         </BasePill>
       </div>
     </Variant>
@@ -98,11 +107,11 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
           Experiment Tags
         </h3>
         <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
-          <BasePill variant="primary" removable>dose-response</BasePill>
-          <BasePill variant="info" removable>IC50</BasePill>
-          <BasePill variant="success" removable>validated</BasePill>
+          <BasePill tone="primary" removable>dose-response</BasePill>
+          <BasePill tone="info" removable>IC50</BasePill>
+          <BasePill tone="success" removable>validated</BasePill>
           <BasePill variant="outline" removable>96-well</BasePill>
-          <BasePill variant="default" removable>oncology</BasePill>
+          <BasePill removable>oncology</BasePill>
         </div>
       </div>
     </Variant>
@@ -112,32 +121,43 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
         <div style="display: flex; flex-direction: column; gap: 0.75rem;">
           <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
             <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-001</span>
-            <BasePill variant="success" size="sm">Complete</BasePill>
+            <BasePill tone="success" size="sm">Complete</BasePill>
           </div>
           <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
             <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-002</span>
-            <BasePill variant="warning" size="sm">In Progress</BasePill>
+            <BasePill tone="warning" size="sm">In Progress</BasePill>
           </div>
           <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
             <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-003</span>
-            <BasePill variant="error" size="sm">Failed</BasePill>
+            <BasePill tone="error" size="sm">Failed</BasePill>
           </div>
           <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
             <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-004</span>
-            <BasePill variant="default" size="sm">Pending</BasePill>
+            <BasePill size="sm">Pending</BasePill>
           </div>
         </div>
       </div>
     </Variant>
 
+    <Variant title="Status dot">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        <BasePill tone="success" dot pulse>Running</BasePill>
+        <BasePill tone="warning" dot>Paused</BasePill>
+        <BasePill tone="error" dot>Error</BasePill>
+        <BasePill tone="info" dot>Queued</BasePill>
+        <BasePill dot>Idle</BasePill>
+        <BasePill color="var(--mint-sample-3)" dot>Group C</BasePill>
+      </div>
+    </Variant>
+
     <Variant title="Outline variant">
       <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
-        <BasePill variant="outline" color="neutral">Neutral</BasePill>
-        <BasePill variant="outline" color="primary">Primary</BasePill>
-        <BasePill variant="outline" color="success">Success</BasePill>
-        <BasePill variant="outline" color="warning">Warning</BasePill>
-        <BasePill variant="outline" color="error">Error</BasePill>
-        <BasePill variant="outline" color="info">Info</BasePill>
+        <BasePill variant="outline" tone="neutral">Neutral</BasePill>
+        <BasePill variant="outline" tone="primary">Primary</BasePill>
+        <BasePill variant="outline" tone="success">Success</BasePill>
+        <BasePill variant="outline" tone="warning">Warning</BasePill>
+        <BasePill variant="outline" tone="error">Error</BasePill>
+        <BasePill variant="outline" tone="info">Info</BasePill>
       </div>
     </Variant>
   </Story>

package/src/components/BasePill.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-/** Compact label for tags, status indicators, and badges; supports removable and icon slots. */
-import type { PillVariant, PillColor, PillSize } from '../types'
+/** Compact label for tags, status indicators, and badges; supports a status dot, removable and icon slots. */
+import { computed } from 'vue'
+import type { PillVariant, PillSize, Tone } from '../types'
 
 /**
  * BasePill - Compact label component for tags, status indicators, and badges.
  *
  * @example
  * ```vue
- * <BasePill variant="success">Active</BasePill>
- * <BasePill variant="warning" removable @remove="handleRemove">Tag</BasePill>
+ * <BasePill tone="success">Active</BasePill>
+ * <BasePill tone="warning" removable @remove="handleRemove">Tag</BasePill>
+ * <BasePill tone="success" dot pulse>Running</BasePill>
  * <BasePill :icon="true">
  *   <template #icon><CheckIcon /></template>
  *   Verified
@@ -16,10 +18,12 @@ import type { PillVariant, PillColor, PillSize } from '../types'
  * ```
  */
 interface Props {
-  /** Visual style variant */
+  /** Semantic color */
+  tone?: Tone
+  /** Tinted fill (`soft`) or a 1px border in the tone color (`outline`) */
   variant?: PillVariant
-  /** Semantic color modifier — use with variant="outline" for colored outlines */
-  color?: PillColor
+  /** Custom accent color (any CSS color); replaces the tone's accent for the dot, tint and border */
+  color?: string
   /** Size of the pill */
   size?: PillSize
   /** Show remove button */
@@ -30,18 +34,24 @@ interface Props {
   icon?: boolean
   /** Leading status dot in the pill's tone color */
   dot?: boolean
+  /** Animate the status dot (live status) */
+  pulse?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'default',
+  tone: 'neutral',
+  variant: 'soft',
   color: undefined,
   size: 'md',
   removable: false,
   disabled: false,
   icon: false,
   dot: false,
+  pulse: false,
 })
 
+const accentStyle = computed(() => (props.color ? { '--mint-pill-tone': props.color } : undefined))
+
 /**
  * @event remove - Emitted when the remove button is clicked
  */
@@ -61,13 +71,14 @@ function handleRemove(event: MouseEvent) {
   <span
     :class="[
       'mint-pill',
+      `mint-pill--${tone}`,
       `mint-pill--${variant}`,
-      color && `mint-pill--${color}`,
       `mint-pill--${size}`,
-      { 'mint-pill--disabled': disabled, 'mint-pill--with-icon': icon },
+      { 'mint-pill--disabled': disabled, 'mint-pill--with-icon': icon, 'mint-pill--accent': color },
     ]"
+    :style="accentStyle"
   >
-    <span v-if="dot" class="mint-pill__dot" aria-hidden="true" />
+    <span v-if="dot" :class="['mint-pill__dot', { 'mint-pill__dot--pulse': pulse }]" aria-hidden="true" />
     <span v-if="icon" class="mint-pill__icon">
       <slot name="icon" />
     </span>

package/src/components/BaseRadioGroup.story.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
 import BaseRadioGroup from './BaseRadioGroup.vue'
-import type { RadioOption } from '../types'
+import type { SelectOption } from '../types'
 
 const sizes = ['sm', 'md', 'lg'] as const
 const directions = ['vertical', 'horizontal'] as const
 
-const basicOptions: RadioOption[] = [
+const basicOptions: SelectOption<string | number>[] = [
   { value: 'option1', label: 'Option 1' },
   { value: 'option2', label: 'Option 2' },
   { value: 'option3', label: 'Option 3' },
 ]
 
-const analysisOptions: RadioOption[] = [
+const analysisOptions: SelectOption<string | number>[] = [
   { value: 'dose_response', label: 'Dose-Response', description: 'Fit dose-response curves to your data' },
   { value: 'kinetics', label: 'Kinetics', description: 'Analyze time-dependent reactions' },
   { value: 'endpoint', label: 'Endpoint', description: 'Single-timepoint measurement analysis' },
   { value: 'custom', label: 'Custom', description: 'Define your own analysis pipeline', disabled: true },
 ]
 
-const tileOptions: RadioOption[] = [
+const tileOptions: SelectOption<string | number>[] = [
   {
     value: 'standard',
     label: 'Standard analysis',

package/src/components/BaseRadioGroup.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 /** Renders a group of radio buttons in list or tile layout, horizontal or vertical. */
 import { computed } from 'vue'
-import type { RadioOption, RadioOptionInput } from '../types'
+import type { OptionPrimitive, SelectOption, SelectOptionInput } from '../types'
 import { normalizeOptionInput } from '../utils/options'
 
 interface Props {
   modelValue?: string | number
-  options: RadioOptionInput[]
+  options: SelectOptionInput[]
   name: string
   disabled?: boolean
   direction?: 'horizontal' | 'vertical'
@@ -25,7 +25,7 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | number]
 }>()
 
-const normalizedOptions = computed<RadioOption[]>(() => props.options.map(normalizeOptionInput))
+const normalizedOptions = computed<SelectOption<OptionPrimitive>[]>(() => props.options.map(normalizeOptionInput<OptionPrimitive, SelectOption<OptionPrimitive>>))
 
 function handleChange(value: string | number) {
   emit('update:modelValue', value)

package/src/components/{MultiSelect.story.vue → BaseSelect.multiple.story.vue}

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import MultiSelect from './MultiSelect.vue'
-import type { MultiSelectOption } from '../types'
+import BaseSelect from './BaseSelect.vue'
+import type { SelectOption } from '../types'
 
 const sizes = ['sm', 'md', 'lg'] as const
 
-const sampleOptions: MultiSelectOption[] = [
+const sampleOptions: SelectOption[] = [
   { value: 'hela', label: 'HeLa' },
   { value: 'mcf7', label: 'MCF-7' },
   { value: 'a549', label: 'A549' },
@@ -14,7 +14,7 @@ const sampleOptions: MultiSelectOption[] = [
   { value: 'k562', label: 'K562' },
 ]
 
-const withDisabledOptions: MultiSelectOption[] = [
+const withDisabledOptions: SelectOption[] = [
   { value: 'option1', label: 'Available A' },
   { value: 'option2', label: 'Available B' },
   { value: 'option3', label: 'Unavailable', disabled: true },
@@ -36,16 +36,17 @@ function initPlayground() {
 </script>
 
 <template>
-  <Story title="Base Inputs/MultiSelect">
+  <Story title="Base Inputs/BaseSelect · multiple">
     <Variant title="Playground" :init-state="initPlayground">
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-          <MultiSelect
+          <BaseSelect
+            multiple
             v-model="state.selected"
             :options="sampleOptions"
             :placeholder="state.placeholder"
             :disabled="state.disabled"
-            :max-selections="state.useMaxSelections ? state.maxSelections : undefined"
+            :max="state.useMaxSelections ? state.maxSelections : undefined"
             :size="state.size"
           />
           <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
@@ -73,14 +74,15 @@ function initPlayground() {
           <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
             {{ size }}
           </p>
-          <MultiSelect v-model="selected" :options="sampleOptions" :size="size" />
+          <BaseSelect multiple v-model="selected" :options="sampleOptions" :size="size" />
         </div>
       </div>
     </Variant>
 
     <Variant title="Empty State">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <MultiSelect
+        <BaseSelect
+          multiple
           :model-value="[]"
           :options="sampleOptions"
           placeholder="Select cell lines..."
@@ -93,17 +95,19 @@ function initPlayground() {
         <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">
           Maximum 3 selections allowed
         </p>
-        <MultiSelect
+        <BaseSelect
+          multiple
           :model-value="['hela', 'mcf7']"
           :options="sampleOptions"
-          :max-selections="3"
+          :max="3"
         />
       </div>
     </Variant>
 
     <Variant title="With Disabled Options">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <MultiSelect
+        <BaseSelect
+          multiple
           :model-value="['option1']"
           :options="withDisabledOptions"
         />
@@ -112,7 +116,8 @@ function initPlayground() {
 
     <Variant title="All Selected">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <MultiSelect
+        <BaseSelect
+          multiple
           :model-value="sampleOptions.map(o => o.value)"
           :options="sampleOptions"
         />
@@ -121,7 +126,8 @@ function initPlayground() {
 
     <Variant title="Disabled">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <MultiSelect
+        <BaseSelect
+          multiple
           :model-value="['hela', 'a549']"
           :options="sampleOptions"
           disabled

package/src/components/{SearchableSelect.story.vue → BaseSelect.searchable.story.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { SelectOption } from '../types'
-import SearchableSelect from './SearchableSelect.vue'
+import BaseSelect from './BaseSelect.vue'
 
 const value = ref<string | number>('viability')
 const options: SelectOption[] = [
@@ -12,12 +12,12 @@ const options: SelectOption[] = [
 </script>
 
 <template>
-  <Story title="Base Inputs/SearchableSelect">
+  <Story title="Base Inputs/BaseSelect · searchable">
     <Variant title="Rich options">
       <div style="padding: 2rem; max-width: 28rem; min-height: 24rem;">
-        <SearchableSelect v-model="value" :options="options">
+        <BaseSelect searchable v-model="value" :options="options">
           <template #footer>Disabled options remain visible with their reason.</template>
-        </SearchableSelect>
+        </BaseSelect>
       </div>
     </Variant>
   </Story>

package/src/components/BaseSelect.story.vue

@@ -42,7 +42,7 @@ function initPlayground() {
             :options="fruitOptions"
             :placeholder="state.placeholder"
             :disabled="state.disabled"
-            :error="state.error"
+            :invalid="state.error"
             :size="state.size"
           />
           <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
@@ -102,7 +102,7 @@ function initPlayground() {
         <BaseSelect
           :options="fruitOptions"
           placeholder="Select a fruit..."
-          error
+          invalid
         />
       </div>
     </Variant>

package/src/components/BaseSelect.vue

@@ -1,27 +1,73 @@
-<script setup lang="ts">
-/** Renders a native `<select>` element with size, error, and disabled states. */
+<script setup lang="ts" generic="M extends boolean = false">
+/**
+ * Select one or several options.
+ * Default: a native `<select>`. `searchable`: a listbox with a search field and the `#option` / `#footer` slots.
+ * `multiple`: a checkbox chip list bound to an array, capped by `max`.
+ *
+ * @example
+ * ```vue
+ * <BaseSelect v-model="method" :options="methods" />
+ * <BaseSelect v-model="template" :options="templates" searchable placeholder="Select template…" />
+ * <BaseSelect v-model="instrumentIds" :options="instruments" multiple :max="3" />
+ * ```
+ */
 import { computed, useAttrs } from 'vue'
 import type { HTMLAttributes } from 'vue'
-import type { SelectOption, SelectOptionInput } from '../types'
+import type { OptionPrimitive, SelectOption, SelectOptionInput } from '../types'
 import { findOptionByDomValue, normalizeOptionInput } from '../utils/options'
+import SelectMultipleInternal from './internal/SelectMultipleInternal.vue'
+import SelectSearchableInternal from './internal/SelectSearchableInternal.vue'
 
 defineOptions({ inheritAttrs: false })
 
-interface Props {
-  modelValue?: string | number
-  options: SelectOptionInput<string | number>[]
+
+const props = withDefaults(defineProps<{
+  /** The selected value; an array with `multiple`. */
+  modelValue?: (M extends true ? OptionPrimitive[] : OptionPrimitive) | null
+  options: SelectOptionInput[]
+  /** Bind an array and pick several options (chip list). */
+  multiple?: M
+  /** Single selection in a listbox with a search field. Ignored with `multiple`. */
+  searchable?: boolean
+  /** Most options a `multiple` select accepts. */
+  max?: number
   placeholder?: string
+  /** Search field placeholder (`searchable`). */
+  searchPlaceholder?: string
+  /** Text shown when the search matches no option (`searchable`). */
+  noResultsText?: string
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   ariaDescribedby?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
+  /** Id of the visible label (`searchable`); the trigger is then named by the label and the selected value. */
+  ariaLabelledby?: string
+}>(), {
+  modelValue: null,
+  multiple: undefined,
+  searchable: false,
+  max: undefined,
+  placeholder: undefined,
+  searchPlaceholder: undefined,
+  noResultsText: undefined,
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
+  ariaDescribedby: undefined,
+  ariaLabelledby: undefined,
 })
+
+const emit = defineEmits<{
+  'update:modelValue': [value: M extends true ? OptionPrimitive[] : OptionPrimitive]
+}>()
+
+defineSlots<{
+  /** `searchable` only: custom option row. */
+  option?: (props: { option: SelectOption<OptionPrimitive>; selected: boolean; active: boolean }) => unknown
+  /** `searchable` only: content under the option list. */
+  footer?: () => unknown
+}>()
+
 const attrs = useAttrs()
 
 const controlAttrs = computed(() => {
@@ -33,33 +79,82 @@ const wrapperAttrs = computed<Pick<HTMLAttributes, 'class' | 'style'>>(() => ({
   style: attrs.style as HTMLAttributes['style'],
 }))
 
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number]
-}>()
-
-const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
-  props.options.map(normalizeOptionInput)
+const normalizedOptions = computed<SelectOption<OptionPrimitive>[]>(() =>
+  props.options.map(option => normalizeOptionInput<OptionPrimitive, SelectOption<OptionPrimitive>>(option)),
 )
 
+// `multiple` has the generic type `M`, so Vue declares no runtime Boolean type for it and
+// does not cast the bare attribute: `<BaseSelect multiple>` arrives as ''.
+const isMultiple = computed(() => props.multiple === true || (props.multiple as unknown) === '')
+
+const multipleValue = computed<OptionPrimitive[]>(() => {
+  const value: unknown = props.modelValue
+  return Array.isArray(value) ? value : []
+})
+const singleValue = computed<OptionPrimitive | null>(() => {
+  const value: unknown = props.modelValue
+  return Array.isArray(value) ? null : (value as OptionPrimitive | null)
+})
+
+function update(value: OptionPrimitive | OptionPrimitive[]) {
+  emit('update:modelValue', value as M extends true ? OptionPrimitive[] : OptionPrimitive)
+}
+
 function handleChange(event: Event) {
   const target = event.target as HTMLSelectElement
   const option = findOptionByDomValue(normalizedOptions.value, target.value)
-  emit('update:modelValue', option?.value ?? target.value)
+  update(option?.value ?? target.value)
 }
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" class="mint-select">
+  <SelectMultipleInternal
+    v-if="isMultiple"
+    v-bind="attrs"
+    :model-value="multipleValue"
+    :options="options"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :invalid="invalid"
+    :max="max"
+    :size="size"
+    :aria-describedby="ariaDescribedby"
+    @update:model-value="update"
+  />
+  <SelectSearchableInternal
+    v-else-if="searchable"
+    v-bind="attrs"
+    :model-value="singleValue"
+    :options="options"
+    :placeholder="placeholder"
+    :search-placeholder="searchPlaceholder"
+    :no-results-text="noResultsText"
+    :disabled="disabled"
+    :invalid="invalid"
+    :size="size"
+    :aria-labelledby="ariaLabelledby"
+    :aria-describedby="ariaDescribedby"
+    @update:model-value="update"
+  >
+    <template v-if="$slots.option" #option="slotProps">
+      <slot name="option" v-bind="slotProps" />
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </SelectSearchableInternal>
+  <div v-else v-bind="wrapperAttrs" class="mint-select">
     <select
       v-bind="controlAttrs"
-      :value="modelValue"
+      :value="singleValue ?? ''"
       :disabled="disabled"
-      :aria-invalid="error || undefined"
+      :aria-invalid="invalid || undefined"
       :aria-describedby="ariaDescribedby || undefined"
+      :aria-labelledby="ariaLabelledby || undefined"
       :class="[
         'mint-select__control',
         `mint-select__control--${size}`,
-        error ? 'mint-select__control--error' : '',
+        invalid ? 'mint-select__control--error' : '',
         disabled ? 'mint-select__control--disabled' : '',
       ]"
       @change="handleChange"