@maz-ui/mcp 5.0.0-beta.5 → 5.0.0-beta.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (160) hide show
  1. package/README.md +1 -1
  2. package/dist/mcp.d.mts +22 -9
  3. package/dist/mcp.d.ts +22 -9
  4. package/dist/mcp.mjs +160 -83
  5. package/docs/generated-docs/maz-avatar.doc.md +30 -30
  6. package/docs/generated-docs/maz-bottom-sheet.doc.md +16 -13
  7. package/docs/generated-docs/maz-btn.doc.md +21 -19
  8. package/docs/generated-docs/maz-checkbox.doc.md +16 -17
  9. package/docs/generated-docs/maz-circular-progress-bar.doc.md +1 -1
  10. package/docs/generated-docs/maz-code-highlight.doc.md +11 -0
  11. package/docs/generated-docs/maz-container.doc.md +1 -0
  12. package/docs/generated-docs/maz-date-picker.doc.md +41 -41
  13. package/docs/generated-docs/maz-drawer.doc.md +7 -8
  14. package/docs/generated-docs/maz-dropdown.doc.md +3 -0
  15. package/docs/generated-docs/maz-expand-animation.doc.md +4 -4
  16. package/docs/generated-docs/maz-fullscreen-loader.doc.md +5 -5
  17. package/docs/generated-docs/maz-gallery.doc.md +15 -15
  18. package/docs/generated-docs/maz-input-code.doc.md +16 -16
  19. package/docs/generated-docs/maz-input-price.doc.md +14 -14
  20. package/docs/generated-docs/maz-input-tags.doc.md +16 -16
  21. package/docs/generated-docs/maz-input.doc.md +33 -33
  22. package/docs/generated-docs/maz-lazy-img.doc.md +14 -14
  23. package/docs/generated-docs/maz-loading-bar.doc.md +4 -4
  24. package/docs/generated-docs/maz-markdown-editor.doc.md +65 -0
  25. package/docs/generated-docs/maz-popover.doc.md +1 -1
  26. package/docs/generated-docs/maz-pull-to-refresh.doc.md +39 -20
  27. package/docs/generated-docs/maz-radio-buttons.doc.md +17 -17
  28. package/docs/generated-docs/maz-radio.doc.md +16 -16
  29. package/docs/generated-docs/maz-reading-progress-bar.doc.md +4 -4
  30. package/docs/generated-docs/maz-sidebar-content.doc.md +5 -0
  31. package/docs/generated-docs/maz-sidebar-footer.doc.md +5 -0
  32. package/docs/generated-docs/maz-sidebar-group.doc.md +11 -0
  33. package/docs/generated-docs/maz-sidebar-header.doc.md +5 -0
  34. package/docs/generated-docs/maz-sidebar-menu-button.doc.md +27 -0
  35. package/docs/generated-docs/maz-sidebar-menu-item.doc.md +5 -0
  36. package/docs/generated-docs/maz-sidebar-menu-sub.doc.md +16 -0
  37. package/docs/generated-docs/maz-sidebar-menu.doc.md +5 -0
  38. package/docs/generated-docs/maz-sidebar-separator.doc.md +0 -0
  39. package/docs/generated-docs/maz-sidebar-trigger.doc.md +5 -0
  40. package/docs/generated-docs/maz-sidebar.doc.md +36 -0
  41. package/docs/generated-docs/maz-slider.doc.md +1 -1
  42. package/docs/generated-docs/maz-spinner.doc.md +4 -4
  43. package/docs/generated-docs/maz-switch.doc.md +14 -14
  44. package/docs/generated-docs/maz-table-virtualizer.doc.md +20 -0
  45. package/docs/generated-docs/maz-table.doc.md +43 -37
  46. package/docs/generated-docs/maz-tabs-bar.doc.md +20 -9
  47. package/docs/generated-docs/maz-tabs.doc.md +6 -3
  48. package/docs/generated-docs/maz-textarea.doc.md +27 -25
  49. package/docs/generated-docs/maz-ticker.doc.md +1 -1
  50. package/docs/generated-docs/maz-timeline.doc.md +4 -4
  51. package/docs/generated-docs/maz-window-mockup.doc.md +23 -0
  52. package/docs/src/blog/v4.md +1 -1
  53. package/docs/src/blog/v5.md +5 -7
  54. package/docs/src/components/maz-avatar.md +52 -4
  55. package/docs/src/components/maz-bottom-sheet.md +300 -169
  56. package/docs/src/components/maz-btn.md +1 -1
  57. package/docs/src/components/maz-checklist.md +10 -10
  58. package/docs/src/components/maz-code-highlight.md +233 -0
  59. package/docs/src/components/maz-date-picker.md +55 -1
  60. package/docs/src/components/maz-dialog.md +46 -0
  61. package/docs/src/components/maz-dropdown.md +32 -16
  62. package/docs/src/components/maz-icon.md +16 -5
  63. package/docs/src/components/maz-lazy-img.md +64 -0
  64. package/docs/src/components/maz-markdown-editor.md +369 -0
  65. package/docs/src/components/maz-pull-to-refresh.md +176 -17
  66. package/docs/src/components/maz-sidebar.md +719 -0
  67. package/docs/src/components/maz-table.md +156 -1
  68. package/docs/src/components/maz-tabs.md +110 -3
  69. package/docs/src/components/maz-textarea.md +58 -0
  70. package/docs/src/components/maz-timeline.md +60 -0
  71. package/docs/src/components/maz-window-mockup.md +249 -0
  72. package/docs/src/composables/use-drag.md +239 -0
  73. package/docs/src/composables/use-form-validator.md +297 -16
  74. package/docs/src/composables/use-pull-to-refresh.md +79 -0
  75. package/docs/src/composables/use-swipe.md +26 -11
  76. package/docs/src/directives/click-outside.md +8 -15
  77. package/docs/src/directives/fullscreen-img.md +1 -1
  78. package/docs/src/directives/lazy-img.md +44 -11
  79. package/docs/src/directives/tooltip.md +24 -1
  80. package/docs/src/directives/zoom-img.md +1 -1
  81. package/docs/src/ecosystem/eslint-config.md +95 -1
  82. package/docs/src/{guide/icons.md → ecosystem/icons/index.md} +1 -1
  83. package/docs/src/ecosystem/node/exec-promise.md +87 -0
  84. package/docs/src/ecosystem/node/index.md +53 -0
  85. package/docs/src/ecosystem/node/logger.md +146 -0
  86. package/docs/src/ecosystem/node/print-banner.md +93 -0
  87. package/docs/src/{guide → ecosystem}/nuxt.md +82 -47
  88. package/docs/src/{guide → ecosystem}/themes.md +152 -71
  89. package/docs/src/{guide → ecosystem}/translations.md +1 -1
  90. package/docs/src/ecosystem/utils/camel-case.md +31 -0
  91. package/docs/src/{helpers → ecosystem/utils}/capitalize.md +2 -3
  92. package/docs/src/ecosystem/utils/check-availability.md +79 -0
  93. package/docs/src/ecosystem/utils/cookie.md +80 -0
  94. package/docs/src/ecosystem/utils/debounce-callback.md +38 -0
  95. package/docs/src/ecosystem/utils/debounce-id.md +69 -0
  96. package/docs/src/ecosystem/utils/debounce.md +65 -0
  97. package/docs/src/ecosystem/utils/fetch-locale-ip.md +33 -0
  98. package/docs/src/ecosystem/utils/format-json.md +33 -0
  99. package/docs/src/ecosystem/utils/format-phone-number.md +37 -0
  100. package/docs/src/ecosystem/utils/get-browser-locale.md +29 -0
  101. package/docs/src/ecosystem/utils/get-error-message.md +39 -0
  102. package/docs/src/ecosystem/utils/idle-timeout.md +90 -0
  103. package/docs/src/ecosystem/utils/index.md +60 -0
  104. package/docs/src/ecosystem/utils/is-client.md +32 -0
  105. package/docs/src/ecosystem/utils/is-equal.md +38 -0
  106. package/docs/src/ecosystem/utils/is-server.md +31 -0
  107. package/docs/src/ecosystem/utils/is-standalone-mode.md +43 -0
  108. package/docs/src/ecosystem/utils/kebab-case.md +36 -0
  109. package/docs/src/ecosystem/utils/normalize-string.md +77 -0
  110. package/docs/src/ecosystem/utils/pascal-case.md +35 -0
  111. package/docs/src/ecosystem/utils/script-loader.md +77 -0
  112. package/docs/src/ecosystem/utils/sleep.md +59 -0
  113. package/docs/src/ecosystem/utils/snake-case.md +36 -0
  114. package/docs/src/ecosystem/utils/swipe-handler.md +91 -0
  115. package/docs/src/ecosystem/utils/textarea-autogrow.md +41 -0
  116. package/docs/src/ecosystem/utils/throttle-id.md +48 -0
  117. package/docs/src/ecosystem/utils/throttle.md +57 -0
  118. package/docs/src/ecosystem/utils/truthy-filter.md +31 -0
  119. package/docs/src/ecosystem/utils/types/deep-key-of.md +48 -0
  120. package/docs/src/ecosystem/utils/types/deep-partial.md +42 -0
  121. package/docs/src/ecosystem/utils/types/deep-required.md +39 -0
  122. package/docs/src/ecosystem/utils/types/flatten-object-keys.md +44 -0
  123. package/docs/src/ecosystem/utils/types/generic-instance-type.md +42 -0
  124. package/docs/src/ecosystem/utils/types/infer-maybe-ref.md +35 -0
  125. package/docs/src/ecosystem/utils/upper-first.md +32 -0
  126. package/docs/src/ecosystem/utils/user-visibility.md +69 -0
  127. package/docs/src/guide/getting-started.md +15 -13
  128. package/docs/src/guide/global-defaults.md +101 -0
  129. package/docs/src/guide/maz-ui-provider.md +6 -3
  130. package/docs/src/guide/migration-v4.md +13 -9
  131. package/docs/src/guide/migration-v5.md +211 -15
  132. package/docs/src/guide/resolvers.md +8 -8
  133. package/docs/src/guide/tailwind.md +4 -0
  134. package/docs/src/guide/vue.md +4 -4
  135. package/docs/src/index.md +13 -13
  136. package/docs/src/plugins/aos.md +1 -1
  137. package/package.json +11 -10
  138. package/docs/src/helpers/camel-case.md +0 -14
  139. package/docs/src/helpers/check-availability.md +0 -14
  140. package/docs/src/helpers/debounce-callback.md +0 -14
  141. package/docs/src/helpers/debounce-id.md +0 -14
  142. package/docs/src/helpers/debounce.md +0 -14
  143. package/docs/src/helpers/is-client.md +0 -14
  144. package/docs/src/helpers/is-equal.md +0 -14
  145. package/docs/src/helpers/is-standalone-mode.md +0 -14
  146. package/docs/src/helpers/kebab-case.md +0 -14
  147. package/docs/src/helpers/normalize-string.md +0 -14
  148. package/docs/src/helpers/pascal-case.md +0 -14
  149. package/docs/src/helpers/script-loader.md +0 -14
  150. package/docs/src/helpers/sleep.md +0 -14
  151. package/docs/src/helpers/snake-case.md +0 -14
  152. package/docs/src/helpers/throttle-id.md +0 -14
  153. package/docs/src/helpers/throttle.md +0 -14
  154. /package/docs/src/{guide → ecosystem/icons}/icon-set.md +0 -0
  155. /package/docs/src/{guide → ecosystem}/mcp.md +0 -0
  156. /package/docs/src/{helpers → ecosystem/utils}/country-code-to-unicode-flag.md +0 -0
  157. /package/docs/src/{helpers → ecosystem/utils}/currency.md +0 -0
  158. /package/docs/src/{helpers → ecosystem/utils}/date.md +0 -0
  159. /package/docs/src/{helpers → ecosystem/utils}/get-country-flag-url.md +0 -0
  160. /package/docs/src/{helpers → ecosystem/utils}/number.md +0 -0
