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

package/src/components/GroupAssigner.vue

@@ -128,44 +128,44 @@ function clearAll() {
 </script>
 
 <template>
-  <div class="mld-group-assigner">
+  <div class="mint-group-assigner">
     <!-- Drop zones -->
-    <div class="mld-group-assigner__zones">
+    <div class="mint-group-assigner__zones">
       <!-- Zone 1 (Control) -->
       <div
         :class="[
-          'mld-group-assigner__zone',
-          'mld-group-assigner__zone--1',
-          dragOverZone === 'zone1' ? 'mld-group-assigner__zone--dragover' : '',
+          'mint-group-assigner__zone',
+          'mint-group-assigner__zone--1',
+          dragOverZone === 'zone1' ? 'mint-group-assigner__zone--dragover' : '',
         ]"
         :style="{ '--zone-color': color1 }"
         @dragover="handleDragOver($event, 'zone1')"
         @dragleave="handleDragLeave"
         @drop="handleDrop($event, 'zone1')"
       >
-        <div class="mld-group-assigner__zone-header">
-          <span class="mld-group-assigner__zone-label">{{ label1 }}</span>
-          <span class="mld-group-assigner__zone-count">{{ zone1Count }} samples</span>
+        <div class="mint-group-assigner__zone-header">
+          <span class="mint-group-assigner__zone-label">{{ label1 }}</span>
+          <span class="mint-group-assigner__zone-count">{{ zone1Count }} samples</span>
         </div>
 
-        <div class="mld-group-assigner__zone-content">
+        <div class="mint-group-assigner__zone-content">
           <div
             v-for="group in zone1Groups"
             :key="group.name"
-            class="mld-group-assigner__pill"
+            class="mint-group-assigner__pill"
             draggable="true"
             @dragstart="handleDragStart($event, group.name)"
             @dragend="handleDragEnd"
           >
             <span
-              class="mld-group-assigner__pill-color"
+              class="mint-group-assigner__pill-color"
               :style="{ backgroundColor: group.color }"
             />
-            <span class="mld-group-assigner__pill-name">{{ group.name }}</span>
-            <span class="mld-group-assigner__pill-count">{{ group.count }}</span>
+            <span class="mint-group-assigner__pill-name">{{ group.name }}</span>
+            <span class="mint-group-assigner__pill-count">{{ group.count }}</span>
             <button
               type="button"
