@maz-ui/mcp 4.0.0-beta.26

package/docs/generated-docs/maz-table.doc.md

@@ -0,0 +1,66 @@
+## Props
+
+| Name                   | Description                                                                              | Type                                                | Required | Default                                  | Possible values              |
+| ---------------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------- | -------- | ---------------------------------------- | ---------------------------- |
+| **table-class**        | CSS class of the table element                                                           | `HTMLAttributes['class']`                           | No       | `undefined`                              | -                            |
+| **table-style**        | CSS style of the table element                                                           | `HTMLAttributes['style']`                           | No       | `undefined`                              | -                            |
+| **model-value**        | `v-model` <br/>List of selected rows                                                     | `(string \| boolean \| number)[]`                   | No       | `undefined`                              | -                            |
+| **size**               | Size of the table                                                                        | `MazSize`                                           | No       | `'md'`                                   | `xl, lg, md, sm, xs, mini`   |
+| **input-size**         | Size of the search inputs                                                                | `MazSize`                                           | No       | `undefined`                              | `xl, lg, md, sm, xs, mini`   |
+| **title**              | Title of the table                                                                       | `string`                                            | No       | `undefined`                              | -                            |
+| **headers**            | Headers of the table                                                                     | `MazTableHeader[]`                                  | No       | `undefined`                              | -                            |
+| **sortable**           | Enable sort feature on all columns                                                       | `boolean`                                           | No       | `false`                                  | -                            |
+| **headers-align**      | Align all headers                                                                        | `string`                                            | No       | `'left'`                                 | -                            |
+| **rows**               | Rows of the table                                                                        | `T[]`                                               | No       | `undefined`                              | -                            |
+| **hoverable**          | Add hover effect on rows                                                                 | `boolean`                                           | No       | `false`                                  | -                            |
+| **search**             | Enable search feature in table header                                                    | `boolean`                                           | No       | `false`                                  | -                            |
+| **hide-search-in-row** | Disable search in rows - useful to filter data yourself or make search request to server | `boolean`                                           | No       | `false`                                  | -                            |
+| **hide-search-by**     | Disable search by column (remove select input "search by")                               | `boolean`                                           | No       | `false`                                  | -                            |
+| **search-query**       | `v-model:search-query` <br/>Search query in input                                        | `string`                                            | No       | `undefined`                              | -                            |
+| **background-odd**     | Add background color to odd rows                                                         | `boolean`                                           | No       | `false`                                  | -                            |
+| **background-even**    | Add background color to even rows                                                        | `boolean`                                           | No       | `false`                                  | -                            |
+| **elevation**          | Add shadow to the table                                                                  | `boolean`                                           | No       | `false`                                  | -                            |
+| **divider**            | No divider between rows                                                                  | `boolean`                                           | No       | `false`                                  | -                            |
+| **caption**            | Caption of the table                                                                     | `string`                                            | No       | `undefined`                              | -                            |
+| **caption-side**       | Caption side                                                                             | `string`                                            | No       | `'bottom'`                               | `top, bottom`                |
+| **pagination**         | Add pagination in table footer                                                           | `boolean`                                           | No       | `false`                                  | -                            |
+| **page**               | `v-model:page` <br/>Current page of pagination                                           | `number`                                            | No       | `1`                                      | -                            |
+| **page-size**          | `v-model:page-size` <br/>Number of items per page                                        | `number`                                            | No       | `20`                                     | -                            |
+| **total-pages**        | Total number of pages                                                                    | `number`                                            | No       | `undefined`                              | -                            |
+| **paginate-rows**      | Don't paginate rows - useful to make pagination request with your server                 | `boolean`                                           | No       | `true`                                   | -                            |
+| **total-items**        | Total number of items                                                                    | `number`                                            | No       | `undefined`                              | -                            |
+| **loading**            | Loading state                                                                            | `boolean`                                           | No       | `false`                                  | -                            |
+| **selectable**         | Enable selection of rows                                                                 | `boolean`                                           | No       | `false`                                  | -                            |
+| **selected-key**       | Enable selection of rows - key of the selected row                                       | `string`                                            | No       | `undefined`                              | -                            |
+| **table-layout**       | Table layout                                                                             | `string`                                            | No       | `undefined`                              | `auto, fixed`                |
+| **color**              | Color of the component                                                                   | `MazColor`                                          | No       | `'primary'`                              | -                            |
+| **translations**       | Translations of the table                                                                | `DeepPartial<MazTranslationsNestedSchema['table']>` | No       | `Translations from @maz-ui/translations` | -                            |
+| **rounded-size**       | Size radius of the component's border                                                    | `string`                                            | No       | `'lg'`                                   | `none, sm, md, lg, xl, full` |
+| **scrollable**         | Enable scrollable on table                                                               | `boolean`                                           | No       | `false`                                  | -                            |
+
+## Events
+
+| Event name          | Properties                                                                                                                                                 | Description                                         |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
+| update:model-value  | **value** `(Row \| string \| number \| boolean)[]` - List of selected rows (if selectedKey is defined, it will be the value of the selectedKey of the row) | Emitted when a row is selected                      |
+| update:search-query | **searchQuery** `string` - Search query                                                                                                                    | Emitted when entering a value in the search input   |
+| update:page         | **page** `number` - Current page                                                                                                                           | Emitted when the current page of pagination changes |
+| update:page-size    | **pageSize** `number` - Current page size                                                                                                                  | Emitted when the page size of pagination changes    |
+
+## Slots
+
+| Name                         | Description                               | Bindings                                                                     |
+| ---------------------------- | ----------------------------------------- | ---------------------------------------------------------------------------- |
+| title                        | Replace the title of the table            |                                                                              |
+| caption                      | Add caption on top or bottom of the table |                                                                              |
+| thead                        | Content in thead element                  |                                                                              |
+| header                       | Replace column header                     | **header** `Object` - Header data<br/>**label** `String` - Header label      |
+| `header-label-${header.key}` | Replace column header label               | <br/>**header** `Object` - Header data<br/>**label** `String` - Header label |
+| actions-header               | Replace text of actions header            |                                                                              |
+| default                      |                                           |                                                                              |
+| select                       | Replace checkbox component                | **row** `Object` - Row data<br/>**selected** `Boolean` - If selected or not  |
+| cell                         | Replace all row cells                     | **row** `Object` - Row data<br/>**value** `any` - Cell value                 |
+| `cell-${key}`                | Replace row cells of column               | <br/>**row** `Object` - Row data<br/>**value** `any` - Cell value            |
+| actions                      | Add actions column                        | **row** `Object` - Row data                                                  |
+| no-results                   | Replace the no results element            |                                                                              |
+| no-results-text              | replace no results test only              |                                                                              |