@@ -1,30 +1,32 @@
1
1
  ## Props
2
2
 
3
- | Name | Description | Type | Required | Default | Possible values |
4
- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -------- | --------------- | ------------------------------------------------------------------------------------- |
5
- | **style** | Style attribut of the component root element | `Native type` | No | `undefined` | - |
6
- | **class** | Class attribut of the component root element | `Native type` | No | `undefined` | - |
7
- | **model-value** | `v-model` <br/> | `T` | No | `undefined` | - |
8
- | **id** | The id of the textarea | `string` | No | `undefined` | - |
9
- | **name** | The name of the textarea | `string` | No | `'MazTextarea'` | - |
10
- | **label** | The label of the textarea | `string` | No | `undefined` | - |
11
- | **placeholder** | The placeholder of the textarea | `string` | No | `undefined` | - |
12
- | **required** | If the textarea is required | `boolean` | No | `false` | - |
13
- | **disabled** | If the textarea is disabled | `boolean` | No | `false` | - |
14
- | **readonly** | If the textarea is readonly | `boolean` | No | `false` | - |
15
- | **error** | If the textarea has an error | `boolean` | No | `false` | - |
16
- | **success** | If the textarea has a success | `boolean` | No | `false` | - |
17
- | **warning** | If the textarea has a warning | `boolean` | No | `false` | - |
18
- | **hint** | The hint of the textarea | `string` | No | `undefined` | - |
19
- | **color** | The color of the textarea | `MazColor` | No | `'primary'` | - |
20
- | **rounded-size** | Size radius of the component's border | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"` | No | `'md'` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` |
21
- | **padding** | If the textarea has a padding | `boolean` | No | `true` | - |
22
- | **transparent** | If the textarea has a transparent background | `boolean` | No | `false` | - |
23
- | **border** | If the textarea has no border | `boolean` | No | `true` | - |
24
- | **autogrow** | If the textarea should autogrow based on its content | `boolean` | No | `true` | - |
25
- | **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'` |
26
- | **top-label** | Static label displayed above the textarea. Unlike the floating label, this remains fixed | `string` | No | `undefined` | - |
27
- | **assistive-text** | Helper text displayed below the input to provide additional context or validation feedback<br/>**Example:** `"Must contain at least 8 characters"` | `string` | No | `undefined` | - |
3
+ | Name | Description | Type | Required | Default | Possible values |
4
+ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | -------- | ----------- | ------------------------------------------------------------------------------------- |
5
+ | **style** | Style attribut of the component root element | `Native type` | No | `undefined` | - |
6
+ | **class** | Class attribut of the component root element | `Native type` | No | `undefined` | - |
7
+ | **model-value** | `v-model` <br/> | `T` | No | `undefined` | - |
8
+ | **id** | The id of the textarea | `string` | No | `undefined` | - |
9
+ | **name** | The name of the textarea | `string` | No | `undefined` | - |
10
+ | **label** | The label of the textarea | `string` | No | `undefined` | - |
11
+ | **placeholder** | The placeholder of the textarea | `string` | No | `undefined` | - |
12
+ | **required** | If the textarea is required | `boolean` | No | `undefined` | - |
13
+ | **disabled** | If the textarea is disabled | `boolean` | No | `undefined` | - |
14
+ | **readonly** | If the textarea is readonly | `boolean` | No | `undefined` | - |
15
+ | **error** | If the textarea has an error | `boolean` | No | `undefined` | - |
16
+ | **success** | If the textarea has a success | `boolean` | No | `undefined` | - |
17
+ | **warning** | If the textarea has a warning | `boolean` | No | `undefined` | - |
18
+ | **hint** | The hint of the textarea | `string` | No | `undefined` | - |
19
+ | **color** | The color of the textarea | `MazColor` | No | `undefined` | - |
20
+ | **rounded-size** | Size radius of the component's border | `MazRoundedSize` | No | `md` | - |
21
+ | **size** | Controls the padding (height) and text size of the textarea, mirroring MazInput sizes. Combined with `minRows`, e.g. `size="md" :min-rows="1"` matches a regular input height. | `MazSize` | No | `md` | `mini, xs, sm, md, lg, xl` |
22
+ | **padding** | If the textarea has a padding | `boolean` | No | `true` | - |
23
+ | **transparent** | If the textarea has a transparent background | `boolean` | No | `false` | - |
24
+ | **border** | If the textarea has no border | `boolean` | No | `false` | - |
25
+ | **autogrow** | If the textarea should autogrow based on its content | `boolean` | No | `true` | - |
26
+ | **min-rows** | Minimum number of rows displayed by the textarea (initial/minimum height). With autogrow enabled, the textarea still grows beyond this with its content. | `number` | No | `3` | - |
27
+ | **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'` |
28
+ | **top-label** | Static label displayed above the textarea. Unlike the floating label, this remains fixed | `string` | No | `undefined` | - |
29
+ | **assistive-text** | Helper text displayed below the input to provide additional context or validation feedback<br/>**Example:** `"Must contain at least 8 characters"` | `string` | No | `undefined` | - |
28
30
 
