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

package/src/components/AutoGroupModal.vue

@@ -218,7 +218,7 @@ const isFirstStep = computed(() => currentStep.value === 0)
     @update:model-value="emit('update:modelValue', $event)"
     @close="handleCancel"
   >
-    <div class="mld-auto-group">
+    <div class="mint-auto-group">
       <StepWizard
         ref="wizardRef"
         v-model="currentStep"
@@ -228,9 +228,9 @@ const isFirstStep = computed(() => currentStep.value === 0)
       >
         <!-- Step: Input -->
         <template #step-input>
-          <div class="mld-auto-group__input-step">
+          <div class="mint-auto-group__input-step">
             <!-- Mode toggle -->
-            <div class="mld-auto-group__mode-toggle">
+            <div class="mint-auto-group__mode-toggle">
               <BaseButton
                 v-if="experimentId || designData"
                 :variant="autoGroup.inputMode.value === 'experiment' ? 'primary' : 'secondary'"
@@ -257,56 +257,56 @@ const isFirstStep = computed(() => currentStep.value === 0)
             </div>
 
             <!-- Experiment mode -->
-            <div v-if="autoGroup.inputMode.value === 'experiment'" class="mld-auto-group__experiment">
-              <div v-if="experimentLoading" class="mld-auto-group__experiment-loading">
+            <div v-if="autoGroup.inputMode.value === 'experiment'" class="mint-auto-group__experiment">
+              <div v-if="experimentLoading" class="mint-auto-group__experiment-loading">
                 <LoadingSpinner size="sm" />
                 <span>Loading experiment metadata…</span>
               </div>
-              <div v-else-if="experimentError" class="mld-auto-group__experiment-error">
+              <div v-else-if="experimentError" class="mint-auto-group__experiment-error">
                 <p>{{ experimentError }}</p>
                 <p>
-                  Switch to <button type="button" class="mld-auto-group__link-btn" @click="autoGroup.inputMode.value = 'paste'">Paste</button>
-                  or <button type="button" class="mld-auto-group__link-btn" @click="autoGroup.inputMode.value = 'csv'">CSV</button> mode instead.
+                  Switch to <button type="button" class="mint-auto-group__link-btn" @click="autoGroup.inputMode.value = 'paste'">Paste</button>
+                  or <button type="button" class="mint-auto-group__link-btn" @click="autoGroup.inputMode.value = 'csv'">CSV</button> mode instead.
                 </p>
               </div>
-              <div v-else-if="autoGroup.csvData.value" class="mld-auto-group__experiment-loaded">
-                <div class="mld-auto-group__experiment-summary">
-                  <span class="mld-auto-group__experiment-stat">
+              <div v-else-if="autoGroup.csvData.value" class="mint-auto-group__experiment-loaded">
+                <div class="mint-auto-group__experiment-summary">
+                  <span class="mint-auto-group__experiment-stat">
                     <strong>{{ autoGroup.csvData.value.rows.length }}</strong> samples
                   </span>
-                  <span class="mld-auto-group__experiment-stat">
+                  <span class="mint-auto-group__experiment-stat">
                     <strong>{{ experimentFieldNames.length }}</strong> metadata fields
                   </span>
                 </div>
-                <div class="mld-auto-group__experiment-fields">
+                <div class="mint-auto-group__experiment-fields">
                   <span
                     v-for="col in experimentFieldNames"
                     :key="col"
-                    class="mld-auto-group__field-value"
+                    class="mint-auto-group__field-value"
                   >{{ col }}</span>
                 </div>
               </div>
             </div>
 
             <!-- Paste mode -->
-            <div v-if="autoGroup.inputMode.value === 'paste'" class="mld-auto-group__paste">
+            <div v-if="autoGroup.inputMode.value === 'paste'" class="mint-auto-group__paste">
               <textarea
                 v-model="autoGroup.rawText.value"
-                class="mld-auto-group__textarea"
+                class="mint-auto-group__textarea"
                 rows="12"
                 placeholder="Paste sample names, one per line..."
               />
-              <div v-if="autoGroup.samples.value.length > 0" class="mld-auto-group__sample-count">
+              <div v-if="autoGroup.samples.value.length > 0" class="mint-auto-group__sample-count">
                 {{ autoGroup.samples.value.length }} samples
               </div>
             </div>
 
             <!-- CSV mode -->