package/docs/generated-docs/maz-tabs-bar.doc.md

@@ -0,0 +1,18 @@
+## Props
+
+| Name            | Description                                                                | Type               | Required | Default     |
+| --------------- | -------------------------------------------------------------------------- | ------------------ | -------- | ----------- |
+| **items**       | The items to display in the tabs bar                                       | `MazTabsBarItem[]` | Yes      | `undefined` |
+| **persistent**  | Will add a query param to the url to keep the selected tab on page refresh | `boolean`          | No       | `false`     |
+| **query-param** | The name of the query param to add to the url                              | `string`           | No       | `tab`       |
+| **block**       | Will make the tabs bar full width                                          | `boolean`          | No       | `false`     |
+| **elevation**   | Will remove the elevation                                                  | `boolean`          | No       | `false`     |
+| **auto-scroll** | Will add a scroll on the tabs bar to show selected element                 | `boolean`          | No       | `true`      |
+| **bordered**    | Will add a border to the tabs bar                                          | `boolean`          | No       | `true`      |
+
+## Slots
+
+| Name          | Description                                | Bindings                                                                                                                                             |
+| ------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| item          | Content of item to display in the tabs bar | **item** `MazTabsBarItem[]` - all data of the item<br/>**active** `boolean` - `true` if the tab is active<br/>**index** `number` - index of the item |
+| badge-content | Content in the badge                       | **content** `string \| number \| boolean` - content of the badge provided in item                                                                    |

