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

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

@@ -16,11 +16,11 @@ This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md)
 ## Basic usage
 
 <ComponentDemo expanded>
-  <div class="maz-flex maz-flex-col maz-gap-2 maz-flex-center">
+  <div class="maz:flex maz:flex-col maz:gap-2 maz:flex-center">
     <MazBtn @click="isOpenedTop = !isOpenedTop">
       Open top drawer
     </MazBtn>
-    <div class="maz-flex maz-flex-wrap maz-gap-2">
+    <div class="maz:flex maz:flex-wrap maz:gap-2">
       <MazBtn @click="isOpenedLeft = !isOpenedLeft">
         Open left drawer
       </MazBtn>
@@ -46,7 +46,7 @@ This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md)
   <template #default="{ close }">
     <div style="padding: 16px">
       <p>Content</p>
-      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+      <div class="maz:flex maz:flex-wrap maz:gap-2 maz:mt-4">
         <MazBtn color="destructive" @click="close"> Close </MazBtn>
       </div>
     </div>
@@ -58,31 +58,31 @@ This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md)
   <template #default="{ close }">
     <div style="padding: 16px">
       <p>Content</p>
-      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+      <div class="maz:flex maz:flex-wrap maz:gap-2 maz:mt-4">
         <MazBtn color="destructive" @click="close"> Close </MazBtn>
       </div>
     </div>
   </template>
 </MazDrawer>
 
-<MazDrawer variant="left" v-model="isOpenedLeft">
+<MazDrawer variant="start" v-model="isOpenedLeft">
   <template #title> Drawer left </template>
   <template #default="{ close }">
     <div style="padding: 16px">
       <p>Content</p>
-      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+      <div class="maz:flex maz:flex-wrap maz:gap-2 maz:mt-4">
         <MazBtn color="destructive" @click="close"> Close </MazBtn>
       </div>
     </div>
   </template>
 </MazDrawer>
 
-<MazDrawer variant="right" v-model="isOpenedRight">
+<MazDrawer variant="end" v-model="isOpenedRight">
   <template #title> Drawer right </template>
   <template #default="{ close }">
     <div style="padding: 16px">
       <p>Content</p>
-      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+      <div class="maz:flex maz:flex-wrap maz:gap-2 maz:mt-4">
         <MazBtn color="destructive" @click="close"> Close </MazBtn>
       </div>
     </div>
@@ -102,7 +102,7 @@ This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md)
       <p>
         Content
       </p>
-      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+      <div class="maz:flex maz:flex-wrap maz:gap-2 maz:mt-4">
         <MazBtn color="destructive" @click="close">
           Close
         </MazBtn>
@@ -120,7 +120,7 @@ This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md)
       <p>
         Content
       </p>
-      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+      <div class="maz:flex maz:flex-wrap maz:gap-2 maz:mt-4">
         <MazBtn color="destructive" @click="close">
           Close
         </MazBtn>
@@ -129,7 +129,7 @@ This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md)
   </template>
 </MazDrawer>
 
-<MazDrawer variant="left" v-model="isOpenedLeft">
+<MazDrawer variant="start" v-model="isOpenedLeft">
   <template #title>
     Drawer left
   </template>
@@ -138,7 +138,7 @@ This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md)
       <p>
         Content
       </p>
-      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+      <div class="maz:flex maz:flex-wrap maz:gap-2 maz:mt-4">
         <MazBtn color="destructive" @click="close">
           Close
         </MazBtn>
@@ -147,7 +147,7 @@ This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md)
   </template>
 </MazDrawer>
 
-<MazDrawer variant="right" v-model="isOpenedRight">
+<MazDrawer variant="end" v-model="isOpenedRight">
   <template #title>
     Drawer right
   </template>
@@ -156,7 +156,7 @@ This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md)
       <p>
         Content
       </p>
-      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+      <div class="maz:flex maz:flex-wrap maz:gap-2 maz:mt-4">
         <MazBtn color="destructive" @click="close">
           Close
         </MazBtn>

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