-              class="mld-group-assigner__pill-remove"
+              class="mint-group-assigner__pill-remove"
               @click="removeFromZone(group.name, 'zone1')"
             >
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -174,7 +174,7 @@ function clearAll() {
             </button>
           </div>
 
-          <div v-if="zone1Groups.length === 0" class="mld-group-assigner__zone-empty">
+          <div v-if="zone1Groups.length === 0" class="mint-group-assigner__zone-empty">
             Drag groups here
           </div>
         </div>
@@ -183,38 +183,38 @@ function clearAll() {
       <!-- Zone 2 (Treatment) -->
       <div
         :class="[
-          'mld-group-assigner__zone',
-          'mld-group-assigner__zone--2',
-          dragOverZone === 'zone2' ? 'mld-group-assigner__zone--dragover' : '',
+          'mint-group-assigner__zone',
+          'mint-group-assigner__zone--2',
+          dragOverZone === 'zone2' ? 'mint-group-assigner__zone--dragover' : '',
         ]"
         :style="{ '--zone-color': color2 }"
         @dragover="handleDragOver($event, 'zone2')"
         @dragleave="handleDragLeave"
         @drop="handleDrop($event, 'zone2')"
       >
-        <div class="mld-group-assigner__zone-header">
-          <span class="mld-group-assigner__zone-label">{{ label2 }}</span>
-          <span class="mld-group-assigner__zone-count">{{ zone2Count }} samples</span>
+        <div class="mint-group-assigner__zone-header">
+          <span class="mint-group-assigner__zone-label">{{ label2 }}</span>
+          <span class="mint-group-assigner__zone-count">{{ zone2Count }} samples</span>
         </div>
 
-        <div class="mld-group-assigner__zone-content">
+        <div class="mint-group-assigner__zone-content">
           <div
             v-for="group in zone2Groups"
             :key="group.name"
-            class="mld-group-assigner__pill"
+            class="mint-group-assigner__pill"
             draggable="true"
             @dragstart="handleDragStart($event, group.name)"
             @dragend="handleDragEnd"
           >
             <span
-              class="mld-group-assigner__pill-color"
+              class="mint-group-assigner__pill-color"
               :style="{ backgroundColor: group.color }"
             />
-            <span class="mld-group-assigner__pill-name">{{ group.name }}</span>
-            <span class="mld-group-assigner__pill-count">{{ group.count }}</span>
+            <span class="mint-group-assigner__pill-name">{{ group.name }}</span>
+            <span class="mint-group-assigner__pill-count">{{ group.count }}</span>
             <button
               type="button"
-              class="mld-group-assigner__pill-remove"
+              class="mint-group-assigner__pill-remove"
               @click="removeFromZone(group.name, 'zone2')"
             >
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -223,7 +223,7 @@ function clearAll() {
             </button>
           </div>
 
-          <div v-if="zone2Groups.length === 0" class="mld-group-assigner__zone-empty">
+          <div v-if="zone2Groups.length === 0" class="mint-group-assigner__zone-empty">
             Drag groups here
           </div>
         </div>
@@ -231,44 +231,44 @@ function clearAll() {
     </div>
 
     <!-- Unassigned groups -->
-    <div v-if="unassignedGroups.length > 0" class="mld-group-assigner__unassigned">
-      <div class="mld-group-assigner__unassigned-header">
-        <span class="mld-group-assigner__unassigned-title">Available Groups</span>
+    <div v-if="unassignedGroups.length > 0" class="mint-group-assigner__unassigned">
+      <div class="mint-group-assigner__unassigned-header">
+        <span class="mint-group-assigner__unassigned-title">Available Groups</span>
         <button
           v-if="group1.length > 0 || group2.length > 0"
           type="button"
-          class="mld-group-assigner__clear-btn"
+          class="mint-group-assigner__clear-btn"
           @click="clearAll"
         >
           Clear all
         </button>
       </div>
 
-      <div class="mld-group-assigner__unassigned-list">
+      <div class="mint-group-assigner__unassigned-list">
         <div
           v-for="group in unassignedGroups"
           :key="group.name"
           :class="[
-            'mld-group-assigner__pill',
-            'mld-group-assigner__pill--unassigned',
-            draggingGroup === group.name ? 'mld-group-assigner__pill--dragging' : '',
+            'mint-group-assigner__pill',
+            'mint-group-assigner__pill--unassigned',
+            draggingGroup === group.name ? 'mint-group-assigner__pill--dragging' : '',
           ]"
           draggable="true"
           @dragstart="handleDragStart($event, group.name)"
           @dragend="handleDragEnd"
         >
           <span
-            class="mld-group-assigner__pill-color"
+            class="mint-group-assigner__pill-color"
             :style="{ backgroundColor: group.color }"
           />
-          <span class="mld-group-assigner__pill-name">{{ group.name }}</span>
-          <span class="mld-group-assigner__pill-count">{{ group.count }}</span>
+          <span class="mint-group-assigner__pill-name">{{ group.name }}</span>
+          <span class="mint-group-assigner__pill-count">{{ group.count }}</span>
         </div>
       </div>
     </div>
 
     <!-- Validation message -->
-    <div v-if="validationMessage" class="mld-group-assigner__validation">
+    <div v-if="validationMessage" class="mint-group-assigner__validation">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <circle cx="12" cy="12" r="10" />
         <line x1="12" y1="8" x2="12" y2="12" />

package/src/components/GroupingModal.vue

@@ -224,13 +224,13 @@ function close() {
     @update:model-value="!$event && close()"
     @close="close"
   >
-    <div class="mld-grouping-modal">
+    <div class="mint-grouping-modal">
       <!-- File upload area -->
       <div
         v-if="!csvFile"
         :class="[
-          'mld-grouping-modal__dropzone',
-          isDragOver ? 'mld-grouping-modal__dropzone--dragover' : '',
+          'mint-grouping-modal__dropzone',
+          isDragOver ? 'mint-grouping-modal__dropzone--dragover' : '',
         ]"
         @drop="handleDrop"
         @dragover.prevent="isDragOver = true"
@@ -239,36 +239,36 @@ function close() {
         <input
           type="file"
           accept=".csv"
-          class="mld-grouping-modal__file-input"
+          class="mint-grouping-modal__file-input"
           @change="handleFileInput"
         />
-        <svg class="mld-grouping-modal__upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="mint-grouping-modal__upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
         </svg>
-        <p class="mld-grouping-modal__upload-text">
-          <span class="mld-grouping-modal__upload-highlight">Click to upload</span>
+        <p class="mint-grouping-modal__upload-text">
+          <span class="mint-grouping-modal__upload-highlight">Click to upload</span>
           or drag and drop a CSV file
         </p>
-        <p class="mld-grouping-modal__upload-hint">
+        <p class="mint-grouping-modal__upload-hint">
           CSV should contain sample names and grouping columns
         </p>
       </div>
 
       <!-- Error message -->
-      <div v-if="parseError" class="mld-grouping-modal__error">
+      <div v-if="parseError" class="mint-grouping-modal__error">
         {{ parseError }}
       </div>
 
       <!-- Configuration section -->
       <template v-if="csvFile && csvData.length > 0">
-        <div class="mld-grouping-modal__file-info">
-          <svg class="mld-grouping-modal__file-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="mint-grouping-modal__file-info">
+          <svg class="mint-grouping-modal__file-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
           </svg>
-          <span class="mld-grouping-modal__file-name">{{ csvFile.name }}</span>
+          <span class="mint-grouping-modal__file-name">{{ csvFile.name }}</span>
           <button
             type="button"
-            class="mld-grouping-modal__file-clear"
+            class="mint-grouping-modal__file-clear"
             @click="resetState"
           >
             Change file
@@ -276,9 +276,9 @@ function close() {
         </div>
 
         <!-- Column selection -->
-        <div class="mld-grouping-modal__config">
-          <div class="mld-grouping-modal__config-row">
-            <label class="mld-grouping-modal__label">Sample Column</label>
+        <div class="mint-grouping-modal__config">
+          <div class="mint-grouping-modal__config-row">
+            <label class="mint-grouping-modal__label">Sample Column</label>
             <BaseSelect
               v-model="sampleColumn"
               :options="columnOptions"
@@ -286,22 +286,22 @@ function close() {
             />
           </div>
 
-          <div class="mld-grouping-modal__config-row">
-            <label class="mld-grouping-modal__label">Group Columns</label>
-            <div class="mld-grouping-modal__group-columns">
+          <div class="mint-grouping-modal__config-row">
+            <label class="mint-grouping-modal__label">Group Columns</label>
+            <div class="mint-grouping-modal__group-columns">
               <!-- Selected group columns with reordering -->
-              <div v-if="groupColumns.length > 0" class="mld-grouping-modal__selected-columns">
+              <div v-if="groupColumns.length > 0" class="mint-grouping-modal__selected-columns">
                 <div
                   v-for="(col, index) in groupColumns"
                   :key="col"
-                  class="mld-grouping-modal__selected-column"
+                  class="mint-grouping-modal__selected-column"
                 >
-                  <span class="mld-grouping-modal__column-name">{{ col }}</span>
-                  <div class="mld-grouping-modal__column-actions">
+                  <span class="mint-grouping-modal__column-name">{{ col }}</span>
+                  <div class="mint-grouping-modal__column-actions">
                     <button
                       type="button"
                       :disabled="index === 0"
-                      class="mld-grouping-modal__column-btn"
+                      class="mint-grouping-modal__column-btn"
                       @click="moveGroupColumn(index, 'up')"
                     >
                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -311,7 +311,7 @@ function close() {
                     <button
                       type="button"
                       :disabled="index === groupColumns.length - 1"
-                      class="mld-grouping-modal__column-btn"
+                      class="mint-grouping-modal__column-btn"
                       @click="moveGroupColumn(index, 'down')"
                     >
                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -320,7 +320,7 @@ function close() {
                     </button>
                     <button
                       type="button"
-                      class="mld-grouping-modal__column-btn mld-grouping-modal__column-btn--remove"
+                      class="mint-grouping-modal__column-btn mint-grouping-modal__column-btn--remove"
                       @click="removeGroupColumn(col)"
                     >
                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -344,34 +344,34 @@ function close() {
         </div>
 
         <!-- Match status -->
-        <div v-if="sampleColumn" class="mld-grouping-modal__match-status">
-          <div class="mld-grouping-modal__match-stat mld-grouping-modal__match-stat--matched">
-            <span class="mld-grouping-modal__match-count">{{ matchedSamples.length }}</span>
-            <span class="mld-grouping-modal__match-label">samples matched</span>
+        <div v-if="sampleColumn" class="mint-grouping-modal__match-status">
+          <div class="mint-grouping-modal__match-stat mint-grouping-modal__match-stat--matched">
+            <span class="mint-grouping-modal__match-count">{{ matchedSamples.length }}</span>
+            <span class="mint-grouping-modal__match-label">samples matched</span>
           </div>
           <div
             v-if="unmatchedSamples.length > 0"
-            class="mld-grouping-modal__match-stat mld-grouping-modal__match-stat--unmatched"
+            class="mint-grouping-modal__match-stat mint-grouping-modal__match-stat--unmatched"
           >
-            <span class="mld-grouping-modal__match-count">{{ unmatchedSamples.length }}</span>
-            <span class="mld-grouping-modal__match-label">samples not found in CSV</span>
+            <span class="mint-grouping-modal__match-count">{{ unmatchedSamples.length }}</span>
+            <span class="mint-grouping-modal__match-label">samples not found in CSV</span>
           </div>
         </div>
 
         <!-- Preview table -->
-        <div v-if="previewData.length > 0" class="mld-grouping-modal__preview">
-          <h4 class="mld-grouping-modal__preview-title">Data Preview</h4>
-          <div class="mld-grouping-modal__table-wrapper">
-            <table class="mld-grouping-modal__table">
+        <div v-if="previewData.length > 0" class="mint-grouping-modal__preview">
+          <h4 class="mint-grouping-modal__preview-title">Data Preview</h4>
+          <div class="mint-grouping-modal__table-wrapper">
+            <table class="mint-grouping-modal__table">
               <thead>
                 <tr>
                   <th
                     v-for="col in csvColumns"
                     :key="col"
                     :class="[
-                      'mld-grouping-modal__th',
-                      col === sampleColumn ? 'mld-grouping-modal__th--sample' : '',
-                      groupColumns.includes(col) ? 'mld-grouping-modal__th--group' : '',
+                      'mint-grouping-modal__th',
+                      col === sampleColumn ? 'mint-grouping-modal__th--sample' : '',
+                      groupColumns.includes(col) ? 'mint-grouping-modal__th--group' : '',
                     ]"
                   >
                     {{ col }}
@@ -384,9 +384,9 @@ function close() {
                     v-for="col in csvColumns"
                     :key="col"
                     :class="[
-                      'mld-grouping-modal__td',
-                      col === sampleColumn ? 'mld-grouping-modal__td--sample' : '',
-                      groupColumns.includes(col) ? 'mld-grouping-modal__td--group' : '',
+                      'mint-grouping-modal__td',
+                      col === sampleColumn ? 'mint-grouping-modal__td--sample' : '',
+                      groupColumns.includes(col) ? 'mint-grouping-modal__td--group' : '',
                     ]"
                   >
                     {{ row[col] }}
@@ -395,7 +395,7 @@ function close() {
               </tbody>
             </table>
           </div>
-          <p v-if="csvData.length > 5" class="mld-grouping-modal__preview-note">
+          <p v-if="csvData.length > 5" class="mint-grouping-modal__preview-note">
             Showing 5 of {{ csvData.length }} rows
           </p>
         </div>
@@ -403,7 +403,7 @@ function close() {
     </div>
 
     <template #footer>
-      <div class="mld-grouping-modal__footer">
+      <div class="mint-grouping-modal__footer">
         <BaseButton variant="secondary" @click="close">Cancel</BaseButton>
         <BaseButton
           variant="primary"

package/src/components/IconButton.vue

@@ -35,16 +35,16 @@ function handleClick(event: MouseEvent) {
     :aria-label="label"
     :title="label"
     :class="[
-      'mld-icon-button',
-      `mld-icon-button--${variant}`,
-      `mld-icon-button--${size}`,
-      (disabled || loading) ? 'mld-icon-button--disabled' : '',
+      'mint-icon-button',
+      `mint-icon-button--${variant}`,
+      `mint-icon-button--${size}`,
+      (disabled || loading) ? 'mint-icon-button--disabled' : '',
     ]"
     @click="handleClick"
   >
     <svg
       v-if="loading"
-      :class="['mld-icon-button__spinner', `mld-icon-button__icon--${size}`]"
+      :class="['mint-icon-button__spinner', `mint-icon-button__icon--${size}`]"
       fill="none"
       viewBox="0 0 24 24"
     >
@@ -62,7 +62,7 @@ function handleClick(event: MouseEvent) {
         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
       />
     </svg>
-    <span v-else :class="`mld-icon-button__icon--${size}`">
+    <span v-else :class="`mint-icon-button__icon--${size}`">
       <slot />
     </span>
   </button>

package/src/components/LoadingSpinner.vue

@@ -16,14 +16,14 @@ withDefaults(defineProps<Props>(), {
 <template>
   <div
     :class="[
-      'mld-spinner',
-      `mld-spinner--${size}`,
-      `mld-spinner--${variant}`,
+      'mint-spinner',
+      `mint-spinner--${size}`,
+      `mint-spinner--${variant}`,
     ]"
     role="status"
   >
     <svg
-      class="mld-spinner__svg"
+      class="mint-spinner__svg"
       fill="none"
       viewBox="0 0 24 24"
     >
@@ -41,7 +41,7 @@ withDefaults(defineProps<Props>(), {
         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
       />
     </svg>
-    <span class="mld-spinner__label">{{ label }}</span>
+    <span class="mint-spinner__label">{{ label }}</span>
   </div>
 </template>
 

package/src/components/MoleculeInput.vue

@@ -284,20 +284,20 @@ onUnmounted(() => {
 <template>
   <div
     :class="[
-      'mld-molecule-input',
-      disabled ? 'mld-molecule-input--disabled' : '',
-      readonly ? 'mld-molecule-input--readonly' : '',
-      error ? 'mld-molecule-input--error' : '',
+      'mint-molecule-input',
+      disabled ? 'mint-molecule-input--disabled' : '',
+      readonly ? 'mint-molecule-input--readonly' : '',
+      error ? 'mint-molecule-input--error' : '',
     ]"
   >
     <!-- Loading state -->
     <div
       v-if="isLoading && !readonly"
-      class="mld-molecule-input__skeleton"
+      class="mint-molecule-input__skeleton"
       :style="{ height: `${height}px` }"
     >
       <svg
-        class="mld-molecule-input__skeleton-icon"
+        class="mint-molecule-input__skeleton-icon"
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24"
@@ -310,16 +310,16 @@ onUnmounted(() => {
           d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
         />
       </svg>
-      <span class="mld-molecule-input__skeleton-text">Loading molecule editor...</span>
+      <span class="mint-molecule-input__skeleton-text">Loading molecule editor...</span>
     </div>
 
     <!-- Error state -->
     <div
       v-else-if="loadError"
-      class="mld-molecule-input__error"
+      class="mint-molecule-input__error"
     >
       <svg
-        class="mld-molecule-input__error-icon"
+        class="mint-molecule-input__error-icon"
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24"
@@ -339,13 +339,13 @@ onUnmounted(() => {
     <template v-else-if="readonly">
       <div
         v-if="hasStructure"
-        class="mld-molecule-input__readonly"
+        class="mint-molecule-input__readonly"
         :style="{ height: `${height}px` }"
       >
         <!-- In readonly mode, we just display a placeholder since we don't have SVG rendering -->
-        <div class="mld-molecule-input__empty">
+        <div class="mint-molecule-input__empty">
           <svg
-            class="mld-molecule-input__empty-icon"
+            class="mint-molecule-input__empty-icon"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -358,16 +358,16 @@ onUnmounted(() => {
               d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
             />
           </svg>
-          <span class="mld-molecule-input__empty-text">Structure defined (readonly)</span>
+          <span class="mint-molecule-input__empty-text">Structure defined (readonly)</span>
         </div>
       </div>
       <div
         v-else
-        class="mld-molecule-input__empty"
+        class="mint-molecule-input__empty"
         :style="{ height: `${height}px` }"
       >
         <svg
-          class="mld-molecule-input__empty-icon"
+          class="mint-molecule-input__empty-icon"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -380,7 +380,7 @@ onUnmounted(() => {
             d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
           />
         </svg>
-        <span class="mld-molecule-input__empty-text">No structure</span>
+        <span class="mint-molecule-input__empty-text">No structure</span>
       </div>
     </template>
 
@@ -388,17 +388,17 @@ onUnmounted(() => {
     <template v-else>
       <div
         ref="containerRef"
-        class="mld-molecule-input__editor"
+        class="mint-molecule-input__editor"
         :style="{ height: `${height}px` }"
         role="application"
         aria-label="Molecule structure editor"
       />
 
       <!-- Actions toolbar -->
-      <div class="mld-molecule-input__actions">
+      <div class="mint-molecule-input__actions">
         <button
           type="button"
-          class="mld-molecule-input__action-btn"
+          class="mint-molecule-input__action-btn"
           :disabled="!hasStructure || disabled"
           aria-label="Clear structure"
           @click="clearStructure"
@@ -413,9 +413,9 @@ onUnmounted(() => {
     <!-- SMILES display -->
     <div
       v-if="showSmiles && hasStructure && !loadError"
-      class="mld-molecule-input__smiles"
+      class="mint-molecule-input__smiles"
     >
-      <span class="mld-molecule-input__smiles-label">SMILES:</span>
+      <span class="mint-molecule-input__smiles-label">SMILES:</span>
       {{ modelValue?.smiles }}
     </div>
   </div>

package/src/components/MultiSelect.vue

@@ -58,19 +58,19 @@ const selectedLabels = computed(() => {
 <template>
   <div
     :class="[
-      'mld-multi-select',
-      `mld-multi-select--${size}`,
-      disabled ? 'mld-multi-select--disabled' : '',
+      'mint-multi-select',
+      `mint-multi-select--${size}`,
+      disabled ? 'mint-multi-select--disabled' : '',
     ]"
   >
     <div
       v-if="modelValue.length === 0"
-      class="mld-multi-select__placeholder"
+      class="mint-multi-select__placeholder"
     >
       {{ placeholder }}
     </div>
 
-    <div class="mld-multi-select__options" role="group">
+    <div class="mint-multi-select__options" role="group">
       <button
         v-for="option in options"
         :key="String(option.value)"
@@ -79,19 +79,19 @@ const selectedLabels = computed(() => {
         :aria-checked="isSelected(option.value)"
         :disabled="disabled || option.disabled || (!isSelected(option.value) && !canSelectMore)"
         :class="[
-          'mld-multi-select__chip',
-          `mld-multi-select__chip--${size}`,
-          isSelected(option.value) ? 'mld-multi-select__chip--active' : '',
-          option.disabled ? 'mld-multi-select__chip--disabled' : '',
-          !isSelected(option.value) && !canSelectMore ? 'mld-multi-select__chip--disabled' : '',
+          'mint-multi-select__chip',
+          `mint-multi-select__chip--${size}`,
+          isSelected(option.value) ? 'mint-multi-select__chip--active' : '',
+          option.disabled ? 'mint-multi-select__chip--disabled' : '',
+          !isSelected(option.value) && !canSelectMore ? 'mint-multi-select__chip--disabled' : '',
         ]"
         @click="toggleOption(option)"
         @keydown="handleKeydown($event, option)"
       >
-        <span class="mld-multi-select__chip-label">{{ option.label }}</span>
+        <span class="mint-multi-select__chip-label">{{ option.label }}</span>
         <svg
           v-if="isSelected(option.value)"
-          class="mld-multi-select__chip-check"
+          class="mint-multi-select__chip-check"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -106,7 +106,7 @@ const selectedLabels = computed(() => {
 
     <div
       v-if="modelValue.length > 0"
-      class="mld-multi-select__summary"
+      class="mint-multi-select__summary"
     >
       {{ selectedLabels.join(', ') }}
     </div>