package/docs/generated-docs/maz-tabs-content-item.doc.md

@@ -0,0 +1,11 @@
+## Props
+
+| Name    | Description | Type     | Required |
+| ------- | ----------- | -------- | -------- |
+| **tab** |             | `number` | Yes      |
+
+## Slots
+
+| Name    | Description | Bindings |
+| ------- | ----------- | -------- |
+| default |             |          |

package/docs/generated-docs/maz-tabs-content.doc.md

@@ -0,0 +1,5 @@
+## Slots
+
+| Name    | Description | Bindings |
+| ------- | ----------- | -------- |
+| default |             |          |

package/docs/generated-docs/maz-tabs.doc.md

@@ -0,0 +1,17 @@
+## Props
+
+| Name            | Description                 | Type     | Required |
+| --------------- | --------------------------- | -------- | -------- |
+| **model-value** | The the selected tab number | `number` | No       |
+
+## Events
+
+| Event name         | Properties                            | Description                          |
+| ------------------ | ------------------------------------- | ------------------------------------ |
+| update:model-value | **newValue** `number` - new value set | Emitted when the selected tab change |
+
+## Slots
+
+| Name    | Description | Bindings |
+| ------- | ----------- | -------- |
+| default |             |          |

package/docs/generated-docs/maz-textarea.doc.md

@@ -0,0 +1,41 @@
+## Props
+
+| Name               | Description                                  | Type                                                                                  | Required | Default         | Possible values                                                                       |
+| ------------------ | -------------------------------------------- | ------------------------------------------------------------------------------------- | -------- | --------------- | ------------------------------------------------------------------------------------- |
+| **style**          | Style attribut of the component root element | `Native type`                                                                         | No       | `undefined`     | -                                                                                     |
+| **class**          | Class attribut of the component root element | `Native type`                                                                         | No       | `undefined`     | -                                                                                     |
+| **model-value**    | `v-model` <br/>                              | `T`                                                                                   | No       | `undefined`     | -                                                                                     |
+| **id**             | The id of the textarea                       | `string`                                                                              | No       | `undefined`     | -                                                                                     |
+| **name**           | The name of the textarea                     | `string`                                                                              | No       | `'MazTextarea'` | -                                                                                     |
+| **label**          | The label of the textarea                    | `string`                                                                              | No       | `undefined`     | -                                                                                     |
+| **placeholder**    | The placeholder of the textarea              | `string`                                                                              | No       | `undefined`     | -                                                                                     |
+| **required**       | If the textarea is required                  | `boolean`                                                                             | No       | `false`         | -                                                                                     |
+| **disabled**       | If the textarea is disabled                  | `boolean`                                                                             | No       | `false`         | -                                                                                     |
+| **readonly**       | If the textarea is readonly                  | `boolean`                                                                             | No       | `false`         | -                                                                                     |
+| **error**          | If the textarea has an error                 | `boolean`                                                                             | No       | `false`         | -                                                                                     |
+| **success**        | If the textarea has a success                | `boolean`                                                                             | No       | `false`         | -                                                                                     |
+| **warning**        | If the textarea has a warning                | `boolean`                                                                             | No       | `false`         | -                                                                                     |
+| **hint**           | The hint of the textarea                     | `string`                                                                              | No       | `undefined`     | -                                                                                     |
+| **color**          | The color of the textarea                    | `MazColor`                                                                            | No       | `'primary'`     | -                                                                                     |
+| **rounded-size**   | Size radius of the component's border        | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"`                                    | No       | `undefined`     | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`                                    |
+| **padding**        | If the textarea has a padding                | `boolean`                                                                             | No       | `true`          | -                                                                                     |
+| **transparent**    | If the textarea has a transparent background | `boolean`                                                                             | No       | `false`         | -                                                                                     |
+| **border**         | If the textarea has no border                | `boolean`                                                                             | No       | `true`          | -                                                                                     |
+| **append-justify** | The alignment of the append slot             | `"start" \| "end" \| "center" \| "space-between" \| "space-around" \| "space-evenly"` | No       | `'end'`         | `'start' \| 'end' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly'` |
+
+## Events
+
+| Event name         | Properties                                                  | Description                                   |
+| ------------------ | ----------------------------------------------------------- | --------------------------------------------- |
+| update:model-value | **value** `string \| undefined` - The value of the textarea | Emitted when the value of the textarea change |
+| input              | **value** `string \| undefined` - The value of the textarea | Emitted when the value of the textarea change |
+| focus              | **value** `Event` - The event                               | Emitted when the textarea is focused          |
+| blur               | **value** `Event` - The event                               | Emitted when the textarea is blurred          |
+| change             | **value** `Event` - The event                               | Emitted when the textarea value change        |
+
+## Slots
+
+| Name   | Description        | Bindings |
+| ------ | ------------------ | -------- |
+| Label  | Replace the label  |          |
+| Append | Replace the append |          |

