@morscherlab/mint-sdk 1.0.0-alpha.8 → 1.0.0-beta.1

package/src/components/ExperimentTimeline.vue

@@ -82,19 +82,19 @@ const stepTypeColors: Record<ProtocolStepType, string> = {
 }
 
 const statusClasses: Record<ProtocolStepStatus, string> = {
-  pending: 'mld-timeline__card--pending',
-  in_progress: 'mld-timeline__card--in-progress',
-  completed: 'mld-timeline__card--completed',
-  failed: 'mld-timeline__card--failed',
-  skipped: 'mld-timeline__card--skipped',
+  pending: 'mint-timeline__card--pending',
+  in_progress: 'mint-timeline__card--in-progress',
+  completed: 'mint-timeline__card--completed',
+  failed: 'mint-timeline__card--failed',
+  skipped: 'mint-timeline__card--skipped',
 }
 
 const iconStatusClasses: Record<ProtocolStepStatus, string> = {
-  pending: 'mld-timeline__icon--pending',
-  in_progress: 'mld-timeline__icon--in-progress',
-  completed: 'mld-timeline__icon--completed',
-  failed: 'mld-timeline__icon--failed',
-  skipped: 'mld-timeline__icon--skipped',
+  pending: 'mint-timeline__icon--pending',
+  in_progress: 'mint-timeline__icon--in-progress',
+  completed: 'mint-timeline__icon--completed',
+  failed: 'mint-timeline__icon--failed',
+  skipped: 'mint-timeline__icon--skipped',
 }
 
 function formatDuration(minutes: number | undefined): string {
@@ -202,14 +202,14 @@ function handleDragEnd() {
 
 <template>
   <div
-    :class="['mld-timeline', orientation === 'horizontal' ? 'mld-timeline--horizontal' : 'mld-timeline--vertical']"
+    :class="['mint-timeline', orientation === 'horizontal' ? 'mint-timeline--horizontal' : 'mint-timeline--vertical']"
     role="list"
     :aria-label="`Protocol timeline with ${sortedSteps.length} steps`"
   >
     <div
       v-for="(step, index) in sortedSteps"
       :key="step.id"
-      class="mld-timeline__step"
+      class="mint-timeline__step"
       role="listitem"
       :draggable="editable"
       @dragstart="handleDragStart($event, step)"
@@ -220,26 +220,26 @@ function handleDragEnd() {
     >
       <div
         v-if="index < sortedSteps.length - 1"
-        class="mld-timeline__connector"
+        class="mint-timeline__connector"
       />
 
       <div
         :class="[
-          'mld-timeline__card',
-          `mld-timeline__card--${size}`,
+          'mint-timeline__card',
+          `mint-timeline__card--${size}`,
           getStatusClass(step),
-          dragOverStepId === step.id ? 'mld-timeline__card--drag-over' : '',
-          draggedStepId === step.id ? 'mld-timeline__card--dragging' : '',
-          editable ? 'mld-timeline__card--editable' : '',
+          dragOverStepId === step.id ? 'mint-timeline__card--drag-over' : '',
+          draggedStepId === step.id ? 'mint-timeline__card--dragging' : '',
+          editable ? 'mint-timeline__card--editable' : '',
         ]"
         :style="colorByType ? { borderColor: getStepColor(step) } : {}"
         @click="handleStepClick(step)"
       >
-        <div :class="['mld-timeline__header', `mld-timeline__header--${size}`]">
+        <div :class="['mint-timeline__header', `mint-timeline__header--${size}`]">
           <div
             :class="[
-              'mld-timeline__icon',
-              `mld-timeline__icon--${size}`,
+              'mint-timeline__icon',
+              `mint-timeline__icon--${size}`,
               getIconStatusClass(step),
             ]"
             :style="colorByType ? { backgroundColor: `${getStepColor(step)}20`, color: getStepColor(step) } : {}"
@@ -249,19 +249,19 @@ function handleDragEnd() {
             </svg>
           </div>
 
-          <div class="mld-timeline__content">
-            <div class="mld-timeline__title-row">
-              <span :class="['mld-timeline__title', `mld-timeline__title--${size}`]">
+          <div class="mint-timeline__content">
+            <div class="mint-timeline__title-row">
+              <span :class="['mint-timeline__title', `mint-timeline__title--${size}`]">
                 {{ step.name }}
               </span>
               <span
                 v-if="showDuration && step.duration"
-                :class="['mld-timeline__duration', size === 'sm' ? 'mld-timeline__duration--sm' : '']"
+                :class="['mint-timeline__duration', size === 'sm' ? 'mint-timeline__duration--sm' : '']"
               >
                 {{ formatDuration(step.duration) }}
               </span>
             </div>
-            <div :class="['mld-timeline__type', `mld-timeline__type--${size}`]">
+            <div :class="['mint-timeline__type', `mint-timeline__type--${size}`]">
               {{ step.type.replace('_', ' ') }}
             </div>
           </div>
@@ -269,8 +269,8 @@ function handleDragEnd() {
           <svg
             v-if="collapsible && (step.description || step.parameters)"
             :class="[
-              'mld-timeline__expand-icon',
-              expandedId === step.id ? 'mld-timeline__expand-icon--expanded' : '',
+              'mint-timeline__expand-icon',
+              expandedId === step.id ? 'mint-timeline__expand-icon--expanded' : '',
             ]"
             fill="none"
             stroke="currentColor"
@@ -282,7 +282,7 @@ function handleDragEnd() {
           <button
             v-if="editable"
             type="button"
-            class="mld-timeline__remove-btn"
+            class="mint-timeline__remove-btn"
             :aria-label="`Remove ${step.name}`"
             @click.stop="handleRemoveStep(step.id)"
           >
@@ -295,32 +295,32 @@ function handleDragEnd() {
         <div
           v-if="expandedId === step.id && (step.description || step.parameters)"
           :aria-expanded="expandedId === step.id"
-          class="mld-timeline__expanded"
+          class="mint-timeline__expanded"
         >
-          <p v-if="step.description" :class="['mld-timeline__description', `mld-timeline__description--${size}`]">
+          <p v-if="step.description" :class="['mint-timeline__description', `mint-timeline__description--${size}`]">
             {{ step.description }}
           </p>
 
-          <div v-if="step.parameters && Object.keys(step.parameters).length > 0" class="mld-timeline__parameters">
+          <div v-if="step.parameters && Object.keys(step.parameters).length > 0" class="mint-timeline__parameters">
             <div
               v-for="(value, key) in step.parameters"
               :key="String(key)"
-              :class="['mld-timeline__param', `mld-timeline__param--${size}`]"
+              :class="['mint-timeline__param', `mint-timeline__param--${size}`]"
             >
-              <span class="mld-timeline__param-key">{{ key }}:</span>
-              <span class="mld-timeline__param-value">{{ value }}</span>
+              <span class="mint-timeline__param-key">{{ key }}:</span>
+              <span class="mint-timeline__param-value">{{ value }}</span>
             </div>
           </div>
 
-          <div v-if="editable" class="mld-timeline__status-controls">
+          <div v-if="editable" class="mint-timeline__status-controls">
             <button
               v-for="status in (['pending', 'in_progress', 'completed', 'failed', 'skipped'] as const)"
               :key="status"
               type="button"
               :class="[
-                'mld-timeline__status-btn',
-                `mld-timeline__status-btn--${status}`,
-                step.status === status ? 'mld-timeline__status-btn--active' : '',
+                'mint-timeline__status-btn',
+                `mint-timeline__status-btn--${status}`,
+                step.status === status ? 'mint-timeline__status-btn--active' : '',
               ]"
               @click.stop="handleStatusChange(step, status)"
             >
@@ -333,7 +333,7 @@ function handleDragEnd() {
       <button
         v-if="editable && orientation === 'vertical'"
         type="button"
-        class="mld-timeline__add-inline"
+        class="mint-timeline__add-inline"
         :aria-label="`Add step after ${step.name}`"
         @click.stop="handleAddStep(step.id)"
       >
@@ -342,20 +342,20 @@ function handleDragEnd() {
         </svg>
       </button>
 
-      <div v-if="orientation === 'vertical' && index < sortedSteps.length - 1" class="mld-timeline__spacer--vertical" />
-      <div v-if="orientation === 'horizontal' && index < sortedSteps.length - 1" class="mld-timeline__spacer--horizontal" />
+      <div v-if="orientation === 'vertical' && index < sortedSteps.length - 1" class="mint-timeline__spacer--vertical" />
+      <div v-if="orientation === 'horizontal' && index < sortedSteps.length - 1" class="mint-timeline__spacer--horizontal" />
     </div>
 
     <div
       v-if="sortedSteps.length === 0"
-      class="mld-timeline__empty"
+      class="mint-timeline__empty"
     >
-      <div class="mld-timeline__empty-content">
-        <p class="mld-timeline__empty-text">No protocol steps defined</p>
+      <div class="mint-timeline__empty-content">
+        <p class="mint-timeline__empty-text">No protocol steps defined</p>
         <button
           v-if="editable"
           type="button"
-          class="mld-timeline__empty-btn"
+          class="mint-timeline__empty-btn"
           @click="handleAddStep()"
         >
           Add First Step
@@ -366,13 +366,13 @@ function handleDragEnd() {
     <button
       v-if="editable && sortedSteps.length > 0"
       type="button"
-      :class="['mld-timeline__add-end', `mld-timeline__add-end--${size}`]"
+      :class="['mint-timeline__add-end', `mint-timeline__add-end--${size}`]"
       @click="handleAddStep()"
     >
       <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
       </svg>
-      <span :class="`mld-timeline__add-end-text--${size}`">Add Step</span>
+      <span :class="`mint-timeline__add-end-text--${size}`">Add Step</span>
     </button>
   </div>
 </template>

package/src/components/FileUploader.vue

@@ -248,7 +248,7 @@ function formatFileSize(bytes: number): string {
 </script>
 
 <template>
-  <div class="mld-file-uploader">
+  <div class="mint-file-uploader">
     <!-- Dropzone -->
     <div
       role="button"
@@ -256,11 +256,11 @@ function formatFileSize(bytes: number): string {
       :aria-label="disabled ? 'File upload disabled' : 'Click or drag files to upload'"
       :aria-disabled="disabled"
       :class="[
-        'mld-file-uploader__dropzone',
-        `mld-file-uploader__dropzone--${size}`,
-        isDragOver ? 'mld-file-uploader__dropzone--dragover' : '',
-        disabled ? 'mld-file-uploader__dropzone--disabled' : '',
-        selectedFiles.length > 0 ? 'mld-file-uploader__dropzone--has-files' : '',
+        'mint-file-uploader__dropzone',
+        `mint-file-uploader__dropzone--${size}`,
+        isDragOver ? 'mint-file-uploader__dropzone--dragover' : '',
+        disabled ? 'mint-file-uploader__dropzone--disabled' : '',
+        selectedFiles.length > 0 ? 'mint-file-uploader__dropzone--has-files' : '',
       ]"
       @click="openFilePicker"
       @keydown.enter="openFilePicker"
@@ -276,14 +276,14 @@ function formatFileSize(bytes: number): string {
         :multiple="isFolder || multiple"
         :disabled="disabled"
         :webkitdirectory="isFolder || undefined"
-        class="mld-file-uploader__input"
+        class="mint-file-uploader__input"
         @change="handleInputChange"
       />
 
-      <div class="mld-file-uploader__content">
+      <div class="mint-file-uploader__content">
         <svg
           v-if="isFolder"
-          class="mld-file-uploader__icon"
+          class="mint-file-uploader__icon"
           fill="none"
           stroke="currentColor"
           stroke-width="1.5"
@@ -295,7 +295,7 @@ function formatFileSize(bytes: number): string {
         </svg>
         <svg
           v-else
-          class="mld-file-uploader__icon"
+          class="mint-file-uploader__icon"
           fill="none"
           stroke="currentColor"
           stroke-width="1.5"
@@ -306,37 +306,37 @@ function formatFileSize(bytes: number): string {
           <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" /><path d="m16 16-4-4-4 4" /><path d="M12 12v9" />
         </svg>
 
-        <p class="mld-file-uploader__text">
+        <p class="mint-file-uploader__text">
           Drop {{ acceptLabel }} or click
         </p>
       </div>
     </div>
 
     <!-- Actions slot (e.g. template buttons) -->
-    <div v-if="$slots.actions" class="mld-file-uploader__actions">
+    <div v-if="$slots.actions" class="mint-file-uploader__actions">
       <slot name="actions" />
     </div>
 
     <!-- Folder summary display -->
-    <div v-if="isFolder && folderName && selectedFiles.length > 0" class="mld-file-uploader__folder-summary">
-      <div class="mld-file-uploader__folder-info">
-        <div class="mld-file-uploader__folder-icon-wrapper">
-          <svg class="mld-file-uploader__folder-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+    <div v-if="isFolder && folderName && selectedFiles.length > 0" class="mint-file-uploader__folder-summary">
+      <div class="mint-file-uploader__folder-info">
+        <div class="mint-file-uploader__folder-icon-wrapper">
+          <svg class="mint-file-uploader__folder-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
             <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" />
           </svg>
         </div>
-        <div class="mld-file-uploader__folder-details">
-          <span class="mld-file-uploader__folder-name">{{ folderName }}</span>
-          <span class="mld-file-uploader__folder-count">{{ selectedFiles.length }} file{{ selectedFiles.length !== 1 ? 's' : '' }}</span>
+        <div class="mint-file-uploader__folder-details">
+          <span class="mint-file-uploader__folder-name">{{ folderName }}</span>
+          <span class="mint-file-uploader__folder-count">{{ selectedFiles.length }} file{{ selectedFiles.length !== 1 ? 's' : '' }}</span>
         </div>
       </div>
       <button
         type="button"
         aria-label="Clear folder"
-        class="mld-file-uploader__remove-btn"
+        class="mint-file-uploader__remove-btn"
         @click.stop="clearAll"
       >
-        <svg class="mld-file-uploader__remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+        <svg class="mint-file-uploader__remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
           <path d="M18 6 6 18" /><path d="m6 6 12 12" />
         </svg>
       </button>
@@ -346,33 +346,33 @@ function formatFileSize(bytes: number): string {
     <TransitionGroup
       v-if="!isFolder && selectedFiles.length > 0"
       tag="ul"
-      name="mld-file-uploader-item"
-      class="mld-file-uploader__list"
+      name="mint-file-uploader-item"
+      class="mint-file-uploader__list"
     >
       <li
         v-for="(file, index) in selectedFiles"
         :key="`${file.name}-${file.size}-${index}`"
-        class="mld-file-uploader__file"
+        class="mint-file-uploader__file"
       >
-        <div class="mld-file-uploader__file-info">
+        <div class="mint-file-uploader__file-info">
           <span
-            class="mld-file-uploader__file-badge"
+            class="mint-file-uploader__file-badge"
             :style="{ '--badge-color': getFileType(file.name).color }"
           >
             {{ getFileType(file.name).label }}
           </span>
-          <div class="mld-file-uploader__file-meta">
-            <span class="mld-file-uploader__file-name">{{ file.name }}</span>
-            <span class="mld-file-uploader__file-size">{{ formatFileSize(file.size) }}</span>
+          <div class="mint-file-uploader__file-meta">
+            <span class="mint-file-uploader__file-name">{{ file.name }}</span>
+            <span class="mint-file-uploader__file-size">{{ formatFileSize(file.size) }}</span>
           </div>
         </div>
         <button
           type="button"
           :aria-label="`Remove ${file.name}`"
-          class="mld-file-uploader__remove-btn"
+          class="mint-file-uploader__remove-btn"
           @click.stop="removeFile(index)"
         >
-          <svg class="mld-file-uploader__remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+          <svg class="mint-file-uploader__remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
             <path d="M18 6 6 18" /><path d="m6 6 12 12" />
           </svg>
         </button>

package/src/components/FitPanel.vue

@@ -41,17 +41,17 @@ const showError = computed(() => props.state === 'error' && props.errorMessage)
 
 function variantClass(variant?: string): string {
   if (!variant || variant === 'default') return ''
-  return `mld-fit-panel__result-value--${variant}`
+  return `mint-fit-panel__result-value--${variant}`
 }
 </script>
 
 <template>
-  <div class="mld-fit-panel">
+  <div class="mint-fit-panel">
     <!-- Plugin controls slot -->
     <slot name="controls" />
 
     <!-- Action bar -->
-    <div class="mld-fit-panel__actions">
+    <div class="mint-fit-panel__actions">
       <BaseButton
         v-if="showRunButton"
         variant="primary"
@@ -74,7 +74,7 @@ function variantClass(variant?: string): string {
     </div>
 
     <!-- Progress -->
-    <div v-if="isRunning" class="mld-fit-panel__progress">
+    <div v-if="isRunning" class="mint-fit-panel__progress">
       <ProgressBar
         :value="progress"
         :label="progressLabel"
@@ -85,17 +85,17 @@ function variantClass(variant?: string): string {
     </div>
 
     <!-- Results -->
-    <div v-if="showResults" class="mld-fit-panel__results">
+    <div v-if="showResults" class="mint-fit-panel__results">
       <slot name="results">
-        <div class="mld-fit-panel__result-list">
+        <div class="mint-fit-panel__result-list">
           <div
             v-for="(item, idx) in results"
             :key="idx"
-            class="mld-fit-panel__result-row"
+            class="mint-fit-panel__result-row"
           >
-            <span class="mld-fit-panel__result-label">{{ item.label }}</span>
+            <span class="mint-fit-panel__result-label">{{ item.label }}</span>
             <span
-              class="mld-fit-panel__result-value"
+              class="mint-fit-panel__result-value"
               :class="variantClass(item.variant)"
             >
               {{ item.value }}

package/src/components/FormActions.vue

@@ -45,7 +45,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div class="mld-form-actions">
+  <div class="mint-form-actions">
     <BaseButton
       v-if="showCancel"
       variant="ghost"

package/src/components/FormBuilder.vue

@@ -117,7 +117,7 @@ defineExpose({
 </script>
 
 <template>
-  <div :class="['mld-form-builder', size ? `mld-form-builder--${size}` : '']">
+  <div :class="['mint-form-builder', size ? `mint-form-builder--${size}` : '']">
     <!-- Wizard mode -->
     <template v-if="isWizard && schema.steps">
       <StepWizard
@@ -127,7 +127,7 @@ defineExpose({
         @update:model-value="builder.goToStep($event)"
       >
         <template v-for="step in schema.steps" :key="step.id" #[`step-${step.id}`]>
-          <div class="mld-form-builder__step">
+          <div class="mint-form-builder__step">
             <template v-for="section in step.sections" :key="section.id">
               <FormSection
                 v-if="builder.isSectionVisible(section.id)"

package/src/components/FormField.vue

@@ -26,18 +26,18 @@ const describedBy = computed(() => errorId.value ?? hintId.value)
 </script>
 
 <template>
-  <div class="mld-form-field">
-    <div v-if="label" class="mld-form-field__label-row">
+  <div class="mint-form-field">
+    <div v-if="label" class="mint-form-field__label-row">
       <label
         :for="htmlFor"
-        class="mld-form-field__label"
+        class="mint-form-field__label"
       >
         {{ label }}
-        <span v-if="required" class="mld-form-field__required" aria-hidden="true">*</span>
+        <span v-if="required" class="mint-form-field__required" aria-hidden="true">*</span>
       </label>
       <span
         v-if="!required && showOptional"
-        class="mld-form-field__optional"
+        class="mint-form-field__optional"
       >
         optional
       </span>
@@ -45,10 +45,10 @@ const describedBy = computed(() => errorId.value ?? hintId.value)
 
     <slot :described-by="describedBy" />
 
-    <p v-if="error" :id="errorId" class="mld-form-field__error" role="alert">
+    <p v-if="error" :id="errorId" class="mint-form-field__error" role="alert">
       {{ error }}
     </p>
-    <p v-else-if="hint" :id="hintId" class="mld-form-field__hint">
+    <p v-else-if="hint" :id="hintId" class="mint-form-field__hint">
       {{ hint }}
     </p>
   </div>

package/src/components/FormSection.vue

@@ -31,7 +31,7 @@ const gridStyle = computed(() => ({
 </script>
 
 <template>
-  <div v-if="visibleFields.length > 0" class="mld-form-section">
+  <div v-if="visibleFields.length > 0" class="mint-form-section">
     <slot :name="`section:${section.id}`" :section="section" :form="builder.form">
       <!-- Collapsible variant -->
       <CollapsibleCard
@@ -40,7 +40,7 @@ const gridStyle = computed(() => ({
         :subtitle="section.description"
         :default-open="section.defaultOpen ?? true"
       >
-        <div class="mld-form-section__grid" :style="gridStyle">
+        <div class="mint-form-section__grid" :style="gridStyle">
           <div
             v-for="field in visibleFields"
             :key="field.name"
@@ -58,12 +58,12 @@ const gridStyle = computed(() => ({
       </CollapsibleCard>
 
       <!-- Static variant -->
-      <div v-else class="mld-form-section--static">
-        <div v-if="section.title || section.description" class="mld-form-section__header">
-          <h3 v-if="section.title" class="mld-form-section__title">{{ section.title }}</h3>
-          <p v-if="section.description" class="mld-form-section__description">{{ section.description }}</p>
+      <div v-else class="mint-form-section--static">
+        <div v-if="section.title || section.description" class="mint-form-section__header">
+          <h3 v-if="section.title" class="mint-form-section__title">{{ section.title }}</h3>
+          <p v-if="section.description" class="mint-form-section__description">{{ section.description }}</p>
         </div>
-        <div class="mld-form-section__grid" :style="gridStyle">
+        <div class="mint-form-section__grid" :style="gridStyle">
           <div
             v-for="field in visibleFields"
             :key="field.name"

package/src/components/FormulaInput.vue

@@ -69,20 +69,20 @@ function handleInput(event: Event) {
 <template>
   <div
     :class="[
-      'mld-formula-input',
-      error ? 'mld-formula-input--error' : '',
-      disabled ? 'mld-formula-input--disabled' : '',
+      'mint-formula-input',
+      error ? 'mint-formula-input--error' : '',
+      disabled ? 'mint-formula-input--disabled' : '',
     ]"
   >
-    <div class="mld-formula-input__field">
+    <div class="mint-formula-input__field">
       <input
         type="text"
         :value="modelValue"
         :placeholder="placeholder"
         :disabled="disabled"
         :class="[
-          'mld-formula-input__input',
-          `mld-formula-input__input--${size}`,
+          'mint-formula-input__input',
+          `mint-formula-input__input--${size}`,
         ]"
         aria-label="Chemical formula"
         @input="handleInput"
@@ -90,9 +90,9 @@ function handleInput(event: Event) {
 
       <div
         v-if="(showPreview && modelValue) || (showMW && modelValue && !getError(modelValue) && getMW(modelValue) !== null)"
-        class="mld-formula-input__preview"
+        class="mint-formula-input__preview"
       >
-        <span v-if="showPreview && modelValue" class="mld-formula-input__preview-formula">
+        <span v-if="showPreview && modelValue" class="mint-formula-input__preview-formula">
           <template v-for="(part, i) in getParts(modelValue)" :key="i">
             <span v-if="part.type === 'element'">{{ part.text }}</span>
             <span v-else-if="part.type === 'subscript'" style="vertical-align: sub; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
@@ -104,7 +104,7 @@ function handleInput(event: Event) {
         </span>
         <span
           v-if="showMW && modelValue && !getError(modelValue) && getMW(modelValue) !== null"
-          class="mld-formula-input__mw"
+          class="mint-formula-input__mw"
         >
           {{ formatMW(modelValue) }}
         </span>
@@ -113,7 +113,7 @@ function handleInput(event: Event) {
 
     <div
       v-if="modelValue && getError(modelValue)"
-      class="mld-formula-input__error-text"
+      class="mint-formula-input__error-text"
     >
       {{ getError(modelValue) }}
     </div>