@maz-ui/mcp 5.0.0-beta.4 → 5.0.0-beta.41

package/docs/src/blog/v5.md

@@ -90,22 +90,20 @@ npx @maz-ui/upgrade ./ --dry-run
 npx @maz-ui/upgrade ./
 ```
 
-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.
-
-It respects your `.gitignore`, walks `.vue`/`.css`/`.ts`/`.tsx`/`.cts`/`.mts`/`.js`/`.jsx`/`.cjs`/`.mjs` and `package.json`, and skips the usual build dirs.
+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)
 
 ### `@maz-ui/mcp` — for everything else
 
 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.
 
-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.
+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.
 
 ```bash
 # Claude Code
 claude mcp add maz-ui npx @maz-ui/mcp --scope project
 ```
 
-Cursor, Windsurf, VS Code Copilot, Cline and Claude Desktop are all in the [MCP guide](/guide/mcp).
+Cursor, Windsurf, VS Code Copilot, Cline and Claude Desktop are all in the [MCP guide](/ecosystem/mcp).
 
 ### The full guide
 
@@ -157,11 +155,11 @@ export default defineNuxtConfig({
 ## Essential Links
 
 - **[v5 Migration Guide](/guide/migration-v5)** — every breaking change, the upgrade CLI, the MCP flow
-- **[Theming](/guide/themes)** — preset authoring, `scales` and `components` blocks, runtime switching
+- **[Theming](/ecosystem/themes)** — preset authoring, `scales` and `components` blocks, runtime switching
 - **[Browser Support](/guide/browser-support)** — minimum versions and the features they enable
 - **[Tailwind integration](/guide/tailwind)** — for consumers who ship their own Tailwind setup
 - **[`@maz-ui/upgrade` README](https://github.com/LouisMazel/maz-ui/tree/master/packages/upgrade)** — full transform list and CLI reference
-- **[Model Context Protocol (MCP)](/guide/mcp)** — connect AI assistants to the Maz-UI docs
+- **[Model Context Protocol (MCP)](/ecosystem/mcp)** — connect AI assistants to the Maz-UI docs
 - **[GitHub Repository](https://github.com/LouisMazel/maz-ui)** — source code & issues
 - **[Changelog](https://github.com/LouisMazel/maz-ui/blob/master/CHANGELOG.md)** — detailed release notes
 

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

@@ -15,7 +15,7 @@ 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" />
+<MazAvatar src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80" />
 
 ```vue
 <script lang="ts" setup>
@@ -87,7 +87,6 @@ function clicked() { console.log('clicked') }
     target="_blank"
     rounded-size="none"
     clickable
-    no-size
   >
     <template #icon>
       <MazIcon icon="/eye.svg" />
@@ -108,12 +107,43 @@ function clicked() { console.log('clicked') }
 </template>
 ```
 
+## Initials from caption
+
+When no `src` is provided, `MazAvatar` displays initials generated from the `caption`. The `letter-count` prop (default `2`) controls how many letters are displayed:
+
+- **Single word**: the first `letter-count` characters of the word are used.
+- **Multiple words**: the first letter of each of the first `letter-count` words is used.
+
+Initials are always uppercased.
+
+<div class="flex gap-05 items-center flex-wrap">
+  <MazAvatar caption="admin" size="3rem" />
+  <MazAvatar caption="admin" :letter-count="3" size="3rem" />
+  <MazAvatar caption="Louis Mazel" size="3rem" />
+  <MazAvatar caption="Jean Claude Dus" :letter-count="3" size="3rem" />
+</div>
+
+```vue
+<template>
+  <!-- "AD" -->
+  <MazAvatar caption="admin" />
+  <!-- "ADM" -->
+  <MazAvatar caption="admin" :letter-count="3" />
+  <!-- "LM" -->
+  <MazAvatar caption="Louis Mazel" />
+  <!-- "JCD" -->
+  <MazAvatar caption="Jean Claude Dus" :letter-count="3" />
+</template>
+```
+
 ## On Error
 
-<MazAvatar @error="error" />
+When no `src` (and no `caption`) is provided, or when the image fails to load, `MazAvatar` displays the default `no-image` placeholder.
+
+<MazAvatar @error="error" src="https://broken-link-image-src.example" />
 
 ```html
