@morscherlab/mint-sdk 1.0.0-alpha.7 → 1.0.0-alpha.9

package/src/components/BaseRadioGroup.vue

@@ -30,20 +30,20 @@ function handleChange(value: string | number) {
 
 <template>
   <div
-    :class="['mld-radio-group', `mld-radio-group--${props.direction}`, `mld-radio-group--${props.variant}`]"
+    :class="['mint-radio-group', `mint-radio-group--${props.direction}`, `mint-radio-group--${props.variant}`]"
     role="radiogroup"
   >
     <label
       v-for="option in props.options"
       :key="String(option.value)"
       :class="[
-        'mld-radio-option',
-        props.modelValue === option.value ? 'mld-radio-option--selected' : '',
-        (props.disabled || option.disabled) ? 'mld-radio-option--disabled' : '',
+        'mint-radio-option',
+        props.modelValue === option.value ? 'mint-radio-option--selected' : '',
+        (props.disabled || option.disabled) ? 'mint-radio-option--disabled' : '',
       ]"
     >
       <template v-if="props.variant === 'list'">
-        <div :class="['mld-radio-option__input-wrapper', `mld-radio-option__input-wrapper--${props.size}`]">
+        <div :class="['mint-radio-option__input-wrapper', `mint-radio-option__input-wrapper--${props.size}`]">
           <input
             type="radio"
             :name="props.name"
@@ -51,30 +51,30 @@ function handleChange(value: string | number) {
             :checked="props.modelValue === option.value"
             :disabled="props.disabled || option.disabled"
             :aria-describedby="option.description ? `${props.name}-${option.value}-desc` : undefined"
-            class="mld-radio-option__native"
+            class="mint-radio-option__native"
             @change="handleChange(option.value)"
           />
           <div
             :class="[
-              'mld-radio-option__circle',
-              `mld-radio-option__circle--${props.size}`,
-              props.modelValue === option.value ? 'mld-radio-option__circle--checked' : '',
+              'mint-radio-option__circle',
+              `mint-radio-option__circle--${props.size}`,
+              props.modelValue === option.value ? 'mint-radio-option__circle--checked' : '',
             ]"
           >
             <div
               v-if="props.modelValue === option.value"
-              :class="['mld-radio-option__dot', `mld-radio-option__dot--${props.size}`]"
+              :class="['mint-radio-option__dot', `mint-radio-option__dot--${props.size}`]"
             />
           </div>
         </div>
-        <div class="mld-radio-option__content">
-          <span :class="['mld-radio-option__label', `mld-radio-option__label--${props.size}`]">
+        <div class="mint-radio-option__content">
+          <span :class="['mint-radio-option__label', `mint-radio-option__label--${props.size}`]">
             {{ option.label }}
           </span>
           <span
             v-if="option.description"
             :id="`${props.name}-${option.value}-desc`"
-            :class="['mld-radio-option__description', `mld-radio-option__description--${props.size}`]"
+            :class="['mint-radio-option__description', `mint-radio-option__description--${props.size}`]"
           >
             {{ option.description }}
           </span>
@@ -89,28 +89,28 @@ function handleChange(value: string | number) {
           :checked="props.modelValue === option.value"
           :disabled="props.disabled || option.disabled"
           :aria-describedby="option.description ? `${props.name}-${option.value}-desc` : undefined"
-          class="mld-radio-option__native"
+          class="mint-radio-option__native"
           @change="handleChange(option.value)"
         />
-        <div class="mld-radio-option__head">
+        <div class="mint-radio-option__head">
           <div
             :class="[
-              'mld-radio-option__circle',
-              `mld-radio-option__circle--${props.size}`,
-              props.modelValue === option.value ? 'mld-radio-option__circle--checked' : '',
+              'mint-radio-option__circle',
+              `mint-radio-option__circle--${props.size}`,
+              props.modelValue === option.value ? 'mint-radio-option__circle--checked' : '',
             ]"
           >
             <div
               v-if="props.modelValue === option.value"
-              :class="['mld-radio-option__dot', `mld-radio-option__dot--${props.size}`]"
+              :class="['mint-radio-option__dot', `mint-radio-option__dot--${props.size}`]"
             />
           </div>
-          <span class="mld-radio-option__title">{{ option.label }}</span>
+          <span class="mint-radio-option__title">{{ option.label }}</span>
         </div>
         <span
           v-if="option.description"
           :id="`${props.name}-${option.value}-desc`"
