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

package/src/components/SampleSelector.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 /** Interactive sample list with drag-and-drop group assignment, color labeling, and smart-group support. */
 import { ref, computed } from 'vue'
+import { Layers, RotateCcw, WandSparkles } from 'lucide-vue-next'
 import BaseButton from './BaseButton.vue'
 import BaseCheckbox from './BaseCheckbox.vue'
 import BaseInput from './BaseInput.vue'
@@ -268,6 +269,31 @@ defineExpose({ handleSmartGroupApply })
 
 <template>
   <div class="mint-sample-selector">
+    <div class="mint-sample-selector__header">
+      <span class="mint-sample-selector__title">Samples</span>
+      <span class="mint-sample-selector__selected">{{ selectedCount }} selected</span>
+      <div v-if="!isPlaceholderState && enableGrouping" class="mint-sample-selector__header-actions">
+        <BaseButton
+          variant="ghost"
+          size="sm"
+          :icon="enableSmartGroup ? WandSparkles : Layers"
+          class="mint-sample-selector__action-btn"
+          @click="openGroupingModal(groupingActionMode)"
+        >
+          {{ enableSmartGroup ? 'Smart group' : 'Group' }}
+        </BaseButton>
+        <BaseButton
+          v-if="internalGroups.length > 0"
+          variant="ghost"
+          size="sm"
+          :icon="RotateCcw"
+          label="Clear all groups"
+          class="mint-sample-selector__action-btn"
+          @click="clearGroups"
+        />
+      </div>
+    </div>
+
     <div v-if="error" class="mint-sample-selector__state">
       <slot name="error" :error="error">
         <DataStateInternal state="error" size="sm" :title="error" />
@@ -302,43 +328,7 @@ defineExpose({ handleSmartGroupApply })
         @update:model-value="toggleSelectAll"
       />
       <span class="mint-sample-selector__select-all-label">All samples</span>
-      <span class="mint-sample-selector__select-all-count">{{ selectedCount }} / {{ resolvedSamples.length }}</span>
-    </div>
-
-    <!-- Action Buttons Row -->
-    <div v-if="!isPlaceholderState && enableGrouping" class="mint-sample-selector__actions">
-      <div class="mint-sample-selector__actions-row">
-        <!-- Grouping Button -->
-        <BaseButton
-          :variant="enableSmartGroup && groupingEnabled ? 'primary' : 'secondary'"
-          size="sm"
-          :disabled="resolvedSamples.length === 0"
-          class="mint-sample-selector__action-btn"
-          @click="openGroupingModal(groupingActionMode)"
-        >
-          <svg v-if="enableSmartGroup" class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-          </svg>
-          <svg v-else class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3 3 7.5l9 4.5 9-4.5L12 3ZM3 12l9 4.5 9-4.5M3 16.5l9 4.5 9-4.5" />
-          </svg>
-          <span class="mint-sample-selector__action-label">Grouping</span>
-        </BaseButton>
-
-        <!-- Reset Button -->
-        <BaseButton
-          variant="ghost"
-          size="sm"
-          :disabled="internalGroups.length === 0"
-          class="mint-sample-selector__action-btn mint-sample-selector__action-btn--reset"
-          @click="clearGroups"
-          title="Clear all groups"
-        >
-          <svg class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-          </svg>
-        </BaseButton>
-      </div>
+      <span class="mint-sample-selector__select-all-count">{{ selectedCount }}/{{ resolvedSamples.length }}</span>
     </div>
 
     <!-- Grouped View -->

package/src/components/SampleSelectorGroupNode.vue