29
31
  ## Events
30
32
 
@@ -11,7 +11,7 @@
11
11
  | **pause-on-focus** | Pause animation when a child element receives focus | `boolean` | No | `false` | - |
12
12
  | **paused** | Programmatic pause control - takes precedence over pauseOnHover and pauseOnFocus | `boolean` | No | `false` | - |
13
13
  | **overlay** | Show gradient overlays on edges to fade content in/out | `boolean` | No | `true` | - |
14
- | **overlay-size** | Size of the gradient overlay zones (CSS value) | `string` | No | `33%` | - |
14
+ | **overlay-size** | Size of the gradient overlay zones (CSS value) | `MazSizeUnit` | No | `33%` | - |
15
15
  | **animation-timing-function** | CSS animation timing function | `string` | No | `linear` | - |
16
16
 
17
17
  ## Slots
@@ -16,10 +16,10 @@
16
16
 
17
17
  ## Events
18
18
 
19
- | Event name | Properties | Description |
20
- | ----------------- | ------------------------------------------------- | ---------------------------------------- |
21
- | update:modelValue | **value** `mixed` - The new active step index | Emitted when the active step changes |
22
- | click-step | **payload** `mixed` - The step data and its index | Emitted when a clickable step is clicked |
19
+ | Event name | Properties | Description |
20
+ | ------------------ | ------------------------------------------------- | ---------------------------------------- |
21
+ | update:model-value | **value** `mixed` - The new active step index | Emitted when the active step changes |
22
+ | click-step | **payload** `mixed` - The step data and its index | Emitted when a clickable step is clicked |
23
23
 
