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

package/src/components/DateTimePicker.vue

@@ -240,8 +240,8 @@ watch(isOpen, (open) => {
     )
     nextTick(() => {
       // Scroll time grid to selected time
-      const grid = containerRef.value?.querySelector('.mld-datetime-picker__time-grid')
-      const active = containerRef.value?.querySelector('.mld-datetime-picker__time-chip--active')
+      const grid = containerRef.value?.querySelector('.mint-datetime-picker__time-grid')
+      const active = containerRef.value?.querySelector('.mint-datetime-picker__time-chip--active')
       if (grid && active) {
         active.scrollIntoView({ block: 'center' })
       }
@@ -259,9 +259,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="containerRef" class="mld-datetime-picker">
-    <div class="mld-datetime-picker__input-wrapper">
-      <div class="mld-datetime-picker__icon-calendar">
+  <div ref="containerRef" 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>
@@ -273,15 +273,15 @@ onUnmounted(() => {
         :placeholder="placeholder"
         :disabled="disabled"
         :class="[
-          'mld-datetime-picker__input',
-          `mld-datetime-picker__input--${size}`,
-          error ? 'mld-datetime-picker__input--error' : '',
-          disabled ? 'mld-datetime-picker__input--disabled' : '',
+          'mint-datetime-picker__input',
+          `mint-datetime-picker__input--${size}`,
+          error ? 'mint-datetime-picker__input--error' : '',
+          disabled ? 'mint-datetime-picker__input--disabled' : '',
         ]"
         aria-label="Select date and time"
         @click="toggleDropdown"
       />
-      <div class="mld-datetime-picker__icon-clock">
+      <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>
@@ -289,52 +289,52 @@ onUnmounted(() => {
     </div>
 
     <Transition
-      enter-active-class="mld-datetime-picker__dropdown-enter-active"
-      enter-from-class="mld-datetime-picker__dropdown-enter-from"
-      enter-to-class="mld-datetime-picker__dropdown-enter-to"
-      leave-active-class="mld-datetime-picker__dropdown-leave-active"
-      leave-from-class="mld-datetime-picker__dropdown-leave-from"
-      leave-to-class="mld-datetime-picker__dropdown-leave-to"
+      enter-active-class="mint-datetime-picker__dropdown-enter-active"
+      enter-from-class="mint-datetime-picker__dropdown-enter-from"
+      enter-to-class="mint-datetime-picker__dropdown-enter-to"
+      leave-active-class="mint-datetime-picker__dropdown-leave-active"
+      leave-from-class="mint-datetime-picker__dropdown-leave-from"
+      leave-to-class="mint-datetime-picker__dropdown-leave-to"
     >
       <div
         v-if="isOpen"
-        class="mld-datetime-picker__dropdown"
+        class="mint-datetime-picker__dropdown"
         role="dialog"
         aria-modal="true"
         aria-label="Date and time picker"
       >
         <!-- Calendar section -->
-        <div class="mld-datetime-picker__calendar-section">
-          <div class="mld-date-picker__header">
-            <button type="button" class="mld-date-picker__nav-btn" aria-label="Previous month" @click="prevMonth">
+        <div class="mint-datetime-picker__calendar-section">
+          <div class="mint-date-picker__header">
+            <button type="button" class="mint-date-picker__nav-btn" aria-label="Previous month" @click="prevMonth">
               <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
               </svg>
             </button>
-            <span class="mld-date-picker__month-year">{{ monthYear }}</span>
-            <button type="button" class="mld-date-picker__nav-btn" aria-label="Next month" @click="nextMonth">
+            <span class="mint-date-picker__month-year">{{ monthYear }}</span>
+            <button type="button" class="mint-date-picker__nav-btn" aria-label="Next month" @click="nextMonth">
               <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </button>
           </div>
 
-          <div class="mld-date-picker__weekdays">
-            <div v-for="day in weekDays" :key="day" class="mld-date-picker__weekday">{{ day }}</div>
+          <div class="mint-date-picker__weekdays">
+            <div v-for="day in weekDays" :key="day" class="mint-date-picker__weekday">{{ day }}</div>
           </div>
 
-          <div class="mld-date-picker__grid">
+          <div class="mint-date-picker__grid">
             <button
               v-for="(day, index) in calendarDays"
               :key="index"
               type="button"
               :disabled="day.isDisabled"
               :class="[
-                'mld-date-picker__day',
-                !day.isCurrentMonth ? 'mld-date-picker__day--other-month' : '',
-                day.isDisabled ? 'mld-date-picker__day--disabled' : '',
-                isSameDay(day.date, selectedDate) ? 'mld-date-picker__day--selected' : '',
-                isToday(day.date) && !isSameDay(day.date, selectedDate) ? 'mld-date-picker__day--today' : '',
+                'mint-date-picker__day',
+                !day.isCurrentMonth ? 'mint-date-picker__day--other-month' : '',
+                day.isDisabled ? 'mint-date-picker__day--disabled' : '',
+                isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--selected' : '',
+                isToday(day.date) && !isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--today' : '',
               ]"
               @click="selectDate(day)"
             >
@@ -344,21 +344,21 @@ onUnmounted(() => {
         </div>
 
         <!-- Divider -->
-        <div class="mld-datetime-picker__divider" />
+        <div class="mint-datetime-picker__divider" />
 
         <!-- Time section -->
-        <div class="mld-datetime-picker__time-section">
-          <div class="mld-datetime-picker__time-label">Time</div>
-          <div class="mld-datetime-picker__time-grid">
+        <div class="mint-datetime-picker__time-section">
+          <div class="mint-datetime-picker__time-label">Time</div>
+          <div class="mint-datetime-picker__time-grid">
             <button
               v-for="time in timeSlots"
               :key="time"
               type="button"
               :disabled="isTimeDisabled(time)"
               :class="[
-                'mld-datetime-picker__time-chip',
-                selectedTimeStr === time ? 'mld-datetime-picker__time-chip--active' : '',
-                isTimeDisabled(time) ? 'mld-datetime-picker__time-chip--disabled' : '',
+                'mint-datetime-picker__time-chip',
+                selectedTimeStr === time ? 'mint-datetime-picker__time-chip--active' : '',
+                isTimeDisabled(time) ? 'mint-datetime-picker__time-chip--disabled' : '',
               ]"
               @click="selectTime(time)"
             >
@@ -368,15 +368,15 @@ onUnmounted(() => {
         </div>
 
         <!-- Footer -->
-        <div class="mld-datetime-picker__footer">
+        <div class="mint-datetime-picker__footer">
           <div>
-            <button type="button" class="mld-datetime-picker__footer-btn" @click="goToToday">Today</button>
-            <button type="button" class="mld-datetime-picker__footer-btn" @click="goToNow">Now</button>
+            <button type="button" class="mint-datetime-picker__footer-btn" @click="goToToday">Today</button>
+            <button type="button" class="mint-datetime-picker__footer-btn" @click="goToNow">Now</button>
           </div>
           <button
             v-if="clearable && modelValue"
             type="button"
-            class="mld-datetime-picker__footer-btn mld-datetime-picker__footer-btn--muted"
+            class="mint-datetime-picker__footer-btn mint-datetime-picker__footer-btn--muted"
             @click="clear"
           >
             Clear

package/src/components/Divider.vue

@@ -19,9 +19,9 @@ withDefaults(defineProps<Props>(), {
   <div
     v-if="vertical"
     :class="[
-      'mld-divider',
-      'mld-divider--vertical',
-      `mld-divider--${spacing}`,
+      'mint-divider',
+      'mint-divider--vertical',
+      `mint-divider--${spacing}`,
     ]"
     role="separator"
     aria-orientation="vertical"
@@ -29,17 +29,17 @@ withDefaults(defineProps<Props>(), {
   <div
     v-else
     :class="[
-      'mld-divider',
-      `mld-divider--${spacing}`,
-      label ? `mld-divider--labeled mld-divider--${align}` : '',
+      'mint-divider',
+      `mint-divider--${spacing}`,
+      label ? `mint-divider--labeled mint-divider--${align}` : '',
     ]"
     role="separator"
     aria-orientation="horizontal"
   >
     <template v-if="label">
-      <span v-if="align === 'center'" class="mld-divider__line" />
-      <span class="mld-divider__label">{{ label }}</span>
-      <span class="mld-divider__line" />
+      <span v-if="align === 'center'" class="mint-divider__line" />
+      <span class="mint-divider__label">{{ label }}</span>
+      <span class="mint-divider__line" />
     </template>
   </div>
 </template>

package/src/components/DoseCalculator.vue

@@ -197,17 +197,17 @@ watch(activeMode, (mode) => {
 <template>
   <div
     :class="[
-      'mld-dose-calculator',
-      disabled ? 'mld-dose-calculator--disabled' : '',
+      'mint-dose-calculator',
+      disabled ? 'mint-dose-calculator--disabled' : '',
     ]"
   >
     <!-- Tabs -->
-    <div v-if="showTabs" class="mld-dose-calculator__tabs" role="tablist">
+    <div v-if="showTabs" class="mint-dose-calculator__tabs" role="tablist">
       <button
         type="button"
         :class="[
-          'mld-dose-calculator__tab',
-          activeMode === 'dilution' ? 'mld-dose-calculator__tab--active' : '',
+          'mint-dose-calculator__tab',
+          activeMode === 'dilution' ? 'mint-dose-calculator__tab--active' : '',
         ]"
         role="tab"
         :aria-selected="activeMode === 'dilution'"
@@ -218,8 +218,8 @@ watch(activeMode, (mode) => {
       <button
         type="button"
         :class="[
-          'mld-dose-calculator__tab',
-          activeMode === 'serial' ? 'mld-dose-calculator__tab--active' : '',
+          'mint-dose-calculator__tab',
+          activeMode === 'serial' ? 'mint-dose-calculator__tab--active' : '',
         ]"
         role="tab"
         :aria-selected="activeMode === 'serial'"
@@ -230,8 +230,8 @@ watch(activeMode, (mode) => {
       <button
         type="button"
         :class="[
-          'mld-dose-calculator__tab',
-          activeMode === 'conversion' ? 'mld-dose-calculator__tab--active' : '',
+          'mint-dose-calculator__tab',
+          activeMode === 'conversion' ? 'mint-dose-calculator__tab--active' : '',
         ]"
         role="tab"
         :aria-selected="activeMode === 'conversion'"
@@ -244,11 +244,11 @@ watch(activeMode, (mode) => {
     <!-- Dilution form -->
     <div
       v-if="activeMode === 'dilution'"
-      class="mld-dose-calculator__form"
+      class="mint-dose-calculator__form"
       role="tabpanel"
     >
-      <div class="mld-dose-calculator__field">
-        <label class="mld-dose-calculator__field-label">Stock Concentration</label>
+      <div class="mint-dose-calculator__field">
+        <label class="mint-dose-calculator__field-label">Stock Concentration</label>
         <ConcentrationInput
           v-model="stockConcentration"
           :disabled="disabled"
@@ -257,8 +257,8 @@ watch(activeMode, (mode) => {
         />
       </div>
 
-      <div class="mld-dose-calculator__field">
-        <label class="mld-dose-calculator__field-label">Final Concentration</label>
+      <div class="mint-dose-calculator__field">
+        <label class="mint-dose-calculator__field-label">Final Concentration</label>
         <ConcentrationInput
           v-model="finalConcentration"
           :disabled="disabled"
@@ -267,14 +267,14 @@ watch(activeMode, (mode) => {
         />
       </div>
 
-      <div class="mld-dose-calculator__field">
-        <label class="mld-dose-calculator__field-label">Final Volume</label>
-        <div class="mld-dose-calculator__field-row">
+      <div class="mint-dose-calculator__field">
+        <label class="mint-dose-calculator__field-label">Final Volume</label>
+        <div class="mint-dose-calculator__field-row">
           <input
             type="number"
             :value="finalVolume.value"
             :disabled="disabled"
-            class="mld-dose-calculator__input"
+            class="mint-dose-calculator__input"
             min="0"
             step="any"
             @input="handleVolumeChange($event, 'final')"
@@ -282,7 +282,7 @@ watch(activeMode, (mode) => {
           <select
             :value="finalVolume.unit"
             :disabled="disabled"
-            class="mld-dose-calculator__select"
+            class="mint-dose-calculator__select"
             @change="handleVolumeUnitChange($event, 'final')"
           >
             <option v-for="unit in volumeUnits" :key="unit" :value="unit">
@@ -292,32 +292,32 @@ watch(activeMode, (mode) => {
         </div>
       </div>
 
-      <div class="mld-dose-calculator__divider" />
+      <div class="mint-dose-calculator__divider" />
 
       <!-- Dilution Result -->
-      <div v-if="dilutionResult?.valid" class="mld-dose-calculator__result">
-        <div class="mld-dose-calculator__result-title">Result</div>
-        <div class="mld-dose-calculator__result-row">
-          <span class="mld-dose-calculator__result-label">Stock volume</span>
-          <span class="mld-dose-calculator__result-value">
+      <div v-if="dilutionResult?.valid" class="mint-dose-calculator__result">
+        <div class="mint-dose-calculator__result-title">Result</div>
+        <div class="mint-dose-calculator__result-row">
+          <span class="mint-dose-calculator__result-label">Stock volume</span>
+          <span class="mint-dose-calculator__result-value">
             {{ formatVolume(dilutionResult.stockVolume) }}
           </span>
         </div>
-        <div class="mld-dose-calculator__result-row">
-          <span class="mld-dose-calculator__result-label">Diluent volume</span>
-          <span class="mld-dose-calculator__result-value">
+        <div class="mint-dose-calculator__result-row">
+          <span class="mint-dose-calculator__result-label">Diluent volume</span>
+          <span class="mint-dose-calculator__result-value">
             {{ formatVolume(dilutionResult.diluentVolume) }}
           </span>
         </div>
-        <div class="mld-dose-calculator__result-row">
-          <span class="mld-dose-calculator__result-label">Dilution factor</span>
-          <span class="mld-dose-calculator__result-value">
+        <div class="mint-dose-calculator__result-row">
+          <span class="mint-dose-calculator__result-label">Dilution factor</span>
+          <span class="mint-dose-calculator__result-value">
             {{ dilutionResult.dilutionFactor.toFixed(1) }}×
           </span>
         </div>
       </div>
 
-      <div v-else-if="dilutionResult?.error" class="mld-dose-calculator__error">
+      <div v-else-if="dilutionResult?.error" class="mint-dose-calculator__error">
         {{ dilutionResult.error }}
       </div>
     </div>
@@ -325,11 +325,11 @@ watch(activeMode, (mode) => {
     <!-- Serial Dilution form -->
     <div
       v-else-if="activeMode === 'serial'"
-      class="mld-dose-calculator__form"
+      class="mint-dose-calculator__form"
       role="tabpanel"
     >
-      <div class="mld-dose-calculator__field">
-        <label class="mld-dose-calculator__field-label">Starting Concentration</label>
+      <div class="mint-dose-calculator__field">
+        <label class="mint-dose-calculator__field-label">Starting Concentration</label>
         <ConcentrationInput
           v-model="serialStartConcentration"
           :disabled="disabled"
@@ -338,43 +338,43 @@ watch(activeMode, (mode) => {
         />
       </div>
 
-      <div class="mld-dose-calculator__field-row">
-        <div class="mld-dose-calculator__field">
-          <label class="mld-dose-calculator__field-label">Dilution Factor</label>
-          <div class="mld-dose-calculator__input-wrapper">
+      <div class="mint-dose-calculator__field-row">
+        <div class="mint-dose-calculator__field">
+          <label class="mint-dose-calculator__field-label">Dilution Factor</label>
+          <div class="mint-dose-calculator__input-wrapper">
             <input
               v-model.number="serialDilutionFactor"
               type="number"
               :disabled="disabled"
-              class="mld-dose-calculator__input"
+              class="mint-dose-calculator__input"
               min="1.1"
               step="0.1"
             />
-            <span class="mld-dose-calculator__unit-suffix">×</span>
+            <span class="mint-dose-calculator__unit-suffix">×</span>
           </div>
         </div>
 
-        <div class="mld-dose-calculator__field">
-          <label class="mld-dose-calculator__field-label">Dilutions</label>
+        <div class="mint-dose-calculator__field">
+          <label class="mint-dose-calculator__field-label">Dilutions</label>
           <input
             v-model.number="serialNumberOfDilutions"
             type="number"
             :disabled="disabled"
-            class="mld-dose-calculator__input"
+            class="mint-dose-calculator__input"
             min="1"
             max="24"
           />
         </div>
       </div>
 
-      <div class="mld-dose-calculator__field">
-        <label class="mld-dose-calculator__field-label">Volume per Well</label>
-        <div class="mld-dose-calculator__field-row">
+      <div class="mint-dose-calculator__field">
+        <label class="mint-dose-calculator__field-label">Volume per Well</label>
+        <div class="mint-dose-calculator__field-row">
           <input
             type="number"
             :value="serialVolumePerWell.value"
             :disabled="disabled"
-            class="mld-dose-calculator__input"
+            class="mint-dose-calculator__input"
             min="0"
             step="any"
             @input="handleVolumeChange($event, 'serial')"
@@ -382,7 +382,7 @@ watch(activeMode, (mode) => {
           <select
             :value="serialVolumePerWell.unit"
             :disabled="disabled"
-            class="mld-dose-calculator__select"
+            class="mint-dose-calculator__select"
             @change="handleVolumeUnitChange($event, 'serial')"
           >
             <option v-for="unit in volumeUnits" :key="unit" :value="unit">
@@ -392,22 +392,22 @@ watch(activeMode, (mode) => {
         </div>
       </div>
 
-      <div class="mld-dose-calculator__divider" />
+      <div class="mint-dose-calculator__divider" />
 
       <!-- Serial Preview -->
-      <div v-if="serialResult?.valid" class="mld-dose-calculator__preview">
-        <div class="mld-dose-calculator__preview-title">Preview</div>
-        <div class="mld-dose-calculator__preview-steps">
+      <div v-if="serialResult?.valid" class="mint-dose-calculator__preview">
+        <div class="mint-dose-calculator__preview-title">Preview</div>
+        <div class="mint-dose-calculator__preview-steps">
           <template v-for="(step, index) in serialResult.steps" :key="step.stepNumber">
-            <div class="mld-dose-calculator__preview-step">
-              <span class="mld-dose-calculator__preview-step-num">{{ step.stepNumber }}:</span>
-              <span class="mld-dose-calculator__preview-step-conc">
+            <div class="mint-dose-calculator__preview-step">
+              <span class="mint-dose-calculator__preview-step-num">{{ step.stepNumber }}:</span>
+              <span class="mint-dose-calculator__preview-step-conc">
                 {{ formatWithUnit(step.concentration, 3) }}
               </span>
             </div>
             <span
               v-if="index < serialResult.steps.length - 1"
-              class="mld-dose-calculator__preview-arrow"
+              class="mint-dose-calculator__preview-arrow"
             >
               →
             </span>
@@ -415,7 +415,7 @@ watch(activeMode, (mode) => {
         </div>
       </div>
 
-      <div v-else-if="serialResult?.error" class="mld-dose-calculator__error">
+      <div v-else-if="serialResult?.error" class="mint-dose-calculator__error">
         {{ serialResult.error }}
       </div>
     </div>
@@ -423,11 +423,11 @@ watch(activeMode, (mode) => {
     <!-- Conversion form -->
     <div
       v-else-if="activeMode === 'conversion'"
-      class="mld-dose-calculator__form"
+      class="mint-dose-calculator__form"
       role="tabpanel"
     >
-      <div class="mld-dose-calculator__field">
-        <label class="mld-dose-calculator__field-label">Input Concentration</label>
+      <div class="mint-dose-calculator__field">
+        <label class="mint-dose-calculator__field-label">Input Concentration</label>
         <ConcentrationInput
           :disabled="disabled"
           :molecular-weight="molecularWeight"
@@ -438,7 +438,7 @@ watch(activeMode, (mode) => {
 
       <div
         v-if="!molecularWeight"
-        class="mld-dose-calculator__error"
+        class="mint-dose-calculator__error"
       >
         Provide molecular weight for mass ↔ molarity conversion
       </div>
@@ -447,18 +447,18 @@ watch(activeMode, (mode) => {
     <!-- Molecular weight section (shown if needed) -->
     <div
       v-if="molecularWeight"
-      class="mld-dose-calculator__mw-section"
+      class="mint-dose-calculator__mw-section"
     >
-      <span class="mld-dose-calculator__mw-label">
+      <span class="mint-dose-calculator__mw-label">
         Molecular Weight: {{ molecularWeight }} g/mol
       </span>
     </div>
 
     <!-- Apply to wells button -->
-    <div v-if="hasTargetWells" class="mld-dose-calculator__form">
+    <div v-if="hasTargetWells" class="mint-dose-calculator__form">
       <button
         type="button"
-        class="mld-dose-calculator__apply-btn"
+        class="mint-dose-calculator__apply-btn"
         :disabled="!canApplyToWells || disabled"
         @click="handleApplyToWells"
       >

package/src/components/DropdownButton.vue

@@ -96,30 +96,30 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="containerRef" class="mld-dropdown-button">
+  <div ref="containerRef" class="mint-dropdown-button">
     <button
       type="button"
       :disabled="disabled || loading"
       :class="[
-        'mld-dropdown-button__trigger',
-        `mld-dropdown-button__trigger--${variant}`,
-        `mld-dropdown-button__trigger--${size}`,
+        'mint-dropdown-button__trigger',
+        `mint-dropdown-button__trigger--${variant}`,
+        `mint-dropdown-button__trigger--${size}`,
         {
-          'mld-dropdown-button__trigger--disabled': disabled || loading,
-          'mld-dropdown-button__trigger--open': isOpen,
+          'mint-dropdown-button__trigger--disabled': disabled || loading,
+          'mint-dropdown-button__trigger--open': isOpen,
         },
       ]"
       :aria-expanded="isOpen"
       aria-haspopup="listbox"
       @click="toggle"
     >
-      <svg v-if="loading" class="mld-dropdown-button__spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <svg v-if="loading" class="mint-dropdown-button__spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
         <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25" />
         <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
       </svg>
-      <span class="mld-dropdown-button__label">{{ selectedLabel }}</span>
+      <span class="mint-dropdown-button__label">{{ selectedLabel }}</span>
       <svg
-        :class="['mld-dropdown-button__chevron', { 'mld-dropdown-button__chevron--open': isOpen }]"
+        :class="['mint-dropdown-button__chevron', { 'mint-dropdown-button__chevron--open': isOpen }]"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -131,36 +131,36 @@ onUnmounted(() => {
       </svg>
     </button>
 
-    <Transition name="mld-dropdown-button-menu">
+    <Transition name="mint-dropdown-button-menu">
       <ul
         v-if="isOpen"
-        class="mld-dropdown-button__menu"
+        class="mint-dropdown-button__menu"
         role="listbox"
-        :aria-activedescendant="modelValue !== undefined ? `mld-dropdown-option-${modelValue}` : undefined"
+        :aria-activedescendant="modelValue !== undefined ? `mint-dropdown-option-${modelValue}` : undefined"
       >
         <li
           v-for="option in options"
-          :id="`mld-dropdown-option-${option.value}`"
+          :id="`mint-dropdown-option-${option.value}`"
           :key="String(option.value)"
           role="option"
           :aria-selected="option.value === modelValue"
           :aria-disabled="option.disabled"
           :class="[
-            'mld-dropdown-button__option',
+            'mint-dropdown-button__option',
             {
-              'mld-dropdown-button__option--selected': option.value === modelValue,
-              'mld-dropdown-button__option--disabled': option.disabled,
+              'mint-dropdown-button__option--selected': option.value === modelValue,
+              'mint-dropdown-button__option--disabled': option.disabled,
             },
           ]"
           @click="selectOption(option)"
         >
-          <span class="mld-dropdown-button__option-label">{{ option.label }}</span>
-          <span v-if="option.description" class="mld-dropdown-button__option-description">
+          <span class="mint-dropdown-button__option-label">{{ option.label }}</span>
+          <span v-if="option.description" class="mint-dropdown-button__option-description">
             {{ option.description }}
           </span>
           <svg
             v-if="option.value === modelValue"
-            class="mld-dropdown-button__option-check"
+            class="mint-dropdown-button__option-check"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"

package/src/components/EmptyState.vue

@@ -29,12 +29,12 @@ const defaultIconPaths = [
 </script>
 
 <template>
-  <div :class="['mld-empty-state', `mld-empty-state--${variant}`, `mld-empty-state--${size}`]">
-    <div :class="['mld-empty-state__icon-wrapper', `mld-empty-state__icon-wrapper--${color}`]">
+  <div :class="['mint-empty-state', `mint-empty-state--${variant}`, `mint-empty-state--${size}`]">
+    <div :class="['mint-empty-state__icon-wrapper', `mint-empty-state__icon-wrapper--${color}`]">
       <slot name="icon">
         <svg
-          class="mld-empty-state__icon"
-          :class="`mld-empty-state__icon--${color}`"
+          class="mint-empty-state__icon"
+          :class="`mint-empty-state__icon--${color}`"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -51,13 +51,13 @@ const defaultIconPaths = [
         </svg>
       </slot>
     </div>
-    <div class="mld-empty-state__body">
-      <h3 v-if="title" class="mld-empty-state__title">{{ title }}</h3>
-      <p v-if="description" class="mld-empty-state__description">{{ description }}</p>
+    <div class="mint-empty-state__body">
+      <h3 v-if="title" class="mint-empty-state__title">{{ title }}</h3>
+      <p v-if="description" class="mint-empty-state__description">{{ description }}</p>
       <slot />
     </div>
-    <div v-if="actionLabel" class="mld-empty-state__action">
-      <button class="mld-empty-state__button" @click="emit('action')">
+    <div v-if="actionLabel" class="mint-empty-state__action">
+      <button class="mint-empty-state__button" @click="emit('action')">
         {{ actionLabel }}
       </button>
     </div>