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

package/src/components/ScheduleCalendar.vue

@@ -286,13 +286,13 @@ function getNowIndicatorStyle(): Record<string, string> | null {
 }
 
 function getStatusClass(status?: ScheduleEventStatus): string {
-  if (!status) return 'mld-schedule__event--confirmed'
-  return `mld-schedule__event--${status}`
+  if (!status) return 'mint-schedule__event--confirmed'
+  return `mint-schedule__event--${status}`
 }
 
 function getMonthStatusClass(status?: ScheduleEventStatus): string {
-  if (!status) return 'mld-schedule__month-event--confirmed'
-  return `mld-schedule__month-event--${status}`
+  if (!status) return 'mint-schedule__month-event--confirmed'
+  return `mint-schedule__month-event--${status}`
 }
 
 function onEventClick(event: ScheduleEvent, e: MouseEvent) {
@@ -361,13 +361,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="mld-schedule" :style="({ '--slot-height': `${SLOT_HEIGHT}px` } as Record<string, string>)">
+  <div class="mint-schedule" :style="({ '--slot-height': `${SLOT_HEIGHT}px` } as Record<string, string>)">
     <!-- Header -->
-    <div v-if="showNavigation || showViewToggle" class="mld-schedule__header">
-      <div v-if="showNavigation" class="mld-schedule__nav">
+    <div v-if="showNavigation || showViewToggle" class="mint-schedule__header">
+      <div v-if="showNavigation" class="mint-schedule__nav">
         <button
           type="button"
-          class="mld-schedule__nav-btn"
+          class="mint-schedule__nav-btn"
           aria-label="Previous"
           @click="navigate('prev')"
         >
@@ -377,7 +377,7 @@ onUnmounted(() => {
         </button>
         <button
           type="button"
-          class="mld-schedule__nav-btn"
+          class="mint-schedule__nav-btn"
           aria-label="Next"
           @click="navigate('next')"
         >
@@ -387,21 +387,21 @@ onUnmounted(() => {
         </button>
         <button
           type="button"
-          class="mld-schedule__today-btn"
+          class="mint-schedule__today-btn"
           @click="navigate('today')"
         >
           Today
         </button>
       </div>
 
-      <span class="mld-schedule__title">{{ headerTitle }}</span>
+      <span class="mint-schedule__title">{{ headerTitle }}</span>
 
-      <div v-if="showViewToggle" class="mld-schedule__view-toggle">
+      <div v-if="showViewToggle" class="mint-schedule__view-toggle">
         <button
           v-for="v in (['day', 'week', 'month'] as ScheduleView[])"
           :key="v"
           type="button"
-          :class="['mld-schedule__view-btn', currentView === v ? 'mld-schedule__view-btn--active' : '']"
+          :class="['mint-schedule__view-btn', currentView === v ? 'mint-schedule__view-btn--active' : '']"
           @click="setView(v)"
         >
           {{ v.charAt(0).toUpperCase() + v.slice(1) }}
@@ -412,18 +412,18 @@ onUnmounted(() => {
     <!-- Day / Week View -->
     <template v-if="currentView === 'day' || currentView === 'week'">
       <!-- Day headers -->
-      <div v-if="currentView === 'week'" class="mld-schedule__day-headers">
-        <div class="mld-schedule__day-header-gutter" />
+      <div v-if="currentView === 'week'" class="mint-schedule__day-headers">
+        <div class="mint-schedule__day-header-gutter" />
         <div
           v-for="(day, i) in visibleDays"
           :key="i"
-          :class="['mld-schedule__day-header', isToday(day) ? 'mld-schedule__day-header--today' : '']"
+          :class="['mint-schedule__day-header', isToday(day) ? 'mint-schedule__day-header--today' : '']"
         >
           <slot name="day-header" :date="day" :isToday="isToday(day)">
-            <span class="mld-schedule__day-header-name">
+            <span class="mint-schedule__day-header-name">
               {{ day.toLocaleDateString(locale, { weekday: 'short' }) }}
             </span>
-            <span class="mld-schedule__day-header-number">
+            <span class="mint-schedule__day-header-number">
               {{ day.getDate() }}
             </span>
           </slot>
@@ -431,13 +431,13 @@ onUnmounted(() => {
       </div>
 
       <!-- Time grid body -->
-      <div ref="bodyRef" class="mld-schedule__body">
+      <div ref="bodyRef" class="mint-schedule__body">
         <!-- Time gutter -->
-        <div class="mld-schedule__time-gutter">
+        <div class="mint-schedule__time-gutter">
           <div
             v-for="(label, i) in timeLabels"
             :key="i"
-            class="mld-schedule__time-label"
+            class="mint-schedule__time-label"
           >
             <slot name="time-label" :label="label" :index="i">
               {{ i < timeLabels.length - 1 ? label : '' }}
@@ -446,17 +446,17 @@ onUnmounted(() => {
         </div>
 
         <!-- Day columns -->
-        <div class="mld-schedule__day-columns">
+        <div class="mint-schedule__day-columns">
           <div
             v-for="(day, dayIdx) in visibleDays"
             :key="dayIdx"
-            :class="['mld-schedule__day-column', isToday(day) ? 'mld-schedule__day-column--today' : '']"
+            :class="['mint-schedule__day-column', isToday(day) ? 'mint-schedule__day-column--today' : '']"
           >
             <!-- Slot grid -->
             <div
               v-for="slotIdx in totalSlots"
               :key="slotIdx"
-              :class="['mld-schedule__slot', !readonly ? 'mld-schedule__slot--interactive' : '']"
+              :class="['mint-schedule__slot', !readonly ? 'mint-schedule__slot--interactive' : '']"
               @click="onSlotClick(day, slotIdx - 1)"
               @pointerdown="onSlotPointerDown(day, slotIdx - 1, $event)"
             />
@@ -465,7 +465,7 @@ onUnmounted(() => {
             <div
               v-for="event in getEventsForDay(day)"
               :key="event.id"
-              :class="['mld-schedule__event', getStatusClass(event.status)]"
+              :class="['mint-schedule__event', getStatusClass(event.status)]"
               :style="getEventStyle(event, day) || undefined"
               @click="onEventClick(event, $event)"
               @pointerdown="onEventPointerDown(event, dayIdx, $event)"
@@ -473,14 +473,14 @@ onUnmounted(() => {
               <slot name="event" :event="event">
                 <div
                   v-if="!readonly && event.resizable !== false"
-                  class="mld-schedule__event-resize-handle mld-schedule__event-resize-handle--top"
+                  class="mint-schedule__event-resize-handle mint-schedule__event-resize-handle--top"
                   @pointerdown="onResizePointerDown(event, 'top', dayIdx, $event)"
                 />
-                <div class="mld-schedule__event-title">{{ event.title }}</div>
-                <div class="mld-schedule__event-time">{{ formatEventTime(event) }}</div>
+                <div class="mint-schedule__event-title">{{ event.title }}</div>
+                <div class="mint-schedule__event-time">{{ formatEventTime(event) }}</div>
                 <div
                   v-if="!readonly && event.resizable !== false"
-                  class="mld-schedule__event-resize-handle mld-schedule__event-resize-handle--bottom"
+                  class="mint-schedule__event-resize-handle mint-schedule__event-resize-handle--bottom"
                   @pointerdown="onResizePointerDown(event, 'bottom', dayIdx, $event)"
                 />
               </slot>
@@ -490,10 +490,10 @@ onUnmounted(() => {
             <div
               v-for="(blocked, bIdx) in getBlockedForDay(day)"
               :key="`b-${bIdx}`"
-              class="mld-schedule__blocked"
+              class="mint-schedule__blocked"
               :style="getBlockedStyle(blocked)"
             >
-              <span v-if="blocked.label" class="mld-schedule__blocked-label">
+              <span v-if="blocked.label" class="mint-schedule__blocked-label">
                 {{ blocked.label }}
               </span>
             </div>
@@ -501,16 +501,16 @@ onUnmounted(() => {
             <!-- Now indicator -->
             <div
               v-if="showNowIndicator && isToday(day) && getNowIndicatorStyle()"
-              class="mld-schedule__now-indicator"
+              class="mint-schedule__now-indicator"
               :style="getNowIndicatorStyle()!"
             >
-              <div class="mld-schedule__now-dot" />
+              <div class="mint-schedule__now-dot" />
             </div>
 
             <!-- Drag ghost -->
             <div
               v-if="isDragging && ghost && ghost.dayIndex === dayIdx"
-              class="mld-schedule__ghost"
+              class="mint-schedule__ghost"
               :style="ghost.style"
             />
           </div>
@@ -520,12 +520,12 @@ onUnmounted(() => {
 
     <!-- Month View -->
     <template v-if="currentView === 'month'">
-      <div class="mld-schedule__month-grid">
+      <div class="mint-schedule__month-grid">
         <!-- Weekday headers -->
         <div
           v-for="label in monthWeekdayLabels"
           :key="label"
-          class="mld-schedule__month-weekday"
+          class="mint-schedule__month-weekday"
         >
           {{ label }}
         </div>
@@ -535,25 +535,25 @@ onUnmounted(() => {
           v-for="(day, i) in monthDays"
           :key="i"
           :class="[
-            'mld-schedule__month-cell',
-            isToday(day.date) ? 'mld-schedule__month-cell--today' : '',
-            !day.isCurrentMonth ? 'mld-schedule__month-cell--outside' : '',
+            'mint-schedule__month-cell',
+            isToday(day.date) ? 'mint-schedule__month-cell--today' : '',
+            !day.isCurrentMonth ? 'mint-schedule__month-cell--outside' : '',
           ]"
           @click="onMonthDayClick(day.date)"
         >
           <slot name="month-day" :date="day.date" :isToday="isToday(day.date)" :events="getEventsForDate(day.date)">
-            <div class="mld-schedule__month-date">{{ day.date.getDate() }}</div>
+            <div class="mint-schedule__month-date">{{ day.date.getDate() }}</div>
             <div
               v-for="event in getEventsForDate(day.date).slice(0, 3)"
               :key="event.id"
-              :class="['mld-schedule__month-event', getMonthStatusClass(event.status)]"
+              :class="['mint-schedule__month-event', getMonthStatusClass(event.status)]"
               @click.stop="onEventClick(event, $event)"
             >
               {{ event.title }}
             </div>
             <div
               v-if="getEventsForDate(day.date).length > 3"
-              class="mld-schedule__month-more"
+              class="mint-schedule__month-more"
             >
               +{{ getEventsForDate(day.date).length - 3 }} more
             </div>

package/src/components/ScientificNumber.vue

@@ -145,38 +145,38 @@ async function copyToClipboard() {
 </script>
 
 <template>
-  <span class="mld-sci-number">
+  <span class="mint-sci-number">
     <!-- Special values: NaN, Infinity -->
     <template v-if="specialDisplay">
-      <span class="mld-sci-number__plain">{{ specialDisplay }}</span>
+      <span class="mint-sci-number__plain">{{ specialDisplay }}</span>
     </template>
 
     <!-- Scientific / Engineering notation -->
     <template v-else-if="formatted.type === 'scientific'">
-      <span class="mld-sci-number__mantissa">{{ formatted.mantissa }}</span>
-      <span class="mld-sci-number__times">&times;</span>
-      <span class="mld-sci-number__base">10</span>
-      <span class="mld-sci-number__exponent">{{ formatted.exponentStr }}</span>
+      <span class="mint-sci-number__mantissa">{{ formatted.mantissa }}</span>
+      <span class="mint-sci-number__times">&times;</span>
+      <span class="mint-sci-number__base">10</span>
+      <span class="mint-sci-number__exponent">{{ formatted.exponentStr }}</span>
     </template>
 
     <!-- Compact notation with SI suffix -->
     <template v-else-if="formatted.type === 'compact'">
-      <span class="mld-sci-number__plain">{{ formatted.plain }}</span>
-      <span v-if="formatted.suffix" class="mld-sci-number__suffix">{{ formatted.suffix }}</span>
+      <span class="mint-sci-number__plain">{{ formatted.plain }}</span>
+      <span v-if="formatted.suffix" class="mint-sci-number__suffix">{{ formatted.suffix }}</span>
     </template>
 
     <!-- Plain number -->
     <template v-else>
-      <span class="mld-sci-number__plain">{{ formatted.plain }}</span>
+      <span class="mint-sci-number__plain">{{ formatted.plain }}</span>
     </template>
 
     <!-- Unit -->
-    <span v-if="unit" class="mld-sci-number__unit">{{ unit }}</span>
+    <span v-if="unit" class="mint-sci-number__unit">{{ unit }}</span>
 
     <!-- Copy button -->
     <button
       v-if="copyable"
-      :class="['mld-sci-number__copy-btn', { 'mld-sci-number__copy-btn--copied': copied }]"
+      :class="['mint-sci-number__copy-btn', { 'mint-sci-number__copy-btn--copied': copied }]"
       type="button"
       :title="copied ? 'Copied!' : 'Copy value'"
       @click.stop="copyToClipboard"

package/src/components/SegmentedControl.vue

@@ -38,11 +38,11 @@ function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
 <template>
   <div
     :class="[
-      'mld-segmented-control',
-      `mld-segmented-control--${variant}`,
-      `mld-segmented-control--${size}`,
-      fullWidth ? 'mld-segmented-control--full-width' : '',
-      disabled ? 'mld-segmented-control--disabled' : '',
+      'mint-segmented-control',
+      `mint-segmented-control--${variant}`,
+      `mint-segmented-control--${size}`,
+      fullWidth ? 'mint-segmented-control--full-width' : '',
+      disabled ? 'mint-segmented-control--disabled' : '',
     ]"
     role="radiogroup"
   >
@@ -54,19 +54,19 @@ function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
       :aria-checked="modelValue === option.value"
       :disabled="disabled || option.disabled"
       :class="[
-        'mld-segmented-control__option',
-        `mld-segmented-control__option--${variant}`,
-        `mld-segmented-control__option--${size}`,
-        modelValue === option.value ? 'mld-segmented-control__option--active' : '',
-        option.disabled ? 'mld-segmented-control__option--disabled' : '',
+        'mint-segmented-control__option',
+        `mint-segmented-control__option--${variant}`,
+        `mint-segmented-control__option--${size}`,
+        modelValue === option.value ? 'mint-segmented-control__option--active' : '',
+        option.disabled ? 'mint-segmented-control__option--disabled' : '',
       ]"
       @click="handleSelect(option)"
       @keydown="handleKeydown($event, option)"
     >
-      <span class="mld-segmented-control__label">{{ option.label }}</span>
+      <span class="mint-segmented-control__label">{{ option.label }}</span>
       <span
         v-if="option.description && variant === 'card'"
-        class="mld-segmented-control__description"
+        class="mint-segmented-control__description"
       >
         {{ option.description }}
       </span>

package/src/components/SequenceInput.vue

@@ -89,12 +89,12 @@ function doCopy() {
 
 function getBaseClass(char: string): string {
   const c = char.toLowerCase()
-  if (c === 'a') return 'mld-sequence-input__base--a'
-  if (c === 't') return 'mld-sequence-input__base--t'
-  if (c === 'u') return 'mld-sequence-input__base--u'
-  if (c === 'g') return 'mld-sequence-input__base--g'
-  if (c === 'c') return 'mld-sequence-input__base--c'
-  if (c === 'n') return 'mld-sequence-input__base--n'
+  if (c === 'a') return 'mint-sequence-input__base--a'
+  if (c === 't') return 'mint-sequence-input__base--t'
+  if (c === 'u') return 'mint-sequence-input__base--u'
+  if (c === 'g') return 'mint-sequence-input__base--g'
+  if (c === 'c') return 'mint-sequence-input__base--c'
+  if (c === 'n') return 'mint-sequence-input__base--n'
   return ''
 }
 </script>
@@ -102,18 +102,18 @@ function getBaseClass(char: string): string {
 <template>
   <div
     :class="[
-      'mld-sequence-input',
-      error ? 'mld-sequence-input--error' : '',
-      disabled ? 'mld-sequence-input--disabled' : '',
+      'mint-sequence-input',
+      error ? 'mint-sequence-input--error' : '',
+      disabled ? 'mint-sequence-input--disabled' : '',
     ]"
   >
     <!-- Toolbar -->
-    <div v-if="showTools && !readonly" class="mld-sequence-input__toolbar">
+    <div v-if="showTools && !readonly" class="mint-sequence-input__toolbar">
       <slot name="tools" :sequence="modelValue || ''" :type="resolvedType" :stats="stats">
         <button
           v-if="resolvedType !== 'protein'"
           type="button"
-          class="mld-sequence-input__tool-btn"
+          class="mint-sequence-input__tool-btn"
           :disabled="!modelValue || disabled"
           @click="doReverseComplement"
         >
@@ -121,16 +121,16 @@ function getBaseClass(char: string): string {
         </button>
         <button
           type="button"
-          class="mld-sequence-input__tool-btn"
+          class="mint-sequence-input__tool-btn"
           :disabled="!modelValue || disabled"
           @click="doUppercase"
         >
           Uppercase
         </button>
-        <div class="mld-sequence-input__tool-sep" />
+        <div class="mint-sequence-input__tool-sep" />
         <button
           type="button"
-          class="mld-sequence-input__tool-btn"
+          class="mint-sequence-input__tool-btn"
           :disabled="!modelValue || disabled"
           @click="doCopy"
         >
@@ -138,7 +138,7 @@ function getBaseClass(char: string): string {
         </button>
         <button
           type="button"
-          class="mld-sequence-input__tool-btn"
+          class="mint-sequence-input__tool-btn"
           :disabled="!modelValue || disabled"
           @click="doClear"
         >
@@ -146,18 +146,18 @@ function getBaseClass(char: string): string {
         </button>
       </slot>
 
-      <span class="mld-sequence-input__type-badge">{{ resolvedType }}</span>
+      <span class="mint-sequence-input__type-badge">{{ resolvedType }}</span>
     </div>
 
     <!-- Editor (input mode) -->
-    <div v-if="!readonly" class="mld-sequence-input__editor">
+    <div v-if="!readonly" class="mint-sequence-input__editor">
       <textarea
         :value="modelValue"
         :rows="rows"
         :placeholder="placeholder"
         :disabled="disabled"
         :maxlength="maxLength"
-        class="mld-sequence-input__textarea"
+        class="mint-sequence-input__textarea"
         spellcheck="false"
         autocomplete="off"
         @input="handleInput"
@@ -165,14 +165,14 @@ function getBaseClass(char: string): string {
     </div>
 
     <!-- Viewer (readonly mode) -->
-    <div v-else class="mld-sequence-input__viewer">
+    <div v-else class="mint-sequence-input__viewer">
       <div
         v-for="(line, lineIdx) in viewerLines"
         :key="lineIdx"
-        class="mld-sequence-input__viewer-line"
+        class="mint-sequence-input__viewer-line"
       >
-        <span class="mld-sequence-input__line-number">{{ lineIdx * 60 + 1 }}</span>
-        <span class="mld-sequence-input__line-content">
+        <span class="mint-sequence-input__line-number">{{ lineIdx * 60 + 1 }}</span>
+        <span class="mint-sequence-input__line-content">
           <span
             v-for="(char, charIdx) in line.split('')"
             :key="charIdx"
@@ -180,25 +180,25 @@ function getBaseClass(char: string): string {
           >{{ char }}</span>
         </span>
       </div>
-      <div v-if="!modelValue" class="mld-sequence-input__viewer-line">
-        <span class="mld-sequence-input__line-number" />
-        <span class="mld-sequence-input__line-content" style="color: var(--text-muted);">No sequence</span>
+      <div v-if="!modelValue" class="mint-sequence-input__viewer-line">
+        <span class="mint-sequence-input__line-number" />
+        <span class="mint-sequence-input__line-content" style="color: var(--text-muted);">No sequence</span>
       </div>
     </div>
 
     <!-- Stats -->
-    <div v-if="showStats && modelValue" class="mld-sequence-input__stats">
+    <div v-if="showStats && modelValue" class="mint-sequence-input__stats">
       <span>
-        <span class="mld-sequence-input__stat-label">Length:</span>
-        <span class="mld-sequence-input__stat-value">{{ stats.length }}</span>
+        <span class="mint-sequence-input__stat-label">Length:</span>
+        <span class="mint-sequence-input__stat-value">{{ stats.length }}</span>
       </span>
       <span v-if="stats.gcPercent !== undefined">
-        <span class="mld-sequence-input__stat-label">GC:</span>
-        <span class="mld-sequence-input__stat-value">{{ stats.gcPercent.toFixed(1) }}%</span>
+        <span class="mint-sequence-input__stat-label">GC:</span>
+        <span class="mint-sequence-input__stat-value">{{ stats.gcPercent.toFixed(1) }}%</span>
       </span>
       <span v-if="stats.molecularWeight !== undefined">
-        <span class="mld-sequence-input__stat-label">MW:</span>
-        <span class="mld-sequence-input__stat-value">~{{ (stats.molecularWeight / 1000).toFixed(1) }} kDa</span>
+        <span class="mint-sequence-input__stat-label">MW:</span>
+        <span class="mint-sequence-input__stat-value">~{{ (stats.molecularWeight / 1000).toFixed(1) }} kDa</span>
       </span>
     </div>
   </div>

package/src/components/SettingsButton.vue

@@ -39,16 +39,16 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="dropdownRef" class="mld-settings-button">
+  <div ref="dropdownRef" class="mint-settings-button">
     <button
       type="button"
-      :class="['mld-settings-button__trigger', `mld-settings-button__trigger--${size}`]"
+      :class="['mint-settings-button__trigger', `mint-settings-button__trigger--${size}`]"
       aria-label="Settings"
       @click.stop="toggle"
     >
       <!-- Settings/Gear icon -->
       <svg
-        :class="`mld-settings-button__icon--${size}`"
+        :class="`mint-settings-button__icon--${size}`"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -61,9 +61,9 @@ onUnmounted(() => {
     </button>
 
     <!-- Dropdown panel -->
-    <div v-show="isOpen" class="mld-settings-dropdown">
+    <div v-show="isOpen" class="mint-settings-dropdown">
       <slot>
-        <div class="mld-settings-dropdown__empty">
+        <div class="mint-settings-dropdown__empty">
           No settings configured
         </div>
       </slot>

package/src/components/SettingsModal.vue

@@ -61,14 +61,14 @@ function handleClose() {
     @update:model-value="emit('update:modelValue', $event)"
     @close="handleClose"
   >
-    <div class="mld-settings-modal">
+    <div class="mint-settings-modal">
       <!-- Tabs -->
-      <div v-if="allTabs.length > 1" class="mld-settings-modal__tabs">
+      <div v-if="allTabs.length > 1" class="mint-settings-modal__tabs">
         <button
           v-for="tab in allTabs"
           :key="tab.id"
           type="button"
-          :class="['mld-settings-modal__tab', { 'mld-settings-modal__tab--active': activeTab === tab.id }]"
+          :class="['mint-settings-modal__tab', { 'mint-settings-modal__tab--active': activeTab === tab.id }]"
           @click="activeTab = tab.id"
         >
           {{ tab.label }}
@@ -76,7 +76,7 @@ function handleClose() {
       </div>
 
       <!-- Custom tab content -->
-      <div class="mld-settings-modal__content">
+      <div class="mint-settings-modal__content">
         <template v-for="tab in tabs" :key="tab.id">
           <div v-show="activeTab === tab.id">
             <slot :name="`tab-${tab.id}`" />
@@ -86,14 +86,14 @@ function handleClose() {
         <!-- Built-in appearance tab -->
         <div v-if="showAppearance" v-show="activeTab === 'appearance'">
           <!-- Theme -->
-          <div class="mld-settings-modal__section">
-            <div class="mld-settings-modal__section-label">Theme</div>
-            <div class="mld-settings-modal__option-group">
+          <div class="mint-settings-modal__section">
+            <div class="mint-settings-modal__section-label">Theme</div>
+            <div class="mint-settings-modal__option-group">
               <button
                 v-for="opt in themeOptions"
                 :key="opt.value"
                 type="button"
-                :class="['mld-settings-modal__option-btn', { 'mld-settings-modal__option-btn--active': settings.theme === opt.value }]"
+                :class="['mint-settings-modal__option-btn', { 'mint-settings-modal__option-btn--active': settings.theme === opt.value }]"
                 @click="settings.theme = opt.value"
               >
                 {{ opt.label }}
@@ -102,14 +102,14 @@ function handleClose() {
           </div>
 
           <!-- Color palette -->
-          <div class="mld-settings-modal__section">
-            <div class="mld-settings-modal__section-label">Color Palette</div>
-            <div class="mld-settings-modal__option-group">
+          <div class="mint-settings-modal__section">
+            <div class="mint-settings-modal__section-label">Color Palette</div>
+            <div class="mint-settings-modal__option-group">
               <button
                 v-for="(palette, key) in colorPalettes"
                 :key="key"
                 type="button"
-                :class="['mld-settings-modal__option-btn', { 'mld-settings-modal__option-btn--active': settings.colorPalette === key }]"
+                :class="['mint-settings-modal__option-btn', { 'mint-settings-modal__option-btn--active': settings.colorPalette === key }]"
                 @click="settings.colorPalette = key as ColorPalette"
               >
                 {{ palette.name }}
@@ -118,20 +118,20 @@ function handleClose() {
           </div>
 
           <!-- Table density -->
-          <div class="mld-settings-modal__section">
-            <div class="mld-settings-modal__section-label">Table Density</div>
-            <div class="mld-settings-modal__option-group">
+          <div class="mint-settings-modal__section">
+            <div class="mint-settings-modal__section-label">Table Density</div>
+            <div class="mint-settings-modal__option-group">
               <button
                 v-for="opt in densityOptions"
                 :key="opt.value"
                 type="button"
-                :class="['mld-settings-modal__option-btn', { 'mld-settings-modal__option-btn--active': settings.tableDensity === opt.value }]"
+                :class="['mint-settings-modal__option-btn', { 'mint-settings-modal__option-btn--active': settings.tableDensity === opt.value }]"
                 @click="settings.tableDensity = opt.value"
               >
                 {{ opt.label }}
               </button>
             </div>
-            <p class="mld-settings-modal__note">Adjusts row height in data tables.</p>
+            <p class="mint-settings-modal__note">Adjusts row height in data tables.</p>
           </div>
 
           <slot name="appearance" />

package/src/components/StatusIndicator.vue

@@ -22,16 +22,16 @@ const dotStyle = computed(() =>
 </script>
 
 <template>
-  <span class="mld-status">
+  <span class="mint-status">
     <span
       :class="[
-        'mld-status__dot',
-        { [`mld-status__dot--${status}`]: !color },
-        { 'mld-status__dot--pulse': pulse },
+        'mint-status__dot',
+        { [`mint-status__dot--${status}`]: !color },
+        { 'mint-status__dot--pulse': pulse },
       ]"
       :style="dotStyle"
     />
-    <span v-if="label" class="mld-status__label">{{ label }}</span>
+    <span v-if="label" class="mint-status__label">{{ label }}</span>
   </span>
 </template>