-            <div v-if="autoGroup.inputMode.value === 'csv'" class="mld-auto-group__csv">
+            <div v-if="autoGroup.inputMode.value === 'csv'" class="mint-auto-group__csv">
               <div v-if="!autoGroup.csvData.value"
                 :class="[
-                  'mld-auto-group__dropzone',
-                  isDragOver ? 'mld-auto-group__dropzone--dragover' : '',
+                  'mint-auto-group__dropzone',
+                  isDragOver ? 'mint-auto-group__dropzone--dragover' : '',
                 ]"
                 @drop="handleFileDrop"
                 @dragover.prevent="isDragOver = true"
@@ -315,34 +315,34 @@ const isFirstStep = computed(() => currentStep.value === 0)
                 <input
                   type="file"
                   accept=".csv,.tsv"
-                  class="mld-auto-group__file-input"
+                  class="mint-auto-group__file-input"
                   @change="handleFileInput"
                 />
-                <svg class="mld-auto-group__upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="mint-auto-group__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-auto-group__upload-text">
-                  <span class="mld-auto-group__upload-highlight">Click to upload</span>
+                <p class="mint-auto-group__upload-text">
+                  <span class="mint-auto-group__upload-highlight">Click to upload</span>
                   or drag and drop a CSV file
                 </p>
-                <p class="mld-auto-group__upload-hint">
+                <p class="mint-auto-group__upload-hint">
                   CSV or TSV with a header row. First column or column named
                   "Sample" / "File Name" is used as sample identifier.
                   Other columns become grouping fields.
                 </p>
               </div>
 
-              <div v-if="csvError && !autoGroup.csvData.value" class="mld-auto-group__csv-error">
+              <div v-if="csvError && !autoGroup.csvData.value" class="mint-auto-group__csv-error">
                 {{ csvError }}
               </div>
 
-              <div v-if="autoGroup.csvData.value" class="mld-auto-group__file-info">
-                <svg class="mld-auto-group__file-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div v-if="autoGroup.csvData.value" class="mint-auto-group__file-info">
+                <svg class="mint-auto-group__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-auto-group__file-name">{{ csvFileName }}</span>
-                <span class="mld-auto-group__file-rows">{{ autoGroup.csvData.value.rows.length }} rows</span>
-                <button type="button" class="mld-auto-group__file-clear" @click="clearCsvFile">
+                <span class="mint-auto-group__file-name">{{ csvFileName }}</span>
+                <span class="mint-auto-group__file-rows">{{ autoGroup.csvData.value.rows.length }} rows</span>
+                <button type="button" class="mint-auto-group__file-clear" @click="clearCsvFile">
                   Change file
                 </button>
               </div>
@@ -352,15 +352,15 @@ const isFirstStep = computed(() => currentStep.value === 0)
 
         <!-- Step: Outliers -->
         <template #step-outliers>
-          <div class="mld-auto-group__outlier-step">
-            <div class="mld-auto-group__outlier-banner">
+          <div class="mint-auto-group__outlier-step">
+            <div class="mint-auto-group__outlier-banner">
               {{ autoGroup.outliers.value.length }} of {{ autoGroup.samples.value.length }}
               samples have irregular structure
               (fewer than {{ autoGroup.dominantFieldCount.value }} fields, delimiter
               <code>{{ autoGroup.delimiter.value }}</code>)
             </div>
 
-            <div class="mld-auto-group__outlier-batch">
+            <div class="mint-auto-group__outlier-batch">
               <BaseButton size="sm" variant="secondary" @click="autoGroup.setAllOutlierActions('include')">
                 Include All
               </BaseButton>
@@ -369,30 +369,30 @@ const isFirstStep = computed(() => currentStep.value === 0)
               </BaseButton>
             </div>
 
-            <div class="mld-auto-group__outlier-list">
+            <div class="mint-auto-group__outlier-list">
               <div
                 v-for="outlier in autoGroup.outliers.value"
                 :key="outlier.index"
-                class="mld-auto-group__outlier-item"
+                class="mint-auto-group__outlier-item"
               >
-                <div class="mld-auto-group__outlier-info">
-                  <code class="mld-auto-group__outlier-name">{{ outlier.sample }}</code>
-                  <span class="mld-auto-group__outlier-badge">{{ outlier.fieldCount }} fields</span>
+                <div class="mint-auto-group__outlier-info">
+                  <code class="mint-auto-group__outlier-name">{{ outlier.sample }}</code>
+                  <span class="mint-auto-group__outlier-badge">{{ outlier.fieldCount }} fields</span>
                 </div>