-<MazAvatar @error="error" />
+<MazAvatar @error="error" src="https://broken-link-image-src.example" />
 ```
 
 ## Fallback image loaded on error
@@ -171,6 +201,24 @@ These modes are native use an `HTMLImageElement` with the `loading` attribute. (
 <MazAvatar loading="eager" src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123" />
 ```
 
+## Image height full
+
+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.
+
+<div class="flex gap-05 items-center flex-wrap">
+  <MazAvatar class="vp-raw" size="4rem" src="https://placedog.net/300/200?id=7" />
+  <MazAvatar class="vp-raw" size="4rem" image-height-full src="https://placedog.net/300/200?id=7" />
+</div>
+
+```vue
+<template>
+  <!-- default: width 100% -->
+  <MazAvatar src="https://placedog.net/300/200" />
+  <!-- height 100%, cropped on the sides -->
+  <MazAvatar image-height-full src="https://placedog.net/300/200" />
+</template>
+```
+
 <script lang="ts" setup>
   const clicked = () => { console.log('clicked') }
   const error = (el) => { console.error('error', el) }

package/docs/src/components/maz-bottom-sheet.md

@@ -1,6 +1,6 @@
 ---
 title: MazBottomSheet
-description: MazBottomSheet is a standalone component like a simple dialog but at the bottom of screen. Useful for mobile UX.
+description: MazBottomSheet is a standalone component like a simple dialog but anchored at the bottom of the screen. Full-width on mobile and constrained/centered on desktop, with a header (icon, title, close button), a footer and many replaceable slots. Useful for mobile UX.
 ---
 
 # {{ $frontmatter.title }}
@@ -10,14 +10,250 @@ description: MazBottomSheet is a standalone component like a simple dialog but a
 <!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ::: tip
-This component uses the `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md), so you can implement this component anywhere and it inherits all its props
+This component uses the `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md), so you can implement this component anywhere and it inherits all its props (`persistent`, `closeOnEscape`, etc.)
 :::
 
