@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/AppTopBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Full application top bar with brand logo, page selector or plugin switcher, centered pill nav, experiment popover, and avatar menu. */
+/** Full application top bar with brand logo, static plugin identity, page selector, centered pill nav, experiment popover, and avatar menu. */
 import { ref, computed, inject, defineAsyncComponent, onMounted, onBeforeUnmount } from 'vue'
 import type {
   PillNavOption,
@@ -9,8 +9,6 @@ import type {
   PillNavItemInput,
   PageSelectorItem,
   PageSelectorItemInput,
-  PluginSwitcherInfo,
-  PluginSwitcherPlugin,
   AccountMenuItem,
   SettingsTab,
 } from '../types/components'
@@ -19,7 +17,6 @@ import ThemeToggle from './ThemeToggle.vue'
 import AppTopBarPageSelectorInternal from './internal/AppTopBarPageSelectorInternal.vue'
 import AppTopBarPillNavInternal from './internal/AppTopBarPillNavInternal.vue'
 import AppAvatarMenu from './AppAvatarMenu.vue'
-import AppPluginSwitcher from './AppPluginSwitcher.vue'
 import PluginIcon from './PluginIcon.vue'
 import RuntimeUpdateNotice from './RuntimeUpdateNotice.vue'
 import { usePlatformContext } from '../composables/usePlatformContext'
@@ -51,8 +48,6 @@ interface Props {
   pageSelector?: PageSelectorItemInput[]
   /** Active id for the preferred page selector. */
   currentPageSelectorId?: string
-  /** Optional plugin switcher shown in the left navigation position instead of pageSelector. */
-  pluginSwitcher?: PluginSwitcherInfo
 
   /** Preferred centered navigation for local modes inside the current route. */
   pillNav?: PillNavItemInput[]
@@ -111,8 +106,6 @@ const emit = defineEmits<{
   'page-selector-select': [page: PageSelectorItem]
   'pill-select': [item: PillNavItem]
   'pill-option-select': [option: PillNavOption, item: PillNavItem]
-  'plugin-switcher-select': [plugin: PluginSwitcherPlugin]
-  'plugin-switcher-install': []
   'account-menu-select': [item: AccountMenuItem]
   'sign-out': []
   'notifications-click': []
@@ -151,20 +144,24 @@ const hasPlatformPageSelector = computed(() =>
   props.pageSelector === undefined && (plugin.value?.nav_items?.length ?? 0) > 1,
 )
 const hasPageSelector = computed(() => (props.pageSelector?.length ?? 0) > 1 || hasPlatformPageSelector.value)
-const hasPluginSwitcher = computed(() => !!props.pluginSwitcher)
+/** Integrated plugins show their name as a static identity in place of the title; the page selector replaces it. */
+// Platforms before 1.3 send no display_name.
+const identityName = computed(() =>
+  isIntegrated.value && !hasPageSelector.value ? plugin.value?.display_name || plugin.value?.name : undefined,
+)
 const hasPillNav = computed(() => !!props.pillNav?.length)
 const hasAccountMenu = computed(() => !!props.accountMenu?.length)
 const hasTitleGroup = computed(
   () =>
     !hasPageSelector.value &&
-    !hasPluginSwitcher.value &&
+    !identityName.value &&
     !!props.title &&
     !!props.subtitle
 )
 const hasTitleOnly = computed(
   () =>
     !hasPageSelector.value &&
-    !hasPluginSwitcher.value &&
+    !identityName.value &&
     !hasTitleGroup.value &&
     !!props.title,
 )
@@ -307,18 +304,14 @@ const effectiveCurrentPageSelectorId = computed(() =>
         </template>
       </div>
 
-      <!-- Left: page selector or plugin switcher -->
-      <AppPluginSwitcher
-        v-if="hasPluginSwitcher && pluginSwitcher"
-        :current="pluginSwitcher.current"
-        :plugins="pluginSwitcher.plugins"
-        :install-to="pluginSwitcher.installTo"
-        :install-href="pluginSwitcher.installHref"
-        @select="emit('plugin-switcher-select', $event)"
-        @install-click="emit('plugin-switcher-install')"
-      />
+      <!-- Left: static plugin identity (not a control) -->
+      <span v-if="identityName" class="mint-topbar__plugin-identity">
+        <span class="mint-topbar__plugin-name">{{ identityName }}</span>
+      </span>
+
+      <!-- Left: page selector -->
       <AppTopBarPageSelectorInternal
-        v-else-if="hasPageSelector"
+        v-if="hasPageSelector"
         :pages="normalizedPageSelector"
         :current-page-id="effectiveCurrentPageSelectorId"
         @select="emit('page-selector-select', $event)"
@@ -451,6 +444,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
     :title="settingsConfig?.title"
     :tabs="normalizedSettingsTabs"
     :show-appearance="settingsConfig?.showAppearance ?? true"
+    :appearance-first="settingsConfig?.appearanceFirst"
     :size="settingsConfig?.size"
     :layout="settingsConfig?.layout"
     :schema="settingsConfig?.schema"

package/src/components/ArtifactSelectorModal.story.vue

@@ -231,7 +231,7 @@ function handleSelect(artifact: AnalysisArtifactSummary) {
     <Variant title="With Archived">
       <div style="padding: 2rem;">
         <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
-          Opens with archived artifacts visible. Archived rows are muted and offer Restore.
+          Opens with archived artifacts visible. Archived rows read "Archived" in their meta line and offer Restore.
         </p>
         <button
           style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"

package/src/components/ArtifactSelectorModal.vue

@@ -7,7 +7,7 @@
  * <ArtifactSelectorModal v-model="open" :experiment-id="experimentId" @select="selectArtifact" />
  * ```
  */
-import { computed, ref, watch, nextTick } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { ModalSize } from '../types'
 import type {
   AnalysisArtifactDetail,
@@ -19,11 +19,9 @@ import { formatExperimentDate } from '../composables/experiment-utils'
 import { getInjectedPlatformContext } from '../composables/platformContextHelpers'
 import { hasAllPermissions } from '../permissions'
 import BaseModal from './BaseModal.vue'
-import BaseInput from './BaseInput.vue'
+import BaseButton from './BaseButton.vue'
 import BaseSelect from './BaseSelect.vue'
-import BasePill from './BasePill.vue'
-import Skeleton from './Skeleton.vue'
-import EmptyState from './EmptyState.vue'
+import ResourcePickerListInternal from './internal/ResourcePickerListInternal.vue'
 
 interface Props {
   modelValue: boolean
@@ -101,23 +99,21 @@ const canChoosePlugin = computed(
   () => !props.pluginId && pluginFilterOptions.value.length > 2,
 )
 
-const activeIndex = ref(-1)
-const listRef = ref<HTMLElement | null>(null)
-
-const LISTBOX_ID = 'mint-artifact-selector-listbox'
-function optionId(artifact: AnalysisArtifactSummary): string {
-  return `mint-artifact-option-${artifact.id}`
-}
-const activeDescendantId = computed(() => {
-  const artifact = visibleArtifacts.value[activeIndex.value]
-  return activeIndex.value >= 0 && artifact ? optionId(artifact) : undefined
-})
-const hasResults = computed(
-  () => !isLoading.value && !error.value && visibleArtifacts.value.length > 0,
-)
-
-function statusVariant(status: string): 'success' | 'warning' {
-  return status === 'archived' ? 'warning' : 'success'
+// Re-mounting the list on open clears its keyboard highlight.
+const openCount = ref(0)
+
+function describe(artifact: AnalysisArtifactSummary) {
+  const results = artifact.result_keys.length
+  return {
+    code: artifact.artifact_key,
+    title: artifact.display_name,
+    meta: [
+      artifact.plugin_id,
+      `${results} result${results === 1 ? '' : 's'}`,
+      ...(artifact.status === 'archived' ? ['Archived'] : []),
+    ],
+    date: formatArtifactDate(artifact),
+  }
 }
 
 function formatArtifactDate(artifact: AnalysisArtifactSummary): string {
@@ -149,46 +145,11 @@ async function handleRestore(artifact: AnalysisArtifactSummary): Promise<void> {
   if (restored) emit('restore', restored)
 }
 
-function handleKeydown(event: KeyboardEvent): void {
-  const rows = visibleArtifacts.value
-  if (!rows.length) return
-  // Let the row's own Archive/Restore button handle its keys natively.
-  if ((event.target as HTMLElement | null)?.closest('.mint-artifact-selector__action')) return
-
-  switch (event.key) {
-    case 'ArrowDown':
-      event.preventDefault()
-      activeIndex.value = Math.min(activeIndex.value + 1, rows.length - 1)
-      scrollActiveIntoView()
-      break
-    case 'ArrowUp':
-      event.preventDefault()
-      activeIndex.value = Math.max(activeIndex.value - 1, 0)
-      scrollActiveIntoView()
-      break
-    case 'Enter':
-      event.preventDefault()
-      if (activeIndex.value >= 0 && activeIndex.value < rows.length) {
-        void handleSelect(rows[activeIndex.value])
-      }
-      break
-  }
-}
-
-function scrollActiveIntoView(): void {
-  nextTick(() => {
-    const row = listRef.value?.querySelector('.mint-artifact-selector__row--focused')
-    row?.scrollIntoView({ block: 'nearest' })
-  })
-}
-
-watch(visibleArtifacts, () => { activeIndex.value = -1 })
-
 watch(
   () => props.modelValue,
   (isOpen) => {
     if (isOpen) {
-      activeIndex.value = -1
+      openCount.value++
       statusFilter.value = props.includeArchived ? 'all' : 'active'
       void list()
     }
@@ -204,22 +165,23 @@ watch(
     :size="size"
     @update:model-value="emit('update:modelValue', $event)"
   >
-    <div class="mint-artifact-selector" @keydown="handleKeydown">
-      <!-- Filter row -->
-      <div class="mint-artifact-selector__filters-row">
-        <div class="mint-artifact-selector__search">
-          <BaseInput
-            v-model="search"
-            placeholder="Search artifacts..."
-            size="sm"
-            type="search"
-            role="combobox"
-            aria-label="Search analysis artifacts"
-            :aria-expanded="hasResults"
-            :aria-controls="LISTBOX_ID"
-            :aria-activedescendant="activeDescendantId"
-          />
-        </div>
+    <ResourcePickerListInternal
+      :key="openCount"
+      v-model:search="search"
+      class="mint-artifact-selector"
+      label="Analysis artifacts"
+      placeholder="Search artifacts…"
+      :items="visibleArtifacts"
+      :item-key="(artifact) => artifact.id"
+      :describe="describe"
+      :selected-key="currentArtifactId"
+      :loading="isLoading"
+      :error="error"
+      empty-title="No analysis artifacts found"
+      empty-description="Artifacts appear here once an analysis saves results for this experiment."
+      @select="handleSelect"
+    >
+      <template #filters>
         <div class="mint-artifact-selector__filter-select">
           <BaseSelect
             :model-value="statusFilter"
@@ -238,92 +200,18 @@ watch(
             @update:model-value="v => pluginFilter = String(v) || null"
           />
         </div>
-      </div>
-
-      <!-- Loading skeleton -->
-      <div v-if="isLoading" class="mint-artifact-selector__skeleton">
-        <div v-for="n in 4" :key="n" class="mint-artifact-selector__skeleton-row">
-          <div class="mint-artifact-selector__skeleton-content">
-            <Skeleton :width="120 + n * 20" height="14px" />
-            <Skeleton width="80px" height="10px" />
-          </div>
-          <Skeleton width="60px" height="20px" variant="rounded" />
-        </div>
-      </div>
-
-      <!-- Error -->
-      <div v-else-if="error" class="mint-artifact-selector__error">
-        {{ error }}
-      </div>
-
-      <!-- Empty -->
-      <EmptyState
-        v-else-if="visibleArtifacts.length === 0"
-        title="No analysis artifacts found"
-        description="Artifacts appear here once an analysis saves results for this experiment."
-        size="sm"
-      />
-
-      <!-- Artifact list -->
-      <div
-        v-else
-        :id="LISTBOX_ID"
-        ref="listRef"
-        class="mint-artifact-selector__list"
-        role="listbox"
-        aria-label="Analysis artifacts"
-      >
-        <div
-          v-for="(artifact, idx) in visibleArtifacts"
-          :id="optionId(artifact)"
-          :key="artifact.id"
-          class="mint-artifact-selector__row"
-          role="option"
-          :aria-selected="artifact.id === currentArtifactId"
-          :class="{
-            'mint-artifact-selector__row--active': artifact.id === currentArtifactId,
-            'mint-artifact-selector__row--focused': idx === activeIndex,
-            'mint-artifact-selector__row--archived': artifact.status === 'archived',
-          }"
-          @click="handleSelect(artifact)"
-          @mouseenter="activeIndex = idx"
+      </template>
+      <template v-if="canManage" #actions="{ item }">
+        <BaseButton
+          variant="ghost"
+          size="sm"
+          class="mint-artifact-selector__action"
+          :disabled="isMutating"
+          @click="item.status === 'archived' ? handleRestore(item) : handleArchive(item)"
         >
-          <div class="mint-artifact-selector__row-content">
-            <div class="mint-artifact-selector__name">
-              {{ artifact.display_name }}
-              <code class="mint-artifact-selector__key">{{ artifact.artifact_key }}</code>
-            </div>
-            <div class="mint-artifact-selector__meta">
-              <span class="mint-artifact-selector__plugin">{{ artifact.plugin_id }}</span>
-              <span>{{ artifact.result_keys.length }} result{{ artifact.result_keys.length === 1 ? '' : 's' }}</span>
-              <span>{{ formatArtifactDate(artifact) }}</span>
-            </div>
-          </div>
-          <div class="mint-artifact-selector__row-side">
-            <BasePill :variant="statusVariant(artifact.status)" size="sm">
-              {{ artifact.status }}
-            </BasePill>
-            <button
-              v-if="canManage && artifact.status === 'active'"
-              type="button"
-              class="mint-artifact-selector__action"
-              :disabled="isMutating"
-              @click.stop="handleArchive(artifact)"
-            >
-              Archive
-            </button>
-            <button
-              v-else-if="canManage && artifact.status === 'archived'"
-              type="button"
-              class="mint-artifact-selector__action"
-              :disabled="isMutating"
-              @click.stop="handleRestore(artifact)"
-            >
-              Restore
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+          {{ item.status === 'archived' ? 'Restore' : 'Archive' }}
+        </BaseButton>
+      </template>
+    </ResourcePickerListInternal>
   </BaseModal>
 </template>

package/src/components/AuditTrail.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Filterable, sortable timeline of audit entries for tracking experiment or resource history. */
 import { computed, ref } from 'vue'
-import type { AuditEntryType, AuditEntry } from '../types'
+import type { AuditEntry } from '../types'
+import BaseSelect from './BaseSelect.vue'
 import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
@@ -33,7 +34,7 @@ const emit = defineEmits<{
   'entry-click': [entry: AuditEntry]
 }>()
 
-const filterType = ref<AuditEntryType | ''>('')
+const filterType = ref('')
 const filterUser = ref('')
 
 const uniqueTypes = computed(() => {
@@ -46,6 +47,9 @@ const uniqueUsers = computed(() => {
   return Array.from(users)
 })
 
+const typeOptions = computed(() => [{ value: '', label: 'All types' }, ...uniqueTypes.value])
+const userOptions = computed(() => [{ value: '', label: 'All users' }, ...uniqueUsers.value])
+
 const filteredEntries = computed(() => {
   let result = props.entries
   if (filterType.value) {
@@ -103,14 +107,22 @@ function handleEntryClick(entry: AuditEntry) {
 <template>
   <div :class="['mint-audit-trail', `mint-audit-trail--${size}`]">
     <div v-if="showFilters" class="mint-audit-trail__filters">
-      <select v-model="filterType" class="mint-audit-trail__filter-select">
-        <option value="">All types</option>
-        <option v-for="t in uniqueTypes" :key="t" :value="t">{{ t }}</option>
-      </select>
-      <select v-model="filterUser" class="mint-audit-trail__filter-select">
-        <option value="">All users</option>
-        <option v-for="u in uniqueUsers" :key="u" :value="u">{{ u }}</option>
-      </select>
+      <BaseSelect
+        :model-value="filterType"
+        :options="typeOptions"
+        size="sm"
+        class="mint-audit-trail__filter-select"
+        aria-label="Filter by type"
+        @update:model-value="filterType = String($event)"
+      />
+      <BaseSelect
+        :model-value="filterUser"
+        :options="userOptions"
+        size="sm"
+        class="mint-audit-trail__filter-select"
+        aria-label="Filter by user"
+        @update:model-value="filterUser = String($event)"
+      />
     </div>
 
     <div
@@ -128,12 +140,14 @@ function handleEntryClick(entry: AuditEntry) {
         <slot name="entry" :entry="entry">
           <div class="mint-audit-trail__dot" />
           <div class="mint-audit-trail__content">
+            <!-- One sentence from the existing fields: who · what (4d) -->
             <div class="mint-audit-trail__header">
               <div v-if="entry.user" class="mint-audit-trail__avatar">{{ getInitials(entry.user) }}</div>
-              <span v-if="entry.user" class="mint-audit-trail__user">{{ entry.user }}</span>
+              <span class="mint-audit-trail__sentence">
+                <span v-if="entry.user" class="mint-audit-trail__user">{{ entry.user }}</span> <span class="mint-audit-trail__action">{{ entry.action }}</span>
+              </span>
               <span class="mint-audit-trail__timestamp">{{ formatTimestamp(entry.timestamp) }}</span>
             </div>
-            <div class="mint-audit-trail__action">{{ entry.action }}</div>
             <div v-if="entry.detail" class="mint-audit-trail__detail">{{ entry.detail }}</div>
             <div v-if="entry.metadata && Object.keys(entry.metadata).length" class="mint-audit-trail__metadata">
               <span

package/src/components/AutoGroupModal.vue

@@ -154,7 +154,7 @@ function onDownloadPrefilled() {
 
 // ── Manual mode ──────────────────────────────────────────────────────
 // Hex swatches (the SDK's existing manual palette) rather than SmartGroupManual's
-// var(--grp-*) story default: SampleSelector tints group colours via hex8 string
+// var(--mint-sample-1) … token story default: SampleSelector tints group colours via hex8 string
 // concatenation (`group.color + '20'`), so an emitted cohort colour must be a
 // concrete hex value — matching the colours the previous manual modal produced.
 const MANUAL_SWATCH_LABELS = ['Blue', 'Green', 'Amber', 'Red', 'Violet']

package/src/components/BaseCheckbox.story.vue

@@ -8,6 +8,22 @@ const icons = {
   database: ['M12 3c4.418 0 8 1.343 8 3s-3.582 3-8 3-8-1.343-8-3z', 'M4 6v6c0 1.657 3.582 3 8 3s8-1.343 8-3V6', 'M4 12v6c0 1.657 3.582 3 8 3s8-1.343 8-3v-6'],
   file: ['M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z', 'M14 2v6h6', 'M16 13H8', 'M16 17H8'],
 }
+
+const samples = ['Blank', 'QC', 'S-0001']
+
+function initTriState() {
+  return { selected: ['QC'] as string[], size: 'sm' as (typeof sizes)[number], disabled: false }
+}
+
+function toggleAll(state: ReturnType<typeof initTriState>) {
+  state.selected = state.selected.length === samples.length ? [] : [...samples]
+}
+
+function toggleOne(state: ReturnType<typeof initTriState>, sample: string) {
+  state.selected = state.selected.includes(sample)
+    ? state.selected.filter(s => s !== sample)
+    : [...state.selected, sample]
+}
 </script>
 
 <template>
@@ -17,6 +33,8 @@ const icons = {
         <div style="padding: 2rem;">
           <BaseCheckbox
             v-model="state.checked"
+            :indeterminate="state.indeterminate"
+            :aria-label="state.ariaLabel"
             :label="state.label"
             :disabled="state.disabled"
             :size="state.size"
@@ -29,12 +47,14 @@ const icons = {
 
       <template #controls="{ state }">
         <HstText v-model="state.label" title="Label" />
+        <HstText v-model="state.ariaLabel" title="Aria label (no visible label)" />
         <HstSelect
           v-model="state.size"
           title="Size"
           :options="sizes.map(s => ({ label: s, value: s }))"
         />
         <HstCheckbox v-model="state.checked" title="Checked" />
+        <HstCheckbox v-model="state.indeterminate" title="Indeterminate" />
         <HstCheckbox v-model="state.disabled" title="Disabled" />
       </template>
     </Variant>
@@ -52,8 +72,8 @@ const icons = {
 
     <Variant title="Without Label">
       <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center;">
-        <BaseCheckbox v-model="checked" />
-        <BaseCheckbox :model-value="false" />
+        <BaseCheckbox v-model="checked" aria-label="Include blanks" />
+        <BaseCheckbox :model-value="false" aria-label="Include QC samples" />
       </div>
     </Variant>
 
@@ -80,10 +100,46 @@ const icons = {
       </div>
     </Variant>
 
+    <Variant title="Indeterminate (tri-state)" :init-state="initTriState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; flex-direction: column; gap: 0.75rem;">
+          <BaseCheckbox
+            :model-value="state.selected.length === samples.length"
+            :indeterminate="state.selected.length > 0 && state.selected.length < samples.length"
+            :size="state.size"
+            :disabled="state.disabled"
+            label="All samples"
+            @update:model-value="toggleAll(state)"
+          />
+          <div style="display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1.5rem;">
+            <BaseCheckbox
+              v-for="sample in samples"
+              :key="sample"
+              :model-value="state.selected.includes(sample)"
+              :size="state.size"
+              :disabled="state.disabled"
+              :label="sample"
+              @update:model-value="toggleOne(state, sample)"
+            />
+          </div>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
     <Variant title="Disabled States">
       <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
         <BaseCheckbox :model-value="false" label="Disabled unchecked" disabled />
         <BaseCheckbox :model-value="true" label="Disabled checked" disabled />
+        <BaseCheckbox :model-value="false" indeterminate label="Disabled indeterminate" disabled />
       </div>
     </Variant>
 

package/src/components/BaseCheckbox.vue

@@ -4,6 +4,10 @@ import Tooltip from './Tooltip.vue'
 
 interface Props {
   modelValue?: boolean
+  /** Partially checked (e.g. select-all over a partial selection); sets `aria-checked="mixed"`. */
+  indeterminate?: boolean
+  /** Accessible name for the native input when no visible `label` is rendered (e.g. table rows). */
+  ariaLabel?: string
   label?: string
   description?: string
   icon?: string | string[]
@@ -16,6 +20,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
+  indeterminate: false,
   disabled: false,
   size: 'md',
   variant: 'default',
@@ -96,8 +101,10 @@ function iconStyle(): Record<string, string> {
       <input
         type="checkbox"
         :checked="props.modelValue"
+        :indeterminate="props.indeterminate"
+        :aria-checked="props.indeterminate ? 'mixed' : undefined"
         :disabled="props.disabled"
-        :aria-label="props.label || 'Checkbox'"
+        :aria-label="props.ariaLabel || props.label || 'Checkbox'"
         class="mint-checkbox__native"
         @change="handleChange"
       />
@@ -105,11 +112,22 @@ function iconStyle(): Record<string, string> {
         :class="[
           'mint-checkbox__box',
           `mint-checkbox__box--${props.size}`,
-          props.modelValue ? 'mint-checkbox__box--checked' : '',
+          props.modelValue && !props.indeterminate ? 'mint-checkbox__box--checked' : '',
+          props.indeterminate ? 'mint-checkbox__box--indeterminate' : '',
         ]"
       >
         <svg
-          v-if="props.modelValue"
+          v-if="props.indeterminate"
+          :class="['mint-checkbox__icon', `mint-checkbox__icon--${props.size}`]"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 16 16"
+          aria-hidden="true"
+        >
+          <path stroke-linecap="round" stroke-width="2.2" d="M4 8h8" />
+        </svg>
+        <svg
+          v-else-if="props.modelValue"
           :class="['mint-checkbox__icon', `mint-checkbox__icon--${props.size}`]"
           fill="none"
           stroke="currentColor"