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

package/docs/src/components/maz-input-phone-number.md

@@ -32,7 +32,7 @@ The simplest way to use MazInputPhoneNumber - just add it and it works!
     @data="results = $event"
   />
 
-  <div class="maz-mt-4 maz-text-sm">
+  <div class="maz:mt-4 maz:text-sm">
     <p><strong>Phone Number:</strong> {{ phoneNumber || 'Not entered yet' }}</p>
     <p><strong>Country:</strong> {{ countryCode || 'Not selected' }}</p>
     <p><strong>Is Valid:</strong> {{ results?.isValid ? '✅ Yes' : '❌ No' }}</p>
@@ -68,10 +68,10 @@ const results = ref<MazInputPhoneNumberData>()
 Control which countries appear in the dropdown and their order.
 
 <ComponentDemo>
-  <div class="maz-space-y-4">
+  <div class="maz:space-y-4">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Preferred Countries</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Show your most common countries first</p>
+      <h4 class="maz:font-semibold maz:mb-2">Preferred Countries</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Show your most common countries first</p>
       <MazInputPhoneNumber
         v-model="phone1"
         :preferred-countries="['US', 'FR', 'GB', 'DE', 'CA']"
@@ -79,8 +79,8 @@ Control which countries appear in the dropdown and their order.
       />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Only Specific Countries</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Limit to certain countries only</p>
+      <h4 class="maz:font-semibold maz:mb-2">Only Specific Countries</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Limit to certain countries only</p>
       <MazInputPhoneNumber
         v-model="phone2"
         :only-countries="['US', 'FR', 'GB', 'DE', 'IT', 'ES']"
@@ -88,8 +88,8 @@ Control which countries appear in the dropdown and their order.
       />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Ignore Countries</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Remove unwanted countries</p>
+      <h4 class="maz:font-semibold maz:mb-2">Ignore Countries</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Remove unwanted countries</p>
       <MazInputPhoneNumber
         v-model="phone3"
         :ignored-countries="['AF', 'AL', 'DZ']"
@@ -133,20 +133,20 @@ Control which countries appear in the dropdown and their order.
 Choose how the country selector and phone input are arranged.
 
 <ComponentDemo>
-  <div class="maz-space-y-6">
+  <div class="maz:space-y-6">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Responsive (Default)</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Stacks on mobile, side-by-side on desktop</p>
+      <h4 class="maz:font-semibold maz:mb-2">Responsive (Default)</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Stacks on mobile, side-by-side on desktop</p>
       <MazInputPhoneNumber orientation="responsive" />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Always Row</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Side-by-side on all screen sizes</p>
+      <h4 class="maz:font-semibold maz:mb-2">Always Row</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Side-by-side on all screen sizes</p>
       <MazInputPhoneNumber orientation="row" />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Always Column</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Stacked on all screen sizes</p>
+      <h4 class="maz:font-semibold maz:mb-2">Always Column</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Stacked on all screen sizes</p>
       <MazInputPhoneNumber orientation="col" />
     </div>
   </div>
@@ -174,10 +174,10 @@ Choose how the country selector and phone input are arranged.
 Customize what information is shown to users.
 
 <ComponentDemo>
-  <div class="maz-space-y-6">
+  <div class="maz:space-y-6">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Show Country Names</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Display country names instead of calling codes</p>
+      <h4 class="maz:font-semibold maz:mb-2">Show Country Names</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Display country names instead of calling codes</p>
       <MazInputPhoneNumber
         display-country-name
         :translations="{
@@ -186,20 +186,20 @@ Customize what information is shown to users.
       />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Show Calling Codes in List</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Help users see the dialing codes</p>
+      <h4 class="maz:font-semibold maz:mb-2">Show Calling Codes in List</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Help users see the dialing codes</p>
       <MazInputPhoneNumber show-code-in-list />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Hide Phone Examples</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">