24
24
  ## Slots
25
25
 
@@ -0,0 +1,23 @@
1
+ ## Props
2
+
3
+ | Name | Description | Type | Required | Default | Possible values |
4
+ | ----------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | -------- | ----------- | ----------------------------------- |
5
+ | **id** | Stable id used to scope the empty-state SVG pattern. Auto-generated if not provided. | `string` | No | `undefined` | - |
6
+ | **variant** | Window style variant | `MazWindowMockupVariant` | No | `browser` | `browser' \| 'terminal' \| 'editor` |
7
+ | **url** | URL to display in the browser address bar (browser variant only) | `string` | No | `localhost` | - |
8
+ | **filename** | Filename to display in the editor tab (editor variant only) | `string` | No | `index.vue` | - |
9
+ | **title** | Title to display in the terminal title bar (terminal variant only) | `string` | No | `zsh` | - |
10
+ | **min-height** | Minimum height of the content area as a CSS value (e.g. '200px') | `string` | No | `undefined` | - |
11
+ | **code** | Source code to display using MazCodeHighlight. Takes priority over the default slot. | `string` | No | `undefined` | - |
12
+ | **language** | Language identifier for syntax highlighting (e.g. 'vue', 'ts', 'bash') | `string` | No | `undefined` | - |
13
+ | **label** | Label displayed inside the empty-state placeholder when no code and no slot content are provided. | `string` | No | `undefined` | - |
14
+ | **hide-prompt** | Whether to hide the terminal prompt prefix (no-op on non-terminal variants) | `boolean` | No | `false` | - |
15
+ | **prompt** | Prefix to display before the code in the terminal (terminal variant only) | `string` | No | `$` | - |
16
+ | **hide-url-copy** | Hide the copy-to-clipboard button next to the URL bar (browser variant only). | `boolean` | No | `false` | - |
17
+ | **translations** | Custom translations for the component. Override either key independently. | `Partial<MazUiTranslationsNestedSchema['windowMockup']>` | No | `undefined` | - |
18
+
19
+ ## Slots
20
+
21
+ | Name | Description | Bindings |
22
+ | ------- | ---------------------------------------------------------------------- | -------- |
23
+ | default | Free content (image, interface, etc.) shown when code prop is not set. | |
@@ -236,7 +236,7 @@ export default defineNuxtConfig({
236
236
  To help with migration from v3 to v4:
237
237
 
238
238
  - **[Complete Migration Guide](../guide/migration-v4.md)** - Step-by-step migration instructions
239
- - **[MCP Integration](../guide/mcp.md)** - Connect AI agents for migration assistance
239
+ - **[MCP Integration](../ecosystem/mcp.md)** - Connect AI agents for migration assistance
240
240
  - **[Interactive Examples](../index.md)** - Live demonstrations of new features
241
241
  - **[Community Support](https://github.com/LouisMazel/maz-ui/discussions)** - Get help from the community
242
242
 
@@ -90,22 +90,20 @@ npx @maz-ui/upgrade ./ --dry-run
90
90
  npx @maz-ui/upgrade ./
91
91
  ```
92
92
 
93
- It rewrites the mechanical part: CSS subpath imports, `left-icon`/`right-icon` → `start-icon`/`end-icon` (props, slots, classes), `footer-align` / `variant` direction values, `color="background"` → `color="surface"`, `rounded-size="base"` → `rounded-size="md"`, `--maz-background` / `--maz-border` CSS vars, `hsl(var(--maz-X))` collapse, Nuxt `injectMainCss` → `injectCss`, theme `strategy: 'hybrid'` → `'runtime'`, dropped theme options, and `colors.{light,dark}.background` / `.border` keys in custom presets. It also bumps every `maz-ui` / `@maz-ui/*` entry in your `package.json` files to `^5.0.0` and runs the right `pnpm`/`yarn`/`bun`/`npm install` for you.
94
-
95
- It respects your `.gitignore`, walks `.vue`/`.css`/`.ts`/`.tsx`/`.cts`/`.mts`/`.js`/`.jsx`/`.cjs`/`.mjs` and `package.json`, and skips the usual build dirs.
93
+ It handles the mechanical part of the migration (CSS subpath imports, prop renames, CSS var renames, Nuxt config keys, custom preset color keys, and `package.json` version bumps)
96
94
 
97
95
  ### `@maz-ui/mcp` — for everything else
98
96
 
99
97
  A few changes need a human eye: `MazIcon` API (needs your original asset paths), `MazBadge` numeric size mapping, `foundation.radius` → `scales.rounded.md` reshape, and `MazChart` `update-mode` default.
100
98
 
101
- The [`@maz-ui/mcp`](/guide/mcp) server exposes the migration guide and every other Maz-UI doc to your AI assistant. Connect it once, then walk the guide section by section against your codebase — there's a [step-by-step flow](/guide/migration-v5#migrate-with-the-maz-ui-mcp-server) ready to copy-paste.
99
+ The [`@maz-ui/mcp`](/ecosystem/mcp) server exposes the migration guide and every other Maz-UI doc to your AI assistant. Connect it once, then walk the guide section by section against your codebase — there's a [step-by-step flow](/guide/migration-v5#migrate-with-the-maz-ui-mcp-server) ready to copy-paste.
102
100
 
103
101
  ```bash
104
102
  # Claude Code
105
103
  claude mcp add maz-ui npx @maz-ui/mcp --scope project
106
104
  ```
107
105
 
108
- Cursor, Windsurf, VS Code Copilot, Cline and Claude Desktop are all in the [MCP guide](/guide/mcp).
106
+ Cursor, Windsurf, VS Code Copilot, Cline and Claude Desktop are all in the [MCP guide](/ecosystem/mcp).
109
107
 
110
108
  ### The full guide
111
109
 
@@ -157,11 +155,11 @@ export default defineNuxtConfig({
157
155
  ## Essential Links
158
156
 
159
157
  - **[v5 Migration Guide](/guide/migration-v5)** — every breaking change, the upgrade CLI, the MCP flow
160
- - **[Theming](/guide/themes)** — preset authoring, `scales` and `components` blocks, runtime switching
158
+ - **[Theming](/ecosystem/themes)** — preset authoring, `scales` and `components` blocks, runtime switching
161
159
  - **[Browser Support](/guide/browser-support)** — minimum versions and the features they enable
162
160
  - **[Tailwind integration](/guide/tailwind)** — for consumers who ship their own Tailwind setup
163
161
  - **[`@maz-ui/upgrade` README](https://github.com/LouisMazel/maz-ui/tree/master/packages/upgrade)** — full transform list and CLI reference
164
- - **[Model Context Protocol (MCP)](/guide/mcp)** — connect AI assistants to the Maz-UI docs
162
+ - **[Model Context Protocol (MCP)](/ecosystem/mcp)** — connect AI assistants to the Maz-UI docs
165
163
  - **[GitHub Repository](https://github.com/LouisMazel/maz-ui)** — source code & issues
166
164
  - **[Changelog](https://github.com/LouisMazel/maz-ui/blob/master/CHANGELOG.md)** — detailed release notes
167
165
 
@@ -15,7 +15,7 @@ This component uses [vLazyImg](./../directives/lazy-img.md) directive
15
15
 
16
16
  ## Basic usage
17
17
 
18
- <MazAvatar :lazy="false" src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80" />
18
+ <MazAvatar src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80" />
19
19
 
20
20
  ```vue
21
21
  <script lang="ts" setup>
@@ -87,7 +87,6 @@ function clicked() { console.log('clicked') }
87
87
  target="_blank"
88
88
  rounded-size="none"
89
89
  clickable
90
- no-size
91
90
  >
92
91
  <template #icon>
93
92
  <MazIcon icon="/eye.svg" />
@@ -108,12 +107,43 @@ function clicked() { console.log('clicked') }
108
107
  </template>
109
108
  ```
110
109
 
110
+ ## Initials from caption
111
+
112
+ When no `src` is provided, `MazAvatar` displays initials generated from the `caption`. The `letter-count` prop (default `2`) controls how many letters are displayed:
113
+
114
+ - **Single word**: the first `letter-count` characters of the word are used.
115
+ - **Multiple words**: the first letter of each of the first `letter-count` words is used.
116
+
117
+ Initials are always uppercased.
118
+
119
+ <div class="flex gap-05 items-center flex-wrap">
120
+ <MazAvatar caption="admin" size="3rem" />
121
+ <MazAvatar caption="admin" :letter-count="3" size="3rem" />
122
+ <MazAvatar caption="Louis Mazel" size="3rem" />
123
+ <MazAvatar caption="Jean Claude Dus" :letter-count="3" size="3rem" />
124
+ </div>
125
+
126
+ ```vue
127
+ <template>
128
+ <!-- "AD" -->
129
+ <MazAvatar caption="admin" />
130
+ <!-- "ADM" -->
131
+ <MazAvatar caption="admin" :letter-count="3" />
132
+ <!-- "LM" -->
133
+ <MazAvatar caption="Louis Mazel" />
134
+ <!-- "JCD" -->
135
+ <MazAvatar caption="Jean Claude Dus" :letter-count="3" />
136
+ </template>
137
+ ```
138
+
111
139
  ## On Error
112
140
 
113
- <MazAvatar @error="error" />
141
+ When no `src` (and no `caption`) is provided, or when the image fails to load, `MazAvatar` displays the default `no-image` placeholder.
142
+
143
+ <MazAvatar @error="error" src="https://broken-link-image-src.example" />
114
144
 
115
145
  ```html
116
- <MazAvatar @error="error" />
146
+ <MazAvatar @error="error" src="https://broken-link-image-src.example" />
117
147
  ```
118
148
 
119
149
  ## Fallback image loaded on error
@@ -171,6 +201,24 @@ These modes are native use an `HTMLImageElement` with the `loading` attribute. (
171
201
  <MazAvatar loading="eager" src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123" />
172
202
  ```
173
203
 
204
+ ## Image height full
205
+
206
+ By default the image fills the avatar **width** (`width: 100%`). Enable `image-height-full` to make the image fill the **height** instead: it keeps its aspect ratio, fills 100% of the height and overflows/crops horizontally. This is ideal for wide images or SVGs (like flags) that must cover the whole avatar.
207
+
208
+ <div class="flex gap-05 items-center flex-wrap">
209
+ <MazAvatar class="vp-raw" size="4rem" src="https://placedog.net/300/200?id=7" />
210
+ <MazAvatar class="vp-raw" size="4rem" image-height-full src="https://placedog.net/300/200?id=7" />
211
+ </div>
212
+
213
+ ```vue
214
+ <template>
215
+ <!-- default: width 100% -->
216
+ <MazAvatar src="https://placedog.net/300/200" />
217
+ <!-- height 100%, cropped on the sides -->
218
+ <MazAvatar image-height-full src="https://placedog.net/300/200" />
219
+ </template>
220
+ ```
221
+
174
222
  <script lang="ts" setup>
175
223
  const clicked = () => { console.log('clicked') }
176
224
  const error = (el) => { console.error('error', el) }