@@ -194,6 +194,21 @@ You can provide an icon to replace the default chevron icon and disable the anim
 </template>
 ```
 
+`dropdownIcon` also accepts a full `MazIconProps` object — pass the same shape `<MazIcon>` accepts when you need to set a `<title>` for screen readers, override the size, or attach `svgAttributes`.
+
+```vue
+<MazDropdown
+  :items="items"
+  :dropdown-icon="{
+    icon: MazChevronUpDown,
+    size: 'lg',
+    title: 'Open menu',
+  }"
+>
+  Custom icon
+</MazDropdown>
+```
+
 ## Custom dropdown main button without chevron icon
 
 ::: tip
@@ -205,7 +220,7 @@ You can provide an icon to replace the default chevron icon and disable the anim
   fab
   pastel
   :chevron="false"
-  icon="bars-3"
+  icon="/bars-3.svg"
   size="xl"
   :items="[
     { label: 'Action', onClick: () => toast.success('CLICKED') },
@@ -221,7 +236,7 @@ You can provide an icon to replace the default chevron icon and disable the anim
   fab
   pastel
   :chevron="false"
-  icon="bars-3"
+  icon="/bars-3.svg"
   size="xl"
   :items="[
     { label: 'Action', onClick: () => toast.success('CLICKED') },
@@ -242,7 +257,7 @@ You can provide a template to replace the default dropdown panel
   Customized dropdown
 
   <template #dropdown>
-    <div class="maz-grid maz-grid-cols-3 maz-gap-2">
+    <div class="maz:grid maz:grid-cols-3 maz:gap-2">
       <MazBtn color="transparent"> Item </MazBtn>
       <MazBtn color="transparent"> Item </MazBtn>
       <MazBtn color="transparent"> Item </MazBtn>
@@ -266,7 +281,7 @@ You can provide a template to replace the default dropdown panel
   Customized dropdown panel
 
   <template #dropdown>
-    <div class="maz-grid maz-grid-cols-3 maz-gap-2">
+    <div class="maz:grid maz:grid-cols-3 maz:gap-2">
       <MazBtn color="transparent"> Item </MazBtn>
       <MazBtn color="transparent"> Item </MazBtn>
       <MazBtn color="transparent"> Item </MazBtn>
@@ -302,7 +317,7 @@ You can provide a template to replace menuitem labels to add more elements in ea
   </template>
 
   <template #menuitem-label="{ item }">
-    <div class="maz-flex maz-items-center maz-gap-3">
+    <div class="maz:flex maz:items-center maz:gap-3">
       <MazAvatar :src="item.additionnalData" size="0.8rem" />
       <span>
         {{ item.label }}
@@ -326,7 +341,7 @@ You can provide a template to replace menuitem labels to add more elements in ea
   </template>
 
   <template #menuitem-label="{ item }">
-    <div class="maz-flex maz-items-center maz-gap-2">
+    <div class="maz:flex maz:items-center maz:gap-2">
       <MazAvatar :src="item.additionnalData" />
       <span>
         {{ item.label }}
@@ -346,7 +361,7 @@ You can provide an HTML element or a component to replace the default button
 Add `tabindex="-1"` attribute to your element to avoid a double focus with Tab key
 :::
 
-<div class="maz-flex maz-gap-4">
+<div class="maz:flex maz:gap-4">
   <MazDropdown
     :items="[
       {
@@ -399,7 +414,7 @@ Add `tabindex="-1"` attribute to your element to avoid a double focus with Tab k
     ]"
   >
     <template #element="{ isOpen }">
-      <button class="maz-border maz-border-solid maz-border-divider-400 maz-p-2 hover:maz-bg-surface-600 dark:maz-bg-surface-400" tabindex="-1">
+      <button class="maz:border maz:border-solid maz:border-divider-400 maz:p-2 maz:hover:bg-surface-600 maz:dark:bg-surface-400" tabindex="-1">
         HTMLButtonElement: isOpen {{ isOpen }}
       </button>
     </template>
@@ -461,7 +476,7 @@ Add `tabindex="-1"` attribute to your element to avoid a double focus with Tab k
   ]"
 >
   <template #element="{ isOpen }">
-    <button class="maz-border maz-border-solid maz-border-divider-400 maz-p-2 hover:maz-bg-surface-400" tabindex="-1">
+    <button class="maz:border maz:border-solid maz:border-divider-400 maz:p-2 maz:hover:bg-surface-400" tabindex="-1">
       HTMLButtonElement: isOpen {{ isOpen }}
     </button>
   </template>
@@ -519,7 +534,7 @@ isOpen: {{ isOpen }}
 
 ## Position
 
-<div class="maz-flex maz-gap-3 maz-flex-wrap">
+<div class="maz:flex maz:gap-3 maz:flex-wrap">
   <MazDropdown
     color="contrast"
     :items="[
@@ -637,8 +652,8 @@ type MazDropdownMenuItem = {
 
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue'
-  import { useToast } from 'maz-ui/src/composables/useToast'
-  import { MazChevronUpDown } from '@maz-ui/icons/MazChevronUpDown'
+  import { useToast } from 'maz-ui/composables/useToast'
+  import { MazChevronUpDown } from '@maz-ui/icons/raw/MazChevronUpDown'
 
   const toast = useToast()
 

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

@@ -92,7 +92,7 @@ function handleError({ code, files }) {
   />
 
   <br />
-  <div class="maz-text-center">
+  <div class="maz:text-center">
     <MazBtn @click="dropzone?.uploadFiles()" :loading="dropzone?.isUploading">
       Upload Files
     </MazBtn>
@@ -312,8 +312,8 @@ Customize the upload area using slots:
 <ComponentDemo>
   <MazDropzone v-model="files" @error="onError">
     <template #no-files-area="{ handleFileInputClick }">
-      <div class="maz-flex maz-flex-col maz-items-center maz-gap-4">
-        <MazIcon name="arrow-up-on-square" class="maz-text-4xl" />
+      <div class="maz:flex maz:flex-col maz:items-center maz:gap-4">
+        <MazIcon icon="/arrow-up-on-square.svg" class="maz:text-4xl" />
         <p>Drop your files here or click to browse</p>
         <MazBtn @click="handleFileInputClick">
           Select Files
@@ -327,8 +327,8 @@ Customize the upload area using slots:
 ```html
 <MazDropzone v-model="files" @error="onError">
   <template #no-files-area="{ handleFileInputClick }">