+      <h4 class="maz:font-semibold maz:mb-2">Hide Phone Examples</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">
         Remove the example phone number hints (visible when the phone input is focused)
       </p>
       <MazInputPhoneNumber :example="false" />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Hide Country Flags</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Text-only country selection</p>
+      <h4 class="maz:font-semibold maz:mb-2">Hide Country Flags</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Text-only country selection</p>
       <MazInputPhoneNumber hide-flags />
     </div>
   </div>
@@ -233,20 +233,20 @@ Customize what information is shown to users.
 Let the component automatically detect the user's country.
 
 <ComponentDemo>
-  <div class="maz-space-y-6">
+  <div class="maz:space-y-6">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Browser Locale Detection</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Uses browser language settings (enabled by default)</p>
+      <h4 class="maz:font-semibold maz:mb-2">Browser Locale Detection</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Uses browser language settings (enabled by default)</p>
       <MazInputPhoneNumber :use-browser-locale="true" />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">IP-based Detection</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Fetches country from user's IP address</p>
+      <h4 class="maz:font-semibold maz:mb-2">IP-based Detection</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Fetches country from user's IP address</p>
       <MazInputPhoneNumber fetch-country />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Manual Default Country</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Set a specific default country</p>
+      <h4 class="maz:font-semibold maz:mb-2">Manual Default Country</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Set a specific default country</p>
       <MazInputPhoneNumber
         :use-browser-locale="false"
         country-code="JP"
@@ -280,10 +280,10 @@ Let the component automatically detect the user's country.
 Control how phone numbers are automatically formatted as users type.
 
 <ComponentDemo>
-  <div class="maz-space-y-6">
+  <div class="maz:space-y-6">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Format on Blur (Default)</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Shows raw input while typing, formats when field loses focus</p>
+      <h4 class="maz:font-semibold maz:mb-2">Format on Blur (Default)</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Shows raw input while typing, formats when field loses focus</p>
       <MazInputPhoneNumber
         auto-format="blur"
         country-code="US"
@@ -295,8 +295,8 @@ Control how phone numbers are automatically formatted as users type.
       />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Format While Typing</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Real-time formatting as you type</p>
+      <h4 class="maz:font-semibold maz:mb-2">Format While Typing</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Real-time formatting as you type</p>
       <MazInputPhoneNumber
         auto-format="typing"
         country-code="FR"
@@ -308,8 +308,8 @@ Control how phone numbers are automatically formatted as users type.
       />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Disable Formatting</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">For countries with multiple valid lengths or custom formatting</p>
+      <h4 class="maz:font-semibold maz:mb-2">Disable Formatting</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">For countries with multiple valid lengths or custom formatting</p>
       <MazInputPhoneNumber
         auto-format="disabled"
         country-code="AI"
@@ -348,23 +348,23 @@ Control how phone numbers are automatically formatted as users type.
 Control the visual validation feedback and success/error indicators.
 
 <ComponentDemo>
-  <div class="maz-space-y-6">
+  <div class="maz:space-y-6">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Hide Validation UI</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">No visual success/error indicators</p>
+      <h4 class="maz:font-semibold maz:mb-2">Hide Validation UI</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">No visual success/error indicators</p>
       <MazInputPhoneNumber
         :validation-success="false"
         :validation-error="false"
       />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Force Success State</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Always show success styling</p>
+      <h4 class="maz:font-semibold maz:mb-2">Force Success State</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Always show success styling</p>
       <MazInputPhoneNumber success />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Force Error State</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Always show error styling</p>
+      <h4 class="maz:font-semibold maz:mb-2">Force Error State</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Always show error styling</p>
       <MazInputPhoneNumber error />
     </div>
   </div>
@@ -395,10 +395,10 @@ Control the visual validation feedback and success/error indicators.
 Make the component speak your users' language.
 
 <ComponentDemo>
