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

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

@@ -34,7 +34,7 @@ import MazLink from 'maz-ui/components/MazLink'
 ## Color
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-2 maz-justify-center">
+  <div class="maz:flex maz:flex-col maz:gap-2 maz:justify-center">
     <MazLink color="primary"> View product detail (primary) </MazLink>
     <MazLink color="secondary"> View product detail (secondary) </MazLink>
     <MazLink color="info"> View product detail (info) </MazLink>
@@ -43,7 +43,7 @@ import MazLink from 'maz-ui/components/MazLink'
     <MazLink color="destructive"> View product detail (destructive) </MazLink>
     <MazLink color="accent"> View product detail (accent) </MazLink>
     <MazLink color="contrast"> View product detail (contrast) </MazLink>
-    <MazLink color="background"> View product detail (background) </MazLink>
+    <MazLink color="surface"> View product detail (surface) </MazLink>
     <MazLink color="muted"> View product detail (muted) </MazLink>
   </div>
 
@@ -58,7 +58,7 @@ import MazLink from 'maz-ui/components/MazLink'
 <MazLink color="destructive"> View product detail (destructive) </MazLink>
 <MazLink color="accent"> View product detail (accent) </MazLink>
 <MazLink color="contrast"> View product detail (contrast) </MazLink>
-<MazLink color="background"> View product detail (background) </MazLink>
+<MazLink color="surface"> View product detail (surface) </MazLink>
 <MazLink color="muted"> View product detail (muted) </MazLink>
 ```
 
@@ -83,26 +83,27 @@ When you use the `to` prop, the component will be a `router-link` and will use t
 
 ## Icons
 
-You can add an icon on the left and right to the link text with the `left-icon` and `right-icon` props.
+You can add an icon on the left and right to the link text with the `start-icon` and `end-icon` props.
 
 For more information about the icons, please check the [MazBtn](./maz-btn.md#icons) page.
 
 <ComponentDemo>
-  <MazLink left-icon="home" :right-icon="MazCheck"> View product detail </MazLink>
+  <MazLink start-icon="/home.svg" :end-icon="MazCheck"> View product detail </MazLink>
 
 <template #code>
 
 ```vue
 <script lang="ts" setup>
-import { MazCheck, MazHome } from '@maz-ui/icons'
+import { MazCheck } from '@maz-ui/icons/raw/MazCheck'
+import { MazHome } from '@maz-ui/icons/raw/MazHome'
 </script>
 
 <template>
-  <MazLink left-icon="home" :right-icon="MazHome">
+  <MazLink start-icon="/home.svg" :end-icon="MazHome">
     View product detail
   </MazLink>
 
-  <MazLink left-icon="home" :right-icon="MazHome">
+  <MazLink start-icon="/home.svg" :end-icon="MazHome">
     View product detail
   </MazLink>
 </template>
@@ -111,6 +112,22 @@ import { MazCheck, MazHome } from '@maz-ui/icons'
   </template>
 </ComponentDemo>
 
+`startIcon` and `endIcon` also accept a full `MazIconProps` object — pass the same shape `<MazIcon>` accepts to override the icon size, add a `<title>` for screen readers, etc.
+
+```vue
+<MazLink
+  href="/external"
+  :end-icon="{
+    icon: MazArrowRight,
+    size: 'lg',
+    title: 'Go to external page',
+    flipIconForRtl: true,
+  }"
+>
+  Read more
+</MazLink>
+```
+
 ## External icon (true by default)
 
 When you use the `autoExternal` prop, the component will have an external icon if the link has the target `_blank`.
@@ -132,7 +149,7 @@ When you use the `autoExternal` prop, the component will have an external icon i
 If no `to` or `href` is provided, the component will be a `button` by default. You can force the component to be a `button`, `a`, `router-link` or `nuxt-link` with the `as` prop.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-2 maz-justify-center">
+  <div class="maz:flex maz:flex-col maz:gap-2 maz:justify-center">
     <MazLink as="button"> View product detail </MazLink>
     <MazLink as="button" disabled> View product detail </MazLink>
   </div>
@@ -154,7 +171,8 @@ If no `to` or `href` is provided, the component will be a `button` by default. Y
 </ComponentDemo>
 
 <script setup lang="ts">
-  import { MazCheck, MazHome } from '@maz-ui/icons'
+  import { MazCheck } from '@maz-ui/icons/raw/MazCheck'
+  import { MazHome } from '@maz-ui/icons/raw/MazHome'
 </script>
 
 <!--@include: ./../../.vitepress/generated-docs/maz-link.doc.md-->

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

@@ -38,7 +38,7 @@ const props: MazPaginationProps = {
 
 ## Sizes
 
-<div class="maz-flex maz-flex-col maz-gap-4">
+<div class="maz:flex maz:flex-col maz:gap-4">
   <MazPagination v-bind="props" v-model="currentPage" size="xs" />
   <MazPagination v-bind="props" v-model="currentPage" size="sm" />
   <MazPagination v-bind="props" v-model="currentPage" size="md" />
@@ -56,7 +56,7 @@ const props: MazPaginationProps = {
 
 ## Colors
 
-<div class="maz-flex maz-flex-col maz-gap-4">
+<div class="maz:flex maz:flex-col maz:gap-4">
   <MazPagination :total-pages="10" v-model="currentPage" active-color="primary" />
   <MazPagination :total-pages="10" v-model="currentPage" active-color="secondary" />
   <MazPagination :total-pages="10" v-model="currentPage" active-color="success" />