package/docs/src/components/index.md

@@ -0,0 +1,8 @@
+---
+title: Components
+description: todo
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}

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

@@ -0,0 +1,80 @@
+---
+title: MazAccordion
+description: MazAccordion is a standalone component that allows you to create an accordion with a title and content.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Basic usage
+
+<MazAccordion class="maz-w-full">
+  <template #title-1>
+    Title 1
+  </template>
+  <template #content-1>
+    Content 1
+  </template>
+  <template #title-2>
+    Title 2
+  </template>
+  <template #content-2>
+    Content 2
+  </template>
+  <template #title-3>
+    Title 3
+  </template>
+  <template #content-3>
+    Content 3
+  </template>
+  <template #title-4>
+    Title 4
+  </template>
+  <template #content-4>
+    Content 4
+  </template>
+</MazAccordion>
+
+```vue
+<script lang="ts" setup>
+import { MazAccordion } from 'maz-ui/components'
+</script>
+
+<template>
+  <MazAccordion>
+    <template #title-1>
+      Title 1
+    </template>
+    <template #content-1>
+      Content 1
+    </template>
+
+    <template #title-2>
+      Title 2
+    </template>
+    <template #content-2>
+      Content 2
+    </template>
+
+    <template #title-3>
+      Title 3
+    </template>
+    <template #content-3>
+      Content 3
+    </template>
+
+    <template #title-4>
+      Title 4
+    </template>
+    <template #content-4>
+      Content 4
+    </template>
+    <MazAccordion />
+  </mazaccordion>
+</template>
+```
+
+<!--@include: ./../../.vitepress/generated-docs/maz-accordion.doc.md-->

package/docs/src/components/maz-animated-counter.md