-                <div class="mld-auto-group__outlier-actions">
+                <div class="mint-auto-group__outlier-actions">
                   <button
                     type="button"
-                    :class="['mld-auto-group__action-btn', outlier.action === 'include' ? 'mld-auto-group__action-btn--active' : '']"
+                    :class="['mint-auto-group__action-btn', outlier.action === 'include' ? 'mint-auto-group__action-btn--active' : '']"
                     @click="autoGroup.setOutlierAction(outlier.index, 'include')"
                   >Include</button>
                   <button
                     type="button"
-                    :class="['mld-auto-group__action-btn', outlier.action === 'exclude' ? 'mld-auto-group__action-btn--active mld-auto-group__action-btn--exclude' : '']"
+                    :class="['mint-auto-group__action-btn', outlier.action === 'exclude' ? 'mint-auto-group__action-btn--active mint-auto-group__action-btn--exclude' : '']"
                     @click="autoGroup.setOutlierAction(outlier.index, 'exclude')"
                   >Exclude</button>
                   <button
                     type="button"
-                    :class="['mld-auto-group__action-btn', outlier.action === 'qc' ? 'mld-auto-group__action-btn--active mld-auto-group__action-btn--qc' : '']"
+                    :class="['mint-auto-group__action-btn', outlier.action === 'qc' ? 'mint-auto-group__action-btn--active mint-auto-group__action-btn--qc' : '']"
                     @click="autoGroup.setOutlierAction(outlier.index, 'qc')"
                   >QC</button>
                 </div>
@@ -403,50 +403,50 @@ const isFirstStep = computed(() => currentStep.value === 0)
 
         <!-- Step: Fields -->
         <template #step-fields>
-          <div class="mld-auto-group__field-step">
-            <div class="mld-auto-group__field-grid">
+          <div class="mint-auto-group__field-step">
+            <div class="mint-auto-group__field-grid">
               <div
                 v-for="col in autoGroup.effectiveColumns.value"
                 :key="col.index"
                 :class="[
-                  'mld-auto-group__field-card',
-                  autoGroup.enabledFields.value.has(col.index) ? 'mld-auto-group__field-card--enabled' : '',
+                  'mint-auto-group__field-card',
+                  autoGroup.enabledFields.value.has(col.index) ? 'mint-auto-group__field-card--enabled' : '',
                 ]"
               >
-                <div class="mld-auto-group__field-header">
-                  <label class="mld-auto-group__field-toggle">
+                <div class="mint-auto-group__field-header">
+                  <label class="mint-auto-group__field-toggle">
                     <input
                       type="checkbox"
                       :checked="autoGroup.enabledFields.value.has(col.index)"
                       @change="autoGroup.toggleField(col.index)"
                     />
-                    <span class="mld-auto-group__field-toggle-label">Group by</span>
+                    <span class="mint-auto-group__field-toggle-label">Group by</span>
                   </label>
-                  <span class="mld-auto-group__field-cardinality">{{ col.cardinality }} unique</span>
+                  <span class="mint-auto-group__field-cardinality">{{ col.cardinality }} unique</span>
                 </div>
 
                 <BaseInput
                   :model-value="col.name"
                   placeholder="Field name..."
-                  class="mld-auto-group__field-name-input"
+                  class="mint-auto-group__field-name-input"
                   @update:model-value="autoGroup.renameField(col.index, String($event ?? ''))"
                 />
 
-                <div class="mld-auto-group__field-values">
+                <div class="mint-auto-group__field-values">
                   <span
                     v-for="val in col.uniqueValues.slice(0, 5)"
                     :key="val"
-                    class="mld-auto-group__field-value"
+                    class="mint-auto-group__field-value"
                   >{{ val }}</span>
                   <span
                     v-if="col.uniqueValues.length > 5"
-                    class="mld-auto-group__field-more"
+                    class="mint-auto-group__field-more"
                   >+{{ col.uniqueValues.length - 5 }} more</span>
                 </div>
               </div>
             </div>
 