-    <div class="maz-flex maz-flex-col maz-items-center maz-gap-4">
-      <MazIcon name="arrow-up-on-square" class="maz-text-4xl" />
+    <div class="maz:flex maz:flex-col maz:items-center maz:gap-4">
+      <MazIcon icon="/arrow-up-on-square.svg" class="maz:text-4xl" />
       <p>Drop your files here or click to browse</p>
       <MazBtn @click="handleFileInputClick"> Select Files </MazBtn>
     </div>
@@ -455,7 +455,7 @@ Customize the upload request using `uploadUrl`, `requestOptions` and `transformB
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useToast } from 'maz-ui/src/composables/useToast'
+import { useToast } from 'maz-ui/composables/useToast'
 
 const files = ref<File[]>([])
 const dropzone = ref<InstanceType<typeof MazDropzone>>()

package/docs/src/components/maz-expand-animation.md

@@ -17,7 +17,7 @@ description: MazExpandAnimation is a standalone component that allows you to ani
   <br />
 
   <MazExpandAnimation v-model="visible">
-    <div class="maz-pt-4">
+    <div class="maz:pt-4">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </div>
@@ -59,7 +59,7 @@ const visible = ref(false)
   <br />
 
   <MazExpandAnimation v-model="visible2" duration="1000ms" timing-function="linear">
-    <div class="maz-pt-4">
+    <div class="maz:pt-4">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </div>

package/docs/src/components/maz-fullscreen-loader.md

@@ -12,10 +12,10 @@ description: MazFullscreenLoader is a standalone component
 ## Basic usage
 
 <MazFullscreenLoader v-if="showLoader" @click="showLoader = false">
-  <p class="maz-text-lg maz-text-surface">
+  <p class="maz:text-lg maz:text-surface">
     Loading...
   </p>
-  <p class="maz-text-lg maz-text-surface">
+  <p class="maz:text-lg maz:text-surface">
     (click to hide loader)
   </p>
 </MazFullscreenLoader>

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

@@ -42,7 +42,7 @@ const images: MazGalleryImage[] = [
 
 <MazGallery
   :images="images2"
-  class="maz-h-48 mob-l:maz-h-60 tab-s:maz-h-80"
+  class="maz:h-48 maz:mob-l:h-60 maz:tab-s:h-80"
   :height="false"
 />
 

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

@@ -1,6 +1,6 @@
 ---
 title: MazIcon
-description: MazIcon is a standalone component to load your svg files
+description: A flexible icon component that accepts Vue components, raw SVG strings, URLs and data URIs.
 ---
 
 # {{ $frontmatter.title }}
@@ -8,27 +8,35 @@ description: MazIcon is a standalone component to load your svg files
 {{ $frontmatter.description }}
 
 ::: tip
-  Download icons pack [here](#get-icons-pack)
+Download the bundled [icons pack](#all-bundled-icons) or use [`@maz-ui/icons`](../guide/icons.md) for the full set.
 :::
 
-## How to use?
+## How it works
 
-**2 ways to use this component:**
+Pass an `icon` prop in any of the supported formats — the component detects what it received and renders accordingly:
 
-- Use a component (like `MazStar` exported from `@maz-ui/icons`) with `icon` prop
-- Use a name (like `academic-cap`) with `name` prop or `src` prop (e.g: `src="/path/icon.svg"`)
+| Input | Example | Use it for |
+| --- | --- | --- |
+| **Vue component** | `import { MazStar } from '@maz-ui/icons/static/MazStar'` | Always-rendered icons that you also want available as a standalone component (`<MazStar />`). |
+| **Raw SVG string** | `import { MazStar } from '@maz-ui/icons/raw/MazStar'` | Always-rendered icons — the lightest format, no Vue component overhead. |
+| **URL or `data:` URI** | `'/icons/star.svg'`, `'data:image/svg+xml,…'` | SVGs hosted in your `public/` folder or external CDN. Fetched and cached on demand. |
 
-## Example
-
-- Basically, this component will render your SVG from your project.
-- The component will fetch the SVG from the `public` folder and parse it to render it.
-- Place your SVG files in a public folder (default `/icons`, use `path` prop to change it)
+```vue
+<script setup>
+import MazIcon from 'maz-ui/components/MazIcon'
+import { MazStar } from '@maz-ui/icons/raw/MazStar'
+</script>
 