@@ -153,7 +153,7 @@ function onHeaderKeydown(event: KeyboardEvent) {
         :title="node.group?.name ?? node.label"
       >{{ node.label }}</span>
 
-      <span class="mint-sample-selector__count-badge">{{ selectedCount }} / {{ node.allSamples.length }}</span>
+      <span class="mint-sample-selector__count-badge">{{ selectedCount }}/{{ node.allSamples.length }}</span>
 
       <button
         type="button"

package/src/components/SectionCard.story.vue

@@ -46,7 +46,7 @@ function initPlayground() {
               >
                 <span style="flex: 1; min-width: 0">
                   <span style="display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">{{ e.name }}</span>
-                  <span style="display: block; font-family: 'Fira Code', monospace; font-size: 0.65625rem; color: var(--text-muted)">{{ e.code }}</span>
+                  <span style="display: block; font-family: var(--font-mono); font-size: 0.65625rem; color: var(--text-muted)">{{ e.code }}</span>
                 </span>
                 <span style="flex-shrink: 0; font-size: 0.71875rem; color: var(--text-muted)">{{ e.updated }}</span>
               </a>
@@ -139,7 +139,7 @@ function initPlayground() {
           <div class="mint-section-card__rows">
             <div v-for="n in 20" :key="n" class="mint-section-card__row">
               <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary)">Row {{ n }}</span>
-              <span style="font-family: 'Fira Code', monospace; font-size: 0.71875rem; color: var(--text-muted)">MM-2026-{{ String(n).padStart(3, '0') }}</span>
+              <span style="font-family: var(--font-mono); font-size: 0.71875rem; color: var(--text-muted)">MM-2026-{{ String(n).padStart(3, '0') }}</span>
             </div>
           </div>
           <template #footer>

package/src/components/SequenceProgressBar.story.vue

@@ -40,6 +40,7 @@ function initState() {
     showEta: true,
     showRemaining: true,
     label: 'samples',
+    failed: 0,
   }
 }
 </script>
@@ -60,6 +61,7 @@ function initState() {
             :label="state.label"
             :show-eta="state.showEta"
             :show-remaining="state.showRemaining"
+            :failed="state.failed"
           />
         </div>
       </template>
@@ -69,6 +71,7 @@ function initState() {
         <HstNumber v-model="state.total" title="Total samples" />
         <HstNumber v-model="state.remaining" title="Remaining (s)" />
         <HstText v-model="state.label" title="Unit label" />
+        <HstNumber v-model="state.failed" title="Failed" />
         <HstCheckbox v-model="state.compact" title="Compact" />
         <HstCheckbox v-model="state.showEta" title="Show ETA" />
         <HstCheckbox v-model="state.showRemaining" title="Show remaining" />
@@ -81,6 +84,12 @@ function initState() {
       </div>
     </Variant>
 
+    <Variant title="With failures">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="running" :failed="1" />
+      </div>
+    </Variant>
+
     <Variant title="Compact (no footer)">
       <!-- Compact drops the remaining/ETA row for dense instrument tables. -->
       <div style="padding: 2rem; max-width: 600px;">

package/src/components/SequenceProgressBar.vue

@@ -15,6 +15,8 @@ interface Props {
   label?: string
   showEta?: boolean
   showRemaining?: boolean
+  /** Failed injections so far; shown as "N failed" in the head when above 0. */
+  failed?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: 'samples',
   showEta: true,
   showRemaining: true,
+  failed: 0,
 })
 
 const percent = computed(() => sequenceProgressPercent(props.progress))
@@ -37,8 +40,10 @@ const hasFooter = computed(() => {
   <div class="mint-sequence-progress">
     <div class="mint-sequence-progress__header">
       <span class="mint-sequence-progress__label">
-        {{ progress.current_sample }} / {{ progress.total_samples }} {{ label }}
+        <span class="mint-sequence-progress__count">{{ progress.current_sample }} / {{ progress.total_samples }}</span>
+        {{ label }}
       </span>
+      <span v-if="failed > 0" class="mint-sequence-progress__failed">{{ failed }} failed</span>
       <span class="mint-sequence-progress__percent">{{ percent }}%</span>
     </div>
 

package/src/components/SettingsModal.schema.ts

@@ -17,7 +17,7 @@ export const APPEARANCE_TAB: SettingsTab = {
   // Heroicons "swatch" — the built-in tab sits beside plugin tabs that all
   // carry icons, so it needs one of its own to keep the rail consistent.
   icon: '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z"></path></svg>',
-  description: 'Theme, color palette, and table density',
+  description: 'Theme, color palette, and density',
 }
 
 // Map settings groups onto the form-builder's flat-section shape.

package/src/components/SettingsModal.vue

@@ -591,8 +591,8 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
 
         <div class="mint-settings-modal__setting mint-settings-modal__setting--inline">
           <div class="mint-settings-modal__setting-text">
-            <span class="mint-settings-modal__setting-label">Table density</span>
-            <span class="mint-settings-modal__setting-hint">Adjusts row height in data tables</span>
+            <span class="mint-settings-modal__setting-label">Density</span>
+            <span class="mint-settings-modal__setting-hint">Adjusts control and table row height</span>
           </div>
           <SegmentedControl
             :model-value="settings.tableDensity"

package/src/components/SmartGroupFieldRecipe.story.vue

@@ -51,7 +51,7 @@ import type { FieldRecipeApplyPayload } from './SmartGroup.types'
 }
 .sg-story__log {
   margin: 0;
-  font-family: 'Fira Code', monospace;
+  font-family: var(--font-mono);
   font-size: 0.8125rem;
   color: var(--text-secondary, #64748b);
 }

package/src/components/SmartGroupManual.story.vue

@@ -48,7 +48,7 @@ import type { ManualDonePayload } from './SmartGroup.types'
 }
 .sg-story__log {
   margin: 0;
-  font-family: 'Fira Code', monospace;
+  font-family: var(--font-mono);
   font-size: 0.8125rem;
   color: var(--text-secondary, #64748b);
 }

package/src/components/StepWizard.story.vue

@@ -23,6 +23,7 @@ function initState() {
     showProgress: true,
     showStepNumbers: true,
     size: 'md' as const,
+    orientation: 'horizontal' as const,
   }
 }
 </script>
@@ -39,6 +40,7 @@ function initState() {
             :show-progress="state.showProgress"
             :show-step-numbers="state.showStepNumbers"
             :size="state.size"
+            :orientation="state.orientation"
           >
             <template #step-setup>
               <div style="padding: 1.5rem;">
@@ -72,6 +74,14 @@ function initState() {
         <HstCheckbox v-model="state.linear" title="Linear" />
         <HstCheckbox v-model="state.showProgress" title="Show Progress" />
         <HstCheckbox v-model="state.showStepNumbers" title="Show Step Numbers" />
+        <HstSelect
+          v-model="state.orientation"
+          title="Orientation"
+          :options="[
+            { value: 'horizontal', label: 'Horizontal' },
+            { value: 'vertical', label: 'Vertical' },
+          ]"
+        />
         <HstSelect
           v-model="state.size"
           title="Size"
@@ -129,6 +139,29 @@ function initState() {
       </div>
     </Variant>
 
+    <Variant title="Vertical">
+      <div style="padding: 2rem; max-width: 700px;">
+        <StepWizard
+          :steps="mockSteps"
+          :model-value="2"
+          orientation="vertical"
+        >
+          <template #step-setup>
+            <div style="padding: 1.5rem;">Setup</div>
+          </template>
+          <template #step-samples>
+            <div style="padding: 1.5rem;">Samples</div>
+          </template>
+          <template #step-protocol>
+            <div style="padding: 1.5rem;">Protocol (active)</div>
+          </template>
+          <template #step-review>
+            <div style="padding: 1.5rem;">Review</div>
+          </template>
+        </StepWizard>
+      </div>
+    </Variant>
+
     <Variant title="Small">
       <div style="padding: 2rem; max-width: 500px;">
         <StepWizard

package/src/components/StepWizard.vue

@@ -11,6 +11,8 @@ export interface Props {
   showProgress?: boolean
   showStepNumbers?: boolean
   size?: 'sm' | 'md' | 'lg'
+  /** `vertical` stacks the steps in a rail beside the step content. */
+  orientation?: 'horizontal' | 'vertical'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   showProgress: true,
   showStepNumbers: true,
   size: 'md',
+  orientation: 'horizontal',
 })
 
 const emit = defineEmits<{
@@ -114,7 +117,11 @@ defineExpose({ setStepValid })
 
 <template>
   <div
-    :class="['mint-wizard', `mint-wizard--${props.size}`]"
+    :class="[
+      'mint-wizard',
+      `mint-wizard--${props.size}`,
+      { 'mint-wizard--vertical': props.orientation === 'vertical' },
+    ]"
     tabindex="0"
     @keydown="handleKeydown"
   >

package/src/components/WellPlate.story.vue

@@ -64,13 +64,14 @@ function generateHeatmapWells(format: WellPlateFormat): Record<string, Partial<W
 const mockWells96 = generateMockWells(96)
 const heatmapWells = generateHeatmapWells(96)
 const mockWells6 = generateMockWells(6)
-// One well per marker type; the Q / i glyph moves to a corner when an ID or label takes the centre.
+// One well per marker type; a QC well shows a mono Q and an iQC well an i when no ID or label takes the centre.
 const markerWells: Record<string, Partial<Well>> = {
   A1: { id: 'A1', row: 0, col: 0, state: 'filled', sampleType: 'sample', metadata: { label: 'S-01' } },
   A2: { id: 'A2', row: 0, col: 1, state: 'filled', sampleType: 'blank', metadata: { label: 'Blank' } },
   A3: { id: 'A3', row: 0, col: 2, state: 'filled', sampleType: 'qc', metadata: { label: 'Pool' } },
   B1: { id: 'B1', row: 1, col: 0, state: 'filled', sampleType: 'iqc', metadata: { label: 'Std 1' } },
   B2: { id: 'B2', row: 1, col: 1, state: 'filled', sampleType: 'iqc' },
+  B3: { id: 'B3', row: 1, col: 2, state: 'filled', sampleType: 'qc' },
 }
 
 const rectSelected = ref<string[]>([])
@@ -287,6 +288,7 @@ function initState() {
       <div style="padding: 2rem; display: flex; gap: 2rem;">
         <WellPlate :spec="{ format: 6, selectionMode: 'none', showWellIds: true, size: 'lg' }" :wells="markerWells" />
         <WellPlate :spec="{ format: 6, selectionMode: 'none', showWellLabels: true, size: 'lg' }" :wells="markerWells" />
+        <WellPlate :spec="{ format: 6, selectionMode: 'none', size: 'lg' }" :wells="markerWells" />
       </div>
     </Variant>
 

package/src/components/WellPlate.vue

@@ -449,6 +449,13 @@ const tableStyle = computed(() => ({
                 >
                   {{ well.id }}
                 </span>
+                <!-- QC / iQC marker glyph when the centre is free -->
+                <span
+                  v-else-if="well.sampleType === 'qc' || well.sampleType === 'iqc'"
+                  class="mint-well-plate__indicator"
+                >
+                  {{ well.sampleType === 'qc' ? 'Q' : 'i' }}
+                </span>
 
                 <!-- Badge (injection count or custom method) -->
                 <span

package/src/components/internal/AppTopBarPillNavInternal.vue

@@ -21,7 +21,26 @@ const emit = defineEmits<{
 const openItemId = ref<string | null>(null)
 const itemRefs = ref<Map<string, HTMLElement>>(new Map())
 
-const normalizedItems = computed<PillNavItem[]>(() => props.items.map(normalizePillNavItem))
+/** The bar shows this many items; the rest fold into a More dropdown. */
+const MAX_VISIBLE_ITEMS = 4
+const MORE_ITEM_ID = '__mint-pill-nav-more'
+
+const allItems = computed<PillNavItem[]>(() => props.items.map(normalizePillNavItem))
+
+const normalizedItems = computed<PillNavItem[]>(() => {
+  if (allItems.value.length <= MAX_VISIBLE_ITEMS) return allItems.value
+  const folded = allItems.value.slice(MAX_VISIBLE_ITEMS)
+  return [
+    ...allItems.value.slice(0, MAX_VISIBLE_ITEMS),
+    {
+      id: MORE_ITEM_ID,
+      label: 'More',
+      dot: folded.some(item => item.dot),
+      // A folded group contributes its options; a plain item becomes one option.
+      children: folded.flatMap(item => item.children?.length ? item.children : [item]),
+    },
+  ]
+})
 
 function handleClick(item: PillNavItem) {
   if (item.disabled) return
@@ -35,8 +54,20 @@ function handleClick(item: PillNavItem) {
 
 function handleOptionClick(option: PillNavOption, item: PillNavItem) {
   if (option.disabled) return
-  if (!option.href && !option.to) emit('option-select', option, item)
   openItemId.value = null
+  if (option.href || option.to) return
+  if (item.id !== MORE_ITEM_ID) {
+    emit('option-select', option, item)
+    return
+  }
+  // A folded entry reports as it would from its own pill.
+  const folded = allItems.value.find(candidate => candidate.id === option.id && !candidate.children?.length)
+  if (folded) {
+    emit('select', folded)
+    return
+  }
+  const group = allItems.value.find(candidate => candidate.children?.some(child => child.id === option.id))
+  if (group) emit('option-select', option, group)
 }
 
 function normalizePillNavItem(item: PillNavItemInput): PillNavItem {

package/src/components/internal/DatePickerDateInternal.vue

@@ -42,7 +42,6 @@ const {
   weekDays,
   monthYear,
   calendarDays,
-  isDateDisabled,
   formatDateValue,
   setCurrentMonthFromDate,
   prevMonth,
@@ -58,14 +57,7 @@ const selectedDate = computed(() => {
   return isNaN(date.getTime()) ? null : date
 })
 
-const displayValue = computed(() => {
-  if (!selectedDate.value) return ''
-  return selectedDate.value.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })
-})
+const displayValue = computed(() => (selectedDate.value ? formatDateValue(selectedDate.value) : ''))
 
 function selectDate(day: CalendarGridDay) {
   if (day.isDisabled || props.disabled) return
@@ -73,15 +65,6 @@ function selectDate(day: CalendarGridDay) {
   close()
 }
 
-function goToToday() {
-  const today = new Date()
-  setCurrentMonthFromDate(today)
-  if (!isDateDisabled(today)) {
-    emit('update:modelValue', formatDateValue(today))
-    close()
-  }
-}
-
 function clear() {
   emit('update:modelValue', undefined)
   close()
@@ -167,6 +150,11 @@ onBeforeUnmount(stopPositioning)
 <template>
   <div ref="container" class="mint-date-picker">
     <div class="mint-date-picker__input-wrapper">
+      <div class="mint-date-picker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
+        </svg>
+      </div>
       <input
         ref="triggerRef"
         type="text"
@@ -185,11 +173,17 @@ onBeforeUnmount(stopPositioning)
         @click="toggleCalendar"
         @keydown="handleTriggerKeydown"
       />
-      <div class="mint-date-picker__icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
+      <button
+        v-if="clearable && modelValue && !disabled"
+        type="button"
+        class="mint-date-picker__clear-btn"
+        aria-label="Clear date"
+        @click.stop="clear"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M18 6 6 18" /><path d="m6 6 12 12" />
         </svg>
-      </div>
+      </button>
     </div>
 
     <Teleport to="body">
@@ -218,24 +212,6 @@ onBeforeUnmount(stopPositioning)
             @next-month="nextMonth"
             @select="selectDate"
           />
-
-          <div class="mint-date-picker__footer">
-            <button
-              type="button"
-              class="mint-date-picker__footer-btn mint-date-picker__today-btn"
-              @click="goToToday"
-            >
-              Today
-            </button>
-            <button
-              v-if="clearable && modelValue"
-              type="button"
-              class="mint-date-picker__footer-btn mint-date-picker__clear-btn"
-              @click="clear"
-            >
-              Clear
-            </button>
-          </div>
         </div>
       </Transition>
     </Teleport>

package/src/components/internal/DatePickerDateTimeInternal.vue

@@ -76,17 +76,12 @@ const selectedTimeStr = computed(() => {
 
 const displayValue = computed(() => {
   if (!selectedDate.value) return ''
-  const dateStr = selectedDate.value.toLocaleDateString(props.locale, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })
   const timeStr = formatTime(
     selectedDate.value.getHours(),
     selectedDate.value.getMinutes(),
     props.timeFormat,
   )
-  return `${dateStr} ${timeStr}`
+  return `${formatDateValue(selectedDate.value)} ${timeStr}`
 })
 
 // Time slots
@@ -198,8 +193,8 @@ watch(isOpen, async (opened) => {
   <div ref="root" class="mint-datetime-picker">
     <div class="mint-datetime-picker__input-wrapper">
       <div class="mint-datetime-picker__icon-calendar">
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
         </svg>
       </div>
       <input
@@ -221,11 +216,6 @@ watch(isOpen, async (opened) => {
         @click="toggleDropdown"
         @keydown="handleTriggerKeydown"
       />
-      <div class="mint-datetime-picker__icon-clock">
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
     </div>
 
     <Transition

package/src/components/internal/DatePickerTimeInternal.vue

@@ -210,6 +210,11 @@ watch(isOpen, (open) => {
 <template>
   <div ref="root" class="mint-time-picker" @keydown="handleKeydown">
     <div class="mint-time-picker__input-wrapper">
+      <div class="mint-time-picker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
+        </svg>
+      </div>
       <input
         ref="trigger"
         type="text"
@@ -241,11 +246,6 @@ watch(isOpen, (open) => {
           <path d="M18 6 6 18" /><path d="m6 6 12 12" />
         </svg>
       </button>
-      <div class="mint-time-picker__icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
-        </svg>
-      </div>
     </div>
 
     <Transition
@@ -284,9 +284,6 @@ watch(isOpen, (open) => {
           >
             <span class="mint-time-picker__slot-time">{{ formatTimeSlot(slot, format) }}</span>
             <span v-if="slotReason(slot)" class="mint-time-picker__slot-reason">{{ slotReason(slot) }}</span>
-            <svg class="mint-menu-item__check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M3.5 8.5l3 3 6-7" />
-            </svg>
           </li>
         </ul>
       </div>