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

package/src/components/AppTopBar.vue

@@ -27,7 +27,7 @@ import { APP_EXPERIMENT_KEY } from '../composables/useAppExperiment'
 const SVG_PATH_PREFIX = 'M'
 
 interface Props {
-  // Legacy title & breadcrumb
+  // Classic title & breadcrumb
   title?: string
   subtitle?: string
   showLogo?: boolean
@@ -53,7 +53,7 @@ interface Props {
   showNotifications?: boolean
   hasNotificationDot?: boolean
 
-  // Legacy right cluster (still works; AvatarMenu takes precedence over Profile)
+  // Classic right cluster (still works; AvatarMenu takes precedence over Profile)
   showThemeToggle?: boolean
   showSettings?: boolean
   settingsConfig?: TopBarSettingsConfig
@@ -211,30 +211,30 @@ onUnmounted(() => {
 <template>
   <header
     :class="[
-      'mld-topbar',
-      `mld-topbar--${props.variant}`,
+      'mint-topbar',
+      `mint-topbar--${props.variant}`,
     ]"
   >
-    <div class="mld-topbar__container">
+    <div class="mint-topbar__container">
       <!-- Left: brand -->
-      <div class="mld-topbar__brand">
+      <div class="mint-topbar__brand">
         <a
           v-if="homePath && (homePath.startsWith('http') || homePath.startsWith('/'))"
           :href="homePath"
-          class="mld-topbar-home-link"
+          class="mint-topbar-home-link"
         >
           <slot name="icon">
-            <div v-if="pluginIcon" class="mld-topbar__logo">
-              <div class="mld-topbar__logo-icon">
-                <svg class="mld-topbar__logo-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <div v-if="pluginIcon" class="mint-topbar__logo">
+              <div class="mint-topbar__logo-icon">
+                <svg class="mint-topbar__logo-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path :d="pluginIcon" />
                 </svg>
               </div>
             </div>
             <slot v-else name="logo">
-              <div v-if="showLogo" class="mld-topbar__logo">
-                <div class="mld-topbar__logo-icon">
-                  <span class="mld-topbar__logo-text">M</span>
+              <div v-if="showLogo" class="mint-topbar__logo">
+                <div class="mint-topbar__logo-icon">
+                  <span class="mint-topbar__logo-text">M</span>
                 </div>
               </div>
             </slot>
@@ -243,20 +243,20 @@ onUnmounted(() => {
         <router-link
           v-else-if="homePath"
           :to="homePath"
-          class="mld-topbar-home-link"
+          class="mint-topbar-home-link"
         >
           <slot name="icon">
-            <div v-if="pluginIcon" class="mld-topbar__logo">
-              <div class="mld-topbar__logo-icon">
-                <svg class="mld-topbar__logo-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <div v-if="pluginIcon" class="mint-topbar__logo">
+              <div class="mint-topbar__logo-icon">
+                <svg class="mint-topbar__logo-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path :d="pluginIcon" />
                 </svg>
               </div>
             </div>
             <slot v-else name="logo">
-              <div v-if="showLogo" class="mld-topbar__logo">
-                <div class="mld-topbar__logo-icon">
-                  <span class="mld-topbar__logo-text">M</span>
+              <div v-if="showLogo" class="mint-topbar__logo">
+                <div class="mint-topbar__logo-icon">
+                  <span class="mint-topbar__logo-text">M</span>
                 </div>
               </div>
             </slot>
@@ -264,17 +264,17 @@ onUnmounted(() => {
         </router-link>
         <template v-else>
           <slot name="icon">
-            <div v-if="pluginIcon" class="mld-topbar__logo">
-              <div class="mld-topbar__logo-icon">
-                <svg class="mld-topbar__logo-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <div v-if="pluginIcon" class="mint-topbar__logo">
+              <div class="mint-topbar__logo-icon">
+                <svg class="mint-topbar__logo-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path :d="pluginIcon" />
                 </svg>
               </div>
             </div>
             <slot v-else name="logo">
-              <div v-if="showLogo" class="mld-topbar__logo">
-                <div class="mld-topbar__logo-icon">
-                  <span class="mld-topbar__logo-text">M</span>
+              <div v-if="showLogo" class="mint-topbar__logo">
+                <div class="mint-topbar__logo-icon">
+                  <span class="mint-topbar__logo-text">M</span>
                 </div>
               </div>
             </slot>
@@ -306,23 +306,23 @@ onUnmounted(() => {
         </template>
       </AppPageSelector>
 
-      <!-- Left: legacy title / breadcrumb (backward compat) -->
-      <div v-if="hasTitleGroup" class="mld-topbar-title-group">
-        <span class="mld-topbar-title">{{ title }}</span>
-        <span class="mld-topbar-subtitle">{{ subtitle }}</span>
+      <!-- Left: classic title / breadcrumb (classic prop surface) -->
+      <div v-if="hasTitleGroup" class="mint-topbar-title-group">
+        <span class="mint-topbar-title">{{ title }}</span>
+        <span class="mint-topbar-subtitle">{{ subtitle }}</span>
       </div>
 
-      <div v-else-if="hasLegacyBreadcrumb" ref="dropdownRef" class="mld-topbar-breadcrumb">
+      <div v-else-if="hasLegacyBreadcrumb" ref="dropdownRef" class="mint-topbar-breadcrumb">
         <button
           v-if="pages?.length"
           type="button"
-          class="mld-topbar-plugin-name"
+          class="mint-topbar-plugin-name"
           @click.stop="togglePagesDropdown"
         >
           {{ pluginName }}
           <svg
-            class="mld-topbar-chevron"
-            :class="{ 'mld-topbar-chevron--open': showPagesDropdown }"
+            class="mint-topbar-chevron"
+            :class="{ 'mint-topbar-chevron--open': showPagesDropdown }"
             width="16"
             height="16"
             viewBox="0 0 24 24"
@@ -335,11 +335,11 @@ onUnmounted(() => {
             <path d="m6 9 6 6 6-6" />
           </svg>
         </button>
-        <span v-else class="mld-topbar-plugin-name--static">{{ pluginName }}</span>
+        <span v-else class="mint-topbar-plugin-name--static">{{ pluginName }}</span>
 
         <svg
           v-if="title"
-          class="mld-topbar-separator"
+          class="mint-topbar-separator"
           width="16"
           height="16"
           viewBox="0 0 24 24"
@@ -351,48 +351,48 @@ onUnmounted(() => {
         >
           <path d="m9 18 6-6-6-6" />
         </svg>
-        <span v-if="title" class="mld-topbar-current-page">{{ title }}</span>
+        <span v-if="title" class="mint-topbar-current-page">{{ title }}</span>
 
-        <div v-show="showPagesDropdown" class="mld-topbar-dropdown">
+        <div v-show="showPagesDropdown" class="mint-topbar-dropdown">
           <template v-for="page in pages" :key="page.id">
             <a
               v-if="page.href"
               :href="page.href"
-              :class="['mld-topbar-dropdown-item', { 'mld-topbar-dropdown-item--active': page.id === currentPageId, 'mld-topbar-dropdown-item--disabled': page.disabled }]"
+              :class="['mint-topbar-dropdown-item', { 'mint-topbar-dropdown-item--active': page.id === currentPageId, 'mint-topbar-dropdown-item--disabled': page.disabled }]"
               @click="showPagesDropdown = false"
             >
-              <span class="mld-topbar-dropdown-item__label">{{ page.label }}</span>
-              <span v-if="page.description" class="mld-topbar-dropdown-item__description">{{ page.description }}</span>
+              <span class="mint-topbar-dropdown-item__label">{{ page.label }}</span>
+              <span v-if="page.description" class="mint-topbar-dropdown-item__description">{{ page.description }}</span>
             </a>
             <router-link
               v-else-if="page.to"
               :to="page.to"
-              :class="['mld-topbar-dropdown-item', { 'mld-topbar-dropdown-item--active': page.id === currentPageId, 'mld-topbar-dropdown-item--disabled': page.disabled }]"
+              :class="['mint-topbar-dropdown-item', { 'mint-topbar-dropdown-item--active': page.id === currentPageId, 'mint-topbar-dropdown-item--disabled': page.disabled }]"
               @click="showPagesDropdown = false"
             >
-              <span class="mld-topbar-dropdown-item__label">{{ page.label }}</span>
-              <span v-if="page.description" class="mld-topbar-dropdown-item__description">{{ page.description }}</span>
+              <span class="mint-topbar-dropdown-item__label">{{ page.label }}</span>
+              <span v-if="page.description" class="mint-topbar-dropdown-item__description">{{ page.description }}</span>
             </router-link>
             <button
               v-else
               type="button"
-              :class="['mld-topbar-dropdown-item', { 'mld-topbar-dropdown-item--active': page.id === currentPageId, 'mld-topbar-dropdown-item--disabled': page.disabled }]"
+              :class="['mint-topbar-dropdown-item', { 'mint-topbar-dropdown-item--active': page.id === currentPageId, 'mint-topbar-dropdown-item--disabled': page.disabled }]"
               @click="handlePageClick(page)"
             >
-              <span class="mld-topbar-dropdown-item__label">{{ page.label }}</span>
-              <span v-if="page.description" class="mld-topbar-dropdown-item__description">{{ page.description }}</span>
+              <span class="mint-topbar-dropdown-item__label">{{ page.label }}</span>
+              <span v-if="page.description" class="mint-topbar-dropdown-item__description">{{ page.description }}</span>
             </button>
           </template>
         </div>
       </div>
 
-      <span v-else-if="hasTitleOnly" class="mld-topbar__title-only">{{ title }}</span>
+      <span v-else-if="hasTitleOnly" class="mint-topbar__title-only">{{ title }}</span>
 
       <!-- Nav slot (inline, after brand/selector) -->
       <slot name="nav" />
 
       <!-- Center: pill nav (new) -->
-      <div v-if="hasPillNav || $slots.center" class="mld-topbar__center">
+      <div v-if="hasPillNav || $slots.center" class="mint-topbar__center">
         <slot name="center">
           <AppPillNav
             v-if="hasPillNav && pillNav"
@@ -403,30 +403,30 @@ onUnmounted(() => {
         </slot>
       </div>
 
-      <!-- Center: legacy tabs (when no pillNav) — wrapped in the same centered
-           container as AppPillNav so legacy :tabs consumers get centered pill
+      <!-- Center: classic tabs (when no pillNav) — wrapped in the same centered
+           container as AppPillNav so classic :tabs consumers get centered pill
            layout without migrating to :pill-nav. -->
-      <div v-if="!hasPillNav && tabs?.length" class="mld-topbar__center">
-        <div class="mld-topbar__tabs">
+      <div v-if="!hasPillNav && tabs?.length" class="mint-topbar__center">
+        <div class="mint-topbar__tabs">
           <template v-for="tab in tabs" :key="tab.id">
           <div
             :ref="(el) => tab.children?.length ? setTabDropdownRef(el as HTMLElement, tab.id) : null"
-            class="mld-topbar-tab-wrapper"
+            class="mint-topbar-tab-wrapper"
           >
             <button
               v-if="tab.children?.length"
               type="button"
               :class="[
-                'mld-topbar-tab',
-                { 'mld-topbar-tab--active': tab.id === currentTabId || tab.children.some(c => c.id === currentTabId) },
-                { 'mld-topbar-tab--disabled': tab.disabled }
+                'mint-topbar-tab',
+                { 'mint-topbar-tab--active': tab.id === currentTabId || tab.children.some(c => c.id === currentTabId) },
+                { 'mint-topbar-tab--disabled': tab.disabled }
               ]"
               @click.stop="handleTabClick(tab)"
             >
               {{ tab.label }}
               <svg
-                class="mld-topbar-tab-chevron"
-                :class="{ 'mld-topbar-tab-chevron--open': openTabDropdown === tab.id }"
+                class="mint-topbar-tab-chevron"
+                :class="{ 'mint-topbar-tab-chevron--open': openTabDropdown === tab.id }"
                 width="14"
                 height="14"
                 viewBox="0 0 24 24"
@@ -444,9 +444,9 @@ onUnmounted(() => {
               v-else-if="tab.href"
               :href="tab.href"
               :class="[
-                'mld-topbar-tab',
-                { 'mld-topbar-tab--active': tab.id === currentTabId },
-                { 'mld-topbar-tab--disabled': tab.disabled }
+                'mint-topbar-tab',
+                { 'mint-topbar-tab--active': tab.id === currentTabId },
+                { 'mint-topbar-tab--disabled': tab.disabled }
               ]"
             >
               {{ tab.label }}
@@ -455,9 +455,9 @@ onUnmounted(() => {
               v-else-if="tab.to"
               :to="tab.to"
               :class="[
-                'mld-topbar-tab',
-                { 'mld-topbar-tab--active': tab.id === currentTabId },
-                { 'mld-topbar-tab--disabled': tab.disabled }
+                'mint-topbar-tab',
+                { 'mint-topbar-tab--active': tab.id === currentTabId },
+                { 'mint-topbar-tab--disabled': tab.disabled }
               ]"
             >
               {{ tab.label }}
@@ -466,55 +466,55 @@ onUnmounted(() => {
               v-else
               type="button"
               :class="[
-                'mld-topbar-tab',
-                { 'mld-topbar-tab--active': tab.id === currentTabId },
-                { 'mld-topbar-tab--disabled': tab.disabled }
+                'mint-topbar-tab',
+                { 'mint-topbar-tab--active': tab.id === currentTabId },
+                { 'mint-topbar-tab--disabled': tab.disabled }
               ]"
               @click="handleTabClick(tab)"
             >
               {{ tab.label }}
             </button>
 
-            <div v-if="tab.children?.length" v-show="openTabDropdown === tab.id" class="mld-topbar-tab-dropdown">
+            <div v-if="tab.children?.length" v-show="openTabDropdown === tab.id" class="mint-topbar-tab-dropdown">
               <template v-for="option in tab.children" :key="option.id">
                 <a
                   v-if="option.href"
                   :href="option.href"
                   :class="[
-                    'mld-topbar-dropdown-item',
-                    { 'mld-topbar-dropdown-item--active': option.id === currentTabId },
-                    { 'mld-topbar-dropdown-item--disabled': option.disabled }
+                    'mint-topbar-dropdown-item',
+                    { 'mint-topbar-dropdown-item--active': option.id === currentTabId },
+                    { 'mint-topbar-dropdown-item--disabled': option.disabled }
                   ]"
                   @click="openTabDropdown = null"
                 >
-                  <span class="mld-topbar-dropdown-item__label">{{ option.label }}</span>
-                  <span v-if="option.description" class="mld-topbar-dropdown-item__description">{{ option.description }}</span>
+                  <span class="mint-topbar-dropdown-item__label">{{ option.label }}</span>
+                  <span v-if="option.description" class="mint-topbar-dropdown-item__description">{{ option.description }}</span>
                 </a>
                 <router-link
                   v-else-if="option.to"
                   :to="option.to"
                   :class="[
-                    'mld-topbar-dropdown-item',
-                    { 'mld-topbar-dropdown-item--active': option.id === currentTabId },
-                    { 'mld-topbar-dropdown-item--disabled': option.disabled }
+                    'mint-topbar-dropdown-item',
+                    { 'mint-topbar-dropdown-item--active': option.id === currentTabId },
+                    { 'mint-topbar-dropdown-item--disabled': option.disabled }
                   ]"
                   @click="openTabDropdown = null"
                 >
-                  <span class="mld-topbar-dropdown-item__label">{{ option.label }}</span>
-                  <span v-if="option.description" class="mld-topbar-dropdown-item__description">{{ option.description }}</span>
+                  <span class="mint-topbar-dropdown-item__label">{{ option.label }}</span>
+                  <span v-if="option.description" class="mint-topbar-dropdown-item__description">{{ option.description }}</span>
                 </router-link>
                 <button
                   v-else
                   type="button"
                   :class="[
-                    'mld-topbar-dropdown-item',
-                    { 'mld-topbar-dropdown-item--active': option.id === currentTabId },
-                    { 'mld-topbar-dropdown-item--disabled': option.disabled }
+                    'mint-topbar-dropdown-item',
+                    { 'mint-topbar-dropdown-item--active': option.id === currentTabId },
+                    { 'mint-topbar-dropdown-item--disabled': option.disabled }
                   ]"
                   @click="handleTabOptionClick(option, tab)"
                 >
-                  <span class="mld-topbar-dropdown-item__label">{{ option.label }}</span>
-                  <span v-if="option.description" class="mld-topbar-dropdown-item__description">{{ option.description }}</span>
+                  <span class="mint-topbar-dropdown-item__label">{{ option.label }}</span>
+                  <span v-if="option.description" class="mint-topbar-dropdown-item__description">{{ option.description }}</span>
                 </button>
               </template>
             </div>
@@ -524,8 +524,8 @@ onUnmounted(() => {
       </div>
 
       <!-- Right section -->
-      <div class="mld-topbar__right">
-        <span v-if="showStandaloneLabel && isStandalone && !appExperiment" class="mld-topbar__standalone-badge">
+      <div class="mint-topbar__right">
+        <span v-if="showStandaloneLabel && isStandalone && !appExperiment" class="mint-topbar__standalone-badge">
           {{ standaloneLabel }}
         </span>
 
@@ -545,7 +545,7 @@ onUnmounted(() => {
           @detach="appExperiment.handleDetach()"
         />
 
-        <span v-if="appExperiment && isStandalone" class="mld-topbar__standalone-badge">
+        <span v-if="appExperiment && isStandalone" class="mint-topbar__standalone-badge">
           {{ standaloneLabel }}
         </span>
 
@@ -555,47 +555,47 @@ onUnmounted(() => {
         <button
           v-if="showNotifications"
           type="button"
-          class="mld-topbar__icon-btn"
+          class="mint-topbar__icon-btn"
           aria-label="Notifications"
           @click="emit('notifications-click')"
         >
-          <svg class="mld-topbar__icon-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <svg class="mint-topbar__icon-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
             <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
           </svg>
-          <span v-if="hasNotificationDot" class="mld-topbar__icon-btn-dot" aria-hidden="true" />
+          <span v-if="hasNotificationDot" class="mint-topbar__icon-btn-dot" aria-hidden="true" />
         </button>
 
-        <!-- Legacy: theme toggle -->
+        <!-- Classic: theme toggle -->
         <ThemeToggle v-if="showThemeToggle" size="sm" />
 
-        <!-- Legacy: settings gear -->
+        <!-- Classic: settings gear -->
         <button
           v-if="showSettings"
           type="button"
-          class="mld-topbar__settings-btn"
+          class="mint-topbar__settings-btn"
           aria-label="Open settings"
           @click="settingsOpen = true"
         >
-          <svg class="mld-topbar__settings-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <svg class="mint-topbar__settings-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" />
           </svg>
         </button>
 
-        <!-- Legacy: admin link -->
+        <!-- Classic: admin link -->
         <router-link
           v-if="showAdmin"
           :to="adminPath"
-          class="mld-topbar__admin-btn"
+          class="mint-topbar__admin-btn"
           aria-label="Admin Dashboard"
           @click="emit('admin-click')"
         >
-          <svg class="mld-topbar__admin-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <svg class="mint-topbar__admin-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /><path d="m9 12 2 2 4-4" />
           </svg>
         </router-link>
 
-        <!-- New: avatar menu (takes precedence over legacy profile button) -->
+        <!-- New: avatar menu (takes precedence over classic profile button) -->
         <AppAvatarMenu
           v-if="hasAccountMenu || $slots['account-menu-items']"
           :user-name="userName"
@@ -613,18 +613,18 @@ onUnmounted(() => {
           </template>
         </AppAvatarMenu>
 
-        <!-- Legacy: profile button (only when avatar menu not provided) -->
+        <!-- Classic: profile button (only when avatar menu not provided) -->
         <button
           v-else-if="showProfile"
           type="button"
-          class="mld-topbar__profile-btn"
+          class="mint-topbar__profile-btn"
           aria-label="Edit profile"
           @click="emit('profile-click')"
         >
-          <div class="mld-topbar__profile-avatar">
+          <div class="mint-topbar__profile-avatar">
             {{ profileInitial }}
           </div>
-          <span v-if="userName" class="mld-topbar__profile-name">{{ userName }}</span>
+          <span v-if="userName" class="mint-topbar__profile-name">{{ userName }}</span>
         </button>
       </div>
     </div>

package/src/components/AuditTrail.vue

@@ -91,13 +91,13 @@ function handleEntryClick(entry: AuditEntry) {
 </script>
 
 <template>
-  <div :class="['mld-audit-trail', `mld-audit-trail--${size}`]">
-    <div v-if="showFilters" class="mld-audit-trail__filters">
-      <select v-model="filterType" class="mld-audit-trail__filter-select">
+  <div :class="['mint-audit-trail', `mint-audit-trail--${size}`]">
+    <div v-if="showFilters" class="mint-audit-trail__filters">
+      <select v-model="filterType" class="mint-audit-trail__filter-select">
         <option value="">All types</option>
         <option v-for="t in uniqueTypes" :key="t" :value="t">{{ t }}</option>
       </select>
-      <select v-model="filterUser" class="mld-audit-trail__filter-select">
+      <select v-model="filterUser" class="mint-audit-trail__filter-select">
         <option value="">All users</option>
         <option v-for="u in uniqueUsers" :key="u" :value="u">{{ u }}</option>
       </select>
@@ -105,33 +105,33 @@ function handleEntryClick(entry: AuditEntry) {
 
     <div
       v-if="sortedEntries.length"
-      class="mld-audit-trail__list"
+      class="mint-audit-trail__list"
       :style="maxHeight ? { maxHeight, overflowY: 'auto' } : {}"
     >
-      <div class="mld-audit-trail__line" />
+      <div class="mint-audit-trail__line" />
       <div
         v-for="entry in sortedEntries"
         :key="entry.id"
-        :class="['mld-audit-trail__entry', `mld-audit-trail__entry--${entry.type}`]"
+        :class="['mint-audit-trail__entry', `mint-audit-trail__entry--${entry.type}`]"
         @click="handleEntryClick(entry)"
       >
         <slot name="entry" :entry="entry">
-          <div class="mld-audit-trail__dot" />
-          <div class="mld-audit-trail__content">
-            <div class="mld-audit-trail__header">
-              <div v-if="entry.user" class="mld-audit-trail__avatar">{{ getInitials(entry.user) }}</div>
-              <span v-if="entry.user" class="mld-audit-trail__user">{{ entry.user }}</span>
-              <span class="mld-audit-trail__timestamp">{{ formatTimestamp(entry.timestamp) }}</span>
+          <div class="mint-audit-trail__dot" />
+          <div class="mint-audit-trail__content">
+            <div class="mint-audit-trail__header">
+              <div v-if="entry.user" class="mint-audit-trail__avatar">{{ getInitials(entry.user) }}</div>
+              <span v-if="entry.user" class="mint-audit-trail__user">{{ entry.user }}</span>
+              <span class="mint-audit-trail__timestamp">{{ formatTimestamp(entry.timestamp) }}</span>
             </div>
-            <div class="mld-audit-trail__action">{{ entry.action }}</div>
-            <div v-if="entry.detail" class="mld-audit-trail__detail">{{ entry.detail }}</div>
-            <div v-if="entry.metadata && Object.keys(entry.metadata).length" class="mld-audit-trail__metadata">
+            <div class="mint-audit-trail__action">{{ entry.action }}</div>
+            <div v-if="entry.detail" class="mint-audit-trail__detail">{{ entry.detail }}</div>
+            <div v-if="entry.metadata && Object.keys(entry.metadata).length" class="mint-audit-trail__metadata">
               <span
                 v-for="(value, key) in entry.metadata"
                 :key="String(key)"
-                class="mld-audit-trail__metadata-item"
+                class="mint-audit-trail__metadata-item"
               >
-                <span class="mld-audit-trail__metadata-key">{{ key }}:</span>
+                <span class="mint-audit-trail__metadata-key">{{ key }}:</span>
                 {{ value }}
               </span>
             </div>
@@ -140,7 +140,7 @@ function handleEntryClick(entry: AuditEntry) {
       </div>
     </div>
 
-    <div v-if="!sortedEntries.length" class="mld-audit-trail__empty">
+    <div v-if="!sortedEntries.length" class="mint-audit-trail__empty">
       <slot name="empty">{{ emptyMessage }}</slot>
     </div>
   </div>