-  <div class="maz-space-y-6">
+  <div class="maz:space-y-6">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Custom Labels</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Translate all text in the interface</p>
+      <h4 class="maz:font-semibold maz:mb-2">Custom Labels</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Translate all text in the interface</p>
       <MazInputPhoneNumber
         :translations="{
           countrySelect: {
@@ -414,13 +414,13 @@ Make the component speak your users' language.
       />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Country Names in French</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Change the language of country names</p>
+      <h4 class="maz:font-semibold maz:mb-2">Country Names in French</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Change the language of country names</p>
       <MazInputPhoneNumber country-locale="fr-FR" />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Custom Country Names</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Override specific country names</p>
+      <h4 class="maz:font-semibold maz:mb-2">Custom Country Names</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Override specific country names</p>
       <MazInputPhoneNumber
         :custom-countries-list="{
           US: 'United States of America',
@@ -472,40 +472,40 @@ Make the component speak your users' language.
 Replace the default flag emojis with your own design.
 
 <ComponentDemo>
-  <div class="maz-space-y-6">
+  <div class="maz:space-y-6">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Country Code Badges</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Show country codes instead of flags</p>
+      <h4 class="maz:font-semibold maz:mb-2">Country Code Badges</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Show country codes instead of flags</p>
       <MazInputPhoneNumber>
         <template #selector-flag="{ countryCode }">
           <span
             id="custom-flag-element"
-            class="maz-bg-primary maz-text-primary-foreground maz-px-2 maz-py-1 maz-rounded maz-text-xs maz-font-semibold"
+            class="maz:bg-primary maz:text-primary-foreground maz:px-2 maz:py-1 maz:rounded-md maz:text-xs maz:font-semibold"
           >
             {{ countryCode }}
           </span>
         </template>
         <template #country-list-flag="{ countryCode }">
-          <MazBadge size="sm" class="maz-me-2 maz-min-w-[2.5rem]">
+          <MazBadge size="sm" class="maz:me-2 maz:min-w-10">
             {{ countryCode }}
           </MazBadge>
         </template>
       </MazInputPhoneNumber>
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Custom Icons</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Use your own flag icons or designs</p>
+      <h4 class="maz:font-semibold maz:mb-2">Custom Icons</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Use your own flag icons or designs</p>
       <MazInputPhoneNumber>
         <template #selector-flag="{ countryCode }">
           <div
             id="icon-flag-element"
-            class="maz-w-6 maz-h-6 maz-bg-gradient-to-r maz-from-blue-500 maz-to-green-500 maz-rounded-full maz-flex maz-items-center maz-justify-center maz-text-white maz-text-xs maz-font-bold"
+            class="maz:w-6 maz:h-6 maz:bg-linear-to-r maz:from-blue-500 maz:to-green-500 maz:rounded-full maz:flex maz:items-center maz:justify-center maz:text-white maz:text-xs maz:font-bold"
           >
             {{ countryCode?.charAt(0) }}
           </div>
         </template>
         <template #country-list-flag="{ countryCode }">
-          <div class="maz-w-6 maz-h-6 maz-bg-gradient-to-r maz-from-purple-500 maz-to-pink-500 maz-rounded maz-flex maz-items-center maz-justify-center maz-text-white maz-text-xs maz-font-bold maz-me-2">
+          <div class="maz:w-6 maz:h-6 maz:bg-linear-to-r maz:from-purple-500 maz:to-pink-500 maz:rounded-md maz:flex maz:items-center maz:justify-center maz:text-white maz:text-xs maz:font-bold maz:me-2">
             {{ countryCode?.charAt(0) }}
           </div>
         </template>
@@ -525,7 +525,7 @@ Replace the default flag emojis with your own design.
       </span>
     </template>
     <template #country-list-flag="{ countryCode }">
-      <MazBadge size="sm" class="maz-me-2">
+      <MazBadge size="sm" class="maz:me-2">
         {{ countryCode }}
       </MazBadge>
     </template>
@@ -547,17 +547,18 @@ Replace the default flag emojis with your own design.
 </template>
 
 <style scoped>
+@reference "../../.vitepress/theme/main.css";
 .country-badge {
-  @apply maz-bg-primary maz-text-primary-foreground maz-px-2 maz-py-1 maz-rounded maz-text-xs maz-font-semibold;
+  @apply maz:bg-primary maz:text-primary-foreground maz:px-2 maz:py-1 maz:rounded-md maz:text-xs maz:font-semibold;
 }
 
 .custom-flag-icon,
 .custom-list-icon {
-  @apply maz-w-6 maz-h-6 maz-bg-gradient-to-r maz-from-blue-500 maz-to-green-500 maz-rounded-full maz-flex maz-items-center maz-justify-center maz-text-white maz-text-xs maz-font-bold;
+  @apply maz:w-6 maz:h-6 maz:bg-linear-to-r maz:from-blue-500 maz:to-green-500 maz:rounded-full maz:flex maz:items-center maz:justify-center maz:text-white maz:text-xs maz:font-bold;
 }
 
 .custom-list-icon {
-  @apply maz-me-2;
+  @apply maz:me-2;
 }
 </style>
 ```
@@ -574,10 +575,10 @@ Replace the default flag emojis with your own design.
 Fine-tune the component for specific use cases.
 
 <ComponentDemo>
-  <div class="maz-space-y-6">
+  <div class="maz:space-y-6">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Phone-only Mode</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Hide country selector, pre-select country</p>
+      <h4 class="maz:font-semibold maz:mb-2">Phone-only Mode</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Hide country selector, pre-select country</p>
       <MazInputPhoneNumber
         hide-country-select
         country-code="US"
@@ -589,21 +590,21 @@ Fine-tune the component for specific use cases.
       />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Custom Search Sensitivity</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Adjust how strict country search is (0 = fuzzy, 1 = exact)</p>
+      <h4 class="maz:font-semibold maz:mb-2">Custom Search Sensitivity</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Adjust how strict country search is (0 = fuzzy, 1 = exact)</p>
       <MazInputPhoneNumber
         :search-threshold="0.3"
         placeholder="Try searching 'unite' for United States"
       />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Disable Search</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Remove search functionality from country list</p>
+      <h4 class="maz:font-semibold maz:mb-2">Disable Search</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Remove search functionality from country list</p>
       <MazInputPhoneNumber :search="false" />
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">Different Dropdown Position</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-2">Control where the country list appears</p>
+      <h4 class="maz:font-semibold maz:mb-2">Different Dropdown Position</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-2">Control where the country list appears</p>
       <MazInputPhoneNumber list-position="top-start" />
     </div>
   </div>
@@ -642,11 +643,11 @@ Fine-tune the component for specific use cases.
 See how to use the component in common scenarios.
 
 <ComponentDemo>
-  <div class="maz-space-y-8">
+  <div class="maz:space-y-8">
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">🏢 Business Form</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-4">Perfect for customer registration</p>
-      <div class="maz-max-w-md maz-grid maz-grid-cols-1 maz-gap-4">
+      <h4 class="maz:font-semibold maz:mb-2">🏢 Business Form</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-4">Perfect for customer registration</p>
+      <div class="maz:max-w-md maz:grid maz:grid-cols-1 maz:gap-4">
         <MazInput label="Full Name" placeholder="John Doe" />
         <MazInput label="Email" type="email" placeholder="john@example.com" />
         <MazInputPhoneNumber
@@ -663,9 +664,9 @@ See how to use the component in common scenarios.
       </div>
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">🌍 Global Support</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-4">Multi-language international form</p>
-      <div class="maz-max-w-md">
+      <h4 class="maz:font-semibold maz:mb-2">🌍 Global Support</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-4">Multi-language international form</p>
+      <div class="maz:max-w-md">
         <MazInputPhoneNumber
           v-model="globalPhone"
           country-locale="es-ES"
@@ -683,9 +684,9 @@ See how to use the component in common scenarios.
       </div>
     </div>
     <div>
-      <h4 class="maz-font-semibold maz-mb-2">📱 Mobile-first Design</h4>
-      <p class="maz-text-sm maz-text-muted maz-mb-4">Optimized for mobile apps</p>
-      <div class="maz-max-w-xs">
+      <h4 class="maz:font-semibold maz:mb-2">📱 Mobile-first Design</h4>
+      <p class="maz:text-sm maz:text-muted maz:mb-4">Optimized for mobile apps</p>
+      <div class="maz:max-w-xs">
         <MazInputPhoneNumber
           v-model="mobilePhone"
           orientation="col"
@@ -761,16 +762,16 @@ const mobilePhone = ref()
 Understanding what data the component provides.
 
 <ComponentDemo>
-  <div class="maz-space-y-4">
+  <div class="maz:space-y-4">
     <MazInputPhoneNumber
       v-model="dataPhone"
       v-model:country-code="dataCountry"
       label="Enter a phone number to see data"
       @data="phoneData = $event"
     />
-    <div v-if="phoneData" class="maz-bg-surface-400 maz-p-4 maz-rounded">
-      <h4 class="maz-font-semibold maz-mb-3">📊 Phone Number Data</h4>
-      <div class="maz-grid maz-grid-cols-1 md:maz-grid-cols-2 maz-gap-4 maz-text-sm">
+    <div v-if="phoneData" class="maz:bg-surface-400 maz:p-4 maz:rounded-md">
+      <h4 class="maz:font-semibold maz:mb-3">📊 Phone Number Data</h4>
+      <div class="maz:grid maz:grid-cols-1 maz:md:grid-cols-2 maz:gap-4 maz:text-sm">
         <div>
           <strong>Valid:</strong> {{ phoneData?.isValid ? '✅' : '❌' }}
         </div>

package/docs/src/components/maz-input-tags.md

@@ -43,7 +43,7 @@ const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
 
 ## Sizing
 
-<div class="maz-flex maz-flex-col maz-gap-2">
+<div class="maz:flex maz:flex-col maz:gap-2">
   <MazInputTags
     v-for="size in sizes"
     :key="size"
@@ -65,7 +65,7 @@ const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
 </script>
 
 <template>
-  <div class="maz-flex maz-flex-col maz-gap-2">
+  <div class="maz:flex maz:flex-col maz:gap-2">
     <MazInputTags
       v-for="size in sizes"
       :key="size"

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

@@ -146,8 +146,8 @@ const inputValue = ref()
 <MazInput
   v-model="inputValue"
   label="label icons"
-  left-icon="banknotes"
-  right-icon="user"
+  start-icon="/banknotes.svg"
+  end-icon="/user.svg"
   autocomplete="off"
 />
 
@@ -155,12 +155,12 @@ const inputValue = ref()
 
 ::: details View code
 
-When you use the properties `right-icon`, `left-icon` or `icon` with the icon name (string), the component uses `<MazIcon name="..." />` component.
+When you use the properties `end-icon`, `start-icon` or `icon` with the icon name (string), the component uses `<MazIcon icon="..." />` component.
 
 Check out how [MazIcon](./maz-icon.md) works, see all available icons and download them to put them in your public folder.
 
 ```html
-<MazInput v-model="inputValue" label="label icons" left-icon="banknotes" right-icon="user" />
+<MazInput v-model="inputValue" label="label icons" start-icon="/banknotes.svg" end-icon="/user.svg" />
 ```
 
 :::
@@ -171,7 +171,7 @@ Check out how [MazIcon](./maz-icon.md) works, see all available icons and downlo
 
 ```html
 <MazInput v-model="inputValue" label="label icons">
-  <template #left-icon>
+  <template #start-icon>
     <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M2.25 18.75C7.71719 18.75 13.0136 19.4812 18.0468 20.8512C18.7738 21.0491 19.5 20.5086 19.5 19.7551V18.75M3.75 4.5V5.25C3.75 5.66421 3.41421 6 3 6H2.25M2.25 6V5.625C2.25 5.00368 2.75368 4.5 3.375 4.5H20.25M2.25 6V15M20.25 4.5V5.25C20.25 5.66421 20.5858 6 21 6H21.75M20.25 4.5H20.625C21.2463 4.5 21.75 5.00368 21.75 5.625V15.375C21.75 15.9963 21.2463 16.5 20.625 16.5H20.25M21.75 15H21C20.5858 15 20.25 15.3358 20.25 15.75V16.5M20.25 16.5H3.75M3.75 16.5H3.375C2.75368 16.5 2.25 15.9963 2.25 15.375V15M3.75 16.5V15.75C3.75 15.3358 3.41421 15 3 15H2.25M15 10.5C15 12.1569 13.6569 13.5 12 13.5C10.3431 13.5 9 12.1569 9 10.5C9 8.84315 10.3431 7.5 12 7.5C13.6569 7.5 15 8.84315 15 10.5ZM18 10.5H18.0075V10.5075H18V10.5ZM6 10.5H6.0075V10.5075H6V10.5Z"
@@ -182,7 +182,7 @@ Check out how [MazIcon](./maz-icon.md) works, see all available icons and downlo
       />
     </svg>
   </template>
-  <template #right-icon>
+  <template #end-icon>
     <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M15.75 6C15.75 8.07107 14.071 9.75 12 9.75C9.9289 9.75 8.24996 8.07107 8.24996 6C8.24996 3.92893 9.9289 2.25 12 2.25C14.071 2.25 15.75 3.92893 15.75 6Z"
@@ -223,8 +223,38 @@ const inputValue = ref('value')
   <MazInput
     v-model="inputValue"
     label="label icons"
-    :left-icon="MazBanknotes"
-    :right-icon="MazUser"
+    :start-icon="MazBanknotes"
+    :end-icon="MazUser"
+  />
+</template>
+```
+
+:::
+
+### Pass a full `MazIconProps` object
+
+`startIcon` and `endIcon` also accept a full `MazIconProps` object — pass the same shape `<MazIcon>` accepts to override the size, set a `<title>` for screen readers, attach `svgAttributes`, etc.
+
+::: details View code
+
+```vue
+<script lang="ts" setup>
+import MazInput from 'maz-ui/components/MazInput'
+import { MazBanknotes } from '@maz-ui/icons/raw/MazBanknotes'
+import { ref } from 'vue'
+
+const inputValue = ref('value')
+</script>
+
+<template>
+  <MazInput
+    v-model="inputValue"
+    label="amount"
+    :start-icon="{
+      icon: MazBanknotes,
+      size: 'lg',
+      title: 'Amount in USD',
+    }"
   />
 </template>
 ```
@@ -262,7 +292,7 @@ const inputValue = ref('value')
 <ComponentDemo>
   <MazInput v-model="inputValue" label="label debounce" :debounce="1000" autocomplete="off" />
 
-  <p class="maz-mt-2">
+  <p class="maz:mt-2">
     modelValue: {{ inputValue ?? 'null' }}
   </p>
 
@@ -280,7 +310,7 @@ const inputValue = ref('value')
 > Use the attribute `size` with a value in {{ sizes.join(', ') }}
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-2 maz-items-start">
+  <div class="maz:flex maz:flex-col maz:gap-2 maz:items-start">
     <MazInput
       v-for="size in sizes"
       :key="size"
@@ -320,7 +350,7 @@ Click on each input to show colors
 :::
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-2 maz-items-start">
+  <div class="maz:flex maz:flex-col maz:gap-2 maz:items-start">
     <MazInput
       v-for="name in colors"
       :key="name"
@@ -357,7 +387,7 @@ const colors = ['primary', 'secondary', 'info', 'success', 'warning', 'destructi
 Use the attribute `rounded-size` with a value in `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-2 maz-items-start">
+  <div class="maz:flex maz:flex-col maz:gap-2 maz:items-start">
     <MazInput rounded-size="none" placeholder="Rounded input" autocomplete="off" />
     <MazInput rounded-size="sm" placeholder="Rounded input" autocomplete="off" />
     <MazInput rounded-size="md" placeholder="Rounded input" autocomplete="off" />