@@ -0,0 +1,124 @@
+---
+title: MazAnimatedCounter
+description: MazAnimatedCounter is a standalone component that allows you to animate a number from 0 to a specific value. Fully animated with CSS.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Basic usage
+
+<ComponentDemo expanded>
+  <MazAnimatedCounter :count="count" />
+
+<template #code>
+
+```vue
+<script lang="ts" setup>
+import { MazAnimatedCounter } from 'maz-ui/components'
+
+const count = ref(Math.floor(Math.random() * 99999))
+
+onMounted(() => {
+  setInterval(() => {
+    count.value = Math.floor(Math.random() * 99999)
+  }, 3000)
+})
+</script>
+
+<template>
+  <MazAnimatedCounter :count="4000" />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue'
+  const count = ref(Math.floor(Math.random() * 99999))
+
+  onMounted(() => {
+    setInterval(() => {
+      count.value = Math.floor(Math.random() * 99999)
+    }, 3000)
+  })
+</script>
+
+## duration
+
+You can set the duration of the animation with the `duration` prop. The default value is `1000` ms.
+
+<ComponentDemo>
+  <MazAnimatedCounter :count="4000" :duration="5000" />
+
+<template #code>
+
+```vue
+<MazAnimatedCounter :count="4000" :duration="5000" />
+```
+
+  </template>
+</ComponentDemo>
+
+## prefix and suffix
+
+You can add a prefix and a suffix to the number with props or slots.
+
+Be careful, you can't use both at the same time.
+
+<ComponentDemo>
+  <p class="maz-font-semibold">
+    Prefixed
+  </p>
+
+  <br />
+
+  <MazAnimatedCounter :count="20" prefix="$" />
+  <br />
+  <MazAnimatedCounter :count="20">
+    <template #prefix>$</template>
+  </MazAnimatedCounter>
+
+  <br />
+  <br />
+
+  <p class="maz-font-semibold">
+    Suffixed
+  </p>
+
+  <br />
+  <MazAnimatedCounter :count="100" suffix="%" />
+  <br />
+
+  <MazAnimatedCounter :count="100">
+    <template #suffix>%</template>
+  </MazAnimatedCounter>
+
+<template #code>
+
+```html
+<p class="maz-font-semibold">Prefixed</p>
+
+<MazAnimatedCounter :count="20" prefix="$" />
+
+<MazAnimatedCounter :count="20">
+  <template #prefix>$</template>
+</MazAnimatedCounter>
+
+<p class="maz-font-semibold">Suffixed</p>
+
+<MazAnimatedCounter :count="100" suffix="%" />
+
+<MazAnimatedCounter :count="100">
+  <template #suffix>%</template>
+</MazAnimatedCounter>
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-animated-counter.doc.md-->

package/docs/src/components/maz-animated-element.md

@@ -0,0 +1,36 @@
+---
+title: MazAnimatedElement
+description: MazAnimatedElement is a standalone component that animates its content with a sliding blur effect when it enters the viewport. It supports different animation directions (up, down, left, right) and allows customizing the animation delay and duration.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Basic usage
+
+<ComponentDemo expanded>
+  <MazAnimatedElement direction="up" :delay="1000" :duration="2000">
+    <MazAvatar src="https://github.com/LouisMazel.png" size="lg" />
+  </MazAnimatedElement>
+
+<template #code>
+
+```vue
+<script lang="ts" setup>
+import { MazAnimatedElement } from 'maz-ui/components'
+</script>
+
+<template>
+  <MazAnimatedElement direction="up" :delay="1000" :duration="2000">
+    <MazAvatar src="https://github.com/LouisMazel.png" size="lg" />
+  </MazAnimatedElement>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-animated-element.doc.md-->

package/docs/src/components/maz-animated-text.md

@@ -0,0 +1,36 @@
+---
+title: MazAnimatedText
+description: MazAnimatedText is a standalone component that animates text with a sliding blur effect. It can highlight the last word with a gradient background and supports different animation directions (up, down, left, right).
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Basic usage
+
+::: tip
+This component is SSR friendly. It will display the brut text on the server side with the chosen tag, and the animated text on the client side.
+:::
+
+<ComponentDemo expanded>
+  <MazAnimatedText tag="h1" text="Hello" last-word="world" :delay="1000" :duration="2000" direction="up" :column-gap="0.5" :row-gap="0.5" />
+
+<template #code>
+
+```vue
+<script lang="ts" setup>
+import { MazAnimatedText } from 'maz-ui/components'
+</script>
+
+<template>
+  <MazAnimatedText tag="h1" text="Hello" last-word="world" :delay="1000" :duration="2000" direction="up" :column-gap="0.5" :row-gap="0.5" />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-animated-text.doc.md-->

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