-            <div v-if="autoGroup.enabledFields.value.size > 0" class="mld-auto-group__field-summary">
+            <div v-if="autoGroup.enabledFields.value.size > 0" class="mint-auto-group__field-summary">
               Grouping by:
               <strong>{{
                 autoGroup.effectiveColumns.value
@@ -456,7 +456,7 @@ const isFirstStep = computed(() => currentStep.value === 0)
               }}</strong>
             </div>
 
-            <div v-if="autoGroup.enabledFields.value.size === 0" class="mld-auto-group__field-warning">
+            <div v-if="autoGroup.enabledFields.value.size === 0" class="mint-auto-group__field-warning">
               Select at least one field for grouping
             </div>
           </div>
@@ -464,15 +464,15 @@ const isFirstStep = computed(() => currentStep.value === 0)
 
         <!-- Step: Preview -->
         <template #step-preview>
-          <div class="mld-auto-group__preview-step">
-            <div class="mld-auto-group__preview-summary">
-              <span class="mld-auto-group__preview-stat">
+          <div class="mint-auto-group__preview-step">
+            <div class="mint-auto-group__preview-summary">
+              <span class="mint-auto-group__preview-stat">
                 <strong>{{ autoGroup.groups.value.length }}</strong> groups
               </span>
-              <span class="mld-auto-group__preview-stat">
+              <span class="mint-auto-group__preview-stat">
                 <strong>{{ autoGroup.groups.value.reduce((sum, g) => sum + g.samples.length, 0) }}</strong> samples
               </span>
-              <span v-if="autoGroup.excludedSamples.value.length > 0" class="mld-auto-group__preview-stat mld-auto-group__preview-stat--excluded">
+              <span v-if="autoGroup.excludedSamples.value.length > 0" class="mint-auto-group__preview-stat mint-auto-group__preview-stat--excluded">
                 <strong>{{ autoGroup.excludedSamples.value.length }}</strong> excluded
               </span>
             </div>
@@ -485,40 +485,40 @@ const isFirstStep = computed(() => currentStep.value === 0)
               Your enabled fields produce a unique key for every row, so no aggregation is happening. Go back to <em>Fields</em> and disable any column whose values are unique per sample.
             </AlertBox>
 
-            <div class="mld-auto-group__preview-groups">
+            <div class="mint-auto-group__preview-groups">
               <details
                 v-for="group in autoGroup.groups.value"
                 :key="group.name"
-                class="mld-auto-group__preview-group"
+                class="mint-auto-group__preview-group"
               >
-                <summary class="mld-auto-group__preview-group-header">
+                <summary class="mint-auto-group__preview-group-header">
                   <span
-                    class="mld-auto-group__preview-dot"
+                    class="mint-auto-group__preview-dot"
                     :style="{ backgroundColor: group.color }"
                   />
-                  <span class="mld-auto-group__preview-group-name">{{ group.name }}</span>
+                  <span class="mint-auto-group__preview-group-name">{{ group.name }}</span>
                   <span
-                    class="mld-auto-group__preview-group-count"
+                    class="mint-auto-group__preview-group-count"
                     :style="{ backgroundColor: group.color + '20', color: group.color }"
                   >{{ group.samples.length }}</span>
                 </summary>
-                <div class="mld-auto-group__preview-samples">
+                <div class="mint-auto-group__preview-samples">
                   <span
                     v-for="sample in group.samples"
                     :key="sample"
-                    class="mld-auto-group__preview-sample"
+                    class="mint-auto-group__preview-sample"
                   >{{ sample }}</span>
                 </div>
               </details>
             </div>
 
-            <div v-if="autoGroup.excludedSamples.value.length > 0" class="mld-auto-group__preview-excluded">
-              <div class="mld-auto-group__preview-excluded-title">Excluded Samples</div>
-              <div class="mld-auto-group__preview-excluded-list">
+            <div v-if="autoGroup.excludedSamples.value.length > 0" class="mint-auto-group__preview-excluded">
+              <div class="mint-auto-group__preview-excluded-title">Excluded Samples</div>
+              <div class="mint-auto-group__preview-excluded-list">
                 <span
                   v-for="sample in autoGroup.excludedSamples.value"
                   :key="sample"
-                  class="mld-auto-group__preview-sample mld-auto-group__preview-sample--excluded"
+                  class="mint-auto-group__preview-sample mint-auto-group__preview-sample--excluded"
                 >{{ sample }}</span>
               </div>
             </div>