-## Interactive Demo
+## Basic usage
+
+The sheet has a header (with the `title` and a close button) and an optional `footer` slot. It opens full-width on mobile and is constrained/centered on desktop (see [Max width](#max-width)).
+
+<ComponentDemo expanded>
+  <MazBtn @click="basicOpened = true">Open Bottom Sheet</MazBtn>
+
+  <MazBottomSheet v-model="basicOpened" title="Bottom Sheet Title">
+    <p>Your content goes here.</p>
+    <template #footer="{ close }">
+      <MazBtn color="transparent" @click="close">Cancel</MazBtn>
+      <MazBtn @click="close">Confirm</MazBtn>
+    </template>
+  </MazBottomSheet>
+
+<template #code>
+
+```vue
+<script setup>
+import MazBottomSheet from 'maz-ui/components/MazBottomSheet'
+import { ref } from 'vue'
+
+const basicOpened = ref(false)
+</script>
+
+<template>
+  <MazBtn @click="basicOpened = true">
+    Open Bottom Sheet
+  </MazBtn>
+
+  <MazBottomSheet v-model="basicOpened" title="Bottom Sheet Title">
+    <p>Your content goes here.</p>
+
+    <template #footer="{ close }">
+      <MazBtn color="transparent" @click="close">
+        Cancel
+      </MazBtn>
+      <MazBtn @click="close">
+        Confirm
+      </MazBtn>
+    </template>
+  </MazBottomSheet>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Swipe to close (iOS-like)
+
+By default a drag handle (grab bar) is shown at the top of the sheet, and you can **close the sheet by dragging that handle down** - the sheet follows your pointer and either dismisses (past the threshold) or snaps back. This works with both touch and mouse.
+
+Disable it with `:swipe-to-close="false"` (the handle is then hidden too), or replace the handle with the `#handle` slot. A `persistent` sheet never dismisses on swipe: it snaps back instead.
+
+<ComponentDemo>
+  <MazBtn @click="swipeOpened = true">Open swipeable sheet</MazBtn>
+
+  <MazBottomSheet v-model="swipeOpened" title="Drag me down">
+    <p>Grab the bar at the top and drag down to close, or release before the threshold to snap back.</p>
+  </MazBottomSheet>
+
+<template #code>
+
+```html
+<!-- enabled by default -->
+<MazBottomSheet v-model="swipeOpened" title="Drag me down">
+  <p>Grab the bar at the top and drag down to close.</p>
+</MazBottomSheet>
+
+<!-- disable the handle and the gesture -->
+<MazBottomSheet v-model="swipeOpened" :swipe-to-close="false" title="No swipe" />
+
+<!-- custom handle -->
+<MazBottomSheet v-model="swipeOpened" title="Custom handle">
+  <template #handle>
+    <span class="maz:h-1.5 maz:w-12 maz:rounded-full maz:bg-primary" />
+  </template>
+</MazBottomSheet>
+```
+
+  </template>
+</ComponentDemo>
+
+## Header with an icon
+
+Pass an `icon` (an icon value or a full `MazIconProps` object) to display it on the left of the title.
+
+<ComponentDemo>
+  <MazBtn @click="iconOpened = true">Open with icon</MazBtn>
+
+  <MazBottomSheet v-model="iconOpened" title="Notifications" icon="/bell.svg">
+    <p>You have 3 new notifications.</p>
+    <template #footer="{ close }">
+      <MazBtn @click="close">Mark all as read</MazBtn>
+    </template>
+  </MazBottomSheet>
+
+<template #code>
+
+```html
+<MazBottomSheet v-model="iconOpened" title="Notifications" icon="/bell.svg">
+  <p>You have 3 new notifications.</p>
+
+  <template #footer="{ close }">
+    <MazBtn @click="close">Mark all as read</MazBtn>
+  </template>
+</MazBottomSheet>
+```
+
+  </template>
+</ComponentDemo>
+
+## Replaceable slots
+
+Everything in the header is replaceable: use `#icon` and `#title` to customize parts of the default header, or `#header` to replace the whole header (you get the `close` function as a binding).
+
+<ComponentDemo>
+  <MazBtn @click="slotsOpened = true">Open custom header</MazBtn>
+
+  <MazBottomSheet v-model="slotsOpened">
+    <template #icon>
+      <MazAvatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100" size="sm" />
+    </template>
+    <template #title>
+      <span class="maz:text-primary">Custom title</span>
+    </template>
+    <p>The icon and the title slots are fully replaceable.</p>
+  </MazBottomSheet>
+
+<template #code>
+
+```html
+<MazBottomSheet v-model="slotsOpened">
+  <template #icon>
+    <MazAvatar src="/avatar.jpg" size="sm" />
+  </template>
+
+  <template #title>
+    <span class="maz:text-primary">Custom title</span>
+  </template>
+
+  <p>The icon and the title slots are fully replaceable.</p>
+</MazBottomSheet>
+
+<!-- or replace the whole header -->
+<MazBottomSheet v-model="slotsOpened">
+  <template #header="{ close }">
+    <div class="maz:flex maz:items-center maz:justify-between maz:p-4">
+      <strong>My header</strong>
+      <MazBtn size="sm" color="transparent" @click="close">Close</MazBtn>
+    </div>
+  </template>
+</MazBottomSheet>
+```
+
+  </template>
+</ComponentDemo>
+
+## Max width
+
+On mobile the sheet is always **full-width**. From the tablet breakpoint and up, it is **constrained** to `max-width` and centered horizontally. The default `max-width` is `35rem`; pass the `max-width` prop (a [`MazSizeUnit`](#props)) to override it.
+
+<ComponentDemo>
+  <MazBtn @click="wideOpened = true">Open wide sheet</MazBtn>
+
+  <MazBottomSheet v-model="wideOpened" title="Wide sheet" max-width="60rem">
+    <p>This sheet is constrained to 60rem on desktop and full-width on mobile.</p>
+  </MazBottomSheet>
+
+<template #code>
+
+```html
+<MazBottomSheet v-model="wideOpened" title="Wide sheet" max-width="60rem">
+  <p>This sheet is constrained to 60rem on desktop and full-width on mobile.</p>
+</MazBottomSheet>
+```
+
+  </template>
+</ComponentDemo>
+
+## Without header
+
+Hide the whole header with `hide-header`, or only the close button with `hide-close-button`.
+
+<ComponentDemo>
+  <MazBtn @click="noHeaderOpened = true">Open without header</MazBtn>
+
+  <MazBottomSheet v-model="noHeaderOpened" hide-header>
+    <div class="maz:flex maz:flex-col maz:gap-3 maz:text-center">
+      <p>No header here, you control the whole layout.</p>
+      <MazBtn @click="noHeaderOpened = false">Got it</MazBtn>
+    </div>
+  </MazBottomSheet>
+
+<template #code>
+
+```html
+<MazBottomSheet v-model="noHeaderOpened" hide-header>
+  <div class="maz:flex maz:flex-col maz:gap-3 maz:text-center">
+    <p>No header here, you control the whole layout.</p>
+    <MazBtn @click="noHeaderOpened = false">Got it</MazBtn>
+  </div>
+</MazBottomSheet>
+```
+
+  </template>
+</ComponentDemo>
+
+## Persistent
+
+A `persistent` sheet cannot be closed by clicking outside or pressing escape, and the close button is removed. Provide your own action to close it.
+
+<ComponentDemo>
+  <MazBtn @click="persistentOpened = true">Open persistent sheet</MazBtn>
+
+  <MazBottomSheet v-model="persistentOpened" title="Action required" icon="/exclamation-triangle.svg" persistent>
+    <p>You must confirm before closing this sheet.</p>
+    <template #footer>
+      <MazBtn @click="persistentOpened = false">I understand</MazBtn>
+    </template>
+  </MazBottomSheet>
+
+<template #code>
+
+```html
+<MazBottomSheet v-model="persistentOpened" title="Action required" persistent>
+  <p>You must confirm before closing this sheet.</p>
+
+  <template #footer>
+    <MazBtn @click="persistentOpened = false">I understand</MazBtn>
+  </template>
+</MazBottomSheet>
+```
+
+  </template>
+</ComponentDemo>
+
+## Full example
 
 <ComponentDemo expanded>
   <div class="maz:flex maz:flex-col maz:gap-4">
-    <!-- Product Selection Demo -->
     <MazCard>
       <template #title>
         <div class="maz:flex maz:items-center maz:gap-3">
@@ -60,9 +296,8 @@ This component uses the `<Teleport to="body">` with [MazBackdrop](./maz-backdrop
       </div>
     </MazCard>
   </div>
-  <MazBottomSheet v-model="isProductOpen" title="Customize Your Shoes">
+  <MazBottomSheet v-model="isProductOpen" title="Customize Your Shoes" icon="/cog.svg" :padding="false">
     <div class="maz:space-y-6 maz:p-6">
-      <!-- Size Selection -->
       <div>
         <h4 class="maz:text-lg maz:font-semibold maz:mb-3">Select Size</h4>
         <div class="maz:grid maz:grid-cols-4 maz:gap-2">
@@ -103,19 +338,17 @@ This component uses the `<Teleport to="body">` with [MazBackdrop](./maz-backdrop
           :max="10"
         />
       </div>
-      <div class="maz:flex maz:gap-3 maz:pt-4">
-        <MazBtn color="primary" class="maz:flex-1" @click="addToCart">
-          <MazIcon icon="/shopping-cart.svg" class="maz:me-2" />
-          Add to Cart (${{ (129.99 * quantity).toFixed(2) }})
-        </MazBtn>
-        <MazBtn color="secondary" @click="isProductOpen = false">
-          Cancel
-        </MazBtn>
-      </div>
     </div>
+    <template #footer="{ close }">
+      <MazBtn color="transparent" @click="close">Cancel</MazBtn>
+      <MazBtn color="primary" @click="addToCart">
+        <MazIcon icon="/shopping-cart.svg" class="maz:me-2" />
+        Add to Cart (${{ (129.99 * quantity).toFixed(2) }})
+      </MazBtn>
+    </template>
   </MazBottomSheet>
 
-  <MazBottomSheet v-model="isUserOpen" title="Profile Settings">
+  <MazBottomSheet v-model="isUserOpen" title="Profile Settings" icon="/user.svg" max-width="48rem" :padding="false">
     <div class="maz:space-y-6 maz:p-6">
       <div class="maz:flex maz:items-center maz:gap-4 maz:p-4 maz:bg-secondary/10 maz:rounded-lg">
         <MazAvatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100" size="xl" />
@@ -160,173 +393,63 @@ This component uses the `<Teleport to="body">` with [MazBackdrop](./maz-backdrop
           <MazSwitch v-model="userForm.darkMode" />
         </div>
       </div>
-      <div class="maz:flex maz:gap-3 maz:pt-4">
-        <MazBtn color="primary" class="maz:flex-1" @click="saveSettings">
-          <MazIcon icon="/check.svg" class="maz:me-2" />
-          Save Changes
-        </MazBtn>
-        <MazBtn color="secondary" @click="isUserOpen = false">
-          Cancel
-        </MazBtn>
-      </div>
     </div>
+    <template #footer="{ close }">
+      <MazBtn color="transparent" @click="close">Cancel</MazBtn>
+      <MazBtn color="primary" @click="saveSettings">
+        <MazIcon icon="/check.svg" class="maz:me-2" />
+        Save Changes
+      </MazBtn>
+    </template>
   </MazBottomSheet>
 
 <template #code>
 
 ```vue
-<template>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <!-- Product Card -->
-    <MazCard>
-      <template #title>
-        <div class="maz:flex maz:items-center maz:gap-3">
-          <MazAvatar src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=100" size="lg" />
-          <div>
-            <h3 class="maz:text-lg maz:font-semibold">
-              Nike Air Max
-            </h3>
-            <p class="maz:text-sm maz:text-muted">
-              Premium Running Shoes
-            </p>
-          </div>
-        </div>
-      </template>
-
-      <div class="maz:space-y-4">
-        <div class="maz:flex maz:items-center maz:justify-between">
-          <span class="maz:font-medium">Price:</span>
-          <span class="maz:text-xl maz:font-bold maz:text-primary">$129.99</span>
-        </div>
-
-        <div class="maz:flex maz:gap-2">
-          <MazBtn color="primary" @click="openProductOptions">
-            Customize Options
-          </MazBtn>
-          <MazBtn color="secondary" @click="openUserSettings">
-            Profile Settings
-          </MazBtn>
-        </div>
-      </div>
-    </MazCard>
-  </div>
+<script setup>
+import MazBottomSheet from 'maz-ui/components/MazBottomSheet'
+import { reactive, ref } from 'vue'
 
-  <!-- Product Options Bottom Sheet -->
-  <MazBottomSheet v-model="isProductOpen" title="Customize Your Shoes">
-    <div class="maz:space-y-6 maz:p-6">
-      <!-- Size Selection -->
-      <div>
-        <h4 class="maz:mb-3 maz:text-lg maz:font-semibold">
-          Select Size
-        </h4>
-        <div class="maz:grid maz:grid-cols-4 maz:gap-2">
-          <MazBtn
-            v-for="size in sizes"
-            :key="size"
-            :color="selectedOptions.size === size ? 'primary' : 'secondary'"
-            size="sm"
-            @click="selectedOptions.size = size"
-          >
-            {{ size }}
-          </MazBtn>
-        </div>
-      </div>
+const isProductOpen = ref(false)
+const quantity = ref(1)
+const selectedOptions = reactive({ size: '', color: '' })
 
-      <!-- Color Selection with Visual Swatches -->
-      <div>
-        <h4 class="maz:mb-3 maz:text-lg maz:font-semibold">
-          Select Color
-        </h4>
-        <div class="maz:grid maz:grid-cols-3 maz:gap-3">
-          <div
-            v-for="color in colors"
-            :key="color.name"
-            class="maz:flex maz:cursor-pointer maz:flex-col maz:items-center maz:rounded-lg maz:border-2 maz:p-3"
-            :class="selectedOptions.color === color.name ? 'maz:border-primary' : 'maz:border-divider'"
-            @click="selectedOptions.color = color.name"
-          >
-            <div
-              class="maz:mb-2 maz:size-8 maz:rounded-full"
-              :style="{ backgroundColor: color.value }"
-            />
-            <span class="maz:text-sm">{{ color.name }}</span>
-          </div>
-        </div>
-      </div>
+function openProductOptions() {
+  isProductOpen.value = true
+}
+</script>
 
-      <!-- Quantity Input -->
-      <MazInputNumber
-        v-model="quantity"
-        label="Quantity"
-        :min="1"
-        :max="10"
-      />
-
-      <!-- Actions -->
-      <div class="maz:flex maz:gap-3 maz:pt-4">
-        <MazBtn color="primary" class="maz:flex-1" @click="addToCart">
-          Add to Cart (${{ (129.99 * quantity).toFixed(2) }})
-        </MazBtn>
-        <MazBtn color="secondary" @click="isProductOpen = false">
-          Cancel
-        </MazBtn>
-      </div>
-    </div>
-  </MazBottomSheet>
+<template>
+  <MazBtn color="primary" @click="openProductOptions">
+    Customize Options
+  </MazBtn>
 
-  <MazBottomSheet v-model="isUserOpen" title="Profile Settings">
+  <MazBottomSheet v-model="isProductOpen" title="Customize Your Shoes" icon="/cog.svg" :padding="false">
     <div class="maz:space-y-6 maz:p-6">
-      <div class="maz:flex maz:items-center maz:gap-4 maz:p-4 maz:bg-secondary/10 maz:rounded-lg">
-        <MazAvatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100" size="xl" />
-        <div>
-          <h4 class="maz:font-semibold">John Doe</h4>
-          <p class="maz:text-muted maz:text-sm">john.doe@example.com</p>
-          <MazBadge color="success" size="xs">Premium Member</MazBadge>
-        </div>
-      </div>
-      <div class="maz:space-y-4">
-        <MazInput
-          v-model="userForm.name"
-          label="Full Name"
-          placeholder="Enter your name"
-        />
-        <MazInput
-          v-model="userForm.email"
-          label="Email"
-          type="email"
-          placeholder="Enter your email"
-        />
-        <MazSelect
-          v-model="userForm.country"
-          label="Country"
-          :options="countries"
-          placeholder="Select your country"
-        />
-        <div class="maz:flex maz:items-center maz:justify-between maz:p-4 maz:border maz:border-divider maz:rounded-lg">
-          <div>
-            <p class="maz:font-medium">Email Notifications</p>
-            <p class="maz:text-sm maz:text-muted">Receive updates about your orders</p>
-          </div>
-          <MazSwitch v-model="userForm.notifications" />
-        </div>
-        <div class="maz:flex maz:items-center maz:justify-between maz:p-4 maz:border maz:border-divider maz:rounded-lg">
-          <div>
-            <p class="maz:font-medium">Dark Mode</p>
-            <p class="maz:text-sm maz:text-muted">Switch to dark theme</p>
-          </div>
-          <MazSwitch v-model="userForm.darkMode" />
-        </div>
-      </div>
-      <div class="maz:flex maz:gap-3 maz:pt-4">
-        <MazBtn color="primary" class="maz:flex-1" @click="saveSettings">
-          <MazIcon icon="/check.svg" class="maz:me-2" />
-          Save Changes
-        </MazBtn>
-        <MazBtn color="secondary" @click="isUserOpen = false">
-          Cancel
+      <h4 class="maz:mb-3 maz:text-lg maz:font-semibold">
+        Select Size
+      </h4>
+      <div class="maz:grid maz:grid-cols-4 maz:gap-2">
+        <MazBtn
+          v-for="size in sizes"
+          :key="size"
+          :color="selectedOptions.size === size ? 'primary' : 'secondary'"
+          size="sm"
+          @click="selectedOptions.size = size"
+        >
+          {{ size }}
         </MazBtn>
       </div>
     </div>
+
+    <template #footer="{ close }">
+      <MazBtn color="transparent" @click="close">
+        Cancel
+      </MazBtn>
+      <MazBtn color="primary" @click="addToCart">
+        Add to Cart (${{ (129.99 * quantity).toFixed(2) }})
+      </MazBtn>
+    </template>
   </MazBottomSheet>
 </template>
 ```
@@ -339,6 +462,14 @@ This component uses the `<Teleport to="body">` with [MazBackdrop](./maz-backdrop
 <script setup>
   import { ref, reactive } from 'vue'
 
+  const basicOpened = ref(false)
+  const swipeOpened = ref(false)
+  const iconOpened = ref(false)
+  const slotsOpened = ref(false)
+  const wideOpened = ref(false)
+  const noHeaderOpened = ref(false)
+  const persistentOpened = ref(false)
+
   const isProductOpen = ref(false)
   const isUserOpen = ref(false)
   const quantity = ref(1)

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

@@ -454,7 +454,7 @@ Check out how [MazIcon](./maz-icon.md) works, see all available icons and downlo
 
 :::
 
-### Use [@maz-ui/icons](./../guide/icons.md)
+### Use [@maz-ui/icons](./../ecosystem/icons/.md)
 
 ::: details View code