@@ -0,0 +1,179 @@
+---
+title: MazAvatar
+description: MazAvatar is a standalone component that displays an image or an icon with a caption. It can be used to display a user's profile picture, a placeholder image, or an icon.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+::: tip
+This component uses [vLazyImg](./../directives/lazy-img.md) directive
+:::
+
+## Basic usage
+
+<MazAvatar :lazy="false" src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80" />
+
+```vue
+<script lang="ts" setup>
+import { MazAvatar } from 'maz-ui/components'
+</script>
+
+<template>
+  <MazAvatar src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80" />
+</template>
+```
+
+## Options
+
+::: tip
+See all the options props [here](#props-event-slots)
+:::
+
+<div class="flex space-between gap-05 items-center flex-wrap">
+  <MazAvatar
+    caption="Louis Mazel"
+    size="1.5rem"
+  />
+  <MazAvatar
+    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
+    size="2rem"
+    href="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
+    target="_blank"
+    rounded-size="none"
+    clickable
+  >
+    <template #icon>
+      <MazIcon name="eye" style="color: white;" size="2rem" />
+    </template>
+  </MazAvatar>
+
+<MazAvatar
+src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=200"
+size="2.5rem"
+clickable
+rounded-size="xl"
+button-color="destructive"
+@click="clicked"
+/>
+
+<MazAvatar
+  src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=600"
+  size="3rem"
+  bordered
+  noElevation
+/>
+
+</div>
+
+```vue
+<script lang="ts" setup>
+import { MazAvatar } from 'maz-ui/components'
+function clicked() { console.log('clicked') }
+</script>
+
+<template>
+  <MazAvatar
+    caption="Louis Mazel"
+    size="1.5rem"
+  />
+  <MazAvatar
+    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
+    size="2rem"
+    href="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
+    target="_blank"
+    rounded-size="none"
+    clickable
+    no-size
+  >
+    <template #icon>
+      <MazIcon name="eye" />
+    </template>
+  </MazAvatar>
+  <MazAvatar
+    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=200"
+    size="2.5rem"
+    clickable
+    rounded-size="xl"
+    @click="clicked"
+  />
+  <MazAvatar
+    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=600"
+    size="3rem"
+    bordered
+  />
+</template>
+```
+
+## On Error
+
+<MazAvatar @error="error" />
+
+```html
+<MazAvatar @error="error" />
+```
+
+## Fallback image loaded on error
+
+<MazAvatar
+  class="vp-raw"
+  src="https://broken-link-image-src.com"
+  fallback-src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=100"
+/>
+
+```html
+<MazAvatar
+  src="https://broken-link-image-src.com"
+  fallback-src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=100"
+/>
+```
+
+## Loading
+
+The props `loading` has 3 possible values: `intersecting`, `lazy`, or `eager`.
+
+By default, the value is `intersecting` which means the image will be loaded when it's intersecting with the `IntersectionObserver` browser API. This mode uses the [`MazLazyImg`](./maz-lazy-img.md) component with [`vLazyImg`](./../directives/lazy-img.md) directive to handle the lazy loading.
+
+Native modes:
+
+- `lazy`: The image will be loaded only when it's in the viewport
+- `eager`: The image will be loaded immediately
+
+These modes are native use an `HTMLImageElement` with the `loading` attribute. (see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)). **Useful for SSR (Server Side Rendering) or when you want to load the image immediately.**
+
+<div class="flex gap-05 items-center flex-wrap">
+  <MazAvatar
+    class="vp-raw"
+    loading="intersecting"
+    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123"
+  />
+  <MazAvatar
+    class="vp-raw"
+    loading="lazy"
+    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123"
+  />
+  <MazAvatar
+    class="vp-raw"
+    loading="eager"
+    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123"
+  />
+</div>
+
+```html
+<MazAvatar
+  loading="intersecting"
+  src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123"
+/>
+<MazAvatar loading="lazy" src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123" />
+<MazAvatar loading="eager" src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123" />
+```
+
+<script lang="ts" setup>
+  const clicked = () => { console.log('clicked') }
+  const error = (el) => { console.error('error', el) }
+</script>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-avatar.doc.md-->