-          class="mld-radio-option__description"
+          class="mint-radio-option__description"
         >
           {{ option.description }}
         </span>

package/src/components/BaseSelect.vue

@@ -32,17 +32,17 @@ function handleChange(event: Event) {
 </script>
 
 <template>
-  <div class="mld-select">
+  <div class="mint-select">
     <select
       :value="modelValue"
       :disabled="disabled"
       :aria-invalid="error || undefined"
       :aria-describedby="ariaDescribedby || undefined"
       :class="[
-        'mld-select__control',
-        `mld-select__control--${size}`,
-        error ? 'mld-select__control--error' : '',
-        disabled ? 'mld-select__control--disabled' : '',
+        'mint-select__control',
+        `mint-select__control--${size}`,
+        error ? 'mint-select__control--error' : '',
+        disabled ? 'mint-select__control--disabled' : '',
       ]"
       @change="handleChange"
     >
@@ -58,7 +58,7 @@ function handleChange(event: Event) {
         {{ option.label }}
       </option>
     </select>
-    <div class="mld-select__icon">
+    <div class="mint-select__icon">
       <svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
         <path d="m6 9 6 6 6-6" />
       </svg>

package/src/components/BaseSlider.vue

@@ -63,11 +63,11 @@ function handleInput(event: Event) {
 </script>
 
 <template>
-  <div class="mld-slider" :class="{ 'mld-slider--disabled': disabled }">
-    <div class="mld-slider__container">
+  <div class="mint-slider" :class="{ 'mint-slider--disabled': disabled }">
+    <div class="mint-slider__container">
       <!-- Track background -->
       <div
-        class="mld-slider__track"
+        class="mint-slider__track"
         :style="{ height: `${sizeConfig.height}px` }"
       />
 
@@ -75,7 +75,7 @@ function handleInput(event: Event) {
            meet at every position (no gap at the right edge, no overshoot
            at the left). -->
       <div
-        class="mld-slider__fill"
+        class="mint-slider__fill"
         :style="{
           height: `${sizeConfig.height}px`,
           width: thumbPosition,
@@ -85,7 +85,7 @@ function handleInput(event: Event) {
       <!-- Native range input -->
       <input
         type="range"
-        class="mld-slider__input"
+        class="mint-slider__input"
         :value="currentValue"
         :min="min"
         :max="max"
@@ -104,8 +104,8 @@ function handleInput(event: Event) {
 
       <!-- Custom thumb — translateX(-50%) centers it on `left` -->
       <div
-        class="mld-slider__thumb"
-        :class="{ 'mld-slider__thumb--dragging': isDragging }"
+        class="mint-slider__thumb"
+        :class="{ 'mint-slider__thumb--dragging': isDragging }"
         :style="{
           width: `${sizeConfig.thumb}px`,
           height: `${sizeConfig.thumb}px`,
@@ -115,7 +115,7 @@ function handleInput(event: Event) {
     </div>
 
     <!-- Value display -->
-    <span v-if="showValue" class="mld-slider__value">
+    <span v-if="showValue" class="mint-slider__value">
       {{ currentValue }}
     </span>
   </div>

package/src/components/BaseTabs.vue

@@ -28,7 +28,7 @@ function selectTab(tabId: string) {
 </script>
 
 <template>
-  <div :class="['mld-tabs', `mld-tabs--${variant}`]" role="tablist">
+  <div :class="['mint-tabs', `mint-tabs--${variant}`]" role="tablist">
     <button
       v-for="tab in tabs"
       :key="tab.id"
@@ -37,16 +37,16 @@ function selectTab(tabId: string) {
       :aria-selected="activeTab === tab.id"
       :aria-disabled="tab.disabled"
       :class="[
-        'mld-tab',
-        activeTab === tab.id ? 'mld-tab--active' : '',
-        tab.disabled ? 'mld-tab--disabled' : '',
+        'mint-tab',
+        activeTab === tab.id ? 'mint-tab--active' : '',
+        tab.disabled ? 'mint-tab--disabled' : '',
       ]"
       @click="selectTab(tab.id)"
     >
-      <span class="mld-tab__content">
-        <span v-if="tab.icon" class="mld-tab__icon">{{ tab.icon }}</span>
+      <span class="mint-tab__content">
+        <span v-if="tab.icon" class="mint-tab__icon">{{ tab.icon }}</span>
         {{ tab.label }}
-        <span v-if="tab.badge !== undefined" class="mld-tab__badge">
+        <span v-if="tab.badge !== undefined" class="mint-tab__badge">
           {{ tab.badge }}
         </span>
       </span>

package/src/components/BaseTextarea.vue

@@ -45,11 +45,11 @@ function handleInput(event: Event) {
     :aria-invalid="props.error || undefined"
     :aria-describedby="props.ariaDescribedby || undefined"
     :class="[
-      'mld-textarea',
-      `mld-textarea--${props.size}`,
-      `mld-textarea--resize-${props.resize}`,
-      props.error ? 'mld-textarea--error' : '',
-      props.disabled ? 'mld-textarea--disabled' : '',
+      'mint-textarea',
+      `mint-textarea--${props.size}`,
+      `mint-textarea--resize-${props.resize}`,
+      props.error ? 'mint-textarea--error' : '',
+      props.disabled ? 'mint-textarea--disabled' : '',
     ]"
     @input="handleInput"
     @focus="emit('focus', $event)"

package/src/components/BaseToggle.vue

@@ -36,9 +36,9 @@ function handleKeydown(event: KeyboardEvent) {
 <template>
   <div
     :class="[
-      'mld-toggle',
-      reverse ? 'mld-toggle--reverse' : '',
-      disabled ? 'mld-toggle--disabled' : '',
+      'mint-toggle',
+      reverse ? 'mint-toggle--reverse' : '',
+      disabled ? 'mint-toggle--disabled' : '',
     ]"
     @click="toggle"
   >
@@ -48,23 +48,23 @@ function handleKeydown(event: KeyboardEvent) {
       :aria-checked="modelValue"
       :aria-label="label || 'Toggle'"
       :class="[
-        'mld-toggle__track',
-        `mld-toggle__track--${size}`,
-        modelValue ? 'mld-toggle__track--on' : 'mld-toggle__track--off',
+        'mint-toggle__track',
+        `mint-toggle__track--${size}`,
+        modelValue ? 'mint-toggle__track--on' : 'mint-toggle__track--off',
       ]"
       @keydown="handleKeydown"
     >
       <span
         :class="[
-          'mld-toggle__knob',
-          `mld-toggle__knob--${size}`,
-          modelValue ? `mld-toggle__knob--on-${size}` : 'mld-toggle__knob--off',
+          'mint-toggle__knob',
+          `mint-toggle__knob--${size}`,
+          modelValue ? `mint-toggle__knob--on-${size}` : 'mint-toggle__knob--off',
         ]"
       />
     </div>
     <span
       v-if="label"
-      :class="['mld-toggle__label', `mld-toggle__label--${size}`]"
+      :class="['mint-toggle__label', `mint-toggle__label--${size}`]"
     >
       {{ label }}
     </span>

package/src/components/BatchProgressList.vue

@@ -61,34 +61,34 @@ watch(
 </script>
 
 <template>
-  <div class="mld-batch-progress">
-    <div v-if="title" class="mld-batch-progress__header">
-      <span class="mld-batch-progress__title">{{ title }}</span>
-      <span class="mld-batch-progress__percent">{{ summary.percent }}%</span>
+  <div class="mint-batch-progress">
+    <div v-if="title" class="mint-batch-progress__header">
+      <span class="mint-batch-progress__title">{{ title }}</span>
+      <span class="mint-batch-progress__percent">{{ summary.percent }}%</span>
     </div>
 
-    <div class="mld-batch-progress__overall">
+    <div class="mint-batch-progress__overall">
       <div
-        class="mld-batch-progress__overall-bar"
+        class="mint-batch-progress__overall-bar"
         :style="{ width: `${summary.percent}%` }"
       />
     </div>
 
     <slot v-if="showSummary" name="summary" :summary="summary">
-      <div class="mld-batch-progress__summary">
-        <span v-if="summary.completed" class="mld-batch-progress__summary-item mld-batch-progress__summary-item--completed">
+      <div class="mint-batch-progress__summary">
+        <span v-if="summary.completed" class="mint-batch-progress__summary-item mint-batch-progress__summary-item--completed">
           {{ summary.completed }} completed
         </span>
-        <span v-if="summary.processing" class="mld-batch-progress__summary-item mld-batch-progress__summary-item--processing">
+        <span v-if="summary.processing" class="mint-batch-progress__summary-item mint-batch-progress__summary-item--processing">
           {{ summary.processing }} processing
         </span>
-        <span v-if="summary.error" class="mld-batch-progress__summary-item mld-batch-progress__summary-item--error">
+        <span v-if="summary.error" class="mint-batch-progress__summary-item mint-batch-progress__summary-item--error">
           {{ summary.error }} failed
         </span>
-        <span v-if="summary.pending" class="mld-batch-progress__summary-item mld-batch-progress__summary-item--pending">
+        <span v-if="summary.pending" class="mint-batch-progress__summary-item mint-batch-progress__summary-item--pending">
           {{ summary.pending }} pending
         </span>
-        <span v-if="summary.skipped" class="mld-batch-progress__summary-item mld-batch-progress__summary-item--skipped">
+        <span v-if="summary.skipped" class="mint-batch-progress__summary-item mint-batch-progress__summary-item--skipped">
           {{ summary.skipped }} skipped
         </span>
       </div>
@@ -96,19 +96,19 @@ watch(
 
     <div
       ref="listRef"
-      class="mld-batch-progress__list"
+      class="mint-batch-progress__list"
       :style="maxHeight ? { maxHeight, overflowY: 'auto' } : {}"
     >
       <div
         v-for="item in items"
         :key="item.id"
         :data-item-id="item.id"
-        :class="['mld-batch-progress__item', `mld-batch-progress__item--${item.status}`]"
+        :class="['mint-batch-progress__item', `mint-batch-progress__item--${item.status}`]"
       >
         <slot name="item" :item="item">
-          <div class="mld-batch-progress__item-row">
+          <div class="mint-batch-progress__item-row">
             <!-- Status icon -->
-            <div :class="['mld-batch-progress__item-icon', `mld-batch-progress__item-icon--${item.status}`]">
+            <div :class="['mint-batch-progress__item-icon', `mint-batch-progress__item-icon--${item.status}`]">
               <!-- Pending: clock -->
               <svg v-if="item.status === 'pending'" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
                 <circle cx="8" cy="8" r="6.5" />
@@ -132,19 +132,19 @@ watch(
               </svg>
             </div>
 
-            <span class="mld-batch-progress__item-label">{{ item.label }}</span>
+            <span class="mint-batch-progress__item-label">{{ item.label }}</span>
 
             <!-- Mini progress bar for processing items -->
-            <div v-if="item.status === 'processing' && item.progress !== undefined" class="mld-batch-progress__item-progress">
-              <div class="mld-batch-progress__item-progress-bar" :style="{ width: `${item.progress}%` }" />
+            <div v-if="item.status === 'processing' && item.progress !== undefined" class="mint-batch-progress__item-progress">
+              <div class="mint-batch-progress__item-progress-bar" :style="{ width: `${item.progress}%` }" />
             </div>
 
             <!-- Actions -->
-            <div class="mld-batch-progress__item-actions">
+            <div class="mint-batch-progress__item-actions">
               <button
                 v-if="item.status === 'error'"
                 type="button"
-                class="mld-batch-progress__retry-btn"
+                class="mint-batch-progress__retry-btn"
                 @click.stop="emit('retry', item.id)"
               >
                 Retry
@@ -152,7 +152,7 @@ watch(
               <button
                 v-if="item.status === 'processing'"
                 type="button"
-                class="mld-batch-progress__cancel-btn"
+                class="mint-batch-progress__cancel-btn"
                 @click.stop="emit('cancel', item.id)"
               >
                 Cancel
@@ -161,15 +161,15 @@ watch(
           </div>
 
           <!-- Error message (expandable) -->
-          <div v-if="item.status === 'error' && item.message" class="mld-batch-progress__item-error">
+          <div v-if="item.status === 'error' && item.message" class="mint-batch-progress__item-error">
             <button
               type="button"
-              class="mld-batch-progress__error-toggle"
+              class="mint-batch-progress__error-toggle"
               @click.stop="toggleError(item.id)"
             >
               {{ expandedErrors.has(item.id) ? 'Hide error' : 'Show error' }}
             </button>
-            <div v-if="expandedErrors.has(item.id)" class="mld-batch-progress__item-message">
+            <div v-if="expandedErrors.has(item.id)" class="mint-batch-progress__item-message">
               {{ item.message }}
             </div>
           </div>

package/src/components/Breadcrumb.vue

@@ -23,31 +23,31 @@ function handleClick(item: BreadcrumbItem) {
 </script>
 
 <template>
-  <nav class="mld-breadcrumb" aria-label="Breadcrumb">
-    <ol class="mld-breadcrumb__list">
+  <nav class="mint-breadcrumb" aria-label="Breadcrumb">
+    <ol class="mint-breadcrumb__list">
       <li
         v-for="(item, index) in items"
         :key="index"
-        class="mld-breadcrumb__item"
+        class="mint-breadcrumb__item"
       >
         <slot name="item" :item="item" :index="index" :is-last="index === items.length - 1">
           <a
             v-if="item.href && index !== items.length - 1"
             :href="item.href"
-            class="mld-breadcrumb__link"
+            class="mint-breadcrumb__link"
           >
             {{ item.label }}
           </a>
           <button
             v-else-if="index !== items.length - 1"
-            class="mld-breadcrumb__link"
+            class="mint-breadcrumb__link"
             @click="handleClick(item)"
           >
             {{ item.label }}
           </button>
           <span
             v-else
-            class="mld-breadcrumb__current"
+            class="mint-breadcrumb__current"
             aria-current="page"
           >
             {{ item.label }}
@@ -55,11 +55,11 @@ function handleClick(item: BreadcrumbItem) {
         </slot>
         <span
           v-if="index !== items.length - 1"
-          class="mld-breadcrumb__separator"
+          class="mint-breadcrumb__separator"
           aria-hidden="true"
         >
           <slot name="separator">
-            <svg v-if="separator === '/'" class="mld-breadcrumb__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg v-if="separator === '/'" class="mint-breadcrumb__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="m9 18 6-6-6-6" />
             </svg>
             <template v-else>{{ separator }}</template>

package/src/components/Calendar.vue

@@ -291,62 +291,62 @@ function nextMonth() {
 </script>
 
 <template>
-  <div class="mld-calendar">
-    <div v-if="showNavigation" class="mld-calendar__header">
-      <button type="button" class="mld-calendar__nav-btn" aria-label="Previous month" @click="prevMonth">
+  <div class="mint-calendar">
+    <div v-if="showNavigation" class="mint-calendar__header">
+      <button type="button" class="mint-calendar__nav-btn" aria-label="Previous month" @click="prevMonth">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="m15 18-6-6 6-6" />
         </svg>
       </button>
       <slot name="header" :month="currentMonth" :year="currentYear" :prev-month="prevMonth" :next-month="nextMonth">
-        <span class="mld-calendar__title">{{ monthLabel }}</span>
+        <span class="mint-calendar__title">{{ monthLabel }}</span>
       </slot>
-      <button type="button" class="mld-calendar__nav-btn" aria-label="Next month" @click="nextMonth">
+      <button type="button" class="mint-calendar__nav-btn" aria-label="Next month" @click="nextMonth">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="m9 18 6-6-6-6" />
         </svg>
       </button>
     </div>
 
-    <div class="mld-calendar__weekdays">
+    <div class="mint-calendar__weekdays">
       <span
         v-for="(label, i) in weekDayLabels"
         :key="i"
-        class="mld-calendar__weekday"
+        class="mint-calendar__weekday"
       >
         <slot name="week-day" :day-name="label" :index="i">{{ label }}</slot>
       </span>
     </div>
 
-    <div class="mld-calendar__grid">
+    <div class="mint-calendar__grid">
       <button
         v-for="(day, i) in calendarDays"
         :key="i"
         type="button"
         :disabled="day.isDisabled"
         :class="[
-          'mld-calendar__day',
+          'mint-calendar__day',
           {
-            'mld-calendar__day--today': day.isToday,
-            'mld-calendar__day--selected': day.isSelected,
-            'mld-calendar__day--in-range': day.isInRange,
-            'mld-calendar__day--disabled': day.isDisabled,
-            'mld-calendar__day--outside': day.isOutsideMonth,
-            'mld-calendar__day--interactive': selectionMode !== 'none' && !day.isDisabled,
+            'mint-calendar__day--today': day.isToday,
+            'mint-calendar__day--selected': day.isSelected,
+            'mint-calendar__day--in-range': day.isInRange,
+            'mint-calendar__day--disabled': day.isDisabled,
+            'mint-calendar__day--outside': day.isOutsideMonth,
+            'mint-calendar__day--interactive': selectionMode !== 'none' && !day.isDisabled,
           },
         ]"
         @click="handleDayClick(day)"
         @mouseenter="handleDayHover(day)"
       >
         <slot name="day-content" :day="day">
-          <span class="mld-calendar__day-number">{{ day.dayOfMonth }}</span>
-          <div v-if="day.markers.length > 0" class="mld-calendar__markers">
+          <span class="mint-calendar__day-number">{{ day.dayOfMonth }}</span>
+          <div v-if="day.markers.length > 0" class="mint-calendar__markers">
             <span
               v-for="(marker, mi) in day.markers.slice(0, 3)"
               :key="mi"
               :class="[
-                'mld-calendar__marker',
-                `mld-calendar__marker--${marker.type ?? 'dot'}`,
+                'mint-calendar__marker',
+                `mint-calendar__marker--${marker.type ?? 'dot'}`,
               ]"
               :style="marker.color ? { '--marker-color': marker.color } : {}"
               :title="marker.label"

package/src/components/ChartContainer.vue

@@ -19,20 +19,20 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="mld-chart">
-    <div v-if="title || description || $slots.toolbar" class="mld-chart__header">
-      <div v-if="title || description" class="mld-chart__header-text">
-        <h3 v-if="title" class="mld-chart__title">{{ title }}</h3>
-        <p v-if="description" class="mld-chart__description">{{ description }}</p>
+  <div class="mint-chart">
+    <div v-if="title || description || $slots.toolbar" class="mint-chart__header">
+      <div v-if="title || description" class="mint-chart__header-text">
+        <h3 v-if="title" class="mint-chart__title">{{ title }}</h3>
+        <p v-if="description" class="mint-chart__description">{{ description }}</p>
       </div>
-      <div v-if="$slots.toolbar" class="mld-chart__toolbar">
+      <div v-if="$slots.toolbar" class="mint-chart__toolbar">
         <slot name="toolbar" />
       </div>
     </div>
 
-    <div class="mld-chart__body">
+    <div class="mint-chart__body">
       <!-- Loading overlay -->
-      <div v-if="loading" class="mld-chart__loading-overlay">
+      <div v-if="loading" class="mint-chart__loading-overlay">
         <LoadingSpinner size="lg" />
       </div>
 
@@ -53,7 +53,7 @@ withDefaults(defineProps<Props>(), {
       </template>
     </div>
 
-    <div v-if="$slots.legend" class="mld-chart__legend">
+    <div v-if="$slots.legend" class="mint-chart__legend">
       <slot name="legend" />
     </div>
   </div>

package/src/components/ChemicalFormula.vue

@@ -21,15 +21,15 @@ function getParts(f: string): FormulaPart[] {
 <template>
   <component
     :is="inline ? 'span' : 'div'"
-    :class="['mld-chem-formula', !inline ? 'mld-chem-formula--block' : '']"
+    :class="['mint-chem-formula', !inline ? 'mint-chem-formula--block' : '']"
   >
     <template v-for="(part, i) in getParts(formula)" :key="i">
-      <span v-if="part.type === 'element'" class="mld-chem-formula__element">{{ part.text }}</span>
-      <span v-else-if="part.type === 'subscript'" class="mld-chem-formula__subscript">{{ part.text }}</span>
-      <span v-else-if="part.type === 'superscript'" class="mld-chem-formula__superscript">{{ part.text }}</span>
-      <span v-else-if="part.type === 'paren'" class="mld-chem-formula__paren">{{ part.text }}</span>
-      <span v-else-if="part.type === 'dot'" class="mld-chem-formula__dot">{{ part.text }}</span>
-      <span v-else-if="part.type === 'charge'" class="mld-chem-formula__charge">{{ part.text }}</span>
+      <span v-if="part.type === 'element'" class="mint-chem-formula__element">{{ part.text }}</span>
+      <span v-else-if="part.type === 'subscript'" class="mint-chem-formula__subscript">{{ part.text }}</span>
+      <span v-else-if="part.type === 'superscript'" class="mint-chem-formula__superscript">{{ part.text }}</span>
+      <span v-else-if="part.type === 'paren'" class="mint-chem-formula__paren">{{ part.text }}</span>
+      <span v-else-if="part.type === 'dot'" class="mint-chem-formula__dot">{{ part.text }}</span>
+      <span v-else-if="part.type === 'charge'" class="mint-chem-formula__charge">{{ part.text }}</span>
     </template>
   </component>
 </template>