-## Icon Component
+<template>
+  <MazIcon :icon="MazStar" />
+  <MazIcon icon="/icons/star.svg" />
+  <MazIcon icon="<svg viewBox='0 0 24 24'><path d='M0 0h24v24H0z'/></svg>" />
+</template>
+```
 
-`icon` is the icon component to render - e.g: `import { MazStar } from '@maz-ui/icons/MazStar'`
+## Examples
 
-Can be custom component from your stack - e.g: `import ComponentIcon from './path_to_your/ComponentIcon.vue'`
+### Raw SVG (recommended)
 
 <ComponentDemo>
 
@@ -38,7 +46,7 @@ Can be custom component from your stack - e.g: `import ComponentIcon from './pat
 
 ```vue
 <script lang="ts" setup>
-  import { MazStar } from '@maz-ui/icons/MazStar'
+  import { MazStar } from '@maz-ui/icons/raw/MazStar'
 </script>
 
 <template>
@@ -49,49 +57,58 @@ Can be custom component from your stack - e.g: `import ComponentIcon from './pat
   </template>
 </ComponentDemo>
 
-## Path + Name
+### URL (fetched at runtime)
 
-- `name` is the SVG file name without extension
-- `path` should be the folder where your svg files are stored in your public assets. Can be gloablly provided by using `mazIconPath` - [follow this documentation](#options)
+Place your SVG file in your `public/` folder, then point `icon` to its path. The component caches the fetched payload and shares it across instances.
 
 <ComponentDemo>
 
-  <MazIcon name="academic-cap" path="/icons" />
+  <MazIcon icon="/academic-cap.svg" />
 
   <template #code>
 
-```html
-<MazIcon name="academic-cap" path="/icons" />
+```vue
+<MazIcon icon="/academic-cap.svg" />
 ```
 
   </template>
 </ComponentDemo>
 
-## Src
-
-Provide the full src path to the icon
+### Vue component
 
 <ComponentDemo>
 
-  <MazIcon src="/icons/academic-cap.svg" />
+  <MazIcon :icon="icons.MazStar" />
 
   <template #code>
 
-```html
-<MazIcon src="/icons/academic-cap.svg" />
+```vue
+<script lang="ts" setup>
+  import { MazStar } from '@maz-ui/icons/static/MazStar'
+</script>
+
+<template>
+  <MazIcon :icon="MazStar" />
+</template>
 ```
 
   </template>
 </ComponentDemo>
 
-## Sizing
+## Fallback
 
-### Predefined sizes
+When the URL fetch fails, an `error` event is emitted and `MazIcon` switches to the `fallback` prop (same shape as `icon`). If neither resolves, the bundled `MazQuestionMarkCircle` is rendered.
 
-Can be `xs`, `sm`, `md`, `lg`, `xl`
+```vue
+<MazIcon icon="/missing.svg" :fallback="MazStar" @error="onIconError" />
+```
+
+## Sizing
+
+### Predefined sizes (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`)
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-2 maz-flex-wrap maz-items-center">
+  <div class="maz:flex maz:gap-2 maz:flex-wrap maz:items-center">
     <MazIcon v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']" :key="size" :size="size" :icon="icons.MazStar" />
   </div>
 
@@ -99,7 +116,7 @@ Can be `xs`, `sm`, `md`, `lg`, `xl`
 
 ```vue
 <script lang="ts" setup>
-  import { MazStar } from '@maz-ui/icons/MazStar'
+  import { MazStar } from '@maz-ui/icons/raw/MazStar'
 </script>
 
 <template>
@@ -110,14 +127,12 @@ Can be `xs`, `sm`, `md`, `lg`, `xl`
   </template>
 </ComponentDemo>
 
-### Custom size
-
-Can be any valid CSS size - e.g: `1em`, `1rem`, `10px`, `100%`, `10vw`, `10vh`
+### Custom size (any CSS length)
 
-Allowed units: `px`, `em`, `rem`, `%`, `vw`, `vh`, `cm`, `mm`, `in`, `pt`, `pc`, `ex`
+Allowed units: `px`, `em`, `rem`, `%`, `vw`, `vh`, `cm`, `mm`, `in`, `pt`, `pc`, `ex`.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-2 maz-flex-wrap maz-items-center">
+  <div class="maz:flex maz:gap-2 maz:flex-wrap maz:items-center">
     <MazIcon size="0.5em" :icon="icons.MazStar" />
     <MazIcon size="1em" :icon="icons.MazStar" />
     <MazIcon size="24px" :icon="icons.MazStar" />
@@ -128,49 +143,87 @@ Allowed units: `px`, `em`, `rem`, `%`, `vw`, `vh`, `cm`, `mm`, `in`, `pt`, `pc`,
   <template #code>
 
 ```vue
-<script lang="ts" setup>
-  import { MazStar } from '@maz-ui/icons/MazStar'
-</script>
-
-<template>
-  <MazIcon size="0.5em" :icon="icons.MazStar" />
-  <MazIcon size="1em" :icon="icons.MazStar" />
-  <MazIcon size="24px" :icon="icons.MazStar" />
-  <MazIcon size="4rem" :icon="icons.MazStar" />
-  <MazIcon size="8rem" :icon="icons.MazStar" />
-</template>
+<MazIcon size="0.5em" :icon="MazStar" />
+<MazIcon size="1em" :icon="MazStar" />
+<MazIcon size="24px" :icon="MazStar" />
+<MazIcon size="4rem" :icon="MazStar" />
+<MazIcon size="8rem" :icon="MazStar" />
 ```
 
   </template>
 </ComponentDemo>
 
-## Options
+## Accessibility
+
+By default `MazIcon` is rendered as decorative (`aria-hidden="true"`, no `role`). Provide an `aria-label` (either on `<MazIcon>` or in `svgAttributes`) to expose it to assistive tech — `role="img"` is set automatically and `aria-hidden` is dropped.
+
+```vue
+<MazIcon :icon="MazStar" aria-label="Favorite" />
+```
+
+## RTL flipping
+
+Set `flip-icon-for-rtl` on directional icons (chevrons, arrows). The icon is mirrored horizontally when the document direction is `rtl` and rendered unchanged otherwise.
+
+```vue
+<MazIcon :icon="MazChevronRight" flip-icon-for-rtl />
+```
+
+## Custom SVG attributes
+
+Inject extra attributes onto the rendered `<svg>` (or onto the inlined raw SVG) via `svg-attributes`:
 
-### Set MazIcon path globally
+```vue
+<MazIcon :icon="MazStar" :svg-attributes="{ 'data-testid': 'star', fill: 'currentColor' }" />
+```
 
-```typescript
+## SSR — base URL for relative URLs
+
+When you render `MazIcon icon="/icons/star.svg"` on the server, `fetch('/icons/star.svg')` cannot resolve without a host. Provide a base URL via Vue's `provide` to fix this:
+
+```ts
 import { createApp } from 'vue'
+
 const app = createApp(App)
+app.provide('mazIconPath', 'https://your-app.com')
+```
+
+In Nuxt, set `mazUi.general.defaultMazIconPath` in `nuxt.config` and `@maz-ui/nuxt` wires the provide for you.
+
+## Forwarding `MazIconProps` from a consumer
 
-app.provide('mazIconPath', '/your/custom/path')
+Most icon-aware components in maz-ui (`MazBtn`, `MazInput`, `MazLink`, `MazContainer`, `MazDropdown`) accept a flexible icon prop on their `startIcon`, `endIcon`, `icon` or `dropdownIcon` slots. You can pass either a bare value (the same shape as `MazIcon`'s `icon` prop) or a full `MazIconProps` object when you need fine-grained control:
+
+```html
+<!-- bare value — common case -->
+<MazBtn :start-icon="MazStar" />
+<MazBtn start-icon="/icons/star.svg" />
+
+<!-- full props object — override size, set a title, flip for RTL, etc. -->
+<MazBtn
+  :start-icon="{
+    icon: MazStar,
+    size: 'xl',
+    title: 'Favorite',
+    flipIconForRtl: true,
+  }"
+/>
 ```
 
-## All icons
+The consuming component still derives sensible defaults (e.g. icon size from the button's `size` prop), and the values you set in the props object override those defaults.
 
-### Get Icons Pack
+## All bundled icons
 
-This pack is the Heroicons icons set with some others from maz-ui
+This pack is the Heroicons set plus a few additions specific to maz-ui.
 
-<MazBtn download href="/icons/_icons.zip" right-icon="arrow-down-tray">
+<MazBtn download href="/icons/_icons.zip" end-icon="/arrow-down-tray.svg">
   Download pack
 </MazBtn>
 
-Source: [Hericons](https://heroicons.com/)
-
-You can also find icons in the [icon set page](./../guide/icon-set.md)
+Source: [Heroicons](https://heroicons.com/) — see also the [icon set page](./../guide/icon-set.md).
 
 <div class="flex items-start flex-wrap gap-05">
-  <div v-for="({ component, name }, i) in iconsList" :key="i" class="flex flex-col flex-center maz-p-2 maz-rounded maz-border">
+  <div v-for="({ component, name }, i) in iconsList" :key="i" class="flex flex-col flex-center maz:p-2 maz:rounded-md maz:border">
     <MazIcon :icon="component" size="lg" />
     <span style="font-size: 11px;">
       {{ name }}

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

@@ -29,7 +29,7 @@ const code = ref()
 
 ## Size
 
-<div class="maz-flex maz-flex-col maz-gap-2">
+<div class="maz:flex maz:flex-col maz:gap-2">
   <MazInputCode v-model="code" size="mini" />
   <MazInputCode v-model="code" size="xs" />
   <MazInputCode v-model="code" size="sm" />