@@ -527,11 +527,11 @@ const isFirstStep = computed(() => currentStep.value === 0)
 
         <!-- Custom navigation -->
         <template #navigation="{ goBack, goNext, canProceed }">
-          <div class="mld-auto-group__nav">
+          <div class="mint-auto-group__nav">
             <BaseButton variant="secondary" @click="handleCancel">
               Cancel
             </BaseButton>
-            <div class="mld-auto-group__nav-spacer" />
+            <div class="mint-auto-group__nav-spacer" />
             <BaseButton
               v-if="!isFirstStep"
               variant="secondary"

package/src/components/Avatar.vue

@@ -40,26 +40,26 @@ const backgroundColor = computed(() => {
 
 <template>
   <span
-    :class="['mld-avatar', `mld-avatar--${size}`]"
+    :class="['mint-avatar', `mint-avatar--${size}`]"
     role="img"
     :aria-label="alt || name || 'User avatar'"
   >
     <span
-      class="mld-avatar__face"
+      class="mint-avatar__face"
       :style="backgroundColor ? { backgroundColor } : undefined"
     >
       <img
         v-if="src"
         :src="src"
         :alt="alt || name || ''"
-        class="mld-avatar__image"
+        class="mint-avatar__image"
       >
-      <span v-else-if="computedInitials" class="mld-avatar__initials">
+      <span v-else-if="computedInitials" class="mint-avatar__initials">
         {{ computedInitials }}
       </span>
       <svg
         v-else
-        class="mld-avatar__fallback"
+        class="mint-avatar__fallback"
         viewBox="0 0 24 24"
         fill="currentColor"
       >
@@ -68,7 +68,7 @@ const backgroundColor = computed(() => {
     </span>
     <span
       v-if="status"
-      :class="['mld-avatar__status', `mld-avatar__status--${status}`]"
+      :class="['mint-avatar__status', `mint-avatar__status--${status}`]"
       aria-hidden="true"
     />
   </span>

package/src/components/BaseButton.vue

@@ -36,17 +36,17 @@ function handleClick(event: MouseEvent) {
     :type="type"
     :disabled="disabled || loading"
     :class="[
-      'mld-button',
-      `mld-button--${variant}`,
-      `mld-button--${size}`,
-      fullWidth ? 'mld-button--full-width' : '',
-      (disabled || loading) ? 'mld-button--disabled' : '',
+      'mint-button',
+      `mint-button--${variant}`,
+      `mint-button--${size}`,
+      fullWidth ? 'mint-button--full-width' : '',
+      (disabled || loading) ? 'mint-button--disabled' : '',
     ]"
     @click="handleClick"
   >
     <svg
       v-if="loading"
-      class="mld-button__spinner"
+      class="mint-button__spinner"
       fill="none"
       viewBox="0 0 24 24"
     >

package/src/components/BaseCheckbox.vue

@@ -26,29 +26,29 @@ function handleChange(event: Event) {
 <template>
   <label
     :class="[
-      'mld-checkbox',
-      props.disabled ? 'mld-checkbox--disabled' : '',
+      'mint-checkbox',
+      props.disabled ? 'mint-checkbox--disabled' : '',
     ]"
   >
-    <div class="mld-checkbox__input-wrapper">
+    <div class="mint-checkbox__input-wrapper">
       <input
         type="checkbox"
         :checked="props.modelValue"
         :disabled="props.disabled"
         :aria-label="props.label || 'Checkbox'"
-        class="mld-checkbox__native"
+        class="mint-checkbox__native"
         @change="handleChange"
       />
       <div
         :class="[
-          'mld-checkbox__box',
-          `mld-checkbox__box--${props.size}`,
-          props.modelValue ? 'mld-checkbox__box--checked' : '',
+          'mint-checkbox__box',
+          `mint-checkbox__box--${props.size}`,
+          props.modelValue ? 'mint-checkbox__box--checked' : '',
         ]"
       >
         <svg
           v-if="props.modelValue"
-          :class="['mld-checkbox__icon', `mld-checkbox__icon--${props.size}`]"
+          :class="['mint-checkbox__icon', `mint-checkbox__icon--${props.size}`]"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -58,7 +58,7 @@ function handleChange(event: Event) {
         </svg>
       </div>
     </div>
-    <span v-if="props.label" :class="['mld-checkbox__label', `mld-checkbox__label--${props.size}`]">
+    <span v-if="props.label" :class="['mint-checkbox__label', `mint-checkbox__label--${props.size}`]">
       {{ props.label }}
     </span>
   </label>

package/src/components/BaseInput.vue

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

package/src/components/BaseModal.story.vue

@@ -31,7 +31,7 @@ const sheetOpen = ref(false)
         <BaseModal
           v-model="refreshOpen"
           title="Confirm uninstall"
-          subtitle="mld-plugin-metabolomics · v2.4.1"
+          subtitle="mint-plugin-metabolomics · v2.4.1"
           size="md"
         >
           Removing this plugin will delete its routes from the platform on next restart.

package/src/components/BaseModal.vue

@@ -116,35 +116,35 @@ onUnmounted(() => {
     <Transition :name="`modal-${variant}`">
       <div
         v-if="modelValue"
-        :class="['mld-modal', `mld-modal--${variant}`]"
+        :class="['mint-modal', `mint-modal--${variant}`]"
         @click="handleOverlayClick"
       >
         <!-- Overlay -->
-        <div class="mld-modal__overlay" />
+        <div class="mint-modal__overlay" />
 
         <!-- Modal -->
         <div
           ref="containerRef"
           :class="[
-            'mld-modal__container',
-            `mld-modal__container--${size}`,
-            `mld-modal__container--${variant}`,
+            'mint-modal__container',
+            `mint-modal__container--${size}`,
+            `mint-modal__container--${variant}`,
           ]"
           role="dialog"
           aria-modal="true"
           tabindex="-1"
         >
           <!-- Sheet grab-hint bar (sheet variant only) -->
-          <div v-if="variant === 'sheet'" class="mld-modal__grab-hint" aria-hidden="true" />
+          <div v-if="variant === 'sheet'" class="mint-modal__grab-hint" aria-hidden="true" />
 
           <!-- Header -->
-          <div v-if="title || subtitle || closable || $slots.header" class="mld-modal__header">
-            <div v-if="title || subtitle || $slots.header" class="mld-modal__header-text">
+          <div v-if="title || subtitle || closable || $slots.header" class="mint-modal__header">
+            <div v-if="title || subtitle || $slots.header" class="mint-modal__header-text">
               <slot name="header">
-                <h3 v-if="title" class="mld-modal__title">
+                <h3 v-if="title" class="mint-modal__title">
                   {{ title }}
                 </h3>
-                <p v-if="subtitle" class="mld-modal__subtitle">
+                <p v-if="subtitle" class="mint-modal__subtitle">
                   {{ subtitle }}
                 </p>
               </slot>
@@ -152,23 +152,23 @@ onUnmounted(() => {
             <button
               v-if="closable"
               type="button"
-              class="mld-modal__close"
+              class="mint-modal__close"
               aria-label="Close modal"
               @click="close"
             >
-              <svg class="mld-modal__close-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+              <svg class="mint-modal__close-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>
           </div>
 
           <!-- Body -->
-          <div class="mld-modal__body">
+          <div class="mint-modal__body">
             <slot />
           </div>
 
           <!-- Footer -->
-          <div v-if="$slots.footer" class="mld-modal__footer">
+          <div v-if="$slots.footer" class="mint-modal__footer">
             <slot name="footer" />
           </div>
         </div>

package/src/components/BasePill.vue

@@ -57,27 +57,27 @@ function handleRemove(event: MouseEvent) {
 <template>
   <span
     :class="[
-      'mld-pill',
-      `mld-pill--${variant}`,
-      color && `mld-pill--${color}`,
-      `mld-pill--${size}`,
-      { 'mld-pill--disabled': disabled, 'mld-pill--with-icon': icon },
+      'mint-pill',
+      `mint-pill--${variant}`,
+      color && `mint-pill--${color}`,
+      `mint-pill--${size}`,
+      { 'mint-pill--disabled': disabled, 'mint-pill--with-icon': icon },
     ]"
   >
-    <span v-if="icon" class="mld-pill__icon">
+    <span v-if="icon" class="mint-pill__icon">
       <slot name="icon" />
     </span>
-    <span class="mld-pill__label">
+    <span class="mint-pill__label">
       <slot />
     </span>
     <button
       v-if="removable && !disabled"
       type="button"
-      class="mld-pill__remove"
+      class="mint-pill__remove"
       aria-label="Remove"
       @click="handleRemove"
     >
-      <svg class="mld-pill__remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+      <svg class="mint-pill__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>