@maz-ui/mcp 4.9.3 → 5.0.0-beta.0

package/docs/src/components/maz-pull-to-refresh.md

@@ -28,8 +28,8 @@ async function pullToRefreshAction() {
 
 <template>
   <MazPullToRefresh
-    header-class="maz-bg-bg-dark maz-text-foreground-light"
-    class="maz-flex maz-min-h-screen maz-w-full maz-flex-col"
+    header-class="maz:bg-bg-dark maz:text-foreground-light"
+    class="maz:flex maz:min-h-screen maz:w-full maz:flex-col"
     :action="pullToRefreshAction"
     spinner-color="contrast"
     standalone-mode

package/docs/src/components/maz-radio-buttons.md

@@ -12,7 +12,7 @@ description: MazRadioButtons is a standalone component to select a value in a li
 ## Basic usage
 
 <ComponentDemo>
-  <p class="maz-mb-4">
+  <p class="maz:mb-4">
     Select a competition
   </p>
 
@@ -97,7 +97,7 @@ description: MazRadioButtons is a standalone component to select a value in a li
 ## Custom slot template
 
 <ComponentDemo>
-  <p class="maz-mb-4">
+  <p class="maz:mb-4">
     Select a competition
   </p>
 
@@ -118,7 +118,7 @@ description: MazRadioButtons is a standalone component to select a value in a li
         <span>
           {{ option.label }}
         </span>
-        <span :class="{ 'maz-text-muted': !selected }">
+        <span :class="{ 'maz:text-muted': !selected }">
           {{ option.areaName }}
         </span>
       </div>
@@ -145,7 +145,7 @@ description: MazRadioButtons is a standalone component to select a value in a li
           <span>
             {{ option.label }}
           </span>
-          <span :class="{ 'maz-text-muted': !selected }">
+          <span :class="{ 'maz:text-muted': !selected }">
             {{ option.areaName }}
           </span>
         </div>
@@ -161,7 +161,7 @@ description: MazRadioButtons is a standalone component to select a value in a li
 ## Orientation - Column
 
 <ComponentDemo>
-  <p class="maz-mb-4">
+  <p class="maz:mb-4">
     Select a competition
   </p>
 
@@ -182,7 +182,7 @@ description: MazRadioButtons is a standalone component to select a value in a li
         <span>
           {{ option.label }}
         </span>
-        <span :class="{ 'maz-text-muted': !selected }">
+        <span :class="{ 'maz:text-muted': !selected }">
           {{ option.areaName }}
         </span>
       </div>
@@ -210,7 +210,7 @@ description: MazRadioButtons is a standalone component to select a value in a li
           <span>
             {{ option.label }}
           </span>
-          <span :class="{ 'maz-text-muted': !selected }">
+          <span :class="{ 'maz:text-muted': !selected }">
             {{ option.areaName }}
           </span>
         </div>
@@ -296,11 +296,11 @@ This option will display a select icon on the left of the label
     block
     class="vp-raw"
   >
-    <div class="maz-flex maz-flex-col maz-items-start maz-p-2">
-      <h3 class="maz-mb-2 maz-text-xl maz-font-semibold">
+    <div class="maz:flex maz:flex-col maz:items-start maz:p-2">
+      <h3 class="maz:mb-2 maz:text-xl maz:font-semibold">
         {{ option.label }}
       </h3>
-      <span :class="{ 'maz-text-muted': !selected }">
+      <span :class="{ 'maz:text-muted': !selected }">
         {{ option.description }}
       </span>
     </div>
@@ -380,7 +380,7 @@ export type ButtonsRadioOption = {
 
 <script lang="ts" setup>
   import { ref } from 'vue'
-  import MazRadioButtons from 'maz-ui/src/components/MazRadioButtons.vue'
+  import MazRadioButtons from 'maz-ui/components/MazRadioButtons'
 
   const selectedCompetition = ref<string>()
 

package/docs/src/components/maz-radio.md

@@ -13,7 +13,7 @@ description: MazRadio is a standalone component
 
 `v-model="{{chosenColor ?? 'undefined'}}"`
 
-<div class="maz-flex maz-flex-col maz-gap-2">
+<div class="maz:flex maz:flex-col maz:gap-2">
   <MazRadio
     v-for="color in colors"
     v-model="chosenColor"
@@ -68,7 +68,7 @@ const colors: Color[] = [
 
 `v-model="{{chosenSize ?? 'undefined'}}"`
 
-<div class="maz-flex maz-flex-col maz-gap-2">
+<div class="maz:flex maz:flex-col maz:gap-2">
   <MazRadio
     v-for="size in sizes"
     v-model="chosenSize"
@@ -110,7 +110,7 @@ const sizes: Size[] = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
 
 ## Disabled
 
-<div class="maz-flex maz-flex-col maz-gap-2">
+<div class="maz:flex maz:flex-col maz:gap-2">
   <MazRadio disabled name="disabled" value="disabled2">
     disabled
   </MazRadio>

package/docs/src/components/maz-read-more.md

@@ -76,13 +76,13 @@ import MazReadMore from 'maz-ui/components/MazReadMore'
 Control the number of visible lines using the `max-lines` prop.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <div>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">2 lines</p>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">2 lines</p>
       <MazReadMore :text="longText" :max-lines="2" />
     </div>
     <div>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">6 lines</p>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">6 lines</p>
       <MazReadMore :text="longText" :max-lines="6" />
     </div>
   </div>
@@ -116,13 +116,13 @@ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`
 Use the `max-chars` prop to truncate based on character count instead of lines.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <div>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">50 characters</p>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">50 characters</p>
       <MazReadMore :text="longText" :max-chars="50" />
     </div>
     <div>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">150 characters</p>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">150 characters</p>
       <MazReadMore :max-chars="150">
         {{ longText }}
       </MazReadMore>
@@ -196,7 +196,7 @@ import MazReadMore from 'maz-ui/components/MazReadMore'
 Customize the color of the toggle link using the `color` prop.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazReadMore :text="longText" color="primary" :max-lines="2" />
     <MazReadMore :text="longText" color="secondary" :max-lines="2" />
     <MazReadMore :text="longText" color="info" :max-lines="2" />

package/docs/src/components/maz-select-country.md

@@ -14,13 +14,13 @@ description: MazSelectCountry is a versatile Vue component for selecting countri
 The most common use case is selecting a country. The component automatically displays country names in the user's locale with their respective flags.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4 maz-flex-wrap">
+  <div class="maz:flex maz:gap-4 maz:flex-wrap">
     <MazSelectCountry
       v-model="selectedCountry"
       :codes="['FR', 'DE', 'IT', 'ES', 'GB', 'NL', 'BE', 'AT', 'CH', 'PT']"
       label="Select a country"
     />
-    <div class="maz-text-sm maz-text-muted">
+    <div class="maz:text-sm maz:text-muted">
       Selected: {{ selectedCountry || 'None' }}
     </div>
   </div>
@@ -50,13 +50,13 @@ const selectedCountry = ref('FR')
 Configure the component to display languages instead of countries by setting the appropriate `displayNamesOptions`.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4 maz-flex-wrap">
+  <div class="maz:flex maz:gap-4 maz:flex-wrap">
     <MazSelectCountry
       v-model="selectedLanguage"
       label="Select a language"
       :display-names-options="{ type: 'language' }"
     />
-    <div class="maz-text-sm maz-text-muted">
+    <div class="maz:text-sm maz:text-muted">
       Selected: {{ selectedLanguage || 'None' }}
     </div>
   </div>
@@ -85,9 +85,9 @@ const selectedLanguage = ref('en')
 ## Sizes and colors
 
 <ComponentDemo>
-  <div class="maz-grid maz-grid-cols-1 md:maz-grid-cols-2 maz-gap-4">
-    <div class="maz-space-y-4">
-      <h4 class="maz-font-semibold">Sizes</h4>
+  <div class="maz:grid maz:grid-cols-1 maz:md:grid-cols-2 maz:gap-4">
+    <div class="maz:space-y-4">
+      <h4 class="maz:font-semibold">Sizes</h4>
       <MazSelectCountry
         v-model="sizeExample1"
         size="sm"
@@ -104,8 +104,8 @@ const selectedLanguage = ref('en')
         label="Large"
       />
     </div>
-    <div class="maz-space-y-4">
-      <h4 class="maz-font-semibold">Colors</h4>
+    <div class="maz:space-y-4">
+      <h4 class="maz:font-semibold">Colors</h4>
       <MazSelectCountry
         v-model="colorExample1"
         color="primary"
@@ -172,7 +172,7 @@ const selectedLanguage = ref('en')
 You can prioritize certain countries to appear at the top of the list using the `preferredCodes` prop.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4 maz-flex-wrap">
+  <div class="maz:flex maz:gap-4 maz:flex-wrap">
     <MazSelectCountry
       v-model="preferredExample"
       label="European countries first"
@@ -200,9 +200,9 @@ You can prioritize certain countries to appear at the top of the list using the
 Control which countries are displayed using `onlyCodes` to show only specific countries, or `ignoredCodes` to exclude certain ones.
 
 <ComponentDemo>
-  <div class="maz-grid maz-grid-cols-1 md:maz-grid-cols-2 maz-gap-4">
+  <div class="maz:grid maz:grid-cols-1 maz:md:grid-cols-2 maz:gap-4">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Only European countries</h4>
+      <h4 class="maz:font-semibold maz:mb-2">Only European countries</h4>
       <MazSelectCountry
         v-model="europeExample"
         label="European countries only"
@@ -210,7 +210,7 @@ Control which countries are displayed using `onlyCodes` to show only specific co
       />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Exclude specific countries</h4>
+      <h4 class="maz:font-semibold maz:mb-2">Exclude specific countries</h4>
       <MazSelectCountry
         v-model="excludeExample"
         label="All except some countries"
@@ -247,9 +247,9 @@ Control which countries are displayed using `onlyCodes` to show only specific co
 Configure how country/language names are displayed using the `displayNamesOptions` prop, which leverages the browser's `Intl.DisplayNames` API.
 
 <ComponentDemo>
-  <div class="maz-grid maz-grid-cols-1 md:maz-grid-cols-2 maz-gap-4">
+  <div class="maz:grid maz:grid-cols-1 maz:md:grid-cols-2 maz:gap-4">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Short country names</h4>
+      <h4 class="maz:font-semibold maz:mb-2">Short country names</h4>
       <MazSelectCountry
         v-model="shortExample"
         label="Short names"
@@ -257,7 +257,7 @@ Configure how country/language names are displayed using the `displayNamesOption
       />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Languages with narrow style</h4>
+      <h4 class="maz:font-semibold maz:mb-2">Languages with narrow style</h4>
       <MazSelectCountry
         v-model="languageNarrowExample"
         label="Language names (narrow)"
@@ -296,7 +296,7 @@ Configure how country/language names are displayed using the `displayNamesOption
 Hide country flags using the `hideFlags` prop for a cleaner text-only interface.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4 maz-flex-wrap">
+  <div class="maz:flex maz:gap-4 maz:flex-wrap">
     <MazSelectCountry
       v-model="noFlagsExample"
       label="Countries without flags"
@@ -326,9 +326,9 @@ Hide country flags using the `hideFlags` prop for a cleaner text-only interface.
 Override the default locale to display country/language names in a specific language.
 
 <ComponentDemo>
-  <div class="maz-grid maz-grid-cols-1 md:maz-grid-cols-2 maz-gap-4">
+  <div class="maz:grid maz:grid-cols-1 maz:md:grid-cols-2 maz:gap-4">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Countries in French</h4>
+      <h4 class="maz:font-semibold maz:mb-2">Countries in French</h4>
       <MazSelectCountry
         v-model="frenchExample"
         label="Pays (French)"
@@ -336,7 +336,7 @@ Override the default locale to display country/language names in a specific lang
       />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Countries in Spanish</h4>
+      <h4 class="maz:font-semibold maz:mb-2">Countries in Spanish</h4>
       <MazSelectCountry
         v-model="spanishExample"
         label="País (Spanish)"
@@ -373,8 +373,8 @@ Override the default locale to display country/language names in a specific lang
 The component supports all the standard form states for better user experience.
 
 <ComponentDemo>
-  <div class="maz-grid maz-grid-cols-1 md:maz-grid-cols-2 maz-gap-4">
-    <div class="maz-space-y-4">
+  <div class="maz:grid maz:grid-cols-1 maz:md:grid-cols-2 maz:gap-4">
+    <div class="maz:space-y-4">
       <MazSelectCountry
         v-model="successExample"
         label="Success state"
@@ -388,7 +388,7 @@ The component supports all the standard form states for better user experience.
         hint="Please verify your selection"
       />
     </div>
-    <div class="maz-space-y-4">
+    <div class="maz:space-y-4">
       <MazSelectCountry
         v-model="errorExample"
         label="Error state"
@@ -446,7 +446,7 @@ The component supports all the standard form states for better user experience.
 Provide your own list of options instead of using the built-in country/language codes.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4 maz-flex-wrap">
+  <div class="maz:flex maz:gap-4 maz:flex-wrap">
     <MazSelectCountry
       v-model="customExample"
       label="Custom regions"
@@ -489,7 +489,7 @@ const customRegions = [
 Show country/language codes in the input field instead of names using the `displayCode` prop.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4 maz-flex-wrap">
+  <div class="maz:flex maz:gap-4 maz:flex-wrap">
     <MazSelectCountry
       v-model="codeDisplayExample"
       label="Display country codes"
@@ -519,7 +519,7 @@ Show country/language codes in the input field instead of names using the `displ
 Combine multiple features for complex use cases, such as business applications requiring specific country lists with custom styling.
 
 <ComponentDemo>
-  <div class="maz-max-w-md">
+  <div class="maz:max-w-md">
     <MazSelectCountry
       v-model="advancedExample"
       label="Business countries"

package/docs/src/components/maz-select.md

@@ -221,7 +221,7 @@ const optGroup = [
 ## Size
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-2">
+  <div class="maz:flex maz:flex-col maz:gap-2">
     <MazSelect
       v-for="size in sizes"
       :key="size"

package/docs/src/components/maz-skeleton.md

@@ -38,18 +38,18 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 Use the `shape` prop to change the skeleton shape: `rectangle` (default), `circle`, or `square`.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4 maz-items-center">
-    <div class="maz-flex maz-flex-col maz-items-center maz-gap-2">
+  <div class="maz:flex maz:gap-4 maz:items-center">
+    <div class="maz:flex maz:flex-col maz:items-center maz:gap-2">
       <MazSkeleton shape="rectangle" width="100px" height="1rem" />
-      <span class="maz-text-sm maz-text-muted">rectangle</span>
+      <span class="maz:text-sm maz:text-muted">rectangle</span>
     </div>
-    <div class="maz-flex maz-flex-col maz-items-center maz-gap-2">
+    <div class="maz:flex maz:flex-col maz:items-center maz:gap-2">
       <MazSkeleton shape="circle" size="3rem" />
-      <span class="maz-text-sm maz-text-muted">circle</span>
+      <span class="maz:text-sm maz:text-muted">circle</span>
     </div>
-    <div class="maz-flex maz-flex-col maz-items-center maz-gap-2">
+    <div class="maz:flex maz:flex-col maz:items-center maz:gap-2">
       <MazSkeleton shape="square" size="3rem" />
-      <span class="maz-text-sm maz-text-muted">square</span>
+      <span class="maz:text-sm maz:text-muted">square</span>
     </div>
   </div>
 
@@ -75,7 +75,7 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 Use the `size` prop to set both width and height (for circle and square shapes), or use `width` and `height` props for more control.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4 maz-items-end">
+  <div class="maz:flex maz:gap-4 maz:items-end">
     <MazSkeleton shape="circle" size="2rem" />
     <MazSkeleton shape="circle" size="3rem" />
     <MazSkeleton shape="circle" size="4rem" />
@@ -105,7 +105,7 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 For rectangles, use `width` and `height` props for precise control.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazSkeleton width="100%" height="0.75rem" />
     <MazSkeleton width="80%" height="0.75rem" />
     <MazSkeleton width="60%" height="0.75rem" />
@@ -133,10 +133,10 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 Control the border radius using the `rounded-size` prop.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4 maz-flex-wrap">
-    <div v-for="size in roundedSizes" :key="size" class="maz-flex maz-flex-col maz-items-center maz-gap-2">
+  <div class="maz:flex maz:gap-4 maz:flex-wrap">
+    <div v-for="size in roundedSizes" :key="size" class="maz:flex maz:flex-col maz:items-center maz:gap-2">
       <MazSkeleton :rounded-size="size" width="80px" height="2rem" />
-      <span class="maz-text-sm maz-text-muted">{{ size }}</span>
+      <span class="maz:text-sm maz:text-muted">{{ size }}</span>
     </div>
   </div>
 
@@ -165,14 +165,14 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 Use the `animated` prop set to `false` to disable the shimmer animation.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4">
-    <div class="maz-flex maz-flex-col maz-items-center maz-gap-2">
+  <div class="maz:flex maz:gap-4">
+    <div class="maz:flex maz:flex-col maz:items-center maz:gap-2">
       <MazSkeleton shape="circle" size="3rem" :animated="true" />
-      <span class="maz-text-sm maz-text-muted">animated</span>
+      <span class="maz:text-sm maz:text-muted">animated</span>
     </div>
-    <div class="maz-flex maz-flex-col maz-items-center maz-gap-2">
+    <div class="maz:flex maz:flex-col maz:items-center maz:gap-2">
       <MazSkeleton shape="circle" size="3rem" :animated="false" />
-      <span class="maz-text-sm maz-text-muted">static</span>
+      <span class="maz:text-sm maz:text-muted">static</span>
     </div>
   </div>
 
@@ -197,9 +197,9 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 Combine multiple skeletons to create loading placeholders for complex layouts.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4 maz-p-4 maz-w-full maz-max-w-sm">
+  <div class="maz:flex maz:gap-4 maz:p-4 maz:w-full maz:max-w-sm">
     <MazSkeleton shape="circle" size="3rem" />
-    <div class="maz-flex maz-flex-col maz-gap-2 maz-flex-1">
+    <div class="maz:flex maz:flex-col maz:gap-2 maz:flex-1">
       <MazSkeleton width="60%" height="0.875rem" />
       <MazSkeleton width="40%" height="0.75rem" />
     </div>
@@ -231,15 +231,15 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 Create an article loading placeholder with various skeleton elements.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4 maz-w-full maz-max-w-md">
+  <div class="maz:flex maz:flex-col maz:gap-4 maz:w-full maz:max-w-md">
     <MazSkeleton width="100%" height="200px" rounded-size="lg" />
-    <div class="maz-flex maz-flex-col maz-gap-2">
+    <div class="maz:flex maz:flex-col maz:gap-2">
       <MazSkeleton width="80%" height="1.5rem" />
       <MazSkeleton width="100%" height="0.75rem" />
       <MazSkeleton width="100%" height="0.75rem" />
       <MazSkeleton width="60%" height="0.75rem" />
     </div>
-    <div class="maz-flex maz-gap-2 maz-items-center">
+    <div class="maz:flex maz:gap-2 maz:items-center">
       <MazSkeleton shape="circle" size="2rem" />
       <MazSkeleton width="100px" height="0.75rem" />
     </div>
@@ -280,10 +280,10 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 Create a list loading placeholder.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-3 maz-w-full maz-max-w-sm">
-    <div v-for="i in 4" :key="i" class="maz-flex maz-gap-3 maz-items-center maz-p-2 maz-bg-surface-50 dark:maz-bg-surface-800 maz-rounded">
+  <div class="maz:flex maz:flex-col maz:gap-3 maz:w-full maz:max-w-sm">
+    <div v-for="i in 4" :key="i" class="maz:flex maz:gap-3 maz:items-center maz:p-2 maz:bg-surface-50 maz:dark:bg-surface-800 maz:rounded-md">
       <MazSkeleton shape="square" size="2.5rem" rounded-size="md" />
-      <div class="maz-flex maz-flex-col maz-gap-1 maz-flex-1">
+      <div class="maz:flex maz:flex-col maz:gap-1 maz:flex-1">
         <MazSkeleton width="70%" height="0.75rem" />
         <MazSkeleton width="50%" height="0.625rem" />
       </div>

package/docs/src/components/maz-spinner.md

@@ -29,7 +29,7 @@ Choose the color of the spinner
 
 By default the color is `theme`
 
-<div class="maz-flex maz-gap-2 maz-flex-wrap">
+<div class="maz:flex maz:gap-2 maz:flex-wrap">
   <MazSpinner color="primary" />
   <MazSpinner color="secondary" />
   <MazSpinner color="destructive" />
@@ -64,7 +64,7 @@ Choose the size of the spinner
 
 The default size is `2em`
 
-<div class="maz-flex maz-gap-2 maz-flex-wrap maz-items-center">
+<div class="maz:flex maz:gap-2 maz:flex-wrap maz:items-center">
   <MazSpinner size="1em" />
   <MazSpinner />
   <MazSpinner size="3em" />

package/docs/src/components/maz-stepper.md

@@ -48,7 +48,7 @@ description: MazStepper is a standalone UI component customizable, reactive for
     <MazInput v-model="address" label="Delivery address" />
     <br />
     <br />
-    <div class="maz-flex maz-gap-4">
+    <div class="maz:flex maz:gap-4">
       <MazBtn @click="previousStep" color="secondary">
         Previous
       </MazBtn>
@@ -68,7 +68,7 @@ description: MazStepper is a standalone UI component customizable, reactive for
     <MazInput label="Credit card number" type="number" />
     <br />
     <br />
-    <div class="maz-flex maz-gap-4">
+    <div class="maz:flex maz:gap-4">
       <MazBtn @click="previousStep" color="secondary">
         Previous
       </MazBtn>
@@ -168,7 +168,7 @@ You can use html in all properties
 <MazStepper
   :steps="[
     { title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1', content: 'Content 1' },
-    { title: 'Title 2', subtitle: `<span class='maz-text-primary'>Subtitle 2</span>`, titleInfo: 'Info 2', content: 'Content 2' },
+    { title: 'Title 2', subtitle: `<span class='maz:text-primary'>Subtitle 2</span>`, titleInfo: 'Info 2', content: 'Content 2' },
     { title: 'Title 3', subtitle: 'Subtitle 3', titleInfo: 'Info 3', content: 'Content 3' },
     { title: 'Title 4', subtitle: 'Subtitle 4', titleInfo: 'Info 4', content: 'Content 4' },
   ]"
@@ -181,7 +181,7 @@ You can use html in all properties
   <MazStepper
     :steps="[
       { title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1', content: 'Content 1' },
-      { title: 'Title 2', subtitle: '<span class="maz-text-primary">Subtitle 2</span>', titleInfo: 'Info 2', content: 'Content 2' },
+      { title: 'Title 2', subtitle: '<span class="maz:text-primary">Subtitle 2</span>', titleInfo: 'Info 2', content: 'Content 2' },
       { title: 'Title 3', subtitle: 'Subtitle 3', titleInfo: 'Info 3', content: 'Content 3' },
       { title: 'Title 4', subtitle: 'Subtitle 4', titleInfo: 'Info 4', content: 'Content 4' },
     ]"
@@ -197,7 +197,7 @@ You can use html in all properties
       { title: 'Title 2', subtitle: 'Subtitle 2', titleInfo: 'Info 2', content: 'Content 2' },
   ]">
   <template #point="{ step }">
-    <div class="maz-bg-red-500 maz-p-1 maz-size-8 maz-rounded maz-flex maz-flex-center">{{ step }}</div>
+    <div class="maz:bg-red-500 maz:p-1 maz:size-8 maz:rounded-md maz:flex maz:flex-center">{{ step }}</div>
   </template>
 </MazStepper>
 

package/docs/src/components/maz-switch.md

@@ -9,7 +9,7 @@ description: MazSwitch is a standalone component that replaces the standard html
 
 <!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
-<div class="maz-flex maz-flex-col maz-gap-3">
+<div class="maz:flex maz:flex-col maz:gap-3">
   <MazSwitch
     v-for="color in colors"
     v-model="switchValue"

package/docs/src/components/maz-table.md

@@ -114,7 +114,7 @@ You can also provide all your data, the table is auto-generated and you can use
 ---
 
 <ComponentDemo>
-<div class="maz-bg-surface-600/50 dark:maz-bg-surface-400 maz-rounded maz-p-2">
+<div class="maz:bg-surface-600/50 maz:dark:bg-surface-400 maz:rounded-md maz:p-2">
 
 v-model="{{selectedIds ?? 'undefined'}}"
 
@@ -146,15 +146,15 @@ v-model:page-size="{{pageSize ?? 'undefined'}}"
     { label:'Name', key: 'name' },
     { label: 'Code', key: 'code', align: 'center'  },
     { label: 'Type', key: 'type' },
-    { label: 'Area', key: 'areaName', align: 'center', classes: 'maz-font-bold' },
+    { label: 'Area', key: 'areaName', align: 'center', classes: 'maz:font-bold' },
   ]"
   :rows="competitions"
 >
   <template #cell-index="{ value }">
-    <span class="maz-text-base">{{value}}</span>
+    <span class="maz:text-base">{{value}}</span>
   </template>
   <template #cell-name="{ row, value }">
-    <div class="maz-flex maz-items-center maz-gap-2">
+    <div class="maz:flex maz:items-center maz:gap-2">
       <MazAvatar :src="row.logoUrl" size="0.5rem"></MazAvatar>
       <span>{{value}}</span>
     </div>
@@ -164,7 +164,7 @@ v-model:page-size="{{pageSize ?? 'undefined'}}"
   </template>
 
   <template #actions>
-    <MazBtn v-tooltip="{ text: 'Delete', color: 'destructive' }" fab size="xs" color="destructive" icon="trash" />
+    <MazBtn v-tooltip="{ text: 'Delete', color: 'destructive' }" fab size="xs" color="destructive" icon="/trash.svg" />
   </template>
 </MazTable>
 
@@ -191,15 +191,15 @@ v-model:page-size="{{pageSize ?? 'undefined'}}"
         { label:'Name', key: 'name' },
         { label: 'Code', key: 'code', align: 'center'  },
         { label: 'Type', key: 'type' },
-        { label: 'Area', key: 'areaName', align: 'center', classes: 'maz-font-bold' },
+        { label: 'Area', key: 'areaName', align: 'center', classes: 'maz:font-bold' },
       ]"
       :rows="competitions"
     >
       <template #cell-index="{ value }">
-        <span class="maz-text-base">{{value}}</span>
+        <span class="maz:text-base">{{value}}</span>
       </template>
       <template #cell-name="{ row, value }">
-        <div class="maz-flex maz-items-center maz-gap-2">
+        <div class="maz:flex maz:items-center maz:gap-2">
           <MazAvatar :src="row.logoUrl" size="0.5rem"></MazAvatar>
           <span>{{value}}</span>
         </div>
@@ -209,7 +209,7 @@ v-model:page-size="{{pageSize ?? 'undefined'}}"
       </template>
 
       <template #actions>
-        <MazBtn fab size="xs" color="destructive" icon="trash" />
+        <MazBtn fab size="xs" color="destructive" icon="/trash.svg" />
       </template>
     </MazTable>
   </template>
@@ -510,7 +510,7 @@ Available sizes: `'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'`
 <script lang="ts" setup>
   import { ref } from 'vue'
   import {competitions} from './competitions.ts'
-  import { vTooltip } from 'maz-ui/src/directives/vTooltip.ts'
+  import { vTooltip } from 'maz-ui/directives/vTooltip'
 
   const selectedIds = ref<string[]>(['0262672d-7c7a-4d30-866e-edb88b5a5336'])
   const searchQuery = ref<string>()